/* COCV site — shared styles. Design tokens below implement docs/design-direction.md: a palette grounded in Chabad on Campus Vienna specifically (paper-white ground, warm charcoal ink, a single "Vienna claret" accent) rather than goshliach.com's cream + navy + gold template cluster. Typography is Option B from that doc: a slab/transitional display serif for headings (Fraunces) paired with a humanist sans for body/UI (Inter) — loaded via Google Fonts, the only external font host this stack can reach (see each page's ). */ :root { /* Palette — ground/ink/accent/neutral, per docs/design-direction.md. Accent-on-ground, white-on-accent, and the on-ink variants below are all checked against WCAG AA (4.5:1) for body text before use. */ --color-ground: #fafaf8; --color-ground-alt: #f1eae6; --color-surface: #ffffff; --color-ink: #1e1b18; --color-ink-soft: #4a4340; --color-neutral: #6b5f5a; --color-border: #e4dfda; --color-accent: #7a1e2b; --color-accent-dark: #591420; /* Lightened accent for text on dark (ink) backgrounds — the plain accent is too dark on ink to pass contrast; this tint holds ~6.5:1. */ --color-accent-on-ink: #d98a96; --color-on-ink: #e9e1dc; --color-on-ink-soft: #b6a9a3; /* Legacy aliases — the old navy/gold palette names are still referenced by inline `style=` attributes on individual pages (buttons, links). Pointing them at the new tokens means every page picks up the new look immediately. Remove these once Phase 7's "carry tokens through pages" task replaces those inline usages directly with the tokens above. */ --navy: var(--color-ink); --gold: var(--color-accent); --dark-blue: var(--color-accent-dark); --ink: var(--color-ink); --paper: var(--color-ground); --paper-soft: var(--color-ground-alt); --border: var(--color-border); /* Typography */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Type scale — h1/h2/h3, body, caption. Used consistently everywhere instead of one-off font-sizes scattered per page. */ --text-caption: 0.85rem; --text-h3: clamp(1.2rem, 1vw + 1rem, 1.45rem); --text-h2: clamp(1.7rem, 1.5vw + 1.3rem, 2.3rem); --text-h1: clamp(2.25rem, 3vw + 1.5rem, 3.4rem); --max-width: 1080px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--color-ink); background: var(--color-ground); line-height: 1.5; } img { max-width: 100%; display: block; } a { color: var(--color-accent-dark); } h1, h2, h3, .site-logo { font-family: var(--font-display); font-weight: 600; } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } /* Header / nav */ .site-header { border-bottom: 1px solid var(--color-border); background: var(--color-ground); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; } .site-logo { font-size: 1.1rem; color: var(--color-ink); text-decoration: none; line-height: 1.2; } .site-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; } .site-nav a { text-decoration: none; color: var(--color-ink); font-size: 0.95rem; padding: 6px 0; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-ink); border-bottom: 2px solid var(--color-accent); } /* Hero */ .hero { background: var(--color-ink); color: var(--color-ground); padding: 56px 0 48px; } .hero .eyebrow { color: var(--color-accent-on-ink); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-caption); font-weight: 700; font-family: var(--font-body); margin: 0 0 12px; } .hero h1 { margin: 0 0 16px; font-size: var(--text-h1); line-height: 1.1; } .hero p { margin: 0 0 24px; max-width: 46ch; font-size: 1.05rem; color: var(--color-on-ink); } /* Homepage hero — asymmetric two-column layout (copy + a graphic/photo), opted into with .hero-grid rather than changing .hero itself, so the plain centered hero on every other page is untouched for now. */ .hero-grid { display: grid; gap: 40px; align-items: center; } @media (min-width: 800px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 56px; } } .hero-visual { display: flex; justify-content: center; } .hero-visual svg { width: 100%; max-width: 220px; height: auto; } @media (min-width: 800px) { .hero-visual svg { max-width: 300px; } } /* Buttons */ .btn { display: inline-block; padding: 12px 22px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 0.95rem; font-family: var(--font-body); } .btn-primary { background: var(--color-accent); color: var(--color-ground); } .btn-primary:hover { background: var(--color-accent-dark); } .btn-secondary { background: transparent; color: var(--color-ground); border: 1px solid var(--color-ground); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* Sections */ section { padding: 48px 0; } section.alt { background: var(--color-ground-alt); } h2 { font-size: var(--text-h2); color: var(--color-ink); line-height: 1.15; margin: 0 0 20px; } .lede { font-size: 1.05rem; max-width: 65ch; } .card-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } .card { border: 1px solid var(--color-border); border-radius: 6px; padding: 22px; background: var(--color-surface); } .card h3 { margin: 0 0 8px; color: var(--color-ink); font-size: var(--text-h3); } .card p { margin: 0; color: var(--color-neutral); } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; } @media (min-width: 800px) { .contact-grid { grid-template-columns: 1.2fr 1fr; } } .card .meta { display: block; font-size: var(--text-caption); color: var(--color-accent-dark); font-weight: 600; margin-bottom: 6px; } /* Footer */ .site-footer { background: var(--color-ink); color: var(--color-on-ink); padding: 40px 0 28px; margin-top: 24px; } .site-footer a { color: var(--color-ground); } .footer-grid { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } } .site-footer h4 { color: var(--color-ground); margin: 0 0 10px; font-size: 0.95rem; } .site-footer p, .site-footer address { margin: 0 0 6px; font-style: normal; font-size: 0.92rem; } .footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: var(--text-caption); color: var(--color-on-ink-soft); } /* Forms */ form.stack { display: grid; gap: 16px; max-width: 520px; } label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; } input, textarea, select { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 4px; font-family: inherit; font-size: 1rem; } textarea { min-height: 140px; resize: vertical; } .field-hint { font-size: var(--text-caption); color: var(--color-neutral); margin-top: 4px; } /* Campaign progress (campaign.html) */ .campaign-progress { max-width: 640px; } .progress-bar { height: 14px; border-radius: 999px; background: var(--color-ground-alt); border: 1px solid var(--color-border); overflow: hidden; } .progress-bar-fill { height: 100%; width: 0; background: var(--color-accent); border-radius: 999px 0 0 999px; transition: width 0.4s ease; } .campaign-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 24px; } .campaign-stat-value { display: block; font-family: var(--font-display); font-size: var(--text-h3); color: var(--color-ink); font-weight: 600; line-height: 1.1; } .campaign-stat-label { display: block; font-size: var(--text-caption); color: var(--color-neutral); margin-top: 2px; } .campaign-match { margin-top: 24px; max-width: 640px; padding: 14px 18px; border-radius: 6px; background: var(--color-ground-alt); border: 1px solid var(--color-border); font-weight: 600; color: var(--color-accent-dark); }