Rabbit: Difference between revisions
Jump to navigation
Jump to search
Replace Builder corner with complete neon billboard and full-sign hover glow. |
Match the Night City Builder hover motion to the Chronicles marquee. |
||
| (One intermediate revision by the same user not shown) | |||
| Line 75: | Line 75: | ||
/* Complete approved sign; only the existing Builder corner is changed. */ | /* Complete approved sign; only the existing Builder corner is changed. */ | ||
.rg-city-stage .rbc-billboard-link {display:block;line-height:0;text-decoration:none!important;background:none!important;border:0;margin:0;padding:0;outline-offset:6px;cursor:pointer;} | .rg-city-stage .rbc-billboard-link {display:block;line-height:0;text-decoration:none!important;background:none!important;border:0;margin:0;padding:0;outline-offset:6px;cursor:pointer;transform-origin:50% 50%;transition:transform .22s ease;} | ||
.rg-city-stage img.rbc-billboard-image {display:block;width:100%!important;height:auto!important;max-width:100%!important;margin:0!important;border:0!important;filter:brightness(1);transition:filter . | .rg-city-stage .rbc-billboard-link:is(:hover,:focus-visible) {transform:translateY(-2px) scale(1.025);} | ||
.rg-city-stage img.rbc-billboard-image {display:block;width:100%!important;height:auto!important;max-width:100%!important;margin:0!important;border:0!important;filter:brightness(1);transition:filter .22s ease;} | |||
.rg-city-stage .rbc-billboard-link:is(:hover,:focus-visible) .rbc-billboard-image {filter:brightness(1.14) drop-shadow(0 0 6px #fa55dcb3) drop-shadow(0 0 12px #35edf180);} | .rg-city-stage .rbc-billboard-link:is(:hover,:focus-visible) .rbc-billboard-image {filter:brightness(1.14) drop-shadow(0 0 6px #fa55dcb3) drop-shadow(0 0 12px #35edf180);} | ||
.rg-city-stage .rbc-billboard-link:focus-visible {outline:2px solid #b4faff;} | .rg-city-stage .rbc-billboard-link:focus-visible {outline:2px solid #b4faff;} | ||
@media(prefers-reduced-motion:reduce) {.rg-city-stage img.rbc-billboard-image {transition:none!important;}} | @media(prefers-reduced-motion:reduce) {.rg-city-stage img.rbc-billboard-image {transition:none!important;}.rg-city-stage .rbc-billboard-link {transition:none!important;transform:none!important;}} | ||
/* Chronicles mirrors the Builder corner and uses the website marquee effect. */ | |||
.rg-city-stage .rbc-corner.rcc-corner {left:auto;right:20px;} | |||
.rg-city-stage .rcc-link {display:block;line-height:0;background:none!important;border:0;padding:0;margin:0;text-decoration:none!important;cursor:pointer;transform-origin:50% 50%;transition:filter .22s ease,transform .22s ease;filter:drop-shadow(0 0 7px #bf50ff88);} | |||
.rg-city-stage img.rcc-image {display:block;width:100%!important;height:auto!important;max-width:100%!important;margin:0!important;border:0!important;background:transparent!important;} | |||
.rg-city-stage .rcc-link:is(:hover,:focus-visible) {filter:brightness(1.18) drop-shadow(0 0 13px #e179ff);transform:translateY(-2px) scale(1.025);} | |||
.rg-city-stage .rcc-link:focus-visible {outline:2px solid #edffb6;outline-offset:4px;} | |||
@media(max-width:750px), (max-width:1750px) and (max-aspect-ratio:3/2) { | |||
.rg-city-stage.rg-builder-enabled {grid-template-columns:repeat(2,minmax(0,1fr));} | |||
.rg-city-stage.rg-builder-enabled .rbc-corner {grid-column:1;grid-row:1;width:min(340px,100%);align-self:start;} | |||
.rg-city-stage.rg-builder-enabled .rbc-corner.rcc-corner {right:auto;grid-column:2;justify-self:end;} | |||
.rg-city-stage.rg-builder-enabled .rabbit-gateway {grid-column:1 / -1;} | |||
} | |||
@media(prefers-reduced-motion:reduce) {.rg-city-stage .rcc-link {transition:none!important;transform:none!important;}} | |||
</style> | </style> | ||
<section class="rg-city-stage rg-mode-blended rg-builder-enabled" aria-label="Rabbit’s character website"><svg class="rg-mask-defs" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><defs><filter id="rg-r3-feather" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="0.022"/></filter><mask id="rg-r3-art-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" x="0" y="0" width="1" height="1" style="mask-type:luminance"><rect width="1" height="1" fill="black"/><rect x=".04" y=".028" width=".915" height=".934" rx=".035" fill="white" filter="url(#rg-r3-feather)"/><path d="M.23 0H.81V.24H.23Z" fill="white"/><path d="M.016 .61H.64V.93H.016Z" fill="white"/></mask></defs></svg><div class="rabbit-gateway rg-neon"><div class="rg-card"><div class="rg-art"><img class="rg-image" src="https://nightcitymux.com/images/1/16/Rabbit_Follow_The_Rabbit.png" width="1536" height="1024" alt="Rabbit raises his middle finger beside a chrome rabbit logo."/><span class="rg-frame"></span></div><a class="rg-bar rg-link" href="https://runrabbitrun.fyi/" target="_blank" rel="noopener noreferrer" aria-label="Follow the Rabbit — open Rabbit’s character website in a new tab"><svg class="rg-wordmark" viewBox="0 0 830.799 118.373" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"> | <section class="rg-city-stage rg-mode-blended rg-builder-enabled" aria-label="Rabbit’s character website"><svg class="rg-mask-defs" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><defs><filter id="rg-r3-feather" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="0.022"/></filter><mask id="rg-r3-art-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" x="0" y="0" width="1" height="1" style="mask-type:luminance"><rect width="1" height="1" fill="black"/><rect x=".04" y=".028" width=".915" height=".934" rx=".035" fill="white" filter="url(#rg-r3-feather)"/><path d="M.23 0H.81V.24H.23Z" fill="white"/><path d="M.016 .61H.64V.93H.016Z" fill="white"/></mask></defs></svg><div class="rabbit-gateway rg-neon"><div class="rg-card"><div class="rg-art"><img class="rg-image" src="https://nightcitymux.com/images/1/16/Rabbit_Follow_The_Rabbit.png" width="1536" height="1024" alt="Rabbit raises his middle finger beside a chrome rabbit logo."/><span class="rg-frame"></span></div><a class="rg-bar rg-link" href="https://runrabbitrun.fyi/" target="_blank" rel="noopener noreferrer" aria-label="Follow the Rabbit — open Rabbit’s character website in a new tab"><svg class="rg-wordmark" viewBox="0 0 830.799 118.373" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"> | ||
| Line 99: | Line 113: | ||
<a class="rbc-billboard-link" href="https://nightcitybuilder.com/" target="_blank" rel="noopener noreferrer" aria-label="Enter Night City Builder in a new tab. Request an activation code to sign up."> | <a class="rbc-billboard-link" href="https://nightcitybuilder.com/" target="_blank" rel="noopener noreferrer" aria-label="Enter Night City Builder in a new tab. Request an activation code to sign up."> | ||
<img class="rbc-billboard-image" src="https://nightcitymux.com/images/a/a4/Night_City_Builder_Billboard.png" width="1702" height="924" alt="Night City Builder. Make a name for yourself. Enter the Builder. Request an activation code to sign up."> | <img class="rbc-billboard-image" src="https://nightcitymux.com/images/a/a4/Night_City_Builder_Billboard.png" width="1702" height="924" alt="Night City Builder. Make a name for yourself. Enter the Builder. Request an activation code to sign up."> | ||
</a> | |||
</aside> | |||
<aside class="rbc-corner rcc-corner" aria-label="Rabbit's Chronicles"> | |||
<a class="rcc-link" href="https://runrabbitrun.fyi/chronicles/" target="_blank" rel="noopener noreferrer" aria-label="Open Rabbit's Chronicles roleplay logs in a new tab"> | |||
<img class="rcc-image" src="https://runrabbitrun.fyi/assets/chronicles/chronicles-neon-marquee.png" width="1942" height="809" alt="Rabbit's Chronicles - Roleplay Logs"> | |||
</a> | </a> | ||
</aside> | </aside> | ||
</section> | </section> | ||
</html> | </html> | ||
