/* ======================================================================== Michelle — Shared Stylesheet Two themes via data-theme on : "church" | "women" ======================================================================== */ /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; } p { text-wrap: pretty; } a { color: inherit; } ul, ol { list-style: none; } /* --- Theme tokens -------------------------------------------------------- */ html[data-theme="church"] { --color-bg: #FAF8F5; --color-surface: #FFFFFF; --color-ink: #1B2A38; --color-muted: #5C6B7A; --color-accent: #B98A35; --color-accent-dk: #8E6825; --color-band: #1B2A38; --color-band-ink: #FAF8F5; --color-soft: #F0EBE3; --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Source Sans 3", -apple-system, "Segoe UI", sans-serif; --radius: 4px; --section-pad: 96px; --shadow: 0 1px 3px rgba(27,42,56,.10); } html[data-theme="women"] { --color-bg: #FDF9F6; --color-surface: #FFFFFF; --color-ink: #2E2028; --color-muted: #7A6670; --color-accent: #B4553F; --color-accent-dk: #8E4130; --color-band: #2E2028; --color-band-ink: #FDF9F6; --color-soft: #EFDCD3; --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Karla", -apple-system, "Segoe UI", sans-serif; --radius: 14px; --section-pad: 128px; --shadow: 0 4px 20px rgba(46,32,40,.08); } /* --- Base typography ----------------------------------------------------- */ body { font-family: var(--font-body); font-size: 1.0625rem; color: var(--color-ink); background: var(--color-bg); } h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.75rem); } h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); } h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.75rem); } /* --- Layout primitives --------------------------------------------------- */ .wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1.25rem; } .prose { max-width: 68ch; } .section { padding-block: var(--section-pad); } @media (max-width: 640px) { .section { padding-block: 56px; } } /* --- Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.75rem 1.75rem; border: 2px solid transparent; border-radius: var(--radius); font-family: var(--font-body); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .btn-primary:hover { background: var(--color-accent-dk); border-color: var(--color-accent-dk); } .btn-outline { background: transparent; color: var(--color-accent-dk); border-color: var(--color-accent); } .btn-outline:hover { background: var(--color-accent); color: #fff; } /* --- Header (sticky) ----------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: 1px solid var(--color-soft); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; } .wordmark { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; text-decoration: none; color: var(--color-ink); } /* --- Hero ---------------------------------------------------------------- */ .hero { position: relative; padding-block: var(--section-pad); background: url('assets/hero.jpg') center / cover no-repeat; min-height: 520px; display: flex; align-items: center; } .hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.50); } .hero .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-copy h1 { margin-bottom: 1rem; color: #fff; } .hero-copy p { font-size: 1.25rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem; max-width: 52ch; margin-inline: auto; } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, 0.7); } .btn-outline-light:hover { background: #fff; color: var(--color-ink); border-color: #fff; } @media (max-width: 900px) { .hero { min-height: 400px; } } /* --- Problem statement --------------------------------------------------- */ .problem { text-align: center; } .problem-text { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.5rem); max-width: 52ch; margin-inline: auto; color: var(--color-muted); line-height: 1.6; } /* --- Dark band (stakes / lies) ------------------------------------------- */ .dark-band { background: var(--color-band); color: var(--color-band-ink); padding-block: var(--section-pad); } .dark-band h2 { color: var(--color-band-ink); } .stakes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; } .stake-card { background: rgba(255,255,255,.06); border-radius: var(--radius); padding: 2rem 1.5rem; } .stake-card h3 { color: var(--color-accent); margin-bottom: 0.5rem; font-size: 1.125rem; } .stake-card p { color: var(--color-band-ink); opacity: 0.85; font-size: 0.95rem; } .stakes-closing { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.75rem); text-align: center; color: var(--color-band-ink); } @media (max-width: 640px) { .stakes-grid { grid-template-columns: 1fr; } } /* --- Lie cards (Variant B strikethrough) ---------------------------------- */ .lie-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; } .lie-card { background: rgba(255,255,255,.06); border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; position: relative; overflow: hidden; } .lie-card blockquote { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--color-band-ink); position: relative; } .lies-intro { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.75rem); text-align: center; color: var(--color-band-ink); margin-bottom: 2rem; } @media (max-width: 640px) { .lie-cards { grid-template-columns: 1fr; } } /* --- Guide section (meet Michelle) --------------------------------------- */ .guide { padding-block: var(--section-pad); } .guide .wrap { display: grid; grid-template-columns: minmax(250px, 350px) 1fr; gap: 3rem; align-items: start; } .guide-portrait { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); } .guide-copy h2 { margin-bottom: 1rem; } .guide-copy p { font-size: 1.125rem; margin-bottom: 1rem; max-width: 60ch; } .guide-copy .tagline { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-accent-dk); } @media (max-width: 900px) { .guide .wrap { grid-template-columns: 1fr; text-align: center; } .guide-portrait { max-width: 280px; margin-inline: auto; } .guide-copy p { margin-inline: auto; } } /* --- Plan steps ---------------------------------------------------------- */ .plan-steps { padding-block: var(--section-pad); background: var(--color-soft); } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .step { text-align: center; } .step-num { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; color: var(--color-accent); line-height: 1; margin-bottom: 0.75rem; } .step h3 { margin-bottom: 0.5rem; } .step p { color: var(--color-muted); font-size: 0.95rem; } @media (max-width: 640px) { .steps-grid { grid-template-columns: 1fr; gap: 2.5rem; } } /* --- Value stack (Variant A) --------------------------------------------- */ .value-stack { padding-block: var(--section-pad); } .value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .value-card { background: var(--color-surface); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); } .value-card h3 { color: var(--color-accent-dk); margin-bottom: 0.5rem; } @media (max-width: 640px) { .value-grid { grid-template-columns: 1fr; } } /* --- Testimonials -------------------------------------------------------- */ .testimonials { padding-block: var(--section-pad); background: var(--color-soft); } .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .testimonial-card { background: var(--color-surface); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); } .testimonial-card blockquote { font-style: italic; font-size: 1.125rem; margin-bottom: 1rem; color: var(--color-ink); } .testimonial-card cite { font-style: normal; font-weight: 600; color: var(--color-accent-dk); } @media (max-width: 640px) { .testimonial-grid { grid-template-columns: 1fr; } } /* --- Video grid ---------------------------------------------------------- */ .videos { padding-block: var(--section-pad); } .video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .video-facade { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: #000; } .video-facade img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; } .video-facade:hover img { opacity: 0.8; } .video-facade .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; background: rgba(0,0,0,.7); border-radius: 12px; border: none; cursor: pointer; pointer-events: none; } .play-btn::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; } .video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 900px) { .video-grid { grid-template-columns: 1fr; } } /* --- Speaking (Variant B only) ------------------------------------------- */ .speaking { padding-block: var(--section-pad); } .speaking-list { margin-bottom: 2rem; } .speaking-item { padding: 1.25rem 0; border-bottom: 1px solid var(--color-soft); } .speaking-item h3 { margin-bottom: 0.25rem; } .speaking-item p { color: var(--color-muted); font-style: italic; } /* --- Resources ----------------------------------------------------------- */ .resources { padding-block: var(--section-pad); background: var(--color-soft); } .resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .resource-card { background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; } .resource-cover { aspect-ratio: 3 / 4; background: var(--color-band); display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow: hidden; } .resource-cover img { width: 100%; height: 100%; object-fit: cover; } .resource-cover:has(img) { padding: 0; } .resource-cover span { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-band-ink); text-align: center; line-height: 1.3; } .resource-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .resource-type { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent-dk); margin-bottom: 0.5rem; } .resource-body h3 { font-size: 1.125rem; margin-bottom: 0.5rem; } .resource-body p { color: var(--color-muted); font-size: 0.9rem; margin-bottom: 1rem; flex: 1; } .badge-soon { font-size: 0.75rem; color: var(--color-muted); margin-left: 0.5rem; } /* --- Contact / Let's Talk form ------------------------------------------- */ .contact { padding-block: var(--section-pad); background: var(--color-band); color: var(--color-band-ink); } .contact h2 { color: var(--color-band-ink); margin-bottom: 0.5rem; } .contact .subhead { color: var(--color-band-ink); opacity: 0.85; margin-bottom: 2.5rem; max-width: 52ch; } .contact-form { max-width: 600px; } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; color: var(--color-band-ink); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); background: rgba(255,255,255,.08); color: var(--color-band-ink); font-size: 1rem; } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,.4); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); } .form-group select option { background: var(--color-band); color: var(--color-band-ink); } /* Show invalid styling only after submit attempt */ .form-submitted .form-group input:invalid, .form-submitted .form-group textarea:invalid { border-color: #e05252; } .form-error { color: #fca5a5; font-size: 0.875rem; margin-top: 1rem; } .form-error a { color: #fca5a5; text-decoration: underline; } .form-success { font-size: 1.25rem; color: var(--color-band-ink); } .form-success p { margin-bottom: 0.5rem; } /* Honeypot */ .ohnohoney { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; } /* --- Footer -------------------------------------------------------------- */ .site-footer { padding: 2.5rem 0 1.5rem; text-align: center; font-size: 0.875rem; color: var(--color-muted); } .footer-copy { margin-bottom: 1rem; } .variant-toggle { font-size: 0.8125rem; color: var(--color-muted); text-decoration: none; opacity: 0.7; transition: opacity 0.2s; } .variant-toggle:hover { opacity: 1; text-decoration: underline; } /* --- Toast --------------------------------------------------------------- */ .toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(120%); background: var(--color-ink); color: var(--color-bg); padding: 0.75rem 1.5rem; border-radius: var(--radius); font-size: 0.875rem; z-index: 1000; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* --- Accessibility ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Visually hidden but accessible */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }