/*
Theme Name: Glow Music Ministry
Theme URI: https://glowmusicministry.com/
Author: UMS Digital
Author URI: https://umsdigital.com/
Description: Classic PHP WordPress theme rebuilding the public glowmusicministry.com site. Built by scanning the live site's page structure and real copy (see README.md for exactly what was scanned). Brand colors and fonts below are marked ESTIMATED — the automated scan could not retrieve the live site's raw CSS/hex values, only rendered text content. Verify against the real brand guide before launch.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glow-music-ministry
COLOR/FONT SOURCE NOTE:
- The live site loads its stylesheet via a theme called "Quadro" (per its footer
credit "Quadro Powered by UMS Digital"). The automated scanning tool used to
build this theme (WebFetch) renders pages to summarized text/markdown and
could NOT retrieve raw markup, hrefs,
inline style hex values, or Google Fonts tags, despite repeated
targeted attempts.
- Every color and font below is therefore ESTIMATED from the general visual
impression of a gospel/ministry brand named "Glow" (warm gold/amber accent,
dark neutral footer, clean white body) — NOT measured from the live CSS.
- Action item for a human: open https://glowmusicministry.com/ in a browser,
use DevTools to grab the real hex values and font-family stack, and update
the :root block below.
*/
/* =========================================================
0. CSS CUSTOM PROPERTIES (brand tokens — ESTIMATED, see note above)
========================================================= */
:root {
/* Brand colors — ESTIMATED */
--color-primary: #f2a93b; /* warm gold/amber — CTA buttons, accents */
--color-primary-dark: #d98f1f; /* hover state for gold elements */
--color-ink: #1b1b2f; /* deep navy/charcoal — footer bg, dark sections */
--color-ink-soft: #2c2c44;
--color-text: #2b2b2b;
--color-text-muted: #6a6a6a;
--color-bg: #ffffff;
--color-bg-alt: #faf7f0; /* warm cream section background */
--color-border: #e7e2d8;
--color-white: #ffffff;
/* Typography — ESTIMATED */
--font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
--font-body: 'Open Sans', 'Segoe UI', Arial, sans-serif;
/* Layout */
--container-width: 1180px;
--radius: 6px;
--shadow-card: 0 2px 14px rgba(27, 27, 47, 0.08);
--header-height: 84px;
}
/* =========================================================
1. RESET / BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--color-text);
background: var(--color-bg);
line-height: 1.65;
font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-dark); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--color-primary); }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--color-ink);
font-weight: 700;
line-height: 1.25;
margin: 0 0 .6em;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1.2em; }
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 24px;
}
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
[hidden] { display: none !important; }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
padding: 14px 30px;
border-radius: var(--radius);
font-family: var(--font-heading);
font-weight: 700;
font-size: .95rem;
letter-spacing: .03em;
text-transform: uppercase;
border: 2px solid transparent;
cursor: pointer;
transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: var(--color-primary);
color: var(--color-ink);
}
.btn-primary:hover { background: var(--color-primary-dark); color: var(--color-white); }
.btn-outline {
background: transparent;
border-color: var(--color-primary);
color: var(--color-ink);
}
.btn-outline:hover { background: var(--color-primary); color: var(--color-ink); }
.btn-ghost-light {
background: transparent;
border-color: rgba(255,255,255,.55);
color: var(--color-white);
}
.btn-ghost-light:hover { background: var(--color-white); color: var(--color-ink); }
.btn-sm { padding: 9px 18px; font-size: .8rem; }
/* =========================================================
2. SITE HEADER
========================================================= */
.site-header {
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 100;
}
.site-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--header-height);
gap: 24px;
}
.site-branding { display: flex; align-items: center; gap: 12px; }
.site-branding img.custom-logo { max-height: 56px; width: auto; }
.site-title {
font-family: var(--font-heading);
font-size: 1.4rem;
font-weight: 800;
color: var(--color-ink);
margin: 0;
line-height: 1.1;
}
.site-title a { color: inherit; }
.site-tagline {
margin: 0;
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-primary-dark);
font-weight: 600;
}
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-social { display: flex; gap: 12px; }
.header-social a {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--color-bg-alt);
color: var(--color-ink);
font-size: .8rem;
font-weight: 700;
}
.header-social a:hover { background: var(--color-primary); color: var(--color-ink); }
.header-watch-live {
border-color: var(--color-ink);
color: var(--color-ink);
}
.header-watch-live:hover { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }
.header-apply-btn {
white-space: nowrap;
}
/* Primary nav */
.primary-navigation { display: flex; align-items: center; }
.primary-menu {
display: flex;
align-items: center;
gap: 6px;
}
.primary-menu > li { position: relative; }
.primary-menu > li > a {
display: block;
padding: 12px 14px;
color: var(--color-ink);
font-family: var(--font-heading);
font-weight: 600;
font-size: .95rem;
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a { color: var(--color-primary-dark); }
.primary-menu .sub-menu {
position: absolute;
top: 100%; left: 0;
min-width: 200px;
background: var(--color-white);
box-shadow: var(--shadow-card);
border-radius: var(--radius);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
z-index: 20;
}
.primary-menu li.menu-item-has-children:hover > .sub-menu,
.primary-menu li.menu-item-has-children:focus-within > .sub-menu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-menu .sub-menu li a {
display: block;
padding: 9px 12px;
border-radius: 4px;
color: var(--color-text);
font-weight: 500;
font-size: .9rem;
}
.primary-menu .sub-menu li a:hover { background: var(--color-bg-alt); color: var(--color-primary-dark); }
.menu-item-has-children > a::after { content: " \25BE"; font-size: .7em; }
.menu-toggle {
display: none;
background: transparent;
border: 2px solid var(--color-ink);
border-radius: var(--radius);
padding: 8px 10px;
cursor: pointer;
}
.menu-toggle span {
display: block;
width: 22px; height: 2px;
background: var(--color-ink);
margin: 4px 0;
}
/* =========================================================
3. FRONT PAGE SECTIONS
========================================================= */
.hero-cta {
background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%);
color: var(--color-white);
text-align: center;
padding: 90px 24px;
}
.hero-cta h1 {
color: var(--color-white);
max-width: 760px;
margin: 0 auto 28px;
font-size: clamp(1.6rem, 3.6vw, 2.6rem);
text-transform: uppercase;
letter-spacing: .02em;
}
.section { padding: 72px 0; }
.section-alt { background: var(--color-bg-alt); }
.section-header { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.section-header .eyebrow {
display: inline-block;
color: var(--color-primary-dark);
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
font-size: .78rem;
margin-bottom: 10px;
}
.theme-scripture-card {
max-width: 760px;
margin: 0 auto;
background: var(--color-white);
border: 1px solid var(--color-border);
border-top: 4px solid var(--color-primary);
border-radius: var(--radius);
padding: 40px;
text-align: center;
box-shadow: var(--shadow-card);
}
.theme-scripture-card h3 { color: var(--color-primary-dark); text-transform: uppercase; font-size: 1.1rem; }
.theme-scripture-card blockquote {
margin: 18px 0;
font-style: italic;
font-size: 1.15rem;
color: var(--color-ink);
}
.theme-scripture-card cite {
display: block;
font-style: normal;
font-weight: 700;
color: var(--color-text-muted);
margin-bottom: 18px;
}
.song-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 24px;
}
.song-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
}
.song-card-art {
aspect-ratio: 1 / 1;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-ink);
font-family: var(--font-heading);
font-weight: 800;
font-size: 2.4rem;
}
.song-card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.song-card-body h4 { margin: 0; font-size: 1.05rem; }
.song-card-body .scripture-ref { font-size: .82rem; color: var(--color-text-muted); margin: 0; }
.song-card-body .btn { margin-top: auto; }
.events-placeholder {
max-width: 760px;
margin: 0 auto;
text-align: center;
padding: 40px;
border: 1px dashed var(--color-border);
border-radius: var(--radius);
background: var(--color-white);
color: var(--color-text-muted);
}
/* Mandate / three column */
.mandate-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 28px;
}
.mandate-card {
text-align: center;
padding: 32px 22px;
background: var(--color-white);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
.mandate-card .icon-badge {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--color-bg-alt);
color: var(--color-primary-dark);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
font-size: 1.4rem;
font-weight: 800;
}
.mandate-card h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
/* generic page content */
.page-hero {
background: var(--color-ink);
color: var(--color-white);
padding: 56px 24px;
text-align: center;
}
.page-hero h1 { color: var(--color-white); margin: 0; }
.entry-content {
padding: 56px 0 80px;
max-width: 820px;
margin: 0 auto;
}
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content img { border-radius: var(--radius); margin: 1em 0; }
/* =========================================================
4. FOOTER
========================================================= */
.site-footer {
background: var(--color-ink);
color: rgba(255,255,255,.82);
padding-top: 64px;
}
.footer-columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 36px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-col h3 {
color: var(--color-white);
font-size: .95rem;
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 18px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,.75); }
.footer-col a:hover { color: var(--color-primary); }
.footer-col p { color: rgba(255,255,255,.75); font-size: .92rem; }
.footer-apply-col {
background: rgba(255,255,255,.06);
border-radius: var(--radius);
padding: 22px;
}
.footer-apply-col h3 { color: var(--color-primary); }
.footer-apply-col .btn { margin-top: 12px; }
.footer-bottom {
padding: 24px 0 32px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: .82rem;
color: rgba(255,255,255,.55);
}
.footer-bottom a { color: rgba(255,255,255,.7); }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.08);
color: var(--color-white);
font-size: .75rem;
font-weight: 700;
}
.footer-social a:hover { background: var(--color-primary); color: var(--color-ink); }
/* 404 */
.error-404 { text-align: center; padding: 100px 24px; }
.error-404 h1 { font-size: 5rem; color: var(--color-primary); }
/* search form */
.search-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto 32px; }
.search-form input[type="search"] {
flex: 1;
padding: 10px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-family: var(--font-body);
}
.search-form button {
padding: 10px 18px;
background: var(--color-primary);
border: none;
border-radius: var(--radius);
font-weight: 700;
cursor: pointer;
}
/* =========================================================
5. RESPONSIVE — breakpoints at 960 / 782 / 480
========================================================= */
@media (max-width: 960px) {
.footer-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
.menu-toggle { display: inline-flex; flex-direction: column; }
.primary-navigation {
position: fixed;
top: var(--header-height);
right: 0;
height: calc(100vh - var(--header-height));
width: min(320px, 84vw);
background: var(--color-white);
flex-direction: column;
align-items: stretch;
padding: 20px;
box-shadow: -4px 0 20px rgba(0,0,0,.12);
transform: translateX(100%);
transition: transform .2s ease;
overflow-y: auto;
z-index: 90;
}
.primary-navigation.is-open { transform: translateX(0); }
.primary-menu { flex-direction: column; align-items: stretch; gap: 0; }
.primary-menu > li > a { padding: 14px 8px; border-bottom: 1px solid var(--color-border); }
.primary-menu .sub-menu {
position: static;
opacity: 1; visibility: visible; transform: none;
box-shadow: none;
display: none;
padding-left: 12px;
}
.primary-menu li.submenu-open > .sub-menu { display: block; }
.header-social { display: none; }
.header-watch-live { display: none; }
.site-header-inner { min-height: 64px; }
:root { --header-height: 64px; }
.hero-cta { padding: 56px 20px; }
.section { padding: 48px 0; }
.footer-columns { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) {
h1 { font-size: 1.7rem; }
h2 { font-size: 1.4rem; }
.theme-scripture-card { padding: 24px; }
.btn { width: 100%; }
.header-apply-btn.btn { width: auto; }
}