{"id":1511,"date":"2026-04-27T20:42:29","date_gmt":"2026-04-27T20:42:29","guid":{"rendered":"https:\/\/demowebdesign.live\/michael-barnes\/?page_id=1511"},"modified":"2026-04-29T19:36:02","modified_gmt":"2026-04-29T19:36:02","slug":"shop","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/michael-barnes\/shop\/","title":{"rendered":"Shop"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1511\" class=\"elementor elementor-1511\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db16152 e-flex e-con-boxed e-con e-parent\" data-id=\"db16152\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8edba7d e-con-full e-flex e-con e-child\" data-id=\"8edba7d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d74d597 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"d74d597\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-df42a4e e-con-full e-flex e-con e-child\" data-id=\"df42a4e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f7948c elementor-widget elementor-widget-heading\" data-id=\"5f7948c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Shop<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-341f542 e-flex e-con-boxed e-con e-parent\" data-id=\"341f542\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b63476 elementor-widget elementor-widget-html\" data-id=\"1b63476\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Outfit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        :root {\r\n            --gold: #B8960C;\r\n            --gold-light: #D4AF37;\r\n            --cream: #F5EFE0;\r\n            --ink: #0D0D0D;\r\n            --ink-mid: #1a1a1a;\r\n            --ink-soft: #2e2e2e;\r\n            --border: #2a2618;\r\n            --text-muted: #8a8070;\r\n        }\r\n\r\n        * { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n        body {\r\n            background: var(--ink);\r\n            color: var(--cream);\r\n            font-family: 'Outfit', sans-serif;\r\n            line-height: 1.6;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        \/* Noise Overlay *\/\r\n        body::before {\r\n            content: '';\r\n            position: fixed; inset: 0;\r\n            background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'\/%3E%3C\/svg%3E\");\r\n            pointer-events: none; z-index: 999; opacity: .5;\r\n        }\r\n\r\n        .container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 100px 40px;\r\n        }\r\n\r\n        \/* --- Header Section --- *\/\r\n        .shop-header {\r\n            text-align: center;\r\n            margin-bottom: 80px;\r\n            position: relative;\r\n        }\r\n        .shop-header h1 {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-size: clamp(40px, 6vw, 64px);\r\n            color: var(--gold-light);\r\n            margin-bottom: 15px;\r\n        }\r\n        .shop-header p {\r\n            font-size: 18px;\r\n            color: var(--text-muted);\r\n            max-width: 600px;\r\n            margin: 0 auto;\r\n            font-weight: 300;\r\n        }\r\n        .shop-header::after {\r\n            content: '';\r\n            display: block;\r\n            width: 60px;\r\n            height: 1px;\r\n            background: var(--gold);\r\n            margin: 30px auto 0;\r\n        }\r\n\r\n        \/* --- Shop Grid --- *\/\r\n        .shop-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 50px;\r\n        }\r\n\r\n        \/* --- Product Card --- *\/\r\n        .product-card {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            text-align: center;\r\n            position: relative;\r\n            perspective: 1000px;\r\n        }\r\n\r\n        \/* Book Image Styling *\/\r\n        .book-image-wrap {\r\n            width: 100%;\r\n            max-width: 280px;\r\n            aspect-ratio: 2\/3;\r\n            margin-bottom: 40px;\r\n            position: relative;\r\n            transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n            transform-style: preserve-3d;\r\n        }\r\n\r\n        .book-image-wrap::before {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -20px;\r\n            left: 5%;\r\n            width: 90%;\r\n            height: 10px;\r\n            background: rgba(0,0,0,0.5);\r\n            filter: blur(15px);\r\n            border-radius: 50%;\r\n            transition: opacity 0.6s;\r\n        }\r\n\r\n        .book-image-wrap img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            border: 1px solid var(--border);\r\n            box-shadow: 10px 10px 30px rgba(0,0,0,0.5);\r\n        }\r\n\r\n        .product-card:hover .book-image-wrap {\r\n            transform: translateY(-15px) rotateY(-5deg);\r\n        }\r\n        .product-card:hover .book-image-wrap::before {\r\n            opacity: 0.8;\r\n        }\r\n\r\n        \/* Content Styling *\/\r\n        .product-info {\r\n            flex-grow: 1;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n\r\n        .product-title {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-size: 26px;\r\n            color: var(--cream);\r\n            margin-bottom: 12px;\r\n            line-height: 1.2;\r\n            min-height: 64px;\r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n\r\n        .product-tagline {\r\n            font-size: 11px;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            color: var(--gold-light);\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .product-desc {\r\n            font-size: 15px;\r\n            color: var(--text-muted);\r\n            font-weight: 300;\r\n            margin-bottom: 25px;\r\n            line-height: 1.5;\r\n        }\r\n\r\n        .product-price {\r\n            font-size: 22px;\r\n            font-weight: 500;\r\n            color: var(--gold);\r\n            margin-bottom: 30px;\r\n            font-family: 'Outfit', sans-serif;\r\n        }\r\n\r\n        \/* Button Styling *\/\r\n        .btn-purchase {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 100%;\r\n            padding: 16px;\r\n            background: transparent;\r\n            border: 1px solid var(--gold);\r\n            color: var(--gold);\r\n            text-decoration: none;\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .btn-purchase:hover {\r\n            background: var(--gold);\r\n            color: var(--ink);\r\n            box-shadow: 0 10px 30px rgba(184, 150, 12, 0.2);\r\n        }\r\n\r\n        \/* Status Badge *\/\r\n        .stock-badge {\r\n            font-size: 10px;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            color: #4caf50;\r\n            margin-bottom: 10px;\r\n            display: block;\r\n        }\r\n\r\n        \/* Responsive Breakpoints *\/\r\n        @media (max-width: 1024px) {\r\n            .shop-grid { gap: 30px; }\r\n            .product-title { font-size: 22px; }\r\n        }\r\n        @media (max-width: 768px) {\r\n            .shop-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; gap: 80px; }\r\n            .container { padding: 60px 20px; }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"container\">\r\n        <!-- HEADER -->\r\n        <header class=\"shop-header\">\r\n            <h1>The <em>Collection<\/em><\/h1>\r\n            <p>Essential reading for school district leaders, emerging educators, and advocates for literacy impact.<\/p>\r\n        <\/header>\r\n\r\n        <!-- SHOP GRID -->\r\n        <div class=\"shop-grid\">\r\n            \r\n            <!-- Book 1 -->\r\n            <article class=\"product-card\">\r\n                <div class=\"book-image-wrap\">\r\n                    <!-- Replace with your actual 3D book cover image -->\r\n                    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/04\/Book-1-web-3.png\r\n\" alt=\"The Modern Superintendent\">\r\n                <\/div>\r\n                <div class=\"product-info\">\r\n                    <span class=\"stock-badge\">In Stock<\/span>\r\n                    <span class=\"product-tagline\">Strategy \u00b7 Education<\/span>\r\n                    <h3 class=\"product-title\">The Modern Superintendent<\/h3>\r\n                    <p class=\"product-desc\">A definitive roadmap for today's leaders blending research-driven strategy with practical tools.<\/p>\r\n                    <div class=\"product-price\">$9.99<\/div>\r\n                    <a href=\"https:\/\/www.amazon.com\/dp\/B0D5PF1C28\" class=\"btn-purchase\">Purchase Book<\/a>\r\n                <\/div>\r\n            <\/article>\r\n\r\n            <!-- Book 2 -->\r\n            <article class=\"product-card\">\r\n                <div class=\"book-image-wrap\">\r\n                    <!-- Replace with your actual 3D book cover image -->\r\n                    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/04\/Book-2-web-3.png\" alt=\"Winning\">\r\n                <\/div>\r\n                <div class=\"product-info\">\r\n                    <span class=\"stock-badge\">In Stock<\/span>\r\n                    <span class=\"product-tagline\">Life \u00b7 Leadership<\/span>\r\n                    <h3 class=\"product-title\">Winning<\/h3>\r\n                    <p class=\"product-desc\">Lessons drawn from decades of experience in education, sport, and service.<\/p>\r\n                    <div class=\"product-price\">$27.99<\/div>\r\n                    <a href=\"https:\/\/www.amazon.com\/dp\/B0F7Y5NJ5R\" class=\"btn-purchase\">Purchase Book<\/a>\r\n                <\/div>\r\n            <\/article>\r\n\r\n            <!-- Book 3 -->\r\n            <article class=\"product-card\">\r\n                <div class=\"book-image-wrap\">\r\n                    <!-- Replace with your actual 3D book cover image -->\r\n                    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michael-barnes\/wp-content\/uploads\/2026\/04\/Book-3-web-3.png\" alt=\"Building Literacy Together\">\r\n                <\/div>\r\n                <div class=\"product-info\">\r\n                    <span class=\"stock-badge\">In Stock<\/span>\r\n                    <span class=\"product-tagline\">Vision \u00b7 Impact<\/span>\r\n                    <h3 class=\"product-title\">Building Literacy Together<\/h3>\r\n                    <p class=\"product-desc\">A call to reimagine literacy not simply as academic skills, but as the foundation of identity and agency.<\/p>\r\n                    <div class=\"product-price\">$19.99<\/div>\r\n                    <a href=\"https:\/\/www.amazon.com\/dp\/B0GS5D5G3Y\" class=\"btn-purchase\">Purchase Book<\/a>\r\n                <\/div>\r\n            <\/article>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-afe5810 e-con-full e-flex e-con e-parent\" data-id=\"afe5810\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76c6e23 elementor-widget elementor-widget-html\" data-id=\"76c6e23\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Crimson+Pro:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@200;300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\nbody {\r\n  background: #080706;\r\n  font-family: 'Jost', sans-serif;\r\n  color: #EDE5D0;\r\n  overflow-x: hidden;\r\n}\r\n\r\n\/* grain *\/\r\nbody::after {\r\n  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;\r\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'\/%3E%3CfeColorMatrix type='saturate' values='0'\/%3E%3C\/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.04'\/%3E%3C\/svg%3E\");\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CTA SECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cta-section {\r\n  position: relative;\r\n  overflow: hidden;\r\n  background: #0E0D0A;\r\n  border-top: 1px solid rgba(201,168,76,.15);\r\n  border-bottom: 1px solid rgba(201,168,76,.15);\r\n}\r\n\r\n\/* \u2500\u2500 background: diagonal gold lines \u2500\u2500 *\/\r\n.cta-section::before {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background-image:\r\n    repeating-linear-gradient(\r\n      -55deg,\r\n      transparent,\r\n      transparent 60px,\r\n      rgba(201,168,76,.028) 60px,\r\n      rgba(201,168,76,.028) 61px\r\n    );\r\n  pointer-events: none; z-index: 0;\r\n}\r\n\r\n\/* \u2500\u2500 large ambient glow center \u2500\u2500 *\/\r\n.cta-section::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 50%; left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 900px; height: 500px;\r\n  background: radial-gradient(ellipse at center, rgba(201,168,76,.07) 0%, transparent 65%);\r\n  pointer-events: none; z-index: 0;\r\n}\r\n\r\n\/* \u2500\u2500 inner \u2500\u2500 *\/\r\n.cta-inner {\r\n  max-width: 1280px;\r\n  margin: 0 auto;\r\n  padding: 100px 60px;\r\n  position: relative; z-index: 1;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 80px;\r\n  align-items: center;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   LEFT \u2014 TEXT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cta-left {}\r\n\r\n.cta-overline {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 14px;\r\n  margin-bottom: 24px;\r\n  opacity: 0;\r\n  animation: up .9s .05s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n.cta-overline-rule {\r\n  width: 36px; height: 1px;\r\n  background: linear-gradient(90deg, #C9A84C, transparent);\r\n}\r\n.cta-overline-text {\r\n  font-size: 10px; font-weight: 600;\r\n  letter-spacing: .32em; text-transform: uppercase;\r\n  color: #C9A84C;\r\n}\r\n\r\n.cta-heading {\r\n  font-family: 'Playfair Display', serif;\r\n  font-size: clamp(40px, 5vw, 64px);\r\n  font-weight: 500;\r\n  line-height: 1.05;\r\n  letter-spacing: -.015em;\r\n  color: #EDE5D0;\r\n  margin-bottom: 28px;\r\n  opacity: 0;\r\n  animation: up .9s .12s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n.cta-heading em {\r\n  font-style: italic;\r\n  color: #E2C46A;\r\n  font-weight: 400;\r\n}\r\n\r\n.cta-body {\r\n  font-family: 'Crimson Pro', serif;\r\n  font-size: 19px;\r\n  font-weight: 300;\r\n  line-height: 1.85;\r\n  color: #fff;\r\n  margin-bottom: 48px;\r\n  max-width: 480px;\r\n  opacity: 0;\r\n  animation: up .9s .2s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n\r\n\/* \u2500\u2500 button group \u2500\u2500 *\/\r\n.cta-btns {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 20px;\r\n  flex-wrap: wrap;\r\n  opacity: 0;\r\n  animation: up .9s .28s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n\r\n\/* Primary gold button *\/\r\n.btn-primary {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 17px 44px;\r\n  background: #C9A84C;\r\n  color: #ffffff;\r\n  font-family: 'Jost', sans-serif;\r\n  font-size: 10.5px;\r\n  font-weight: 600;\r\n  letter-spacing: .22em;\r\n  text-transform: uppercase;\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  border: 1px solid #C9A84C;\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition: color .45s;\r\n}\r\n.btn-primary::before {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background: #E2C46A;\r\n  transform: scaleX(0);\r\n  transform-origin: right;\r\n  transition: transform .48s cubic-bezier(.77,0,.18,1);\r\n}\r\n.btn-primary:hover::before { transform: scaleX(1); }\r\n.btn-primary span { position: relative; z-index: 1; }\r\n.btn-primary .btn-arrow {\r\n  position: relative; z-index: 1;\r\n  display: flex; align-items: center;\r\n  transition: transform .35s;\r\n}\r\n.btn-primary:hover .btn-arrow { transform: translateX(5px); }\r\n\r\n\/* Ghost \/ outline button *\/\r\n.btn-ghost {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 17px 44px;\r\n  background: transparent;\r\n  color: #C9A84C;\r\n  font-family: 'Jost', sans-serif;\r\n  font-size: 10.5px;\r\n  font-weight: 600;\r\n  letter-spacing: .22em;\r\n  text-transform: uppercase;\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  border: 1px solid rgba(201,168,76,.3);\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition: color .45s, border-color .45s;\r\n}\r\n.btn-ghost::before {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background: #C9A84C;\r\n  transform: scaleX(0);\r\n  transform-origin: left;\r\n  transition: transform .48s cubic-bezier(.77,0,.18,1);\r\n}\r\n.btn-ghost:hover { color: #ffffff; border-color: #C9A84C; }\r\n.btn-ghost:hover::before { transform: scaleX(1); }\r\n.btn-ghost span { position: relative; z-index: 1; }\r\n.btn-ghost .btn-arrow {\r\n  position: relative; z-index: 1;\r\n  display: flex; align-items: center;\r\n  transition: transform .35s;\r\n}\r\n.btn-ghost:hover .btn-arrow { transform: translateX(5px); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   RIGHT \u2014 CARDS STACK\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cta-right {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 3px;\r\n  opacity: 0;\r\n  animation: up .9s .18s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n\r\n.cta-card {\r\n  background: #141210;\r\n  border: 1px solid rgba(201,168,76,.08);\r\n  padding: 28px 36px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 28px;\r\n  position: relative;\r\n  overflow: hidden;\r\n  cursor: default;\r\n  transition: border-color .5s, background .5s;\r\n}\r\n.cta-card::before {\r\n  content: '';\r\n  position: absolute; inset: 0; pointer-events: none;\r\n  background: radial-gradient(circle 220px at var(--mx,50%) var(--my,50%), rgba(201,168,76,.065), transparent 65%);\r\n  opacity: 0; transition: opacity .5s;\r\n}\r\n.cta-card:hover::before { opacity: 1; }\r\n.cta-card:hover { border-color: rgba(201,168,76,.2); background: #1a1810; }\r\n\/* left gold bar *\/\r\n.cta-card::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 0; top: 0; bottom: 0; width: 2px;\r\n  background: linear-gradient(180deg, transparent, #C9A84C, transparent);\r\n  transform: scaleY(0);\r\n  transition: transform .55s cubic-bezier(.77,0,.18,1);\r\n}\r\n.cta-card:hover::after { transform: scaleY(1); }\r\n\r\n\/* icon box *\/\r\n.card-icon {\r\n  width: 52px; height: 52px;\r\n  border: 1px solid rgba(201,168,76,.2);\r\n  background: rgba(201,168,76,.05);\r\n  display: flex; align-items: center; justify-content: center;\r\n  flex-shrink: 0;\r\n  transition: background .4s, border-color .4s;\r\n}\r\n.cta-card:hover .card-icon {\r\n  background: rgba(201,168,76,.12);\r\n  border-color: rgba(201,168,76,.4);\r\n}\r\n.card-icon svg { transition: stroke .4s; }\r\n\r\n.card-text { flex: 1; }\r\n.card-title {\r\n  font-family: 'Playfair Display', serif;\r\n  font-size: 16px; font-weight: 500;\r\n  color: #EDE5D0; margin-bottom: 5px;\r\n  transition: color .4s;\r\n}\r\n.cta-card:hover .card-title { color: #E2C46A; }\r\n.card-desc {\r\n  font-size: 14px; font-weight: 300;\r\n  color: #fff; line-height: 1.6;\r\n  transition: color .4s;\r\n}\r\n.cta-card:hover .card-desc { color: #9a9080; }\r\n\r\n.card-arrow {\r\n  flex-shrink: 0;\r\n  width: 36px; height: 36px;\r\n  border: 1px solid rgba(201,168,76,.15);\r\n  display: flex; align-items: center; justify-content: center;\r\n  transition: background .4s, border-color .4s, transform .4s;\r\n}\r\n.cta-card:hover .card-arrow {\r\n  background: #C9A84C;\r\n  border-color: #C9A84C;\r\n  transform: rotate(45deg);\r\n}\r\n.card-arrow polyline {\r\n  stroke: #C9A84C;\r\n  fill: none; stroke-width: 1.8;\r\n  stroke-linecap: round; stroke-linejoin: round;\r\n  transition: stroke .4s;\r\n}\r\n.cta-card:hover .card-arrow polyline { stroke: #ffffff; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   DIVIDER STRIP\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cta-divider {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  border-top: 1px solid rgba(201,168,76,.12);\r\n  border-bottom: 1px solid rgba(201,168,76,.12);\r\n  background: #0a0908;\r\n  opacity: 0;\r\n  animation: up .9s .36s cubic-bezier(.22,1,.36,1) forwards;\r\n  position: relative; z-index: 1;\r\n}\r\n\r\n.div-cell {\r\n  padding: 32px 40px;\r\n  display: flex; align-items: center; gap: 16px;\r\n  position: relative;\r\n  transition: background .4s;\r\n}\r\n.div-cell:not(:last-child)::after {\r\n  content: ''; position: absolute;\r\n  top: 20%; right: 0; bottom: 20%;\r\n  width: 1px; background: rgba(201,168,76,.12);\r\n}\r\n.div-cell:hover { background: #0e0d0a; }\r\n\r\n.div-num {\r\n  font-family: 'Playfair Display', serif;\r\n  font-size: 40px; font-weight: 500;\r\n  color: #C9A84C; line-height: 1;\r\n  letter-spacing: -.02em; flex-shrink: 0;\r\n}\r\n.div-info {}\r\n.div-label {\r\n  font-size: 10px; font-weight: 600;\r\n  letter-spacing: .2em; text-transform: uppercase;\r\n  color: #EDE5D0; display: block; margin-bottom: 3px;\r\n}\r\n.div-sublabel {\r\n  font-size: 17px; font-weight: 300;\r\n  color: #fff;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   KEYFRAMES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@keyframes up {\r\n  from { opacity: 0; transform: translateY(28px); }\r\n  to   { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 960px) {\r\n  .cta-inner { grid-template-columns: 1fr; gap: 48px; }\r\n  .cta-divider { grid-template-columns: 1fr; }\r\n  .div-cell:not(:last-child)::after { display: none; }\r\n  .cta-inner { padding: 72px 32px; }\r\n}\r\n@media (max-width: 560px) {\r\n  .cta-btns { flex-direction: column; align-items: flex-start; }\r\n  .btn-primary, .btn-ghost { width: 100%; justify-content: center; }\r\n  .cta-inner { padding: 56px 24px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     CTA SECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"cta-section\">\r\n  <div class=\"cta-inner\">\r\n\r\n    <!-- LEFT -->\r\n    <div class=\"cta-left\">\r\n      <div class=\"cta-overline\">\r\n        <div class=\"cta-overline-rule\"><\/div>\r\n        <span class=\"cta-overline-text\">Take the Next Step<\/span>\r\n      <\/div>\r\n\r\n      <h2 class=\"cta-heading\">\r\n        Let's Build <em>Something<\/em><br>Extraordinary Together\r\n      <\/h2>\r\n\r\n      <p class=\"cta-body\">\r\n        Whether you're looking to book Dr. Barnes for a keynote, purchase his books, or connect with the Barnes Foundation every conversation starts with a single step.\r\n      <\/p>\r\n\r\n      <div class=\"cta-btns\">\r\n        <a href=\"https:\/\/demowebdesign.live\/michael-barnes\/contact\/\" class=\"btn-primary\">\r\n          <span>Book Dr. Barnes<\/span>\r\n          <span class=\"btn-arrow\">\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"1.8\" stroke-linecap=\"round\">\r\n              <path d=\"M3 13L13 3M13 3H6M13 3v7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n        <a href=\"https:\/\/demowebdesign.live\/michael-barnes\/shop\/\" class=\"btn-ghost\">\r\n          <span>Explore Books<\/span>\r\n          <span class=\"btn-arrow\">\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#C9A84C\" stroke-width=\"1.8\" stroke-linecap=\"round\" id=\"ghost-arrow-svg\">\r\n              <path d=\"M3 13L13 3M13 3H6M13 3v7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- RIGHT \u2014 action cards -->\r\n    <div class=\"cta-right\">\r\n\r\n      <div class=\"cta-card\"\r\n           onmousemove=\"this.style.setProperty('--mx',(event.clientX-this.getBoundingClientRect().left)+'px');this.style.setProperty('--my',(event.clientY-this.getBoundingClientRect().top)+'px')\">\r\n        <div class=\"card-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#C9A84C\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/>\r\n            <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\r\n            <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/>\r\n            <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"card-text\">\r\n          <div class=\"card-title\">Book a Speaking Engagement<\/div>\r\n          <div class=\"card-desc\">Keynotes, leadership summits, district events & more<\/div>\r\n        <\/div>\r\n        <div class=\"card-arrow\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\r\n            <polyline points=\"4,12 12,4\"\/>\r\n            <polyline points=\"6,4 12,4 12,10\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cta-card\"\r\n           onmousemove=\"this.style.setProperty('--mx',(event.clientX-this.getBoundingClientRect().left)+'px');this.style.setProperty('--my',(event.clientY-this.getBoundingClientRect().top)+'px')\">\r\n        <div class=\"card-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#C9A84C\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/>\r\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"card-text\">\r\n          <div class=\"card-title\">Order Dr. Barnes' Books<\/div>\r\n          <div class=\"card-desc\">Winning & The Modern Superintendent available now<\/div>\r\n        <\/div>\r\n        <div class=\"card-arrow\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\r\n            <polyline points=\"4,12 12,4\"\/>\r\n            <polyline points=\"6,4 12,4 12,10\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cta-card\"\r\n           onmousemove=\"this.style.setProperty('--mx',(event.clientX-this.getBoundingClientRect().left)+'px');this.style.setProperty('--my',(event.clientY-this.getBoundingClientRect().top)+'px')\">\r\n        <div class=\"card-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#C9A84C\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/>\r\n            <polyline points=\"9,22 9,12 15,12 15,22\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"card-text\">\r\n          <div class=\"card-title\">The Barnes Foundation<\/div>\r\n          <div class=\"card-desc\">Support community & educational transformation programs<\/div>\r\n        <\/div>\r\n        <div class=\"card-arrow\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\r\n            <polyline points=\"4,12 12,4\"\/>\r\n            <polyline points=\"6,4 12,4 12,10\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cta-card\"\r\n           onmousemove=\"this.style.setProperty('--mx',(event.clientX-this.getBoundingClientRect().left)+'px');this.style.setProperty('--my',(event.clientY-this.getBoundingClientRect().top)+'px')\">\r\n        <div class=\"card-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#C9A84C\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/>\r\n            <polyline points=\"22,6 12,13 2,6\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"card-text\">\r\n          <div class=\"card-title\">Get in Touch<\/div>\r\n          <div class=\"card-desc\">Media inquiries, partnerships & general contact<\/div>\r\n        <\/div>\r\n        <div class=\"card-arrow\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\r\n            <polyline points=\"4,12 12,4\"\/>\r\n            <polyline points=\"6,4 12,4 12,10\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div><!-- \/cta-right -->\r\n  <\/div><!-- \/cta-inner -->\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     DIVIDER STATS STRIP\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<!--<div class=\"cta-divider\">-->\r\n<!--  <div class=\"div-cell\">-->\r\n<!--    <div class=\"div-num\">30+<\/div>-->\r\n<!--    <div class=\"div-info\">-->\r\n<!--      <span class=\"div-label\">Years Leading<\/span>-->\r\n<!--      <span class=\"div-sublabel\">In public education<\/span>-->\r\n<!--    <\/div>-->\r\n<!--  <\/div>-->\r\n<!--  <div class=\"div-cell\">-->\r\n<!--    <div class=\"div-num\">2<\/div>-->\r\n<!--    <div class=\"div-info\">-->\r\n<!--      <span class=\"div-label\">Published Books<\/span>-->\r\n<!--      <span class=\"div-sublabel\">Available nationwide<\/span>-->\r\n<!--    <\/div>-->\r\n<!--  <\/div>-->\r\n<!--  <div class=\"div-cell\">-->\r\n<!--    <div class=\"div-num\">200+<\/div>-->\r\n<!--    <div class=\"div-info\">-->\r\n<!--      <span class=\"div-label\">Voices of Impact<\/span>-->\r\n<!--      <span class=\"div-sublabel\">Testimonials received<\/span>-->\r\n<!--    <\/div>-->\r\n<!--  <\/div>-->\r\n<!--<\/div>-->\r\n\r\n<script>\r\n  \/* ghost button arrow stays white on hover *\/\r\n  var ghostBtn = document.querySelector('.btn-ghost');\r\n  var ghostSvg = document.getElementById('ghost-arrow-svg');\r\n  if (ghostBtn && ghostSvg) {\r\n    ghostBtn.addEventListener('mouseenter', function() {\r\n      ghostSvg.setAttribute('stroke','#ffffff');\r\n    });\r\n    ghostBtn.addEventListener('mouseleave', function() {\r\n      ghostSvg.setAttribute('stroke','#C9A84C');\r\n    });\r\n  }\r\n\r\n  \/* card arrow polyline stroke swap *\/\r\n  document.querySelectorAll('.cta-card').forEach(function(card) {\r\n    var arrow = card.querySelector('.card-arrow');\r\n    if (!arrow) return;\r\n    card.addEventListener('mouseenter', function() {\r\n      arrow.querySelectorAll('polyline').forEach(function(p) { p.setAttribute('stroke','#ffffff'); });\r\n    });\r\n    card.addEventListener('mouseleave', function() {\r\n      arrow.querySelectorAll('polyline').forEach(function(p) { p.setAttribute('stroke','#C9A84C'); });\r\n    });\r\n  });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Shop The Collection Essential reading for school district leaders, emerging educators, and advocates for literacy impact. In Stock Strategy \u00b7 Education The Modern Superintendent A definitive roadmap for today&#8217;s leaders blending research-driven strategy with practical tools. $9.99 Purchase Book In Stock Life \u00b7 Leadership Winning Lessons drawn from decades of experience in education, sport, and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"disabled","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1511","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/pages\/1511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/comments?post=1511"}],"version-history":[{"count":28,"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/pages\/1511\/revisions"}],"predecessor-version":[{"id":1772,"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/pages\/1511\/revisions\/1772"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/michael-barnes\/wp-json\/wp\/v2\/media?parent=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}