/* ============================================================ ELYNTIS GLOBAL — design system A faithful port of the reference stylesheet onto Elementor's DOM. Styling lives here (clamp/:hover/::before/transforms cannot be expressed through free Elementor's panel); Elementor owns structure + content. ============================================================ */ :root{ --ely-ink:#0A1826; --ely-ink-2:#12293D; --ely-ink-3:#1D3B54; --ely-paper:#F3F5F4; --ely-white:#FFFFFF; --ely-steel:#6E8494; --ely-steel-2:#93A5B1; --ely-teal:#0E6B60; --ely-teal-lt:#1C9184; --ely-signal:#F5C243; --ely-line:rgba(10,24,38,.13); --ely-line-dk:rgba(255,255,255,.14); --ely-f-display:"Archivo","Helvetica Neue",Arial,sans-serif; --ely-f-body:"Public Sans","Helvetica Neue",Arial,sans-serif; --ely-f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; --ely-gut:clamp(20px,4vw,48px); --ely-sect:clamp(64px,8vw,112px); --ely-r:3px; --ely-shadow:0 1px 2px rgba(10,24,38,.05),0 12px 32px -12px rgba(10,24,38,.18); --ely-shadow-lg:0 24px 60px -20px rgba(10,24,38,.35); } /* ---------- reveal on scroll ---------- Hiding is gated on .ely-js, added by a tiny inline script. If reveal.js ever fails to load (404, cache, blocked), nothing is hidden and the page degrades to fully visible rather than rendering blank. The entrance uses the INDEPENDENT `translate` property, not `transform`. Many cards carry both .ely-rv and a :hover lift (transform:translateY). If the reveal used transform, its revealed state `.ely-js .ely-rv.in{opacity:1;translate:0 0;}` (specificity 0,3,0) would outrank `.ely-card:hover`/`.ely-quote:hover` (0,2,0) and cancel the hover lift on the live page — while still working in the editor, where .ely-js is absent. Using `translate` for the reveal and `transform` for hover keeps them on separate properties so they compose instead of collide. The transition list must ALSO carry transform + box-shadow (the hover props): because `.ely-js .ely-rv` outranks `.ely-quote`/`.ely-card`, it replaces their transition entirely, so any hover property omitted here would snap instantly. */ .ely-js .ely-rv{opacity:0;translate:0 18px; transition:opacity .6s cubic-bezier(.2,.7,.3,1),translate .6s cubic-bezier(.2,.7,.3,1), transform .22s ease,box-shadow .22s ease,background .22s ease;} .ely-js .ely-rv.in{opacity:1;translate:0 0;} /* company name color */ .ely-elyntis{color:#000208;} .ely-global{color:#3284cf;} /* ---------- sections ---------- */ .ely-sect{padding-top:var(--ely-sect) !important;padding-bottom:var(--ely-sect) !important;} .ely-sect--tight{padding-top:clamp(48px,5vw,72px) !important;padding-bottom:clamp(48px,5vw,72px) !important;} .ely-sect--tint{background:#FBFCFB !important;border-top:1px solid var(--ely-line);border-bottom:1px solid var(--ely-line);} .ely-sect, .ely-sect--tight{padding-left:var(--ely-gut) !important;padding-right:var(--ely-gut) !important;} /* ---------- typography ---------- */ /* Headings size to their container by default. In the reference, max-width is applied to headings ONLY in two contexts — .banner h1 (16ch) and .cta h2 (18ch) — so those are scoped below. Baking max-width into the global rule (as an earlier version did) forced e.g. "Four services, one chain." to wrap at 18ch. */ .ely-h1 .elementor-heading-title{font-family:var(--ely-f-display);font-size:clamp(2.5rem,6vw,4.4rem);font-weight:900;letter-spacing:-.04em;line-height:1.02;} .ely-h2 .elementor-heading-title{font-family:var(--ely-f-display);font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;} .ely-banner .ely-h1 .elementor-heading-title{max-width:16ch;} .ely-cta .ely-h2 .elementor-heading-title{max-width:18ch;} .ely-h2-sm .elementor-heading-title{font-family:var(--ely-f-display);font-size:clamp(1.5rem,2.3vw,2.05rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;} .ely-h3 .elementor-heading-title{font-family:var(--ely-f-display);font-size:clamp(1.15rem,1.7vw,1.35rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;} /* Highlighted phrase with a teal underline. Uses a background gradient (not an absolute ::after bar) so the underline follows the text across line wraps — box-decoration-break:clone re-draws it under every line. This lets the underline stay visible at ALL widths, including narrow phones where the phrase wraps to two lines (an absolute bar would streak diagonally across the wrap). */ .ely-hl{color:var(--ely-signal); background-image:linear-gradient(var(--ely-teal-lt),var(--ely-teal-lt)); background-size:100% .09em;background-position:0 calc(100% - .07em);background-repeat:no-repeat; -webkit-box-decoration-break:clone;box-decoration-break:clone; padding-bottom:.02em;} .ely-lede p{font-family:var(--ely-f-body);font-size:clamp(1.05rem,1.5vw,1.2rem);color:#3B5163;line-height:1.6;max-width:60ch;margin:0;} .ely-lede--sm p{font-size:.98rem;} /* muted body paragraphs (reference .muted): regular body size, muted colour — used for the About story copy. On ink it lightens to steel-2. */ .ely-muted p{font-family:var(--ely-f-body);font-size:1rem;line-height:1.65;color:#4A6274;margin:0 0 1.05em;} .ely-muted p:last-child{margin-bottom:0;} .ely-on-ink .ely-muted p{color:#A9BECD;} .ely-mono p{font-family:var(--ely-f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ely-steel);margin:0;} /* eyebrow — mono label preceded by a 22px rule */ .ely-eyebrow .elementor-heading-title{ font-family:var(--ely-f-mono);font-size:.7rem;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--ely-teal);display:flex;align-items:center;gap:10px;} .ely-eyebrow .elementor-heading-title::before{content:"";width:22px;height:1px;background:var(--ely-teal);flex:none;} .ely-on-ink .ely-eyebrow .elementor-heading-title{color:var(--ely-signal);} .ely-on-ink .ely-eyebrow .elementor-heading-title::before{background:var(--ely-signal);} /* on-ink inversions */ .ely-on-ink .elementor-heading-title{color:var(--ely-white);} .ely-on-ink .ely-lede p{color:#A9BECD;} .ely-on-ink .ely-mono p{color:var(--ely-steel-2);} /* ---------- head-row ---------- Heading block on the left, a supporting link/CTA on the right, both sitting on the same baseline. The reference sizes each side to its content and lets space-between separate them. My percentage column widths (74% + 22%) plus the 32px gap summed past 100%, so the aside wrapped onto its own line and floated. Override Elementor's per-column --width so the columns size to content again. */ .ely-head-row{align-items:flex-end;} .ely-head-row>.ely-head-row__main{--width:auto;flex:1 1 auto;min-width:0;} .ely-head-row>.ely-head-row__aside{--width:auto;flex:0 0 auto;--justify-content:flex-end;--align-items:flex-end;padding-bottom:6px;} @media(max-width:760px){ .ely-head-row>.ely-head-row__main,.ely-head-row>.ely-head-row__aside{flex-basis:100%;} .ely-head-row>.ely-head-row__aside{--justify-content:flex-start;padding-bottom:0;} } /* ---------- buttons ---------- */ .ely-btn .elementor-button{ display:inline-flex;align-items:center;gap:9px; font-family:var(--ely-f-display);font-weight:700;font-size:.9rem;letter-spacing:.01em; padding:14px 24px;border:1px solid var(--ely-ink);border-radius:var(--ely-r); background:var(--ely-ink);color:var(--ely-white);text-decoration:none; transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease,border-color .18s ease;} .ely-btn .elementor-button:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(10,24,38,.6);} .ely-btn--signal .elementor-button{background:var(--ely-signal);border-color:var(--ely-signal);color:var(--ely-ink);} .ely-btn--signal .elementor-button:hover{box-shadow:0 10px 24px -8px rgba(245,194,67,.75);} .ely-btn--ghost .elementor-button{background:transparent;color:var(--ely-ink);border-color:var(--ely-line);} .ely-btn--ghost .elementor-button:hover{border-color:var(--ely-ink);background:transparent;box-shadow:none;} .ely-on-ink .ely-btn--ghost .elementor-button{color:var(--ely-white);border-color:var(--ely-line-dk);} .ely-on-ink .ely-btn--ghost .elementor-button:hover{border-color:var(--ely-white);} .ely-btn--sm .elementor-button{padding:10px 18px;font-size:.82rem;} /* trailing arrow slides on hover */ .ely-btn .elementor-button-text{display:inline-flex;align-items:center;gap:9px;} .ely-btn .elementor-button .ely-arw{display:inline-block;transition:transform .18s ease;} .ely-btn .elementor-button:hover .ely-arw{transform:translateX(4px);} /* Link-arrow (reference .link-arrow): display-font 700 .88rem, ink text, a 2px signal underline, and a text→arrow gap that grows 7px→12px on hover so the arrow slides right. The animated gap must sit on .elementor-button-text — that is the element that actually contains the text node and the .ely-arw span; the button's own gap has only a single wrapper child and animates nothing. */ .ely-link-arrow .elementor-button{ font-family:var(--ely-f-display);font-weight:700;font-size:.88rem;letter-spacing:0;text-decoration:none; border:0;border-bottom:2px solid var(--ely-signal);border-radius:0;padding:0 0 3px; background:transparent;color:var(--ely-ink);display:inline-flex;align-items:center; transition:none;} .ely-link-arrow .elementor-button-content-wrapper{display:inline-flex;align-items:center;} .ely-link-arrow .elementor-button-text{display:inline-flex;align-items:center;gap:7px;transition:gap .18s ease;} .ely-link-arrow .elementor-button:hover .elementor-button-text{gap:12px;} .ely-link-arrow .elementor-button:hover{background:transparent;box-shadow:none;transform:none;color:var(--ely-ink);border-bottom-color:var(--ely-signal);} .ely-link-arrow .ely-arw{display:inline-flex;line-height:1;} /* ---------- hero ---------- */ .ely-hero{background:var(--ely-ink);color:#fff;position:relative;overflow:hidden;} .ely-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(var(--ely-line-dk) 1px,transparent 1px),linear-gradient(90deg,var(--ely-line-dk) 1px,transparent 1px); background-size:88px 88px;opacity:.55; -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000 20%,transparent 78%); mask-image:radial-gradient(120% 90% at 20% 0%,#000 20%,transparent 78%);} .ely-hero>*{position:relative;z-index:2;} /* Hero is a 2-column grid like the reference (1.08fr .92fr). A boxed Elementor container lays its children out inside .e-con-inner, so the grid goes there. The previous flex row (54% + 42% + 64px gap) summed past 100% and wrap sent the image+manifest column below the stats. Grid fr-units divide the space left AFTER the gap, so it can't overflow. Reset the children's --width (54/42%) to auto so they fill their grid track instead of a % of the track. */ .ely-hero>.e-con-inner{display:grid !important;grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,64px) !important;align-items:center !important;} .ely-hero>.e-con-inner>.ely-hero__in-l, .ely-hero>.e-con-inner>.ely-herovis{--width:auto;width:auto;max-width:100%;} /* The image column must size to its own content (the frame), NOT stretch to the taller text column — otherwise the absolutely-positioned manifest, anchored to the column's bottom, lands below the image instead of over it. align-self wins whether the row resolves as grid or flex, and doesn't rely on the container's --align-items (which Elementor didn't emit for this container). */ .ely-hero>.e-con-inner>.ely-herovis{align-self:center;} @media(max-width:1024px){ .ely-hero>.e-con-inner{grid-template-columns:1fr;} .ely-herovis{max-width:520px;} } /* Stat cells size to their content. They were built with width:0px, which collapsed each cell to zero and spilled the number/label out. */ .ely-hero__meta>.ely-stat-cell-hero{--width:auto;width:auto;flex:0 0 auto;} .ely-hero__meta{border-top:1px solid var(--ely-line-dk);} .ely-stat .elementor-counter-number-wrapper{font-family:var(--ely-f-display);font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:#fff;} .ely-stat .elementor-counter-title{font-family:var(--ely-f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ely-steel-2);font-weight:500;text-align:left;margin-top:2px;} /* hero meta stats */ .ely-stat-cell-hero .ely-stat__n .elementor-heading-title{font-family:var(--ely-f-display);font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.1;} .ely-stat-cell-hero .ely-stat__l p{font-family:var(--ely-f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ely-steel-2);margin:0;} .ely-manifest__hd p{font-family:var(--ely-f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ely-steel);font-weight:500;margin:0;} /* Definition-list manifest, ported from the reference: label column (steel) + right-aligned bold value column, in an auto/1fr grid. Previously this reused the listing-card .ely-spec icon-list, whose one-cell-per-item layout flowed the label+value pairs into the wrong grid columns. */ .ely-manifest dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px; font-family:var(--ely-f-mono);font-size:.74rem;line-height:1.3;} .ely-manifest dt{color:var(--ely-steel);margin:0;} .ely-manifest dd{margin:0;text-align:right;font-weight:600;color:var(--ely-ink);} .ely-manifest dd.ok{color:var(--ely-teal);} /* framed hero image: portrait crop, graded, with a bottom scrim */ .ely-frame{position:relative;border-radius:var(--ely-r);overflow:hidden;background:var(--ely-ink-2);aspect-ratio:4/4.6;} .ely-frame .elementor-widget-image,.ely-frame .elementor-widget-container,.ely-frame img{height:100%;} .ely-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.06);display:block;border-radius:0;} .ely-frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(190deg,rgba(10,24,38,0) 40%,rgba(10,24,38,.75));} @media(max-width:1024px){.ely-frame{aspect-ratio:4/3.4;}} .ely-herovis{position:relative;} .ely-manifest{position:absolute !important;left:-24px;bottom:28px;width:min(300px,84%);z-index:3; background:var(--ely-white) !important;color:var(--ely-ink);border-radius:var(--ely-r); box-shadow:var(--ely-shadow-lg);border-left:4px solid var(--ely-signal) !important;} @media(max-width:1024px){.ely-manifest{left:auto;right:16px;}} @media(max-width:760px){.ely-manifest{position:relative !important;left:0;right:0;bottom:0;width:100%;margin-top:-40px;}} /* ---------- inner-page banner ---------- */ /* ---------- inner-page banner ---------- Vertical rhythm + horizontal gutters come from here (reference .banner padding-block). The container was built with padding:0, so without this the crumb/heading jammed against the sticky header and the section below. */ .ely-banner{background:var(--ely-ink);color:#fff;position:relative;overflow:hidden; padding:clamp(56px,7vw,88px) var(--ely-gut) clamp(48px,6vw,72px) !important;} .ely-banner .ely-lede{margin-top:20px !important;} .ely-banner::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0; background-image:linear-gradient(var(--ely-line-dk) 1px,transparent 1px);background-size:100% 44px; -webkit-mask-image:linear-gradient(to bottom,transparent,#000);mask-image:linear-gradient(to bottom,transparent,#000);} .ely-banner>*{position:relative;z-index:1;} .ely-crumb p{font-family:var(--ely-f-mono);font-size:.68rem;letter-spacing:.2em; text-transform:normal;color:var(--ely-steel-2);margin:0;} .ely-crumb a{text-decoration:none;color:var(--ely-signal);} /* ---------- hairline grid (benefits / diffs / stat strip) ---------- */ .ely-g3{background:var(--ely-line);border:1px solid var(--ely-line);border-radius:var(--ely-r);overflow:hidden;gap:1px !important;} .ely-ben{background:var(--ely-white);position:relative;transition:background .22s ease; padding:clamp(26px,3vw,38px) !important;} .ely-ben:hover{background:#FBFCFB;} .ely-ben__no .elementor-heading-title{font-family:var(--ely-f-mono);font-size:.68rem;color:var(--ely-steel-2);letter-spacing:.1em;} .ely-ben__no{position:absolute !important;top:22px;right:24px;z-index:2;} .ely-ben .elementor-icon-box-wrapper{text-align:left;} .ely-ben .elementor-icon{width:46px;height:46px;border-radius:2px;background:var(--ely-ink); display:grid;place-items:center;margin-bottom:22px;border:0;} .ely-ben .elementor-icon svg,.ely-ben .elementor-icon i{width:22px;height:22px;font-size:20px;color:var(--ely-signal);fill:var(--ely-signal);} .ely-ben .elementor-icon-box-title{margin-bottom:10px;} .ely-ben .elementor-icon-box-title,.ely-ben .elementor-icon-box-title a{font-family:var(--ely-f-display);font-size:clamp(1.15rem,1.7vw,1.35rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ely-ink);} .ely-ben .elementor-icon-box-description{color:#48606F;font-size:.95rem;font-family:var(--ely-f-body);line-height:1.6;margin:0;} /* ---------- home services list ---------- */ .ely-svc-list{border-top:1px solid var(--ely-line);} .ely-svc{position:relative;transition:padding-left .25s ease,background .25s ease; border-bottom:1px solid var(--ely-line); padding:clamp(24px,3vw,34px) clamp(8px,1.5vw,18px) !important;} .ely-svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ely-signal); transform:scaleY(0);transition:transform .25s ease;z-index:2;} .ely-svc:hover{background:var(--ely-white);padding-left:clamp(18px,2.4vw,30px) !important;} .ely-svc:hover::before{transform:scaleY(1);} .ely-svc__no p{font-family:var(--ely-f-mono);font-size:.72rem;color:var(--ely-steel-2);letter-spacing:.1em;margin:0;} .ely-svc__body .elementor-heading-title{margin-bottom:6px;} .ely-svc__body p{margin:0;color:#4C6272;font-size:.94rem;max-width:62ch;font-family:var(--ely-f-body);line-height:1.6;} .ely-svc__go{width:40px;height:40px;border:1px solid var(--ely-line);border-radius:50%; display:grid !important;place-items:center;flex:none; transition:background .2s ease,border-color .2s ease,transform .2s ease;} .ely-svc__go .elementor-heading-title{font-size:15px;line-height:1;color:var(--ely-ink);} .ely-svc:hover .ely-svc__go{background:var(--ely-ink);border-color:var(--ely-ink);transform:rotate(-45deg);} .ely-svc:hover .ely-svc__go .elementor-heading-title{color:var(--ely-signal);} @media(max-width:760px){.ely-svc__go{display:none !important;}} /* ---------- service cards (Services page) ---------- */ .ely-svc-card{background:var(--ely-white);border:1px solid var(--ely-line);border-radius:var(--ely-r); padding:clamp(24px,2.6vw,32px) !important; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;} .ely-svc-card:hover{transform:translateY(-4px);box-shadow:var(--ely-shadow);border-color:transparent;} .ely-svc-card__tag p{font-family:var(--ely-f-mono);font-size:.64rem;letter-spacing:.18em; text-transform:uppercase;color:var(--ely-teal);margin:0;} .ely-svc-card .elementor-widget-text-editor>p{color:#4C6272;font-size:.94rem;margin:0;font-family:var(--ely-f-body);line-height:1.6;} /* bullet list: dashed rule above, square signal markers */ .ely-svc-card .elementor-icon-list-items{border-top:1px dashed var(--ely-line);padding-top:14px;margin-top:6px;} .ely-svc-card .elementor-icon-list-item{padding:5px 0 5px 18px;position:relative;} .ely-svc-card .elementor-icon-list-item .elementor-icon-list-icon{display:none;} .ely-svc-card .elementor-icon-list-item::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;background:var(--ely-signal);border-radius:1px;} .ely-svc-card .elementor-icon-list-text{font-family:var(--ely-f-mono);font-size:.72rem;color:#4C6272;letter-spacing:.02em;padding-left:0;} /* ---------- listing cards ---------- */ .ely-card{background:var(--ely-white);border:1px solid var(--ely-line);border-radius:var(--ely-r); overflow:hidden;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;padding:0 !important;} .ely-card:hover{transform:translateY(-5px);box-shadow:var(--ely-shadow);border-color:transparent;} .ely-card__img{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--ely-ink-2);} .ely-card__img .elementor-widget-image,.ely-card__img .elementor-widget-container{height:100%;} .ely-card__img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0; transition:transform .5s cubic-bezier(.2,.7,.3,1);} .ely-card:hover .ely-card__img img{transform:scale(1.06);} /* Category badge overlaying the card image. The container was built with width:0px, which squeezed the label to one character per line (vertical text), so --width/width are reset to auto and the label is kept on a single line. */ .ely-card__cat{position:absolute !important;top:12px;left:12px;z-index:2; background:var(--ely-white);border-radius:2px;padding:5px 10px; --width:auto !important;width:auto !important;max-width:calc(100% - 24px); white-space:nowrap;} .ely-card__cat p{white-space:nowrap;} .ely-card__cat p{font-family:var(--ely-f-mono);font-size:.6rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ely-ink);font-weight:500;margin:0;} /* Card body is a flex column; the description grows so the "Request pricing" button is pinned to the bottom of every card and buttons align across a row regardless of description length (reference .card__body{flex:1} + p{flex:1}). */ .ely-card__body{padding:20px !important;display:flex;flex-direction:column;gap:10px !important;flex:1;} .ely-card__body>.elementor-widget-text-editor p{margin:0;font-size:.9rem;color:#4C6272;font-family:var(--ely-f-body);line-height:1.6;} .ely-card__body>.elementor-widget-text-editor{flex:1;} .ely-card__body .elementor-heading-title{font-size:1.08rem;font-family:var(--ely-f-display);font-weight:800;letter-spacing:-.02em;line-height:1.2;} .ely-card__body>.elementor-widget-text-editor p{margin:0;font-size:.9rem;color:#4C6272;font-family:var(--ely-f-body);line-height:1.6;} /* spec table: two columns, dashed rule above */ .ely-spec .elementor-icon-list-items{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px; border-top:1px dashed var(--ely-line);padding-top:14px;} .ely-spec .elementor-icon-list-item{padding:0;} .ely-spec .elementor-icon-list-item .elementor-icon-list-icon{display:none;} .ely-spec .elementor-icon-list-text{font-family:var(--ely-f-mono);font-size:.68rem;color:var(--ely-steel);padding-left:0;} .ely-spec .elementor-icon-list-text strong{color:var(--ely-ink);font-weight:600;} /* ---------- quotes ---------- */ .ely-quote{background:var(--ely-white);border:1px solid var(--ely-line);border-radius:var(--ely-r); padding:clamp(24px,2.6vw,32px) !important;position:relative; transition:transform .22s ease,box-shadow .22s ease;} .ely-quote:hover{transform:translateY(-4px);box-shadow:var(--ely-shadow);} .ely-qmark .elementor-heading-title{font-family:var(--ely-f-display);font-size:3.2rem;font-weight:900; color:var(--ely-signal);line-height:.6;} .ely-quote__txt p{font-size:1rem;color:var(--ely-ink-2);line-height:1.6;margin:0;font-family:var(--ely-f-body);} /* Quote text grows to fill the card so the caption is pushed to the bottom edge — keeps all three captions aligned regardless of quote length (reference: .quote p{flex:1}). The card is a flex column, so this widget grows within it. */ .ely-quote>.ely-quote__txt{flex:1 1 auto;} .ely-quote__cap{border-top:1px solid var(--ely-line);} .ely-avt{width:38px;height:38px;border-radius:50%;background:var(--ely-ink);flex:none; display:grid !important;place-items:center;} .ely-avt .elementor-heading-title{font-family:var(--ely-f-display);font-weight:800;font-size:.8rem;color:var(--ely-signal);} .ely-quote__cap cite,.ely-quote__name .elementor-heading-title{font-style:normal;font-family:var(--ely-f-display); font-weight:700;font-size:.9rem;letter-spacing:-.01em;color:var(--ely-ink);} .ely-quote__role p{font-family:var(--ely-f-mono);font-size:.66rem;color:var(--ely-steel);letter-spacing:.08em;margin:0;} /* ---------- split ---------- */ .ely-split__vis{position:relative;border-radius:var(--ely-r);overflow:hidden;aspect-ratio:5/4;background:var(--ely-ink-2);} .ely-split__vis .elementor-widget-image,.ely-split__vis .elementor-widget-container{height:100%;} .ely-split__vis img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;} /* ---------- split (reference .split) ---------- Two-column story block: text + framed image, image on the right on desktop and ON TOP when stacked on mobile. Uses a grid on the boxed .e-con-inner so fr tracks divide space after the gap (percentage-flex columns overflowed 100%). */ .ely-split>.e-con-inner{display:grid !important;grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px) !important;align-items:center;} .ely-split>.e-con-inner>.elementor-element{--width:auto;width:auto;max-width:100%;} @media(max-width:760px){ .ely-split>.e-con-inner{grid-template-columns:1fr;} .ely-split .ely-split__vis{order:-1;} } /* ---------- g2 (reference .g2) ---------- Even two-column grid used for the About mission panel. */ .ely-g2>.e-con-inner{display:grid !important;grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px) !important;align-items:start;} .ely-g2>.e-con-inner>.elementor-element{--width:auto;width:auto;max-width:100%;} @media(max-width:760px){.ely-g2>.e-con-inner{grid-template-columns:1fr;}} /* ---------- stat strip ---------- */ .ely-stat-strip{background:var(--ely-line);border:1px solid var(--ely-line);border-radius:var(--ely-r); overflow:hidden;gap:1px !important;} .ely-stat-cell{background:var(--ely-white);padding:20px !important;} .ely-stat-cell .elementor-heading-title{font-family:var(--ely-f-display);font-size:1.75rem;font-weight:800;letter-spacing:-.03em;color:var(--ely-ink);} .ely-stat-cell p{font-family:var(--ely-f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ely-steel);margin:0;} /* ---------- process steps ---------- */ .ely-step{border-top:2px solid var(--ely-ink);position:relative;padding:30px 22px 30px 0 !important;} .ely-step::after{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px; background:var(--ely-signal);border-radius:50%;border:2px solid var(--ely-ink);} .ely-step__n p{font-family:var(--ely-f-mono);font-size:.68rem;letter-spacing:.2em;color:var(--ely-teal);margin:0;} .ely-step .elementor-heading-title{font-size:1.05rem;} .ely-step .elementor-widget-text-editor:not(.ely-step__n) p{font-size:.9rem;color:#4C6272;margin:0;font-family:var(--ely-f-body);line-height:1.6;} .ely-on-ink .ely-step{border-top-color:var(--ely-steel);} .ely-on-ink .ely-step::after{border-color:var(--ely-ink);} .ely-on-ink .ely-step .elementor-widget-text-editor:not(.ely-step__n) p{color:#9FB4C2;} .ely-on-ink .ely-step__n p{color:var(--ely-signal);} /* ---------- FAQ (Elementor accordion styled as the reference details/summary) ---------- */ .ely-faq .elementor-accordion{border-top:1px solid var(--ely-line);} .ely-faq .elementor-accordion-item{border:0;border-bottom:1px solid var(--ely-line);} .ely-faq .elementor-tab-title{padding:22px 44px 22px 0 !important;position:relative;background:transparent !important; font-family:var(--ely-f-display);font-weight:700;font-size:1.03rem;letter-spacing:-.015em;border:0;} .ely-faq .elementor-tab-title a{color:var(--ely-ink);} .ely-faq .elementor-tab-title.elementor-active a{color:var(--ely-teal);} .ely-faq .elementor-accordion-icon{display:none !important;} .ely-faq .elementor-tab-title::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px; border-right:2px solid var(--ely-teal);border-bottom:2px solid var(--ely-teal); transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;} .ely-faq .elementor-tab-title.elementor-active::after{transform:translateY(-30%) rotate(-135deg);} .ely-faq .elementor-tab-content{border:0;padding:0 60px 24px 0 !important;background:transparent !important;} .ely-faq .elementor-tab-content p{margin:0;color:#4C6272;font-size:.96rem;max-width:80ch;font-family:var(--ely-f-body);line-height:1.65;} @media(max-width:760px){.ely-faq .elementor-tab-content{padding-right:10px !important;}} /* ---------- pills / diffs ---------- */ /* Pills size to their content and don't grow, so they sit inline and wrap on one row. Elementor gives flex children --container-widget-flex-grow:1 and the pills were built with width:0px, so each pill was stretching to full width and wrapping onto its own line (stacking vertically). flex:0 0 auto + width:auto fixes that. */ .ely-pill{border:1px solid var(--ely-line) !important;border-radius:100px !important; padding:6px 13px !important;background:var(--ely-white) !important; flex:0 0 auto !important;width:auto !important;} .ely-pill .elementor-heading-title{font-family:var(--ely-f-mono);font-size:.7rem;letter-spacing:.1em; text-transform:uppercase;color:#4C6272;} .ely-on-ink .ely-pill{border-color:var(--ely-line-dk) !important;background:transparent !important;} .ely-on-ink .ely-pill .elementor-heading-title{color:#B7C8D4;} .ely-panel-2{background:var(--ely-ink-2) !important;} .ely-diffs{background:var(--ely-line);border:1px solid var(--ely-line);border-radius:var(--ely-r);overflow:hidden;gap:1px !important;} .ely-diff{background:var(--ely-white);padding:24px clamp(20px,2.4vw,30px) !important;} .ely-diff__n p{font-family:var(--ely-f-mono);font-size:.7rem;color:var(--ely-teal);letter-spacing:.14em;margin:0;padding-top:4px;} .ely-diff .elementor-heading-title{margin-bottom:6px;} .ely-diff .elementor-widget-text-editor:not(.ely-diff__n) p{margin:0;color:#4C6272;font-size:.94rem;font-family:var(--ely-f-body);line-height:1.6;} /* ---------- CTA band ---------- */ .ely-cta{background:var(--ely-ink);color:#fff;position:relative;overflow:hidden;} /* Radial teal glow, top-RIGHT of the band (reference: .cta::before{right:-8%}). left:auto is explicit so the glow is anchored purely from the right and can't be pulled left by any stale/cached rule that might set a left offset. */ .ely-cta::before{content:"";position:absolute;left:auto !important;right:-8% !important;top:-40%; width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(28,145,132,.42),transparent 66%);pointer-events:none;z-index:0;} .ely-cta>*{position:relative;z-index:1;} /* ---------- trust strip ---------- */ .ely-trust-in{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between; gap:clamp(24px,4vw,56px) !important;padding-top:26px !important;padding-bottom:26px !important;} .ely-trust-lbl{max-width:150px;flex:none;} .ely-trust-lbl p{font-family:var(--ely-f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase; color:var(--ely-steel);line-height:1.5;margin:0;font-weight:500;} .ely-trust-logos{display:flex;flex-wrap:wrap;align-items:center;flex:1;justify-content:space-around; gap:clamp(20px,3.4vw,44px) !important;} .ely-trust-logo{opacity:.42;transition:opacity .2s ease;} .ely-trust-logo:hover{opacity:.9;} .ely-trust-logo .elementor-heading-title{font-family:var(--ely-f-display);font-weight:800;font-size:1rem; letter-spacing:.04em;color:var(--ely-ink);text-transform:uppercase;line-height:1;} @media(max-width:760px){ .ely-trust-in{flex-direction:column;align-items:flex-start;gap:18px !important;} .ely-trust-lbl{max-width:none;} .ely-trust-logos{justify-content:flex-start;gap:20px 26px !important;} } /* ---------- contact ---------- */ .ely-form-card{background:var(--ely-white);border:1px solid var(--ely-line);border-radius:var(--ely-r); padding:clamp(24px,3vw,38px) !important;box-shadow:var(--ely-shadow);} .ely-form-card .wpforms-field{padding:0 0 18px;} .ely-form-card .wpforms-field-label{display:block;font-family:var(--ely-f-mono);font-size:.66rem; letter-spacing:.16em;text-transform:uppercase;color:var(--ely-steel);margin-bottom:8px;font-weight:500;} .ely-form-card .wpforms-required-label{color:var(--ely-teal);border:0;} .ely-form-card input[type=text],.ely-form-card input[type=email],.ely-form-card input[type=tel], .ely-form-card textarea,.ely-form-card select{ width:100%;font-family:var(--ely-f-body);font-size:.96rem;padding:13px 15px;color:var(--ely-ink); border:1px solid var(--ely-line);border-radius:var(--ely-r);background:var(--ely-paper);box-shadow:none; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;} .ely-form-card textarea{resize:vertical;min-height:130px;} .ely-form-card input:focus,.ely-form-card textarea:focus,.ely-form-card select:focus{ outline:none;border-color:var(--ely-teal);background:var(--ely-white);box-shadow:0 0 0 3px rgba(14,107,96,.12);} .ely-form-card .wpforms-error{font-family:var(--ely-f-mono);font-size:.66rem;color:#B4342B; margin-top:7px;letter-spacing:.06em;} .ely-form-card input.wpforms-error,.ely-form-card textarea.wpforms-error{border-color:#B4342B;background:#FEF6F5;} .ely-form-card .wpforms-submit{width:100%;justify-content:center;margin-top:6px; display:inline-flex;align-items:center;gap:9px;font-family:var(--ely-f-display);font-weight:700; font-size:.9rem;letter-spacing:.01em;padding:14px 24px;border-radius:var(--ely-r); background:var(--ely-signal);border:1px solid var(--ely-signal);color:var(--ely-ink);cursor:pointer; transition:transform .18s ease,box-shadow .18s ease;} .ely-form-card .wpforms-submit:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(245,194,67,.75);} .ely-form-card .wpforms-confirmation-container-full{background:var(--ely-white);border:1px solid var(--ely-teal); border-left:4px solid var(--ely-teal);border-radius:var(--ely-r);padding:22px;margin:0 0 20px;color:#4C6272;} .ely-form-card .wpforms-confirmation-container-full p{margin:0;font-size:.9rem;} .ely-form-note p{font-family:var(--ely-f-mono);font-size:.64rem;color:var(--ely-steel); letter-spacing:.06em;margin:14px 0 0;text-align:center;line-height:1.7;} .ely-info-block{border-top:2px solid var(--ely-ink);padding-top:20px !important;} .ely-info-block .elementor-heading-title{font-size:.95rem;font-family:var(--ely-f-display);font-weight:800;letter-spacing:-.02em;} .ely-info-block .elementor-icon-list-item a,.ely-info-block .elementor-icon-list-text{ font-size:.95rem;color:#3B5163;font-family:var(--ely-f-body);} .ely-info-block .elementor-icon-list-item a:hover{color:var(--ely-teal);} .ely-info-block .elementor-icon-list-item .elementor-icon-list-icon{display:none;} .ely-info-block .elementor-icon-list-text{padding-left:0;} .ely-info-block .elementor-widget-text-editor p{font-size:.95rem;color:#3B5163;margin:0 0 6px;font-family:var(--ely-f-body);} .ely-regs p{font-family:var(--ely-f-mono);font-size:.7rem;color:var(--ely-steel);letter-spacing:.02em;margin:10px 0 0;} .ely-map{border:1px solid var(--ely-line);border-radius:var(--ely-r);overflow:hidden;height:260px;background:var(--ely-ink-2);} .ely-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.35) contrast(1.05);} .ely-socials .elementor-social-icon{width:40px;height:40px;border:1px solid var(--ely-line); border-radius:var(--ely-r);background:var(--ely-white);display:grid;place-items:center; transition:.18s ease;} .ely-socials .elementor-social-icon i,.ely-socials .elementor-social-icon svg{font-size:17px;color:var(--ely-ink);fill:var(--ely-ink);transition:.18s ease;} .ely-socials .elementor-social-icon:hover{background:var(--ely-ink);border-color:var(--ely-ink);transform:translateY(-2px);} .ely-socials .elementor-social-icon:hover i,.ely-socials .elementor-social-icon:hover svg{color:var(--ely-signal);fill:var(--ely-signal);} /* ---------- listings filter ---------- */ /* Filter bar: label + chips + count on ONE row, count pushed to the right (reference .filters / .filters__lbl / .count). */ .ely-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%;} .ely-filters-lbl{font-family:var(--ely-f-mono);font-size:.64rem;letter-spacing:.18em; text-transform:uppercase;color:var(--ely-steel);margin-right:6px;flex:0 0 auto;} .ely-filters-lbl p{font-family:var(--ely-f-mono);font-size:.64rem;letter-spacing:.18em; text-transform:uppercase;color:var(--ely-steel);margin:0;} .ely-count{margin-left:auto;font-family:var(--ely-f-mono);font-size:.68rem;color:var(--ely-steel);letter-spacing:.1em;} @media(max-width:760px){.ely-count{margin-left:0;width:100%;}} .ely-filters-lbl p{font-family:var(--ely-f-mono);font-size:.64rem;letter-spacing:.18em; text-transform:uppercase;color:var(--ely-steel);margin:0;} .ely-chip{font-family:var(--ely-f-display);font-weight:600;font-size:.82rem; border:1px solid var(--ely-line);background:var(--ely-white);border-radius:100px; padding:8px 16px;cursor:pointer;transition:.18s ease;white-space:nowrap;color:var(--ely-ink);} .ely-chip:hover{border-color:var(--ely-ink);} .ely-chip[aria-pressed="true"]{background:var(--ely-ink);border-color:var(--ely-ink);color:var(--ely-white);} .ely-chip__n{font-family:var(--ely-f-mono);font-size:.66rem;opacity:.55;margin-left:6px;} .ely-chip[aria-pressed="true"] .ely-chip__n{color:var(--ely-signal);opacity:1;} .ely-count{font-family:var(--ely-f-mono);font-size:.68rem;color:var(--ely-steel);letter-spacing:.1em;} .ely-empty{display:none !important;text-align:center;padding:64px 20px !important; border:1px dashed var(--ely-line);border-radius:var(--ely-r);} .ely-empty.on{display:flex !important;} .ely-prod.is-hidden{display:none !important;} /* ---------- ticker ---------- */ .ely-ticker{background:var(--ely-tick-bg,var(--ely-signal));color:var(--ely-tick-fg,var(--ely-ink)); overflow:hidden;border-top:1px solid var(--ely-ink);border-bottom:1px solid var(--ely-ink);} .ely-ticker__track{display:flex;gap:0;width:max-content;animation:ely-slide var(--ely-tick-speed,46s) linear infinite;} .ely-ticker:hover .ely-ticker__track{animation-play-state:paused;} .ely-ticker__item{display:flex;align-items:center;gap:10px;padding:11px 26px;white-space:nowrap; font-family:var(--ely-f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500; border-right:1px solid rgba(10,24,38,.22);} .ely-ticker__item b{font-weight:700;} .ely-ticker__dot{width:6px;height:6px;border-radius:50%;background:var(--ely-ink);flex:none;opacity:.55;} @keyframes ely-slide{to{transform:translateX(-50%);}} /* ---------- logo lockup ---------- */ .ely-logomark{width:34px;height:34px;background:var(--ely-ink);border-radius:2px;flex:none; display:grid;place-items:center;overflow:hidden;} /* ---------- WeChat QR modal ---------- */ .ely-wechat-modal[hidden]{display:none;} .ely-wechat-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;} .ely-wechat-modal__overlay{position:absolute;inset:0;background:rgba(10,24,38,.66);backdrop-filter:blur(2px);} .ely-wechat-modal__card{position:relative;z-index:1;background:var(--ely-white);border-radius:var(--ely-r); box-shadow:var(--ely-shadow-lg);padding:26px 26px 22px;width:min(320px,100%);text-align:center; animation:ely-wechat-in .22s cubic-bezier(.2,.7,.3,1);} @keyframes ely-wechat-in{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}} .ely-wechat-modal__close{position:absolute;top:8px;right:12px;border:0;background:transparent; font-size:26px;line-height:1;color:var(--ely-steel);cursor:pointer;padding:4px 8px;border-radius:2px; transition:color .15s ease,background .15s ease;} .ely-wechat-modal__close:hover{color:var(--ely-ink);background:var(--ely-paper);} .ely-wechat-modal__eyebrow{font-family:var(--ely-f-mono);font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;color:var(--ely-teal);margin:0 0 14px;font-weight:600;} .ely-wechat-modal__qr{width:220px;height:220px;margin:0 auto;border:1px solid var(--ely-line); border-radius:2px;overflow:hidden;background:var(--ely-white);} .ely-wechat-modal__qr img{display:block;width:100%;height:100%;object-fit:contain;} .ely-wechat-modal__cap{font-family:var(--ely-f-body);font-size:.82rem;color:#4C6272;line-height:1.5; margin:16px 0 0;max-width:26ch;margin-left:auto;margin-right:auto;} .ely-wechat-open{overflow:hidden;} /* ---------- header / footer Xpro CTA buttons ---------- These are xpro-button widgets (different markup from .ely-btn), and Xpro generated no transition and no hover lift — so the hover did nothing visible. Give them the reference signal-button hover: lift + shadow + lighten, eased. */ .ely-xpro-cta .xpro-elementor-button{ background-color:var(--ely-signal) !important; transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease !important; will-change:transform;} .ely-xpro-cta .xpro-elementor-button:hover, .ely-xpro-cta .xpro-elementor-button:focus{ background-color:#FFD469 !important; transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(245,194,67,.75);} /* ---------- header CTA (mobile) ---------- The Xpro mobile drawer is a self-contained off-canvas panel that only holds the menu links; the "Request a quote" button is a separate widget in the top bar. Rather than inject it into Xpro's JS drawer (fragile, breaks on update), keep it visible and compact in the header bar beside the hamburger so the CTA is always reachable on mobile. Xpro collapses the menu at <=1024px. */ @media(max-width:1024px){ .ely-hdr-cta{display:inline-flex !important;flex:0 0 auto !important;visibility:visible !important;} .ely-hdr-cta .xpro-elementor-button{padding:10px 15px !important;white-space:nowrap;} .ely-hdr-cta .xpro-button-text{font-size:13px !important;} } @media(max-width:480px){ .ely-hdr-cta .xpro-elementor-button{padding:8px 12px !important;} .ely-hdr-cta .xpro-button-text{font-size:12px !important;} } /* ---------- reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} .ely-js .ely-rv{opacity:1;translate:none;} .ely-ticker__track{animation:none;} }