/* ========================================================= Shared styles — editorial pamphlet aesthetic All pages import this file. Page-specific tints are applied via a --page-tint custom property set on in each page. ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================ FONTS ============================================ */ @font-face { font-family: 'Instrument Serif'; src: url('../fonts/InstrumentSerif-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('../fonts/InstrumentSerif-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } :root { /* Palette */ --ink: #111111; --ink-soft: #3d3d3a; --ink-faint: #999999; --surface: #fdfaf4; --bg: #e8e4dc; --red: #9b1c1c; --blue: #1e4d6b; --green: #1a6b35; --purple: #7c3aed; --font-display: 'Instrument Serif', Georgia, serif; --font-body: 'Instrument Serif', Georgia, serif; /* Borders & shadows */ --border: 2.5px solid var(--ink); --shadow: 3px 3px 0 var(--ink); --shadow-sm: 2px 2px 0 var(--ink); --radius-lg: 32px; --radius-md: 12px; --radius-sm: 8px; --radius-xs: 6px; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { background: var(--bg); font-family: var(--font-serif); color: var(--ink); min-height: 100dvh; line-height: 1.6; } /* ---- Shared phone-frame container (landing, observe, propaganda) ---- */ .frame { width: 100%; max-width: 480px; min-height: 100dvh; margin: 0 auto; background: var(--surface); display: flex; flex-direction: column; padding: 28px 22px 32px; gap: 20px; } /* On wider screens give it the card look from the mockup */ @media (min-width: 560px) { body { padding: 32px 16px; align-items: flex-start; display: flex; justify-content: center; } .frame { min-height: auto; border: 3px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 6px 6px 0 var(--ink); padding: 28px 24px 32px; } } /* ---- Typography ---- */ h1 { font-family: var(--font-display); font-size: clamp(28px, 8vw, 40px); font-weight: 700; line-height: 1.1; color: var(--ink); } h2 { font-size: clamp(20px, 5vw, 26px); font-weight: 700; line-height: 1.15; } h3 { font-size: 20px; font-weight: 700; } p, li { font-size: 18px; line-height: 1.7; color: var(--ink-soft); } strong { color: var(--ink); font-weight: 600; } .accent { color: var(--green); font-weight: 600; } /* ---- Spacer ---- */ .spacer { flex: 1; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 12px; border: var(--border); border-radius: var(--radius-md); font-family: var(--font-serif); font-size: 18px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; text-decoration: none; text-align: center; box-shadow: var(--shadow-sm); transition: transform 80ms ease, box-shadow 80ms ease; -webkit-tap-highlight-color: transparent; } .btn:active { transform: translate(2px, 2px); box-shadow: none; } .btn-map { background: #1e4d6b; color: #e8f4f0; } .btn-propaganda { background: #7a1f1f; color: #faf0e8; } .btn-observe { background: var(--green); color: #fff; font-size: 14px; padding: 16px 12px; box-shadow: var(--shadow); } .btn-observe:active { transform: translate(3px, 3px); box-shadow: none; } .btn-outline { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .btn-outline:active { transform: translate(3px, 3px); box-shadow: none; } /* ---- Button rows (landing page) ---- */ .btn-row { display: flex; gap: 10px; } .btn-row .btn { flex: 1; } /* ---- Logo placeholder circle ---- */ .logo-circle { width: 60px; height: 60px; border-radius: 50%; border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface); } /* ---- Badges ---- */ .badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-xs); border: 2px solid var(--ink); font-family: var(--font-serif); white-space: nowrap; } /* ---- Section label (observe page) ---- */ .section-label { display: inline-block; font-size: 12px; font-style: italic; color: #333; border-radius: var(--radius-xs); padding: 3px 10px; margin-bottom: 8px; border: 1.5px solid #aac0e0; background: #c8daf0; } /* ---- Pills (observe page) ---- */ .pills { display: flex; flex-wrap: wrap; gap: 8px; } .pill { padding: 8px 12px; border-radius: var(--radius-md); border: 2px solid #4466cc; font-family: var(--font-serif); font-size: 12px; color: #4466cc; background: var(--surface); cursor: pointer; line-height: 1.3; text-align: center; transition: background 120ms, color 120ms, transform 80ms; -webkit-tap-highlight-color: transparent; user-select: none; } .pill:active { transform: scale(0.96); } .pill.selected { background: #4466cc; color: #fff; font-weight: 700; } /* ---- Timeline (promises page) ---- */ .timeline { display: flex; flex-direction: column; gap: 0; } .timeline-entry { display: grid; grid-template-columns: 72px 1fr; gap: 0 16px; padding: 18px 0; border-bottom: 1px solid #ddd; position: relative; } .timeline-date { font-size: 11px; font-weight: 700; color: var(--ink-faint); padding-top: 2px; } .timeline-body { display: flex; flex-direction: column; gap: 6px; } .timeline-promise { font-size: 13px; font-weight: 600; color: var(--ink); font-style: italic; } .timeline-reality { font-size: 13px; color: var(--ink-soft); line-height: 1.6; } .status-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; border: 2px solid; font-family: var(--font-serif); align-self: flex-start; } .status-Promised { color: #1a4f8a; border-color: #1a4f8a; background: #e8f0fa; } .status-Done { color: #1a6b35; border-color: #1a6b35; background: #e8f4ec; } .status-Forgotten { color: #c87400; border-color: #c87400; background: #fdf3e0; } .status-Paved { color: #7c3aed; border-color: #7c3aed; background: #f0ebfe; } /* ---- Owners table / cards ---- */ .owner-list { display: flex; flex-direction: column; gap: 16px; } .owner-card { border: 2.5px solid var(--ink); border-radius: var(--radius-sm); padding: 14px; box-shadow: var(--shadow-sm); background: var(--surface); display: flex; flex-direction: column; gap: 6px; } .owner-name { font-size: 14px; font-weight: 700; color: var(--ink); } .owner-meta { font-size: 12px; color: var(--ink-soft); line-height: 1.6; } .owner-meta strong { color: var(--ink); } /* ---- Divider ---- */ .divider { height: 1px; background: #ddd; flex-shrink: 0; } /* ---- Back link ---- */ .back-link { font-size: 13px; color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; } .back-link:hover { color: var(--ink); }