/*! * EFLL Site Design - site-wide layer (site.css) * Loaded only when efll_sd_active(); every rule is scoped under body.efll-sd. * * Method: re-point design tokens (Elementor kit 931 + Astra globals + WPForms modern vars) so the * ~80 Elementor pages and 440 block posts pick up the Draft E palette and fonts without layout * changes. Element rules stay at low specificity (body.efll-sd + one subject), so any value an * Elementor widget sets explicitly (.elementor-NNN .elementor-element.elementor-element-xxx ..., 0-4-0) * still wins. No !important anywhere in this file. * * Never touches #efll-home (homepage), .efll-sd-header / .efll-sd-footer (shared chrome): * element rules carry the zero-specificity guard :where(:not(#efll-home *,.efll-sd-header *,.efll-sd-footer *)). * * TOKEN MAP (old value -> new value, role) * Elementor kit 931 * --e-global-color-primary #000000 -> #1b304b navy headings / icons (on light) * --e-global-color-secondary #386CB8 -> #2a4467 navy-2 old brand blue; text on light or band under white text * --e-global-color-text #000000 -> #33475f slate body copy * --e-global-color-accent #ED7730 -> #d4a72c gold buttons / accents (dark text on it) * --e-global-color-3c64c4e #2F9DFC -> #d4a72c gold bright highlight (was used on dark) * --e-global-color-6c8a017 #FAFAFF -> #f7f8fa near-white surface * --e-global-color-2add998 #F4F4F4 -> #f2f4f7 light band (Draft E light section) * --e-global-color-6f82a85 #083463 -> #0e1a2b ink dark band * --e-global-color-19ef0ab #596478 -> #4b5d74 muted text on light * --e-global-color-51e5444 #878F99 -> #7f91a8 muted text on dark / hairlines * typography primary Arial 400 -> Cinzel 700 (heading widgets using the global) * typography secondary Cinzel 700 upper -> Cinzel 700 upper (fallback added only) * typography text Arial 400 1.5em -> Barlow 400 1.65em * typography accent Arial 700 -> Barlow Condensed 600 (buttons) * Astra globals (also mirrored to --e-global-color-astglobalcolorN and Astra's derived vars, * which are resolved at :root and so must be re-declared here) * 0 #046bd2 -> #1b304b links / Astra "brand" (gold fails contrast as link text on white) * 1 #045cb4 -> #7a5a0c link hover (dark gold, 6.6:1 on white) * 2 #1e293b -> #1b304b headings * 3 #334155 -> #33475f body text * 4 #FFFFFF -> #ffffff page background (inner pages stay light) * 5 #F0F5FA -> #f2f4f7 secondary background / inputs * 6 #111111 -> #0e1a2b alternate (dark) background * 7 #D1D5DB -> #d5dce5 subtle background / borders * 8 #111111 -> #08111d darkest */ body.efll-sd { --efll-sd-navy: #1b304b; --efll-sd-navy-2: #2a4467; --efll-sd-ink: #0e1a2b; --efll-sd-night: #08111d; --efll-sd-text: #33475f; --efll-sd-muted: #4b5d74; --efll-sd-muted-2: #7f91a8; --efll-sd-gold: #d4a72c; --efll-sd-gold-hi: #e6c25a; --efll-sd-gold-deep: #b88a14; --efll-sd-gold-ink: #7a5a0c; --efll-sd-light: #f2f4f7; --efll-sd-light-2: #f7f8fa; --efll-sd-line: #d5dce5; --efll-sd-display: "Cinzel", Georgia, "Times New Roman", serif; --efll-sd-cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --efll-sd-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Astra */ --ast-global-color-0: #1b304b; --ast-global-color-1: #7a5a0c; --ast-global-color-2: #1b304b; --ast-global-color-3: #33475f; --ast-global-color-4: #ffffff; --ast-global-color-5: #f2f4f7; --ast-global-color-6: #0e1a2b; --ast-global-color-7: #d5dce5; --ast-global-color-8: #08111d; --ast-global-color-primary: #ffffff; --ast-global-color-secondary: #f2f4f7; --ast-global-color-alternate-background: #0e1a2b; --ast-global-color-subtle-background: #d5dce5; --ast-bg-style-guide: #f2f4f7; --ast-border-color: #d5dce5; --srfm-color-input-label: #1b304b; --e-global-color-astglobalcolor0: #1b304b; --e-global-color-astglobalcolor1: #7a5a0c; --e-global-color-astglobalcolor2: #1b304b; --e-global-color-astglobalcolor3: #33475f; --e-global-color-astglobalcolor4: #ffffff; --e-global-color-astglobalcolor5: #f2f4f7; --e-global-color-astglobalcolor6: #0e1a2b; --e-global-color-astglobalcolor7: #d5dce5; --e-global-color-astglobalcolor8: #08111d; /* Elementor kit 931 (body.efll-sd 0-1-1 beats .elementor-kit-931 0-1-0) */ --e-global-color-primary: #1b304b; --e-global-color-secondary: #2a4467; --e-global-color-text: #33475f; --e-global-color-accent: #d4a72c; --e-global-color-3c64c4e: #d4a72c; --e-global-color-6c8a017: #f7f8fa; --e-global-color-2add998: #f2f4f7; --e-global-color-6f82a85: #0e1a2b; --e-global-color-19ef0ab: #4b5d74; --e-global-color-51e5444: #7f91a8; --e-global-typography-primary-font-family: "Cinzel", Georgia, serif; --e-global-typography-primary-font-weight: 700; --e-global-typography-secondary-font-family: "Cinzel", Georgia, serif; --e-global-typography-text-font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial; --e-global-typography-text-line-height: 1.65em; --e-global-typography-accent-font-family: "Barlow Condensed", "Arial Narrow", Arial; --e-global-typography-accent-font-weight: 600; font-family: var(--efll-sd-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- Typography ------------------------------------------------------------------------------ */ body.efll-sd :is(input, select, textarea):where(:not(#efll-home *, .efll-sd-header *, .efll-sd-footer *)) { font-family: var(--efll-sd-body); } body.efll-sd :is(h1, h2, h3):where(:not(#efll-home *, .efll-sd-header *, .efll-sd-footer *)) { font-family: var(--efll-sd-display); font-weight: 700; overflow-wrap: break-word; /* Cinzel caps run wide; never force sideways scroll on 320px phones */ } body.efll-sd :is(h4, h5, h6):where(:not(#efll-home *, .efll-sd-header *, .efll-sd-footer *)) { font-family: var(--efll-sd-cond); font-weight: 600; letter-spacing: .06em; } body.efll-sd :is(h1, h2, h3, h4, h5, h6):where(:not(#efll-home *, .efll-sd-header *, .efll-sd-footer *)) { color: var(--efll-sd-navy); } /* Line-heights only where Elementor's heading widget has not set its own (it defaults to 1). */ body.efll-sd h1:where(:not(.elementor-heading-title, #efll-home *, .efll-sd-header *, .efll-sd-footer *)) { line-height: 1.15; } body.efll-sd h2:where(:not(.elementor-heading-title, #efll-home *, .efll-sd-header *, .efll-sd-footer *)) { line-height: 1.2; } body.efll-sd h3:where(:not(.elementor-heading-title, #efll-home *, .efll-sd-header *, .efll-sd-footer *)) { line-height: 1.25; } body.efll-sd :is(h4, h5, h6):where(:not(.elementor-heading-title, #efll-home *, .efll-sd-header *, .efll-sd-footer *)) { line-height: 1.3; } /* Only Barlow 400/500/600 are loaded; keep bold on a real weight instead of a synthesized 700. */ body.efll-sd :is(strong, b):where(:not(#efll-home *, .efll-sd-header *, .efll-sd-footer *)) { font-weight: 600; } /* Eyebrow-style meta (Astra blog/archive, breadcrumbs, post nav). */ body.efll-sd :is(.entry-meta, .ast-blog-meta-container, .ast-taxonomy-container, .cat-links, .tags-links, .ast-breadcrumbs, .ast-breadcrumbs-wrapper, .post-navigation) { font-family: var(--efll-sd-cond); letter-spacing: .06em; } body.efll-sd :is(.ast-taxonomy-container, .cat-links) a { text-transform: uppercase; letter-spacing: .14em; } /* ---- Links in running text -------------------------------------------------------------------- * Only class-less links inside text containers of .entry-content (posts + Elementor text editor). * 0-2-2: beats Astra's ".ast-single-post .entry-content a" (0-2-1), loses to Elementor's * per-widget link colour "{{WRAPPER}} a" (0-3-1). E2 boxes keep their own link styles. */ body.efll-sd .entry-content :where(p, li:not([class]), td, dd, figcaption, blockquote) a:where(:not([class])):where(:not(#efll-home *, .efll-sd-header *, .efll-sd-footer *, .efll-take *, .efll-toc *, .efll-cta *, .efll-firm *, .efll-rel *, .efll-byline *, .efll-es *)) { color: var(--efll-sd-navy); text-decoration-line: underline; text-decoration-color: var(--efll-sd-gold); text-decoration-thickness: 2px; text-underline-offset: .22em; } body.efll-sd .entry-content :where(p, li:not([class]), td, dd, figcaption, blockquote) a:where(:not([class])):where(:not(#efll-home *, .efll-sd-header *, .efll-sd-footer *, .efll-take *, .efll-toc *, .efll-cta *, .efll-firm *, .efll-rel *, .efll-byline *, .efll-es *)):is(:hover, :focus-visible) { color: var(--efll-sd-gold-ink); text-decoration-color: var(--efll-sd-gold-ink); } /* Elementor text widgets can sit on dark bands we cannot detect, so their links take the * surrounding text colour (white on dark, slate on light) and rely on the gold underline. */ body.efll-sd .elementor-widget-text-editor :where(p, li:not([class]), td, dd, figcaption, blockquote) a:where(:not([class])), body.efll-sd .elementor-widget-text-editor :where(p, li:not([class]), td, dd, figcaption, blockquote) a:where(:not([class])):is(:hover, :focus-visible) { color: inherit; } body.efll-sd .elementor-widget-text-editor :where(p, li:not([class]), td, dd, figcaption, blockquote) a:where(:not([class])):is(:hover, :focus-visible) { text-decoration-color: var(--efll-sd-gold-hi); text-decoration-thickness: 3px; } body.efll-sd .entry-content :is(ul, ol):where(:not([class])) > li:where(:not(#efll-home *, .efll-take *, .efll-toc *, .efll-cta *, .efll-firm *, .efll-rel *))::marker { color: var(--efll-sd-gold-deep); } /* ---- Buttons (Draft E: gold fill, dark text, Barlow Condensed caps, 2px corners) --------------- * .elementor-button 0-2-1 beats kit ".elementor-kit-931 .elementor-button" (0-2-0) but not a widget's * own colours (0-4-0). Generic submit buttons sit at the kit's own "button" tier (0-1-1). */ body.efll-sd :is(.elementor-button, .ast-button, .wp-block-button__link:where(:not(.is-style-outline > *)), .wp-block-file__button), body.efll-sd :where(button[type="submit"], input[type="submit"]):where(:not(.search-submit, .wp-block-search__button, #efll-home *, .efll-sd-header *, .efll-sd-footer *)) { background-color: var(--efll-sd-gold); border-color: var(--efll-sd-gold); color: var(--efll-sd-night); font-family: var(--efll-sd-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; text-decoration: none; border-radius: 2px; } body.efll-sd :is(.elementor-button, .ast-button, .wp-block-button__link:where(:not(.is-style-outline > *)), .wp-block-file__button):is(:hover, :focus-visible), body.efll-sd :where(button[type="submit"], input[type="submit"]):where(:not(.search-submit, .wp-block-search__button, #efll-home *, .efll-sd-header *, .efll-sd-footer *)):is(:hover, :focus-visible) { background-color: var(--efll-sd-gold-hi); border-color: var(--efll-sd-gold-hi); color: var(--efll-sd-night); } /* Focus ring readable on light and dark bands: navy ring inside a gold halo. */ body.efll-sd :is(.elementor-button, .ast-button, .wp-block-button__link, .wpforms-submit, .efll-btn):where(:not(#efll-home *)):focus-visible { outline: 2px solid var(--efll-sd-navy); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(212, 167, 44, .65); } body.efll-sd .entry-content a:where(:not([class])):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ---- WPForms (modern markup) on light backgrounds --------------------------------------------- * Colours/sizes through WPForms' own CSS variables (set on the container, so they beat the :root * defaults regardless of load order). The homepage .eh-form inside #efll-home is excluded. */ body.efll-sd div.wpforms-container:not(:where(#efll-home *)) { --wpforms-field-border-radius: 2px; --wpforms-field-border-color: #c3ccd8; --wpforms-field-border-color-spare: #c3ccd8; --wpforms-field-background-color: #ffffff; --wpforms-field-text-color: #1b304b; --wpforms-field-menu-color: #ffffff; --wpforms-label-color: #1b304b; --wpforms-label-sublabel-color: #4b5d74; --wpforms-label-error-color: #b42318; --wpforms-button-border-radius: 2px; --wpforms-button-border-style: none; --wpforms-button-background-color: #d4a72c; --wpforms-button-border-color: #d4a72c; --wpforms-button-text-color: #08111d; --wpforms-page-break-color: #d4a72c; --wpforms-field-size-input-height: 46px; --wpforms-field-size-font-size: 16px; --wpforms-label-size-font-size: 14px; --wpforms-label-size-line-height: 20px; --wpforms-label-size-sublabel-font-size: 13px; --wpforms-button-size-font-size: 18px; --wpforms-button-size-height: 50px; --wpforms-button-size-padding-h: 30px; } body.efll-sd div.wpforms-container:not(:where(#efll-home *)) .wpforms-form .wpforms-field-label { font-family: var(--efll-sd-body); font-weight: 600; letter-spacing: .02em; } body.efll-sd div.wpforms-container:not(:where(#efll-home *)) .wpforms-form .wpforms-required-label { color: var(--efll-sd-gold-ink); } body.efll-sd div.wpforms-container:not(:where(#efll-home *)) .wpforms-form :is(input, select, textarea) { font-family: var(--efll-sd-body); } body.efll-sd div.wpforms-container:not(:where(#efll-home *)) .wpforms-form :is(input, select, textarea):focus { border-color: var(--efll-sd-gold-deep); box-shadow: 0 0 0 3px rgba(212, 167, 44, .3); } body.efll-sd div.wpforms-container:not(:where(#efll-home *)) .wpforms-form button.wpforms-submit { background: var(--efll-sd-gold); color: var(--efll-sd-night); font-family: var(--efll-sd-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; border-radius: 2px; } body.efll-sd div.wpforms-container:not(:where(#efll-home *)) .wpforms-form button.wpforms-submit:is(:hover, :active) { background: var(--efll-sd-gold-hi); color: var(--efll-sd-night); } body.efll-sd div.wpforms-container:not(:where(#efll-home *)) .wpforms-confirmation-container-full { background: var(--efll-sd-light); border: 1px solid var(--efll-sd-gold); color: var(--efll-sd-navy); } /* ---- E2 blog-post components: fonts + colours only (each post also carries its own