/* eccoses landing — four look variants via data-look on */ :root, [data-look="ember"] { --bg: #070605; --bg2: #100c09; --ink: #f3ece3; --muted: #9a8d7c; --ember: #c4b5a0; --ember2: #e6d3b0; --line: #2a241c; --panel: rgba(16, 14, 12, 0.72); --hero-glow: radial-gradient(ellipse 70% 55% at 50% 10%, #3a2a1c 0%, transparent 58%), radial-gradient(circle at 80% 80%, #1a120c 0%, transparent 40%); --hero-wash: linear-gradient(180deg, #1a140f 0%, #070605 70%); --card: #120f0c; --invert: 0; --paper: 0; --scan: 0; --void-stars: 0; color-scheme: dark; } [data-look="void"] { --bg: #030304; --bg2: #0a0a0d; --ink: #eceae6; --muted: #7c7c84; --ember: #c8c4be; --ember2: #f2efe8; --line: #1c1c22; --panel: rgba(10, 10, 14, 0.78); --hero-glow: radial-gradient(ellipse 80% 50% at 50% -10%, #1c1e28 0%, transparent 55%); --hero-wash: linear-gradient(180deg, #08080c 0%, #030304 65%); --card: #0c0c10; --void-stars: 1; --scan: 0; --paper: 0; } [data-look="neon"] { --bg: #05060a; --bg2: #081018; --ink: #e8f6ff; --muted: #6d8a9c; --ember: #3ee0d0; --ember2: #ff4d9a; --line: #163040; --panel: rgba(6, 14, 22, 0.78); --hero-glow: radial-gradient(ellipse 60% 50% at 20% 0%, #0a3a38 0%, transparent 50%), radial-gradient(ellipse 50% 40% at 90% 20%, #3a1030 0%, transparent 45%); --hero-wash: linear-gradient(180deg, #07141a 0%, #05060a 70%); --card: #071018; --scan: 1; --void-stars: 0; --paper: 0; } [data-look="paper"] { --bg: #efe6d6; --bg2: #e4d8c4; --ink: #1c1612; --muted: #6a5d50; --ember: #8b3a1a; --ember2: #c45a24; --line: #d4c4ae; --panel: rgba(255, 248, 236, 0.78); --hero-glow: radial-gradient(ellipse 70% 55% at 70% 0%, #f6efe0 0%, transparent 55%); --hero-wash: linear-gradient(180deg, #f4ead8 0%, #efe6d6 70%); --card: #f7f0e4; --paper: 1; --scan: 0; --void-stars: 0; color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; } html { background: var(--bg); } body { min-height: 100vh; background: var(--bg); color: var(--ink); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 15px; line-height: 1.65; overflow-x: hidden; } body::before { content: ""; pointer-events: none; position: fixed; inset: 0; z-index: 8; opacity: 0.07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } [data-look="paper"] body::before { opacity: 0.12; mix-blend-mode: multiply; } [data-look="neon"] body::after { content: ""; pointer-events: none; position: fixed; inset: 0; z-index: 7; opacity: calc(var(--scan) * 0.09); background: repeating-linear-gradient( to bottom, transparent 0 2px, rgba(0, 0, 0, 0.35) 2px 3px ); } a { color: var(--ember2); } a:hover { color: var(--ink); } .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 14px 22px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .wordmark { font-family: "Instrument Serif", Georgia, serif; font-size: 28px; color: var(--ember); text-decoration: none; letter-spacing: 0.02em; } .wordmark:hover { color: var(--ember2); } .top-nav { display: flex; gap: 16px; margin-left: 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .top-nav a { color: var(--muted); text-decoration: none; } .top-nav a:hover { color: var(--ember); } .look-switch { margin-left: auto; display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--line); background: var(--panel); } .look-kicker { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding: 0 8px; } .look-switch button { appearance: none; border: 0; background: transparent; color: var(--muted); font: 500 10px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 10px; cursor: pointer; } .look-switch button[aria-pressed="true"] { background: var(--ember); color: var(--bg); } .look-switch button:hover { color: var(--ink); } .look-switch button[aria-pressed="true"]:hover { color: var(--bg); } .hero { position: relative; min-height: min(92vh, 920px); padding: 72px 28px 80px; display: grid; place-items: end start; isolation: isolate; overflow: hidden; background: var(--hero-wash); } .hero-glow { position: absolute; inset: 0; background: var(--hero-glow); z-index: 0; } .hero-stars { position: absolute; inset: 0; z-index: 0; opacity: var(--void-stars); background-image: radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 40% 70%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 78% 18%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 88% 64%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 60% 40%, #fff6 50%, transparent 51%), radial-gradient(1.4px 1.4px at 22% 80%, #fff 50%, transparent 51%); } .hero-media { position: absolute; inset: 0; z-index: 1; } .hero-media picture, .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; display: block; opacity: 0.88; } [data-look="paper"] .hero-media img { opacity: 0.62; filter: contrast(0.95) sepia(0.12); } [data-look="void"] .hero-media img { opacity: 0.7; } [data-look="neon"] .hero-media img { opacity: 0.78; filter: saturate(1.08); } .hero-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, var(--bg) 6%, color-mix(in srgb, var(--bg) 35%, transparent) 42%, transparent 68%), linear-gradient(180deg, transparent 28%, var(--bg) 94%); } .hero-copy { position: relative; z-index: 3; width: min(920px, 100%); } .kicker { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ember); margin: 0 0 14px; } h1, h2, .display { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -0.03em; line-height: 0.98; } .hero h1 { font-size: clamp(48px, 9vw, 108px); margin: 0 0 22px; max-width: 14ch; } .hero h1 em { font-style: italic; color: var(--ember); } .dek { font-size: clamp(15px, 1.6vw, 18px); color: var(--muted); max-width: 42em; margin: 0 0 28px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 13px 20px; font: 500 12px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--ember); color: var(--bg); background: var(--ember); } .btn:hover { background: var(--ember2); border-color: var(--ember2); color: var(--bg); } .btn.ghost { background: transparent; color: var(--ember); } .btn.ghost:hover { color: var(--bg); background: var(--ember); } .price-note { margin: 18px 0 0; color: var(--muted); font-size: 12px; max-width: 46em; } .section { padding: 88px 28px; border-top: 1px solid var(--line); } .inner { width: min(1120px, 100%); margin: 0 auto; } .section h2 { font-size: clamp(36px, 5.5vw, 64px); margin: 0 0 16px; max-width: 16ch; } .section h2 em { font-style: italic; color: var(--ember); } .section .lead { color: var(--muted); max-width: 46em; margin: 0 0 36px; } .grid-4, .grid-2 { display: grid; gap: 18px; } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-2 { grid-template-columns: 1.1fr 0.9fr; align-items: center; } .card { background: var(--card); border: 1px solid var(--line); padding: 22px 20px 24px; min-height: 180px; } .card .n { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember); margin: 0 0 12px; } .card h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 28px; margin: 0 0 10px; letter-spacing: -0.02em; line-height: 1.1; } .card p { margin: 0; color: var(--muted); } .media { position: relative; min-height: 360px; aspect-ratio: 3 / 2; background: var(--hero-glow), var(--bg2); border: 1px solid var(--line); overflow: hidden; } .media picture, .media img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: center; display: block; } .band { background: var(--bg2); } .split-copy { padding-right: 24px; } .soon { display: inline-block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--ember); color: var(--ember); padding: 4px 8px; margin-bottom: 14px; } .cta-band { text-align: center; padding: 100px 28px 110px; } .cta-band h2 { font-size: clamp(40px, 6vw, 80px); margin: 0 auto 18px; max-width: 16ch; } .cta-band .lead { margin-left: auto; margin-right: auto; } .cta-band .cta-row { justify-content: center; } .site-footer { border-top: 1px solid var(--line); padding: 22px 28px 40px; display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--ember); } .site-footer .grow { flex: 1; } @media (max-width: 980px) { .grid-4, .grid-2 { grid-template-columns: 1fr; } .split-copy { padding-right: 0; } .hero { min-height: auto; padding-top: 48px; } } @media (max-width: 720px) { .top { flex-wrap: wrap; } .look-switch { width: 100%; margin-left: 0; overflow-x: auto; } .top-nav { width: 100%; margin: 0; } .hero { padding: 40px 18px 56px; } .section { padding: 64px 18px; } }