/* ========================================================= WHOCHANGEDCHRISTIANITY — BASE DESIGN SYSTEM Pure UI/UX, no content assumptions ========================================================= */ /* Optional: load fonts (or include via in ) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Libre+Baskerville:wght@400;700&display=swap'); /* --------------------------------------------------------- 1. ROOT TOKENS --------------------------------------------------------- */ :root { /* Colours */ --wcch-bg: #F7F5F2; /* Primary background (Ivory Stone) */ --wcch-bg-soft: #EEEAE4; /* Secondary soft parchment */ --wcch-bg-input: #F9F6F1; /* Inputs / fields */ --wcch-ink: #1E1E1E; /* Primary text */ --wcch-ink-soft: #3A3733; /* Softer primary text */ --wcch-ink-muted: #7C7770; /* Muted / secondary */ --wcch-ink-faint: #B0A89E; /* Very soft labels */ --wcch-border-soft: #E3DED7; /* Soft card borders */ --wcch-border-strong: #C9C0B5; /* Stronger dividers */ /* Brand accent (used rarely) */ --wcch-accent: #A06A3B; /* Shadows */ --wcch-shadow-soft: 0 18px 45px rgba(44, 33, 18, 0.08); /* Typography */ --wcch-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --wcch-font-display: "Libre Baskerville", "Georgia", "Times New Roman", serif; /* Base font sizes (desktop) */ --wcch-h1: 46px; --wcch-h2: 34px; --wcch-h3: 24px; --wcch-body: 18px; /* Line heights */ --wcch-lh-tight: 1.1; --wcch-lh-heading: 1.25; --wcch-lh-body: 1.6; /* Spacing */ --wcch-section-lg: 144px; --wcch-section-md: 112px; --wcch-section-sm: 64px; --wcch-page-padding-desktop: 40px; --wcch-page-padding-mobile: 20px; /* Content width */ --wcch-max-width: 960px; } /* Responsive tokens */ @media (max-width: 768px) { :root { --wcch-h1: 36px; --wcch-h2: 28px; --wcch-h3: 22px; --wcch-body: 17px; --wcch-section-lg: 120px; --wcch-section-md: 96px; --wcch-section-sm: 56px; --wcch-page-padding-desktop: 24px; } } /* --------------------------------------------------------- 2. GLOBAL RESET / BASE --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--wcch-font-body); font-size: var(--wcch-body); line-height: var(--wcch-lh-body); color: var(--wcch-ink-soft); background-color: var(--wcch-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; } /* Page shell */ .wcch-page { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--wcch-bg); } .wcch-main { flex: 1 0 auto; } /* Centered container */ .wcch-container { width: 100%; max-width: var(--wcch-max-width); margin-left: auto; margin-right: auto; padding-left: var(--wcch-page-padding-desktop); padding-right: var(--wcch-page-padding-desktop); } @media (max-width: 768px) { .wcch-container { padding-left: var(--wcch-page-padding-mobile); padding-right: var(--wcch-page-padding-mobile); } } /* Sections */ .wcch-section { padding-top: var(--wcch-section-md); padding-bottom: var(--wcch-section-md); } .wcch-section--tight { padding-top: var(--wcch-section-sm); padding-bottom: var(--wcch-section-sm); } /* --------------------------------------------------------- 3. HEADER / BRAND / NAV --------------------------------------------------------- */ .wcch-header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); background-color: rgba(247, 245, 242, 0.96); border-bottom: 1px solid #E3DED7; } .wcch-header-inner { max-width: var(--wcch-max-width); margin: 0 auto; padding-inline: var(--wcch-page-padding-desktop); padding-top: 14px; padding-bottom: 12px; display: flex; flex-direction: column; /* brand on first line, nav below */ align-items: flex-start; gap: 6px; } @media (max-width: 768px) { .wcch-header-inner { padding-inline: var(--wcch-page-padding-mobile); } } .wcch-brand { font-family: var(--wcch-font-display); font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; } /* Nav: tidy multi-row under brand */ .wcch-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: flex-start; } .wcch-nav a { font-size: 15px; color: var(--wcch-ink-soft); } .wcch-nav a:hover, .wcch-nav a:focus-visible { color: var(--wcch-ink); text-decoration: none; } /* --------------------------------------------------------- 5. TYPOGRAPHY --------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--wcch-font-display); font-weight: 400; color: var(--wcch-ink); margin: 0 0 20px; } h1 { font-size: var(--wcch-h1); line-height: var(--wcch-lh-heading); } h2 { font-size: var(--wcch-h2); line-height: var(--wcch-lh-heading); margin-top: var(--wcch-section-sm); } h3 { font-size: var(--wcch-h3); line-height: var(--wcch-lh-heading); margin-top: 32px; } p { margin: 0 0 16px; } /* Eyebrow */ .wcch-eyebrow { font-family: var(--wcch-font-body); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wcch-ink-muted); } /* Hero subtitle */ .wcch-hero-subtitle { max-width: 640px; margin: 18px auto 26px; color: var(--wcch-ink-muted); } /* Muted text */ .wcch-text-muted { color: var(--wcch-ink-muted); } /* Small text */ .wcch-text-small { font-size: 14px; color: var(--wcch-ink-muted); } /* --------------------------------------------------------- 6. HERO AREA --------------------------------------------------------- */ .wcch-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--wcch-border-soft); } .wcch-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.92), transparent 60%), radial-gradient(circle at 0% 100%, rgba(227, 216, 199, 0.48), transparent 60%), radial-gradient(circle at 100% 100%, rgba(209, 198, 182, 0.38), transparent 60%); opacity: 0.9; pointer-events: none; } .wcch-hero-inner { position: relative; z-index: 1; text-align: center; } /* Hero pills row */ .wcch-hero-pills { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; margin-bottom: 32px; } .wcch-pill { padding: 6px 14px; border-radius: 9999px; border: 1px solid var(--wcch-border-soft); background-color: rgba(255, 255, 255, 0.7); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wcch-ink-muted); backdrop-filter: blur(4px); } /* --------------------------------------------------------- 7. ARTICLE LAYOUT --------------------------------------------------------- */ .wcch-article { background: linear-gradient(to bottom, #F7F5F2 0%, #F3EFE8 40%, #F7F5F2 100%); } .wcch-article-body { max-width: 720px; margin: 0 auto; } /* Intro card for opening paragraphs */ .wcch-intro-card { padding: 32px 28px; margin-bottom: var(--wcch-section-sm); border-radius: 18px; background-color: var(--wcch-bg-soft); border: 1px solid var(--wcch-border-soft); box-shadow: 0 22px 60px rgba(21, 16, 8, 0.06); } .wcch-intro-card p:last-child { margin-bottom: 0; } /* Lists */ .wcch-article-body ul { padding-left: 1.3rem; margin-bottom: 16px; } .wcch-article-body li { margin-bottom: 6px; } /* Note box */ .wcch-note { margin: 28px 0; padding: 18px 20px; border-radius: 14px; background-color: rgba(248, 245, 239, 0.85); border: 1px solid var(--wcch-border-soft); font-size: 15px; color: var(--wcch-ink-soft); } /* --------------------------------------------------------- 8. BUTTONS --------------------------------------------------------- */ .wcch-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--wcch-border-strong); background: linear-gradient(135deg, #FBF7F1 0%, #EFE5D7 100%); box-shadow: 0 12px 30px rgba(42, 32, 20, 0.18); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wcch-ink-soft); } .wcch-btn:hover, .wcch-btn:focus-visible { text-decoration: none; box-shadow: 0 16px 40px rgba(42, 32, 20, 0.24); } /* --------------------------------------------------------- 9. DIVIDERS & SEPARATORS --------------------------------------------------------- */ .wcch-divider { width: 72px; height: 1px; background-color: var(--wcch-border-strong); margin: 32px auto 0; } .wcch-section-separator { margin: var(--wcch-section-sm) 0 24px; border-top: 1px solid var(--wcch-border-soft); } /* --------------------------------------------------------- 10. FOOTER --------------------------------------------------------- */ .wcch-footer { border-top: 1px solid var(--wcch-border-soft); padding: 18px 0 26px; background-color: #F5F1EA; } .wcch-footer-inner { max-width: var(--wcch-max-width); margin: 0 auto; padding-inline: var(--wcch-page-padding-desktop); font-size: 14px; color: var(--wcch-ink-muted); } @media (max-width: 768px) { .wcch-footer-inner { padding-inline: var(--wcch-page-padding-mobile); } } /* REMOVE HERO PILL ROW COMPLETELY */ .wcch-hero-pills { display: none !important; }