/* doitbest — page module styles. All scoped under body.gb-doitbest-tpl. Foundation tokens + Zuume/Alternox fonts come from the shared assets/colors_and_type.css (enqueued by the theme). */ /* --- Header offset: pull hero under the transparent Elementor header --- */ body.gb-doitbest-tpl { --gb-header-h: 130px; } @media (max-width:920px){ body.gb-doitbest-tpl { --gb-header-h: 120px; } } @media (max-width:760px){ body.gb-doitbest-tpl { --gb-header-h: 100px; } } body.gb-doitbest-tpl #content, body.gb-doitbest-tpl .site-content { padding-top:0!important; margin-top:0!important; } body.gb-doitbest-tpl .gb-app { margin-top: calc(-1 * var(--gb-header-h)) !important; } body.gb-doitbest-tpl [data-hero] { padding-top: calc(var(--gb-header-h) + 28px) !important; } /* --- Smooth in-page anchor scrolling. The design export set this on ; it was dropped when the page CSS was scoped (you can't nest html under a body class), so jump links snapped instantly. Re-scoped to this page via :has(). scroll-padding-top keeps anchored sections clear of the transparent sticky Elementor header (header is 130/120/100 + breathing room). --- */ html:has(body.gb-doitbest-tpl) { scroll-behavior: smooth; scroll-padding-top: 146px; } @media (max-width:920px){ html:has(body.gb-doitbest-tpl) { scroll-padding-top: 136px; } } @media (max-width:760px){ html:has(body.gb-doitbest-tpl) { scroll-padding-top: 116px; } } @media (prefers-reduced-motion:reduce){ html:has(body.gb-doitbest-tpl) { scroll-behavior: auto; } } /* --- Page base (scoped) --- */ body.gb-doitbest-tpl { background:#0E1E36; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* --- Base typography. Restored from the export's app-root wrapper (which was stripped along with the chrome): most eyebrows/labels carry no inline font-family and inherit it from here. Elements with an explicit inline font (Zuume display headings) still win, so only the inheriting labels are affected. --- */ body.gb-doitbest-tpl .gb-app { font-family: var(--font-sans); color: #fff; position: relative; } /* Form controls (button/input/select/textarea) do NOT inherit font-family by default — force them to pick up the base sans so FAQ toggles, hero buttons, and the form input render in Helvetica too. Inline display fonts still win. */ body.gb-doitbest-tpl .gb-app button, body.gb-doitbest-tpl .gb-app input, body.gb-doitbest-tpl .gb-app select, body.gb-doitbest-tpl .gb-app textarea { font-family: inherit; } /* --- keyframes --- */ @keyframes gbOnair{0%,100%{box-shadow:0 0 0 3px rgba(255,24,148,.35);}50%{box-shadow:0 0 0 9px rgba(255,24,148,0);}} @keyframes gbEq{0%,100%{transform:scaleY(.32);}50%{transform:scaleY(1);}} @keyframes gbFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}} @keyframes gbMarquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}} @keyframes gbSpin{to{transform:rotate(360deg);}} @keyframes gbPing{0%{transform:scale(1);opacity:.5;}80%,100%{transform:scale(2.1);opacity:0;}} @keyframes gbReveal{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}} @keyframes gbRiseIn{from{transform:translateY(115%);}to{transform:translateY(0);}} /* --- scoped rules --- */ body.gb-doitbest-tpl *{box-sizing:border-box;} body.gb-doitbest-tpl{margin:0;padding:0;background:#0E1E36;-webkit-font-smoothing:antialiased;overflow-x:hidden;} body.gb-doitbest-tpl ::selection{background:#FF1894;color:#fff;} body.gb-doitbest-tpl ::-webkit-scrollbar{width:11px;height:11px;} body.gb-doitbest-tpl ::-webkit-scrollbar-track{background:#0a1730;} body.gb-doitbest-tpl ::-webkit-scrollbar-thumb{background:linear-gradient(#FF1894,#0092D6);border-radius:99px;} body.gb-doitbest-tpl .gb-rev{animation:gbReveal .7s cubic-bezier(.22,1,.36,1) both;} body.gb-doitbest-tpl .gb-rise{animation:gbRiseIn .8s cubic-bezier(.22,1,.36,1) both;} body.gb-doitbest-tpl [data-grain]::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} body.gb-doitbest-tpl a:focus-visible, body.gb-doitbest-tpl button:focus-visible, body.gb-doitbest-tpl input:focus-visible, body.gb-doitbest-tpl textarea:focus-visible{outline:3px solid #0092D6;outline-offset:2px;border-radius:4px;} /* --- responsive --- */ @media(prefers-reduced-motion:reduce){ body.gb-doitbest-tpl .gb-rev, body.gb-doitbest-tpl .gb-rise{animation:none!important;} } @media(max-width:760px){ /* Page-level horizontal lock. The carousels below bleed edge-to-edge with margin:0 -20px and decorative glows sit at negative x; body{overflow-x:hidden} doesn't reliably contain that on the live Elementor page (scroll lands on ). Clip at the page's own wrapper instead — it holds all 16 sections. Use `clip`, not `hidden`: `hidden` would force overflow-y to auto and make .gb-app a vertical scroll container (breaks the sticky header). The carousels keep their own overflow-x:auto, so only they scroll sideways. */ body.gb-doitbest-tpl .gb-app, body.gb-doitbest-tpl #main{overflow-x:clip!important;} body.gb-doitbest-tpl section{padding-top:54px!important;padding-bottom:54px!important;} body.gb-doitbest-tpl h1{font-size:clamp(38px,11vw,54px)!important;} body.gb-doitbest-tpl [data-reveal]{opacity:1!important;transform:none!important;} body.gb-doitbest-tpl [data-tilt]{transform:none!important;} body.gb-doitbest-tpl [data-hero]>img{display:none!important;} body.gb-doitbest-tpl [data-herogrid]{display:flex!important;flex-direction:column!important;gap:26px!important;} body.gb-doitbest-tpl [data-herogrid]>*:first-child{order:1!important;} body.gb-doitbest-tpl [data-herogrid]>*:last-child{order:2!important;} body.gb-doitbest-tpl [data-feature], body.gb-doitbest-tpl [data-answergrid], body.gb-doitbest-tpl [data-footlead]{display:grid!important;grid-template-columns:1fr!important;gap:26px!important;} body.gb-doitbest-tpl [data-footmap]{display:grid!important;grid-template-columns:1fr 1fr!important;gap:28px 22px!important;} body.gb-doitbest-tpl [data-grid4]{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;} body.gb-doitbest-tpl [data-grid3], body.gb-doitbest-tpl [data-grid2], body.gb-doitbest-tpl [data-ways], body.gb-doitbest-tpl [data-steps]{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px!important;margin:0 -20px!important;padding:4px 20px 20px!important;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#FF1894 rgba(140,150,170,.22);} body.gb-doitbest-tpl [data-grid3]>*, body.gb-doitbest-tpl [data-grid2]>*, body.gb-doitbest-tpl [data-ways]>*, body.gb-doitbest-tpl [data-steps]>*{flex:0 0 84%!important;scroll-snap-align:start;min-width:0;} /* Live At The Market: more breathing room above and between the during/after/always cards on mobile */ body.gb-doitbest-tpl #live [data-grid3]{margin-top:58px!important;gap:22px!important;} body.gb-doitbest-tpl [data-grid3]::-webkit-scrollbar, body.gb-doitbest-tpl [data-grid2]::-webkit-scrollbar, body.gb-doitbest-tpl [data-ways]::-webkit-scrollbar, body.gb-doitbest-tpl [data-steps]::-webkit-scrollbar{height:5px;} body.gb-doitbest-tpl [data-grid3]::-webkit-scrollbar-thumb, body.gb-doitbest-tpl [data-grid2]::-webkit-scrollbar-thumb, body.gb-doitbest-tpl [data-ways]::-webkit-scrollbar-thumb, body.gb-doitbest-tpl [data-steps]::-webkit-scrollbar-thumb{background:#FF1894;border-radius:99px;} body.gb-doitbest-tpl [data-grid3]::-webkit-scrollbar-track, body.gb-doitbest-tpl [data-grid2]::-webkit-scrollbar-track, body.gb-doitbest-tpl [data-ways]::-webkit-scrollbar-track, body.gb-doitbest-tpl [data-steps]::-webkit-scrollbar-track{background:rgba(140,150,170,.18);border-radius:99px;} body.gb-doitbest-tpl [data-watermark]{display:none!important;} body.gb-doitbest-tpl [data-hidemob]{display:none!important;} body.gb-doitbest-tpl [data-featgrid]{grid-template-columns:1fr!important;} body.gb-doitbest-tpl [data-defrow]{grid-template-columns:1fr!important;gap:3px 0!important;padding:12px 0!important;} body.gb-doitbest-tpl [data-defrow]>span{padding-top:0!important;} body.gb-doitbest-tpl [data-herobadge]{display:none!important;} body.gb-doitbest-tpl [data-statgrid]{gap:16px!important;} body.gb-doitbest-tpl [data-statgrid]>*{padding:22px 20px!important;} body.gb-doitbest-tpl [data-mobfirst]{order:-1!important;} body.gb-doitbest-tpl [data-testiblock]{margin-top:40px!important;} body.gb-doitbest-tpl section[aria-label="Common questions"]{padding-top:11px!important;padding-bottom:11px!important;} body.gb-doitbest-tpl [data-qstrip]{gap:7px!important;} body.gb-doitbest-tpl [data-qstrip] a{font-size:11px!important;padding:6px 11px!important;} body.gb-doitbest-tpl [data-qstrip] > span{font-size:9.5px!important;letter-spacing:.1em!important;} } @media (prefers-reduced-motion:reduce){ body.gb-doitbest-tpl *{animation:none!important;} }