.elementor-kit-6{--e-global-color-primary:#B71010;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#16A821;--e-global-color-b83a295:#000000;--e-global-color-3710858:#FFFFFF;--e-global-color-50c5649:#B83040;--e-global-color-42d04f5:#7A1A26;--e-global-color-41e5ef3:#D4606E;--e-global-color-d235110:#FAF0F1;--e-global-color-548c5fd:#5A8A3C;--e-global-color-0726753:#3A6024;--e-global-color-222ec3e:#8ABF6A;--e-global-color-b8498a5:#EDF5E8;--e-global-color-91b103e:#6B4226;--e-global-color-ca69897:#C49A2A;--e-global-color-7076f7b:#1E1A18;--e-global-color-51e1427:#FAF8F3;--e-global-color-e438fed:#FAF8F3;--e-global-color-c9fa7df:#F5F0E8;--e-global-color-847a272:#1A2744;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-size:54px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.05em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-family:"Playfair Display";--e-global-typography-secondary-font-size:36px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-font-style:italic;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.8em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:1.5px;--e-global-typography-a857945-font-size:11px;--e-global-typography-a857945-font-weight:600;--e-global-typography-a857945-text-transform:uppercase;--e-global-typography-a857945-line-height:1.4em;--e-global-typography-a857945-letter-spacing:0.22em;color:var( --e-global-color-7076f7b );font-family:"Outfit", Sans-serif;font-size:16px;font-weight:400;line-height:1.8em;letter-spacing:0em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:var( --e-global-color-3710858 );box-shadow:2px 2px 3px 0px rgba(0,0,0,0.5);}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-0726753 );}.elementor-kit-6 a:hover{color:var( --e-global-color-b83a295 );}.elementor-kit-6 h1{color:var( --e-global-color-50c5649 );font-family:"Cormorant Garamond", Sans-serif;font-size:64px;font-weight:700;}.elementor-kit-6 h2{color:var( --e-global-color-548c5fd );font-family:"Cormorant Garamond", Sans-serif;font-size:42px;font-weight:700;}.elementor-kit-6 h3{color:var( --e-global-color-7076f7b );font-family:"Cormorant Garamond", Sans-serif;font-size:24px;font-weight:600;line-height:1em;}.elementor-kit-6 h4{color:var( --e-global-color-51e1427 );font-family:"Outfit", Sans-serif;font-size:16px;font-weight:600;line-height:1.4em;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{color:var( --e-global-color-b83a295 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* * ═══════════════════════════════════════════════════════════════ * KATE HARTWIG CONSULTING — GLOBAL CARD CSS * consulting.katehartwig.com.au * * Paste into: Elementor → Site Settings → Custom CSS * (or WordPress Customiser → Additional CSS) * * Before pasting, add CSS classes to your Elementor containers: * · All service/who cards: khc-card * · Cards with a GREEN top line: khc-card khc-card--green * · Cards with a CRIMSON top line: khc-card khc-card--crimson * · Cards with a GOLD top line: khc-card khc-card--gold * * Where to add CSS classes in Elementor: * Select container → Advanced → CSS Classes → type the class name * * ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── 1. CURVED TOP LINE The decorative arc above each card. Default colour is Apple Crimson. Override with --green, --gold variants below. ───────────────────────────────────────────────────────────── */ .khc-card::before { content: ''; display: block; width: 96%; height: 6px; margin: 0 auto 16px auto; background: #B83040; border-radius: 50%; transform: scaleY(0.5); } /* Green variant — Training, Starting Out, growth themes */ .khc-card--green::before { background: #5A8A3C; /* Stripe Green */ } /* Crimson variant — explicit override (same as default, useful for clarity) */ .khc-card--crimson::before { background: #B83040; /* Apple Crimson */ } /* Gold variant — Writing page, premium accent */ .khc-card--gold::before { background: #C49A2A; /* Harvest Gold */ } /* ───────────────────────────────────────────────────────────── 2. CARD CONTAINER BASE STYLES Padding, background, and border-radius for all khc-card containers. Adjust padding values in Elementor if you prefer to control spacing visually — these are fallback defaults. ───────────────────────────────────────────────────────────── */ .khc-card { padding: 28px 24px; background: #FAF8F3; /* Warm Cream */ border-radius: 0; /* Set to 6px if you want rounded cards */ } /* Card on a pale blush background (Apple Blush Pale sections) */ .khc-card--on-blush { background: #FFFFFF; } /* Card on a dark/ink background */ .khc-card--on-dark { background: rgba(250, 248, 243, 0.05); border: 1px solid rgba(250, 248, 243, 0.08); } /* ───────────────────────────────────────────────────────────── 3. CARD TITLE TYPOGRAPHY Targets Elementor Heading widgets inside khc-card containers. Cormorant Garamond Bold for all card titles. ───────────────────────────────────────────────────────────── */ .khc-card .elementor-heading-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: #1E1A18; /* Ink */ margin-bottom: 8px; letter-spacing: -0.01em; } /* Larger title variant — for prominent who-cards */ .khc-card--large .elementor-heading-title { font-size: 1.35rem; } /* Crimson title — for service name emphasis */ .khc-card--crimson-title .elementor-heading-title { color: #B83040; } /* Green title — for training/growth themes */ .khc-card--green-title .elementor-heading-title { color: #5A8A3C; } /* ───────────────────────────────────────────────────────────── 4. CARD BODY TEXT Targets paragraph text inside khc-card containers. Outfit Regular for all card descriptions. ───────────────────────────────────────────────────────────── */ .khc-card p { font-family: 'Outfit', sans-serif; font-size: 0.85rem; line-height: 1.7; color: rgba(30, 26, 24, 0.62); margin-bottom: 0; } /* Slightly larger body text for who-cards */ .khc-card--large p { font-size: 0.88rem; color: rgba(30, 26, 24, 0.65); } /* ───────────────────────────────────────────────────────────── 5. LANDING PAGE — SERVICES STRIP The five-column strip at the bottom of the hero on the landing page. Each service item gets khc-card here. These overrides handle the darker strip background. ───────────────────────────────────────────────────────────── */ .khc-services-strip .khc-card { background: transparent; padding: 20px 24px; border-right: 1px solid rgba(250, 248, 243, 0.08); } .khc-services-strip .khc-card:last-child { border-right: none; } .khc-services-strip .khc-card::before { margin-bottom: 14px; } /* Service name on dark background */ .khc-services-strip .khc-card .elementor-heading-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.03em; color: #FAF8F3; /* Warm Cream */ text-transform: capitalize; } /* Service description on dark background */ .khc-services-strip .khc-card p { font-size: 0.75rem; color: rgba(250, 248, 243, 0.45); line-height: 1.5; } /* * To use the services strip styles, add TWO classes to the * parent strip container: khc-services-strip * And add khc-card to each individual service container within it. */ /* ───────────────────────────────────────────────────────────── 6. WHO IT'S FOR CARDS — CONSULTING PAGE Three situation cards: Starting Out, Stuck or Struggling, Something's Gone Wrong. Add khc-card to each, plus the colour variant: · Starting out: khc-card khc-card--green · Stuck or struggling: khc-card khc-card--crimson · Something's gone wrong: khc-card khc-card--crimson ───────────────────────────────────────────────────────────── */ /* Subtle hover lift on who-cards */ .khc-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .khc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(30, 26, 24, 0.08); } /* ───────────────────────────────────────────────────────────── 7. CURVE TUNING REFERENCE Adjust border-radius to change the arc shape: 0 0 30% 30% → subtle, gentle curve 0 0 50% 50% → standard bow (default) 0 0 70% 70% → deep, pronounced arc Adjust height to change line weight: 2px → hairline 3px → standard (default) 4px → bold ───────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────── 8. H6 FIX — CONSULTING PAGE WHO-CARDS Your current who-cards use H6 for titles, which inherits small default sizing. This override corrects that until you can change the widget to H3 in Elementor. ───────────────────────────────────────────────────────────── */ .khc-card h6, .khc-card .elementor-heading-title.elementor-size-default { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: #1E1A18; margin-bottom: 8px; letter-spacing: -0.01em; text-transform: none; } /* * ═══════════════════════════════════════════════════════════════ * QUICK REFERENCE — CLASS COMBINATIONS * ─────────────────────────────────────────────────────────────── * Landing page service cards (on dark strip): * Parent container: khc-services-strip * Each card: khc-card * * Consulting page — Who it's for: * Starting out: khc-card khc-card--green khc-card--large * Stuck or struggling: khc-card khc-card--crimson khc-card--large * Something's gone wrong: khc-card khc-card--crimson khc-card--large * * Future service pages — standard cards: * Training cards: khc-card khc-card--green * Writing cards: khc-card khc-card--gold * Fixing cards: khc-card khc-card--crimson * Facilitating: khc-card (default crimson) * ═══════════════════════════════════════════════════════════════ */ /* ── Elementor Form widget styling ── */ .elementor-form .elementor-field-group { margin-bottom: 18px; } .elementor-form .elementor-field-label { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(30,26,24,0.5); margin-bottom: 6px; } .elementor-form .elementor-field { font-family: 'Outfit', sans-serif; font-size: 0.9rem; color: #1E1A18; background: #FAF8F3; border: 1.5px solid rgba(30,26,24,0.15); border-radius: 5px; padding: 11px 14px; width: 100%; } .elementor-form .elementor-field:focus { border-color: #B83040; box-shadow: 0 0 0 3px rgba(184,48,64,0.1); outline: none; } .elementor-form .elementor-field-type-textarea .elementor-field { min-height: 120px; resize: vertical; } .elementor-form .elementor-button { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; background: #B83040; color: #FAF8F3; border: none; border-radius: 5px; padding: 13px 28px; cursor: pointer; transition: background 0.2s; } .elementor-form .elementor-button:hover { background: #7A1A26; } /* Apple float animation */ @keyframes appleFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0px); } } .apple-float { animation: appleFloat 4s ease-in-out infinite; }/* End custom CSS */