From 34c53a7f1d370c80b0f50ad9b8a460bb63715e8a Mon Sep 17 00:00:00 2001
From: Adolfo Reyna <aeroreyna@gmail.com>
Date: Fri, 13 Mar 2026 00:04:15 -0400
Subject: [PATCH] Implement brand style guide CSS variables and fonts

---
 style.css | 507 +++++++++++++++---------------------------------------
 1 file changed, 139 insertions(+), 368 deletions(-)

diff --git a/style.css b/style.css
index f5d8312..6377b96 100644
--- a/style.css
+++ b/style.css
@@ -5,398 +5,169 @@ Version: 1.3.0
 Text Domain: wisdom1
 */
 
-/* --- 1. Base Reset & Typography --- */
-* {
-	box-sizing: border-box;
+/* --- 1. Base Reset & Bootstrap Overrides --- */
+:root {
+	/* Brand Colors */
+	--brand-deep-midnight: #1A2B48;
+	--brand-royal-amethyst: #5D4B8A;
+	--brand-antique-parchment: #F4F1EA;
+	--brand-gold-leaf: #C5A059;
+	--brand-deep-teal: #006D77;
+
+	/* Bootstrap Overrides */
+	--bs-primary: var(--brand-deep-midnight);
+	--bs-primary-rgb: 26, 43, 72;
+	--bs-secondary: var(--brand-gold-leaf);
+	--bs-secondary-rgb: 197, 160, 89;
+	--bs-success: var(--brand-deep-teal);
+	--bs-info: var(--brand-royal-amethyst);
+	--bs-light: var(--brand-antique-parchment);
+	--bs-light-rgb: 244, 241, 234;
+	--bs-dark: var(--brand-deep-midnight);
+
+	--bs-body-font-family: 'Inter', sans-serif;
+	--bs-body-bg: var(--brand-antique-parchment);
+	--bs-body-color: var(--brand-deep-midnight);
+	--bs-heading-color: var(--brand-deep-midnight);
 }
 
 body {
-	margin: 0;
-	background-color: var(--wp--preset--color--base);
-	color: var(--wp--preset--color--primary);
-	font-family: var(--wp--preset--font-family--body-font);
-	font-size: var(--wp--preset--font-size--body);
-	line-height: 1.6;
+	font-family: var(--bs-body-font-family);
+	background-color: var(--bs-body-bg);
+	color: var(--bs-body-color);
 	-webkit-font-smoothing: antialiased;
-	overflow-x: hidden;
 }
 
-.site-container {
-	max-width: var(--wp--style--global--wide-size);
-	margin: 0 auto;
-	padding: 0 var(--wp--preset--spacing--50);
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6,
+.font-serif {
+	font-family: 'Playfair Display', serif;
 }
 
-img {
-	max-width: 100%;
-	height: auto;
-	display: block;
+.font-sans {
+	font-family: 'Inter', sans-serif;
 }
 
-/* --- 2. Header & Navigation (Sticky) --- */
-.site-header {
-	padding: var(--wp--preset--spacing--30) 0;
-	background-color: var(--wp--preset--color--base);
-	position: sticky;
-	top: 0;
-	z-index: 1000;
-	border-bottom: 1px solid var(--wp--preset--color--border);
+/* --- 2. Component Overrides (Buttons, Navbar, Forms) --- */
+
+/* Buttons */
+.btn-primary {
+	background-color: var(--brand-deep-midnight);
+	border-color: var(--brand-deep-midnight);
+	color: #fff;
 }
 
-.header-container {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	max-width: var(--wp--style--global--wide-size);
-	margin: 0 auto;
-	padding: 0 var(--wp--preset--spacing--50);
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active {
+	background-color: #121e33;
+	border-color: #121e33;
+	color: #fff;
 }
 
-.nav-and-search {
-	display: flex;
-	align-items: center;
-	gap: 30px;
+.btn-secondary,
+.btn-outline-secondary {
+	color: var(--brand-gold-leaf);
+	border-color: var(--brand-gold-leaf);
 }
 
-.brand-mark {
-	display: flex;
-	align-items: center;
-	gap: 15px;
-	text-decoration: none;
-	color: var(--wp--preset--color--primary);
+.btn-outline-secondary:hover {
+	background-color: var(--brand-gold-leaf);
+	color: #fff;
 }
 
+/* Typography Utilities */
+.text-primary {
+	color: var(--brand-deep-midnight) !important;
+}
+
+.text-secondary {
+	color: var(--brand-gold-leaf) !important;
+}
+
+.text-success {
+	color: var(--brand-deep-teal) !important;
+}
+
+.text-info {
+	color: var(--brand-royal-amethyst) !important;
+}
+
+.bg-primary {
+	background-color: var(--brand-deep-midnight) !important;
+}
+
+.bg-secondary {
+	background-color: var(--brand-gold-leaf) !important;
+}
+
+.bg-light {
+	background-color: var(--brand-antique-parchment) !important;
+}
+
+/* Navbar Overrides */
+.navbar-brand .logo-icon {
+	color: var(--brand-deep-midnight);
+}
+
+.navbar-light .navbar-nav .nav-link {
+	color: var(--brand-deep-midnight);
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	font-size: 0.85rem;
+}
+
+.navbar-light .navbar-nav .nav-link:hover {
+	color: var(--brand-gold-leaf);
+}
+
+/* Links */
+a {
+	color: var(--brand-deep-teal);
+	transition: color 0.2s ease-in-out;
+}
+
+a:hover {
+	color: var(--brand-gold-leaf);
+}
+
+/* Cards */
+.card {
+	background-color: #ffffff;
+	border-color: rgba(26, 43, 72, 0.1);
+}
+
+.card-title a {
+	color: var(--brand-deep-midnight);
+}
+
+.card-title a:hover {
+	color: var(--brand-gold-leaf);
+}
+
+/* --- 3. Custom Brand Additions --- */
 .logo-icon {
-	font-family: var(--wp--preset--font-family--header-font);
+	font-family: 'Playfair Display', serif;
 	font-size: 24px;
 	font-weight: bold;
-	border: 2px solid var(--wp--preset--color--primary);
+	border: 2px solid var(--brand-deep-midnight);
+	color: var(--brand-deep-midnight);
 	width: 40px;
 	height: 40px;
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-}
-
-.site-name {
-	font-family: var(--wp--preset--font-family--body-font);
-	font-weight: 700;
-	text-transform: uppercase;
-	letter-spacing: 0.1em;
-	font-size: 14px;
-}
-
-.main-navigation ul {
-	display: flex;
-	gap: var(--wp--preset--spacing--50);
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-
-.main-navigation a {
-	font-family: var(--wp--preset--font-family--body-font);
-	font-size: 13px;
-	font-weight: 700;
-	text-transform: uppercase;
-	color: var(--wp--preset--color--primary);
-	text-decoration: none;
-	transition: color 0.3s ease;
-}
-
-.main-navigation a:hover {
-	color: var(--wp--preset--color--accent);
-}
-
-/* Search Toggle */
-.search-toggle {
-	background: none;
-	border: none;
-	color: var(--wp--preset--color--primary);
-	cursor: pointer;
-	padding: 5px;
-	display: flex;
-	align-items: center;
-	transition: color 0.3s ease;
-}
-
-.search-toggle:hover {
-	color: var(--wp--preset--color--accent);
-}
-
-/* Search Overlay */
-.search-overlay {
-	position: absolute;
-	top: 100%;
-	left: 0;
-	right: 0;
-	background: var(--wp--preset--color--base);
-	padding: 40px 0;
-	border-bottom: 1px solid var(--wp--preset--color--border);
-	box-shadow: 0 10px 30px rgba(0,0,0,0.05);
-}
-
-.search-form-overlay {
-	display: flex;
-	gap: 20px;
-	max-width: 800px;
-	margin: 0 auto;
-}
-
-.search-field-large {
-	flex-grow: 1;
-	background: none;
-	border: none;
-	border-bottom: 2px solid var(--wp--preset--color--primary);
-	padding: 10px 0;
-	font-size: 24px;
-	font-family: var(--wp--preset--font-family--header-font);
-	color: var(--wp--preset--color--primary);
-}
-
-.search-field-large:focus {
-	outline: none;
-	border-color: var(--wp--preset--color--accent);
-}
-
-.search-submit-large {
-	background: var(--wp--preset--color--primary);
-	color: white;
-	border: none;
-	padding: 0 30px;
-	text-transform: uppercase;
-	font-weight: 700;
-	cursor: pointer;
-}
-
-/* --- 3. Hero Section (Landing Page) --- */
-.hero-section {
-	min-height: 80vh;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-	background-color: var(--wp--preset--color--base);
-	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
-	position: relative;
-}
-
-.hero-section::before {
-	content: "";
-	position: absolute;
-	top: 0; left: 0; right: 0; bottom: 0;
-	background: rgba(244, 241, 234, 0.6);
-	z-index: 1;
-}
-
-.hero-content { position: relative; z-index: 2; }
-
-.hero-headline {
-	font-family: var(--wp--preset--font-family--header-font);
-	font-size: clamp(2.5rem, 8vw, var(--wp--preset--font-size--heading));
-	margin-bottom: var(--wp--preset--spacing--30);
-	color: var(--wp--preset--color--primary);
-	line-height: 1.1;
-}
-
-.hero-subheadline {
-	font-size: clamp(1.125rem, 4vw, var(--wp--preset--font-size--subheading));
-	margin-bottom: var(--wp--preset--spacing--50);
-	max-width: 600px;
-	margin-left: auto;
-	margin-right: auto;
-	opacity: 0.8;
-}
-
-.cta-button {
-	display: inline-block;
-	padding: 15px 40px;
-	border: 2px solid var(--wp--preset--color--accent);
-	color: var(--wp--preset--color--accent);
-	text-decoration: none;
-	text-transform: uppercase;
-	font-weight: 700;
-	letter-spacing: 0.1em;
-	transition: all 0.3s ease;
-}
-
-.cta-button:hover {
-	background-color: var(--wp--preset--color--accent);
-	color: white;
-}
-
-/* --- 4. Archive & Category Headers --- */
-.category-header {
-	background-color: var(--wp--preset--color--primary);
-	color: white;
-	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50);
-	text-align: center;
-}
-
-.series-label {
-	display: block;
-	text-transform: uppercase;
-	letter-spacing: 0.2em;
-	font-size: 12px;
-	margin-bottom: 10px;
-	color: var(--wp--preset--color--accent);
-}
-
-.category-title {
-	font-family: var(--wp--preset--font-family--header-font);
-	font-size: clamp(2rem, 6vw, var(--wp--preset--font-size--heading));
-	margin: 0;
-}
-
-/* --- 5. Insights Grid & Cards --- */
-.section-header {
-	text-align: center;
-	margin: var(--wp--preset--spacing--70) 0;
-	padding: 0 var(--wp--preset--spacing--50);
-}
-
-.section-title {
-	font-family: var(--wp--preset--font-family--header-font);
-	font-size: clamp(1.75rem, 5vw, 36px);
-	margin-bottom: 10px;
-}
-
-.section-subtitle {
-	font-style: italic;
-	opacity: 0.6;
-}
-
-.insights-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-	gap: var(--wp--preset--spacing--50);
-	margin: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--90);
-}
-
-.insight-card {
-	background: #FFFFFF;
-	padding: var(--wp--preset--spacing--50);
-	border: 1px solid var(--wp--preset--color--border);
-	transition: border-color 0.3s ease;
-}
-
-.insight-card:hover { border-color: var(--wp--preset--color--hover); }
-
-.insight-card .post-thumbnail img {
-	width: 100%;
-	aspect-ratio: 16 / 9;
-	object-fit: cover;
-	margin-bottom: 20px;
-}
-
-.insight-card .entry-title a {
-	color: var(--wp--preset--color--primary);
-	text-decoration: none;
-	font-family: var(--wp--preset--font-family--header-font);
-	font-size: 24px;
-	line-height: 1.2;
-}
-
-.insight-card .entry-title a:hover { color: var(--wp--preset--color--hover); }
-
-.post-card-info {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	font-size: 11px;
-	color: var(--wp--preset--color--primary);
-	opacity: 0.6;
-	margin-top: 10px;
-	text-transform: uppercase;
-	font-weight: 700;
-}
-
-.dot-separator { color: var(--wp--preset--color--accent); }
-
-/* --- 6. Series Taxonomy (Steps) --- */
-.series-steps-container {
-	max-width: 800px;
-	margin: var(--wp--preset--spacing--70) auto;
-}
-
-.series-step-card {
-	display: flex;
-	gap: 30px;
-	margin-bottom: 40px;
-	padding-bottom: 40px;
-	border-bottom: 1px solid var(--wp--preset--color--border);
-}
-
-.step-number {
-	font-family: var(--wp--preset--font-family--header-font);
-	font-size: 48px;
-	color: var(--wp--preset--color--accent);
-	opacity: 0.3;
-	line-height: 1;
-}
-
-/* --- 7. Single Post Layout --- */
-.reading-container {
-	max-width: 680px;
-	margin: 0 auto;
-	font-size: clamp(1.125rem, 4vw, 20px);
-	line-height: 1.8;
-}
-
-.single-title {
-	font-family: var(--wp--preset--font-family--header-font);
-	font-size: clamp(2rem, 7vw, 56px);
-	text-align: center;
-	line-height: 1.1;
-}
-
-.single-post-thumbnail img {
-	width: 100%;
-	aspect-ratio: 21 / 9;
-	object-fit: cover;
-	margin-bottom: var(--wp--preset--spacing--70);
-}
-
-/* --- 8. Newsletter Strip --- */
-.newsletter-strip {
-	background-color: var(--wp--preset--color--primary);
-	color: white;
-	padding: var(--wp--preset--spacing--70) 0;
-}
-
-.newsletter-content {
-	max-width: 500px;
-	margin: 0 auto;
-	text-align: center;
-}
-
-.newsletter-form {
-	display: flex;
-	border-bottom: 1px solid var(--wp--preset--color--accent);
-	margin-top: 20px;
-}
-
-.newsletter-input {
-	background: none; border: none; color: white; flex-grow: 1; padding: 10px;
-}
-
-/* --- 9. Comments Section --- */
-.comments-area {
-	margin-top: var(--wp--preset--spacing--90);
-	border-top: 1px solid var(--wp--preset--color--border);
-	padding-top: var(--wp--preset--spacing--70);
-}
-
-.comment-body {
-	background: white;
-	padding: 30px;
-	border: 1px solid var(--wp--preset--color--border);
-	margin-bottom: 30px;
-}
-
-/* --- 10. Responsive --- */
-@media (max-width: 768px) {
-	.header-container { flex-direction: column; gap: 20px; }
-	.nav-and-search { width: 100%; justify-content: center; }
-}
+	border-radius: 4px;
+}
\ No newline at end of file