/* Theme Name: New Life Funeral Theme URI: Description: Custom theme written for New Life Funeral, based on Hello Elementor. Author: merctraider Author URI: https://merctraider.me Template: hello-elementor Version: 0.6.0 */ /* =================================================================== Design Tokens Source of truth for spacing, radius, and shadow across the whole site. Every rule below references these variables instead of raw px/em values, so changing a number here updates the entire site consistently. =================================================================== */ :root{ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; --space-account-header: 10rem; --radius-sm:2px; --radius-md:4px; --radius-lg:6px; --radius-pill:999px; --shadow-sm:0 1px 2px rgba(15,27,45,0.08); --shadow-md:0 4px 16px rgba(15,27,45,0.10); --shadow-lg:0 12px 32px rgba(15,27,45,0.14); --border-width:1px; --container-max:1120px; } /* =================================================================== Global Typography & Spacing System Overrides Elementor's atomic base classes (.e-heading-base, .e-paragraph-base, .e-flexbox-base) which ship with zero margin/gap by default. This makes every heading, paragraph, and button group site-wide space nicely out of the box — not just on this page. Values below are mapped from the approved design file's actual spacing rhythm onto the token scale above. Where a design value sat between two tokens, calc() combines two tokens to hit it exactly rather than introducing a new magic number: - eyebrow → heading gap: 14–18px in the design → --space-4 (16px) - heading → paragraph gap: 20–24px in the design → --space-5 (24px) - card H3 → paragraph gap: 10–14px in the design → --space-3 (12px) - paragraph bottom (default): ~14–16px in the design → --space-4 (16px) - button/CTA row gap: 16px in the design → --space-4 (exact) NOTE ON !important: Elementor's own base CSS sets "margin:0px" as a shorthand on headings/paragraphs and loads after this stylesheet, so !important is required to win that specific tie. If you ever want a one-off exception on a single element, add a custom CSS class to it in Elementor's Advanced tab and add a rule for that class further down in this file — rules listed later in the same file win ties. =================================================================== */ body a{ color: var(--brand-accent); } .surface-inverse a:hover{ color: var(--white); } /* Headings: consistent line-height + breathing room below every heading */ .elementor .e-heading-base { line-height: 1.25 !important; margin: 0 0 var(--space-5) 0 !important; } /* Eyebrow / small heading style (e.g. category labels above a main heading): tighter spacing so it reads as a label, not a second headline */ .elementor .small-heading.e-heading-base { margin: 0 0 var(--space-4) 0 !important; } /* Paragraphs: readable line-height + space below every paragraph */ .elementor .e-paragraph-base { line-height: 1.65 !important; margin: 0 0 var(--space-4) 0 !important; } /* Prevent the last text element in a stacked block from adding extra trailing space before whatever comes next (e.g. a button row) */ .elementor .e-div-block-base > :last-child { margin-bottom: 0 !important; } /* Flex rows (icon rows, button rows, etc. built with Elementor's shared flexbox base) get sensible default spacing instead of touching. A specific gap set in the Elementor editor for one element will still override this, since that CSS loads after and is more specific. */ .elementor .e-flexbox-base { gap: var(--space-4); } /* Space above a button/CTA group that follows a heading or paragraph */ .elementor .e-heading-base + .e-div-block-base, .elementor .e-paragraph-base + .e-div-block-base { margin-top: var(--space-6); } /* Elementor's atomic e-div-block/e-con containers are flex containers under the hood (row or column depending on settings) even though they don't carry .e-flexbox-base. Using gap here instead of sibling margins means it works correctly regardless of flex-direction, so we don't have to guess row vs. column per-instance. */ .elementor .e-div-block-base, .elementor .e-con { gap: var(--space-4); } /* =================================================================== Section & Layout Rhythm Utility classes matching the approved design's recurring page structure. Apply these as CSS classes (Elementor Advanced tab → CSS Classes) to any container/section widget to inherit the same rhythm used throughout the homepage design. =================================================================== */ /* Standard content section: 96px vertical, 32px horizontal padding (matches every section in the design except the hero and footer) */ .section-rhythm { padding: var(--space-9) var(--space-6) !important; } /* Hero section: 10rem top / 64px bottom (design's one intentional exception) */ .section-hero { padding: var(--space-account-header) var(--space-6) var(--space-8) !important; } /* Footer: 72px top / 32px bottom */ .section-footer { padding: calc(var(--space-8) + var(--space-2)) var(--space-6) var(--space-6) !important; } /* Section intro block (eyebrow + H2 + optional lead paragraph), centered, max-width 720px, with the exact 56px gap the design uses before whatever grid/content follows it */ .section-header { max-width: 720px; margin: 0 auto calc(var(--space-7) + var(--space-2)) auto !important; text-align: center; } /* Content container matching the design's max-width */ .container-rhythm { max-width: var(--container-max); margin: 0 auto; } /* Grid gap utilities matching each grid seen in the design: 4-col icon grid (36px), 3-col cards (28px), 4-col packages (24px), 2-col hero/about layout (64px) */ .grid-gap-icons { gap: calc(var(--space-6) + var(--space-1)) !important; } .grid-gap-cards { gap: calc(var(--space-5) + var(--space-1)) !important; } .grid-gap-tight { gap: var(--space-5) !important; } .grid-gap-split { gap: var(--space-8) !important; } /* Card padding + radius + shadow matching services/packages/testimonial cards */ .card-rhythm, .card-rhythm-light { padding: var(--space-6) !important; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .card-rhythm .e-heading-base, .card-rhythm .e-paragraph-base, .card-rhythm > .elementor-widget-text-editor { color: var(--text-on-navy) !important; } /* Light card variant: white background instead of charcoal, with dark text forced to match — pair with .card-rhythm (e.g. class="card-rhythm card-rhythm-light"). Base .card-rhythm still supplies padding/border/radius/shadow; this only overrides background + text color. */ .card-rhythm-light { background: var(--surface-page) !important; border-color: var(--border-default) !important; } .card-rhythm-light:hover{ background: var(--charcoal) !important; cursor: pointer; } .card-rhythm-light .e-heading-base, .card-rhythm-light .e-paragraph-base, .card-rhythm-light > .elementor-widget-text-editor { color: var(--brand-primary) !important; } .card-rhythm-light:hover .e-paragraph-base, .card-rhythm-light:hover > .elementor-widget-text-editor { color: var(--text-on-navy) !important; cursor: pointer; } .card-rhythm-light:hover .e-heading-base, .card-rhythm-light:hover .eyebrow { color: var(--brand-accent) !important; text-decoration: underline; } .card-rhythm-light .eyebrow { color: var(--brand-accent) !important; } .card-rhythm-light .quote-mark { color: var(--brand-accent); } /* =================================================================== Color Tokens — 4-Color System Every color on the site now derives from exactly four brand colors. Downstream rules (buttons, cards, footer, surfaces) reference the semantic aliases below, not the four raw values directly — so the whole site re-themes by editing this block alone. =================================================================== */ :root{ /* The only 4 brand colors */ --dark-charcoal:#12141D; --charcoal:#202027; --background-charcoal:#20232d; --gold:#F8B536; /* Pure white — a neutral needed for readable text on a dark UI, not a brand color choice. */ --white:#ffffff; --sunken-white: #F3F1EB; /* Semantic aliases: swap these, not the rules that use them */ --surface-page:var(--white); --surface-card:var(--charcoal); --surface-sunken:var(--sunken-white); --surface-inverse:var(--dark-charcoal); --text-primary:var(--white); --text-secondary:rgba(255,255,255,.75); --text-muted:rgba(255,255,255,.55); --text-on-navy:var(--white); --text-on-gold:var(--dark-charcoal); --brand-primary:var(--dark-charcoal); --brand-primary-hover:var(--charcoal); --brand-accent:var(--gold); --brand-accent-hover:color-mix(in srgb, var(--gold) 85%, black); --border-subtle:rgba(255,255,255,.08); --border-default:rgba(255,255,255,.15); --border-gold:var(--gold); --focus-ring:var(--gold); /* Functional status colors — not brand colors, kept separate */ --success:#4d6b4f; --warning:#a9812f; --danger:#8a3b32; } /* Site-wide dark background + default text color, since the whole site (not just accent sections) now runs on this palette. */ body { background: var(--surface-page) !important; color: var(--text-primary); } /* =================================================================== Buttons — Primary (gold) & Outline Matches the two hero CTA buttons: a solid gold "WhatsApp Kelvin" button and a transparent bordered "Call" button. Both share the same shape/type rhythm (padding, radius, letter-spacing) and only differ in fill vs outline. Works on Elementor button widgets AND plain links — apply as a CSS class in Elementor's Advanced tab, or use directly on an /