© 2026 Your Company. All rights reserved.
...the lockup...
*/
.hdc-credit-bar{
margin-top:26px;
padding-top:13px;
border-top:1px solid rgba(20,24,31,.10);
display:grid;
grid-template-columns:minmax(0,1fr) auto; /* legal | credit */
gap:28px;
align-items:center;
}
.hdc-credit-wrap{
display:flex;
justify-content:flex-end; /* pins it to the right */
padding-top:13px;
}
/* On a dark footer the hairline needs to be light, not dark. */
.hdc-credit-bar--on-dark{border-top-color:rgba(255,255,255,.16)}
/* The credit stays pinned right at EVERY width. It never stacks under the
legal line and never left-aligns. These breakpoints mirror the live rail on
hannahdesignco.com: the columns just tighten as the screen narrows, and
below 430px the credit takes a fixed 190px column so it keeps its place. */
@media (max-width:1024px){
.hdc-credit-bar{gap:18px;align-items:start}
.hdc-credit-wrap{align-self:start}
}
@media (max-width:700px){
.hdc-credit-bar{gap:12px}
}
@media (max-width:430px){
.hdc-credit-bar{grid-template-columns:minmax(0,1fr) 190px;gap:10px}
}
/* --- Accessibility ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.hdc-credit{transition:none}
.hdc-credit:hover,
.hdc-credit:focus-visible{transform:none}
}
/* Forced-colors / high-contrast: gradient text has no color of its own, so
hand it back a real one or it disappears. */
@media (forced-colors:active){
.hdc-credit__copy strong{
background:none;
-webkit-text-fill-color:LinkText;
color:LinkText;
}
.hdc-credit__copy span{color:CanvasText}
}