/* Theme Name: WindCodex Theme URI: https://windcodex.com Author: WindCodex Author URI: https://windcodex.com Description: A performance-first WordPress theme for selling and licensing WooCommerce plugins. WindCodex pairs a Tailwind CSS design system with deep WooCommerce Subscriptions and API Manager integration — themed cart, checkout, and My Account flows, license-key management, Elementor widgets for product marketing pages, and a fully responsive layout from mobile through desktop. Version: 1.1.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: windcodex Tags: woocommerce, e-commerce, custom-menu, custom-logo, full-width-template, blog, translation-ready, responsive-layout */ /* ───────────────────────────────────────────────────────── Custom utilities not covered by Tailwind CDN ───────────────────────────────────────────────────────── */ /* Push content below the fixed navbar only on pages that actually render it */ body { margin: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body:has(#wc-navbar) { padding-top: 4rem; } /* Brand token — actual values are overridden inline in per-request by windcodex_brand_color_vars() in inc/enqueue.php once the Customizer colors are known; these are just the pre-paint fallback. */ :root { --wc-primary: #6347eb; --wc-secondary: #2e266d; --wc-font: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; } /* ── Rich text (WYSIWYG) content typography ────────────────────────────── Tailwind's Preflight reset strips all default heading/list/link styling (h1-h6 inherit font-size/weight, ul/ol lose their markers). Every heading elsewhere in this theme gets its size from an explicit text-*/font-bold utility class written by PHP, so that reset is invisible there — but a heading, list, or link typed directly into a WYSIWYG "Description"/ "Subtitle" field carries no such class, so without this rule it renders as plain, indistinguishable text even though the tag is correctly applied. Scoped to .windcodex-richtext so it can never affect anything else. */ .windcodex-richtext h1, .windcodex-richtext h2, .windcodex-richtext h3, .windcodex-richtext h4, .windcodex-richtext h5, .windcodex-richtext h6 { font-weight: 700; line-height: 1.25; color: #0f172a; margin-top: 1em; margin-bottom: 0.5em; } .windcodex-richtext h1:first-child, .windcodex-richtext h2:first-child, .windcodex-richtext h3:first-child, .windcodex-richtext h4:first-child, .windcodex-richtext h5:first-child, .windcodex-richtext h6:first-child { margin-top: 0; } .windcodex-richtext h1 { font-size: 2rem; } .windcodex-richtext h2 { font-size: 1.75rem; } .windcodex-richtext h3 { font-size: 1.5rem; } .windcodex-richtext h4 { font-size: 1.25rem; } .windcodex-richtext h5 { font-size: 1.125rem; } .windcodex-richtext h6 { font-size: 1rem; } /* .windcodex-richtext-oncolor: for richtext fields sitting on a colored/dark section background (e.g. the CTA widget's Description) instead of white — the dark, oversized heading styling above is unreadable there, so headings fall back to matching the surrounding body text instead. */ .windcodex-richtext-oncolor.windcodex-richtext h1, .windcodex-richtext-oncolor.windcodex-richtext h2, .windcodex-richtext-oncolor.windcodex-richtext h3, .windcodex-richtext-oncolor.windcodex-richtext h4, .windcodex-richtext-oncolor.windcodex-richtext h5, .windcodex-richtext-oncolor.windcodex-richtext h6 { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; margin-top: 0; margin-bottom: 0.5em; } .windcodex-richtext p { margin-bottom: 1em; } .windcodex-richtext p:last-child { margin-bottom: 0; } .windcodex-richtext ul, .windcodex-richtext ol { margin: 0 0 1em 1.25em; } .windcodex-richtext ul { list-style: disc; } .windcodex-richtext ol { list-style: decimal; } .windcodex-richtext li { margin-bottom: 0.25em; } .windcodex-richtext a { color: var(--wc-primary); text-decoration: underline; text-underline-offset: 2px; } .windcodex-richtext strong, .windcodex-richtext b { font-weight: 700; } .windcodex-richtext blockquote { border-left: 3px solid var(--wc-primary); padding-left: 1em; font-style: italic; color: #475569; margin: 1em 0; } /* ── Text selection highlight — brand color instead of the browser default ── */ ::selection { background-color: var(--wc-primary); color: #ffffff; } ::-moz-selection { background-color: var(--wc-primary); color: #ffffff; } /* ── Outline button style (Customizer → Typography & Buttons) ────────── */ /* Heuristic: every real button in this theme pairs bg-brand-primary with text-white (see CLAUDE.md's "Primary button" pattern). A couple of non-button elements share that exact pairing too — the header logo mark and the cart count badge (#wc-cart-count, excluded below by ID) — so this isn't airtight against new markup that happens to reuse the same classes. */ body.windcodex-btn-outline .bg-brand-primary.text-white:not(#wc-cart-count) { background-color: transparent !important; color: var(--wc-primary) !important; border: 2px solid var(--wc-primary) !important; box-shadow: none !important; } body.windcodex-btn-outline .bg-brand-primary.text-white:not(#wc-cart-count):hover { background-color: var(--wc-primary) !important; color: #ffffff !important; } /* Animations used across the theme */ @keyframes wc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes wc-pulse-badge { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes wc-spin-slow { to { transform: rotate(360deg); } } .animate-float { animation: wc-float 4s ease-in-out infinite; } .animate-spin-slow { animation: wc-spin-slow 20s linear infinite; } /* Line-clamp utilities (Safari < 15 fallback) */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Admin bar offset for fixed navbar ──────────────────────────────── */ /* WP injects both html{margin-top:32px} and html.wp-toolbar{padding-top:32px} when the admin bar is active. That double-offsets the body content to 128px while our navbar only reaches 96px — producing a 32px gap. Cancel the padding here; the navbar top:32px rule below handles visual alignment. */ html.wp-toolbar { padding-top: 0 !important; } /* WP admin bar is 32px tall on desktop, 46px on mobile (≤782px) */ body.admin-bar #wc-navbar { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar #wc-navbar { top: 46px; } } /* ── Announcement bar offset ────────────────────────────────────────── */ /* --wc-announcement-h is set inline in (windcodex_announcement_bar_height_var()) from the Customizer height setting, so these offsets stay in sync without JS. */ body:has(#wc-announcement-bar) #wc-navbar { top: var(--wc-announcement-h, 44px); } body:has(#wc-announcement-bar):has(#wc-navbar) { padding-top: calc(4rem + var(--wc-announcement-h, 44px)); } /* The bar itself is fixed top:0, same as #wpadminbar (z-index 99999) — without this it sits underneath the admin toolbar instead of stacking below it. */ body.admin-bar #wc-announcement-bar { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar #wc-announcement-bar { top: 46px; } } body.admin-bar:has(#wc-announcement-bar) #wc-navbar { top: calc(32px + var(--wc-announcement-h, 44px)); } @media screen and (max-width: 782px) { body.admin-bar:has(#wc-announcement-bar) #wc-navbar { top: calc(46px + var(--wc-announcement-h, 44px)); } } /* WordPress-required alignment */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter { display: block; margin: 5px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } .wp-caption { max-width: 100%; } .wp-caption .wp-caption-text { font-size: 0.875rem; color: #64748b; margin-top: 0.5rem; } /* ── Blog pagination ────────────────────────────────────────────────── */ .windcodex-blog-pagination { margin-top: 0; display: flex; justify-content: center; } .windcodex-blog-pagination .nav-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .windcodex-blog-pagination .screen-reader-text { display: none; } .windcodex-blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.9rem; border-radius: 0.9rem; border: 1px solid #e2e8f0; font-size: 0.875rem; font-weight: 700; color: #475569; background: #fff; text-decoration: none; transition: all 0.15s ease; } .windcodex-blog-pagination a.page-numbers:hover { border-color: #6347eb; color: #6347eb; background: #faf9ff; } .windcodex-blog-pagination .page-numbers.current { background: #6347eb; border-color: #6347eb; color: #fff; } .windcodex-blog-pagination .page-numbers.dots { border-color: transparent; box-shadow: none; background: transparent; color: #94a3b8; } .windcodex-blog-pagination .page-numbers.prev, .windcodex-blog-pagination .page-numbers.next { color: #64748b; } /* ── Single post prose styles ───────────────────────────────────────── */ .windcodex-prose { font-size: 1.0625rem; line-height: 1.8; color: #334155; } .windcodex-prose > *:first-child { margin-top: 0; } .windcodex-prose h2 { font-size: 1.75rem; font-weight: 700; color: #0f172a; margin-top: 2.5rem; margin-bottom: 1rem; letter-spacing: -0.02em; } .windcodex-prose h3 { font-size: 1.375rem; font-weight: 700; color: #0f172a; margin-top: 2rem; margin-bottom: 0.75rem; } .windcodex-prose h4 { font-size: 1.125rem; font-weight: 700; color: #1e293b; margin-top: 1.5rem; margin-bottom: 0.5rem; } .windcodex-prose p { margin-bottom: 1.5rem; } .windcodex-prose a { color: #6347eb; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .windcodex-prose a:hover { opacity: 0.8; } .windcodex-prose ul, .windcodex-prose ol { margin: 0 0 1.5rem 1.5rem; } .windcodex-prose ul { list-style-type: disc; } .windcodex-prose ol { list-style-type: decimal; } .windcodex-prose li { margin-bottom: 0.5rem; } .windcodex-prose blockquote { border-left: 4px solid #6347eb; padding: 1rem 1.5rem; margin: 2rem 0; background: #faf9ff; border-radius: 0 1rem 1rem 0; color: #475569; font-style: italic; } .windcodex-prose code { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 0.375rem; padding: 0.15em 0.4em; font-size: 0.875em; color: #6347eb; } .windcodex-prose pre { background: #0f172a; border-radius: 1rem; padding: 1.5rem; overflow-x: auto; margin: 2rem 0; } .windcodex-prose pre code { background: transparent; border: none; color: #e2e8f0; padding: 0; font-size: 0.875rem; } .windcodex-prose img { border-radius: 1.5rem; max-width: 100%; margin: 2rem auto; } .windcodex-prose hr { border: none; border-top: 1px solid #e2e8f0; margin: 2.5rem 0; } .windcodex-prose strong { color: #0f172a; font-weight: 700; } .windcodex-prose table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.9375rem; } .windcodex-prose th { background: #f8fafc; font-weight: 700; color: #0f172a; text-align: left; padding: 0.75rem 1rem; border-bottom: 2px solid #e2e8f0; } .windcodex-prose td { padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9; color: #475569; } /* Gutenberg page content fallback styles */ .windcodex-page-content > *:first-child { margin-top: 0; } .windcodex-page-content > *:last-child { margin-bottom: 0; } .windcodex-page-content h1, .windcodex-page-content h2, .windcodex-page-content h3, .windcodex-page-content h4, .windcodex-page-content h5, .windcodex-page-content h6 { font-family: var(--wc-font); font-weight: 700; color: #0f172a; letter-spacing: -0.02em; } .windcodex-page-content h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.1; margin: 0 0 1.5rem; } .windcodex-page-content h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.2; margin: 3rem 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e2e8f0; } .windcodex-page-content h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.3; margin: 2rem 0 0.75rem; } .windcodex-page-content h4, .windcodex-page-content h5, .windcodex-page-content h6 { font-size: 1.125rem; line-height: 1.4; margin: 1.5rem 0 0.5rem; } .windcodex-page-content p, .windcodex-page-content ul, .windcodex-page-content ol, .windcodex-page-content pre, .windcodex-page-content table, .windcodex-page-content figure, .windcodex-page-content .wp-block-group, .windcodex-page-content .wp-block-columns, .windcodex-page-content .wp-block-cover, .windcodex-page-content .wp-block-media-text { margin-top: 1.25rem; margin-bottom: 1.25rem; } .windcodex-page-content .wp-block-group:first-child, .windcodex-page-content .wp-block-columns:first-child { margin-top: 0; } .windcodex-page-content .wp-block-columns { gap: 2rem; } .windcodex-page-content .wp-block-column > *:first-child { margin-top: 0; } .windcodex-page-content .wp-block-column > *:last-child { margin-bottom: 0; } .windcodex-page-content .wp-block-image img, .windcodex-page-content .wp-block-cover, .windcodex-page-content .wp-block-media-text img { border-radius: 1.5rem; } .windcodex-page-content .wp-block-image { margin-left: 0; margin-right: 0; } .windcodex-page-content .wp-block-image figcaption, .windcodex-page-content .wp-block-table figcaption { font-size: 0.875rem; color: #64748b; margin-top: 0.75rem; } .windcodex-page-content .wp-block-quote, .windcodex-page-content blockquote { border-left: 4px solid #6347eb; padding: 1rem 1.5rem; margin: 2rem 0; background: #faf9ff; border-radius: 0 1rem 1rem 0; color: #475569; } .windcodex-page-content .wp-block-separator { border: 0; border-top: 1px solid #e2e8f0; margin: 2.5rem 0; } .windcodex-page-content .wp-block-button { margin-top: 1.5rem; margin-bottom: 1.5rem; } .windcodex-page-content .wp-block-button__link { border-radius: 9999px; padding: 0.9rem 1.4rem; font-weight: 700; text-decoration: none; } .windcodex-page-content .wp-block-pullquote { margin: 2.5rem 0; padding: 2rem; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; text-align: left; } .windcodex-page-content .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; background: transparent; border-radius: 0; } .windcodex-page-content .wp-block-table { overflow-x: auto; } .windcodex-page-content .wp-block-table table { min-width: 100%; } .windcodex-page-content .alignwide, .windcodex-page-content .alignfull { width: 100%; max-width: 100%; } @media (max-width: 781px) { .windcodex-page-content .wp-block-columns { gap: 1.25rem; } } /* Contact Form 7 theme styling */ .windcodex-cf7 .wpcf7 { width: 100%; } .windcodex-cf7 .wpcf7 form { display: block; } .windcodex-cf7 .wpcf7 p { margin: 0 0 1.5rem; } .windcodex-cf7 .wpcf7 p:last-of-type { margin-bottom: 0; } .windcodex-cf7 .wpcf7 label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #64748b; margin-bottom: 0.5rem; padding-inline: 0.25rem; } .windcodex-cf7 .wpcf7-form-control-wrap { display: block; margin-top: 0.5rem; } .windcodex-cf7 .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .windcodex-cf7 .wpcf7 select, .windcodex-cf7 .wpcf7 textarea { width: 100%; padding: 0.875rem 1rem; border: 1px solid #e2e8f0; border-radius: 0.75rem; background: #ffffff; color: #0f172a; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; box-sizing: border-box; } .windcodex-cf7 .wpcf7 textarea { min-height: 9rem; resize: vertical; } .windcodex-cf7 .wpcf7 input:not([type="submit"]):focus, .windcodex-cf7 .wpcf7 select:focus, .windcodex-cf7 .wpcf7 textarea:focus { border-color: #6347eb; box-shadow: 0 0 0 4px rgba(99, 71, 235, 0.12); } .windcodex-cf7 .wpcf7 input::placeholder, .windcodex-cf7 .wpcf7 textarea::placeholder { color: #94a3b8; } .windcodex-cf7 .wpcf7 input[type="submit"] { width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.5rem; border: 0; border-radius: 0.75rem; background: #6347eb; color: #ffffff; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 14px 30px -12px rgba(99, 71, 235, 0.4); } .windcodex-cf7 .wpcf7 input[type="submit"]:hover { opacity: 0.92; } .windcodex-cf7 .wpcf7 input[type="submit"]:disabled { opacity: 0.7; cursor: wait; } .windcodex-cf7 .wpcf7-spinner { margin: 0.75rem 0 0; } .windcodex-cf7 .wpcf7-not-valid-tip { font-size: 0.8125rem; color: #dc2626; margin-top: 0.5rem; } .windcodex-cf7 .wpcf7 form.invalid .wpcf7-response-output, .windcodex-cf7 .wpcf7 form.unaccepted .wpcf7-response-output, .windcodex-cf7 .wpcf7 form.payment-required .wpcf7-response-output { border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; } .windcodex-cf7 .wpcf7 form.sent .wpcf7-response-output { border: 1px solid #bbf7d0; background: #ecfdf5; color: #047857; } .windcodex-cf7 .wpcf7-response-output { margin: 1.25rem 0 0; padding: 0.9rem 1rem; border-radius: 0.95rem; font-size: 0.9375rem; } .windcodex-cf7 .wpcf7 form.submitting .wpcf7-response-output { display: none; }