/* ============================================================ blog-theme.css — unified theme for all blog posts Forces dark navy/cream/rust palette to match new homepage. Loaded LATE in so it overrides whatever inline styles each blog post already has. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700;800;900&family=Cormorant+Garamond:ital,wght@1,400&family=Inter:wght@400;500;600&display=swap'); :root { --gp-ink: #1c1917 !important; --gp-cream: #fef9f4 !important; --gp-warm: #f5efe6 !important; --gp-rust: #b85c38 !important; --gp-sand: #e7e0d3 !important; --gp-grey: #78716c !important; /* Override any conflicting variables from legacy blog template */ --navy: #1c1917 !important; --gold: #b85c38 !important; } html, body { background: var(--gp-cream) !important; color: var(--gp-ink) !important; font-family: 'Inter', -apple-system, system-ui, sans-serif !important; -webkit-font-smoothing: antialiased !important; } /* Headings — match homepage */ h1, h2, h3, h4, h5, .blog-content h1, .blog-content h2, .blog-content h3 { font-family: 'Archivo', sans-serif !important; color: var(--gp-ink) !important; letter-spacing: -1px !important; line-height: 1.1 !important; } h1, .blog-hero h1 { font-weight: 900 !important; font-size: clamp(34px, 5vw, 56px) !important; } h2 { font-weight: 900 !important; font-size: clamp(26px, 3vw, 38px) !important; margin-top: 1.6em !important; margin-bottom: .6em !important; } h3 { font-weight: 800 !important; font-size: clamp(20px, 2.2vw, 26px) !important; margin-top: 1.4em !important; margin-bottom: .4em !important; } /* Hero / banner area */ .blog-hero, header, .post-header { background: linear-gradient(135deg, var(--gp-ink) 0%, #292524 60%, #44403c 100%) !important; color: var(--gp-cream) !important; padding: 80px 24px !important; position: relative; overflow: hidden; } .blog-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 80%, rgba(184,92,56,.25) 0%, transparent 60%); pointer-events: none; } .blog-hero h1, header h1 { color: var(--gp-cream) !important; position: relative; } .blog-hero p, .blog-hero .meta, header p { color: rgba(254,249,244,.85) !important; } /* Body text + content blocks */ .blog-content, article, main, .post-content { background: var(--gp-cream) !important; color: var(--gp-ink) !important; font-size: 17px !important; line-height: 1.75 !important; max-width: 760px !important; margin: 0 auto !important; padding: 60px 24px !important; } .blog-content p, article p, main p { color: var(--gp-ink) !important; margin-bottom: 1.4em !important; } .blog-content .lead, article .lead, .lead { font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-size: 22px !important; color: var(--gp-grey) !important; margin-bottom: 2em !important; border-left: 3px solid var(--gp-rust) !important; padding-left: 18px !important; } /* Links */ a, .blog-content a, article a { color: var(--gp-rust) !important; text-decoration: none !important; border-bottom: 1.5px solid rgba(184,92,56,.4) !important; transition: border-color .2s ease, color .2s ease !important; } a:hover { color: #a04a2c !important; border-bottom-color: var(--gp-rust) !important; } /* Buttons / CTAs */ .btn, .cta, .nav-cta, button.submit, [class*="btn"]:not([class*="nav-link"]) { background: var(--gp-ink) !important; color: var(--gp-cream) !important; font-family: 'Archivo', sans-serif !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; padding: 16px 28px !important; border-radius: 6px !important; border: none !important; display: inline-block !important; transition: background .25s ease, transform .25s ease !important; text-decoration: none !important; border-bottom: none !important; } .btn:hover, .cta:hover, .nav-cta:hover { background: var(--gp-rust) !important; transform: translateY(-2px) !important; } /* Top nav (any leftover from legacy template) */ nav, .nav, header nav { background: var(--gp-cream) !important; border-bottom: 1px solid var(--gp-sand) !important; } nav a, .nav a { color: var(--gp-ink) !important; font-family: 'Archivo', sans-serif !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; border-bottom: none !important; } nav a:hover, .nav a:hover { color: var(--gp-rust) !important; } /* Before/After comparison if used */ .ba-compare .before-label, .ba-compare .after-label { background: var(--gp-rust) !important; color: #fff !important; font-family: 'Archivo', sans-serif !important; font-weight: 800 !important; letter-spacing: 1.5px !important; } /* Images — make them sit clean */ .blog-content img, article img, main img { border-radius: 12px !important; box-shadow: 0 16px 36px -16px rgba(28,25,23,.25) !important; margin: 2em auto !important; } /* Block quotes */ blockquote { border-left: 4px solid var(--gp-rust) !important; padding: 12px 20px !important; margin: 2em 0 !important; font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; font-size: 20px !important; color: var(--gp-grey) !important; background: rgba(184,92,56,.05) !important; border-radius: 0 8px 8px 0 !important; } /* Footer */ footer { background: var(--gp-ink) !important; color: rgba(254,249,244,.7) !important; padding: 48px 24px !important; font-size: 13px !important; text-align: center !important; } footer a { color: var(--gp-cream) !important; border-bottom: none !important; } /* Pricing table / spec list — common blog elements */ table, .price-table { background: #fff !important; border: 1px solid var(--gp-sand) !important; border-radius: 12px !important; overflow: hidden !important; } th { background: var(--gp-ink) !important; color: var(--gp-cream) !important; font-family: 'Archivo', sans-serif !important; font-weight: 700 !important; } td { color: var(--gp-ink) !important; } /* Hide any "Estimate Test" / placeholder content from old template */ .test-placeholder, .demo-data, .estimate-test { display: none !important; }