.elementor-kit-6{--e-global-color-primary:#FF5500;--e-global-color-secondary:#0D0E10;--e-global-color-text:#2A2C30;--e-global-color-accent:#B93B00;--e-global-color-flame50:#FFF5ED;--e-global-color-flame100:#FFE6D4;--e-global-color-flame200:#FFC69E;--e-global-color-flame300:#FF9D63;--e-global-color-flame400:#FF7733;--e-global-color-flame600:#E64A00;--e-global-color-flame800:#933000;--e-global-color-ink50:#F7F7F8;--e-global-color-ink100:#ECECEE;--e-global-color-ink200:#D9DBDF;--e-global-color-ink300:#B6B9C0;--e-global-color-ink400:#878B93;--e-global-color-ink500:#5F6368;--e-global-color-ink600:#42454A;--e-global-color-ink800:#1A1C1F;--e-global-color-canvas:#FFFFFF;--e-global-color-canvassoft:#FAFAFA;--e-global-color-canvasmuted:#F5F5F6;--e-global-color-canvastint:#FFF7F1;--e-global-color-line:#ECECEC;--e-global-color-linestrong:#E2E3E6;--e-global-color-linesubtle:#F2F2F3;--e-global-typography-primary-font-family:"Sora";--e-global-typography-primary-font-size:46px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-line-height:1.05em;--e-global-typography-primary-letter-spacing:-0.035em;--e-global-typography-secondary-font-family:"Sora";--e-global-typography-secondary-font-size:17px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-line-height:1.25em;--e-global-typography-secondary-letter-spacing:-0.025em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:1.625em;--e-global-typography-accent-font-family:"JetBrains Mono";--e-global-typography-accent-font-size:10.5px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.22em;--e-global-typography-h1hero-font-family:"Sora";--e-global-typography-h1hero-font-size:64px;--e-global-typography-h1hero-font-weight:800;--e-global-typography-h1hero-text-transform:none;--e-global-typography-h1hero-line-height:1em;--e-global-typography-h1hero-letter-spacing:-0.04em;--e-global-typography-h2feat-font-family:"Sora";--e-global-typography-h2feat-font-size:48px;--e-global-typography-h2feat-font-weight:700;--e-global-typography-h2feat-text-transform:none;--e-global-typography-h2feat-line-height:1.05em;--e-global-typography-h2feat-letter-spacing:-0.035em;--e-global-typography-h3block-font-family:"Sora";--e-global-typography-h3block-font-size:34px;--e-global-typography-h3block-font-weight:700;--e-global-typography-h3block-text-transform:none;--e-global-typography-h3block-line-height:1.1em;--e-global-typography-h3block-letter-spacing:-0.03em;--e-global-typography-h3solution-font-family:"Sora";--e-global-typography-h3solution-font-size:28px;--e-global-typography-h3solution-font-weight:700;--e-global-typography-h3solution-text-transform:none;--e-global-typography-h3solution-line-height:1.1em;--e-global-typography-h3solution-letter-spacing:-0.025em;--e-global-typography-h4panel-font-family:"Sora";--e-global-typography-h4panel-font-size:24px;--e-global-typography-h4panel-font-weight:700;--e-global-typography-h4panel-text-transform:none;--e-global-typography-h4panel-line-height:1.25em;--e-global-typography-h4panel-letter-spacing:-0.02em;--e-global-typography-bodylead-font-family:"Inter";--e-global-typography-bodylead-font-size:16px;--e-global-typography-bodylead-font-weight:400;--e-global-typography-bodylead-text-transform:none;--e-global-typography-bodylead-line-height:1.625em;--e-global-typography-bodysm-font-family:"Inter";--e-global-typography-bodysm-font-size:14.5px;--e-global-typography-bodysm-font-weight:400;--e-global-typography-bodysm-text-transform:none;--e-global-typography-bodysm-line-height:1.625em;--e-global-typography-bodyxs-font-family:"Inter";--e-global-typography-bodyxs-font-size:12.5px;--e-global-typography-bodyxs-font-weight:400;--e-global-typography-bodyxs-text-transform:none;--e-global-typography-bodyxs-line-height:1.5em;--e-global-typography-btnlabel-font-family:"Inter";--e-global-typography-btnlabel-font-size:13.5px;--e-global-typography-btnlabel-font-weight:600;--e-global-typography-btnlabel-text-transform:none;--e-global-typography-btnlabel-line-height:1.2em;--e-global-typography-btnlabel-letter-spacing:-0.025em;--e-global-typography-navlink-font-family:"Inter";--e-global-typography-navlink-font-size:13.5px;--e-global-typography-navlink-font-weight:500;--e-global-typography-navlink-text-transform:none;--e-global-typography-navlink-line-height:1.2em;--e-global-typography-navlink-letter-spacing:-0.01em;background-color:#FFFFFF;color:#2A2C30;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;line-height:1.625em;overscroll-behavior:auto;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#FF5500;font-family:"Inter", Sans-serif;font-size:13.5px;font-weight:600;text-transform:none;line-height:1.2em;letter-spacing:-0.025em;color:#FFFFFF;box-shadow:0px 12px 28px -10px rgba(255,85,0,0.55);border-style:solid;border-width:1px 1px 1px 1px;border-color:rgba(255,85,0,0.35);border-radius:999px 999px 999px 999px;padding:13px 22px 13px 22px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:#FF5500;color:#FFFFFF;box-shadow:0px 16px 36px -10px rgba(255,85,0,0.6);}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 p{margin-block-end:16px;}.elementor-kit-6 a{color:#FF5500;}.elementor-kit-6 a:hover{color:#B93B00;}.elementor-kit-6 h1{color:#0D0E10;font-family:"Sora", Sans-serif;font-size:64px;font-weight:800;line-height:1em;letter-spacing:-0.04em;}.elementor-kit-6 h2{color:#0D0E10;font-family:"Sora", Sans-serif;font-size:46px;font-weight:700;line-height:1.05em;letter-spacing:-0.035em;}.elementor-kit-6 h3{color:#0D0E10;font-family:"Sora", Sans-serif;font-size:34px;font-weight:700;line-height:1.1em;letter-spacing:-0.03em;}.elementor-kit-6 h4{color:#0D0E10;font-family:"Sora", Sans-serif;font-size:24px;font-weight:700;line-height:1.25em;letter-spacing:-0.02em;}.elementor-kit-6 h5{color:#0D0E10;font-family:"Sora", Sans-serif;font-size:18px;font-weight:600;line-height:1.25em;letter-spacing:-0.025em;}.elementor-kit-6 h6{color:#0D0E10;font-family:"Sora", Sans-serif;font-size:16px;font-weight:600;line-height:1.3em;letter-spacing:-0.02em;}.elementor-kit-6 img{border-radius:16px 16px 16px 16px;}.elementor-kit-6 label{color:#2A2C30;font-family:"Inter", Sans-serif;font-size:13px;font-weight:500;line-height:1.4em;}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{font-family:"Inter", Sans-serif;font-size:15px;font-weight:400;line-height:1.4em;color:#0D0E10;accent-color:#FF5500;background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E2E3E6;border-radius:16px 16px 16px 16px;transition:0.2ms;padding:12px 16px 12px 16px;}.elementor-kit-6 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea:focus,.elementor-kit-6 .elementor-field-textual:focus{color:#0D0E10;accent-color:#FF5500;background-color:#FFFFFF;box-shadow:0px 0px 0px 2px #FFE6D4;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FF7733;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1180px;}.e-con{--container-max-width:1180px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1023px){.elementor-kit-6{--e-global-typography-primary-font-size:46px;--e-global-typography-secondary-font-size:17px;--e-global-typography-text-font-size:16px;--e-global-typography-accent-font-size:10.5px;--e-global-typography-h1hero-font-size:56px;--e-global-typography-h2feat-font-size:48px;--e-global-typography-h3block-font-size:34px;--e-global-typography-h3solution-font-size:28px;--e-global-typography-h4panel-font-size:24px;--e-global-typography-bodylead-font-size:16px;--e-global-typography-bodysm-font-size:14.5px;--e-global-typography-bodyxs-font-size:12.5px;--e-global-typography-btnlabel-font-size:13.5px;--e-global-typography-navlink-font-size:13.5px;}.elementor-kit-6 h1{font-size:56px;}.elementor-kit-6 h2{font-size:46px;}.elementor-kit-6 h3{font-size:34px;}.elementor-kit-6 h4{font-size:24px;}.elementor-kit-6 h5{font-size:18px;}.elementor-kit-6 h6{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-primary-font-size:32px;--e-global-typography-secondary-font-size:16.5px;--e-global-typography-text-font-size:15.5px;--e-global-typography-accent-font-size:10.5px;--e-global-typography-h1hero-font-size:34px;--e-global-typography-h2feat-font-size:34px;--e-global-typography-h3block-font-size:26px;--e-global-typography-h3solution-font-size:24px;--e-global-typography-h4panel-font-size:22px;--e-global-typography-bodylead-font-size:15.5px;--e-global-typography-bodysm-font-size:14px;--e-global-typography-bodyxs-font-size:12.5px;--e-global-typography-btnlabel-font-size:13.5px;--e-global-typography-navlink-font-size:13.5px;font-size:15.5px;}.elementor-kit-6 h1{font-size:34px;}.elementor-kit-6 h2{font-size:32px;}.elementor-kit-6 h3{font-size:26px;}.elementor-kit-6 h4{font-size:22px;}.elementor-kit-6 h5{font-size:17px;}.elementor-kit-6 h6{font-size:15.5px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
RosterUp - component layer
Ported 1:1 from the React/Tailwind build of rosterup.eu
Brand colours and fonts are NOT here - they live in
Site Settings > Global Colors and Site Settings > Global Fonts.
Only what Elementor's controls cannot express lives here:
layered multi-shadows, masked gradients, keyframes, prose typography.
========================================================================== */
:root{
--ru-flame:#FF5500;
--ru-flame-700:#B93B00;
--ru-ink:#0D0E10;
--ru-ink-mute:#5F6368;
--ru-line:#ECECEC;
--ru-line-strong:#E2E3E6;
/* the one place to change either gradient */
--ru-btn-gradient:linear-gradient(180deg,#FF7733 0%,#FF5500 60%,#E64A00 100%);
--ru-plate-gradient:linear-gradient(180deg,#FFF5ED 0%,#FFE6D4 100%);
--ru-plate-grey:linear-gradient(180deg,#F7F7F8 0%,#ECECEE 100%);
--ru-ease:cubic-bezier(.2,.8,.2,1);
--ru-spring:cubic-bezier(.34,1.4,.64,1);
}
/* ---------- base ---------- */
html{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
scroll-behavior:smooth;
}
body{overflow-x:hidden;}
::selection{background:rgba(255,85,0,.18);color:var(--ru-ink);}
:focus-visible{outline:2px solid var(--ru-flame);outline-offset:3px;border-radius:6px;}
/* stop the fixed header covering a section you jump to */
:where(.elementor-element[id],section[id],div[id]){scroll-margin-top:110px;}
/* ---------- buttons ---------- */
.elementor-button{
background-image:var(--ru-btn-gradient);
box-shadow:0 1px 0 0 rgba(255,255,255,.35) inset,
0 0 0 1px rgba(255,85,0,.35),
0 12px 28px -10px rgba(255,85,0,.55);
transition:transform .22s var(--ru-spring),box-shadow .22s ease,filter .22s ease;
}
.elementor-button:hover{
transform:translateY(-1px);
filter:brightness(1.04);
box-shadow:0 1px 0 0 rgba(255,255,255,.45) inset,
0 0 0 1px rgba(255,85,0,.5),
0 16px 36px -10px rgba(255,85,0,.6);
}
.elementor-button:active{transform:translateY(0);filter:brightness(.97);}
/* secondary button - add the CSS class "ru-btn-ghost" to the widget */
.ru-btn-ghost .elementor-button{
background-image:none;
background-color:#fff;
color:var(--ru-ink);
border:1px solid var(--ru-line-strong);
box-shadow:none;
}
.ru-btn-ghost .elementor-button:hover{
filter:none;
border-color:#D4D6DA;
box-shadow:0 8px 22px -16px rgba(15,17,21,.25);
}
/* ---------- fixed header shell: let clicks through the empty area ---------- */
.ru-header-shell{pointer-events:none;}
.ru-header-shell > *{pointer-events:auto;}
/* ---------- circular icon badge inside a primary button ---------- */
.ru-btn-badge .elementor-button-content-wrapper{align-items:center;}
.ru-btn-badge .elementor-button-icon{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.2);flex:0 0 auto;
}
.ru-btn-badge .elementor-button-icon svg{width:13px;height:13px;}
/* ---------- surface card ---------- */
.ru-card{
box-shadow:0 1px 0 0 rgba(255,255,255,.9) inset,
0 1px 2px rgba(15,17,21,.04),
0 18px 40px -24px rgba(15,17,21,.16);
transition:transform .28s var(--ru-ease),box-shadow .28s ease,border-color .28s ease;
}
.ru-card:hover{
transform:translateY(-2px);
border-color:rgba(255,85,0,.28) !important;
box-shadow:0 1px 0 0 #fff inset,
0 2px 4px rgba(15,17,21,.05),
0 30px 60px -28px rgba(255,85,0,.22);
}
/* ---------- header pill ---------- */
.ru-header-pill{
/* background colour is set natively on the container so you can edit it in the panel */
-webkit-backdrop-filter:saturate(180%) blur(14px);
backdrop-filter:saturate(180%) blur(14px);
box-shadow:0 1px 0 0 rgba(255,255,255,.9) inset,
0 1px 2px rgba(15,17,21,.04),
0 18px 40px -24px rgba(15,17,21,.18);
}
/* ---------- problem card: grey plate warms to flame on hover ---------- */
.ru-problem-card{
box-shadow:0 1px 0 0 rgba(255,255,255,.9) inset,
0 1px 2px rgba(15,17,21,.04),
0 14px 30px -22px rgba(15,17,21,.14);
transition:transform .28s var(--ru-ease),box-shadow .28s ease,border-color .28s ease;
}
.ru-problem-card:hover{
transform:translateY(-2px);
border-color:rgba(255,85,0,.24) !important;
box-shadow:0 1px 0 0 #fff inset,
0 2px 4px rgba(15,17,21,.05),
0 24px 50px -24px rgba(255,85,0,.20);
}
.ru-plate-grey{
background-image:var(--ru-plate-grey);
transition:background-image .28s ease,border-color .28s ease;
}
.ru-plate-grey .elementor-icon{color:var(--ru-ink-mute);transition:color .28s ease;}
.ru-problem-card:hover .ru-plate-grey{
background-image:var(--ru-plate-gradient);
border-color:rgba(255,85,0,.22) !important;
}
.ru-problem-card:hover .ru-plate-grey .elementor-icon{color:var(--ru-flame-700);}
/* ---------- solution panel ---------- */
.ru-solution{
box-shadow:0 1px 0 0 rgba(255,255,255,.9) inset,
0 1px 2px rgba(15,17,21,.04),
0 40px 80px -36px rgba(255,85,0,.22),
0 18px 40px -24px rgba(15,17,21,.10);
}
/* ---------- benefit pill ---------- */
.ru-benefit{
box-shadow:0 1px 0 0 rgba(255,255,255,.9) inset,
0 1px 2px rgba(15,17,21,.04),
0 12px 28px -18px rgba(15,17,21,.16);
transition:transform .24s var(--ru-ease),box-shadow .24s ease,border-color .24s ease;
}
.ru-benefit:hover{
transform:translateY(-1px);
border-color:rgba(255,85,0,.28) !important;
box-shadow:0 1px 0 0 #fff inset,
0 2px 4px rgba(15,17,21,.05),
0 20px 40px -22px rgba(255,85,0,.25);
}
/* ---------- soft shadow utility ---------- */
.ru-soft{
box-shadow:0 1px 2px rgba(15,17,21,.04),
0 8px 22px -10px rgba(15,17,21,.08);
}
.ru-mockup{
box-shadow:0 1px 0 0 rgba(255,255,255,.9) inset,
0 1px 2px rgba(15,17,21,.04),
0 40px 80px -32px rgba(255,85,0,.30),
0 18px 40px -24px rgba(15,17,21,.12);
}
/* ---------- hero atmosphere: masked 56px grid ---------- */
.ru-grid-canvas::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background-image:
linear-gradient(rgba(15,17,21,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(15,17,21,.045) 1px,transparent 1px);
background-size:56px 56px;
background-position:-1px -1px;
-webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 40%,#000 30%,transparent 78%);
mask-image:radial-gradient(ellipse 65% 55% at 50% 40%,#000 30%,transparent 78%);
}
/* ---------- live pulse dot ---------- */
.ru-pulse{position:relative;}
.ru-pulse::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:var(--ru-flame);
animation:ru-ping 1.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ru-ping{75%,100%{transform:scale(2);opacity:0;}}
/* ---------- court line art sits behind card content ---------- */
.ru-court{opacity:.05;transition:opacity .28s ease;}
.ru-card:hover .ru-court{opacity:.09;}
.ru-court svg{width:100%;height:100%;display:block;}
/* ---------- tabular figures for scores and counts ---------- */
.ru-num{font-variant-numeric:tabular-nums;}
/* ---------- legal page prose ---------- */
.ru-prose{font-size:15.5px;line-height:1.75;color:#2A2C30;}
.ru-prose > * + *{margin-top:1em;}
.ru-prose h2{
font-family:Sora,system-ui,sans-serif;font-weight:700;font-size:22px;
letter-spacing:-.02em;line-height:1.25;color:var(--ru-ink);
margin-top:2em;margin-bottom:.6em;scroll-margin-top:110px;
}
.ru-prose h2:first-child{margin-top:0;}
.ru-prose h3{
font-family:Sora,system-ui,sans-serif;font-weight:600;font-size:17px;
letter-spacing:-.01em;line-height:1.35;color:var(--ru-ink);
margin-top:1.6em;margin-bottom:.5em;
}
.ru-prose p{color:#2A2C30;}
.ru-prose strong{color:var(--ru-ink);font-weight:600;}
.ru-prose a{
color:var(--ru-flame);text-decoration:underline;
text-underline-offset:3px;text-decoration-thickness:1px;
transition:color .2s ease;
}
.ru-prose a:hover{color:var(--ru-flame-700);}
.ru-prose ul,.ru-prose ol{padding-left:1.4em;}
.ru-prose ul{list-style:disc;}
.ru-prose ol{list-style:decimal;}
.ru-prose li{margin-top:.4em;}
.ru-prose li::marker{color:var(--ru-flame);}
.ru-prose hr{border:0;border-top:1px solid var(--ru-line);margin:2em 0;}
.ru-prose .ru-meta{
margin-top:0;padding:14px 18px;border:1px solid var(--ru-line);
border-radius:14px;background:#FAFAFA;font-size:14px;line-height:1.7;
}
.ru-prose .ru-meta p{margin:0;}
/* ---------- flame accent word inside a heading ---------- */
.ru-accent{color:var(--ru-flame);}
/* ---------- hero atmosphere: warm radial + top/bottom fades ---------- */
.ru-hero{position:relative;isolation:isolate;overflow:hidden;}
.ru-hero::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:
linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 128px),
linear-gradient(to bottom,rgba(250,250,250,0) calc(100% - 160px),#FAFAFA 100%),
radial-gradient(ellipse 500px 280px at 50% 36%,rgba(255,85,0,.18) 0%,rgba(255,85,0,.06) 35%,rgba(255,85,0,0) 72%);
}
.ru-grid-canvas::before{z-index:-1;}
/* ---------- rotating word pill (Elementor Pro Animated Headline) ---------- */
.ru-rotator .elementor-headline{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:8px;line-height:1.4;
}
.ru-rotator .elementor-headline-dynamic-wrapper{
display:inline-flex;align-items:center;justify-content:center;
/* Elementor's JS sets this wrapper's width to the current word's own width,
which makes no allowance for padding. Under border-box that width ate the
padding, so the pill sat flush against the word and the longest word
("public sharing", 119px) overflowed a 115px pill. content-box lets the
JS width be the text, and the padding becomes real space either side. */
box-sizing:content-box;
height:36px;padding:0 12px;border-radius:999px;
background-image:var(--ru-plate-gradient);
border:1px solid rgba(255,85,0,.22);
box-shadow:0 1px 0 0 rgba(255,255,255,.7) inset,
0 6px 18px -10px rgba(255,85,0,.35);
font-weight:600;letter-spacing:-.01em;font-size:.86em;
overflow:hidden;
}
.ru-rotator .elementor-headline-dynamic-text,
.ru-rotator .elementor-headline-dynamic-wrapper{color:var(--ru-flame-700);}
/* ---------- scroll cue ---------- */
.ru-scroll-cue{transition:color .24s ease,transform .24s var(--ru-ease);}
.ru-scroll-cue:hover{transform:translateY(2px);}
.ru-scroll-rail{position:relative;display:block;width:1px;height:28px;
border-left:1px solid var(--ru-line-strong);overflow:hidden;
transition:border-color .24s ease;}
.ru-scroll-rail::after{content:"";position:absolute;left:-2px;top:0;width:3px;height:8px;
border-radius:999px;background:var(--ru-ink-mute);transform:translateY(-100%);
animation:ru-rail-fall 1.8s cubic-bezier(.5,.1,.5,1) infinite;}
.ru-scroll-cue:hover .ru-scroll-rail{border-color:rgba(255,85,0,.45);}
.ru-scroll-cue:hover .ru-scroll-rail::after{background:var(--ru-flame);}
@keyframes ru-rail-fall{
0%{transform:translateY(-100%);opacity:0}
20%{opacity:1}
80%{opacity:1}
100%{transform:translateY(28px);opacity:0}
}
/* ---------- H1 line breaks ---------- */
.ru-h1 .ru-line{display:block;}
.ru-h1 .ru-line + .ru-line{margin-top:4px;}
/* ---------- scroll cue chevrons ---------- */
.ru-chevs{position:relative;}
.ru-chevs .elementor-widget{position:absolute;top:0;left:0;opacity:0;
animation:ru-chev 1.8s cubic-bezier(.5,.1,.5,1) infinite;}
.ru-chevs .elementor-widget:nth-child(2){animation-delay:.3s;}
@keyframes ru-chev{
0%{transform:translateY(-4px);opacity:0}
50%{opacity:1}
100%{transform:translateY(4px);opacity:0}
}
/* ---------- problem/solution section backdrop ---------- */
.ru-ps{position:relative;isolation:isolate;overflow:hidden;}
.ru-ps::before{
content:"";position:absolute;top:-96px;left:50%;transform:translateX(-50%);
width:820px;height:380px;max-width:100%;z-index:-1;pointer-events:none;
border-radius:999px;filter:blur(120px);opacity:.6;
background:radial-gradient(ellipse at center,rgba(255,85,0,.10) 0%,rgba(255,85,0,.04) 40%,rgba(255,85,0,0) 70%);
}
/* ---------- solution panel decorative glows ---------- */
.ru-solution{position:relative;overflow:hidden;}
.ru-solution::before,.ru-solution::after{
content:"";position:absolute;pointer-events:none;border-radius:999px;filter:blur(48px);
}
.ru-solution::before{
right:-96px;top:-96px;width:320px;height:320px;opacity:.9;
background:radial-gradient(circle,rgba(255,85,0,.22) 0%,rgba(255,85,0,.08) 40%,rgba(255,85,0,0) 75%);
}
.ru-solution::after{
left:-128px;bottom:-120px;width:260px;height:260px;opacity:.8;
background:radial-gradient(circle,rgba(255,85,0,.14) 0%,rgba(255,85,0,.05) 45%,rgba(255,85,0,0) 75%);
}
.ru-solution > *{position:relative;z-index:1;}
/* ---------- stroke icons stay unfilled ---------- */
/* Elementor's icon colour control writes fill onto the svg, which beats the
fill="none" attribute that lucide/tabler line icons rely on. */
.elementor-icon svg[fill="none"]{fill:none !important;}
.elementor-button svg[fill="none"]{fill:none !important;}
/* The Icon List widget writes fill as well, and never a stroke colour, so its
line icons came out filled solid and stroked with whatever colour they
inherited: flame inside a link, ink outside one. Unfill them, then set the
colour that their stroke="currentColor" resolves against. Keep this grey in
step with the Icon Color control in ru-theme.php. */
.elementor-icon-list-icon svg[fill="none"]{fill:none !important;}
.elementor-location-footer .elementor-icon-list-icon{color:#878B93;}
/* ---------- features section: soft top divider ---------- */
.ru-feat{position:relative;isolation:isolate;overflow:hidden;}
.ru-feat::before{content:"";position:absolute;inset:0 0 auto 0;height:64px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#fff,rgba(255,255,255,0));}
/* ---------- sport card: court line art sits behind the content ---------- */
.ru-court-wrap{
position:absolute !important;inset:0;z-index:0;pointer-events:none;
margin:0 !important;width:auto !important;
}
.ru-court{position:absolute;inset:0;}
.ru-court svg{position:absolute;inset:0;width:100%;height:100%;color:#0D0E10;}
.ru-card > *:not(.ru-court-wrap){position:relative;z-index:1;}
/* hover-only warm glow in the card's top-right corner */
.ru-sport-card::after{
content:"";position:absolute;right:-64px;top:-64px;width:160px;height:160px;
border-radius:999px;filter:blur(32px);opacity:0;pointer-events:none;z-index:0;
transition:opacity .5s ease;
background:radial-gradient(circle,rgba(255,85,0,.20) 0%,rgba(255,85,0,.06) 50%,rgba(255,85,0,0) 75%);
}
.ru-sport-card:hover::after{opacity:1;}
.ru-sport-card{position:relative;overflow:hidden;}
/* sport feature pill: border warms with the card */
.ru-sport-pill{transition:border-color .2s ease;}
.ru-sport-card:hover .ru-sport-pill{border-color:#FFE6D4 !important;}
/* ---------- how-it-works: connecting line behind the number bubbles ---------- */
.ru-steps{position:relative;}
.ru-steps::before{content:"";position:absolute;left:24px;right:24px;top:44px;height:1px;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,85,0,0) 0%,rgba(255,85,0,.55) 10%,rgba(255,85,0,.35) 50%,rgba(255,85,0,.55) 90%,rgba(255,85,0,0) 100%);}
@media (max-width:1023px){.ru-steps::before{display:none;}}
/* ---------- pin a card's footer row to the bottom ---------- */
.ru-push{margin-top:auto !important;}
/* ---------- public sharing: warm wash + two soft radials ---------- */
.ru-share{position:relative;isolation:isolate;overflow:hidden;}
.ru-share::before{
content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
background:linear-gradient(to bottom,#fff 0%,#fff7f2 50%,#fff 100%);
}
.ru-share::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:
radial-gradient(ellipse 320px 210px at 95% -10%,rgba(255,85,0,.14) 0%,rgba(255,85,0,.05) 45%,rgba(255,85,0,0) 75%),
radial-gradient(ellipse 280px 190px at 5% 110%,rgba(255,85,0,.10) 0%,rgba(255,85,0,.04) 45%,rgba(255,85,0,0) 75%);
}
/* the mockup column anchors the floating mini cards */
.ru-float-card{box-shadow:0 18px 40px -24px rgba(15,17,21,.18);}
/* single-line truncation inside the mockup address bar */
.ru-truncate,.ru-truncate .elementor-heading-title{
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* ---------- contact: radials mirrored versus the sharing section ---------- */
.ru-contact::after{
background-image:
radial-gradient(ellipse 320px 210px at 5% -10%,rgba(255,85,0,.14) 0%,rgba(255,85,0,.05) 45%,rgba(255,85,0,0) 75%),
radial-gradient(ellipse 280px 190px at 95% 110%,rgba(255,85,0,.10) 0%,rgba(255,85,0,.04) 45%,rgba(255,85,0,0) 75%);
}
/* ---------- contact CTA card ---------- */
.ru-cta-card{
box-shadow:0 1px 0 0 rgba(255,255,255,.9) inset,
0 1px 2px rgba(15,17,21,.04),
0 40px 80px -36px rgba(255,85,0,.28),
0 18px 40px -24px rgba(15,17,21,.10);
}
.ru-divider{
background:linear-gradient(to right,transparent,#E2E3E6,transparent);
}
.ru-contact-row{transition:border-color .2s ease,background-color .2s ease;}
.ru-contact-row:hover{border-color:#FF9D63 !important;background-color:#fff !important;}
.ru-contact-value,.ru-contact-value .elementor-heading-title{transition:color .2s ease;}
.ru-contact-row:hover .ru-contact-value .elementor-heading-title{color:var(--ru-flame-700) !important;}
/* ---------- contact form ---------- */
.ru-form .elementor-field-label{
font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:500;
color:#2A2C30;margin-bottom:6px;
}
.ru-form .elementor-field-group .elementor-field{min-height:48px;}
.ru-form textarea.elementor-field{min-height:120px;padding-top:12px;}
.ru-form .elementor-field-type-honeypot{position:absolute;left:-9999px;height:0;overflow:hidden;}
.ru-form .elementor-message{font-size:13.5px;line-height:1.6;}
.ru-form .elementor-message-success{color:var(--ru-flame-700);}
/* the mobile nav widget hugs its 40px toggle instead of stretching the row */
.ru-nav-mobile{width:auto !important;max-width:none !important;flex:0 0 auto !important;}
/* ---------- header hamburger: 40px circle, same as the React build ---------- */
.ru-header-pill .elementor-nav-menu__toggle{flex:0 0 auto;width:40px;}
.ru-header-pill .elementor-menu-toggle{width:40px;height:40px;padding:0;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
/* ---------- Tailwind's sm: boundary (640px) ----------
Elementor runs on three breakpoints (mobile <=767, tablet <=1023, desktop).
The original design turns card grids two-up at 640px, which falls inside
Elementor's mobile range - so that one boundary is restored here.
The tripled .e-con outranks Elementor's own per-element rule without
!important, so the widths stay editable in the panel everywhere else. */
@media (min-width:640px) and (max-width:767px){
.ru-grid-2up > .e-con.e-con.e-con{ --width:calc(50% - 8px); }
.ru-grid-2up > .e-con.e-con.e-con.ru-span-full{ --width:100%; }
}
/* ---------- footer contact values wrap instead of overflowing ---------- */
.elementor-location-footer .elementor-icon-list-text{
word-break:break-word;min-width:0;
}
.elementor-location-footer .elementor-icon-list-item{align-items:flex-start;}
/* ---------- blog: post cards match .ru-card ---------- */
.ru-blog-grid .elementor-post__card{
border-radius:20px;overflow:hidden;
box-shadow:0 1px 0 0 rgba(255,255,255,.9) inset,
0 1px 2px rgba(15,17,21,.04),
0 18px 40px -24px rgba(15,17,21,.16);
transition:transform .28s var(--ru-ease),box-shadow .28s ease,border-color .28s ease;
}
.ru-blog-grid .elementor-post__card:hover{
transform:translateY(-2px);
border-color:rgba(255,85,0,.28);
box-shadow:0 1px 0 0 #fff inset,
0 2px 4px rgba(15,17,21,.05),
0 30px 60px -28px rgba(255,85,0,.22);
}
.ru-blog-grid .elementor-post__thumbnail__link{border-radius:14px;overflow:hidden;display:block;}
/* Nothing may set `transform` on the cover image. The cards skin centres it
inside its ratio box with transform:translate(-50%,-50%), so any override -
a hover scale, or even transform:none - knocks it out of its frame. */
.ru-blog-grid .elementor-post__badge{
box-shadow:0 6px 18px -8px rgba(255,85,0,.6);
padding:5px 11px;line-height:1;
}
.ru-blog-grid .elementor-post__title{margin:0;}
.ru-blog-grid .elementor-post__title a{transition:color .2s ease;}
.ru-blog-grid .elementor-post__card:hover .elementor-post__title a{color:var(--ru-flame-700);}
.ru-blog-grid .elementor-post__read-more{
display:inline-flex;align-items:center;gap:6px;margin-top:auto;
}
.ru-blog-grid .elementor-post__read-more::after{
content:"";width:12px;height:12px;flex:0 0 auto;
background-color:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition:transform .2s var(--ru-ease);
}
.ru-blog-grid .elementor-post__card:hover .elementor-post__read-more::after{transform:translateX(3px);}
.ru-blog-grid .elementor-post__meta-data{border-top:1px solid var(--ru-line);}
/* the card is a flex column so the read-more line sits on the bottom edge */
.ru-blog-grid .elementor-post__text{display:flex;flex-direction:column;flex:1 1 auto;}
/* ---------- blog: pagination ---------- */
.ru-blog-grid .elementor-pagination .page-numbers{
display:inline-flex;align-items:center;justify-content:center;
min-width:36px;height:36px;padding:0 10px;margin:0 3px;
border:1px solid var(--ru-line-strong);border-radius:999px;background:#fff;
transition:border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.ru-blog-grid .elementor-pagination .page-numbers:hover{border-color:#FF9D63;}
.ru-blog-grid .elementor-pagination .page-numbers.current{
border-color:var(--ru-flame);color:var(--ru-flame);
box-shadow:0 6px 18px -10px rgba(255,85,0,.5);
}
/* ---------- blog: previous / next ---------- */
.ru-post-nav .elementor-post-navigation{
border-top:1px solid var(--ru-line);border-bottom:1px solid var(--ru-line);
padding:18px 0;
}
.ru-post-nav .post-navigation__arrow-wrapper{color:var(--ru-flame);}
/* ---------- blog article: whatever Gutenberg writes ----------
.ru-article extends .ru-prose (the legal-page styles) with the blocks an
article uses and a contract page does not. Articles are written in the
WordPress editor, so nothing here can come from an Elementor control. */
.ru-article{font-size:16.5px;line-height:1.8;}
.ru-article > *:first-child{margin-top:0;}
.ru-article > p:first-of-type{font-size:18px;line-height:1.75;color:#42454A;}
.ru-article h2{font-size:26px;margin-top:1.8em;}
.ru-article h3{font-size:19px;}
.ru-article figure,.ru-article .wp-block-image{margin:2em 0;}
.ru-article img{
display:block;max-width:100%;height:auto;
border:1px solid var(--ru-line);border-radius:14px;
}
.ru-article figcaption,.ru-article .wp-element-caption{
margin-top:10px;font-size:12.5px;line-height:1.6;color:#878B93;text-align:center;
}
.ru-article blockquote{
margin:2em 0;padding:2px 0 2px 20px;
border-left:3px solid var(--ru-flame);
font-size:18px;line-height:1.7;color:var(--ru-ink);font-style:normal;
}
.ru-article blockquote p{margin:0;}
.ru-article blockquote p + p{margin-top:.6em;}
.ru-article blockquote cite,.ru-article blockquote .wp-block-quote__citation{
display:block;margin-top:10px;font-size:13px;color:#878B93;font-style:normal;
}
.ru-article code,.ru-article kbd{
background:#F5F5F6;border:1px solid var(--ru-line);border-radius:6px;
padding:2px 6px;font-size:.88em;
}
.ru-article pre{
background:#0D0E10;color:#F7F7F8;border-radius:14px;
padding:18px 20px;overflow:auto;font-size:13px;line-height:1.6;
}
.ru-article pre code{background:none;border:0;padding:0;color:inherit;}
.ru-article table{width:100%;border-collapse:collapse;font-size:14.5px;}
.ru-article th,.ru-article td{border:1px solid var(--ru-line);padding:10px 12px;text-align:left;}
.ru-article th{background:#FAFAFA;font-weight:600;color:var(--ru-ink);}
.ru-article hr,.ru-article .wp-block-separator{border:0;border-top:1px solid var(--ru-line);margin:2.5em 0;}
.ru-article .wp-block-button__link{
display:inline-block;padding:13px 22px;border-radius:999px;
background-image:var(--ru-btn-gradient);color:#fff;font-weight:600;font-size:13.5px;
text-decoration:none;
box-shadow:0 1px 0 0 rgba(255,255,255,.35) inset,
0 0 0 1px rgba(255,85,0,.35),
0 12px 28px -10px rgba(255,85,0,.55);
}
.ru-article .wp-block-embed iframe,.ru-article iframe{max-width:100%;border-radius:14px;border:0;}
.ru-article .wp-block-embed__wrapper{position:relative;}
/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}/* End custom CSS */