:root {
--navy: #061e4a;
--navy-800: #12336a;
--ink: #24334d;
--red: #f7192d;
--orange: #ff7919;
--yellow: #ffc323;
--surface: #f6f8fd;
--brand-tint: #e9eff9;
--white: #ffffff;
--line: #d8e1f0;
--container: 1344px;
--shadow: 0 24px 58px rgba(6, 30, 74, 0.15);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/*
* Every Container element we build gets Elementor's own `.e-con` class, which ships a DEFAULT
* 10px padding on all 4 sides (via --padding-top/right/bottom/left custom properties consumed as
* logical padding-inline/block properties in Elementor's frontend.css) unless a `padding` setting
* is explicitly configured in the editor — which we never do, since every dimension here comes
* from these reused classes instead. That silently shrank/offset content in every container that
* doesn't have its own explicit padding rule below (hero, button-row, style-card, benefits-grid,
* etc). Reset it once, early, so specific selectors further down still override it normally.
*
* Elementor containers also default to a 20px flex `gap`. That IS reset globally, but only in
* the mockup-parity layer further down — it has to be paired with restoring the per-element
* margins the theme was suppressing, otherwise the spacing those gaps were standing in for
* collapses. See section (a)/(d) of that layer; don't zero the gap without the margins.
*/
.e-con { padding: 0; }
body {
margin: 0;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
/*
* The rule above targets the mockup's own hand-drawn outline icons (stroke-based, no fill).
* Font Awesome icons rendered by Elementor's native Icon widget (`.e-font-icon-svg`) are solid
* FILLED glyphs, not outlines — inheriting fill:none from the rule above makes them invisible or
* wrongly stroke-rendered, and their own color otherwise fell back to Elementor's default grey.
*/
.e-font-icon-svg {
fill: currentColor;
stroke: none;
}
p { margin-top: 0; }
h3, h4 { margin-top: 0; }
/*
* The theme ships two global overrides that both load AFTER this file and both use bare tag
* selectors (body, h1..h6, button, .button, ...) at the same specificity as the equivalent rules
* above, so on a load-order tie the theme wins — one of them (dynamic.css) isn't even !important,
* yet still wins, because our un-bumped rules weren't !important either. The other
* (style-font-weight-500.css) IS !important, so beating it needs both !important AND higher
* specificity, not just one or the other. Every rule below is deliberately restated at
* `html body ...` specificity for that reason — this block is the fix, not a duplicate.
*/
html body,
html body button,
html body input {
font-family: "Manrope", Arial, sans-serif !important;
}
/*
* Same collision, plain `body{...}`: the theme's own body rule (color:#333, no background) was
* winning on the same load-order tie, so navy text + the light surface background were silently
* falling back to the theme's defaults everywhere nothing more specific set its own color —
* every heading without its own color rule (H1, H3s, H4s, section headings) rendered dark grey
* instead of navy, and body's background was fully transparent instead of --surface.
*
* The theme also has an admin-configured base font size (`html, body{font-size:14.5px}` in both
* style.css and dynamic.css) — a deliberate site-wide setting, not a bug, so it's only reset
* here rather than removed at the source. Every rem-based size in this whole design (body text,
* eyebrows, button/team-name labels, h1/h2's rem-based clamp() bounds, etc) was quietly
* computing ~10% smaller than intended off that 14.5px root instead of the standard 16px this
* design was built against. Safe to hard-set here since fp-home.css only loads on the front page
* (is_front_page()), so this never touches shop/other pages that may want the theme's own scale.
*
* The theme's rule is `html, body{font-size:14.5px}` — two independent selectors, not a
* descendant chain — so it sets the element's OWN font-size directly. `html body` below
* only ever matches (every body is a descendant of html), so on its own it never touches
* rem sizing at all; has to be reset separately for rem units (h1/h2/h3 clamp() bounds,
* etc) to actually recompute against 16px instead of 14.5px.
*/
html {
font-size: 16px !important;
}
html body {
background: var(--surface) !important;
color: var(--navy) !important;
font-size: 16px !important;
line-height: 1.55 !important;
}
html body h1,
html body h2 {
font-family: "Barlow Condensed", "Arial Narrow", sans-serif !important;
font-style: italic !important;
font-weight: 800 !important;
/*
* Discovered by diffing against the original mockup file directly: the theme's style.css also
* ships its OWN plain `h1{font-size:...}`/`h2{...}` rules (no !important), loaded AFTER this
* file, so on the specificity tie our un-bumped font-size/line-height/margin/letter-spacing
* were silently losing too — not just family/style/weight. Same fix, same reason.
*/
margin-top: 0 !important;
margin-bottom: 20px !important;
letter-spacing: -0.025em !important;
}
html body h1 { font-size: clamp(4.25rem, 5.25vw, 5.75rem) !important; line-height: 0.91 !important; }
html body h2 { font-size: clamp(3.2rem, 4.4vw, 4.8rem) !important; line-height: 0.94 !important; }
/* h3/h4 that don't already declare their own family (theme's own h1..h6 rule is a *direct* match
on these tags, not inheritance, so `html body {font-family:Manrope}` above cannot reach them —
inheritance always loses to any direct rule, important or not). */
html body h3,
html body h4 {
font-family: "Manrope", Arial, sans-serif !important;
font-style: normal !important;
}
html body .button {
font-weight: 800 !important;
}
/* ==========================================================================
Mockup-parity layer — added after diffing every section of the live page
against homepage (2).html at 1280px. Each block below fixes a class of
mismatch whose root cause is the Elementor wrapper or an elessi-theme rule
out-specifying ours, NOT a difference in the design itself.
========================================================================== */
/* (a) Elementor gives every Container `display:flex` + a 20px gap. The mockup is
margin-driven with no gaps, so the phantom gap was inflating section heights
(benefits +42px, collections +134px) and shrinking every grid track
(trust-strip 300->285px). Zero it here; the ~19 containers that genuinely do
want a gap re-declare their own further down and win on load order. */
.e-con { gap: 0; }
/* (b) Containers the mockup renders as plain blocks. Left as flex they turn their
children into flex items, which is why `.closing-desc` shrank to its text
width (639px) instead of honouring its own max-width:700px + auto margins. */
.hero, .hero-copy, .hero-products, .speed-ribbons, .product-card,
.collections-section, .conference-panel, .division,
.styles-section, .section-heading, .style-image,
.customize-section, .benefits-section, .benefits-grid article,
.faq-section, .closing-section, .closing-inner, .container { display: block; }
/* (c) Typography. dynamic.css styles `p` directly (Jost, line-height 1.6) and
style-font-weight-500.css forces weight 500 on h1..h6 through a very long
selector list that out-specifies `html body h1`. Restating at `.elementor`
scope clears both without needing !important for the inherited properties. */
html body .elementor p { font-family: "Manrope", Arial, sans-serif; line-height: 1.55; }
html body .elementor span,
html body .elementor small,
html body .elementor strong,
html body .elementor li,
html body .elementor details,
html body .elementor summary { line-height: 1.55; }
/* Elementor's own `.elementor-heading-title{line-height:1}` is what flattened the
h3/h4 blocks (43px tall instead of 67px). */
html body .elementor h3,
html body .elementor h4 { line-height: 1.55; }
html body .elementor h1.elementor-heading-title { font-weight: 800 !important; line-height: .91; }
html body .elementor h2.elementor-heading-title { font-weight: 800 !important; line-height: .94; }
/* (d) Every
here is the only child of its widget wrapper, so the theme's
`p:last-child{margin-bottom:0}` (0,1,1) was killing the spacing our single
class selectors set. Restate the mockup's margins above that specificity. */
html body .elementor p.eyebrow { margin-bottom: 8px; }
html body .elementor p.hero-lead { margin-bottom: 26px; line-height: 1.65; }
html body .elementor .collections-lead { margin-bottom: 9px; }
html body .elementor .conference-title p { margin-bottom: 2px; }
html body .elementor p.style-label { margin-bottom: 6px; }
html body .elementor .style-copy p:not(.style-label) { margin-bottom: 16px; }
html body .elementor .customize-desc { margin-bottom: 25px; }
html body .elementor .faq-desc { margin-bottom: 16px; }
html body .elementor .closing-desc { margin-bottom: 25px; }
/* (e) Restate the two display-type line-heights that (c) would otherwise flatten. */
html body .elementor .number-card strong { line-height: .9; }
/* (f) Elementor's button base is font-size:15px / line-height:1 — the mockup's
buttons are 16px/1.55, which is why every button rendered ~22px narrower. */
.elementor-widget-button.button a.elementor-button { font-size: 1rem; line-height: 1.55; }
/* (g) The theme resets away from the browser's 0.8333em default. */
html body .elementor .number-card small { font-size: .8333em; }
/* (h) Mirrors the mockup's `a { color: inherit }`. Kept un-!important so the
genuinely coloured links (.conference-title a, .team-link, buttons) still win
on their own higher specificity. */
html body .elementor a { color: inherit; }
/* (i) Text-Editor widgets holding bare text (no