- March 2, 2026Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
/** * Leanor – Bricks Builder Child Theme Variables * Based on: https://leanor-128.webflow.io/templates/style-guide * ───────────────────────────────────────────────────────────── * Paste into: Bricks > Settings > Custom Code >
* OR into your child theme's style.css */ :root { /* ── Color Palette ──────────────────────────────────────── */ --leanor-primary: #227d78; /* Teal (CTA, highlights) */ --leanor-primary-light: #eef3f3; /* Light Teal (bg sections) */ --leanor-primary-dark: #012725; /* Dark Teal (header, footer) */ --leanor-primary-deeper: #001514; /* Deepest dark */ --leanor-primary-muted: #526564; /* Muted Teal (body copy) */ --leanor-white: #ffffff; --leanor-accent: #f6ffb5; /* Lime Yellow (accent/CTA bg) */ /* ── Typography ─────────────────────────────────────────── */ --leanor-font-family: inherit; /* Replace with your chosen WP font */ --leanor-font-h1: clamp(40px, 6vw, 80px); --leanor-font-h2: clamp(28px, 4vw, 56px); --leanor-font-h3: clamp(22px, 3vw, 40px); --leanor-font-h4: clamp(18px, 2vw, 28px); --leanor-font-h5: clamp(16px, 1.5vw, 22px); --leanor-font-h6: 16px; --leanor-font-body: 16px; --leanor-font-body-large: 20px; --leanor-line-height: 1.7; --leanor-heading-weight: 600; /* ── Spacing – Desktop ──────────────────────────────────── */ --leanor-section-pad: 130px; --leanor-inner-gap: 60px; /* ── Grid ───────────────────────────────────────────────── */ --leanor-container-max: 1200px; /* ── Border Radius ──────────────────────────────────────── */ --leanor-radius-btn: 4px; --leanor-radius-card: 8px; /* ── Transitions ────────────────────────────────────────── */ --leanor-transition: 0.2s ease; } /* ── Responsive Spacing Overrides ────────────────────────── */ @media (max-width: 991px) { :root { --leanor-section-pad: 80px; --leanor-inner-gap: 60px; } } @media (max-width: 767px) { :root { --leanor-section-pad: 60px; --leanor-inner-gap: 40px; } } /* ── Utility Classes (available globally in BB) ───────────── */ /* Buttons */ .leanor-btn-primary { display: inline-block; padding: 14px 32px; background: var(--leanor-primary); color: var(--leanor-white); border-radius: var(--leanor-radius-btn); font-size: 15px; font-weight: var(--leanor-heading-weight); text-decoration: none; transition: background var(--leanor-transition); } .leanor-btn-primary:hover { background: #1a5f5b; } .leanor-btn-primary-dark { display: inline-block; padding: 14px 32px; background: var(--leanor-primary-dark); color: var(--leanor-white); border-radius: var(--leanor-radius-btn); font-size: 15px; font-weight: var(--leanor-heading-weight); text-decoration: none; } .leanor-btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: transparent; color: var(--leanor-primary-dark); border: 2px solid var(--leanor-primary-dark); border-radius: var(--leanor-radius-btn); font-size: 15px; font-weight: var(--leanor-heading-weight); text-decoration: none; transition: all var(--leanor-transition); } .leanor-btn-secondary:hover { background: var(--leanor-primary-dark); color: var(--leanor-white); } .leanor-btn-accent { display: inline-block; padding: 12px 28px; background: var(--leanor-accent); color: var(--leanor-primary-dark); border-radius: var(--leanor-radius-btn); font-size: 15px; font-weight: var(--leanor-heading-weight); text-decoration: none; } /* Section Backgrounds */ .leanor-bg-dark { background-color: var(--leanor-primary-dark) !important; } .leanor-bg-teal { background-color: var(--leanor-primary) !important; } .leanor-bg-light { background-color: var(--leanor-primary-light) !important; } .leanor-bg-white { background-color: var(--leanor-white) !important; } /* Text Colors */ .leanor-text-dark { color: var(--leanor-primary-dark) !important; } .leanor-text-teal { color: var(--leanor-primary) !important; } .leanor-text-muted { color: var(--leanor-primary-muted) !important; } .leanor-text-white { color: var(--leanor-white) !important; } .leanor-text-lime { color: var(--leanor-accent) !important; } /* Section Padding Helper */ .leanor-section { padding-top: var(--leanor-section-pad); padding-bottom: var(--leanor-section-pad); } .leanor-container { max-width: var(--leanor-container-max); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } Skip to main content