/* =========================================================== MileMemos — "A mixtape for the road" Vintage editorial / cassette-tape / race-day field-notes ========================================================= */ :root { /* Paper + ink */ --paper: #f4ecdb; --paper-warm: #efe4cd; --paper-deep: #e6d8b8; --paper-edge: #d8c69e; --ink: #14110d; --ink-soft: #3a342a; --ink-faint: #7a6e58; --ink-ghost: #a89c80; /* Accents */ --flame: #ff5e3a; /* race-bib orange */ --flame-deep: #d23f1d; --gold: #f6c545; --gold-deep: #d8a82a; --moss: #2d6a4f; /* mile-marker green */ --moss-soft: #5e8b75; --sky: #6c9bcf; --plum: #6e3a55; /* Cassette tape */ --cassette: #1c1814; --cassette-edge: #3a3127; --cassette-label: #f6efe1; --tape-spool: #2a241d; /* System */ --radius: 14px; --radius-l: 22px; --shadow: 0 14px 30px -16px rgba(20, 17, 13, 0.45); --shadow-soft: 0 6px 14px -8px rgba(20, 17, 13, 0.35); --content-max: 1120px; --serif: 'Courier Prime', 'Courier New', ui-monospace, monospace; --sans: 'Courier Prime', 'Courier New', ui-monospace, monospace; --mono: 'Courier Prime', 'Courier New', ui-monospace, monospace; } * { box-sizing: border-box; } html, body, #root { height: 100%; } html { color-scheme: light; /* iOS Safari needs overflow-x clamped at the root element, not just body — the scrolling viewport is , so body's overflow-x is ignored when a descendant exceeds 100vw. width:100% guards against the same. */ overflow-x: hidden; width: 100%; } body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--ink); background-color: var(--paper); background-image: /* subtle paper grain */ url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27220%27 height=%27220%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.078 0 0 0 0 0.066 0 0 0 0 0.05 0 0 0 0.06 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E"), radial-gradient(circle at 18% 0%, rgba(246, 197, 69, 0.18), transparent 45%), radial-gradient(circle at 95% 8%, rgba(255, 94, 58, 0.10), transparent 40%), radial-gradient(circle at 50% 100%, rgba(45, 106, 79, 0.08), transparent 50%); background-attachment: fixed, fixed, fixed, fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; width: 100%; max-width: 100vw; } #root { width: 100%; max-width: 100vw; overflow-x: hidden; } /* Make sure no media or inline asset can punch through the viewport. */ img, svg, video, canvas, iframe { max-width: 100%; } ::selection { background: var(--flame); color: var(--paper); } a { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 30%; transition: background-size 0.18s ease; } a:hover { background-size: 100% 100%; } /* ----------- Typography ----------- */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; letter-spacing: 0; line-height: 1.1; margin: 0 0 14px; color: var(--ink); } h1 { font-size: clamp(2rem, 5.6vw, 4.2rem); font-weight: 700; line-height: 1.12; } h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.18; } h3 { font-size: clamp(1.05rem, 1.7vw, 1.2rem); font-weight: 700; } em, .italic { font-style: italic; font-weight: 400; } p { margin: 0 0 14px; color: var(--ink-soft); } p.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink); max-width: 60ch; } /* Tabular figures for everything monospace-ish */ .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } /* ----------- Layout primitives ----------- */ .container { max-width: var(--content-max); margin: 0 auto; padding-left: 28px; padding-right: 28px; } main { display: block; } section { padding: 36px 0 48px; position: relative; } /* Tape divider — a simple band with optical "tape sprocket" dots */ .tape-divider { height: 28px; background: radial-gradient(circle at 14px 14px, var(--paper) 3px, transparent 3.4px) repeat-x, var(--ink); background-size: 28px 28px, auto; margin: 0; } .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; } .kicker::before { content: ''; width: 22px; height: 1px; background: var(--ink-faint); } /* ----------- Header ----------- */ .site-header { position: sticky; top: 0; z-index: 30; background: rgba(244, 236, 219, 0.82); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(20, 17, 13, 0.12); } .site-header .inner { display: flex; align-items: center; gap: 14px; padding: 14px 28px; max-width: var(--content-max); margin: 0 auto; } .brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-weight: 700; font-size: 1.05rem; letter-spacing: 0; color: var(--ink); background: none; padding: 4px 0; } .brand:hover { background: none; } .brand-logo { display: block; width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid var(--ink); object-fit: cover; } .brand-name { font-weight: 700; } .nav { margin-left: auto; display: flex; gap: 22px; align-items: center; } .nav a { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); background: none; padding: 6px 0; position: relative; } .nav a:hover { color: var(--ink); background: none; } .nav a.active { color: var(--ink); background: none; } .nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 6px; background: var(--flame); border-radius: 2px; transform: skewX(-12deg); } .nav .pill { background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 999px; font-weight: 600; } .nav .pill:hover { background: var(--flame); color: var(--paper); } /* ----------- Buttons ----------- */ .btn { --bg: var(--ink); --fg: var(--paper); --shadow-c: var(--gold); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; border: 2px solid var(--ink); background: var(--bg); color: var(--fg); border-radius: 999px; cursor: pointer; text-decoration: none; position: relative; transition: transform 0.12s cubic-bezier(.4, 1.7, .55, 1), box-shadow 0.12s ease, background 0.15s ease; box-shadow: 4px 4px 0 0 var(--shadow-c); } .btn:hover { background: var(--bg); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--shadow-c); } .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--shadow-c); } .btn:focus-visible { outline: 2px dashed var(--ink); outline-offset: 4px; } .btn-primary { --bg: var(--flame); --fg: var(--paper); --shadow-c: var(--ink); } .btn-primary:hover { --bg: var(--flame-deep); } .btn-secondary { --bg: var(--paper); --fg: var(--ink); --shadow-c: var(--ink); } .btn-secondary:hover { --bg: var(--paper-warm); } .btn-ghost { --bg: transparent; --fg: var(--ink-soft); border-color: transparent; box-shadow: none; } .btn-ghost:hover { background: rgba(20, 17, 13, 0.06); transform: none; box-shadow: none; } .btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: 4px 4px 0 0 var(--shadow-c); } .btn-block { width: 100%; } .btn .arrow { transition: transform 0.18s ease; } .btn:hover .arrow { transform: translateX(4px); } /* ----------- HOME — Hero ----------- */ .hero { position: relative; padding-top: 96px; padding-bottom: 72px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; } .hero-bib { display: inline-flex; flex-direction: column; align-items: center; background: var(--flame); color: var(--paper); border: 3px solid var(--ink); border-radius: 8px; padding: 10px 22px 14px; box-shadow: 5px 5px 0 0 var(--ink); transform: rotate(-3deg); font-family: var(--mono); margin-bottom: 22px; width: max-content; max-width: 100%; } .hero-bib .label { font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; margin-bottom: 2px; opacity: 0.9; white-space: normal; text-align: center; } .hero-bib .number { font-family: var(--serif); font-weight: 800; font-size: 2.25rem; letter-spacing: -0.04em; line-height: 1; } .hero h1 { font-size: clamp(1.9rem, 5.4vw, 4rem); letter-spacing: 0; margin-bottom: 28px; line-height: 1.22; overflow-wrap: break-word; } .hero h1 .underline { position: relative; white-space: nowrap; font-style: italic; } .hero h1 .underline::after { content: ''; position: absolute; left: -6px; right: -6px; bottom: -2px; height: 14px; background: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 12%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M2 8 C 30 2, 60 11, 95 6 S 160 4, 198 7%27 stroke=%27%23ff5e3a%27 stroke-width=%274%27 fill=%27none%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") center / 100% 100% no-repeat; z-index: -1; } .hero h1 .stamp-mile { display: inline-block; border: 3px dashed var(--ink); padding: 0 14px; border-radius: 14px; transform: rotate(-2deg); font-style: normal; font-weight: 800; margin: 0 4px; } .hero .lead { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--ink); margin-bottom: 28px; max-width: 56ch; } .hero .actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .hero .meta-row { margin-top: 36px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .hero .meta-row::before { content: ''; width: 28px; height: 1px; background: var(--ink-faint); } .hero .meta-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--flame); display: inline-block; animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.4; } } /* The animated "now playing" rotator — like a Walkman LED display */ .hero-rotator { display: inline-block; position: relative; height: 1.18em; overflow: hidden; vertical-align: baseline; color: var(--moss); font-style: italic; font-variation-settings: 'opsz' 72; } .hero-rotator > span { display: block; animation: rotator-cycle 11s steps(1, end) infinite; } .hero-rotator > span > i { font-style: italic; display: block; height: 1.18em; } @keyframes rotator-cycle { 0%, 23% { transform: translateY(0); } 25%, 48% { transform: translateY(-1.18em); } 50%, 73% { transform: translateY(-2.36em); } 75%, 98% { transform: translateY(-3.54em); } 100% { transform: translateY(0); } } /* The big route SVG ribbon between hero and "how it works" */ .route-ribbon { display: block; width: 100%; height: 64px; margin-top: 16px; } .route-ribbon path { stroke-dasharray: 6 8; } /* ----- Example memos near the route ribbon ----- */ .example-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 6px; } .example-card { background: var(--paper-warm); border: 1.5px solid var(--ink); border-radius: 8px; padding: 14px 14px 12px; position: relative; box-shadow: 4px 4px 0 0 var(--ink); display: grid; gap: 8px; align-content: start; transition: transform 0.18s ease, box-shadow 0.18s ease; } .example-card:nth-child(8n+1) { transform: rotate(-1deg); } .example-card:nth-child(8n+2) { transform: rotate(0.6deg); } .example-card:nth-child(8n+3) { transform: rotate(-0.4deg); } .example-card:nth-child(8n+4) { transform: rotate(0.8deg); } .example-card:nth-child(8n+5) { transform: rotate(0.5deg); } .example-card:nth-child(8n+6) { transform: rotate(-0.7deg); } .example-card:nth-child(8n+7) { transform: rotate(1deg); } .example-card:nth-child(8n+8) { transform: rotate(-0.5deg); } .example-card:hover { transform: rotate(0) translate(-1px, -2px); box-shadow: 6px 6px 0 0 var(--ink); } .example-mile { display: inline-block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); background: var(--flame); border: 1.5px solid var(--ink); padding: 3px 9px; border-radius: 4px; width: max-content; font-weight: 700; } .example-card:nth-child(4n+2) .example-mile { background: var(--moss); } .example-card:nth-child(4n+3) .example-mile { background: var(--ink); } .example-card:nth-child(4n+4) .example-mile { background: var(--gold); color: var(--ink); } .example-quote { font-style: italic; font-size: 0.92rem; line-height: 1.4; margin: 0; color: var(--ink); } .example-from { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.04em; } @media (max-width: 880px) { .example-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .example-card { transform: none !important; } .example-card:hover { transform: translate(-1px, -2px); } } @media (max-width: 480px) { .example-grid { grid-template-columns: 1fr; gap: 10px; } } /* ----------- "How it works" — Mixtape track listing ----------- */ .tracklist-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 36px; align-items: start; } @media (max-width: 880px) { .tracklist-wrap { grid-template-columns: 1fr; } } .jcard { background: var(--paper-warm); border: 2px solid var(--ink); border-radius: 10px; padding: 22px 24px; position: relative; box-shadow: 8px 8px 0 0 var(--ink); } .jcard::before { content: ''; position: absolute; top: 18px; right: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 2px var(--ink); } .jcard h2 { margin-top: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 12px; } .tracklist { list-style: none; padding: 0; margin: 0; counter-reset: track; } .tracklist li { counter-increment: track; display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px dotted rgba(20, 17, 13, 0.25); } .tracklist li:last-child { border-bottom: 0; padding-bottom: 0; } .tracklist li::before { content: counter(track, decimal-leading-zero); font-family: var(--mono); font-size: 0.85rem; font-weight: 600; color: var(--flame); letter-spacing: 0.04em; } .tracklist .title { font-family: var(--serif); font-size: 1.18rem; font-weight: 700; color: var(--ink); font-variation-settings: 'opsz' 24; } .tracklist .desc { display: block; font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); font-weight: 400; margin-top: 2px; } .tracklist .runtime { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.04em; white-space: nowrap; } /* ---- The cassette tape drawing ---- */ .cassette { position: relative; background: var(--cassette); border: 2px solid var(--ink); border-radius: 14px; padding: 18px 18px 22px; color: var(--paper); box-shadow: 8px 8px 0 0 var(--ink); } .cassette .label { background: var(--cassette-label); border-radius: 6px; padding: 12px 14px 14px; color: var(--ink); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; position: relative; border-top: 6px solid var(--flame); } .cassette .label .top { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(20, 17, 13, 0.4); padding-bottom: 6px; margin-bottom: 8px; font-size: 0.7rem; text-transform: uppercase; } .cassette .label .title { font-family: var(--serif); font-style: italic; font-variation-settings: 'opsz' 72; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; text-transform: none; } .cassette .label .meta { margin-top: 6px; font-size: 0.68rem; letter-spacing: 0.18em; color: var(--ink-faint); display: flex; justify-content: space-between; } .cassette .reels { display: flex; justify-content: space-around; margin-top: 16px; padding: 14px 12px 8px; border-top: 1px solid rgba(244, 236, 219, 0.18); } .reel { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--cassette-edge) 0 14px, transparent 14px), repeating-conic-gradient(from 0deg, var(--paper-deep) 0deg 18deg, var(--paper-edge) 18deg 36deg); border: 2px solid var(--ink); position: relative; display: grid; place-items: center; } .reel::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--cassette); border: 2px solid var(--paper); } .reel.spinning { animation: spin 2.4s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .cassette .window { margin-top: 10px; background: rgba(244, 236, 219, 0.07); border: 1px solid rgba(244, 236, 219, 0.18); border-radius: 8px; height: 68px; display: flex; align-items: center; padding: 8px 14px; gap: 14px; } .cassette .window canvas { flex: 1; height: 56px; width: 100%; display: block; } .cassette .led { font-family: var(--mono); font-weight: 600; font-size: 1.05rem; color: var(--gold); letter-spacing: 0.06em; white-space: nowrap; text-shadow: 0 0 8px rgba(246, 197, 69, 0.3); } .cassette .led .max { color: var(--ink-ghost); } .cassette-controls { display: flex; gap: 10px; margin-top: 14px; justify-content: center; } .tape-btn { min-height: 52px; padding: 10px 22px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; white-space: nowrap; transition: transform 0.1s ease, background 0.15s ease; box-shadow: 3px 3px 0 0 var(--ink); position: relative; } .tape-btn:hover { background: var(--paper-warm); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 var(--ink); } .tape-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--ink); } .tape-btn .glyph { font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .tape-btn.record { background: var(--flame); color: var(--paper); } .tape-btn.record:hover { background: var(--flame-deep); } .tape-btn.record.recording { animation: rec-pulse 1.2s ease-in-out infinite; } @keyframes rec-pulse { 0%, 100% { box-shadow: 3px 3px 0 0 var(--ink); } 50% { box-shadow: 3px 3px 0 0 var(--ink), 0 0 0 6px rgba(255, 94, 58, 0.25); } } .tape-btn[disabled] { opacity: 0.4; cursor: not-allowed; } .tape-btn.stop { background: var(--ink); color: var(--paper); } .tape-btn.stop .glyph { width: 12px; height: 12px; background: var(--paper); border-radius: 2px; } .tape-status { margin-top: 12px; text-align: center; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .tape-status .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); margin-right: 8px; vertical-align: middle; } .tape-status.live .dot { background: var(--flame); animation: pulse 1.4s ease-in-out infinite; } .tape-status.ready .dot { background: var(--moss); } .cassette-preview { margin-top: 14px; background: rgba(244, 236, 219, 0.07); border: 1px solid rgba(244, 236, 219, 0.2); border-radius: 8px; padding: 10px; } .cassette-preview audio { width: 100%; filter: invert(0.96) hue-rotate(180deg); } /* ----------- "Why MileMemos" — postcard scatter ----------- */ .postcard-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 18px 0; } .postcard { background: var(--paper-warm); border: 2px solid var(--ink); border-radius: 6px; padding: 22px 22px 20px; position: relative; box-shadow: 6px 6px 0 0 var(--ink); transition: transform 0.2s ease, box-shadow 0.2s ease; } .postcard:nth-child(1) { transform: rotate(-1.4deg); } .postcard:nth-child(2) { transform: rotate(1deg); } .postcard:nth-child(3) { transform: rotate(-0.6deg); } .postcard:nth-child(4) { transform: rotate(1.2deg); } .postcard:hover { transform: rotate(0) translate(-2px, -4px); box-shadow: 9px 9px 0 0 var(--ink); } .postcard h3 { font-family: var(--serif); font-size: 1.4rem; margin: 8px 0 8px; color: var(--ink); font-variation-settings: 'opsz' 48; } .postcard p { margin: 0; font-size: 0.95rem; } .postcard .stamp { position: absolute; top: -10px; right: 18px; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); transform: rotate(4deg); } .postcard .stamp.flame { background: var(--flame); color: var(--paper); border-color: var(--ink); } .postcard .stamp.moss { background: var(--moss); color: var(--paper); border-color: var(--ink); } .postcard .stamp.gold { background: var(--gold); color: var(--ink); border-color: var(--ink); } /* ----------- Final CTA strip ----------- */ .cta-strip { background: var(--ink); color: var(--paper); border-radius: var(--radius-l); padding: 44px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; position: relative; overflow: hidden; } .cta-strip h2 { color: var(--paper); margin-bottom: 6px; } .cta-strip p { color: rgba(244, 236, 219, 0.78); margin: 0; } .cta-strip::before { content: ''; position: absolute; inset: 0 auto 0 -10px; width: 80%; background: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 600 200%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 120 Q 100 60 220 110 T 460 90 T 700 130%27 stroke=%27%23ff5e3a%27 stroke-width=%272%27 fill=%27none%27 stroke-dasharray=%272 8%27/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: 0.5; pointer-events: none; } @media (max-width: 720px) { .cta-strip { grid-template-columns: 1fr; padding: 28px; } } /* ----------- SEND FLOW ----------- */ .flow-shell { max-width: 580px; margin: 28px auto 64px; padding: 0 16px; } .flow-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .flow-meta .stamp { background: var(--paper); border: 1.5px dashed var(--ink-faint); padding: 3px 10px; border-radius: 999px; } .envelope { background: var(--paper-warm); border: 2px solid var(--ink); border-radius: 12px; padding: 28px 28px 26px; box-shadow: 10px 10px 0 0 var(--ink); position: relative; } .envelope::before { /* faux postage edge band */ content: ''; position: absolute; top: -2px; left: -2px; right: -2px; height: 14px; background: repeating-linear-gradient( 45deg, var(--flame) 0 14px, var(--paper) 14px 28px, var(--ink) 28px 42px, var(--paper) 42px 56px ); border: 2px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0; } .envelope-body { padding-top: 12px; } .envelope h2 { margin-top: 0; font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-bottom: 6px; } .envelope .sub { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 22px; } /* Step ribbon */ .step-ribbon { display: flex; gap: 8px; margin-bottom: 18px; } .step-ribbon .seg { flex: 1; height: 14px; background: repeating-linear-gradient(45deg, var(--paper-deep) 0 6px, var(--paper-warm) 6px 12px); border: 1.5px solid var(--ink); border-radius: 4px; position: relative; overflow: hidden; } .step-ribbon .seg.done { background: var(--ink); } .step-ribbon .seg.done::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 94, 58, 0.55) 6px 12px); } .step-ribbon .seg.current { background: var(--flame); animation: ribbon-shift 2.4s linear infinite; background-image: repeating-linear-gradient(45deg, var(--flame) 0 6px, var(--flame-deep) 6px 12px); background-size: 24px 24px; } @keyframes ribbon-shift { to { background-position: 24px 0; } } /* Form fields styled like a paper form */ .form { display: grid; gap: 16px; } .form .row { display: grid; gap: 6px; position: relative; } .label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); } .input, select.input { width: 100%; padding: 12px 16px; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; color: var(--ink); font: inherit; font-family: var(--sans); font-size: 1rem; transition: box-shadow 0.12s ease, transform 0.12s ease; box-shadow: 3px 3px 0 0 var(--ink); } .input::placeholder { color: var(--ink-ghost); } .input:hover { box-shadow: 4px 4px 0 0 var(--ink); } .input:focus { outline: none; box-shadow: 4px 4px 0 0 var(--flame); transform: translate(-1px, -1px); } .helper { font-size: 0.82rem; color: var(--ink-faint); font-style: italic; font-family: var(--serif); font-variation-settings: 'opsz' 24; } .error { background: rgba(255, 94, 58, 0.10); border: 1.5px solid var(--flame); color: var(--flame-deep); padding: 12px 14px; border-radius: 10px; font-size: 0.92rem; font-weight: 500; } /* Step 1 — TO/FROM postcard */ .tofrom { display: grid; grid-template-columns: 1fr; gap: 20px; position: relative; } .field-group { border: 1.5px solid var(--ink); border-radius: 10px; padding: 14px 16px 16px; background: var(--paper); position: relative; } .field-group .group-label { position: absolute; top: -10px; left: 14px; background: var(--paper-warm); padding: 0 8px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); font-weight: 600; } .field-group .field-group-grid { display: grid; gap: 14px; } .field-group input.input { border-width: 0 0 1.5px 0; background: transparent; border-radius: 0; padding: 8px 2px; box-shadow: none; } .field-group input.input:hover { box-shadow: none; transform: none; } .field-group input.input:focus { box-shadow: none; transform: none; border-color: var(--flame); } /* Step 2 — verification */ .code-box { display: flex; justify-content: center; gap: 8px; margin: 12px 0 4px; } .code-box input { width: 48px; height: 60px; text-align: center; font-family: var(--mono); font-size: 1.6rem; font-weight: 700; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 0 var(--ink); transition: box-shadow 0.12s ease, transform 0.12s ease; caret-color: var(--flame); } .code-box input:focus { outline: none; box-shadow: 3px 3px 0 0 var(--flame); transform: translate(-1px, -1px); } .code-box.full input { background: rgba(255, 94, 58, 0.08); } .code-receipt { background: var(--paper); border: 1.5px dashed var(--ink); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 10px; } .code-receipt .stamp { background: var(--gold); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 6px; padding: 4px 10px; font-weight: 700; letter-spacing: 0.2em; font-size: 0.7rem; text-transform: uppercase; transform: rotate(-3deg); } /* Step 3 — recorder + meta */ .send-meta { display: grid; gap: 16px; margin-top: 18px; } .signpost { background: var(--moss); color: var(--paper); border: 2px solid var(--ink); border-radius: 8px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; box-shadow: 4px 4px 0 0 var(--ink); position: relative; } .signpost::before { content: ''; width: 4px; background: var(--paper); align-self: stretch; border-radius: 2px; box-shadow: 0 0 0 1.5px var(--ink); margin-right: 4px; } .signpost .signpost-text { flex: 1; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; } .signpost input.input { background: var(--paper); color: var(--ink); border-color: var(--ink); font-family: var(--mono); font-weight: 600; width: 110px; text-align: center; padding: 8px 10px; box-shadow: 2px 2px 0 0 var(--ink); } .signpost input.input:focus { box-shadow: 2px 2px 0 0 var(--gold); } .datestamp { background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; box-shadow: 4px 4px 0 0 var(--ink); } .datestamp .badge { background: var(--flame); color: var(--paper); border: 1.5px solid var(--ink); border-radius: 6px; padding: 4px 10px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; transform: rotate(-3deg); font-weight: 700; } .datestamp .row { flex: 1; gap: 4px; } .datestamp input.input { background: var(--paper); border: none; box-shadow: none; padding: 4px 0; font-family: var(--mono); font-size: 1rem; } .datestamp input.input:focus { box-shadow: none; transform: none; outline: 2px dashed var(--flame); outline-offset: 2px; } /* ----------- Done card ----------- */ .done-card { background: var(--paper-warm); border: 2px solid var(--ink); border-radius: 12px; padding: 32px; box-shadow: 10px 10px 0 0 var(--ink); text-align: center; position: relative; } .done-card .seal { position: absolute; top: -22px; left: 50%; transform: translateX(-50%) rotate(-6deg); background: var(--flame); color: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 18px; font-family: var(--mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; } .done-card h2 { margin-top: 18px; font-size: clamp(1.8rem, 4vw, 2.4rem); } .done-card .actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; } /* ----------- Prose pages ----------- */ .prose { max-width: 720px; padding-top: 48px; padding-bottom: 80px; margin: 0 auto; } .prose h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 12px; } .prose h2 { font-family: var(--serif); margin-top: 36px; font-size: 1.4rem; position: relative; padding-left: 18px; } .prose h2::before { content: ''; position: absolute; left: 0; top: 0.4em; bottom: 0.4em; width: 6px; background: var(--flame); border-radius: 3px; } .prose ul { padding-left: 22px; color: var(--ink-soft); } .prose li { margin: 6px 0; } .prose .meta { color: var(--ink-faint); font-size: 0.82rem; font-family: var(--mono); letter-spacing: 0.1em; } .prose a { background-image: linear-gradient(var(--gold), var(--gold)); background-size: 100% 30%; background-position: 0 88%; } /* ----------- 404 ----------- */ .notfound { text-align: center; padding: 80px 24px 60px; max-width: 640px; margin: 0 auto; } .notfound .marker { display: inline-block; background: var(--moss); color: var(--paper); font-family: var(--mono); border: 3px solid var(--ink); border-radius: 14px; padding: 14px 22px; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 6px 6px 0 0 var(--ink); margin-bottom: 24px; } .notfound h1 { font-size: clamp(2.4rem, 6vw, 4rem); } /* ----------- Footer ----------- */ .site-footer { border-top: 2px dashed var(--ink); margin-top: 36px; padding: 32px 0 36px; background: var(--paper-warm); } .site-footer .inner { max-width: var(--content-max); margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; } .site-footer .credit { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--ink-faint); text-transform: uppercase; } .site-footer .nav { gap: 18px; } .site-footer .nav a { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; } @media (max-width: 600px) { .site-footer .inner { grid-template-columns: 1fr; text-align: center; } .site-footer .nav { justify-content: center; } } /* ----------- Mobile tuning ----------- */ @media (max-width: 720px) { .container { padding-left: 18px; padding-right: 18px; } .hero { padding-top: 64px; padding-bottom: 32px; } .hero-grid { grid-template-columns: 1fr; } .hero-bib { transform: none; margin-bottom: 18px; } .hero .meta-row { gap: 14px; } .envelope { padding: 22px 20px 22px; box-shadow: 6px 6px 0 0 var(--ink); } .jcard { padding: 20px 18px; box-shadow: 6px 6px 0 0 var(--ink); } .postcard { transform: none !important; box-shadow: 5px 5px 0 0 var(--ink); } .postcard:hover { transform: translate(-1px, -2px); box-shadow: 8px 8px 0 0 var(--ink); } .cta-strip { padding: 26px 22px; } .reel { width: 52px; height: 52px; } .tape-btn { min-height: 48px; padding: 8px 18px; font-size: 0.74rem; } .site-header .inner { padding: 12px 18px; } .nav { gap: 14px; } .site-header .nav a:not(.pill) { display: none; } .site-header .nav .pill { display: inline-flex; } .code-box { gap: 6px; } .code-box input { width: 40px; height: 52px; font-size: 1.3rem; } .signpost { flex-wrap: wrap; } .signpost input.input { width: 100%; } .prose { padding-top: 32px; padding-bottom: 56px; } } /* Very narrow phones (320–360px) — keep the 6-digit code box from overflowing and shrink the header further so brand + pill don't collide. */ @media (max-width: 380px) { .site-header .inner { padding: 10px 14px; gap: 10px; } .brand { font-size: 0.95rem; gap: 8px; } .brand-logo { width: 30px; height: 30px; } .nav .pill { padding: 7px 12px; font-size: 0.82rem; } .code-box { gap: 4px; } .code-box input { width: 36px; height: 48px; font-size: 1.15rem; } .envelope { padding: 18px 16px 20px; } .cassette { padding: 14px 14px 18px; } .cassette .reels { padding: 12px 8px 6px; } .reel { width: 44px; height: 44px; } .tape-btn { min-height: 44px; padding: 6px 14px; letter-spacing: 0.08em; gap: 8px; } .hero h1 { line-height: 1.26; } } /* ----------- A11y ----------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } :focus-visible { outline: 2px dashed var(--flame); outline-offset: 3px; border-radius: 6px; } /*# sourceMappingURL=main.2764b805.css.map*/