/* * WTS exact-fidelity utilities. * * These carry ONLY values from the approved HTML references that Elementor's * own controls cannot express: * - fluid clamp() spacing/type (Elementor responsive controls are stepped) * - repeat(auto-fit, minmax(min(Xpx,100%),1fr)) grids (Elementor takes a * fixed column count per breakpoint) * - 3-stop linear gradients and positioned radial overlays (Elementor's * gradient controls allow 2 stops and preset positions only) * - max-width caps on text blocks (no Elementor control) * - a few hover transitions Elementor has no control for * Everything else is set with native Elementor container/widget controls. * Each class is applied through Elementor's own "CSS Classes" field, so it * stays visible and editable in the editor. */ /* ---- reference base reset: the HTML sets h1,h2,h3,p { margin: 0 } ---- */ [data-elementor-type="wp-page"] .elementor-heading-title, [data-elementor-type="header"] .elementor-heading-title, [data-elementor-type="footer"] .elementor-heading-title { margin: 0; } [data-elementor-type="wp-page"] .elementor-widget-text-editor p:last-child, [data-elementor-type="footer"] .elementor-widget-text-editor p:last-child { margin-bottom: 0; } [data-elementor-type="wp-page"] .elementor-widget-text-editor p, [data-elementor-type="footer"] .elementor-widget-text-editor p { margin-top: 0; } /* ---- fluid layout rhythm ---- */ .wts-pad-x { padding-left: clamp(1.25rem, 4vw, 3rem) !important; padding-right: clamp(1.25rem, 4vw, 3rem) !important; } .wts-sec { padding-top: clamp(4.5rem, 7vw, 6.5rem) !important; padding-bottom: clamp(4.5rem, 7vw, 6.5rem) !important; } .wts-sec-sm { padding-top: clamp(4rem, 7vw, 6rem) !important; padding-bottom: clamp(4rem, 7vw, 6rem) !important; } .wts-sec-cta{ padding-top: clamp(3.5rem, 6vw, 5rem) !important; padding-bottom: clamp(3.5rem, 6vw, 5rem) !important; } .wts-pt0 { padding-top: 0 !important; } .wts-hero-pad { padding-top: clamp(3.5rem, 8vw, 6.5rem) !important; padding-bottom: clamp(5rem, 8vw, 7rem) !important; } .wts-subhero-pad { padding-top: clamp(2.5rem, 5vw, 3.5rem) !important; padding-bottom: clamp(3rem, 6vw, 4rem) !important; } .wts-subhero-pad-sm { padding-top: clamp(2.5rem, 5vw, 3.5rem) !important; padding-bottom: clamp(2.5rem, 5vw, 3.5rem) !important; } .wts-stats-pad { padding-top: clamp(2rem, 4vw, 2.6rem) !important; padding-bottom: clamp(2rem, 4vw, 2.6rem) !important; } .wts-contact-pad { padding-top: clamp(3.5rem, 6vw, 5rem) !important; padding-bottom: clamp(4.5rem, 7vw, 6.5rem) !important; } .wts-footer-pt { padding-top: clamp(3.5rem, 6vw, 5rem) !important; } .wts-footer-pb { padding-bottom: clamp(3rem, 5vw, 4rem) !important; } .wts-card-pad { padding: clamp(2.2rem, 4vw, 3rem) !important; } .wts-card-pad-sm { padding: clamp(2rem, 4vw, 2.75rem) !important; } /* ---- fluid type (targets the heading element, not the wrapper) ---- */ .wts-h1 .elementor-heading-title { font-size: clamp(2.3rem, 4.3vw, 3.5rem) !important; } .wts-h1-sub .elementor-heading-title { font-size: clamp(2.1rem, 4vw, 3.1rem) !important; } .wts-h2 .elementor-heading-title { font-size: clamp(1.9rem, 3vw, 2.6rem) !important; } .wts-h2-cta .elementor-heading-title { font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important; } /* ---- max-width caps (rem values from the references) ---- * !important is required: Elementor sizes widgets inside a container with a * two-class selector, which outranks a single class, so without it every cap * was ignored and headings ran the full container width and wrapped wrongly. */ .wts-maxw-272 { max-width: 272px !important; } /* 17rem */ .wts-maxw-352 { max-width: 352px !important; } /* 22rem */ .wts-maxw-480 { max-width: 480px !important; } /* 30rem */ .wts-maxw-512 { max-width: 512px !important; } /* 32rem */ .wts-maxw-528 { max-width: 528px !important; } /* 33rem */ .wts-maxw-544 { max-width: 544px !important; } /* 34rem */ .wts-maxw-576 { max-width: 576px !important; } /* 36rem */ .wts-maxw-640 { max-width: 640px !important; } /* 40rem */ .wts-maxw-672 { max-width: 672px !important; } /* 42rem */ /* ---- auto-fit grids: exact reference behaviour at every viewport ---- * A boxed container grids its .e-con-inner; a FULL container has no inner and * is the grid itself, so every rule needs both selectors. Without the * .e-con-full half, Elementor's stepped tablet/mobile column counts took over * on full-width containers and disagreed with the reference (the reference has * a single 760px breakpoint and otherwise relies on auto-fit). */ .wts-af-420 > .e-con-inner, .wts-af-420.e-con-full { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)) !important; } .wts-af-380 > .e-con-inner, .wts-af-380.e-con-full { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)) !important; } .wts-af-290 > .e-con-inner, .wts-af-290.e-con-full { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)) !important; } .wts-af-280 > .e-con-inner, .wts-af-280.e-con-full { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; } .wts-af-260 > .e-con-inner, .wts-af-260.e-con-full { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important; } .wts-af-220 > .e-con-inner, .wts-af-220.e-con-full { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important; } .wts-af-210 > .e-con-inner, .wts-af-210.e-con-full { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important; } .wts-af-190 > .e-con-inner, .wts-af-190.e-con-full { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important; } .wts-gap-split > .e-con-inner, .wts-gap-split.e-con-full { gap: clamp(2.5rem, 5vw, 4rem) !important; } /* ---- backgrounds the gradient control cannot express ---- */ .wts-hero-bg { background: linear-gradient(170deg, #0A1626 0%, #101F33 55%, #182C44 100%) !important; position: relative; overflow: hidden; } .wts-subhero-bg { background: linear-gradient(170deg, #0A1626 0%, #101F33 60%, #182C44 100%) !important; position: relative; overflow: hidden; } .wts-hero-bg::before, .wts-subhero-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 86% 10%, rgba(192,146,75,.16), transparent 42%); } .wts-subhero-bg::before { background-image: radial-gradient(circle at 86% 10%, rgba(192,146,75,.14), transparent 42%); } .wts-hero-bg > .e-con-inner, .wts-subhero-bg > .e-con-inner { position: relative; z-index: 1; } .wts-cta-bg { background: linear-gradient(135deg, #101F33, #0A1626) !important; } /* ---- divider-grid cards: 1px gap over the line colour ---- */ .wts-divider-grid { border: 1px solid #E2DCCE; } .wts-divider-grid > .e-con-inner, .wts-divider-grid.e-con-full { gap: 1px !important; background: #E2DCCE; } /* ---- stat items ---- */ .wts-stat { padding-left: 1.75rem !important; padding-right: 1.75rem !important; border-left: 1px solid rgba(244,240,230,.14); } .wts-stat:first-child { border-left: none; padding-left: 0 !important; } /* ---- flex helpers ---- */ .wts-flex1 { flex: 1 1 auto !important; } .wts-noshrink { flex-shrink: 0 !important; } /* A nested full-width container is width:100% by default, which makes it claim * a whole flex row. This sizes it to its content instead, so it sits beside its * siblings as it does in the references. */ .wts-wauto { width: auto !important; } /* The references wrap each illustration in a plain block; an Elementor * container is always flex or grid, and an aspect-ratio box's height does not * propagate out through a flex column - below 768px the widget holding a * figure collapsed to ~3px while the figure's own box stayed ~413px. Refusing * to shrink these widgets keeps the figure's height in the layout. */ .e-con.e-flex > .elementor-widget-html, .elementor-widget-html { flex-shrink: 0 !important; } /* The figure's height comes from width:100% + aspect-ratio. Inside a flex * container that height is not counted when the parent's intrinsic height is * computed, so the wrapper collapsed to the figure's 2px border below 768px. * The references wrap these in a plain block, so do the same here. */ .wts-figbox, .wts-hero-fig-wrap { display: block !important; } /* Below the mobile breakpoint these groups take their own row, as they do in * the references. Holding them at content width overflowed a 320px viewport. */ @media (max-width: 767px) { .wts-wauto { width: 100% !important; flex-shrink: 1 !important; } } .wts-mt-auto { margin-top: auto !important; } .wts-clip { overflow: hidden; } /* ---- card + button hover motion ---- */ .wts-card { transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .35s ease; } .wts-card:hover { transform: translateY(-6px); border-color: #8C6A36 !important; box-shadow: 0 24px 44px rgba(10,22,38,.14); } .wts-quote-card { box-shadow: 0 24px 60px rgba(10,22,38,.08); border-top: 3px solid #C0924B !important; } .wts-card .wts-lede .elementor-heading-title { transition: letter-spacing .25s ease; } /* ---- service-card icon tile ---- */ .wts-icon-tile { width: 2.9rem; height: 2.9rem; display: flex; align-items: center; justify-content: center; background: #0A1626; color: #C0924B; } /* ---- "Learn more" lede ---- */ .wts-lede .elementor-heading-title { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } /* ---- pills ---- */ .wts-pill { width: auto !important; flex: 0 0 auto; } .wts-pill .elementor-heading-title { display: inline-block; background: #EFEAE0; border: 1px solid #E2DCCE; padding: .42rem .95rem; } .wts-pill-row > .e-con-inner, .wts-pill-row.e-con-full { align-items: flex-start; } /* ---- illustration frames: keep the reference aspect ratios ---- */ .wts-fig { position: relative; width: 100%; overflow: hidden; border: 1px solid rgba(244,240,230,.14); } .wts-fig > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .wts-fig-4x5 { aspect-ratio: 4 / 5; background: linear-gradient(155deg, #182C44, #0A1626 65%, #000); } .wts-fig-1x1 { aspect-ratio: 1 / 1; background: linear-gradient(155deg, #101F33, #0A1626 65%, #000); } .wts-fig-4x3 { aspect-ratio: 4 / 3; background: linear-gradient(155deg, #101F33, #0A1626 65%, #000); } .wts-fig-16x10 { aspect-ratio: 16 / 10; background: linear-gradient(155deg, #182C44, #0A1626 70%, #000); } .wts-fig-hatch::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(244,240,230,.035) 0 2px, transparent 2px 26px); } .wts-fig-glow::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 70% 30%, rgba(192,146,75,.14), transparent 50%); } .wts-ph-label { position: absolute; left: 1.2rem; bottom: 1.1rem; right: 1.2rem; font-family: 'Inter', sans-serif; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(244,240,230,.4); z-index: 2; } .wts-fig-shadow { box-shadow: 0 20px 48px rgba(10,22,38,.28); } /* hero stat badge, offset outside the illustration */ .wts-hero-fig-wrap > .e-con-inner, .wts-hero-fig-wrap.e-con-full { position: relative; padding-left: 1.25rem; padding-bottom: 1.25rem; } .wts-hero-badge { position: absolute !important; left: -0.75rem; bottom: -0.75rem; max-width: 12.5rem; box-shadow: 0 18px 40px rgba(0,0,0,.35); z-index: 3; width: auto !important; } /* ---- header ---- */ .wts-sticky { position: sticky !important; top: 0; z-index: 40; backdrop-filter: blur(10px); } .wts-header .elementor-nav-menu .elementor-item { padding-left: 0 !important; padding-right: 0 !important; } .wts-lang { display: flex; align-items: center; gap: .4rem; font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 600; } /* The theme styles bare