/* ============================================================ Daily Bread Fellowship — shared stylesheet Warm oat / wheat • slate blue + wheat gold • Georgia serif heads WCAG AA contrast • mobile-first • no external dependencies ============================================================ */ /* ---------- Design tokens ---------- */ :root { /* Backgrounds */ --cream: #F3F1E9; /* page background (oat) */ --wheat: #E8E5D5; /* alternating section background */ --wheat-deep: #DCD8C3; /* deeper band */ --card: #FCFBF4; /* card surface */ /* Ink */ --ink: #20262E; /* primary heading/text (slate ink) */ --ink-soft: #485058; /* secondary text */ --ink-muted: #717A82; /* tertiary / captions */ /* Brand accents */ --green: #26415E; /* slate blue — primary actions */ --green-deep: #1B2F47; /* darker slate hover */ --green-tint: #E1E8EF; /* soft slate wash */ --gold: #97711F; /* wheat gold accent for text (AA on oat) */ --gold-bright: #C2922E; /* bright wheat gold for fills/decoration */ --gold-soft: #F1E6C7; /* pale gold wash */ /* Lines & shadows */ --line: #DEDAC8; --shadow-sm: 0 1px 3px rgba(32,38,46,.07), 0 1px 2px rgba(32,38,46,.05); --shadow-md: 0 6px 20px rgba(32,38,46,.09), 0 2px 6px rgba(32,38,46,.06); --shadow-lg: 0 18px 50px rgba(32,38,46,.13), 0 6px 16px rgba(32,38,46,.07); /* Shape & rhythm */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; --maxw: 1140px; --gut: clamp(20px, 5vw, 48px); /* Type */ --serif: Georgia, "Times New Roman", "Iowan Old Style", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; } /* ============================================================ PALETTE THEMES — set data-palette on to switch. Each keeps a warm, welcoming base + WCAG AA contrast. --green* = primary deep accent role · --gold* = secondary accent role ============================================================ */ /* Olive + Terracotta — earthy, warm, harvest */ [data-palette="olive"] { --cream: #F4EEDC; --wheat: #ECE3C8; --wheat-deep: #E2D4B2; --card: #FCF8EE; --ink: #2A2A1D; --ink-soft: #534F40; --ink-muted: #76705B; --green: #3C4A2A; --green-deep: #2C381E; --green-tint: #E6ECDB; --gold: #9A5A30; --gold-bright: #C77A4A; --gold-soft: #F3E2D1; --line: #E2D6BA; } /* Burgundy + Brass — rich, traditional, reverent */ [data-palette="burgundy"] { --cream: #F6EFE7; --wheat: #EFE3D4; --wheat-deep: #E6D6C2; --card: #FDF8F1; --ink: #2C2120; --ink-soft: #574542; --ink-muted: #806E69; --green: #6E2434; --green-deep: #561A28; --green-tint: #F1E2E4; --gold: #97631F; --gold-bright: #BC8B3C; --gold-soft: #F3E7CE; --line: #E6D7C5; } /* Slate Blue + Wheat — calm, steady, trustworthy */ [data-palette="slate"] { --cream: #F3F1E9; --wheat: #E8E5D5; --wheat-deep: #DCD8C3; --card: #FCFBF4; --ink: #20262E; --ink-soft: #485058; --ink-muted: #717A82; --green: #26415E; --green-deep: #1B2F47; --green-tint: #E1E8EF; --gold: #97711F; --gold-bright: #C2922E; --gold-soft: #F1E6C7; --line: #DEDAC8; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); color: var(--ink); background: var(--cream); line-height: 1.65; font-size: 18px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: var(--green); text-decoration-color: rgba(35,77,52,.35); text-underline-offset: 3px; } a:hover { color: var(--green-deep); } :focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 2px; border-radius: 4px; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: clamp(2.6rem, 6vw, 4.3rem); } h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); } h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); } p { text-wrap: pretty; } .eyebrow { font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: .55rem; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold-bright); border-radius: 2px; } .lead { font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: var(--ink-soft); } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: clamp(64px, 9vw, 120px); } .section--wheat { background: var(--wheat); } .section--wheat-deep { background: var(--wheat-deep); } .section--green { background: var(--green); color: #F4EFE2; } .section--green h2, .section--green h3 { color: #FFFDF7; } .section-head { max-width: 680px; margin-bottom: clamp(34px, 5vw, 56px); } .section-head .lead { margin-top: 18px; } .scroll-target { scroll-margin-top: 96px; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--green); --btn-fg: #FCFBF5; display: inline-flex; align-items: center; gap: .6rem; font-family: var(--sans); font-size: 1.02rem; font-weight: 650; line-height: 1; padding: 1rem 1.6rem; border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; box-shadow: var(--shadow-sm); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--btn-fg); background: var(--green-deep); } .btn:active { transform: translateY(0); } .btn svg { width: 1.15em; height: 1.15em; } .btn--gold { --btn-bg: var(--gold-bright); --btn-fg: #3A2A06; } .btn--gold:hover { background: #C49A22; color: #3A2A06; } .btn--outline { background: transparent; color: var(--green); border-color: rgba(35,77,52,.35); box-shadow: none; } .btn--outline:hover { background: rgba(35,77,52,.06); border-color: var(--green); color: var(--green-deep); } .btn--on-green { background: var(--gold-bright); color: #3A2A06; } .btn--on-green:hover { background: #E6BC3C; color: #3A2A06; } .btn--ghost-light { background: transparent; color: #F4EFE2; border-color: rgba(255,255,255,.4); box-shadow: none; } .btn--ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.7); } /* ---------- Cards ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 38px); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; } .card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .icon-badge { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: var(--green-tint); color: var(--green); margin-bottom: 22px; border: 1px solid rgba(35,77,52,.12); } .icon-badge--gold { background: var(--gold-soft); color: var(--gold); border-color: rgba(166,120,27,.18); } .icon-badge svg { width: 30px; height: 30px; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(251,246,236,.86); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; gap: 1rem; height: 72px; } .brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); margin-right: auto; } .brand:hover { color: var(--ink); } .brand .mark { width: 38px; height: 38px; flex: none; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-text b { font-family: var(--serif); font-size: 1.18rem; letter-spacing: -.01em; white-space: nowrap; } .brand-text span { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: 3px; font-weight: 700; } .nav-links { display: flex; align-items: center; gap: .15rem; list-style: none; } .nav-links a { display: inline-block; text-decoration: none; color: var(--ink-soft); font-weight: 550; font-size: .96rem; padding: .5rem .7rem; border-radius: var(--r-pill); white-space: nowrap; } .nav-links a:hover { color: var(--ink); background: rgba(46,36,23,.05); } .nav-links a[aria-current="page"] { color: var(--green); background: var(--green-tint); } .nav-cta { margin-left: .4rem; } .nav-toggle { display: none; background: transparent; border: 1px solid var(--line); border-radius: 12px; width: 46px; height: 44px; cursor: pointer; color: var(--ink); align-items: center; justify-content: center; } .nav-toggle svg { width: 24px; height: 24px; } @media (max-width: 980px) { .nav-toggle { display: inline-flex; } .nav-links { position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: .2rem; background: var(--cream); border-bottom: 1px solid var(--line); padding: 14px var(--gut) 22px; box-shadow: var(--shadow-md); display: none; } .nav-links.open { display: flex; } .nav-links a { padding: .85rem .9rem; font-size: 1.05rem; } .nav-cta { margin-left: 0; margin-top: .4rem; } .nav-links .btn { width: 100%; justify-content: center; } } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: #D9CFBC; padding-block: clamp(48px, 7vw, 80px) 32px; } .site-footer a { color: #EBDFC6; } .site-footer .brand-text b { color: #FFFDF7; } .site-footer .brand-text span { color: var(--gold-bright); } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: clamp(28px, 5vw, 64px); padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,.12); } .footer-grid h4 { color: #FFFDF7; font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; } .footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-grid a { text-decoration: none; color: #D9CFBC; } .footer-grid a:hover { color: #fff; text-decoration: underline; } .footer-about { color: #C3B89F; max-width: 34ch; margin-top: 16px; font-size: .98rem; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; padding-top: 26px; font-size: .85rem; color: #A99C82; } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about-col { grid-column: 1 / -1; } } @media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------- TODO marker ---------- */ .todo { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: #8a5a00; background: repeating-linear-gradient(135deg, #FBEFC9, #FBEFC9 8px, #F6E6B4 8px, #F6E6B4 16px); border: 1px dashed #C99A1E; border-radius: 8px; padding: .25rem .55rem; vertical-align: middle; } .todo::before { content: "TODO"; font-size: .62rem; background: #C99A1E; color: #fff; padding: .08rem .3rem; border-radius: 4px; letter-spacing: .08em; } /* ---------- Forms ---------- */ .form-field { display: flex; flex-direction: column; gap: .5rem; } .form-field > label { font-weight: 650; color: var(--ink); font-size: .96rem; } .form-field .hint { font-size: .82rem; color: var(--ink-muted); font-weight: 400; } .req { color: var(--gold); font-weight: 700; } .input, .textarea, .select { font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: .85rem 1rem; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; } .input::placeholder, .textarea::placeholder { color: #A89B82; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(35,77,52,.14); } .textarea { min-height: 130px; resize: vertical; line-height: 1.55; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235A4D38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; } .radio-group { display: flex; flex-direction: column; gap: .6rem; } .radio-row { display: flex; align-items: center; gap: .7rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: .8rem 1rem; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .radio-row:hover { border-color: #CDBF9F; background: var(--gold-soft); } .radio-row input { accent-color: var(--green); width: 1.15rem; height: 1.15rem; flex: none; } .radio-row:has(input:checked) { border-color: var(--green); background: var(--green-tint); } .radio-row span { font-size: .98rem; } /* visually-hidden honeypot */ .hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ---------- Utilities ---------- */ .grid { display: grid; gap: clamp(20px, 2.6vw, 30px); } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } } .center { text-align: center; } .mx-auto { margin-inline: auto; } .stack > * + * { margin-top: 1.1rem; } .chip { display: inline-flex; align-items: center; gap: .5rem; background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(166,120,27,.2); border-radius: var(--r-pill); padding: .4rem .9rem; font-size: .85rem; font-weight: 650; } .chip svg { width: 1.1em; height: 1.1em; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--green); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 10px 0; z-index: 100; } .skip-link:focus { left: 0; color: #fff; } /* Reveal-on-scroll (progressive enhancement). Content is ALWAYS fully opaque — the entrance only animates transform, so even if animations are paused/blocked the text stays readable. */ @media (prefers-reduced-motion: no-preference) { .reveal.in { animation: db-reveal .65s cubic-bezier(.22,.61,.36,1); } } @keyframes db-reveal { from { transform: translateY(22px); } to { transform: none; } }