/* ========================================================================== css/stars.css — Satelitski vodič · CSS-only starfield Owner: Designer (wave 1). Imported AFTER design/tokens.css, BEFORE css/layout.css. HOW TO USE (contract for Fixer-html — use verbatim): That is ALL. The starfield renders from body.stars::before and body.stars::after. No extra element, no aria-hidden, no inline styles, no JS. The pseudo-elements are purely decorative (no text content), so nothing is exposed to assistive technology. WHAT IT DOES - html gets the base night-sky color (--bg-0). - body.stars gets a static "nebula" wash (3 radial gradients: warm starlight haze, cool blue haze, faint Adriatic-sea glow at the bottom). - ::before = ~115 faint 1px stars (box-shadow trick). - ::after = ~38 bright 2px stars, ~30% warm gold (box-shadow trick). - Both layers are position:fixed behind content → zero layout impact, zero CLS, works at 320px and 1440px, no canvas, no JS, no per-star DOM. - Twinkle is a slow opacity pulse on the whole layer (compositor-cheap). Under prefers-reduced-motion it is disabled and the static field stays. PERFORMANCE NOTES - No blur filters, no background-attachment: fixed (iOS jank), no huge gradients. Two box-shadow lists on two fixed layers = cheap paint. - will-change: opacity promotes the layers so the pulse never repaints. ========================================================================== */ html { background-color: var(--bg-0); } body.stars { position: relative; z-index: 0; /* creates a stacking context: stars sit above the page background but below all content */ /* Static nebula wash — warm starlight, cool haze, sea glow at the bottom */ background-image: radial-gradient(ellipse 60% 40% at 75% 10%, rgba(232, 184, 75, 0.05), transparent 60%), radial-gradient(ellipse 50% 35% at 18% 6%, rgba(120, 140, 220, 0.06), transparent 65%), radial-gradient(ellipse 75% 30% at 50% 108%, rgba(64, 140, 160, 0.08), transparent 60%), radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(2, 6, 18, 0.22) 100%); background-repeat: no-repeat; } body.stars::before, body.stars::after { content: ""; position: fixed; inset: 0; z-index: -1; /* above body background, below content */ pointer-events: none; /* never blocks clicks */ } /* --- Faint 1px stars ---------------------------------------------------- */ body.stars::before { width: 1px; height: 1px; border-radius: 50%; background: transparent; opacity: 1; animation: star-twinkle 6s ease-in-out infinite; box-shadow: 1309px 228px 0 0 rgba(233,238,248,0.36), 563px 501px 0 0 rgba(233,238,248,0.46), 209px 1116px 0 0 rgba(233,238,248,0.39), 864px 65px 0 0 rgba(233,238,248,0.36), 447px 476px 0 0 rgba(233,238,248,0.6), 54px 1149px 0 0 rgba(233,238,248,0.45), 1330px 1116px 0 0 rgba(233,238,248,0.56), 919px 569px 0 0 rgba(233,238,248,0.75), 13px 326px 0 0 rgba(233,238,248,0.7), 696px 569px 0 0 rgba(233,238,248,0.43), 689px 209px 0 0 rgba(233,238,248,0.4), 198px 735px 0 0 rgba(233,238,248,0.77), 1236px 541px 0 0 rgba(233,238,248,0.75), 940px 1098px 0 0 rgba(233,238,248,0.41), 775px 161px 0 0 rgba(233,238,248,0.63), 1287px 740px 0 0 rgba(233,238,248,0.64), 142px 93px 0 0 rgba(233,238,248,0.68), 592px 163px 0 0 rgba(233,238,248,0.78), 206px 778px 0 0 rgba(233,238,248,0.49), 1301px 747px 0 0 rgba(233,238,248,0.43), 727px 429px 0 0 rgba(233,238,248,0.69), 1437px 146px 0 0 rgba(233,238,248,0.65), 350px 1093px 0 0 rgba(233,238,248,0.71), 334px 946px 0 0 rgba(233,238,248,0.54), 1310px 1140px 0 0 rgba(233,238,248,0.46), 664px 114px 0 0 rgba(233,238,248,0.46), 65px 646px 0 0 rgba(233,238,248,0.55), 135px 432px 0 0 rgba(233,238,248,0.81), 1161px 644px 0 0 rgba(233,238,248,0.46), 1022px 810px 0 0 rgba(233,238,248,0.79), 1316px 939px 0 0 rgba(233,238,248,0.42), 285px 505px 0 0 rgba(233,238,248,0.72), 1103px 538px 0 0 rgba(233,238,248,0.72), 877px 817px 0 0 rgba(233,238,248,0.53), 283px 1043px 0 0 rgba(233,238,248,0.6), 96px 224px 0 0 rgba(233,238,248,0.43), 327px 864px 0 0 rgba(233,238,248,0.65), 788px 781px 0 0 rgba(233,238,248,0.65), 958px 1083px 0 0 rgba(233,238,248,0.48), 1133px 23px 0 0 rgba(233,238,248,0.69), 234px 1099px 0 0 rgba(233,238,248,0.73), 1312px 696px 0 0 rgba(233,238,248,0.41), 890px 323px 0 0 rgba(233,238,248,0.58), 539px 1025px 0 0 rgba(233,238,248,0.73), 1039px 217px 0 0 rgba(233,238,248,0.79), 611px 1039px 0 0 rgba(233,238,248,0.65), 313px 765px 0 0 rgba(233,238,248,0.73), 1104px 1086px 0 0 rgba(233,238,248,0.81), 1226px 663px 0 0 rgba(233,238,248,0.59), 229px 743px 0 0 rgba(233,238,248,0.79), 629px 490px 0 0 rgba(233,238,248,0.38), 1161px 161px 0 0 rgba(233,238,248,0.39), 995px 141px 0 0 rgba(233,238,248,0.84), 1090px 257px 0 0 rgba(233,238,248,0.41), 973px 1125px 0 0 rgba(233,238,248,0.43), 1080px 866px 0 0 rgba(233,238,248,0.83), 1104px 411px 0 0 rgba(233,238,248,0.71), 817px 764px 0 0 rgba(233,238,248,0.57), 1059px 924px 0 0 rgba(233,238,248,0.41), 460px 131px 0 0 rgba(233,238,248,0.52), 1204px 1134px 0 0 rgba(233,238,248,0.47), 451px 14px 0 0 rgba(233,238,248,0.39), 1292px 120px 0 0 rgba(233,238,248,0.46), 64px 676px 0 0 rgba(233,238,248,0.39), 487px 570px 0 0 rgba(233,238,248,0.68), 438px 1104px 0 0 rgba(233,238,248,0.42), 1169px 968px 0 0 rgba(233,238,248,0.47), 968px 833px 0 0 rgba(233,238,248,0.45), 198px 882px 0 0 rgba(233,238,248,0.53), 841px 956px 0 0 rgba(233,238,248,0.78), 110px 201px 0 0 rgba(233,238,248,0.38), 694px 223px 0 0 rgba(233,238,248,0.47), 389px 1098px 0 0 rgba(233,238,248,0.57), 864px 375px 0 0 rgba(233,238,248,0.49), 511px 154px 0 0 rgba(233,238,248,0.57), 1127px 200px 0 0 rgba(233,238,248,0.38), 1107px 30px 0 0 rgba(233,238,248,0.83), 484px 340px 0 0 rgba(233,238,248,0.55), 985px 437px 0 0 rgba(233,238,248,0.78), 120px 337px 0 0 rgba(233,238,248,0.54), 799px 543px 0 0 rgba(233,238,248,0.81), 931px 584px 0 0 rgba(233,238,248,0.56), 1138px 996px 0 0 rgba(233,238,248,0.43), 607px 445px 0 0 rgba(233,238,248,0.83), 1186px 1110px 0 0 rgba(233,238,248,0.38), 642px 117px 0 0 rgba(233,238,248,0.38), 976px 1029px 0 0 rgba(233,238,248,0.81), 1087px 322px 0 0 rgba(233,238,248,0.38), 1040px 164px 0 0 rgba(233,238,248,0.78), 140px 139px 0 0 rgba(233,238,248,0.69), 481px 826px 0 0 rgba(233,238,248,0.41), 1166px 504px 0 0 rgba(233,238,248,0.64), 81px 167px 0 0 rgba(233,238,248,0.56), 1195px 1070px 0 0 rgba(233,238,248,0.51), 534px 418px 0 0 rgba(233,238,248,0.68), 643px 488px 0 0 rgba(233,238,248,0.48), 268px 614px 0 0 rgba(233,238,248,0.58), 148px 19px 0 0 rgba(233,238,248,0.58), 1153px 204px 0 0 rgba(233,238,248,0.39), 436px 1036px 0 0 rgba(233,238,248,0.48), 714px 140px 0 0 rgba(233,238,248,0.79), 756px 583px 0 0 rgba(233,238,248,0.43), 1112px 619px 0 0 rgba(233,238,248,0.66), 1339px 1083px 0 0 rgba(233,238,248,0.35), 1135px 613px 0 0 rgba(233,238,248,0.82), 212px 275px 0 0 rgba(233,238,248,0.48), 219px 1133px 0 0 rgba(233,238,248,0.43), 577px 431px 0 0 rgba(233,238,248,0.71), 416px 540px 0 0 rgba(233,238,248,0.6), 514px 104px 0 0 rgba(233,238,248,0.4), 867px 566px 0 0 rgba(233,238,248,0.37), 683px 267px 0 0 rgba(233,238,248,0.67), 536px 330px 0 0 rgba(233,238,248,0.72), 1129px 875px 0 0 rgba(233,238,248,0.63), 229px 154px 0 0 rgba(233,238,248,0.82); } /* --- Bright 2px stars, ~30% warm gold ----------------------------------- */ body.stars::after { width: 2px; height: 2px; border-radius: 50%; background: transparent; opacity: 1; animation: star-twinkle 9s ease-in-out infinite reverse; box-shadow: 1415px 925px 0 0 rgba(232,184,75,0.71), 756px 596px 0 0 rgba(233,238,248,0.84), 85px 315px 0 0 rgba(233,238,248,0.94), 81px 920px 0 0 rgba(233,238,248,0.89), 1365px 105px 0 0 rgba(233,238,248,0.86), 832px 997px 0 0 rgba(233,238,248,0.78), 484px 885px 0 0 rgba(232,184,75,0.9), 362px 902px 0 0 rgba(233,238,248,0.79), 680px 801px 0 0 rgba(233,238,248,0.91), 508px 273px 0 0 rgba(232,184,75,0.88), 783px 893px 0 0 rgba(232,184,75,0.82), 408px 836px 0 0 rgba(233,238,248,0.82), 466px 228px 0 0 rgba(232,184,75,0.75), 672px 285px 0 0 rgba(233,238,248,0.94), 571px 359px 0 0 rgba(233,238,248,0.83), 1098px 339px 0 0 rgba(233,238,248,0.77), 534px 182px 0 0 rgba(233,238,248,0.95), 78px 111px 0 0 rgba(233,238,248,0.82), 642px 446px 0 0 rgba(233,238,248,0.85), 788px 921px 0 0 rgba(233,238,248,0.8), 893px 1px 0 0 rgba(233,238,248,0.91), 1406px 736px 0 0 rgba(233,238,248,0.9), 403px 372px 0 0 rgba(233,238,248,0.94), 676px 638px 0 0 rgba(233,238,248,0.92), 615px 519px 0 0 rgba(233,238,248,0.83), 824px 713px 0 0 rgba(232,184,75,0.73), 861px 680px 0 0 rgba(233,238,248,0.89), 356px 630px 0 0 rgba(233,238,248,0.83), 0px 311px 0 0 rgba(232,184,75,0.81), 1187px 621px 0 0 rgba(233,238,248,0.84), 905px 691px 0 0 rgba(232,184,75,0.82), 347px 674px 0 0 rgba(232,184,75,0.83), 1296px 634px 0 0 rgba(233,238,248,0.91), 481px 688px 0 0 rgba(233,238,248,0.91), 301px 25px 0 0 rgba(232,184,75,0.95), 1251px 870px 0 0 rgba(233,238,248,0.84), 1289px 589px 0 0 rgba(232,184,75,0.87), 1012px 409px 0 0 rgba(232,184,75,0.86); } /* --- Twinkle -------------------------------------------------------------- Slow opacity pulse on the whole layer — compositor-cheap, no repaint. Disabled under prefers-reduced-motion; the static field still renders (opacity stays at its base value of 1). */ @keyframes star-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } } @media (prefers-reduced-motion: reduce) { body.stars::before, body.stars::after { animation: none; opacity: 1; } } /* Skip twinkle on small screens — two huge box-shadow layers + opacity animation is expensive on mobile GPUs; static stars still render. */ @media (max-width: 47.99rem) { body.stars::before, body.stars::after { animation: none; } }