/* GameYogi — UI enhancement layer (added by request). Adds animations + polish ON TOP of the existing theme. Does not remove or change any content, menus, logo, or links. Brand colours match the live site: teal #0f4c5c / #023047, orange #ff9700. */ :root{ --gy-orange:#ff9700; --gy-teal:#0f4c5c; --gy-teal-d:#023047; } /* ---------- scroll reveal (JS toggles .gy-in) ---------- */ .gy-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .gy-reveal.gy-in{opacity:1;transform:none} .gy-reveal.d1{transition-delay:.06s}.gy-reveal.d2{transition-delay:.12s} .gy-reveal.d3{transition-delay:.18s}.gy-reveal.d4{transition-delay:.24s} .gy-reveal.d5{transition-delay:.3s}.gy-reveal.d6{transition-delay:.36s} /* ---------- game card hover lift (the games grid) ---------- */ .gameappicons .instance-11, .gameappicons [class*="vc_col-sm-4"]{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease} .gameappicons .instance-11:hover, .gameappicons [class*="vc_col-sm-4"]:hover{transform:translateY(-8px);box-shadow:0 22px 40px -18px rgba(2,48,71,.55);z-index:2} .gameappicons .img-with-animation{transition:transform .5s cubic-bezier(.2,.7,.2,1)} .gameappicons .instance-11:hover .img-with-animation, .gameappicons [class*="vc_col-sm-4"]:hover .img-with-animation{transform:scale(1.06)} /* nav link underline grow */ header#top .sf-menu > li > a:after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:2px;background:var(--gy-orange);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;border-radius:2px} header#top .sf-menu > li:hover > a:after{transform:scaleX(1)} /* buttons get a subtle pop */ a.nectar-button,.nectar-button,a.button{transition:transform .2s ease,box-shadow .2s ease!important} a.nectar-button:hover,.nectar-button:hover,a.button:hover{transform:translateY(-2px)} /* respect reduced motion */ @media (prefers-reduced-motion: reduce){ .gy-reveal{opacity:1!important;transform:none!important;transition:none!important} .gameappicons .instance-11:hover,.gameappicons [class*="vc_col-sm-4"]:hover{transform:none} } /* Desktop dropdowns/megamenus are left ENTIRELY to the theme (same as the live site) so every Solutions/Services item shows and all menu functions work. We only recolour them for the dark theme further below. */ /* ========================================================= Lock the off-canvas (mobile) menu + its overlay hidden until it is actually opened. Without this, the static clone renders the entire menu (a link to every page) inline on the page, which looks like "all pages showing on the home page". The theme adds body.material-ocm-open when the hamburger opens it. ========================================================= */ #slide-out-widget-area, #slide-out-widget-area-bg{ visibility:hidden !important; opacity:0 !important; pointer-events:none !important; transition:opacity .35s ease, visibility .35s ease; } body.material-ocm-open #slide-out-widget-area, body.material-ocm-open #slide-out-widget-area-bg{ visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } /* a clean panel for the opened mobile menu */ body.material-ocm-open #slide-out-widget-area{ position:fixed !important;top:0 !important;right:0 !important; width:min(360px,86vw) !important;height:100% !important;z-index:100000 !important; background:#023047 !important;overflow-y:auto !important; padding:84px 34px 40px !important;box-shadow:-20px 0 60px -20px rgba(0,0,0,.6) !important; } body.material-ocm-open #slide-out-widget-area-bg{ position:fixed !important;inset:0 !important;z-index:99999 !important; background:rgba(2,24,36,.6) !important; } #slide-out-widget-area .off-canvas-menu-container .sub-menu{display:block !important} #slide-out-widget-area .off-canvas-menu-container a{color:#fff !important} /* Make sure the new most-popular-games hero always renders full-width and is never collapsed by the theme's row/column layout. */ .gy-hero{display:block !important;width:100% !important;float:none !important;clear:both !important;box-sizing:border-box;position:relative;z-index:1} .gy-hero .gy-reel{min-height:240px} /* ========================================================= Animated gaming background (site-wide), placed BEHIND all content so text stays readable. Header keeps its own white background, so the logo and "GameYogi" name are untouched. Light, brand-tinted base (teal #0f4c5c / orange #ff8e29) keeps dark body text legible. ========================================================= */ /* ===== DARK GAMING THEME — applies to the whole site EXCEPT the header. The header (#header-outer / #top) is never targeted, so the logo and the "GameYogi" name keep their exact colour, font and design. ===== */ html{background:#080b11 !important} body{background:transparent !important} /* ---- animated neon background ---- */ #gy-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background: radial-gradient(1100px 600px at 82% -8%, rgba(255,142,41,.20), transparent 60%), radial-gradient(1000px 720px at 6% 2%, rgba(0,200,255,.16), transparent 56%), radial-gradient(900px 760px at 50% 116%, rgba(124,77,255,.18), transparent 60%), linear-gradient(180deg,#080b11 0%,#0b1019 48%,#06090f 100%); } #gy-bg .gy-glow{position:absolute;border-radius:50%;filter:blur(100px);will-change:transform} #gy-bg .g1{width:500px;height:500px;background:rgba(0,200,255,.32);top:-140px;left:-110px;animation:gybgA 20s ease-in-out infinite} #gy-bg .g2{width:560px;height:560px;background:rgba(255,142,41,.28);bottom:-180px;right:-120px;animation:gybgB 24s ease-in-out infinite} #gy-bg .g3{width:380px;height:380px;background:rgba(124,77,255,.26);top:46%;left:55%;animation:gybgC 28s ease-in-out infinite} #gy-bg .gy-grid{ position:absolute;inset:0; background-image:linear-gradient(rgba(120,200,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,200,255,.07) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse 95% 85% at 50% 26%,#000,transparent 88%); mask-image:radial-gradient(ellipse 95% 85% at 50% 26%,#000,transparent 88%); } #gy-bg canvas{position:absolute;inset:0} @keyframes gybgA{0%,100%{transform:translate(0,0)}50%{transform:translate(70px,50px)}} @keyframes gybgB{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,-40px)}} @keyframes gybgC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,30px) scale(1.1)}} @media (prefers-reduced-motion: reduce){#gy-bg .gy-glow{animation:none}} /* ---- content text -> light (scoped to content + footer; NEVER the header) ---- */ #ajax-content-wrap{color:#c4cfdb} #ajax-content-wrap .main-content p, #ajax-content-wrap .main-content li, #ajax-content-wrap .main-content td, #ajax-content-wrap .main-content blockquote, #ajax-content-wrap .main-content .wpb_text_column, #ajax-content-wrap .main-content span:not(.menu-title-text):not([class*="gy-"]){color:#c4cfdb !important} #ajax-content-wrap .main-content h1, #ajax-content-wrap .main-content h2, #ajax-content-wrap .main-content h3, #ajax-content-wrap .main-content h4, #ajax-content-wrap .main-content h5, #ajax-content-wrap .main-content h6{color:#f3f7fc !important} #ajax-content-wrap .main-content a:not(.nectar-button):not(.gy-btn){color:#ffb45a} #ajax-content-wrap .main-content a:not(.nectar-button):not(.gy-btn):hover{color:#ff8e29} /* ---- turn light/white content panels into dark "glass" so light text reads ---- */ #ajax-content-wrap .main-content [style*="background-color: #f2f2f2"], #ajax-content-wrap .main-content [style*="background-color:#f2f2f2"], #ajax-content-wrap .main-content [style*="background-color: #ffffff"], #ajax-content-wrap .main-content [style*="background-color:#ffffff"], #ajax-content-wrap .main-content [style*="background-color: #fff;"], #ajax-content-wrap .main-content [style*="background-color: #f9f9f9"], #ajax-content-wrap .main-content [style*="background-color: #fafafa"]{ background-color:rgba(255,255,255,.045) !important; border:1px solid rgba(120,200,255,.10); backdrop-filter:blur(2px); } #ajax-content-wrap .main-content .nectar-fancy-box .box-bg{background-color:rgba(255,255,255,.05) !important} /* form fields dark */ #ajax-content-wrap input:not([type=submit]):not([type=button]), #ajax-content-wrap textarea, #ajax-content-wrap select{background:rgba(255,255,255,.05) !important;color:#eaf1f8 !important;border-color:rgba(120,200,255,.18) !important} /* footer text light (footers are usually dark already) */ #footer-outer, #footer-outer p, #footer-outer li, #footer-outer a, #footer-outer h1, #footer-outer h2, #footer-outer h3, #footer-outer h4{color:#aab6c4} /* neon hover glow on the game cards */ .gameappicons .instance-11:hover, .gameappicons [class*="vc_col-sm-4"]:hover{box-shadow:0 18px 40px -14px rgba(0,200,255,.45) !important} /* === force page base dark (beats theme specificity) === */ html{background:#080b11 !important} html body, html body .ocm-effect-wrap, html body .ocm-effect-wrap-inner, html body #ajax-content-wrap, html body .container-wrap, html body .container.main-content, html body .container-wrap .container.main-content{background-color:transparent !important;background-image:none !important} /* ===== DARK THEME v2 — header bar, teal banners, footer, dividers ===== The logo IMAGE and the "GameYogi" wordmark are part of the logo SVG and are NEVER targeted here, so their colour/text stay exactly as-is. Only menu and section TEXT colours are adjusted for readability on the dark theme. ===== */ /* --- header bars: white/teal -> dark (logo image untouched) --- */ #header-secondary-outer, #header-outer, #header-outer #top, .material #header-outer, #header-outer.transparent, #header-outer.scrolled-down, #header-space, .material #header-space, #search-outer, #search{ background-color:#0a0f17 !important; background-image:none !important; } #header-outer{box-shadow:0 2px 18px rgba(0,0,0,.55) !important} /* menu link text -> light; current/hover -> orange accent */ #header-outer #top nav > ul > li > a, #header-outer #top nav > ul > li > a .menu-title-text, #header-outer #top nav .sf-menu > li > a .menu-title-text, #header-secondary-outer nav .sf-menu > li > a, #header-secondary-outer .menu-title-text{color:#eaf1f8 !important} #header-outer #top nav > ul > li.current-menu-item > a .menu-title-text, #header-outer #top nav > ul > li:hover > a .menu-title-text{color:#ff8e29 !important} /* dropdown menus -> dark glass */ header#top .sf-menu ul.sub-menu{background:#0e1521 !important;box-shadow:0 18px 44px -14px rgba(0,0,0,.65) !important} header#top .sf-menu ul.sub-menu > li > a{color:#dbe5ef !important} header#top .sf-menu ul.sub-menu > li > a:hover{background:rgba(255,142,41,.14) !important;color:#ff8e29 !important} /* --- teal (#0f4c5c / #023047) sections -> dark glass so the bg shows --- */ #ajax-content-wrap [style*="background-color: #0f4c5c"], #ajax-content-wrap [style*="background-color:#0f4c5c"], #ajax-content-wrap [style*="background-color: #023047"], #ajax-content-wrap [style*="background-color:#023047"]{ background-color:transparent !important; /* let the animated background show through */ } /* remove the white "cloud" shape dividers (they clash with the dark theme) */ .nectar-shape-divider-wrap{display:none !important} /* --- footer: teal -> dark, text light --- */ #footer-outer, #footer-outer #footer-widgets, #footer-outer #copyright, #footer-widgets, #footer-outer .row-bg{background-color:#0a0f17 !important;background-image:none !important} #footer-outer, #footer-outer p, #footer-outer li, #footer-outer a, #footer-outer h1,#footer-outer h2,#footer-outer h3,#footer-outer h4, #footer-outer span:not([class*="gy-"]){color:#b9c4d0 !important} #footer-outer a:hover{color:#ff8e29 !important} /* --- readable text across all pages (never the hero's gy- elements) --- */ #ajax-content-wrap h1:not([class*="gy-"]), #ajax-content-wrap h2:not([class*="gy-"]), #ajax-content-wrap h3:not([class*="gy-"]), #ajax-content-wrap h4:not([class*="gy-"]), #ajax-content-wrap h5:not([class*="gy-"]), #ajax-content-wrap h6:not([class*="gy-"]){color:#f3f7fc !important} #ajax-content-wrap p:not([class*="gy-"]), #ajax-content-wrap li:not([class*="gy-"]), #ajax-content-wrap td, #ajax-content-wrap label, #ajax-content-wrap blockquote{color:#cdd8e3 !important} /* ===== FIXES: game-card text + native dropdown/megamenu recolour ===== */ /* game cards: make ALL card text light (titles are
, descriptions are bare
text that the earlier rules missed). Links/buttons keep their colour. */ #ajax-content-wrap .gameappicons .wpb_column, #ajax-content-wrap .gameappicons .vc_column-inner, #ajax-content-wrap .gameappicons .wpb_text_column, #ajax-content-wrap .gameappicons .wpb_text_column *, #ajax-content-wrap .gameappicons h1, #ajax-content-wrap .gameappicons h2, #ajax-content-wrap .gameappicons h3, #ajax-content-wrap .gameappicons h4, #ajax-content-wrap .gameappicons h5, #ajax-content-wrap .gameappicons h6, #ajax-content-wrap .gameappicons p, #ajax-content-wrap .gameappicons div:not([class*="bg"]):not([class*="overlay"]){color:#e6edf5 !important} /* keep each game card as a subtle glass tile (defines the card on the dark bg) */ #ajax-content-wrap .gameappicons .column-bg-overlay{background-color:rgba(255,255,255,.05) !important} /* native theme dropdowns + Solutions megamenu -> dark glass, light text. (positioning/visibility are left to the theme so ALL items show) */ #header-outer #top nav .sf-menu ul, #header-outer #top nav .sf-menu .sub-menu, #header-outer #top nav .sf-menu li ul, #header-outer #top nav .megamenu > .sub-menu, #header-outer #top nav .megamenu ul, #header-outer #top nav li.megamenu > ul{ background-color:#0d1420 !important; box-shadow:0 22px 48px -16px rgba(0,0,0,.7) !important; border:1px solid rgba(120,200,255,.08) !important; } #header-outer #top nav .sf-menu ul li a, #header-outer #top nav .sf-menu ul li a .menu-title-text, #header-outer #top nav .megamenu .menu-title-text, #header-outer #top nav .megamenu > ul > li > a{color:#dbe5ef !important} #header-outer #top nav .sf-menu ul li a:hover, #header-outer #top nav .sf-menu ul li a:hover .menu-title-text, #header-outer #top nav .sf-menu ul li:hover > a .menu-title-text{color:#ff8e29 !important} /* megamenu column dividers subtle on dark */ #header-outer #top nav .megamenu > ul > li{border-color:rgba(255,255,255,.06) !important} /* safety net: when a top menu is hovered, make its dropdown + items opaque (theme starts items at opacity:0 and reveals via JS; positioning untouched) */ @media only screen and (min-width:1000px){ #header-outer #top nav .sf-menu > li:hover > ul, #header-outer #top nav .sf-menu li.sfHover > ul{opacity:1 !important;visibility:visible !important;pointer-events:auto !important} #header-outer #top nav .sf-menu li:hover > ul > li, #header-outer #top nav .sf-menu li.sfHover > ul > li, #header-outer #top nav .sf-menu li:hover ul li{opacity:1 !important} } /* ===== MENU POLISH (authoritative — overrides earlier rules) ===== */ /* 1) remove the hover underline under top menu names */ #header-outer #top nav .sf-menu > li > a:after, header#top .sf-menu > li > a:after{display:none !important;content:none !important} /* 2) dropdown / megamenu items: always readable, never orange-on-orange */ #header-outer #top nav .sf-menu ul li, #header-outer #top nav .sf-menu ul li > a{background-color:transparent !important} #header-outer #top nav .sf-menu ul li > a, #header-outer #top nav .sf-menu ul li > a .menu-title-text{color:#e7eef6 !important} #header-outer #top nav .sf-menu ul li > a:hover, #header-outer #top nav .sf-menu ul li:hover > a{background-color:rgba(255,142,41,.18) !important} #header-outer #top nav .sf-menu ul li > a:hover, #header-outer #top nav .sf-menu ul li > a:hover .menu-title-text, #header-outer #top nav .sf-menu ul li:hover > a .menu-title-text{color:#ffffff !important} /* ===== KILL ALL REMAINING WHITE BACKGROUNDS (headers + whole site) ===== */ /* header sub-elements that can flash white on scroll / search / mobile (logo image is never targeted) */ #header-outer, #header-outer.fixed, #header-outer.scrolled-down, .ascend #header-outer, body.material #header-outer, #header-outer .bg-color-stripe, #header-secondary-outer .bg-color-stripe, .material #header-outer .bg-color-stripe, .material #search-outer .bg-color-stripe, #header-outer #search-outer, #header-outer #search-outer:before, #header-outer #mobile-menu, #header-outer #mobile-menu:before, .nectar-ajax-search-results, #header-space, .material #header-space, #header-outer .row{ background-color:#0a0f17 !important; } /* structural white sections (before-footer / after-nav / portfolio / wpml) */ .nectar-global-section.before-footer, .nectar-global-section.after-nav, .page-header-no-bg, .wpml-ls-statics-footer, .portfolio-items .col, .project-title, body.box-rolling{ background-color:transparent !important; } /* ANY element with an inline white background, anywhere -> dark glass */ #ajax-content-wrap [style*="background-color: #ffffff"], #ajax-content-wrap [style*="background-color:#ffffff"], #ajax-content-wrap [style*="background-color: #fff;"], #ajax-content-wrap [style*="background-color:#fff;"], #ajax-content-wrap [style*="background-color: #fff "], #ajax-content-wrap [style*="background-color: rgb(255, 255, 255)"], #ajax-content-wrap [style*="background-color: white"], #ajax-content-wrap [style*="background: #ffffff"], #ajax-content-wrap [style*="background:#fff"]{ background-color:rgba(255,255,255,.05) !important; } /* ===== TEXT READABILITY SAFETY NET (whole content + footer) ===== never recolours the header menus or the hero's gy- elements */ #ajax-content-wrap .wpb_text_column, #ajax-content-wrap .wpb_text_column *, #ajax-content-wrap .wpb_wrapper > div:not([class*="gy-"]), #ajax-content-wrap strong, #ajax-content-wrap b, #ajax-content-wrap em, #ajax-content-wrap dt, #ajax-content-wrap dd, #ajax-content-wrap th, #ajax-content-wrap figcaption, #ajax-content-wrap small{ color:#cdd8e3 !important; } #ajax-content-wrap .toggle .toggle-title, #ajax-content-wrap .nectar-fancy-box, #ajax-content-wrap .nectar-fancy-box *{ color:#dbe5ef !important; } /* ===== social brand logos (inline SVG — always render, no icon-font needed) ===== */ .gy-soc{width:17px;height:17px;display:inline-block;vertical-align:middle;fill:currentColor;transition:transform .2s ease} #header-secondary-outer #social li a{ color:#ffffff !important;display:inline-flex !important;align-items:center;justify-content:center; } #header-secondary-outer #social li a:hover .gy-soc{transform:scale(1.15)} /* footer / other social blocks: light icon on dark */ #footer-outer .gy-soc, #footer-outer a .gy-soc{fill:#ff8e29} #footer-outer a:hover .gy-soc{fill:#ffffff} .socialicons a .gy-soc{fill:#ff8e29} /* ===== social-media labels block (Services / Real Estate pages) ===== */ /* recolour the dark-teal labels -> readable; stack logo above the label */ .iwithtext{ text-align:center !important; } .iwithtext .iwt-icon{ float:none !important; display:block !important; width:auto !important; margin:0 auto 6px !important; line-height:0; } .iwithtext .iwt-text{ padding-left:0 !important; padding-top:0 !important; } .iwithtext .iwt-text h4{ margin:0 !important; } .iwithtext .iwt-text a, .iwithtext .iwt-text h4 a{ color:#ff9700 !important; font-weight:700 !important; letter-spacing:.04em; transition:color .2s ease; } .iwithtext .iwt-text a:hover{ color:#ffffff !important; } .gy-soc-lg{ width:46px; height:46px; display:inline-block; fill:#ff9700; transition:transform .25s ease, fill .25s ease; } .iwithtext:hover .gy-soc-lg{ fill:#ffffff; transform:translateY(-3px) scale(1.08); } /* ===== testimonial cards (About + other pages): white -> dark glass ===== */ .testimonial_slider blockquote, .testimonial_slider[data-style] blockquote, .testimonial_slider .flickity-slider blockquote, .nectar-testimonial-slider blockquote, .wpb_testimonials .testimonial{ background-color:rgba(255,255,255,.055) !important; border:1px solid rgba(120,200,255,.14) !important; box-shadow:0 18px 40px -20px rgba(0,0,0,.7) !important; } .testimonial_slider blockquote, .testimonial_slider blockquote p, .testimonial_slider blockquote span, .testimonial_slider .title, .testimonial_slider .open-quote, .nectar-testimonial-slider blockquote p{ color:#dbe5ef !important; } .testimonial_slider .testimonial-name, .nectar-testimonial-slider .testimonial-name{ color:#ffffff !important; font-weight:700 !important; } .testimonial_slider .image-icon{ color:rgba(255,142,41,.55) !important; } /* CORRECT TARGET: the white testimonial card is blockquote .inner, not the blockquote itself (Salient multiple_visible_minimal sets .inner bg #fff). */ .testimonial_slider blockquote{ background-color:transparent !important; border:none !important; box-shadow:none !important; } .testimonial_slider blockquote .inner, .testimonial_slider[data-style=multiple_visible_minimal] blockquote .inner{ background-color:rgba(255,255,255,.07) !important; background-image:none !important; border:1px solid rgba(120,200,255,.14) !important; box-shadow:0 18px 40px -22px rgba(0,0,0,.75) !important; } .testimonial_slider blockquote .inner, .testimonial_slider blockquote .inner p, .testimonial_slider blockquote .inner span, .testimonial_slider blockquote .inner .title{ color:#e3ebf4 !important; } .testimonial_slider blockquote .inner .testimonial-name{ color:#ffffff !important; font-weight:700 !important; } .testimonial_slider blockquote .inner .image-icon, .testimonial_slider blockquote .inner .open-quote{ color:rgba(255,142,41,.55) !important; } /* ===== ANIMATED GAMING HEADER BACKGROUND ===== Dark shifting gradient + drifting grid + slow neon sweep. Logo, the "GameYogi" wordmark and the menu text sit ABOVE it (z-index) so they stay fully readable. The animation never clips the dropdowns. ===== */ #header-outer{ background:linear-gradient(115deg,#06323e 0%,#0a1d3a 27%,#1a0e30 52%,#33121f 78%,#06323e 100%) !important; background-size:300% 100% !important; animation:gyHdrBg 14s linear infinite; border-bottom:1px solid rgba(255,142,41,.28) !important; /* note: position is left to the theme so the header still shrinks on scroll */ } @keyframes gyHdrBg{0%{background-position:0% 50%}100%{background-position:300% 50%}} /* keep the header compact (don't let it grow tall) */ #header-outer #top{ padding-top:7px !important; padding-bottom:7px !important; } /* social-media icons row: its OWN lighter background, separated from the header */ #header-secondary-outer{ background:rgba(255,255,255,.10) !important; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); border-bottom:1px solid rgba(255,255,255,.14) !important; } /* keep the white social logos + DISCORD readable on the lighter strip */ #header-secondary-outer #social li a{ color:#ffffff !important; } #header-secondary-outer .menu-title-text{ color:#f1f5f9 !important; } /* drifting tech grid (masked so it fades at the edges) */ #header-outer::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(rgba(120,200,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,200,255,.06) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent); mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent); animation:gyHdrGrid 26s linear infinite; } @keyframes gyHdrGrid{from{background-position:0 0,0 0}to{background-position:44px 44px,44px 44px}} /* slow neon light sweep */ #header-outer::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(520px 140px at 0% 50%, rgba(255,142,41,.12), transparent 72%); animation:gyHdrSweep 11s linear infinite; } @keyframes gyHdrSweep{0%{transform:translateX(-45%)}100%{transform:translateX(145%)}} /* keep ALL header content (logo, name, menus, social) above the animation */ #header-outer > *{ position:relative; z-index:2; } @media (prefers-reduced-motion: reduce){ #header-outer, #header-outer::before, #header-outer::after{ animation:none !important; } } /* ===== blog post titles -> always light/readable ===== */ #ajax-content-wrap .post .title a, #ajax-content-wrap .post-header h3 a, #ajax-content-wrap .post-header h2 a, #ajax-content-wrap .masonry-blog-item h2 a, #ajax-content-wrap .masonry-blog-item h3 a, #ajax-content-wrap .recent-posts h3 a, #ajax-content-wrap .blog-recent h3 a, #ajax-content-wrap article h2 a, #ajax-content-wrap article h3 a, #ajax-content-wrap .nectar-recent-post-slider h3 a, #ajax-content-wrap .related-posts h3 a, #ajax-content-wrap .related-posts h3{ color:#f3f7fc !important; } #ajax-content-wrap .post .title a:hover, #ajax-content-wrap .post-header h3 a:hover, #ajax-content-wrap article h2 a:hover, #ajax-content-wrap article h3 a:hover, #ajax-content-wrap .related-posts h3 a:hover{ color:#ff8e29 !important; } /* blog meta (date/category) readable */ #ajax-content-wrap .meta-date, #ajax-content-wrap .post-meta, #ajax-content-wrap .meta-category a, #ajax-content-wrap time{ color:#9fb0c0 !important; }