/* * ============================================================================= * TRACTOR WORKS CHILD THEME * ============================================================================= * * Theme Name: Tractor Works Child * Theme URI: https://tractor-works.com * Description: Child theme for Astra, customized for Tractor Works LLC. * Includes custom templates for the Projects custom post type. * Author: Tractor Works * Author URI: https://tractor-works.com * Template: astra * Version: 1.3.0 * License: GNU General Public License v2 or later * License URI: http://www.gnu.org/licenses/gpl-2.0.html * Text Domain: tractor-works-child * * ============================================================================= * * CHANGELOG: * * v1.3.0 (January 2026) * - Consolidated all CSS variables into this file (single source of truth) * - Moved Site Tagline styles from WPCode to here * - Moved FAQ styles to css/faq-styles.css * - Moved Services styles to css/services-styles.css * - Removed redundant :root blocks from all other CSS files * * v1.2.0 * - Added Contact Intro Block styles * - Added shared CTA styles * * ============================================================================= * * FILE STRUCTURE: * * This file (style.css): * - Theme header (required by WordPress) * - CSS Variables (brand colors, fonts, spacing) * - Site Tagline Typography * - Contact Intro Block * * Separate CSS files (in /css/ folder): * - project-styles.css : Single project page layout * - archive-project-styles.css: Portfolio grid page * - cta-styles.css : Shared call-to-action component * - breadcrumb-styles.css : Breadcrumb navigation * - faq-styles.css : FAQ page styling * - services-styles.css : Services pages styling * * Templates (in theme root): * - single-project.php : Individual project page * - archive-project.php : Portfolio listing page * * Template Parts (in /template-parts/ folder): * - cta-section.php : Reusable CTA component * * Scripts (in /js/ folder): * - archive-project-filter.js : Portfolio filter buttons * * ============================================================================= */ /* ============================================================================= 1. CSS VARIABLES - MASTER DEFINITION ============================================================================= All brand colors, fonts, and common values are defined here ONCE. All other CSS files in the theme will inherit these variables. TO CHANGE A BRAND COLOR: Edit it here and it updates everywhere. ============================================================================= */ :root { /* ------------------------------------------------------------------------- PRIMARY BRAND COLORS (Greens) ------------------------------------------------------------------------- */ --tw-forest-green: #4A7C59; /* Primary brand color, buttons, links */ --tw-dark-green: #2D4A35; /* Headings, dark backgrounds */ --tw-sage-green: #7A9E7E; /* Accents, hover states, secondary elements */ --tw-light-sage: #B8C9B8; /* Subtle backgrounds, placeholders */ /* ------------------------------------------------------------------------- NEUTRAL COLORS (Whites and Creams) ------------------------------------------------------------------------- */ --tw-cream: #F5F1EB; /* Section backgrounds, cards */ --tw-warm-white: #FDFCFA; /* Main page background */ --tw-light-cream: #FAF8F5; /* Subtle background variation */ --tw-white: #FFFFFF; /* Pure white for maximum contrast */ /* ------------------------------------------------------------------------- EARTH TONES (Browns and Tans) ------------------------------------------------------------------------- */ --tw-earth-brown: #5C4033; /* Secondary text, subtle headings */ --tw-dark-brown: #3D2B1F; /* Body text color */ --tw-tan: #C4A77D; /* Accent color, buttons on dark backgrounds */ --tw-light-tan: #E8DCC8; /* Borders, subtle accents */ /* ------------------------------------------------------------------------- TYPOGRAPHY ------------------------------------------------------------------------- */ --tw-font-heading: 'Lora', Georgia, serif; --tw-font-body: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', sans-serif; /* ------------------------------------------------------------------------- LAYOUT ------------------------------------------------------------------------- */ --tw-max-width: 1400px; /* Maximum content width */ --tw-content-width: 800px; /* Readable text width */ --tw-content-padding: 40px; /* Side padding for containers */ --tw-section-padding: 80px; /* Vertical padding for sections */ } /* ============================================================================= 2. SITE TAGLINE TYPOGRAPHY ============================================================================= Controls the tagline/site description that appears below the logo in the header. This was previously in WPCode. Location: Header site identity area (Astra theme) ============================================================================= */ .ast-site-identity .site-description { /* Font family - matches body text */ font-family: var(--tw-font-body); font-size: 0.9rem; /* Font weight - 400 is normal/regular */ font-weight: 400; /* Letter spacing - creates refined, spread-out look */ letter-spacing: 2px; /* Text transform - makes it all uppercase */ text-transform: uppercase; /* Spacing - positions tagline relative to logo */ margin-top: 10px; margin-bottom: -4px; } /* ============================================================================= 3. CONTACT INTRO BLOCK ============================================================================= Styles for the contact page intro section with pull-quote. Used in an Elementor HTML widget on the Contact page. HTML Structure:

...

...

...

...

...

...

...

============================================================================= */ /* ----------------------------------------------------------------------------- 3.1 Main Container ----------------------------------------------------------------------------- */ .tw-contact-intro { max-width: 100%; } /* ----------------------------------------------------------------------------- 3.2 Company Name Heading ----------------------------------------------------------------------------- */ /* * Large company name at the top of the intro. * Uses Lora font to match site headings. * The !important overrides Elementor's default styling. */ .tw-contact-intro .company-name { font-family: var(--tw-font-heading) !important; font-size: 2.2rem; font-weight: 600; color: var(--tw-dark-green); margin: 0 0 8px 0; line-height: 1.2; } /* ----------------------------------------------------------------------------- 3.3 Tagline (if used) ----------------------------------------------------------------------------- */ .tw-contact-intro .tagline { font-family: var(--tw-font-body); font-size: 0.9rem; color: var(--tw-earth-brown); text-transform: uppercase; letter-spacing: 2px; margin: 0 0 20px 0; } /* ----------------------------------------------------------------------------- 3.4 Decorative Divider ----------------------------------------------------------------------------- */ .tw-contact-intro .divider { width: 60px; height: 3px; background-color: var(--tw-tan); margin-bottom: 24px; } /* ----------------------------------------------------------------------------- 3.5 Paragraph Text ----------------------------------------------------------------------------- */ .tw-contact-intro p { font-family: var(--tw-font-body); font-size: 1.05rem; line-height: 1.7; color: var(--tw-dark-brown); margin: 0 0 18px 0; } /* ----------------------------------------------------------------------------- 3.6 Pull-Quote Box ----------------------------------------------------------------------------- */ /* * Highlighted quote box with gradient background. * Contains Derek's key differentiator message about being * personally on-site for every project. */ .tw-contact-intro .pull-quote { background: linear-gradient(135deg, var(--tw-dark-green) 0%, var(--tw-forest-green) 100%); padding: 24px 28px; border-radius: 4px; margin: 24px 0; position: relative; } /* Decorative opening quotation mark */ .tw-contact-intro .pull-quote::before { content: '"'; position: absolute; top: 8px; left: 14px; font-family: Georgia, serif; font-size: 3.5rem; color: var(--tw-tan); opacity: 0.4; line-height: 1; } /* Decorative closing quotation mark */ .tw-contact-intro .pull-quote::after { content: '"'; position: absolute; bottom: 4px; right: 14px; font-family: Georgia, serif; font-size: 3.5rem; color: var(--tw-tan); opacity: 0.4; line-height: 1; } /* Text inside the pull-quote */ .tw-contact-intro .pull-quote p { color: var(--tw-warm-white); font-size: 1.1rem; font-weight: 500; margin: 0; padding-left: 16px; padding-right: 16px; line-height: 1.6; } /* ----------------------------------------------------------------------------- 3.7 Contact Details Section ----------------------------------------------------------------------------- */ .tw-contact-intro .contact-details { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--tw-tan); } .tw-contact-intro .contact-details p { margin-bottom: 8px; font-size: 1rem; } .tw-contact-intro .contact-details p:last-child { margin-bottom: 0; } /* Phone/email links */ .tw-contact-intro .contact-details a { color: var(--tw-forest-green); text-decoration: none; font-weight: 600; } .tw-contact-intro .contact-details a:hover { color: var(--tw-dark-green); text-decoration: underline; } /* Small label text */ .tw-contact-intro .contact-details .label { font-size: 0.85rem; color: var(--tw-earth-brown); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; display: block; }