© 2026 Your Company. All rights reserved.
...the lockup...
The rail is a two-column grid at EVERY width: legal left, credit right,
both centred on the same axis. It does not stack, wrap, or re-align — a
visitor moving from desktop to phone sees the lockup in the same corner,
the same size, the same distance from the edge of the content column. */
.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) 190px; /* legal | credit — fixed */
gap:16px;
align-items:center;
}
.hdc-credit-wrap{
grid-column:2;
display:flex;
justify-content:flex-end; /* pinned right, always */
align-items:center;
padding:0;
}
/* Optional: the legal line that sits opposite. Wraps under itself rather
than pushing the credit around. */
.hdc-credit-bar__legal{
margin:0;
min-width:0;
font-size:12px;
line-height:1.55;
font-weight:600;
color:rgba(20,24,31,.55);
text-wrap:pretty;
}
/* On a dark footer the hairline and the legal line need light ink. */
.hdc-credit-bar--on-dark{border-top-color:rgba(255,255,255,.16)}
.hdc-credit-bar--on-dark .hdc-credit-bar__legal{color:rgba(255,255,255,.55)}
/* Very narrow phones: the legal line gets the space it needs by shortening
itself, never by moving the credit. The 190px credit column is fixed. */
@media (max-width:360px){
.hdc-credit-bar{gap:12px}
.hdc-credit-bar__legal{font-size:11px}
}
/* --- Accessibility ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.hdc-credit{transition:none}
.hdc-credit:hover,
.hdc-credit:focus-visible{transform:none}
}
/* Forced-colours / high-contrast: gradient text has no colour 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}
}