/** * PromXAI Theme 2.0.0-RC25 — Public Media Depth System * * One visual separator for media cards across Home, Library and Favorites. * Dark mode receives a cool luminous edge; light mode receives a warm-neutral * pearl edge and soft lift. No geometry or masonry changes. */ /* ------------------------------------------------------------------------- DARK MODE — cool luminous separation from the midnight canvas. ------------------------------------------------------------------------- */ html[data-theme="dark"] :is( body.home .px-prompt-card, body.page-template-front-page .px-prompt-card ) { border-color: rgba(205, 220, 255, .22) !important; box-shadow: 0 15px 34px rgba(2, 7, 18, .30), 0 4px 12px rgba(2, 7, 18, .18), 0 0 0 1px rgba(101, 143, 235, .07), 0 0 24px rgba(73, 104, 205, .075), inset 0 1px 0 rgba(255,255,255,.075) !important; } html[data-theme="dark"] body.home .px-phone-home-card__link { box-shadow: inset 0 0 0 1px rgba(210, 224, 255, .22), 0 12px 28px rgba(2, 7, 18, .28), 0 0 20px rgba(73, 104, 205, .065) !important; } html[data-theme="dark"] body.promxai-favorites-modern-page .px-fav-card__media { border-color: rgba(205, 220, 255, .22) !important; box-shadow: 0 15px 34px rgba(2, 7, 18, .30), 0 4px 12px rgba(2, 7, 18, .16), 0 0 0 1px rgba(101, 143, 235, .07), 0 0 22px rgba(73, 104, 205, .07), inset 0 1px 0 rgba(255,255,255,.07) !important; } html[data-theme="dark"] body.promxai-library-modern-page .px-library-modern-card { border-color: rgba(199, 216, 255, .19) !important; box-shadow: 0 17px 38px rgba(2, 7, 18, .28), 0 0 0 1px rgba(101, 143, 235, .055), 0 0 22px rgba(73, 104, 205, .06), inset 0 1px 0 rgba(255,255,255,.065) !important; } /* The image surface itself gets a restrained inner edge so near-black images never disappear into the surrounding dark background. */ html[data-theme="dark"] :is( body.home .px-prompt-card__link, body.promxai-favorites-modern-page .px-fav-card__media, body.promxai-library-modern-page .px-library-modern-card__media ) { outline: 1px solid rgba(230, 236, 255, .075); outline-offset: -1px; } /* ------------------------------------------------------------------------- LIGHT MODE — warm-neutral pearl/champagne edge + soft lift. This is intentionally not a bright white border. ------------------------------------------------------------------------- */ html[data-theme="light"] :is( body.home .px-prompt-card, body.page-template-front-page .px-prompt-card ) { border-color: rgba(105, 91, 74, .22) !important; box-shadow: 0 16px 34px rgba(52, 63, 88, .15), 0 4px 10px rgba(52, 63, 88, .065), 0 0 0 1px rgba(171, 139, 98, .085), inset 0 1px 0 rgba(255,255,255,.95) !important; } html[data-theme="light"] body.home .px-phone-home-card__link { box-shadow: inset 0 0 0 1px rgba(105, 91, 74, .20), 0 13px 28px rgba(52, 63, 88, .13), 0 3px 8px rgba(52, 63, 88, .055) !important; } html[data-theme="light"] body.promxai-favorites-modern-page .px-fav-card__media { border-color: rgba(105, 91, 74, .22) !important; box-shadow: 0 14px 30px rgba(55, 67, 94, .13), 0 3px 9px rgba(55, 67, 94, .05), 0 0 0 1px rgba(168, 133, 92, .05), inset 0 1px 0 rgba(255,255,255,.94) !important; } html[data-theme="light"] body.promxai-library-modern-page .px-library-modern-card { border-color: rgba(105, 91, 74, .20) !important; box-shadow: 0 15px 32px rgba(55, 67, 94, .12), 0 3px 8px rgba(55, 67, 94, .045), 0 0 0 1px rgba(168, 133, 92, .045), inset 0 1px 0 rgba(255,255,255,.94) !important; } html[data-theme="light"] :is( body.home .px-prompt-card__link, body.promxai-favorites-modern-page .px-fav-card__media, body.promxai-library-modern-page .px-library-modern-card__media ) { outline: 1px solid rgba(122, 103, 81, .11); outline-offset: -1px; } /* ------------------------------------------------------------------------- Hover/focus — depth increases, geometry stays fixed. ------------------------------------------------------------------------- */ @media (hover: hover) { html[data-theme="dark"] :is( body.home .px-prompt-card:hover, body.home .px-prompt-card:focus-within, body.promxai-favorites-modern-page .px-fav-card:hover .px-fav-card__media, body.promxai-favorites-modern-page .px-fav-card:focus-within .px-fav-card__media, body.promxai-library-modern-page .px-library-modern-card:hover, body.promxai-library-modern-page .px-library-modern-card:focus-within ) { border-color: rgba(217, 228, 255, .30) !important; box-shadow: 0 19px 42px rgba(2, 7, 18, .34), 0 0 0 1px rgba(126, 158, 245, .10), 0 0 30px rgba(86, 115, 218, .10), inset 0 1px 0 rgba(255,255,255,.09) !important; } html[data-theme="light"] :is( body.home .px-prompt-card:hover, body.home .px-prompt-card:focus-within, body.promxai-favorites-modern-page .px-fav-card:hover .px-fav-card__media, body.promxai-favorites-modern-page .px-fav-card:focus-within .px-fav-card__media, body.promxai-library-modern-page .px-library-modern-card:hover, body.promxai-library-modern-page .px-library-modern-card:focus-within ) { border-color: rgba(116, 95, 72, .28) !important; box-shadow: 0 20px 42px rgba(52, 63, 88, .18), 0 5px 11px rgba(52, 63, 88, .07), 0 0 0 1px rgba(171, 139, 98, .10), inset 0 1px 0 rgba(255,255,255,.98) !important; } } /* Phone Favorites / Library use the same media surfaces; keep the edge crisp but slightly lighter to avoid crowding a two-column feed. */ @media (max-width: 760px) { html[data-theme="dark"] body.promxai-favorites-modern-page .px-fav-card__media, html[data-theme="dark"] body.promxai-library-modern-page .px-library-modern-card__media, html[data-theme="dark"] body.home .px-phone-home-card__link { box-shadow: inset 0 0 0 1px rgba(210, 224, 255, .20), 0 10px 23px rgba(2, 7, 18, .24), 0 0 15px rgba(73, 104, 205, .05) !important; } html[data-theme="light"] body.promxai-favorites-modern-page .px-fav-card__media, html[data-theme="light"] body.promxai-library-modern-page .px-library-modern-card__media, html[data-theme="light"] body.home .px-phone-home-card__link { box-shadow: inset 0 0 0 1px rgba(105, 91, 74, .18), 0 10px 23px rgba(52, 63, 88, .115), 0 2px 7px rgba(52, 63, 88, .045) !important; } } /* ======================================================================== PromXAI Theme 2.0.0-RC32 — Light Public Gallery Separation Light mode now uses a cool Pearl/Slate edge instead of a warm brown edge. Dark mode is intentionally unchanged because it is already the visual reference. No dimensions or masonry geometry are modified. ======================================================================== */ /* Cool pearl/slate separator works with white, black and colorful artwork without tinting the image family toward brown/champagne. */ html[data-theme="light"] :is( body.home .px-prompt-card__link, body.page-template-front-page .px-prompt-card__link, body.promxai-favorites-modern-page .px-fav-card__media, body.promxai-library-modern-page .px-library-modern-card__media ) { outline: 0 !important; box-shadow: inset 0 0 0 1.35px rgba(72, 94, 132, .255), inset 0 1px 0 rgba(255, 255, 255, .98), 0 11px 25px rgba(40, 54, 80, .115), 0 0 22px rgba(78, 103, 170, .052) !important; } html[data-theme="light"] :is( body.home .px-prompt-card, body.page-template-front-page .px-prompt-card ) { border-color: rgba(79, 96, 124, .22) !important; background: rgba(255, 255, 255, .91) !important; box-shadow: 0 18px 38px rgba(41, 55, 82, .145), 0 4px 11px rgba(41, 55, 82, .055), 0 0 0 1px rgba(105, 121, 150, .070), inset 0 1px 0 rgba(255,255,255,.99) !important; } html[data-theme="light"] body.promxai-favorites-modern-page .px-fav-card__media { border-color: rgba(79, 96, 124, .21) !important; box-shadow: inset 0 0 0 1.25px rgba(78, 96, 126, .23), inset 0 1px 0 rgba(255,255,255,.96), 0 16px 34px rgba(41, 55, 82, .135), 0 3px 9px rgba(41, 55, 82, .05) !important; } html[data-theme="light"] body.promxai-library-modern-page .px-library-modern-card { border-color: rgba(79, 96, 124, .21) !important; background: rgba(255, 255, 255, .92) !important; box-shadow: 0 17px 36px rgba(41, 55, 82, .135), 0 4px 10px rgba(41, 55, 82, .05), 0 0 0 1px rgba(105, 121, 150, .065), inset 0 1px 0 rgba(255,255,255,.99) !important; } /* The public rail and dock should be slightly separated from the canvas in Light Mode, without turning gray or losing the clean white identity. */ @media (min-width:1050px) { html[data-theme="light"] :is( body.home, body.promxai-library-modern-page, body.promxai-favorites-modern-page ) .px-desktop-rail { background: linear-gradient(180deg, rgba(251,253,255,.985), rgba(243,247,251,.975)) !important; border-inline-end-color: rgba(72, 91, 122, .14) !important; box-shadow: 20px 0 48px rgba(43, 58, 88, .095), inset -1px 0 0 rgba(255,255,255,.95) !important; } html[data-theme="light"] :is( body.home, body.promxai-library-modern-page, body.promxai-favorites-modern-page ) .px-unified-floating-dock { background: linear-gradient(180deg, rgba(252,253,255,.975), rgba(242,246,251,.955)) !important; border-color: rgba(76, 95, 128, .16) !important; box-shadow: 0 17px 40px rgba(50, 65, 94, .115), inset 0 1px 0 rgba(255,255,255,.98) !important; } } @media (hover: hover) { html[data-theme="light"] :is( body.home .px-prompt-card:hover, body.home .px-prompt-card:focus-within, body.page-template-front-page .px-prompt-card:hover, body.page-template-front-page .px-prompt-card:focus-within, body.promxai-favorites-modern-page .px-fav-card:hover .px-fav-card__media, body.promxai-favorites-modern-page .px-fav-card:focus-within .px-fav-card__media, body.promxai-library-modern-page .px-library-modern-card:hover, body.promxai-library-modern-page .px-library-modern-card:focus-within ) { border-color: rgba(72, 91, 124, .31) !important; box-shadow: 0 22px 46px rgba(39, 53, 80, .18), 0 5px 12px rgba(39, 53, 80, .065), 0 0 0 1px rgba(86, 108, 156, .125), 0 0 26px rgba(93, 103, 222, .070), inset 0 1px 0 rgba(255,255,255,.99) !important; } } @media (max-width:760px) { html[data-theme="light"] :is( body.home .px-phone-home-card__link, body.promxai-favorites-modern-page .px-fav-card__media, body.promxai-library-modern-page .px-library-modern-card__media ) { box-shadow: inset 0 0 0 1px rgba(78, 96, 126, .20), inset 0 1px 0 rgba(255,255,255,.95), 0 11px 24px rgba(41, 55, 82, .11), 0 2px 7px rgba(41, 55, 82, .04) !important; } }