/* * Pepper Staffing - base layer (loaded after Elementor's frontend CSS, before pepper-tailwind.css) * * 1. Converted content: every Elementor container carrying the class "pp-c" is made "layout neutral" so that the * original Tailwind utility classes on it behave exactly as they did in the React site (Elementor would otherwise * add 10px padding, a 20px gap, column direction, 100% width ...). It works by resetting Elementor's own CSS * variables, so nothing is overridden with !important and Elementor's Style tab still works on top. * 2. Containers WITHOUT "pp-c" (anything the client adds later) keep Elementor's normal behaviour. * 3. Design-system defaults for the normal Elementor widgets (heading / text / button) so new pages match the site. */ /* ---------------------------------------------------------------- 1. neutral containers */ .e-con.e-con.e-con.pp-c { --display: block; --flex-direction: row; --flex-wrap: nowrap; --width: auto; --position: static; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --margin-top: 0px; --margin-right: 0px; --margin-bottom: 0px; --margin-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --text-align: inherit; --min-height: 0px; --container-widget-width: auto; --container-widget-flex-grow: 0; --container-widget-align-self: auto; --content-width: 100%; } /* Elementor gives containers/widgets min-width:0 (they may shrink below their content). The original layout used the browser default (auto), so icons in flex rows kept their size. Specificity (0,2,0) is above Elementor's (0,1,0/0,2,0) and below the utility classes (0,3,0), so min-w-* classes still work. */ .e-con.pp-c, .pp-c > .elementor-widget { min-width: auto; } /* Inline SVG icons (HTML widget) that are direct children of a flex row: in the original the itself was the flex item and could shrink inside a narrow flex row (unless the icon had flex-shrink-0). Let the widget box shrink and keep the SVG inside it. */ .pp-c.flex > .elementor-widget.elementor-widget-html, .pp-c.inline-flex > .elementor-widget.elementor-widget-html { min-width: 0; } .pp-c.flex > .elementor-widget-html > svg, .pp-c.inline-flex > .elementor-widget-html > svg { max-width: 100%; } /* Widgets of converted content: no Elementor spacing / positioning; the element's own utility classes rule. */ .pp-c .elementor-widget, .elementor-widget-pepper_text, .elementor-widget-pepper_image, .elementor-widget-pepper_menu, .elementor-widget-pepper_contact_form { --kit-widget-spacing: 0px; position: static; } /* Elementor wraps every widget in an extra .elementor-widget-container. For the Pepper widgets it is made invisible to layout, so the widget's own box (which carries the original utility classes: flex, items-center, w-16 ...) directly contains the text / image, exactly like the original markup. */ .elementor-widget-pepper_text > .elementor-widget-container, .elementor-widget-pepper_image > .elementor-widget-container, .elementor-widget-pepper_menu > .elementor-widget-container, .elementor-widget-pepper_contact_form > .elementor-widget-container { display: contents; } /* Pepper Image: the fills the widget box, so size / radius / object-fit classes on the widget apply. (The invisible container passes the widget box's radius / object-fit on to the .) */ .elementor-widget-pepper_image > .elementor-widget-container { border-radius: inherit; object-fit: inherit; } .elementor-widget-pepper_image img { display: block; width: 100%; height: 100%; object-fit: inherit; border-radius: inherit; max-width: 100%; } .elementor-widget-pepper_image.w-auto img { width: auto; } /* Header / footer parts must not create a box (the header is position: sticky relative to the page). */ .pp-part, .pp-part > .elementor { display: contents; } /* Inside the Elementor editor the scroll-reveal sections must be visible. */ .elementor-editor-active .opacity-0 { opacity: 1 !important; } .elementor-editor-active .translate-y-8 { transform: none !important; } .elementor-editor-active .hidden[data-pp-slide], @media (max-width: 1023px) { .elementor-editor-active [data-pp-mobile-menu].hidden { display: block !important; } } /* ---------------------------------------------------------------- 3. design system for new content */ body.pepper-site { --e-global-typography-primary-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --e-global-typography-secondary-font-family: var(--e-global-typography-primary-font-family); --e-global-typography-text-font-family: var(--e-global-typography-primary-font-family); --e-global-typography-accent-font-family: var(--e-global-typography-primary-font-family); } .pepper-site .elementor-widget-heading .elementor-heading-title { color: #111827; font-weight: 700; line-height: 1.25; } .pepper-site .elementor-widget-heading h1.elementor-heading-title { font-size: 2.25rem; line-height: 2.5rem; } .pepper-site .elementor-widget-heading h2.elementor-heading-title { font-size: 1.875rem; line-height: 2.25rem; } .pepper-site .elementor-widget-heading h3.elementor-heading-title { font-size: 1.5rem; line-height: 2rem; font-weight: 600; } .pepper-site .elementor-widget-heading h4.elementor-heading-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; } .pepper-site .elementor-widget-heading h5.elementor-heading-title, .pepper-site .elementor-widget-heading h6.elementor-heading-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; } @media (min-width: 768px) { .pepper-site .elementor-widget-heading h1.elementor-heading-title { font-size: 3rem; line-height: 1; } .pepper-site .elementor-widget-heading h2.elementor-heading-title { font-size: 2.25rem; line-height: 2.5rem; } } .pepper-site .elementor-widget-text-editor { color: #4b5563; font-size: 1.125rem; line-height: 1.625; } .pepper-site .elementor-widget-text-editor p { margin: 0 0 1rem; } .pepper-site .elementor-widget-text-editor p:last-child { margin-bottom: 0; } .pepper-site .elementor-widget-button .elementor-button, .pepper-site .elementor-widget-button .elementor-button:visited { background-color: #5ba630; color: #fff; border-radius: 0.5rem; padding: 0.75rem 2rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600; fill: #fff; transition: background-color 0.15s ease; } .pepper-site .elementor-widget-button .elementor-button:hover, .pepper-site .elementor-widget-button .elementor-button:focus { background-color: #4a8c28; color: #fff; } .pepper-site .elementor-widget-icon-box .elementor-icon-box-title { color: #111827; font-weight: 600; } .pepper-site .elementor-widget-icon-box .elementor-icon-box-description { color: #4b5563; } .pepper-site .elementor-icon { color: #5ba630; } /* ---------------------------------------------------------------- blog post body (WordPress editor content) */ .pp-prose p { margin: 0 0 1.25rem; } .pp-prose h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: #111827; margin: 2rem 0 1rem; } .pp-prose h3 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: #111827; margin: 1.75rem 0 0.75rem; } .pp-prose h4 { font-size: 1.25rem; font-weight: 600; color: #111827; margin: 1.5rem 0 0.5rem; } .pp-prose ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1.25rem; } .pp-prose ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1.25rem; } .pp-prose a { color: #5ba630; text-decoration: underline; } .pp-prose a:hover { color: #4a8c28; } .pp-prose img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1.5rem 0; } .pp-prose blockquote { border-left: 4px solid #5ba630; padding-left: 1rem; font-style: italic; margin: 1.5rem 0; }