/* ==========================================================================
Developer credit
--------------------------------------------------------------------------
Styles for the pill rendered by
(resources/views/components/credit.blade.php).
Linked from the of all three root shells: layouts/app.blade.php,
layouts/landing.blade.php and errors/layout.blade.php.
The UI is RTL-only, so positioning here uses logical properties throughout.
Colours are taken from the palette the app already uses — the dental teal
(#006064 / #00acc1 / #e0f7fa), the landing brand blue (#0A6EBD / #3D9EFF)
and the Tailwind greys and reds — so no new hue enters the theme.
========================================================================== */
/* --- Tones ---------------------------------------------------------------
The credit sits on three kinds of surface. Each tone is a complete set of
custom properties in one place; the component picks between them with a
static PHP map, so every class name below appears in the markup as a whole
literal string that a CSS scanner can see.
------------------------------------------------------------------------ */
/* light — white / gray-50 / gray-100 chrome: the three portals, booking. */
.credit-light {
--credit-bg: rgba(255, 255, 255, 0.72);
--credit-border: rgba(17, 24, 39, 0.10);
--credit-border-hover: rgba(0, 172, 193, 0.45);
--credit-fg: #6b7280;
--credit-name-fg: #006064;
--credit-heart: #ef4444;
--credit-glow: rgba(0, 172, 193, 0.28);
--credit-sheen: rgba(0, 172, 193, 0.16);
}
/* dark — dark footers and dark screens: the landing page footer. */
.credit-dark {
--credit-bg: rgba(255, 255, 255, 0.05);
--credit-border: rgba(255, 255, 255, 0.14);
--credit-border-hover: rgba(61, 158, 255, 0.55);
--credit-fg: #9ca3af;
--credit-name-fg: #ffffff;
--credit-heart: #f87171;
--credit-glow: rgba(10, 110, 189, 0.45);
--credit-sheen: rgba(255, 255, 255, 0.16);
}
/* brand — coloured brand panels: the teal login gradient, the error screens. */
.credit-brand {
--credit-bg: rgba(255, 255, 255, 0.12);
--credit-border: rgba(255, 255, 255, 0.28);
--credit-border-hover: rgba(255, 255, 255, 0.65);
--credit-fg: #e0f7fa;
--credit-name-fg: #ffffff;
--credit-heart: #fda4af;
--credit-glow: rgba(255, 255, 255, 0.35);
--credit-sheen: rgba(255, 255, 255, 0.30);
}
/* --- Pill ---------------------------------------------------------------- */
.credit {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35em;
max-inline-size: 100%;
padding-block: 0.3rem;
padding-inline: 0.75rem;
border: 1px solid var(--credit-border);
border-radius: 9999px;
background-color: var(--credit-bg);
color: var(--credit-fg);
font-family: inherit;
font-size: 0.75rem;
font-weight: 500;
line-height: 1.7;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
transition:
transform 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease;
}
/* Every visible part rides above the sheen layer. */
.credit > * {
position: relative;
z-index: 1;
}
.credit-name {
position: relative;
color: var(--credit-name-fg);
font-weight: 700;
/* A Latin name inside an Arabic sentence: isolate it, or the bidi
algorithm moves the dot in "Root.ps" to the wrong side of the word. */
unicode-bidi: isolate;
}
/* The underline belongs to the name, not to the whole sentence. */
.credit-name::after {
content: "";
position: absolute;
inset-block-end: -0.12em;
inset-inline-start: 0;
inline-size: 0;
block-size: 1px;
background-color: currentColor;
transition: inline-size 260ms ease;
}
.credit-heart {
flex: none;
inline-size: 1em;
block-size: 1em;
color: var(--credit-heart);
transform-origin: center;
animation: credit-heartbeat 4.5s ease-in-out infinite;
}
.credit-external {
flex: none;
inline-size: 0.85em;
block-size: 0.85em;
opacity: 0.55;
transition: opacity 220ms ease;
}
/* --- Sheen ---------------------------------------------------------------
A diagonal highlight that sweeps across on hover. It lives on its own layer
behind the text (z-index 0 against the children's 1) so it never dims a word,
and it travels along the inline axis, which means it follows the reading
direction rather than fighting it.
------------------------------------------------------------------------ */
.credit::before {
content: "";
position: absolute;
z-index: 0;
inset-block: -60%;
inset-inline-start: -60%;
inline-size: 45%;
background-image: linear-gradient(115deg, transparent, var(--credit-sheen), transparent);
transform: skewX(-16deg);
opacity: 0;
pointer-events: none;
}
/* --- Interaction ---------------------------------------------------------
Scoped to [href]: the link=false variant renders a , which should sit
there quietly rather than invite a click that goes nowhere.
------------------------------------------------------------------------ */
.credit[href]:hover,
.credit[href]:focus-visible {
transform: translateY(-1px);
border-color: var(--credit-border-hover);
box-shadow: 0 4px 16px -4px var(--credit-glow);
}
.credit[href]:hover .credit-name::after,
.credit[href]:focus-visible .credit-name::after {
inline-size: 100%;
}
.credit[href]:hover .credit-external,
.credit[href]:focus-visible .credit-external {
opacity: 1;
}
.credit[href]:hover::before,
.credit[href]:focus-visible::before {
animation: credit-sheen 900ms ease-out;
}
/* It is a link; keyboard users have to be able to see where they are. */
.credit:focus-visible {
outline: 2px solid var(--credit-name-fg);
outline-offset: 3px;
}
/* --- Motion --------------------------------------------------------------- */
/* Two beats, then a long rest. Present, rather than pulling the eye off the
page it is standing at the foot of. */
@keyframes credit-heartbeat {
0% { transform: scale(1); }
6% { transform: scale(1.22); }
12% { transform: scale(1); }
18% { transform: scale(1.16); }
26% { transform: scale(1); }
100% { transform: scale(1); }
}
@keyframes credit-sheen {
0% { opacity: 0; inset-inline-start: -60%; }
18% { opacity: 1; }
100% { opacity: 0; inset-inline-start: 145%; }
}
@media (prefers-reduced-motion: reduce) {
.credit,
.credit-name::after,
.credit-external {
transition: none;
}
.credit-heart {
animation: none;
}
.credit[href]:hover,
.credit[href]:focus-visible {
transform: none;
}
.credit[href]:hover::before,
.credit[href]:focus-visible::before {
animation: none;
}
}
/* --- Print ---------------------------------------------------------------
Several screens carry a print button (reports, insurance certificates,
referral letters). The credit belongs on the screen, never on the paper.
------------------------------------------------------------------------ */
@media print {
.credit {
display: none !important;
}
}