:root{--page-title-display:none;}body.elementor-page-23667{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS *//* ============================================================== FUTURE BRIDGE - 9th U.S. DATA CENTER POWER & CAPACITY SUMMIT PAGE BACKGROUND - OPTION C: "QUIET" (v3 - brochure light theme) WHAT CHANGED FROM v2 Same structure, inverted palette. The page canvas is now white with a faint cool wash instead of near-black, cards are white instead of #0B121C, and the accents are the brochure orange #EF5A28 and slate #5C7A94. The white-wrapper fix in part 1 is still needed and still does the same job: it stops a theme wrapper painting its own colour over the canvas. On a light page a stray white wrapper is invisible rather than obvious, but leaving it in keeps the alternating-section tint working. PASTE INTO: Elementor > Page Settings > Advanced > Custom CSS Replace the whole of the old file - do not paste this after it. ============================================================== */ /* ---------- 1. KILL THE OPAQUE WRAPPERS ---------- */ /* If the alternating sections look flat after pasting this, see the TROUBLESHOOTING note at the bottom - one body.elementor-page-23667 is missing and it takes 20 seconds to find. */ html, body, #page, #content, #main, #primary, #wrapper, .site, .site-content, .site-main, .content-area, main, article, .hentry, .entry, .entry-content, .page-content, .wp-site-blocks, .is-layout-flow, .elementor, .elementor-page, .elementor-section-wrap, .elementor-section, .elementor-container, .e-con, .e-con-inner, .elementor-widget-container, .elementor-widget-html, .jeg_content, .jeg_main, .jeg_container, .jeg_viewport{ background-color:transparent !important; background-image:none !important; } /* ---------- 2. THE BACKGROUND ITSELF ---------- */ /* Painted on , so it is the browser canvas - nothing can cover it and no z-index games are needed. */ html{ background-color:#FFFFFF !important; background-image: /* the faintest cool centre so long scrolls do not feel like a blank sheet */ radial-gradient(ellipse 120% 70% at 50% 38%, rgba(92,122,148,.10), transparent 72%), linear-gradient(180deg,#FFFFFF 0%, #F3F7FA 55%, #FFFFFF 100%) !important; background-attachment:fixed !important; background-repeat:no-repeat !important; background-size:cover !important; } /* ---------- 2b. DARK FADE AT TOP AND BOTTOM ---------- */ /* Anchored to the document, not the viewport. If these were on the fixed canvas in part 2 they would stay pinned to the top and bottom of the screen the whole way down the page. Tune with the two variables. Height is how far the colour reaches into the page; the colour is the heading slate #4A6880, the same grey-blue the titles use, so the fade reads as part of the palette rather than as a separate grey. It is dark enough that white text still sits on it comfortably at the very edge. */ body{position:relative} body::before, body::after{ content:""; position:absolute;left:0;right:0;z-index:0;pointer-events:none; height:var(--fb-fade-h,540px); } body::before{ top:0; background:linear-gradient(180deg, var(--fb-fade-c,#4A6880) 0%, rgba(74,104,128,.62) 42%, rgba(74,104,128,0) 100%); } body::after{ bottom:0; background:linear-gradient(0deg, var(--fb-fade-c,#4A6880) 0%, rgba(74,104,128,.62) 42%, rgba(74,104,128,0) 100%); } /* THE TOP FADE IS MOSTLY HIDDEN. The hero paints a white scrim across its whole section, so the top fade only shows in the gap above it - which on most themes is the header strip. If you want it visible through the hero, lighten the hero scrim in block 01 instead of raising the height here, or the header will go very dark. */ /* THE BOTTOM FADE NEEDS THE CLOSING BLOCK TO GET OUT OF THE WAY. Block 15 paints its own pale radial. These rules drop it and flip the final call to action to light text so it reads as the dark end of the page. Delete this group if you would rather keep the closer light - the fade will then only show below the last block. */ .fbw .fbw-final{background:transparent !important} .fbw .fbw-final h2{color:#F2F7FB} .fbw .fbw-final p{color:rgba(233,241,248,.72)} .fbw .fbw-final .fbw-eyebrow{color:#FF8A5B} .fbw .fbw-final .fbw-eyebrow::before{background:linear-gradient(90deg,#FF8A5B,transparent)} .fbw .fbw-final .fbw-accent{ background:linear-gradient(96deg,#FF7A45,#FFB08A 45%,#9FB8CB); -webkit-background-clip:text;background-clip:text;color:transparent; } .fbw .fbw-final .fbw-btn--ghost{ border-color:rgba(255,255,255,.28);color:#F2F7FB;background:rgba(255,255,255,.04); } .fbw .fbw-final .fbw-btn--ghost:hover{border-color:#FF8A5B;color:#FF8A5B} /* ---------- 3. LET THE BLOCKS BREATHE ---------- */ .fbw, .fbw .fbw-sec{background:transparent !important} /* Alternating sections: a hair darker, nothing more */ .fbw .fbw-sec--alt{ background:rgba(30,58,84,.038) !important; } /* Seam between blocks - the only ornament in the file */ .fbw + .fbw::before{ content:""; position:absolute;top:0;left:0;right:0;height:1px;z-index:5;pointer-events:none; background:linear-gradient(90deg, transparent, rgba(30,58,84,.16) 25%, rgba(30,58,84,.16) 75%, transparent); } .fbw .fbw-gridbg{display:none} .fbw .fbw-glow{opacity:.5} /* Cards stay solid white. On a light canvas the separation comes from the card borders and shadows in each block, not from fill. */ .fbw .fbw-topic,.fbw .fbw-spk,.fbw .fbw-why,.fbw .fbw-pc, .fbw .fbw-quote,.fbw .fbw-relc,.fbw .fbw-sp,.fbw .fbw-tier, .fbw .fbw-pe__card,.fbw .fbw-form,.fbw .fbw-ecard, .fbw .fbw-cd__b{ background-color:#FFFFFF !important; } /* The band and the open partnership slots keep their own gradients, so they are deliberately left out of the sweep above. */ /* Logo cells were already white and stay that way. */ .fbw .fbw-cell, .fbw .fbw-logo, .fbw .fbw-tier__box, .fbw .fbw-sp__logo{background-color:#fff !important} .fbw-hero{background:transparent !important} .fbw-hero__video{background-color:#fff !important} /* ---------- 4. DETAILS ---------- */ ::selection{background:rgba(239,90,40,.22);color:#1D2B39} html{scroll-behavior:smooth} ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:#F3F7FA} ::-webkit-scrollbar-thumb{background:#C3D0DB;border-radius:10px;border:3px solid #F3F7FA} ::-webkit-scrollbar-thumb:hover{background:#EF5A28} html{scrollbar-color:#C3D0DB #F3F7FA;scrollbar-width:thin} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ============================================================== TROUBLESHOOTING - sections all look the same shade? Then your theme uses a wrapper class not in the list in part 1, and it is painting solid white over the alternating tint. Find it in 20 seconds: 1. Open the published page, right-click on the area that should be tinted, choose Inspect. 2. In the Styles panel look for whichever rule sets background / background-color to white or #fff. 3. Copy that element's class or id (e.g. .jeg_content_wrapper). 4. Add it to the list in part 1, before the closing brace: .jeg_content_wrapper, Send me a screenshot of the Inspect panel and I will tell you which body.elementor-page-23667 to add. ============================================================== TUNING THE FADES Both are driven by two variables. Set them on html, at the top of this file or in the browser while you look at the page: html{--fb-fade-h:540px; /* how far the colour reaches in */ --fb-fade-c:#4A6880;/* the darkest point */ } Shorter and softer: --fb-fade-h:360px Taller and heavier: --fb-fade-h:760px The default #4A6880 is the heading colour. Related options: --fb-fade-c:#5C7A94 the lighter brochure slate, softer --fb-fade-c:#4A6880 the heading slate - the default --fb-fade-c:#33495C a darker version of the same hue Note the mid-stop at 42% is written out in rgba rather than as a variable, so if you pick a very different grey, update those two rgba values to match or the fade will band. To keep the top fade and drop the bottom one (or the reverse), set the height to 0 on the one you do not want: body::before{height:0} ============================================================== NOTE: body::before and body::after are now both in use by the fades. The optional grid and vignette from the previous version of this file needed those same pseudo-elements, so they cannot both be on. If you want the grid back, put it on .elementor-page::after instead and give it position:fixed. ============================================================== *//* End custom CSS */