.elementor-kit-7{--e-global-color-primary:#5B1A14;--e-global-color-secondary:#CC9A57;--e-global-color-text:#1B1410;--e-global-color-accent:#7E5720;--e-global-color-017e59a:#F2EADD;--e-global-color-4e9747e:#2A211C;--e-global-color-d9507bf:#7E5720;--e-global-color-abb760a:#AE8643;--e-global-color-e008c1e:#CC9A57;--e-global-color-58b3c9c:#1B1410;--e-global-color-f87d47c:#241B15;--e-global-color-5907e6a:#FFFFFF;--e-global-color-edd639f:#000000;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Libre Baskerville";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-weight:500;--e-global-typography-5c8733e-font-family:"Libre Baskerville";--e-global-typography-5c8733e-font-size:var(--fs-hero-title);--e-global-typography-5c8733e-font-weight:700;--e-global-typography-5c8733e-line-height:1.25;--e-global-typography-8d8d98d-font-family:"Archivo";--e-global-typography-8d8d98d-font-size:var(--fs-hero-subtitle);--e-global-typography-8d8d98d-font-weight:500;--e-global-typography-8d8d98d-line-height:1.5;--e-global-typography-200a896-font-family:"Libre Baskerville";--e-global-typography-200a896-font-size:var(--fs-section-title);--e-global-typography-200a896-font-weight:700;--e-global-typography-200a896-line-height:1.25;--e-global-typography-e620b6e-font-family:"Archivo";--e-global-typography-e620b6e-font-size:var(--fs-section-subtitle);--e-global-typography-e620b6e-font-weight:500;--e-global-typography-e620b6e-line-height:1.33;--e-global-typography-39480fd-font-family:"Libre Baskerville";--e-global-typography-39480fd-font-size:var(--fs-box-title);--e-global-typography-39480fd-font-weight:700;--e-global-typography-39480fd-line-height:1.25;--e-global-typography-2a50c70-font-family:"Archivo";--e-global-typography-2a50c70-font-size:var(--fs-box-content);--e-global-typography-2a50c70-font-weight:400;--e-global-typography-2a50c70-line-height:1.5;--e-global-typography-f3dc2a6-font-family:"Archivo";--e-global-typography-f3dc2a6-font-size:var(--fs-body-text);--e-global-typography-f3dc2a6-font-weight:400;--e-global-typography-f3dc2a6-line-height:1.5;--e-global-typography-af8be59-font-family:"Arvo";--e-global-typography-af8be59-font-size:var(--fs-small-text);--e-global-typography-af8be59-font-weight:400;--e-global-typography-af8be59-line-height:1.25;font-family:"Archivo", Sans-serif;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Archivo", Sans-serif;font-size:17px;font-weight:500;line-height:1;letter-spacing:0.5px;color:var( --e-global-color-5907e6a );border-radius:50px 50px 50px 50px;padding:1rem 2rem 1rem 2rem;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.e-con{--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing: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-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================================== Fluid typography — clamp() scale Assumptions (adjust the two viewport constants if yours differ): - Scales between a 375px (mobile) and 1440px (desktop) viewport width. - Root font-size is the browser default, 16px, so 1rem = 16px. - Below 375px wide, size holds at the min; above 1440px, it holds at the max. Desktop (max) sizes for hero/section/box come from your spec; base, body text, and small text are added here with typical values — adjust the px comments and recompute if you want different numbers. ========================================================================== */ :root { --fs-base: clamp(0.9375rem, 0.9155rem + 0.0939vw, 1rem); /* 15px → 16px */ --fs-hero-title: clamp(1.75rem, 1.4859rem + 1.1268vw, 2.5rem); /* 28px → 40px */ --fs-hero-subtitle: clamp(1rem, 0.9120rem + 0.3756vw, 1.25rem); /* 16px → 20px */ --fs-section-title: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem); /* 24px → 32px */ --fs-section-subtitle: clamp(0.9375rem, 0.8715rem + 0.2817vw, 1.125rem); /* 15px → 18px */ --fs-box-title: clamp(1.125rem, 1.0370rem + 0.3756vw, 1.375rem); /* 18px → 22px */ --fs-box-content: clamp(0.875rem, 0.8310rem + 0.1878vw, 1rem); /* 14px → 16px */ --fs-body-text: clamp(1rem, 0.9560rem + 0.1878vw, 1.125rem); /* 16px → 18px */ --fs-small-text: clamp(0.75rem, 0.7060rem + 0.1878vw, 0.875rem); /* 12px → 14px */ } /* html/body base — rem values below still resolve against the browser's default 16px root, so this doesn't create a circular reference. */ html { font-size: var(--fs-base); } .hero-title { font-size: var(--fs-hero-title); } .hero-subtitle { font-size: var(--fs-hero-subtitle); } .section-title { font-size: var(--fs-section-title); } .section-subtitle { font-size: var(--fs-section-subtitle); } .box-title { font-size: var(--fs-box-title); } .box-content { font-size: var(--fs-box-content); } .body-text { font-size: var(--fs-body-text); } .small-text { font-size: var(--fs-small-text); } /* ========================================================================== Shell Homes — oval/pill button styles Built on Elementor's own Global Colors variables, so these automatically match whatever hex you've set under Site Settings → Global Colors: --e-global-color-primary --e-global-color-secondary --e-global-color-accent If a button is used somewhere those globals aren't in scope, each rule below has a fallback value (the second argument to var()) — update the six fallback hex codes if you want them to match your palette exactly. Hover behaviour: - Filled buttons (1/3/5) → background darkens (Bootstrap's own .btn-primary:hover mixes the color with black; color-mix() below does the same thing natively in CSS). - Outline buttons (2/4/6) → background fills with the solid colour and text flips to white, exactly like Bootstrap's .btn-outline-primary:hover (Tailwind has no built-in button component, but this fill-on-hover is the pattern its own UI kits use for outline/ghost buttons too). Apply a class below to any Elementor Button widget via Advanced → CSS Classes (no dot). ========================================================================== */ .btn-oval { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.75em 2.25em; border-radius: 999px; border: 2px solid transparent; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease; } .btn-oval:active { transform: translateY(1px); } .btn-oval:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .btn-oval { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .btn-oval:active { transform: none; } } /* ---------- 1. Primary — filled ---------- */ .btn-oval-primary { background-color: var(--e-global-color-primary, #5B1A14); color: #FFFFFF; } .btn-oval-primary:hover { background-color: color-mix(in srgb, var(--e-global-color-primary, #5B1A14) 85%, black); box-shadow: 0 4px 14px color-mix(in srgb, var(--e-global-color-primary, #5B1A14) 35%, transparent); transform: translateY(-2px); } /* ---------- 2. Primary — outline ---------- */ .btn-oval-primary-outline { background-color: transparent; border-color: var(--e-global-color-primary, #5B1A14); color: var(--e-global-color-primary, #5B1A14); } .btn-oval-primary-outline:hover { background-color: var(--e-global-color-primary, #5B1A14); color: #FFFFFF; transform: translateY(-2px); } /* ---------- 3. Secondary — filled ---------- */ .btn-oval-secondary { background-color: var(--e-global-color-secondary, #7E5720); color: #FFFFFF; } .btn-oval-secondary:hover { background-color: color-mix(in srgb, var(--e-global-color-secondary, #7E5720) 85%, black); box-shadow: 0 4px 14px color-mix(in srgb, var(--e-global-color-secondary, #7E5720) 35%, transparent); transform: translateY(-2px); } /* ---------- 4. Secondary — outline ---------- */ .btn-oval-secondary-outline { background-color: transparent; border-color: var(--e-global-color-secondary, #7E5720); color: var(--e-global-color-secondary, #7E5720); } .btn-oval-secondary-outline:hover { background-color: var(--e-global-color-secondary, #7E5720); color: #FFFFFF; transform: translateY(-2px); } /* ---------- 5. Accent — filled ---------- Text is dark, not white, by design: if your Accent global colour is a light gold (as in the Shell Homes palette), white text on it measures ~2.5:1 contrast — well under the 4.5:1 WCAG AA minimum for text, so it would be genuinely hard to read. Dark text on the same gold measures ~6:1, which passes comfortably. If your Accent colour is a darker hue, swap --btn-accent-text below back to #FFFFFF. */ .btn-oval-accent { --btn-accent-text: #2A211C; /* swap to #FFFFFF if your Accent colour is dark enough */ background-color: var(--e-global-color-accent, #CC9A57); color: var(--btn-accent-text); } .btn-oval-accent:hover { background-color: color-mix(in srgb, var(--e-global-color-accent, #CC9A57) 85%, black); box-shadow: 0 4px 14px color-mix(in srgb, var(--e-global-color-accent, #CC9A57) 35%, transparent); transform: translateY(-2px); } /* ---------- 6. Accent — outline ---------- Same reasoning as #5: the border/text colour is a darkened mix of the Accent colour so it stays legible on light backgrounds at rest, not just after hover. On hover it fills with the true Accent colour. */ .btn-oval-accent-outline { background-color: transparent; border-color: color-mix(in srgb, var(--e-global-color-accent, #CC9A57) 55%, black); color: color-mix(in srgb, var(--e-global-color-accent, #CC9A57) 55%, black); } .btn-oval-accent-outline:hover { background-color: var(--e-global-color-accent, #CC9A57); border-color: var(--e-global-color-accent, #CC9A57); color: var(--btn-accent-text, #2A211C); transform: translateY(-2px); } /* ---------- 7. White — filled ---------- For use on dark or photo backgrounds (hero sections, dark footers), where none of the three brand colours would stand out on their own. Text uses your Primary colour rather than black, so the button still reads as "on-brand" rather than a generic white pill. */ .btn-oval-white { background-color: #FFFFFF; color: var(--e-global-color-primary, #5B1A14); } .btn-oval-white:hover { background-color: color-mix(in srgb, #FFFFFF 90%, black); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); transform: translateY(-2px); } /* ---------- 8. White — outline ---------- Same dark-background use case as #7, but as a ghost/outline button. Fills solid white with Primary-coloured text on hover, same fill pattern as the other outline buttons. */ .btn-oval-white-outline { background-color: transparent; border-color: #FFFFFF; color: #FFFFFF; } .btn-oval-white-outline:hover { background-color: #FFFFFF; color: var(--e-global-color-primary, #5B1A14); transform: translateY(-2px); }/* End custom CSS */