/* ============================================================ OpenCloud — Pagine pubbliche (login, register, password reset, ecc.) Layout hero (split a 2 colonne) + login-card mood-aware. Step 29 polish — riscrittura login.tmpl per matchare il mockup "Quadrista B · Industrial Steel" del style-guide. Dipende da: oc-tokens.css (Step 21). Il segment è settato via data-segment="quadrista|mandatario|entrambi" sull'. Default = entrambi → palette quadrista. ============================================================ */ /* Reset minimo per pagine pubbliche (no padding-top da loggedLight.css) */ .oc-public-body { margin: 0; padding: 0; background: var(--oc-bg); color: var(--oc-text); font-family: 'Poppins-Regular', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; } /* ─── Hero section split a 2 colonne ─── */ .oc-hero { background: linear-gradient(135deg, var(--oc-primary) 0%, var(--oc-primary-dark) 100%); color: #fff; padding: 64px 0 80px; position: relative; overflow: hidden; flex: 1; } .oc-hero::before { content: ""; position: absolute; top: -120px; right: -80px; width: 360px; height: 360px; background: var(--oc-accent); opacity: .08; border-radius: 50%; pointer-events: none; } .oc-hero::after { content: ""; position: absolute; bottom: -200px; left: -100px; width: 480px; height: 480px; background: #fff; opacity: .04; border-radius: 50%; pointer-events: none; } .oc-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; } .oc-hero-grid { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center; } @media (max-width: 900px) { /* minmax(0,1fr): la colonna DEVE poter scendere sotto il min-content della card (logo + padding ~413px), altrimenti su smartphone la card sfora ed è tagliata da .oc-hero{overflow-x:hidden}. Vale anche per register/reset (stessa griglia). */ .oc-hero-grid { grid-template-columns: minmax(0, 1fr); } .oc-hero { padding: 32px 0 48px; } .oc-hero-claim, .oc-login-card { min-width: 0; } .oc-login-card .oc-logo-wrap img { height: auto; max-width: 100%; } /* Logo della card di acknowledgement/errore (es. passwordReset): height fissa a 48px lo rendeva ~320px e sbordava dalla card su smartphone. */ .oc-ack-card img.logo { height: auto; max-width: 70%; } } /* Sotto i 768px la smart bar fissa (QR/beacon) occupa l'angolo in alto a destra: il badge norma manda a capo il segmento (QUADRISTA/MANDATARIO) così resta stretto e non sconfina sotto le icone — senza spostare in basso il contenuto dell'hero. Su desktop il badge resta su una riga (sep " · " visibile). #heroBadge è solo nella login. */ @media (max-width: 767.98px) { #heroBadge .oc-badge-text { display: flex; flex-direction: column; line-height: 1.15; } #heroBadge .oc-badge-sep { display: none; } /* Strip superiore compatta: badge a 16px allineato alle icone (top:16px), così il titolo non resta schiacciato vicino alle due icone. Solo login (non --compact). */ .oc-hero:not(.oc-hero--compact) { padding-top: 16px; } /* Titolo abbassato di una manciata di px rispetto a badge+icone (vale neutro/quad/mand). */ #heroTitle { margin-top: 28px; } } /* ─── Hero claim (testo a sinistra) ─── */ .oc-hero-claim h1 { font-weight: 800; font-size: 42px; margin: 16px 0 16px; letter-spacing: -.8px; line-height: 1.1; color: #fff; } @media (max-width: 600px) { .oc-hero-claim h1 { font-size: 32px; } } .oc-hero-claim h1 .accent { color: var(--oc-accent); } .oc-hero-claim p { font-size: 17px; opacity: .9; margin: 0 0 24px; line-height: 1.5; max-width: 480px; color: #fff; } .oc-badge-norm { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; } .oc-badge-norm svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; } /* ─── Login card (form a destra) ─── */ .oc-login-card { background: var(--oc-surface, #fff); color: var(--oc-text); padding: 36px 32px; border-radius: 16px; box-shadow: 0 24px 48px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .08); } .oc-login-card .oc-logo-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; transition: margin-bottom 400ms cubic-bezier(.4, 0, .2, 1); } .oc-login-card .oc-logo-wrap img { height: 30px; width: auto; flex-shrink: 1; min-width: 0; transition: height 400ms cubic-bezier(.4, 0, .2, 1); } .oc-login-card .oc-seg-tag { background: var(--oc-primary-soft); color: var(--oc-primary-dark); padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; flex-shrink: 0; white-space: nowrap; overflow: hidden; /* Mood segmentato (default): visibile a piena dimensione. Sequenza neutro->segmentato: prima il logo zoom-out (220ms), poi il tag cresce + fade-in tutto insieme con curva fluida. */ opacity: 1; max-width: 240px; transition: opacity 280ms ease 220ms, max-width 320ms cubic-bezier(.4, 0, .2, 1) 220ms, padding 320ms cubic-bezier(.4, 0, .2, 1) 220ms; } /* Mood neutro: logo ingrandito e centrato (tag nascosto). Niente max-width: il logo SVG ha aspect ratio ~6.67 (molto largo). Il logo viene centrato orizzontalmente nel wrapper per simmetria visiva con il resto della card. Quando l'utente digita un'email riconosciuta, il logo passa a 36px e si riallinea a sinistra (transition morbida). */ [data-segment="neutro"] .oc-login-card .oc-logo-wrap { justify-content: center; } [data-segment="neutro"] .oc-login-card .oc-logo-wrap img { height: 50px; flex-shrink: 0; } /* Mood neutro: tag fade-out + collasso fluido (max-width 0 + padding 0). Sequenza segmentato->neutro: prima il tag si comprime (300ms), poi il logo cresce con il suo zoom-in (400ms). Tutto continuo, zero scatti. */ [data-segment="neutro"] .oc-login-card .oc-seg-tag { opacity: 0; max-width: 0; padding-left: 0; padding-right: 0; transition: opacity 240ms ease 0s, max-width 300ms cubic-bezier(.4, 0, .2, 1) 0s, padding 300ms cubic-bezier(.4, 0, .2, 1) 0s; } /* Transizione morbida sui colori del mood al cambio segment */ .oc-hero, .oc-hero-claim, .oc-hero-claim h1 .accent, .oc-login-card, .oc-login-card .oc-btn-primary-mood, .oc-public-body { transition: background 400ms cubic-bezier(.4, 0, .2, 1), background-color 400ms cubic-bezier(.4, 0, .2, 1), color 400ms cubic-bezier(.4, 0, .2, 1), border-color 400ms cubic-bezier(.4, 0, .2, 1); } .oc-login-card label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--oc-text-muted); margin-bottom: 6px; } .oc-login-card .form-control { border: 1px solid var(--oc-border); border-radius: 8px; padding: 12px 14px; font-size: 15px; background: var(--oc-bg-tint, #f7f8fa); color: var(--oc-text); width: 100%; box-sizing: border-box; } .oc-login-card .form-control:focus { outline: none; border-color: var(--oc-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--oc-primary) 18%, transparent); background: #fff; } .oc-login-card .field-row { margin-bottom: 16px; position: relative; } .oc-login-card .field-row.has-toggle .form-control { padding-right: 44px; } .oc-login-card .toggle-pwd { position: absolute; right: 8px; bottom: 8px; background: transparent; border: 0; padding: 6px; cursor: pointer; color: var(--oc-text-muted); line-height: 0; } .oc-login-card .toggle-pwd:hover { color: var(--oc-primary); } .oc-login-card .toggle-pwd svg { width: 18px; height: 18px; fill: currentColor; } .oc-btn-primary-mood { width: 100%; background: var(--oc-primary); color: var(--oc-on-primary, #fff); border: 0; padding: 12px 16px; border-radius: 8px; font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 8px; transition: background-color .15s ease, transform .05s ease; } .oc-btn-primary-mood:hover { background: var(--oc-primary-dark); } .oc-btn-primary-mood:active { transform: translateY(1px); } .oc-btn-primary-mood:focus-visible { outline: 2px solid var(--oc-accent); outline-offset: 2px; } .oc-login-help { text-align: center; margin-top: 16px; color: var(--oc-text-muted); font-size: 13px; } .oc-login-help a { color: var(--oc-primary); text-decoration: none; font-weight: 600; } .oc-login-help a:hover { color: var(--oc-primary-dark); text-decoration: underline; } /* ─── Lang switcher (top-right del card) ─── */ .oc-lang-switch { text-align: right; margin-bottom: 12px; font-size: 12px; } .oc-lang-switch a { color: var(--oc-text-muted); text-decoration: none; margin-left: 4px; font-weight: 600; padding: 2px 7px; border-radius: 4px; opacity: 0.55; transition: color .15s ease, background-color .15s ease, opacity .15s ease; } .oc-lang-switch a:hover { color: var(--oc-primary); opacity: 0.85; } /* Lingua attiva — auto-rilevata dal server-rendered. Fallback: classe .active per uso JS-side se mai servisse. */ html[lang="it"] .oc-lang-switch a[href*="lang=IT"], html[lang="en"] .oc-lang-switch a[href*="lang=EN"], .oc-lang-switch a.active { color: var(--oc-primary); font-weight: 800; opacity: 1; background-color: rgba(0, 0, 0, 0.06); text-decoration: none; } /* ─── Footer pubblico (sotto hero) ─── */ .oc-public-footer { background: var(--oc-bg-tint, #e0e5ed); color: var(--oc-text-muted); padding: 16px 0; font-size: 12px; text-align: center; } .oc-public-footer img { vertical-align: middle; height: 16px; margin-right: 6px; } /* ─── Smart bar (Bluetooth/QR per smartphone) ─── */ .oc-smart-bar { position: fixed; /* top allineato al padding superiore dell'hero della login (16px su mobile) così le icone sono sulla stessa quota del badge norma a sinistra. */ top: 16px; right: 12px; z-index: 100; display: none; gap: 8px; } .oc-smart-bar .btn { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; /* Contorno sottile uniforme su entrambe le icone (BLE + QR): le rende omogenee e visibili sull'hero scuro in entrambi i segmenti (navy/blu BLE, accent QR). */ border: 1px solid rgba(255, 255, 255, .6); cursor: pointer; /* Tap target comodo su mobile (≥44px): su phone i bottoni sono solo-icona. */ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .oc-smart-bar .btn-ble { background: var(--oc-primary); color: #fff; } .oc-smart-bar .btn-qr { background: var(--oc-accent); color: var(--oc-text); } .oc-smart-bar.is-visible { display: flex; } /* Messaggio d'esito scansione beacon (dentro l'overlay di caricamento, box bianco). */ .oc-ble-msg { color: #1c2024; font-size: 15px; line-height: 1.5; max-width: 300px; margin: 0 auto 14px; padding: 0 16px; font-weight: 500; } /* ─── Scanner QR a tutto schermo (qr-scanner) ─── */ .oc-qr-overlay { position: fixed; inset: 0; z-index: 200; background: #000; display: none; flex-direction: column; } .oc-qr-overlay.is-visible { display: flex; } .oc-qr-stage { position: relative; flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; } .oc-qr-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } .oc-qr-hint { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; color: #fff; font-size: 15px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.7); padding: 0 18px; } .oc-qr-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(86%, 360px); background: #fff; color: var(--oc-text, #1c2024); border-radius: 14px; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.45); text-align: center; } .oc-qr-error strong { font-size: 16px; font-weight: 700; } .oc-qr-error span { font-size: 14px; line-height: 1.5; color: var(--oc-text-muted, #4b5563); } .oc-qr-toolbar { flex: 0 0 auto; display: flex; gap: 10px; justify-content: center; align-items: center; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); background: #111; } .oc-qr-btn { appearance: none; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.08); color: #fff; font-size: 14px; font-weight: 600; padding: 12px 16px; border-radius: 10px; cursor: pointer; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; } .oc-qr-btn:hover { background: rgba(255,255,255,.16); } .oc-qr-btn--close { background: var(--oc-accent, #F4B400); color: #1c2024; border-color: transparent; } /* ─── Loading / QR overlay ─── */ .oc-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .65); z-index: 200; align-items: center; justify-content: center; } .oc-overlay.is-visible { display: flex; } .oc-overlay-content { background: #fff; border-radius: 12px; padding: 24px; max-width: 90vw; max-height: 90vh; overflow: auto; color: var(--oc-text); } .oc-overlay .spinner-border { width: 3rem; height: 3rem; color: var(--oc-accent); } /* ─── Variants per pagine pubbliche secondarie (reset, register, ecc.) ─── */ /* Hero compact: meno padding, niente claim a sinistra */ .oc-hero--compact { padding: 32px 0 48px; } /* Layout centrato: una colonna invece di split */ .oc-hero-grid--centered { grid-template-columns: minmax(0, 1fr); justify-items: center; } .oc-hero-grid--centered .oc-login-card { width: 100%; max-width: 460px; } /* Card più larga per form di registrazione */ .oc-hero-grid--wide { grid-template-columns: minmax(0, 1fr); justify-items: center; } .oc-hero-grid--wide .oc-login-card { width: 100%; max-width: 720px; } /* Titolo + lead della card pubblica */ .oc-card-title { font-size: 22px; font-weight: 700; color: var(--oc-text); margin: 8px 0 8px; letter-spacing: -.2px; } .oc-card-lead { color: var(--oc-text-muted); font-size: 14px; line-height: 1.5; margin: 0 0 20px; } /* Card di "ack" (messaggio + link, senza form) */ .oc-ack-card { text-align: center; background: var(--oc-surface, #fff); color: var(--oc-text); padding: 36px 32px; border-radius: 16px; box-shadow: 0 24px 48px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .08); max-width: 520px; margin: 0 auto; } .oc-ack-card img.logo { display: block; height: 48px; margin: 0 auto 18px; } .oc-ack-card h2 { font-size: 22px; font-weight: 700; color: var(--oc-text); margin: 0 0 14px; } .oc-ack-card p { font-size: 15px; color: var(--oc-text-muted); line-height: 1.55; margin: 0 0 18px; } .oc-ack-card .ack-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--oc-primary-soft); color: var(--oc-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .oc-ack-card .ack-icon.is-warning { background: color-mix(in srgb, var(--oc-danger) 12%, white); color: var(--oc-danger); } .oc-ack-card .ack-icon.is-danger { background: color-mix(in srgb, var(--oc-danger) 14%, white); color: var(--oc-danger); } .oc-ack-card .ack-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .oc-ack-card .oc-btn-primary-mood { display: inline-block; width: auto; padding: 10px 24px; } /* Form di registrazione (campi multi-colonna) */ .oc-register-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } @media (max-width: 600px) { .oc-register-grid { grid-template-columns: 1fr; } } .oc-register-grid .col-full { grid-column: 1 / -1; } /* ─── Override classi legacy DENTRO una card pubblica ─── */ /* Le classi text-light/text-warning/text-info erano pensate per sfondi scuri. Ora che il form è su card bianca, le label devono essere leggibili. */ .oc-login-card .form-label, .oc-login-card label.form-label, .oc-login-card label { color: var(--oc-text) !important; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; } .oc-login-card .text-light { color: var(--oc-text) !important; } .oc-login-card .text-info { color: var(--oc-primary) !important; } .oc-login-card a.text-decoration-underline { color: var(--oc-primary) !important; } .oc-login-card .text-disabled { color: var(--oc-text-muted) !important; } /* Inputs e select dentro la card prendono il look oc */ .oc-login-card .form-control, .oc-login-card .form-select { border: 1px solid var(--oc-border); border-radius: 8px; padding: 10px 12px; font-size: 15px; background: var(--oc-bg-tint, #f7f8fa); color: var(--oc-text); } .oc-login-card .form-control:focus, .oc-login-card .form-select:focus { border-color: var(--oc-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--oc-primary) 18%, transparent); background: #fff; } /* Bottone Bootstrap btn-primary dentro la card → mood */ .oc-login-card .btn-primary { background: var(--oc-primary); border-color: var(--oc-primary); color: #fff; font-weight: 600; } .oc-login-card .btn-primary:hover { background: var(--oc-primary-dark); border-color: var(--oc-primary-dark); } /* hr dentro la card */ .oc-login-card hr { border-color: var(--oc-border); opacity: .6; } /* ─── Lang switch su sfondo scuro (navbar landing QR showDocs) ─── Variante di .oc-lang-switch per quando vive sopra l'header navy (bg-opencloud): testo bianco invece di muted, highlight lingua attiva con pill chiara. Stessa logica di highlight della login. */ /* !important necessario: oc-legacy-bridge.css ha una regola generica `a:not(.btn):not(.oc-btn)...` con specificità (0,5,1) che altrimenti imporrebbe il colore primary (navy) ai link, illeggibile su sfondo scuro. La login non ha il problema perché non carica il bridge. */ .oc-lang-switch--on-dark { color: #fff; } .oc-lang-switch--on-dark > span[aria-hidden] { opacity: .85; } .oc-lang-switch--on-dark .oc-lang-globe { width: 14px; height: 14px; vertical-align: -2px; opacity: .85; } .oc-lang-switch--on-dark a { color: rgba(255, 255, 255, .72) !important; } .oc-lang-switch--on-dark a:hover { color: #fff !important; opacity: 1; background-color: rgba(255, 255, 255, .12); } html[lang="it"] .oc-lang-switch--on-dark a[href*="lang=IT"], html[lang="en"] .oc-lang-switch--on-dark a[href*="lang=EN"] { color: #fff !important; font-weight: 800; opacity: 1; background-color: rgba(255, 255, 255, .18); } /* ─── Card dedicata "invito al login" (pagine pubbliche QR, sotto il badge) ─── */ .oc-pub-login-cta { display: flex; align-items: center; gap: 14px; background: var(--oc-surface, #fff); border: 1px solid var(--oc-border); border-left: 4px solid var(--oc-primary); border-radius: 12px; box-shadow: var(--oc-shadow-sm); padding: 14px 18px; margin: 12px 0; } .oc-pub-login-cta__body { flex: 1 1 auto; min-width: 0; } .oc-pub-login-cta__body strong { display: block; color: var(--oc-text); font-size: 15px; line-height: 1.3; } .oc-pub-login-cta__body span { color: var(--oc-text-muted); font-size: 13px; } /* color !important: batte la regola generica a:not(.btn)... del bridge (0,5,1) che altrimenti colorerebbe il bottone di navy (invisibile su sfondo primary). */ .oc-pub-login-cta__btn { flex: 0 0 auto; background: var(--oc-primary); color: #fff !important; padding: 10px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; white-space: nowrap; transition: background-color .15s ease; } .oc-pub-login-cta__btn:hover { background: var(--oc-primary-dark); } @media (max-width: 540px) { .oc-pub-login-cta { flex-wrap: wrap; } .oc-pub-login-cta__btn { width: 100%; text-align: center; } }