/** * Zededa Container Background Styles * * Applied via Elementor's prefix_class on .e-con elements. * Classes are added automatically when user selects a style * from the "Zededa Style" dropdown in the Container's Style tab. * * Styles: * .zededa-bg-white - White background * .zededa-bg-cream - Cream background (#FFF7F0) * .zededa-bg-cream-pattern - Cream background with geometric pattern * .zededa-bg-blue - Dark blue/teal background with white text * .zededa-bg-blue-light - Light blue/teal background (#245868) with white text */ /* ========================================================================== Container Spacing (enforced from Figma page comps) Content max-width: 1280px, vertical padding: --spacing-4xl (64px) ========================================================================== */ :root { --container-content-max-width: 1280px; --container-padding-block: var(--spacing-4xl); --container-padding-inline-min: 56px; } /* Shared spacing — all Zededa container variants AND containers that hold a full-width Zededa widget (image-text). This ensures consistent padding even when the editor doesn't apply a zededa-bg-* class. */ .zededa-bg-white, .zededa-bg-cream, .zededa-bg-cream-pattern, .zededa-bg-blue, .zededa-bg-blue-light, .e-con:has(.elementor-widget-zededa_image_text) { /* Ensure the section itself is always full viewport width, regardless of any Elementor container width setting (--width, --container-max-width). Content width is constrained by the inline padding below, not by limiting the element width itself. */ max-width: 100% !important; width: 100% !important; padding-top: var(--container-padding-block) !important; padding-bottom: var(--container-padding-block) !important; padding-left: max(var(--container-padding-inline-min), calc(( 100% - var(--container-content-max-width) ) / 2)) !important; padding-right: max(var(--container-padding-inline-min), calc(( 100% - var(--container-content-max-width) ) / 2)) !important; box-sizing: border-box !important; } /* ========================================================================== Single Author Page Fixes The Elementor Theme Builder template (3695) has two issues: 1. The profile section (1dfd52d) uses flex-direction: row with child containers at 28% and 80% width. The shared zededa-bg-* rule above forces width: 100% !important on those children, breaking the layout. 2. Consecutive cream sections stack 64px + 64px = 128px of dead space. Fix: restore Elementor's --width on direct children of top-level sections, and collapse padding between same-background sections. ========================================================================== */ /* Profile row children — restore Elementor flex widths + remove nested padding. Only matches containers that are direct children of a top-level section's e-con-inner, so loop template cards deeper in the DOM are not affected. */ .single-zededa-authors .elementor-location-single > .e-con.e-parent > .e-con-inner > [class*="zededa-bg-"].e-con { width: var(--width, 100%) !important; max-width: none !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Collapse padding between consecutive same-background sections. */ .single-zededa-authors .elementor-location-single > [class*="zededa-bg-"].e-con.e-parent + [class*="zededa-bg-"].e-con.e-parent { padding-top: 0 !important; } /* Last content section: remove the white-gap margin but ensure cream-colored padding remains so content doesn't sit flush against the footer. */ .single-zededa-authors .elementor-location-single > .e-con.e-parent:last-child { margin-bottom: 0 !important; padding-bottom: var(--container-padding-block) !important; } /* Containers with image-text widgets sit flush — no white lines between different-colored sections. Spacing comes from the enforced padding above. */ .e-con:has(.elementor-widget-zededa_image_text) { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* Elementor adds its own default padding to .e-con-inner. Zero it out so the padding we set on .e-con above is the only padding in play. */ .e-con:has(.elementor-widget-zededa_image_text) > .e-con-inner { padding: 0 !important; } /* Footer widget manages its own padding — remove container spacing */ .zededa-bg-white:has(.elementor-widget-zededa_footer), .zededa-bg-cream:has(.elementor-widget-zededa_footer), .zededa-bg-cream-pattern:has(.elementor-widget-zededa_footer), .zededa-bg-blue:has(.elementor-widget-zededa_footer), .zededa-bg-blue-light:has(.elementor-widget-zededa_footer) { padding: 0 !important; } /* Logo ticker needs edge-to-edge scrolling — remove inline padding */ .zededa-bg-white:has(.elementor-widget-zededa_logo_ticker), .zededa-bg-cream:has(.elementor-widget-zededa_logo_ticker), .zededa-bg-cream-pattern:has(.elementor-widget-zededa_logo_ticker), .zededa-bg-blue:has(.elementor-widget-zededa_logo_ticker), .zededa-bg-blue-light:has(.elementor-widget-zededa_logo_ticker) { padding-left: 0 !important; padding-right: 0 !important; } /* ========================================================================== Inter-Component Vertical Spacing Standard --spacing-4xl gap between Zededa widgets and adjacent components. Elementor containers use flexbox, so margins do NOT collapse. We need: 1. margin-block-start when :not(:first-child) — gap from above 2. margin-block-end when :not(:last-child) — gap below 3. A reset when two Zededa widgets are consecutive, to prevent the gap doubling (64 + 64 = 128). The preceding widget's bottom margin provides the gap, so the following widget's top margin is zeroed. Selector uses .e-con .elementor-widget.elementor-widget-zededa_{name} to match Elementor's specificity and override its margin-block-end: 0 reset. ========================================================================== */ /* Top margin — gap from preceding component */ .e-con .elementor-widget.elementor-widget-zededa_image_text:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_logo_grid:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_logo_ticker:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_feature_cards:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_team_gallery:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_profile_cards:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_resource_cards:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_resource_browser:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_tab_showcase:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_blog_hero:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_blog_content:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_blog_author:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_blog_related:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_career_board:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_partner_matrix:not(:first-child), .e-con .elementor-widget.elementor-widget-zededa_stats_highlight:not(:first-child) { margin-block-start: var(--spacing-4xl); } /* Bottom margin — gap before following component */ .e-con .elementor-widget.elementor-widget-zededa_image_text:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_logo_grid:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_logo_ticker:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_feature_cards:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_team_gallery:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_profile_cards:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_resource_cards:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_resource_browser:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_tab_showcase:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_blog_hero:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_blog_content:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_blog_author:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_blog_related:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_career_board:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_partner_matrix:not(:last-child), .e-con .elementor-widget.elementor-widget-zededa_stats_highlight:not(:last-child) { margin-block-end: var(--spacing-4xl); } /* Collapse: when a Zededa widget follows another Zededa widget, zero the second widget's top margin so only the first widget's bottom margin counts. */ .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_image_text, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_logo_grid, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_logo_ticker, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_feature_cards, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_team_gallery, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_profile_cards, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_resource_cards, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_resource_browser, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_tab_showcase, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_blog_hero, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_blog_content, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_blog_author, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_blog_related, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_career_board, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_partner_matrix, .e-con [class*="widget-zededa_"] + .elementor-widget.elementor-widget-zededa_stats_highlight { margin-block-start: 0; } /* Mobile (Elementor default breakpoint) */ @media (max-width: 767px) { :root { --container-padding-block: var(--spacing-3xl); --container-padding-inline-min: 16px; } } /* ========================================================================== White Background ========================================================================== */ .zededa-bg-white { background-color: var(--color-neutral-white) !important; } /* ========================================================================== Cream Background ========================================================================== */ .zededa-bg-cream { background-color: var(--color-container-cream) !important; } /* ========================================================================== Cream Background + Geometric Pattern ========================================================================== */ .zededa-bg-cream-pattern { background-color: var(--color-container-cream) !important; position: relative; overflow: hidden; } .zededa-bg-cream-pattern::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; /* Natural height from image aspect ratio (1829x1177), clamped to container */ aspect-ratio: 1829/1177; max-height: 100%; background-image: url("https://cdn-ilelfdk.nitrocdn.com/BxDXdPwedPTCjMGVNGsyeQweRmtmoNUk/assets/images/optimized/rev-544013f/zededa.com/wp-content/themes/Zededa/assets/images/footer-z-pattern.png"); background-position: top center; background-repeat: no-repeat; background-size: 100% auto; pointer-events: none; z-index: 0; } /* Ensure container content sits above the pattern */ .zededa-bg-cream-pattern > * { position: relative; z-index: 1; } /* ========================================================================== Blue (Dark) Background ========================================================================== */ .zededa-bg-blue { background-color: var(--color-container-blue) !important; } /* White text for all common elements inside blue containers */ .zededa-bg-blue, .zededa-bg-blue h1, .zededa-bg-blue h2, .zededa-bg-blue h3, .zededa-bg-blue h4, .zededa-bg-blue h5, .zededa-bg-blue h6, .zededa-bg-blue p, .zededa-bg-blue span, .zededa-bg-blue li, .zededa-bg-blue label, .zededa-bg-blue blockquote, .zededa-bg-blue .elementor-heading-title, .zededa-bg-blue .elementor-widget-text-editor { color: var(--color-neutral-white) !important; } /* Links inside blue containers - white with underline on hover */ .zededa-bg-blue a { color: var(--color-neutral-white) !important; } .zededa-bg-blue a:hover { opacity: .85; } /* CTA buttons keep their own dark text on aqua/white background, even inside blue containers. Must override the blanket white link/span rules above. */ .zededa-bg-blue .zededa-image-text__cta--button, .zededa-bg-blue .zededa-cta--primary, .zededa-bg-blue .zededa-cta--primary:visited, .zededa-bg-blue .zededa-cta--primary .zededa-cta__arrow, .zededa-bg-blue .zededa-cta--secondary, .zededa-bg-blue .zededa-cta--secondary:visited, .zededa-bg-blue .zededa-cta--secondary .zededa-cta__arrow { color: var(--color-container-blue) !important; } /* Card quote marks stay sunrise gold on blue backgrounds */ .zededa-bg-blue .zededa-card__quote { color: var(--color-brand-sunrise) !important; } /* Card CTA links stay aqua on blue backgrounds */ .zededa-bg-blue .zededa-card__cta { color: var(--color-navigation-cta-background) !important; } .zededa-bg-blue .zededa-hero-cta--primary { color: var(--color-navigation-background) !important; } /* List items inside blue containers get card-blue background for visibility. The default rgba(19,56,68,0.2) is invisible against the blue container. */ .zededa-bg-blue .zededa-image-text__body--paragraph li { background-color: var(--color-container-card-blue); } /* ========================================================================== Blue (Light) Background Uses the medium teal (#245868) as the container background. Cards and other light-blue-background components swap to dark blue (#133844) so they remain visually distinct from the container. ========================================================================== */ .zededa-bg-blue-light { background-color: var(--color-container-card-blue) !important; } /* White text for all common elements inside light-blue containers */ .zededa-bg-blue-light, .zededa-bg-blue-light h1, .zededa-bg-blue-light h2, .zededa-bg-blue-light h3, .zededa-bg-blue-light h4, .zededa-bg-blue-light h5, .zededa-bg-blue-light h6, .zededa-bg-blue-light p, .zededa-bg-blue-light span, .zededa-bg-blue-light li, .zededa-bg-blue-light label, .zededa-bg-blue-light blockquote, .zededa-bg-blue-light .elementor-heading-title, .zededa-bg-blue-light .elementor-widget-text-editor { color: var(--color-neutral-white) !important; } /* Links inside light-blue containers - white with opacity on hover */ .zededa-bg-blue-light a { color: var(--color-neutral-white) !important; } .zededa-bg-blue-light a:hover { opacity: .85; } /* CTA buttons keep their own dark text on aqua/white background */ .zededa-bg-blue-light .zededa-image-text__cta--button, .zededa-bg-blue-light .zededa-cta--primary, .zededa-bg-blue-light .zededa-cta--primary:visited, .zededa-bg-blue-light .zededa-cta--primary .zededa-cta__arrow, .zededa-bg-blue-light .zededa-cta--secondary, .zededa-bg-blue-light .zededa-cta--secondary:visited, .zededa-bg-blue-light .zededa-cta--secondary .zededa-cta__arrow { color: var(--color-container-blue) !important; } /* Card quote marks stay sunrise gold on light-blue backgrounds */ .zededa-bg-blue-light .zededa-card__quote { color: var(--color-brand-sunrise) !important; } /* Card CTA links stay aqua on light-blue backgrounds */ .zededa-bg-blue-light .zededa-card__cta { color: var(--color-navigation-cta-background) !important; } .zededa-bg-blue-light .zededa-hero-cta--primary { color: var(--color-navigation-background) !important; } /* List items inside light-blue containers get dark-blue background for visibility */ .zededa-bg-blue-light .zededa-image-text__body--paragraph li { background-color: var(--color-container-blue); } /* ========================================================================== Elementor Heading Widget — H2 Typography (Figma spec) Applies the design system H2 style to all Elementor Heading widgets set to H2 tag. Individual widget instances can override via Elementor controls. ========================================================================== */ .elementor-widget-heading h2.elementor-heading-title, .elementor-widget-heading h2 { font-family: "Plus Jakarta Sans", var(--typography-font-family-heading); font-size: clamp(24px, calc(1.5vw + 21px), 40px); font-weight: 700; line-height: 1.14; letter-spacing: -.8px; text-wrap: balance; } /* Prevent orphan words on all heading levels */ .elementor-widget-heading .elementor-heading-title { text-wrap: balance; } /* Centered heading widgets — constrain line length for readability. Elementor's heading align control generates a