/* ============================================================
skinspecialist.cz / bioby.cz — ss-register-1.css — v1
PRODUCTION CSS for Shoptet /registrace/ page
DESIGN: V3 "Editorial atmospheric" — mirror /login/ page
- Left: full-bleed photo (same hero as login) with overlay caption
- Right: white background with V3 form area
(eyebrow + heading + sub + Shoptet form + "Už máte účet? Přihlaste se")
DETECTION:
- body.in-registrace set by Shoptet on /registrace/ page (verified)
- Native chrome (#content-wrapper) hidden when body has .ss-register-loaded
FORM FIELDS (Shoptet /registrace/):
- email, password, passwordAgain (in fieldset > "Osobní údaje")
- consent label (in fieldset > "Potvrzení")
- submit "Registrovat"
DEPLOY:
1. Upload this file + ss-register-1.js to /user/documents/upload/
2. Hero image reuses /login/'s file (already uploaded)
3. In Záhlaví HTML kódy add:
4. In Zápatí HTML kódy add:
============================================================ */
/* KILL NATIVE — only when JS init succeeded */
body.in-registrace.ss-register-loaded #content-wrapper,
body.in-registrace.ss-register-loaded .breadcrumbs-wrapper {
display: none !important;
}
body.in-registrace.ss-register-loaded {
background: var(--ss-canvas, #F2EBDB) !important;
}
/* ROOT — full-width V3 layout */
.ss-register-root {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: var(--ss-canvas, #F2EBDB);
display: flex;
align-items: stretch;
justify-content: center;
padding: 40px 32px 80px;
min-height: calc(100vh - 168px);
font-family: var(--ss-sans, 'Manrope', sans-serif);
color: var(--ss-black, #0F0F0F);
}
/* CARD — 45/55 split, 4px corners (matches login) */
.ss-register-card {
display: grid;
grid-template-columns: 45% 55%;
width: 100%;
max-width: 1200px;
min-height: 720px;
background: var(--ss-white, #FFFFFF);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(15, 15, 15, .12);
}
/* LEFT — same atmospheric image as login */
.ss-register-image {
position: relative;
background-image: url('/user/documents/upload/Vase-pece-vas-ceka-prihlaseni-k-uctu-skinspecialist.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 48px 44px;
color: var(--ss-white, #FFFFFF);
min-height: 720px;
}
.ss-register-image::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(
180deg,
rgba(15, 15, 15, .42) 0%,
rgba(15, 15, 15, .08) 22%,
rgba(15, 15, 15, .08) 55%,
rgba(15, 15, 15, .70) 100%
);
pointer-events: none;
}
.ss-register-image > * { position: relative; z-index: 1; }
.ss-register-image-quote {
font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
font-weight: 300;
font-size: clamp(20px, 1.7vw, 26px);
line-height: 1.35;
max-width: 420px;
margin: 0 0 18px;
letter-spacing: -.01em;
}
.ss-register-image-author {
display: flex;
flex-direction: column;
gap: 4px;
}
.ss-register-image-author .name {
font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
font-style: italic;
font-weight: 300;
font-size: 18px;
letter-spacing: -.01em;
line-height: 1.1;
}
.ss-register-image-author .role {
font-family: var(--ss-sans, sans-serif);
font-size: 10.5px;
letter-spacing: .3em;
text-transform: uppercase;
opacity: .82;
font-weight: 600;
line-height: 1.4;
}
/* RIGHT — FORM AREA on white */
.ss-register-form {
padding: 80px 80px 60px;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--ss-white, #FFFFFF);
}
.ss-register-form-inner {
max-width: 420px;
width: 100%;
}
.ss-register-eyebrow {
font-family: var(--ss-sans, sans-serif);
font-size: 10.5px;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--ss-sage-deep, #5A7E78);
font-weight: 600;
margin: 0 0 18px;
}
.ss-register-h {
font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
font-weight: 300;
font-size: clamp(40px, 4vw, 52px);
letter-spacing: -.025em;
line-height: 1;
margin: 0 0 10px;
color: var(--ss-black, #0F0F0F);
}
.ss-register-h em { font-style: italic; }
.ss-register-sub {
font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
font-style: italic;
font-weight: 300;
font-size: 16px;
line-height: 1.45;
color: var(--ss-muted, rgba(15, 15, 15, .62));
margin: 0 0 36px;
}
/* ============================================================
FORM — restyle Shoptet's #register-form
----------------------------------------------------------------
Shoptet wraps form in nested .co-box +