/* Theme Name: Khwalo Funeral Theme Theme URI: https://khwalofuneral.co.za Author: Khwalo Funeral Services Author URI: https://khwalofuneral.co.za Description: A dignified, professional WordPress theme for Khwalo Funeral Services featuring a modern bento-grid layout, geo-targeted SEO for Mthatha and the Eastern Cape, warm earth tones with depth, and comprehensive design tokens. Version: 2.0.0 Requires at least: 6.0 Tested up to: 6.4 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: khwalo-funeral Tags: custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, one-column, two-columns, accessibility-ready */ /* ========================================================================== Design Tokens — CSS Custom Properties (v2.0 — Bento Redesign) Warm, dignified palette with depth. Earth tones + deep navy convey professionalism, trust, and compassion without being generic or cold. ========================================================================== */ :root { /* ----------------------------------------------------------------------- Color Palette — Warm & Dignified Deep navy + warm gold accent. Earth tones for trust and compassion. ----------------------------------------------------------------------- */ --color-primary: #1B2A4A; --color-primary-light: #2A3F6B; --color-primary-dark: #0F1A30; --color-primary-rgb: 27, 42, 74; /* Warm gold accent — conveys trust, warmth, premium quality */ --color-accent: #C8963E; --color-accent-hover: #D4A84F; --color-accent-light: rgba(200, 150, 62, 0.12); --color-accent-dark: #A67B2E; --color-accent-rgb: 200, 150, 62; /* Secondary accent — soft sage for balance */ --color-secondary: #5B7B6A; --color-secondary-light: #7A9B8A; --color-secondary-dark: #3D5A4A; /* Warm neutrals */ --color-warm-white: #FDFBF7; --color-warm-grey: #F5F0E8; --color-warm-grey-2: #EDE6DA; --color-warm-grey-3: #D4CCC0; /* Status / Feedback Colors */ --color-success: #2D8A4E; --color-error: #C53030; --color-warning: #D69E2E; --color-info: #2B6CB0; /* ----------------------------------------------------------------------- Gradients — Rich depth and layering ----------------------------------------------------------------------- */ --gradient-dark: linear-gradient(145deg, #0F1A30 0%, #1B2A4A 40%, #1F3055 100%); --gradient-hero: linear-gradient(160deg, #0F1A30 0%, #1B2A4A 50%, #2A3F6B 100%); --gradient-section: linear-gradient(180deg, var(--color-warm-white) 0%, var(--color-warm-grey) 100%); --gradient-warm: linear-gradient(135deg, #FDFBF7 0%, #F5F0E8 50%, #EDE6DA 100%); --gradient-card: linear-gradient(180deg, rgba(27, 42, 74, 0.02) 0%, rgba(27, 42, 74, 0.04) 100%); --gradient-bento: linear-gradient(135deg, rgba(200, 150, 62, 0.05) 0%, rgba(27, 42, 74, 0.03) 100%); --gradient-accent: linear-gradient(135deg, #C8963E 0%, #D4A84F 100%); --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); /* ----------------------------------------------------------------------- Neutrals — Warm spectrum ----------------------------------------------------------------------- */ --color-white: #FFFFFF; --color-off-white: #FDFBF7; --color-light-grey: #EDE6DA; --color-light-grey-2: #D4CCC0; --color-light-grey-3: #B8AFA3; --color-medium-grey: #7A7067; --color-dark-grey: #3D3530; --color-near-black: #1A1510; --color-text: #2D2520; --color-text-muted: #6B6058; --color-text-light: #9A8F85; --color-text-on-dark: #E8E2DA; --color-text-on-primary: #FFFFFF; /* ----------------------------------------------------------------------- Typography — Inter font family, self-hosted ----------------------------------------------------------------------- */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Type Scale */ --text-caption: 0.75rem; --text-small: 0.875rem; --text-body: 1rem; --text-large: 1.125rem; --text-h4: 1.25rem; --text-h3: 1.5rem; --text-h2: 2rem; --text-h1: 2.75rem; --text-display: 3.5rem; /* Line Heights */ --line-height-tight: 1.2; --line-height-normal: 1.6; --line-height-relaxed: 1.8; /* Letter Spacing */ --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.02em; --letter-spacing-wider: 0.05em; --letter-spacing-caps: 0.08em; /* ----------------------------------------------------------------------- Spacing Scale — 8px base ----------------------------------------------------------------------- */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; /* Layout */ --container-max-width: 1200px; --container-padding: var(--space-lg); --section-padding: var(--space-4xl); --bento-gap: var(--space-lg); /* ----------------------------------------------------------------------- Border Radius — Softer, more organic ----------------------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 9999px; /* ----------------------------------------------------------------------- Shadows — Layered depth system (bento-appropriate) ----------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(27, 42, 74, 0.04); --shadow-sm: 0 2px 4px rgba(27, 42, 74, 0.06), 0 1px 2px rgba(27, 42, 74, 0.04); --shadow-md: 0 4px 12px rgba(27, 42, 74, 0.08), 0 2px 4px rgba(27, 42, 74, 0.04); --shadow-lg: 0 8px 24px rgba(27, 42, 74, 0.10), 0 4px 8px rgba(27, 42, 74, 0.06); --shadow-xl: 0 16px 48px rgba(27, 42, 74, 0.12), 0 8px 16px rgba(27, 42, 74, 0.06); --shadow-2xl: 0 24px 64px rgba(27, 42, 74, 0.16), 0 12px 24px rgba(27, 42, 74, 0.08); --shadow-card: 0 2px 8px rgba(27, 42, 74, 0.06), 0 0 1px rgba(27, 42, 74, 0.08); --shadow-card-hover: 0 12px 32px rgba(27, 42, 74, 0.12), 0 4px 8px rgba(27, 42, 74, 0.06); --shadow-bento: 0 4px 16px rgba(27, 42, 74, 0.06), 0 1px 4px rgba(27, 42, 74, 0.04); --shadow-bento-hover: 0 16px 40px rgba(27, 42, 74, 0.12), 0 4px 12px rgba(27, 42, 74, 0.06); --shadow-fab: 0 6px 20px rgba(27, 42, 74, 0.20); --shadow-inner: inset 0 2px 4px rgba(27, 42, 74, 0.04); /* ----------------------------------------------------------------------- Glass Effects — For overlays and translucent panels ----------------------------------------------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.06); --glass-bg-light: rgba(253, 251, 247, 0.85); --glass-border: rgba(255, 255, 255, 0.12); --glass-border-light: rgba(255, 255, 255, 0.2); --glass-blur: blur(12px); --glass-shadow: 0 8px 32px rgba(27, 42, 74, 0.08); /* ----------------------------------------------------------------------- Transitions — Motion tokens ----------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); --easing: cubic-bezier(0.4, 0, 0.2, 1); --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1); /* Animation */ --animation-duration: 0.6s; --animation-stagger: 0.1s; /* ----------------------------------------------------------------------- Z-Index Scale ----------------------------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-fab: 600; --z-tooltip: 700; /* ----------------------------------------------------------------------- Borders ----------------------------------------------------------------------- */ --border-color: var(--color-light-grey-2); --border-color-light: var(--color-light-grey); --border-width: 1px; /* ----------------------------------------------------------------------- Focus — Accessibility focus ring ----------------------------------------------------------------------- */ --focus-ring-color: var(--color-accent); --focus-ring-offset: 2px; --focus-ring-width: 3px; }