/* ============================================================================= Alliance Bible Fellowship — site-wide theme ============================================================================= Loaded on every page. base.html puts the public-page class on every , public and signed-in alike, so the whole application — workspace included — carries the church-site look. The selectors keep the body.public-page prefix because the specificity of the overrides depends on it. The palette and shapes are taken from abfboone.com so a visitor arriving from the church site does not feel handed off to a different organisation: #051821 ink headings, header/footer bands #1A4645 deep teal secondary dark, hover states #266867 teal the brand action colour — every CTA on abfboone.com #F8BC24 gold accent only, used sparingly The gold is deliberately held back. It currently reads as a site-wide colour on abfboone.com only because of the Financial Peace University promo strip across the top, which is a temporary campaign banner rather than part of the church's identity, so it is not treated as a brand colour here. Two shape rules carry most of the resemblance: actions are full pills (border-radius 999px, as every CTA on the church site is) while containers stay near-square. That square-container / pill-action contrast is the ABF signature far more than any single colour is. This file is loaded after main.css and leans on `body.public-page` for specificity. Several base rules in main.css are themselves !important, so the overrides that collide with them repeat it. ========================================================================== */ body.public-page { /* ---- brand ---- */ --abf-ink: #051821; --abf-deep: #1a4645; --abf-teal: #266867; --abf-teal-dark: #1d5150; --abf-gold: #f8bc24; /* Readable stand-in for the gold on white; #F8BC24 itself fails contrast against a light background, so text uses this and the true gold is kept for fills on dark. */ --abf-gold-ink: #8a6200; /* ---- remapped workspace tokens ---- main.css is written against these, so restating them re-themes the bulk of the shared components without touching their rules. */ --bg: #ffffff; --bg-strong: #f4f7f6; --surface: #ffffff; --surface-strong: #ffffff; --surface-muted: #f4f7f6; --text: #051821; --text-soft: #40605e; --muted: #6e8785; --line: #dde5e4; --line-strong: #c6d4d3; --primary: #266867; --primary-700: #1a4645; --primary-050: #eef4f3; --success: #1f6b4a; --warning: #8a6200; --danger: #a8321f; --shadow-sm: 0 1px 2px rgba(5, 24, 33, 0.05); --shadow-md: 0 2px 10px rgba(5, 24, 33, 0.06); --shadow-lg: 0 6px 24px rgba(5, 24, 33, 0.08); --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --shell-width: 1200px; /* Montserrat is the closest freely-licensed match to Gotham, which is the workhorse across abfboone.com. The church's display face (Benzin) is commercial and not redistributable, so headings use Montserrat at its heaviest weight, uppercase, which lands close to the same voice. */ --abf-sans: "Montserrat", "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } /* ----------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ body.public-page { /* Flat white. The workspace theme's radial-gradient wash is the single most "web app" thing about the current look and the church site has nothing like it. */ background: #ffffff; color: var(--text); font-family: var(--abf-sans); line-height: 1.65; } body.public-page input, body.public-page textarea, body.public-page select, body.public-page button { font-family: var(--abf-sans); } body.public-page a, body.public-page a:link, body.public-page a:visited { color: var(--abf-teal); } body.public-page a:hover { color: var(--abf-teal-dark); text-decoration: underline; text-underline-offset: 0.18em; } /* ----------------------------------------------------------------------------- Typography Headings are uppercase and heavy, which is how every section title on abfboone.com is set. Tracking opens up slightly as size drops, because uppercase at small sizes needs the air to stay legible. -------------------------------------------------------------------------- */ body.public-page h1, body.public-page h2, body.public-page h3, body.public-page h4, body.public-page h5, body.public-page h6 { color: var(--abf-ink); font-weight: 800; letter-spacing: 0; line-height: 1.15; } body.public-page p, body.public-page li { color: var(--text-soft) !important; } body.public-page strong, body.public-page b { color: var(--abf-ink); font-weight: 700; } /* ----------------------------------------------------------------------------- Header — full-bleed ink band Kept dark rather than white like the church site's own header for a concrete reason: static/img/logo.png is a light logo baked onto a grey gradient, not a transparent asset, so on a white band it would show as a grey rectangle. Ink is the church's own #051821, so this still reads as their header. If a transparent dark-on-light logo is ever produced, this band can flip to white. -------------------------------------------------------------------------- */ body.public-page .app-header { padding: 0; background: var(--abf-ink); } body.public-page .app-header__inner { padding: 1.15rem 1.1rem; border: 0; border-radius: 0; background: none; box-shadow: none; color: #ffffff; } /* The workspace header paints a soft light blob in the corner. Off here. */ body.public-page .app-header__inner::after { display: none; } /* .brand-logo is deliberately left to main.css. static/img/logo.png is a light mark baked onto an opaque grey gradient with no alpha channel. main.css already wraps it in a rounded chip that makes that grey ground read as deliberate against a dark header, and this band is dark for the same reason, so the existing treatment carries over unchanged. Laying the mark bare on the band would expose the grey as a rectangle, and blend modes do not rescue it — `screen` over a near-black band returns the source essentially untouched. A transparent export of the mark is the real fix; with one, this header could also flip to white like abfboone.com's own. */ body.public-page .brand-kicker { color: rgba(255, 255, 255, 0.66); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; } body.public-page .brand-title { color: #ffffff; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } /* ----------------------------------------------------------------------------- Main / footer -------------------------------------------------------------------------- */ body.public-page .app-main { padding-top: 2.75rem; padding-bottom: 3.5rem; } body.public-page .app-footer { padding: 0; background: var(--abf-ink); } body.public-page .app-footer__inner { padding: 1.6rem 1.1rem; border-top: 0; color: rgba(255, 255, 255, 0.62); font-size: 0.85rem; letter-spacing: 0.04em; } body.public-page .app-footer__inner a, body.public-page .app-footer__inner a:link, body.public-page .app-footer__inner a:visited { color: rgba(255, 255, 255, 0.86); font-weight: 600; } body.public-page .app-footer__inner a:hover { color: var(--abf-gold); } /* ----------------------------------------------------------------------------- Hero Deliberately not a card. On abfboone.com the page opening is type on open white with plenty of room, so the hero drops its panel chrome and becomes a masthead closed by a hairline. -------------------------------------------------------------------------- */ body.public-page .page-hero { padding: 0 0 1.75rem !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } body.public-page .page-hero::after { display: none; } body.public-page .page-kicker, body.public-page .crm-kicker { margin-bottom: 0.9rem; color: var(--abf-teal); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; } /* The kicker earns a short rule before it — a small nod to the church site's habit of marking a section start rather than letting the label float. */ body.public-page .page-kicker::before { content: ""; width: 26px; height: 2px; background: var(--abf-gold); flex: 0 0 26px; } /* Left in title case on purpose. Uppercase on abfboone.com is reserved for navigation, buttons and eyebrow labels — their actual headings ("Visit us", "Latest Message", "A Growing Love for the Lord") are all title case, and setting page headlines in caps overshoots the house voice. */ body.public-page .page-title { color: var(--abf-ink); font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.01em; } body.public-page .page-subtitle { margin-top: 0.9rem; max-width: 46rem; color: var(--text-soft); font-size: 1.05rem; line-height: 1.7; } body.public-page .page-actions { margin-top: 1.5rem; } /* ----------------------------------------------------------------------------- Panels and cards — flat, hairline, near-square -------------------------------------------------------------------------- */ body.public-page .page-panel, body.public-page .page-sidebar-card, body.public-page .card { border: 1px solid var(--line) !important; border-radius: var(--radius-md) !important; background: #ffffff !important; box-shadow: none !important; } body.public-page .page-panel, body.public-page .page-sidebar-card { padding: 1.6rem; } /* Title case for the same reason .page-title is. The uppercase treatment stays on .page-kicker, which is the eyebrow slot above these. */ body.public-page .page-section-title, body.public-page .crm-section-title { color: var(--abf-ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.005em; } body.public-page .page-section-subtitle { margin-top: 0.5rem; color: var(--text-soft); } body.public-page .page-shell { gap: 2.25rem; } /* ----------------------------------------------------------------------------- Buttons — the pill Every call to action on abfboone.com is a fully rounded pill in the brand teal, set in tracked uppercase. This is the strongest single carrier of the resemblance, so it is applied to the shared button classes wholesale. -------------------------------------------------------------------------- */ body.public-page .btn, body.public-page .btn-primary, body.public-page a.button, body.public-page input[type="submit"] { min-height: 3rem; padding: 0.8rem 1.85rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: none; } body.public-page .btn:hover, body.public-page .btn:focus, body.public-page input[type="submit"]:hover { /* The workspace buttons lift on hover; the church site's do not. */ transform: none; text-decoration: none; } body.public-page .btn-primary, body.public-page a.button, body.public-page input[type="submit"] { background: var(--abf-teal); border: 1px solid var(--abf-teal); color: #ffffff !important; box-shadow: none; } body.public-page .btn-primary:hover, body.public-page .btn-primary:focus, body.public-page .btn-primary:active, body.public-page a.btn-primary:hover, body.public-page a.btn-primary:focus, body.public-page a.btn-primary:active, body.public-page a.button:hover, body.public-page input[type="submit"]:hover { background: var(--abf-teal-dark); border-color: var(--abf-teal-dark); color: #ffffff !important; } /* Secondary: the outlined pill the church site uses beside a filled one. */ body.public-page .btn-outline-primary, body.public-page .btn-outline-secondary, body.public-page .btn-outline-light { background: transparent; border: 1px solid var(--abf-ink); color: var(--abf-ink); } body.public-page .btn-outline-primary:hover, body.public-page .btn-outline-secondary:hover, body.public-page .btn-outline-light:hover { background: var(--abf-ink); border-color: var(--abf-ink); color: #ffffff; } body.public-page .btn-outline-success { background: transparent; border: 1px solid var(--success); color: var(--success); } body.public-page .btn-outline-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); } body.public-page .btn-outline-success:hover { background: var(--success); color: #ffffff; } body.public-page .btn-outline-danger:hover { background: var(--danger); color: #ffffff; } /* Anchor buttons. Most "buttons" on these pages are , and the generic link rules near the top of this file are `body.public-page a:link` / `a:hover`, which score 0,2,2 — higher than the 0,2,1 of the plain .btn-outline-* rules above. Without restating them per anchor state the outline pills inherit the teal link colour instead of ink, and pick up the link underline on hover. */ body.public-page a.btn-outline-primary:link, body.public-page a.btn-outline-primary:visited, body.public-page a.btn-outline-secondary:link, body.public-page a.btn-outline-secondary:visited, body.public-page a.btn-outline-light:link, body.public-page a.btn-outline-light:visited { color: var(--abf-ink); } body.public-page a.btn-outline-success:link, body.public-page a.btn-outline-success:visited { color: var(--success); } body.public-page a.btn-outline-danger:link, body.public-page a.btn-outline-danger:visited { color: var(--danger); } body.public-page a.btn-outline-primary:hover, body.public-page a.btn-outline-secondary:hover, body.public-page a.btn-outline-light:hover, body.public-page a.btn-outline-success:hover, body.public-page a.btn-outline-danger:hover { color: #ffffff; } body.public-page a.btn-link:link, body.public-page a.btn-link:visited { color: var(--abf-teal); } /* Labels are never underlined, on any button variant or state. */ body.public-page a.btn:hover, body.public-page a.btn:focus, body.public-page a.button:hover, body.public-page a.button:focus { text-decoration: none; } body.public-page .btn-sm { min-height: 2.4rem; padding: 0.5rem 1.2rem; font-size: 0.72rem; } body.public-page .btn-link { padding-left: 0; padding-right: 0; border-radius: 0; color: var(--abf-teal); letter-spacing: 0.08em; } /* ----------------------------------------------------------------------------- Forms Square-cornered against the pill actions, with a teal focus ring. Public pages are mostly forms — interest, join, subscribe, opt-in, survey — so this is where most visitors actually spend their time. -------------------------------------------------------------------------- */ body.public-page .form-label { color: var(--abf-ink); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } body.public-page .form-control, body.public-page .form-select, body.public-page input[type="text"], body.public-page input[type="email"], body.public-page input[type="tel"], body.public-page input[type="password"], body.public-page input[type="number"], body.public-page input[type="date"], body.public-page textarea, body.public-page select { padding: 0.75rem 0.95rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #ffffff; color: var(--abf-ink); box-shadow: none; } body.public-page .form-control:focus, body.public-page .form-select:focus, body.public-page input:focus, body.public-page textarea:focus, body.public-page select:focus { border-color: var(--abf-teal); box-shadow: 0 0 0 3px rgba(38, 104, 103, 0.16); outline: none; } body.public-page .form-check-input:checked { background-color: var(--abf-teal); border-color: var(--abf-teal); } body.public-page .form-check-input:focus { border-color: var(--abf-teal); box-shadow: 0 0 0 3px rgba(38, 104, 103, 0.16); } body.public-page .form-check-label, body.public-page .form-text { color: var(--text-soft) !important; } /* ----------------------------------------------------------------------------- Alerts — flat, left-marked -------------------------------------------------------------------------- */ body.public-page .alert { border: 1px solid var(--line); border-left: 3px solid var(--abf-teal); border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--text-soft); box-shadow: none; } body.public-page .alert-success { border-left-color: var(--success); background: #f0f7f3; } body.public-page .alert-warning { border-left-color: var(--abf-gold); background: #fdf8ec; } body.public-page .alert-info { border-left-color: var(--abf-teal); background: var(--primary-050); } body.public-page .alert-danger, body.public-page div.error { border-left-color: var(--danger); background: #fbf1ef; color: var(--danger); } body.public-page .text-danger { color: var(--danger) !important; } /* ----------------------------------------------------------------------------- Shared public components -------------------------------------------------------------------------- */ /* Devotional / signup call-out: the one place the ink band is reused mid-page, which is how abfboone.com breaks up long white stretches. */ body.public-page .devotional-cta { border: 0 !important; border-radius: var(--radius-md) !important; background: var(--abf-deep) !important; color: #ffffff !important; box-shadow: none !important; } body.public-page .devotional-cta__title { color: #ffffff !important; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } body.public-page .devotional-cta__body, body.public-page .devotional-cta p { color: rgba(255, 255, 255, 0.82) !important; } body.public-page .devotional-cta .btn-primary { background: var(--abf-gold); border-color: var(--abf-gold); color: var(--abf-ink) !important; } body.public-page .devotional-cta .btn-primary:hover { background: #ffd25a; border-color: #ffd25a; color: var(--abf-ink) !important; } body.public-page .interest-steps__title { color: var(--abf-ink); font-weight: 700; } body.public-page .interest-steps__body { color: var(--text-soft) !important; } body.public-page .crm-pill, body.public-page .video-chip, body.public-page .devotional-tag { border: 1px solid var(--line-strong); border-radius: 999px; background: #ffffff; color: var(--text-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } body.public-page .list-group-item { border-color: var(--line); background: #ffffff; color: var(--text-soft); } /* main.css flattens .gold-text to the body colour. On public pages it becomes a real accent again, in the darkened gold that survives on white. */ body.public-page .gold-text { color: var(--abf-gold-ink) !important; } body.public-page .announcement__text, body.public-page .announcement__text--full { color: var(--text-soft) !important; } /* ----------------------------------------------------------------------------- Signed-in workspace chrome Components that only appear once logged in, so the original public-only version of this file never had to style them. The token remap above already re-colours most of them; these rules bring their shapes in line — flat, hairline-bordered, near-square containers against pill actions. -------------------------------------------------------------------------- */ /* The nav: main.css gives it a translucent, blurred, heavily rounded card. Against the flat white page it becomes a plain hairline band instead. */ body.public-page .app-nav__inner { border: 1px solid var(--line); border-radius: var(--radius-md); background: #ffffff; box-shadow: none; backdrop-filter: none; } /* Nav links take the tracked-uppercase voice the church site uses for navigation, and lose the hover lift for the same reason the buttons did. */ body.public-page .app-nav__links a, body.public-page .app-nav__logout { color: var(--abf-ink); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } body.public-page .app-nav__links a:hover, body.public-page .app-nav__logout:hover { background: var(--primary-050); color: var(--abf-teal-dark); transform: none; } body.public-page .app-role-chip { border: 1px solid var(--line-strong); background: #ffffff; color: var(--text-soft); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } /* Hardcoded blue remnants in main.css that the token remap cannot reach. */ body.public-page tbody tr:hover { background: var(--primary-050); } body.public-page .devotional-topbar { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); box-shadow: none; } body.public-page .bw-score-btn:hover { background: var(--primary-050); } /* ----------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 900px) { body.public-page .page-grid-2 { grid-template-columns: minmax(0, 1fr); } body.public-page .app-main { padding-top: 1.9rem; } } @media (max-width: 640px) { body.public-page .page-title { font-size: clamp(1.6rem, 7vw, 2.1rem); } body.public-page .page-panel, body.public-page .page-sidebar-card { padding: 1.15rem; } body.public-page .app-footer__inner, body.public-page .app-header__inner { flex-direction: column; align-items: flex-start; text-align: left; } /* A full-width pill is easier to hit than a centred one on a phone, and the public pages are overwhelmingly reached from phones via QR codes. */ body.public-page .page-actions .btn { width: 100%; } }