/* The front page and the auth pages: a small Lisbon daily, circa 1925. Scoped to body.paper so the app's Tailwind UI is untouched. The class lives on , not : Turbo Drive replaces the body on navigation but leaves alone, so a class there would leak into (or vanish from) the next page until a full reload. */ .paper { --paper: #f2e9d5; --paper-deep: #e9dec4; --ink: #1d1a16; --ink-soft: #4a443b; --ink-faint: #8a8172; --rule: #2a2622; --accent: #8b2e1f; /* the red of a rubber stamp */ --display: "Playfair Display", "Bodoni MT", "Didot", Georgia, serif; --text: "Libre Caslon Text", "Times New Roman", Georgia, serif; --measure: 66ch; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; margin: 0; min-height: 100%; position: relative; } .paper::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .055; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } .paper::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(80, 60, 20, .16) 100%); } .sheet { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 20px 64px; } .sheet-narrow { max-width: 760px; min-height: 100vh; display: flex; flex-direction: column; } .sheet-narrow > main { flex: 1; } /* --- rules and small type -------------------------------------------------- */ .rule { border: 0; border-top: 1px solid var(--rule); margin: 0; } .rule-double { border: 0; border-top: 3px double var(--rule); margin: 0; } .rule-thick { border: 0; border-top: 4px solid var(--rule); margin: 0; } .smallcaps { font-variant: small-caps; letter-spacing: .08em; } .kicker { font-family: var(--text); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); } .kicker::before, .kicker::after { content: "—"; margin: 0 .5em; color: var(--ink-faint); } .folio { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .ornament { text-align: center; color: var(--ink-faint); font-size: 22px; line-height: 1; margin: 22px 0; } .stamp { display: inline-block; padding: 3px 10px; border: 2px solid var(--accent); color: var(--accent); font-family: var(--text); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; transform: rotate(-3deg); opacity: .85; } /* --- ears, masthead, nav ---------------------------------------------------- */ .ears { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0 8px; } .masthead { text-align: center; padding: 18px 0 10px; } .masthead h1 { font-family: var(--display); font-weight: 900; font-size: clamp(64px, 12vw, 148px); line-height: .92; letter-spacing: .04em; margin: 0; text-transform: uppercase; color: var(--ink); } .masthead .tagline { font-family: var(--display); font-style: italic; font-size: clamp(16px, 2vw, 21px); margin: 10px 0 0; color: var(--ink-soft); } .masthead-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; flex-wrap: wrap; } .masthead-nav .folio { display: flex; gap: 18px; flex-wrap: wrap; } .masthead-nav .actions { display: flex; gap: 14px; } /* --- links: always underlined, so nobody has to guess ------------------------ */ .sheet a:not(.ink-btn):not(.ink-btn-outline) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-faint); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; } .sheet a:not(.ink-btn):not(.ink-btn-outline):hover { color: var(--accent); text-decoration-color: var(--accent); text-decoration-thickness: 2px; } .sheet a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .sheet .masthead a.wordmark, .sheet .masthead a.wordmark:hover { color: inherit; text-decoration: none; } .masthead-small { padding: 12px 0 6px; } .masthead-small h1 { font-size: clamp(48px, 9vw, 96px); } .masthead-small .tagline { font-size: clamp(15px, 1.8vw, 18px); margin-top: 6px; } /* --- buttons ---------------------------------------------------------------- */ .ink-btn, .ink-btn-outline { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--text); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; padding: 12px 22px; text-decoration: none; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: background .15s, color .15s, transform .15s, box-shadow .15s; } .ink-btn { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--accent); } .ink-btn::after { content: "\2192"; font-size: 16px; line-height: 1; transition: transform .15s; } .ink-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); box-shadow: 6px 6px 0 var(--ink); transform: translate(-2px, -2px); } .ink-btn:hover::after { transform: translateX(3px); } .ink-btn-outline { color: var(--ink); background: rgba(255, 252, 244, .5); } .ink-btn-outline:hover { background: var(--ink); color: var(--paper); box-shadow: 6px 6px 0 var(--accent); transform: translate(-2px, -2px); } .ink-btn:active, .ink-btn-outline:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } .ink-btn:focus-visible, .ink-btn-outline:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } /* --- hero ------------------------------------------------------------------- */ .hero { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; padding: 36px 0 32px; } .hero h2 { font-family: var(--display); font-weight: 900; font-size: clamp(38px, 5.4vw, 66px); line-height: 1.02; margin: 12px 0 18px; letter-spacing: -.005em; } .hero h2 em { font-style: italic; font-weight: 700; color: var(--accent); } .deck { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; max-width: 34em; margin: 0 0 26px; color: var(--ink-soft); } .hero .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .hero .aside-note { margin-top: 18px; font-size: 14px; color: var(--ink-faint); font-style: italic; } .figure { text-align: center; } .figure svg { width: 100%; max-width: 380px; height: auto; } .figure figcaption { font-size: 13px; font-style: italic; color: var(--ink-soft); margin-top: 8px; } /* --- columns ---------------------------------------------------------------- */ .section { padding: 28px 0 8px; } .section-head { text-align: center; margin-bottom: 22px; } .section-head h3 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); margin: 6px 0 0; line-height: 1.1; } .section-head p { margin: 8px auto 0; max-width: 48em; color: var(--ink-soft); } .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .cols > * { padding: 0 22px; border-left: 1px solid var(--rule); } .cols > *:first-child { padding-left: 0; border-left: 0; } .cols > *:last-child { padding-right: 0; } .cols-4 { grid-template-columns: repeat(4, 1fr); } .byline { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; margin: 0 0 2px; } .byline small { display: block; font-family: var(--text); font-weight: 400; font-style: italic; font-size: 14px; color: var(--ink-soft); margin-top: 4px; } .col p { margin: 10px 0 0; font-size: 16px; } .col p.lead::first-letter { font-family: var(--display); font-weight: 900; font-size: 3.1em; float: left; line-height: .82; padding: 6px 8px 0 0; color: var(--ink); } .dl { margin: 12px 0 0; font-size: 14.5px; } .dl div { display: flex; gap: 8px; border-top: 1px dotted var(--ink-faint); padding: 5px 0; } .dl dt { font-variant: small-caps; letter-spacing: .06em; color: var(--ink-soft); min-width: 7.5em; } .dl dd { margin: 0; } .step-no { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1; color: var(--ink-faint); } .step h4 { font-family: var(--display); font-weight: 700; font-size: 21px; margin: 6px 0 4px; line-height: 1.15; } .step p { margin: 6px 0 0; font-size: 15.5px; } /* --- classifieds --------------------------------------------------------------- */ .classifieds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .ad { border: 1px solid var(--rule); padding: 12px 14px; font-size: 14px; background: rgba(255, 252, 244, .35); } .ad.ad-box { border: 3px double var(--rule); } .ad h5 { font-family: var(--text); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 6px; } .ad p { margin: 0; color: var(--ink-soft); } /* --- quote band -------------------------------------------------------------- */ .quote-band { text-align: center; padding: 34px 20px; margin: 36px 0 12px; border-top: 3px double var(--rule); border-bottom: 3px double var(--rule); } .quote-band blockquote { margin: 0 auto; max-width: 30em; font-family: var(--display); font-style: italic; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.25; } .quote-band cite { display: block; margin-top: 12px; font-style: normal; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); } .quote-band .translation { margin: 10px 0 0; color: var(--ink-faint); font-size: 15px; font-style: italic; } /* --- notices: the auth pages (sign in, sign up, passwords, invitations, new workspace) ------ */ .notice { max-width: 520px; margin: 30px auto 0; padding: 0 0 24px; } .notice .kicker { display: block; text-align: center; } .notice h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4.4vw, 42px); line-height: 1.08; margin: 8px 0 10px; text-align: center; } .notice .deck { font-size: 17px; margin: 0 auto 8px; text-align: center; max-width: 30em; } .notice form { margin-top: 10px; } .field { margin: 18px 0 0; } .field label { display: block; font-variant: small-caps; letter-spacing: .08em; font-size: 15px; color: var(--ink-soft); margin-bottom: 5px; } .field input:not([type="checkbox"]) { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 10px 12px; border-radius: 0; font-family: var(--text); font-size: 17px; line-height: 1.4; color: var(--ink); background: rgba(255, 252, 244, .55); border: 1px solid var(--ink); border-bottom-width: 2px; box-shadow: none; } .field input::placeholder { color: var(--ink-faint); font-style: italic; } .field input:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .field .hint-note { margin: 6px 0 0; font-size: 13.5px; font-style: italic; color: var(--ink-faint); } .field-check { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 15px; } .field-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); } .field-check label { margin: 0; } .form-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .form-actions .ink-btn { border-radius: 0; } .notice-links { margin: 28px 0 0; padding: 14px 0 0; border-top: 1px dotted var(--ink-faint); font-size: 15px; color: var(--ink-soft); } .notice-links p { margin: 4px 0; } .flash-note { margin: 18px 0 0; padding: 10px 14px; border: 1px solid var(--rule); border-left: 5px solid var(--ink); background: rgba(255, 252, 244, .5); font-size: 15px; } .flash-note.is-alert { border-color: var(--accent); color: var(--accent); } .paper .form-errors { margin: 18px 0 0; padding: 10px 14px; border: 2px solid var(--accent); border-radius: 0; background: none; color: var(--accent); font-size: 15px; } .paper .form-errors p { margin: 0; font-weight: 700; } .paper .form-errors ul { margin: 4px 0 0; padding-left: 20px; } .colophon-small { text-align: center; padding-top: 16px; font-size: 13.5px; font-style: italic; color: var(--ink-faint); } /* --- footer ------------------------------------------------------------------ */ .colophon { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; padding-top: 18px; font-size: 14px; color: var(--ink-soft); } .colophon ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 20px; } .figure { order: -1; } .figure svg { max-width: 240px; } .cols, .cols-4 { grid-template-columns: 1fr; } .cols > * { padding: 18px 0 6px; border-left: 0; border-top: 1px solid var(--rule); } .cols > *:first-child { border-top: 0; padding-top: 0; } .classifieds { grid-template-columns: 1fr 1fr; } .colophon { grid-template-columns: 1fr; } .colophon ul { justify-content: flex-start; } } @media (max-width: 560px) { .paper { font-size: 16px; } .classifieds { grid-template-columns: 1fr; } .ears { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .paper { scroll-behavior: auto; } }