/* ========================================================= Movement Mission — stylesheet Edit colors, fonts, and spacing in :root below. Most other styles cascade from those variables. Look and feel: black canvas, bold distressed-style block type, brush-red accents, white ink — after the launch flyer. Display font is Anton (condensed block caps), script accents are Kaushan Script, body is Montserrat. ========================================================= */ /* The Google Fonts stylesheet (Anton, Kaushan Script, Montserrat) is loaded with a parallel in each page's , not @import-ed here. An @import forces the browser to download main.css first and only then fetch the font CSS — serializing the two requests and blocking render. */ :root { --color-bg: #0C0B0B; --color-surface: #171414; --color-ink: #F5F2EF; --color-muted: #B9B1AB; --color-accent: #D0202E; --color-accent-dk: #A31622; --color-line: #2C2626; --color-overlay: rgba(0, 0, 0, 0.55); --font-display: "Anton", Impact, "Helvetica Neue", Arial, sans-serif; --font-script: "Kaushan Script", "Brush Script MT", cursive; --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; --max-width: 1180px; --content-width: 760px; --radius: 14px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--color-ink); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent); transition: color 120ms ease; } a:hover { color: var(--color-ink); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 0.6em; color: var(--color-ink); } h1 { font-size: clamp(2.75rem, 8vw, 5.5rem); } h2 { font-size: clamp(1.9rem, 5vw, 3rem); } h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); } h4 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); } p { margin: 0 0 1em; color: var(--color-ink); } p.lead { font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--color-muted); } /* Script accent — the "Mission" treatment from the flyer. */ .script { font-family: var(--font-script); text-transform: none; color: var(--color-accent); letter-spacing: 0; } /* Brush-red slash behind white text, after the flyer's painted banners. */ .slash { display: inline-block; padding: 0.1em 0.55em 0.18em; background: var(--color-accent); color: #fff; transform: skew(-6deg) rotate(-1.2deg); } .slash > span { display: inline-block; transform: skew(6deg) rotate(1.2deg); } ul.unstyled { list-style: none; padding: 0; margin: 0; } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } .content { width: 100%; max-width: var(--content-width); margin: 0 auto; } /* ========================================================= Header ========================================================= */ .site-header { padding: 1.1rem 0; background: rgba(12, 11, 11, 0.94); border-bottom: 1px solid var(--color-line); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(6px); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: baseline; gap: 0.45rem; text-decoration: none; color: var(--color-ink); } .brand-word { font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.7rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink); } .brand-script { font-family: var(--font-script); font-size: clamp(1.35rem, 2.6vw, 1.7rem); color: var(--color-accent); } .brand:hover .brand-word { color: var(--color-accent); } .nav { display: flex; gap: 2rem; align-items: center; } .nav a { position: relative; display: inline-block; padding: 0.4rem 0; color: var(--color-ink); text-decoration: none; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .nav a:hover { color: var(--color-accent); } .nav a.active { border-bottom: 2px solid var(--color-accent); } /* ========================================================= Hero ========================================================= */ .hero { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: clamp(420px, 72vh, 680px); padding: clamp(3rem, 8vw, 5.5rem) 1.5rem; background: radial-gradient(ellipse at 50% 0%, rgba(208, 32, 46, 0.16) 0%, rgba(12, 11, 11, 0) 55%), var(--color-bg); border-bottom: 1px solid var(--color-line); overflow: hidden; } .hero .content { position: relative; max-width: 56rem; } .kicker { display: inline-block; margin-bottom: 1.4rem; font-family: var(--font-script); font-size: clamp(1.1rem, 2.4vw, 1.5rem); } .hero h1 { margin-bottom: 0.35em; } .hero h1 .script { display: block; font-size: 0.85em; margin-top: 0.05em; } .hero .tagline { font-family: var(--font-body); font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; font-size: clamp(0.8rem, 1.6vw, 1rem); color: var(--color-ink); margin: 1.4rem 0 0.4rem; } .hero .tagline .plus { color: var(--color-accent); } .hero p.lead { margin-top: 1rem; } /* ========================================================= Buttons ========================================================= */ .btn { display: inline-block; margin-top: 1.4rem; padding: 0.85rem 2rem; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: #fff; background: var(--color-accent); border: 1px solid var(--color-accent); border-radius: 3px; transition: background 120ms ease, color 120ms ease; } .btn:hover { background: var(--color-accent-dk); color: #fff; } .btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-ink); } .btn--ghost:hover { background: var(--color-ink); color: var(--color-bg); } /* ========================================================= Sections ========================================================= */ .section { padding: clamp(3rem, 7vw, 5rem) 1.5rem; } .section--center { text-align: center; } .section--surface { background: var(--color-surface); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .h-sub { font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--color-accent); letter-spacing: 0.08em; } /* ========================================================= Pillars (donation based / all levels / worship) — flyer's three icon blurbs. ========================================================= */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); max-width: var(--max-width); margin: 0 auto; text-align: center; } .pillar h3 { font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink); margin-bottom: 0.5em; } .pillar p { color: var(--color-muted); font-size: 0.95rem; margin: 0; } .pillar-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 1rem; border-radius: 50%; background: var(--color-accent); color: #fff; } .pillar-icon svg { width: 28px; height: 28px; } /* ========================================================= Info strip (red banner, after the flyer's bottom bar) ========================================================= */ .info-strip { background: var(--color-accent); color: #fff; padding: 1.4rem 1.5rem; text-align: center; } .info-strip p { margin: 0; color: #fff; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: clamp(0.85rem, 1.8vw, 1rem); } .info-strip .script { color: #fff; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 1.2em; } /* ========================================================= Detail card (event / class details) ========================================================= */ .detail-card { border: 2px solid var(--color-accent); border-radius: var(--radius); background: var(--color-surface); padding: clamp(1.5rem, 3.5vw, 2.5rem); max-width: 34rem; margin: 0 auto; text-align: center; } .detail-card h3 { color: var(--color-ink); } .detail-card__photo { width: clamp(140px, 28vw, 190px); height: clamp(140px, 28vw, 190px); object-fit: cover; object-position: center 20%; border-radius: 50%; border: 3px solid var(--color-accent); margin: 0 auto 1.4rem; } .detail-card .script { font-size: 1.4em; } .detail-card p { color: var(--color-muted); } .detail-card p strong { color: var(--color-ink); } /* ========================================================= Footer ========================================================= */ .site-footer { border-top: 1px solid var(--color-line); background: var(--color-bg); padding: 2.5rem 0 calc(2.5rem + env(safe-area-inset-bottom, 0px)); text-align: center; } .footer-tagline { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.1rem; color: var(--color-ink); margin-bottom: 0.4rem; } .footer-location { color: var(--color-muted); font-size: 0.9rem; margin-bottom: 1.2rem; } .copyright { color: var(--color-muted); font-size: 0.8rem; } /* ========================================================= Mobile tab bar ========================================================= */ .mobile-tabbar { display: none; } @media (max-width: 720px) { .nav { display: none; } .mobile-tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex; justify-content: space-around; align-items: stretch; background: rgba(12, 11, 11, 0.97); border-top: 1px solid var(--color-line); padding-bottom: env(safe-area-inset-bottom, 0px); backdrop-filter: blur(6px); } .mobile-tabbar a { flex: 1; text-align: center; padding: 0.85rem 0.25rem; color: var(--color-muted); text-decoration: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .mobile-tabbar a.active, .mobile-tabbar a:hover { color: var(--color-accent); } /* Keep the footer clear of the fixed tab bar. */ body { padding-bottom: 3.4rem; } .pillars { grid-template-columns: 1fr; } }