/* * SWOF / American Space Museum * Site-Wide Star Field Backgrounds & Related Theme Changes * PURPOSE: Apply a coordinated space-themed appearance to * selected areas of the custom SWOF WordPress theme. * * FEATURES: * - CSS-generated starfields in the header, * navigation bars, dropdowns, and bottom footer strip. * - Desktop middle header with full-width starfield, * white rounded ASM logo background, and outlined * Hall of Honor and Donate buttons. * - Original white middle-header background on mobile. * - Milky Way image backgrounds for the left sidebar * and main footer. * - White sidebar headings and contrasting black * text outlines for readability. * - Black footer link boxes with light-gray inset * borders and centered text. * - Decorative footer images hidden while preserving * Facebook, YouTube, and Instagram icons and links. * - Black outline around the footer ASM logo, * without an outline around the American flag. * * IMPLEMENTATION: * - Managed as one separate Fluent Snippets CSS snippet. * - Loading method: Load as Stylesheet File. * - No SWOF theme files modified. * - Disable the snippet to compare the original and * customized appearances; re-enable to restore. * - Future migration to style.css is possible. * Review !important declarations and CSS precedence * individually before any such migration. * * RESPONSIVE DESIGN: * Desktop-specific header changes apply above 640px. * Existing mobile header layout is preserved. * * BACKGROUND IMAGE FILES: * /wp-content/uploads/2026/10/site-sidemenu-stars.jpg * /wp-content/uploads/2026/10/site-footer-stars.jpg * * Revision: 2026-10-21 */ /* ========================================== 1. REUSABLE CSS STAR FIELD ========================================== */ :root { --asm-star-field: /* Bright stars */ radial-gradient(1.5px 1.5px at 17px 29px, rgba(255,255,255,.98) 98%, transparent), radial-gradient(1.5px 1.5px at 151px 61px, rgba(255,255,255,.95) 98%, transparent), radial-gradient(1.5px 1.5px at 327px 143px, rgba(255,255,255,.98) 98%, transparent), radial-gradient(1.5px 1.5px at 377px 23px, rgba(255,255,255,.95) 98%, transparent), radial-gradient(1.5px 1.5px at 145px 225px, rgba(255,255,255,.95) 98%, transparent), radial-gradient(1.5px 1.5px at 345px 205px, rgba(255,255,255,.98) 98%, transparent), /* Medium stars */ radial-gradient(1px 1px at 83px 117px, rgba(255,255,255,.85) 98%, transparent), radial-gradient(1px 1px at 209px 181px, rgba(255,255,255,.80) 98%, transparent), radial-gradient(1px 1px at 273px 43px, rgba(255,255,255,.90) 98%, transparent), radial-gradient(1px 1px at 49px 213px, rgba(255,255,255,.85) 98%, transparent), radial-gradient(1px 1px at 183px 247px, rgba(255,255,255,.90) 98%, transparent), radial-gradient(1px 1px at 301px 269px, rgba(255,255,255,.80) 98%, transparent), radial-gradient(1px 1px at 411px 211px, rgba(255,255,255,.85) 98%, transparent), radial-gradient(1px 1px at 121px 337px, rgba(255,255,255,.85) 98%, transparent), radial-gradient(1px 1px at 35px 75px, rgba(255,255,255,.90) 98%, transparent), radial-gradient(1px 1px at 255px 195px, rgba(255,255,255,.85) 98%, transparent), radial-gradient(1px 1px at 65px 165px, rgba(255,255,255,.90) 98%, transparent), radial-gradient(1px 1px at 285px 245px, rgba(255,255,255,.90) 98%, transparent), /* Faint stars */ radial-gradient(.7px .7px at 22px 145px, rgba(255,255,255,.60) 98%, transparent), radial-gradient(.7px .7px at 58px 38px, rgba(255,255,255,.50) 98%, transparent), radial-gradient(.7px .7px at 96px 282px, rgba(255,255,255,.65) 98%, transparent), radial-gradient(.7px .7px at 137px 105px, rgba(255,255,255,.55) 98%, transparent), radial-gradient(.7px .7px at 174px 315px, rgba(255,255,255,.60) 98%, transparent), radial-gradient(.7px .7px at 215px 87px, rgba(255,255,255,.55) 98%, transparent), radial-gradient(.7px .7px at 249px 331px, rgba(255,255,255,.65) 98%, transparent), radial-gradient(.7px .7px at 291px 117px, rgba(255,255,255,.50) 98%, transparent), radial-gradient(.7px .7px at 339px 307px, rgba(255,255,255,.60) 98%, transparent), radial-gradient(.7px .7px at 394px 153px, rgba(255,255,255,.55) 98%, transparent), radial-gradient(.7px .7px at 427px 329px, rgba(255,255,255,.65) 98%, transparent), radial-gradient(.7px .7px at 12px 329px, rgba(255,255,255,.55) 98%, transparent), radial-gradient(.7px .7px at 77px 343px, rgba(255,255,255,.60) 98%, transparent), radial-gradient(.7px .7px at 196px 19px, rgba(255,255,255,.50) 98%, transparent), radial-gradient(.7px .7px at 362px 79px, rgba(255,255,255,.65) 98%, transparent), radial-gradient(.7px .7px at 420px 58px, rgba(255,255,255,.55) 98%, transparent), radial-gradient(.6px .6px at 41px 91px, rgba(255,255,255,.55) 98%, transparent), radial-gradient(.6px .6px at 109px 198px, rgba(255,255,255,.45) 98%, transparent), radial-gradient(.6px .6px at 167px 171px, rgba(255,255,255,.60) 98%, transparent), radial-gradient(.6px .6px at 231px 281px, rgba(255,255,255,.50) 98%, transparent), radial-gradient(.6px .6px at 319px 19px, rgba(255,255,255,.55) 98%, transparent), radial-gradient(.6px .6px at 388px 287px, rgba(255,255,255,.50) 98%, transparent); --asm-star-size: 443px 359px; } /* ========================================== 2. HEADER AND NAVIGATION STAR FIELD ========================================== */ #banner-top, #banner-top-navigation ul, #banner-bottom, #banner-bottom-navigation, #sitefooter-bottom { background-color: #000 !important; background-image: var(--asm-star-field) !important; background-size: var(--asm-star-size) !important; background-repeat: repeat !important; } /* ========================================== 3. ADDITIONAL HEADER STARS ========================================== */ #banner-top, #banner-bottom { background-image: radial-gradient(1px 1px at 23px 47px, rgba(255,255,255,.90) 98%, transparent), radial-gradient(1px 1px at 71px 13px, rgba(255,255,255,.75) 98%, transparent), radial-gradient(1px 1px at 119px 69px, rgba(255,255,255,.85) 98%, transparent), radial-gradient(1px 1px at 167px 31px, rgba(255,255,255,.65) 98%, transparent), radial-gradient(1px 1px at 213px 83px, rgba(255,255,255,.90) 98%, transparent), radial-gradient(1px 1px at 259px 21px, rgba(255,255,255,.75) 98%, transparent), radial-gradient(1px 1px at 307px 57px, rgba(255,255,255,.85) 98%, transparent), radial-gradient(1px 1px at 353px 11px, rgba(255,255,255,.70) 98%, transparent), radial-gradient(1px 1px at 401px 77px, rgba(255,255,255,.95) 98%, transparent), radial-gradient(.8px .8px at 45px 82px, rgba(255,255,255,.70) 98%, transparent), radial-gradient(1px 1px at 98px 39px, rgba(255,255,255,.85) 98%, transparent), radial-gradient(.8px .8px at 146px 87px, rgba(255,255,255,.60) 98%, transparent), radial-gradient(1px 1px at 194px 12px, rgba(255,255,255,.90) 98%, transparent), radial-gradient(.8px .8px at 281px 79px, rgba(255,255,255,.65) 98%, transparent), radial-gradient(1px 1px at 331px 37px, rgba(255,255,255,.80) 98%, transparent), radial-gradient(.8px .8px at 425px 29px, rgba(255,255,255,.70) 98%, transparent), var(--asm-star-field) !important; background-size: 443px 97px, var(--asm-star-size) !important; background-repeat: repeat !important; border-top-color: #000 !important; } #banner-bottom { border-bottom-color: #000 !important; } /* ========================================== 4. NAVIGATION DROPDOWNS ========================================== */ #banner-bottom-navigation .dropdown { background-color: #000 !important; background-image: var(--asm-star-field) !important; background-size: var(--asm-star-size) !important; background-repeat: repeat !important; border-color: #000 !important; } /* ========================================== 5. DESKTOP MIDDLE HEADER ========================================== */ @media screen and (min-width: 641px) { /* Full-width black starfield */ #banner { background-color: #000 !important; background-image: var(--asm-star-field) !important; background-size: var(--asm-star-size) !important; background-repeat: repeat !important; } /* Allow full-width background to show */ #banner-middle { background: transparent !important; } /* White background and rounded ASM logo */ #banner-middle-logo { background-color: #fff !important; padding: 5px !important; border-radius: 8px !important; box-sizing: content-box !important; } /* Light-gray outlines on Hall and Donate */ #banner-middle-hall, #banner-middle-donate { outline: 2px solid #BFBFBF !important; outline-offset: 0; } } /* ========================================== 6. MOBILE NAVIGATION STAR FIELD ========================================== */ @media screen and (max-width: 640px) { #banner-bottom-navigation-mobile { background-color: #000 !important; background-image: var(--asm-star-field) !important; background-size: var(--asm-star-size) !important; background-repeat: repeat !important; } } /* ========================================== 7. DESKTOP LEFT SIDEBAR - MILKY WAY ========================================== */ #page-leftsidebar { background-color: #000 !important; background-image: url("/wp-content/uploads/2026/10/site-sidemenu-stars.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* White sidebar headings */ #page-leftsidebar h2, #page-leftsidebar h3 { color: #fff !important; } /* Black outlines around sidebar text */ #page-leftsidebar a, #page-leftsidebar li, #page-leftsidebar h1, #page-leftsidebar h2, #page-leftsidebar h3, #page-leftsidebar h4 { text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000 !important; } /* ========================================== 8. FOOTER - MILKY WAY BACKGROUND ========================================== */ #sitefooter { background-color: #000 !important; background-image: url("/wp-content/uploads/2026/10/site-footer-stars.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* ========================================== 9. FOOTER TEXT OUTLINES ========================================== */ #sitefooter p, #sitefooter a, #sitefooter span, #sitefooter h1, #sitefooter h2, #sitefooter h3, #sitefooter h4, #sitefooter li { text-shadow: -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, -2px 2px 0 #000, 0 2px 0 #000, 2px 2px 0 #000 !important; } /* ========================================== 10. FOOTER LINK BOXES ========================================== */ /* Black boxes with light-gray inset borders */ #sitefooter .sitefooter-bar, #sitefooter .sitefooter-bar.red { background: #000 !important; box-shadow: inset 0 0 0 2px #BFBFBF !important; } /* Center footer link text */ #sitefooter .sitefooter-bar p { text-align: center !important; } /* Remove special left padding from Next Launch */ #sitefooter #sitefooter-bluebar-rocket { padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; } /* ========================================== 11. FOOTER IMAGES AND SOCIAL MEDIA ========================================== */ /* Hide decorative images in footer link boxes */ #sitefooter .sitefooter-bar img { display: none !important; } /* Restore Facebook, YouTube, Instagram icons */ #sitefooter .sitefooter-bar img.sitefooter-left-socialbutton { display: inline !important; } /* ========================================== 12. FOOTER ASM LOGO AND FLAG ========================================== */ /* Black outline around central ASM logo */ #sitefooter-middle-logo { outline: 2px solid #000 !important; } /* American flag remains without outline */ #sitefooter-bottom-flag { outline: none !important; }