/* ========================================================================== EIM.fm — teaser lander After McLuhan & Fiore, "The Medium is the Massage" (1967): black-and-white, print rhythm, type does all the work. ========================================================================== */ :root { --ink: #111111; --paper: #f5f3ed; --black: #0d0d0d; --grey: #6b6b66; --grey-inverse: #9a9a94; --blue-fm: #87acec; --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --font-mono: Consolas, "SFMono-Regular", Menlo, monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 17px; line-height: 1.7; color: var(--ink); background: var(--paper); } ::selection { background: var(--black); color: var(--paper); } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .container { max-width: 860px; margin: 0 auto; padding: 0 24px; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { min-height: 82vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 96px 0; } .hero-kicker { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue-fm); /* serif headline carries ~30px internal leading above its caps at hero size — small margin here keeps the OPTICAL gap balanced with .hero-sub */ margin-bottom: 12px; } .thesis { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.9rem, 9.5vw, 6.8rem); line-height: 1.0; letter-spacing: -0.02em; } .thesis em { font-style: italic; } /* The McLuhan glitch (messaging <-> massaging) lives INLINE in index.html's so its markup and styles always ship together — a stale cached stylesheet must never render both glyphs side by side ("meassaging"). */ .hero-sub { /* the italic descenders of "messaging." eat ~20px below the baseline — larger margin here lands the same optical gap as above the headline */ margin-top: 38px; font-size: 15.5px; letter-spacing: 0.01em; color: var(--grey-inverse); } /* newsletter signup — square corners, mono, band accent on focus/success */ .hero-signup { display: flex; gap: 10px; justify-content: center; margin: 28px auto 0; max-width: 420px; } .hero-signup input { flex: 1; min-width: 0; background: transparent; border: 1px solid #3a3a3f; border-radius: 0; color: var(--paper); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; padding: 11px 14px; } .hero-signup input::placeholder { color: #55555c; } .hero-signup input:focus { outline: none; border-color: var(--blue-fm); } .hero-signup button { border: 1px solid var(--paper); border-radius: 0; background: transparent; color: var(--paper); font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 11px 18px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .hero-signup button:hover { background: var(--paper); color: var(--black); } .hero-signup button:disabled { opacity: 0.5; cursor: default; } .signup-note { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--blue-fm); } .signup-note.is-error { color: #f2a196; } /* -------------------------------------------------------------------------- Sections & type -------------------------------------------------------------------------- */ .sect { padding: 72px 24px; } .marker { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey); margin-bottom: 34px; } .marker::before { content: ""; width: 44px; height: 1px; background: var(--ink); flex: none; } .marker-inverse { color: var(--blue-fm); } .marker-inverse::before { background: var(--paper); } /* the Massage printed pages you had to flip the book to read — homage: the ENTIRE quote band rotates 180deg (see .band-right .container); the real text stays intact for copy/paste and screen readers */ .display { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.3rem, 6vw, 4.1rem); line-height: 1.04; letter-spacing: -0.015em; max-width: 18ch; margin-bottom: 40px; } .prose { max-width: 62ch; } .prose p { margin-bottom: 22px; } .prose p:last-child { margin-bottom: 0; } .prose em { font-family: var(--font-serif); } .prose strong { font-weight: 700; } .closer { margin-top: 40px; font-size: 1.1em; } .pull { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.01em; max-width: 24ch; margin: 52px 0; padding: 30px 0 30px 28px; border-left: 4px solid var(--blue-fm); } /* -------------------------------------------------------------------------- Black bands (halftone) -------------------------------------------------------------------------- */ .band { background-color: var(--black); background-image: radial-gradient(#1e1e1e 1px, transparent 1px); background-size: 9px 9px; color: var(--paper); padding: 76px 0; } .band-quote p { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.12; letter-spacing: -0.01em; max-width: 18ch; } .band-quote cite { display: block; margin-top: 28px; font-family: var(--font-mono); font-style: normal; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-inverse); } .band-quote cite em { font-style: italic; text-transform: none; letter-spacing: 0.08em; } /* section 02 rides right — disrupt the grid a little, per the Massage. Everything hugs the right edge; the marker reads label-then-rule ("Persistent or pervasive? ——") via row-reverse. */ /* content is LEFT-aligned pre-rotation so the 180deg flip mirrors it onto the RIGHT edge; the flipped marker then reads label-then-dash rightmost */ .band-right { text-align: left; } .band-right .container { transform: rotate(180deg); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer { background-color: var(--black); background-image: radial-gradient(#1e1e1e 1px, transparent 1px); background-size: 9px 9px; color: var(--paper); border-top: 8px solid var(--paper); padding: 64px 0 56px; text-align: center; } .footer-logo { font-family: var(--font-serif); font-size: 34px; font-weight: 700; } .footer-logo span { font-weight: 400; font-style: italic; color: var(--blue-fm); } .footer-byline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-inverse); margin-top: 8px; } .footer-social { display: flex; justify-content: center; gap: 26px; margin-top: 30px; } .footer-social a { color: var(--grey-inverse); transition: color 0.15s ease; } .footer-social a:hover { color: var(--paper); } .footer-social svg { width: 20px; height: 20px; display: block; } .footer-fine { margin-top: 34px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: #6f6f69; } /* -------------------------------------------------------------------------- Small screens -------------------------------------------------------------------------- */ @media (max-width: 560px) { .sect { padding: 56px 24px; } .band { padding: 60px 0; } .hero { min-height: 74vh; padding: 72px 0; } .pull { margin: 40px 0; padding-left: 20px; } .hero-signup { flex-direction: column; } .hero-signup button { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }