/* * iBlogger — Luminae V2.2 Hero Pixel Calibration * Final calibration of the reference hero glow/orbit/ticker. * Loaded after luminae-pixel.css. */ .home-page[data-design-pass="v2.2"] .lm-hero { /* The reference keeps the centre almost navy until the lower third, while the violet/pink energy builds much earlier around the orbit at the sides. */ background: radial-gradient(ellipse 34% 62% at -1% 47%, rgba(103, 72, 255, .60) 0%, rgba(83, 59, 238, .38) 31%, rgba(65, 48, 180, .15) 58%, transparent 76%), radial-gradient(ellipse 34% 62% at 101% 47%, rgba(103, 72, 255, .60) 0%, rgba(83, 59, 238, .38) 31%, rgba(65, 48, 180, .15) 58%, transparent 76%), radial-gradient(ellipse 105% 48% at 50% 83%, rgba(239, 126, 244, .76) 0%, rgba(187, 91, 233, .60) 25%, rgba(112, 70, 218, .42) 49%, rgba(63, 53, 170, .17) 69%, transparent 83%), linear-gradient(180deg, #161f3c 0%, #161f3c 15%, #191f45 31%, #22205c 48%, #3930a7 64%, #7243c3 79%, #d899de 100%); } /* The live reference uses a much flatter ellipse than V2.1. At 1440px the visible orbit is roughly 1350 x 513px, centred near y=220px. */ .home-page[data-design-pass="v2.2"] .lm-hero::before { width: min(94vw, 1354px); height: min(35.65vw, 514px); top: max(-36px, -2.5vw); left: 50%; transform: translateX(-50%); border: 2.5px dotted rgba(73, 82, 255, .95); border-radius: 50%; background: none !important; box-shadow: 0 0 9px 2px rgba(61, 82, 255, .95), 0 0 24px 7px rgba(67, 71, 255, .78), 0 0 52px 15px rgba(104, 59, 255, .56), 0 0 92px 28px rgba(196, 75, 255, .34), 0 0 150px 48px rgba(255, 130, 238, .18); opacity: 1; } /* Soft pink-white wash behind the lower arc; this starts higher than V2.1. */ .home-page[data-design-pass="v2.2"] .lm-hero::after { left: -8%; right: -8%; bottom: -25%; height: 73%; background: radial-gradient(ellipse 62% 43% at 50% 33%, rgba(255, 225, 250, .34) 0%, rgba(248, 167, 239, .36) 18%, rgba(205, 104, 238, .31) 36%, rgba(126, 73, 221, .18) 56%, transparent 76%); filter: blur(25px); opacity: 1; } /* Keep the already-good header/copy geometry, with tiny optical corrections. */ .home-page[data-design-pass="v2.2"] .lm-hero-copy { padding-top: 145px; } .home-page[data-design-pass="v2.2"] .lm-trust { margin-bottom: 12px; } .home-page[data-design-pass="v2.2"] .lm-hero h1 { margin-bottom: 14px; line-height: .955; } .home-page[data-design-pass="v2.2"] .lm-hero-copy > p { margin-bottom: 21px; } /* Exact visible card order in the reference frame: partial blossom-woman -> close-up -> red-haired meditator -> tulips -> yoga -> portrait -> three women -> hand/water. */ .home-page[data-design-pass="v2.2"] .lm-hero-marquee { bottom: 2px; padding-top: 14px; -webkit-mask-image: none; mask-image: none; } .home-page[data-design-pass="v2.2"] .lm-marquee-track, .home-page[data-design-pass="v2.2"] .lm-marquee-set { gap: 26px; } .home-page[data-design-pass="v2.2"] .lm-marquee-track { margin-left: -124px; padding-left: 0; padding-right: 26px; animation-duration: 49s; animation-delay: 0s; } .home-page[data-design-pass="v2.2"] .lm-tile { margin: 0; flex: 0 0 auto; border-radius: 25px; box-shadow: 0 18px 44px rgba(5, 7, 30, .13); transform-origin: 50% 100%; } .home-page[data-design-pass="v2.2"] .lm-tile img { width: 100%; height: 100%; object-fit: cover; transform: none; } /* These dimensions are calibrated from the 640px reference capture and scaled to the 1440px QA viewport (x2.25). */ .home-page[data-design-pass="v2.2"] .lm-tile-pre { width:166px; height:300px; transform:rotate(1.0deg); } .home-page[data-design-pass="v2.2"] .lm-tile-face { width:198px; height:370px; transform:rotate(-.8deg); } .home-page[data-design-pass="v2.2"] .lm-tile-meditate { width:166px; height:300px; transform:rotate(-1.4deg); } .home-page[data-design-pass="v2.2"] .lm-tile-flowers { width:142px; height:282px; transform:rotate(.6deg); } .home-page[data-design-pass="v2.2"] .lm-tile-yoga { width:136px; height:274px; transform:rotate(-.4deg); } .home-page[data-design-pass="v2.2"] .lm-tile-portrait { width:148px; height:280px; transform:rotate(1deg); } .home-page[data-design-pass="v2.2"] .lm-tile-group { width:170px; height:322px; transform:rotate(-1.2deg); } .home-page[data-design-pass="v2.2"] .lm-tile-water { width:205px; height:366px; transform:rotate(1deg); } .home-page[data-design-pass="v2.2"] .lm-tile-breath { width:154px; height:292px; transform:rotate(-.5deg); } .home-page[data-design-pass="v2.2"] .lm-tile-waves { width:148px; height:280px; transform:rotate(.7deg); } .home-page[data-design-pass="v2.2"] .lm-tile-rose { width:154px; height:294px; transform:rotate(-.6deg); } .home-page[data-design-pass="v2.2"] .lm-tile-winter { width:165px; height:310px; transform:rotate(.8deg); } /* Reference close-up is intentionally an extreme crop around nose/lips. */ .home-page[data-design-pass="v2.2"] .lm-tile-face img { transform: scale(2.15); object-position: 55% 56%; } .home-page[data-design-pass="v2.2"] .lm-tile-meditate img { object-position: 50% 54%; } .home-page[data-design-pass="v2.2"] .lm-tile-water img { object-position: 54% 50%; } @keyframes lmMarqueeV22 { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 13px)); } } .home-page[data-design-pass="v2.2"] .lm-marquee-track { animation-name: lmMarqueeV22; } @media (max-width: 920px) { .home-page[data-design-pass="v2.2"] .lm-hero-copy { padding-top: 131px; } .home-page[data-design-pass="v2.2"] .lm-hero::before { width: 150vw; height: 57vw; top: -4vw; } } @media (max-width: 560px) { .home-page[data-design-pass="v2.2"] .lm-hero { min-height: 700px; max-height: 820px; background: radial-gradient(ellipse 62% 48% at -6% 45%, rgba(100, 71, 255, .58), rgba(76, 54, 226, .26) 47%, transparent 76%), radial-gradient(ellipse 62% 48% at 106% 45%, rgba(100, 71, 255, .58), rgba(76, 54, 226, .26) 47%, transparent 76%), radial-gradient(ellipse 135% 43% at 50% 84%, rgba(243, 137, 242, .74), rgba(177, 83, 232, .52) 30%, rgba(94, 63, 211, .29) 56%, transparent 79%), linear-gradient(180deg, #161f3c 0%, #171f42 33%, #24205f 56%, #4b31a4 76%, #bd75d3 100%); } .home-page[data-design-pass="v2.2"] .lm-hero::before { width: 182vw; height: 72vw; top: -2vw; border-width: 2px; box-shadow: 0 0 8px 2px rgba(61,82,255,.90), 0 0 22px 6px rgba(70,71,255,.66), 0 0 45px 12px rgba(122,61,255,.45), 0 0 82px 24px rgba(210,85,255,.27); } .home-page[data-design-pass="v2.2"] .lm-hero::after { bottom: -20%; height: 65%; filter: blur(20px); } .home-page[data-design-pass="v2.2"] .lm-hero-copy { padding-top: 111px; } .home-page[data-design-pass="v2.2"] .lm-hero-marquee { bottom: -10px; padding-top: 10px; } .home-page[data-design-pass="v2.2"] .lm-marquee-track, .home-page[data-design-pass="v2.2"] .lm-marquee-set { gap: 11px; } .home-page[data-design-pass="v2.2"] .lm-marquee-track { margin-left: -59px; padding-right: 11px; animation-duration: 36s; } .home-page[data-design-pass="v2.2"] .lm-tile { border-radius: 19px; } .home-page[data-design-pass="v2.2"] .lm-tile-pre { width:94px; height:172px; } .home-page[data-design-pass="v2.2"] .lm-tile-face { width:112px; height:218px; } .home-page[data-design-pass="v2.2"] .lm-tile-meditate { width:94px; height:174px; } .home-page[data-design-pass="v2.2"] .lm-tile-flowers { width:82px; height:164px; } .home-page[data-design-pass="v2.2"] .lm-tile-yoga { width:79px; height:160px; } .home-page[data-design-pass="v2.2"] .lm-tile-portrait { width:86px; height:165px; } .home-page[data-design-pass="v2.2"] .lm-tile-group { width:98px; height:188px; } .home-page[data-design-pass="v2.2"] .lm-tile-water { width:116px; height:214px; } .home-page[data-design-pass="v2.2"] .lm-tile-breath { width:90px; height:172px; } .home-page[data-design-pass="v2.2"] .lm-tile-waves { width:86px; height:164px; } .home-page[data-design-pass="v2.2"] .lm-tile-rose { width:90px; height:173px; } .home-page[data-design-pass="v2.2"] .lm-tile-winter { width:96px; height:182px; } } @media (prefers-reduced-motion: reduce) { .home-page[data-design-pass="v2.2"] .lm-marquee-track { animation: none; } } /* V2.2.1 specificity guard: older nth-child calibration rules are intentionally neutralised so the named reference-frame tiles above are authoritative. */ .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-pre { width:166px; height:300px; transform:rotate(1.0deg); } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-face { width:198px; height:370px; transform:rotate(-.8deg); } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-meditate { width:166px; height:300px; transform:rotate(-1.4deg); } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-flowers { width:142px; height:282px; transform:rotate(.6deg); } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-yoga { width:136px; height:274px; transform:rotate(-.4deg); } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-portrait { width:148px; height:280px; transform:rotate(1deg); } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-group { width:170px; height:322px; transform:rotate(-1.2deg); } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-water { width:205px; height:366px; transform:rotate(1deg); } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-breath { width:154px; height:292px; transform:rotate(-.5deg); } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-waves { width:148px; height:280px; transform:rotate(.7deg); } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-rose { width:154px; height:294px; transform:rotate(-.6deg); } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-winter { width:165px; height:310px; transform:rotate(.8deg); } /* Side-energy correction measured from the reference frame. */ .home-page[data-design-pass="v2.2"] .lm-hero { background: radial-gradient(ellipse 42% 70% at -2% 44%, rgba(86, 73, 255, .92) 0%, rgba(78, 62, 244, .63) 26%, rgba(88, 55, 217, .36) 48%, rgba(83, 47, 180, .14) 68%, transparent 82%), radial-gradient(ellipse 42% 70% at 102% 44%, rgba(86, 73, 255, .92) 0%, rgba(78, 62, 244, .63) 26%, rgba(88, 55, 217, .36) 48%, rgba(83, 47, 180, .14) 68%, transparent 82%), radial-gradient(ellipse 108% 47% at 50% 84%, rgba(235, 123, 242, .63) 0%, rgba(178, 87, 232, .48) 25%, rgba(104, 68, 215, .31) 48%, rgba(57, 52, 163, .11) 68%, transparent 83%), linear-gradient(180deg, #161f3c 0%, #161f3c 15%, #191f45 31%, #22205c 48%, #3630ab 64%, #6640bd 79%, #cf8bd9 100%); } .home-page[data-design-pass="v2.2"] .lm-hero::before { box-shadow: 0 0 10px 3px rgba(65, 82, 255, 1), 0 0 28px 9px rgba(70, 72, 255, .90), 0 0 62px 20px rgba(112, 61, 255, .68), 0 0 112px 38px rgba(202, 77, 255, .44), 0 0 175px 62px rgba(255, 144, 239, .23); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0,0,0,.62) 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0,0,0,.62) 78%, transparent 100%); } @media (max-width: 560px) { .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-pre { width:94px; height:172px; } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-face { width:112px; height:218px; } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-meditate { width:94px; height:174px; } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-flowers { width:82px; height:164px; } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-yoga { width:79px; height:160px; } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-portrait { width:86px; height:165px; } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-group { width:98px; height:188px; } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-water { width:116px; height:214px; } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-breath { width:90px; height:172px; } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-waves { width:86px; height:164px; } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-rose { width:90px; height:173px; } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-winter { width:96px; height:182px; } } /* V2.2.2 edge-light and crop micro-calibration from the reference pixels. */ .home-page[data-design-pass="v2.2"] .lm-hero { background: radial-gradient(ellipse 11% 26% at 0% 49%, rgba(255,239,255,.90) 0%, rgba(245,168,255,.78) 26%, rgba(177,94,255,.52) 56%, rgba(95,72,255,.18) 78%, transparent 100%), radial-gradient(ellipse 11% 26% at 100% 49%, rgba(255,239,255,.90) 0%, rgba(245,168,255,.78) 26%, rgba(177,94,255,.52) 56%, rgba(95,72,255,.18) 78%, transparent 100%), radial-gradient(ellipse 10% 25% at 0% 30%, rgba(63,65,255,.90) 0%, rgba(63,65,255,.55) 42%, transparent 100%), radial-gradient(ellipse 10% 25% at 100% 30%, rgba(63,65,255,.90) 0%, rgba(63,65,255,.55) 42%, transparent 100%), radial-gradient(ellipse 42% 70% at -2% 44%, rgba(86,73,255,.82) 0%, rgba(78,62,244,.56) 26%, rgba(88,55,217,.32) 48%, rgba(83,47,180,.13) 68%, transparent 82%), radial-gradient(ellipse 42% 70% at 102% 44%, rgba(86,73,255,.82) 0%, rgba(78,62,244,.56) 26%, rgba(88,55,217,.32) 48%, rgba(83,47,180,.13) 68%, transparent 82%), radial-gradient(ellipse 108% 47% at 50% 84%, rgba(235,123,242,.58) 0%, rgba(178,87,232,.43) 25%, rgba(104,68,215,.29) 48%, rgba(57,52,163,.10) 68%, transparent 83%), linear-gradient(180deg, #161f3c 0%, #161f3c 15%, #191f45 31%, #22205c 48%, #3430ad 64%, #6440bf 79%, #cf8bd9 100%); } .home-page[data-design-pass="v2.2"] .lm-marquee-set .lm-tile.lm-tile-face img { transform: scale(2.75); object-position: 54% 61%; }