/* Theme Name: Bricks Child Theme Theme URI: https://bricksbuilder.io/ Description: Use this child theme to extend Bricks. Author: Bricks Author URI: https://bricksbuilder.io/ Template: bricks Version: 1.1 Text Domain: bricks */ /* * ============================================================ * KITHMS ENTERPRISE — CSS CUSTOM PROPERTIES * Brand Identity v1.0 · 2025 * ============================================================ * Usage: Add to WordPress via: * — Appearance > Customize > Additional CSS * — Or enqueue via functions.php as a stylesheet * — Or paste into your child theme's style.css * ============================================================ */ :root { /* ============================================================ * COLOUR — PRIMARY PALETTE * ============================================================ */ --kithms-ink: #0f0e0c; /* Primary background. Deep near-black. */ --kithms-clay: #c8601a; /* Brand accent. CTAs. Highlights. */ --kithms-clay-dark: #a34e14; /* Hover/active states on clay elements. */ --kithms-clay-light: #e8834a; /* Lighter clay for reversed contexts. */ --kithms-sand: #f5efe6; /* Section backgrounds. Card fills. */ --kithms-warm: #e8ddd0; /* Borders. Dividers. Subtle fills. */ --kithms-warm-dark: #d4c4b0; /* Stronger border / separator tone. */ --kithms-muted: #7a6f65; /* Secondary body copy. Captions. */ --kithms-white: #fdfaf7; /* Page background. Warm off-white. */ /* ============================================================ * COLOUR — CLAY TINT SCALE * ============================================================ */ --kithms-clay-100: #c8601a; --kithms-clay-80: #d47840; --kithms-clay-60: #e09068; --kithms-clay-40: #ecb090; --kithms-clay-20: #f5d0b8; --kithms-clay-10: #faeee6; /* ============================================================ * COLOUR — SECONDARY / SEMANTIC * ============================================================ */ --kithms-forest: #2d6a4f; /* Success. Positive scores. Completion. */ --kithms-forest-light: rgba(45, 106, 79, 0.10); --kithms-ember: #9b2335; /* Alert. Critical gaps. Warnings. */ --kithms-ember-light: rgba(155, 35, 53, 0.08); --kithms-amber: #b5830a; /* Caution. Partial scores. */ --kithms-amber-light: rgba(181, 131, 10, 0.10); /* ============================================================ * COLOUR — TRANSPARENT UTILITIES * ============================================================ */ --kithms-ink-90: rgba(15, 14, 12, 0.90); --kithms-ink-70: rgba(15, 14, 12, 0.70); --kithms-ink-40: rgba(15, 14, 12, 0.40); --kithms-ink-10: rgba(15, 14, 12, 0.10); --kithms-white-70: rgba(253, 250, 247, 0.70); --kithms-white-50: rgba(253, 250, 247, 0.50); --kithms-white-30: rgba(253, 250, 247, 0.30); --kithms-white-10: rgba(253, 250, 247, 0.10); --kithms-clay-alpha-20: rgba(200, 96, 26, 0.20); --kithms-clay-alpha-12: rgba(200, 96, 26, 0.12); --kithms-clay-alpha-06: rgba(200, 96, 26, 0.06); /* ============================================================ * TYPOGRAPHY — FONT FAMILIES * ============================================================ * Import in your theme's or functions.php: * * wp_enqueue_style( 'kithms-fonts', * 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond * :ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600 * &family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300 * &family=DM+Mono:wght@300;400;500&display=swap' * ); * ============================================================ */ --kithms-font-display: 'Cormorant Garamond', Georgia, serif; --kithms-font-body: 'DM Sans', system-ui, sans-serif; --kithms-font-mono: 'DM Mono', 'Courier New', monospace; /* ============================================================ * TYPOGRAPHY — FONT WEIGHTS * ============================================================ */ --kithms-weight-light: 300; --kithms-weight-regular: 400; --kithms-weight-medium: 500; --kithms-weight-semibold: 600; /* ============================================================ * TYPOGRAPHY — TYPE SCALE * fluid where appropriate using clamp() * ============================================================ */ --kithms-text-display: clamp(3rem, 7vw, 6rem); /* Hero / cover headings */ --kithms-text-h1: clamp(2rem, 4vw, 3.2rem); /* Section titles */ --kithms-text-h2: clamp(1.5rem, 2.5vw, 2rem); /* Sub-section headings */ --kithms-text-h3: 1.4rem; /* Card titles */ --kithms-text-h4: 1.15rem; /* Small headings */ --kithms-text-body-lg: 1.1rem; /* Lead / intro paragraphs */ --kithms-text-body: 0.95rem; /* Standard body copy */ --kithms-text-body-sm: 0.88rem; /* Supporting text */ --kithms-text-label: 0.72rem; /* Section labels (mono) */ --kithms-text-caption: 0.65rem; /* Captions, tags */ /* ============================================================ * TYPOGRAPHY — LINE HEIGHTS * ============================================================ */ --kithms-leading-tight: 1.05; /* Display headings */ --kithms-leading-snug: 1.25; /* H1 / H2 */ --kithms-leading-normal: 1.6; /* UI / buttons */ --kithms-leading-body: 1.75; /* Body paragraphs */ --kithms-leading-loose: 1.85; /* Long-form reading */ /* ============================================================ * TYPOGRAPHY — LETTER SPACING * ============================================================ */ --kithms-tracking-tight: -0.02em; /* Display wordmark */ --kithms-tracking-normal: 0; /* Body copy */ --kithms-tracking-wide: 0.05em; /* Wordmark / brand name */ --kithms-tracking-label: 0.15em; /* Section labels (mono) */ --kithms-tracking-caps: 0.20em; /* All-caps labels */ /* ============================================================ * SPACING SCALE * ============================================================ */ --kithms-space-1: 0.25rem; /* 4px */ --kithms-space-2: 0.5rem; /* 8px */ --kithms-space-3: 0.75rem; /* 12px */ --kithms-space-4: 1rem; /* 16px */ --kithms-space-5: 1.25rem; /* 20px */ --kithms-space-6: 1.5rem; /* 24px */ --kithms-space-8: 2rem; /* 32px */ --kithms-space-10: 2.5rem; /* 40px */ --kithms-space-12: 3rem; /* 48px */ --kithms-space-16: 4rem; /* 64px */ --kithms-space-20: 5rem; /* 80px */ --kithms-space-24: 6rem; /* 96px */ /* Section padding — responsive via clamp */ --kithms-section-padding-x: clamp(1.5rem, 5vw, 5rem); --kithms-section-padding-y: clamp(3rem, 8vw, 6rem); /* Max content widths */ --kithms-width-content: 900px; /* Main content column */ --kithms-width-text: 640px; /* Readable prose width */ --kithms-width-narrow: 480px; /* Narrow text / CTAs */ /* ============================================================ * BORDER RADIUS * ============================================================ */ --kithms-radius-none: 0; /* Dividers, rule lines */ --kithms-radius-sm: 2px; /* Buttons, tags, chips */ --kithms-radius-md: 4px; /* Cards, section headers */ --kithms-radius-lg: 6px; /* Panels, modals */ --kithms-radius-full: 9999px; /* Pills (use sparingly) */ /* ============================================================ * BORDERS * ============================================================ */ --kithms-border-light: 1px solid var(--kithms-warm); --kithms-border-warm: 1px solid var(--kithms-warm-dark); --kithms-border-clay: 1px solid var(--kithms-clay); --kithms-border-dark: 1px solid rgba(253, 250, 247, 0.08); --kithms-border-accent: 3px solid var(--kithms-clay); /* ============================================================ * SHADOWS * ============================================================ */ --kithms-shadow-sm: 0 2px 8px rgba(15, 14, 12, 0.06); --kithms-shadow-md: 0 8px 32px rgba(15, 14, 12, 0.08); --kithms-shadow-lg: 0 16px 48px rgba(15, 14, 12, 0.12); --kithms-shadow-clay: 0 8px 24px rgba(200, 96, 26, 0.20); /* ============================================================ * TRANSITIONS * ============================================================ */ --kithms-transition-fast: 0.15s ease; --kithms-transition-base: 0.20s ease; --kithms-transition-slow: 0.35s ease; --kithms-transition-reveal: 0.60s cubic-bezier(0.4, 0, 0.2, 1); /* ============================================================ * Z-INDEX SCALE * ============================================================ */ --kithms-z-base: 1; --kithms-z-raised: 10; --kithms-z-overlay: 50; --kithms-z-nav: 100; --kithms-z-modal: 200; } /* ============================================================ * DARK MODE OVERRIDES * Triggered by WordPress dark mode plugins or * prefers-color-scheme media query * ============================================================ */ @media (prefers-color-scheme: dark) { :root { --kithms-white: #0f0e0c; --kithms-ink: #fdfaf7; --kithms-sand: #1a1917; --kithms-warm: rgba(253, 250, 247, 0.08); --kithms-muted: rgba(253, 250, 247, 0.50); } } /* Manual dark mode class — for WordPress dark mode toggles */ .dark-mode { --kithms-white: #0f0e0c; --kithms-ink: #fdfaf7; --kithms-sand: #1a1917; --kithms-warm: rgba(253, 250, 247, 0.08); --kithms-muted: rgba(253, 250, 247, 0.50); } /* ============================================================ * QUICK-USE UTILITY CLASSES * Optional — remove if using a block theme or custom builder * ============================================================ */ /* Colours */ .kithms-text-clay { color: var(--kithms-clay); } .kithms-text-ink { color: var(--kithms-ink); } .kithms-text-muted { color: var(--kithms-muted); } .kithms-text-white { color: var(--kithms-white); } .kithms-bg-ink { background-color: var(--kithms-ink); } .kithms-bg-clay { background-color: var(--kithms-clay); } .kithms-bg-sand { background-color: var(--kithms-sand); } .kithms-bg-white { background-color: var(--kithms-white); } /* Typography */ .kithms-font-display { font-family: var(--kithms-font-display); } .kithms-font-body { font-family: var(--kithms-font-body); } .kithms-font-mono { font-family: var(--kithms-font-mono); } /* Section label style */ .kithms-label { font-family: var(--kithms-font-mono); font-size: var(--kithms-text-label); letter-spacing: var(--kithms-tracking-caps); text-transform: uppercase; color: var(--kithms-clay); } /* Brand divider */ .kithms-rule { border: none; height: 1px; background: var(--kithms-warm); margin: var(--kithms-space-8) 0; } /* Clay accent rule */ .kithms-rule-clay { border: none; height: 2px; width: 60px; background: var(--kithms-clay); margin-bottom: var(--kithms-space-6); } /* Pull quote */ .kithms-pull { font-family: var(--kithms-font-display); font-size: var(--kithms-text-h2); font-style: italic; font-weight: var(--kithms-weight-light); line-height: var(--kithms-leading-snug); border-left: var(--kithms-border-accent); padding-left: var(--kithms-space-8); color: var(--kithms-ink); } /* CTA Button — Primary */ .kithms-btn { display: inline-block; background: var(--kithms-clay); color: var(--kithms-white); padding: 0.75rem 1.75rem; border-radius: var(--kithms-radius-sm); font-family: var(--kithms-font-body); font-size: var(--kithms-text-caption); font-weight: var(--kithms-weight-medium); letter-spacing: var(--kithms-tracking-wide); text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: background var(--kithms-transition-base); } .kithms-btn:hover { background: var(--kithms-clay-dark); color: var(--kithms-white); } /* CTA Button — Ghost */ .kithms-btn-ghost { display: inline-block; background: transparent; color: var(--kithms-ink); padding: 0.75rem 1.75rem; border-radius: var(--kithms-radius-sm); border: 1px solid var(--kithms-warm-dark); font-family: var(--kithms-font-body); font-size: var(--kithms-text-caption); font-weight: var(--kithms-weight-medium); letter-spacing: var(--kithms-tracking-wide); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: border-color var(--kithms-transition-base), color var(--kithms-transition-base); } .kithms-btn-ghost:hover { border-color: var(--kithms-clay); color: var(--kithms-clay); } /* ============================================================ * WORDPRESS BLOCK EDITOR OVERRIDES * Aligns core Gutenberg blocks with brand styles * ============================================================ */ /* Headings */ .wp-block-heading h1, .entry-content h1 { font-family: var(--kithms-font-display); font-size: var(--kithms-text-h1); font-weight: var(--kithms-weight-light); line-height: var(--kithms-leading-snug); color: var(--kithms-ink); } .wp-block-heading h2, .entry-content h2 { font-family: var(--kithms-font-display); font-size: var(--kithms-text-h2); font-weight: var(--kithms-weight-regular); line-height: var(--kithms-leading-snug); color: var(--kithms-ink); } .wp-block-heading h3, .entry-content h3 { font-family: var(--kithms-font-display); font-size: var(--kithms-text-h3); font-weight: var(--kithms-weight-semibold); color: var(--kithms-ink); } /* Paragraph */ .entry-content p { font-family: var(--kithms-font-body); font-size: var(--kithms-text-body); line-height: var(--kithms-leading-body); color: var(--kithms-ink); } /* Buttons */ .wp-block-button__link { background: var(--kithms-clay) !important; color: var(--kithms-white) !important; border-radius: var(--kithms-radius-sm) !important; font-family: var(--kithms-font-body) !important; letter-spacing: var(--kithms-tracking-wide) !important; transition: background var(--kithms-transition-base) !important; } .wp-block-button__link:hover { background: var(--kithms-clay-dark) !important; } /* Pullquote */ .wp-block-pullquote { border-top: var(--kithms-border-accent) !important; border-bottom: none !important; } .wp-block-pullquote blockquote p { font-family: var(--kithms-font-display) !important; font-style: italic !important; font-weight: var(--kithms-weight-light) !important; color: var(--kithms-ink) !important; } /* Separator */ .wp-block-separator { border-color: var(--kithms-warm) !important; } .wp-block-separator.is-style-wide { border-color: var(--kithms-clay) !important; border-width: 2px !important; max-width: 60px !important; } /* Code */ .wp-block-code, code { font-family: var(--kithms-font-mono); font-size: var(--kithms-text-caption); background: var(--kithms-sand); border: var(--kithms-border-light); border-radius: var(--kithms-radius-md); color: var(--kithms-clay); }