/*! Hits and Clips Magazine — hcm-login.css générée par assets/css/build.mjs (login.css) : ne pas éditer, modifier assets/css/src/. */
body.hcm-login-page {
--hcm-login-w: 440px;
}
body.hcm-login-page .site.container {
background-color: transparent;
}
body.hcm-login-page .site-content {
display: block;
padding: var(--hcm-s5) var(--hcm-gutter) var(--hcm-s7);
}
body.hcm-login-page .site-content .content-area {
float: none;
margin-inline: auto;
max-width: var(--hcm-login-w);
width: 100%;
}
body.hcm-login-page .site-main {
margin: 0;
}
body.hcm-login-page .inside-article {
background-color: transparent;
padding: 0;
}
body.hcm-login-page .entry-content {
margin: 0;
}
@media (min-width: 768px) {
body.hcm-login-page .site-content {
padding-top: var(--hcm-s6);
}
}
.hcm-login {
--hcm-login-google-line: #747775;
--hcm-login-google-ink: #1f1f1f;
--hcm-login-facebook: #0866ff;
--hcm-login-facebook-hover: #0654d1;
background-color: var(--hcm-surface);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-card);
box-shadow:
0 1px 2px color-mix(in srgb, var(--hcm-ink) 5%, transparent),
0 12px 32px color-mix(in srgb, var(--hcm-ink) 7%, transparent);
box-sizing: border-box;
color: var(--hcm-text);
font-size: 1rem;
line-height: 1.5;
padding: var(--hcm-s6) 20px var(--hcm-s5);
}
@media (min-width: 480px) {
.hcm-login {
padding: 40px 40px var(--hcm-s6);
}
}
.hcm-login__brand {
color: var(--hcm-accent);
display: flex;
justify-content: center;
line-height: 0;
}
.hcm-login__logo {
fill: currentColor;
height: 28px;
max-width: 100%;
width: auto;
}
.hcm-login__logo-text {
font-family: var(--hcm-font-head);
font-size: 1.25rem;
font-weight: 700;
line-height: 28px;
}
.hcm-login .hcm-login__title {
color: var(--hcm-ink);
font-family: var(--hcm-font-head);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
margin: var(--hcm-s4) 0 0;
text-align: center;
}
.hcm-login__msg {
align-items: flex-start;
animation: hcm-login-in 0.2s ease-out;
background-color: color-mix(in srgb, var(--hcm-accent) 7%, var(--hcm-surface));
border: 1px solid color-mix(in srgb, var(--hcm-accent) 28%, var(--hcm-surface));
border-left: 4px solid var(--hcm-accent);
border-radius: 8px;
color: var(--hcm-ink);
display: flex;
font-size: var(--hcm-fs-small);
font-weight: 600;
gap: 10px;
line-height: 20px;
margin-top: var(--hcm-s5);
padding: 12px 14px;
}
.hcm-login__msg-icon {
color: var(--hcm-accent-dark);
fill: none;
flex: none;
height: 20px;
stroke: currentColor;
stroke-linecap: round;
stroke-width: 2;
width: 20px;
}
@keyframes hcm-login-in {
from {
opacity: 0;
transform: translateY(-4px);
}
}
@media (prefers-reduced-motion: reduce) {
.hcm-login__msg {
animation: none;
}
}
.hcm-login__sso-list {
display: grid;
gap: var(--hcm-s3);
margin: var(--hcm-s5) 0 0;
}
.hcm-login__sso,
.hcm-login__sso:focus {
align-items: center;
border: 1px solid transparent;
border-radius: 8px;
box-sizing: border-box;
cursor: pointer;
display: flex;
font-family: var(--hcm-font-body);
font-size: 0.9375rem;
font-weight: 600;
gap: var(--hcm-s3);
justify-content: center;
line-height: 1.2;
min-height: 48px;
padding: 0 var(--hcm-s4);
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
width: 100%;
}
.hcm-login__sso-logo {
flex: none;
height: 20px;
width: 20px;
}
.hcm-login__sso--google,
.hcm-login__sso--google:focus {
background-color: var(--hcm-surface);
border-color: var(--hcm-login-google-line);
color: var(--hcm-login-google-ink);
}
.hcm-login__sso--google:hover,
.hcm-login__sso--google:focus-visible {
background-color: var(--hcm-soft);
border-color: var(--hcm-login-google-line);
color: var(--hcm-login-google-ink);
}
.hcm-login__sso--facebook,
.hcm-login__sso--facebook:focus {
background-color: var(--hcm-login-facebook);
border-color: var(--hcm-login-facebook);
color: var(--hcm-on-accent);
}
.hcm-login__sso--facebook:hover,
.hcm-login__sso--facebook:focus-visible {
background-color: var(--hcm-login-facebook-hover);
border-color: var(--hcm-login-facebook-hover);
color: var(--hcm-on-accent);
}
.hcm-login__sso:focus-visible {
outline: 2px solid var(--hcm-accent);
outline-offset: 2px;
}
.hcm-login__sso:active {
box-shadow: inset 0 2px 4px color-mix(in srgb, var(--hcm-ink) 12%, transparent);
}
.hcm-login__or {
align-items: center;
color: var(--hcm-muted);
display: flex;
font-size: var(--hcm-fs-small);
gap: var(--hcm-s3);
line-height: 1;
margin: var(--hcm-s5) 0;
}
.hcm-login__or::before,
.hcm-login__or::after {
background-color: var(--hcm-line);
content: "";
flex: 1 1 0;
height: 1px;
}
.hcm-login__form {
display: grid;
gap: var(--hcm-s4);
margin: var(--hcm-s5) 0 0;
}
.hcm-login__or + .hcm-login__form {
margin-top: 0;
}
.hcm-login__field {
margin: 0;
}
.hcm-login__row {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: var(--hcm-fs-small);
gap: 0 var(--hcm-s4);
justify-content: space-between;
margin: -6px 0;
}
.hcm-login__check {
align-items: center;
color: var(--hcm-ink);
cursor: pointer;
display: inline-flex;
font-weight: 500;
gap: var(--hcm-s2);
margin: 0;
min-height: var(--hcm-tap);
}
.hcm-login__check input {
accent-color: var(--hcm-accent);
cursor: pointer;
flex: none;
height: 18px;
margin: 0;
width: 18px;
}
.hcm-login__forgot,
.hcm-login__forgot:visited {
align-items: center;
color: var(--hcm-accent-dark);
display: inline-flex;
font-weight: 600;
min-height: var(--hcm-tap);
text-decoration: none;
}
.hcm-login__forgot:hover,
.hcm-login__forgot:focus-visible {
color: var(--hcm-accent-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
.hcm-login__submit {
margin-top: var(--hcm-s1);
}
.hcm-login__foot {
border-top: 1px solid var(--hcm-line);
color: var(--hcm-text);
font-size: var(--hcm-fs-small);
line-height: 1.5;
margin-top: var(--hcm-s5);
padding-top: var(--hcm-s5);
text-align: center;
}
.hcm-login__foot a,
.hcm-login__foot a:visited {
color: var(--hcm-accent-dark);
display: inline-block;
font-weight: 600;
margin: -12px 0;
padding: 12px 0;
text-decoration: underline;
text-underline-offset: 3px;
}
.hcm-login__foot a:hover,
.hcm-login__foot a:focus-visible {
color: var(--hcm-accent);
}