/* 360roulette — tema "premium immersivo", doppia versione dark (default) / light. Tutte le superfici usano variabili: il tema si cambia con [data-theme] sul . */ :root { --bg: #0e1116; --bg-grad: radial-gradient(1100px 700px at 75% -10%, rgba(77, 163, 255, .10), transparent), #0e1116; --surface: rgba(16, 19, 26, .72); --surface-solid: #141821; --border: rgba(255, 255, 255, .09); --fg: #eef1f5; --fg-dim: #98a2b0; --accent: #4da3ff; --accent-contrast: #06121f; --danger: #ff5d5d; --ok: #34d97b; --warn: #ffc857; --shadow: 0 18px 50px rgba(0, 0, 0, .45); --radius: 14px; --font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } [data-theme="light"] { --bg: #f4f6f9; --bg-grad: radial-gradient(1100px 700px at 75% -10%, rgba(10, 102, 255, .07), transparent), #f4f6f9; --surface: rgba(255, 255, 255, .82); --surface-solid: #ffffff; --border: rgba(15, 23, 42, .10); --fg: #101828; --fg-dim: #5d6b7e; --accent: #0a66ff; --accent-contrast: #ffffff; --danger: #d92d20; --ok: #039855; --warn: #b54708; --shadow: 0 18px 40px rgba(16, 24, 40, .10); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font); background: var(--bg-grad); background-attachment: fixed; color: var(--fg); -webkit-font-smoothing: antialiased; transition: background-color .25s, color .25s; } a { color: var(--accent); text-decoration: none; } button { font-family: var(--font); } /* ---------- superficie base ---------- */ .glass { background: var(--surface); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } /* ---------- topbar ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: 30px; padding: 0 32px; height: 64px; white-space: nowrap; background: var(--surface); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border: none; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; } .topbar .logo { font-weight: 650; font-size: 19px; letter-spacing: -.02em; color: var(--fg); } .topbar .logo span { color: var(--accent); } .topbar a.nav { color: var(--fg-dim); font-size: 14.5px; font-weight: 480; transition: color .15s; } .topbar a.nav:hover { color: var(--fg); } .topbar a.cta { margin-left: auto; background: var(--accent); color: var(--accent-contrast); font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: 10px; transition: transform .15s, filter .15s; } .topbar a.cta:hover { transform: translateY(-1px); filter: brightness(1.1); } .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 10px; width: 38px; height: 38px; cursor: pointer; font-size: 16px; color: var(--fg); display: grid; place-items: center; transition: border-color .15s; } .theme-toggle:hover { border-color: var(--accent); } /* fullscreen immersivo: la topbar scivola via */ .topbar { transition: transform .35s ease, opacity .35s ease; } body.is-fullscreen .topbar { transform: translateY(-100%); opacity: 0; pointer-events: none; } /* auto-nascondi durante la visualizzazione: dopo qualche secondo di quiete scheda, controlli e menu sfumano per lasciare la panoramica pulita */ .infocard, .controls { transition: opacity .6s ease; } body.home.ui-hidden .topbar, body.home.ui-hidden .infocard, body.home.ui-hidden .controls { opacity: 0; pointer-events: none; } body.home.ui-hidden { cursor: none; } /* home (viewer): niente barra piena — scritte e pulsanti flottanti sulla foto, con ombre che li tengono leggibili su qualunque sfondo */ body.home .topbar { background: transparent; border-bottom: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.home .topbar .logo, body.home .topbar a.nav, body.home .topbar .nav { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 2px 14px rgba(0, 0, 0, .55); } body.home .topbar .logo span { color: #7cc0ff; } body.home .topbar a.nav:hover { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 18px rgba(255, 255, 255, .35); } body.home .topbar a.cta { background: rgba(10, 13, 18, .35); border: 1px solid rgba(255, 255, 255, .55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); box-shadow: 0 2px 14px rgba(0, 0, 0, .35); } body.home .topbar a.cta:hover { background: rgba(255, 255, 255, .18); } body.home .topbar .theme-toggle { border-color: rgba(255, 255, 255, .5); color: #fff; background: rgba(10, 13, 18, .25); box-shadow: 0 2px 12px rgba(0, 0, 0, .35); } /* ---------- viewer fullscreen ---------- */ #stage { position: fixed; inset: 0; background: #000; touch-action: none; } /* il viewer forza position:relative sul contenitore: serve un'altezza esplicita */ .vstage { width: 100%; height: 100% !important; } #fadeLayer { position: fixed; inset: 0; background: #000; pointer-events: none; opacity: 0; transition: opacity .55s ease; z-index: 5; } #fadeLayer.on { opacity: 1; } /* ---------- UI dentro il visore (cardboard) ---------- */ /* nel visore gli overlay normali spariscono: c'è la UI replicata nei due occhi */ body.cardboard .topbar, body.cardboard .infocard, body.cardboard .controls, body.cardboard .cookiebar, body.cardboard .loading-hint { display: none !important; } #cbOverlay { display: none; } body.cardboard #cbOverlay { display: flex; position: fixed; inset: 0; z-index: 50; pointer-events: none; } .cb-eye { width: 50%; display: grid; place-items: end center; padding-bottom: 12vh; } .cb-panel { background: rgba(8, 10, 13, .72); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; padding: 12px 18px; text-align: center; max-width: 70%; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; } body.cardboard #cbOverlay.on .cb-panel { opacity: 1; transform: none; } .cb-place { font-size: 15px; font-weight: 600; } .cb-author { font-size: 11.5px; color: rgba(255, 255, 255, .7); margin-top: 2px; } .cb-hint { font-size: 10.5px; color: rgba(255, 255, 255, .55); margin-top: 8px; letter-spacing: .04em; } /* la home resta cinematica anche in tema light: overlay sempre scuri sopra la foto */ .overlay-dark { background: rgba(10, 13, 18, .62); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .12); color: #eef1f5; } /* scheda info in basso a destra */ .infocard { position: fixed; right: 24px; bottom: 28px; z-index: 30; /* allineata alla base dei controlli */ max-width: 320px; padding: 18px 22px; border-radius: 16px; animation: cardIn .5s ease; } @keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .infocard .place { font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .infocard .author { font-size: 13px; color: rgba(238, 241, 245, .68); margin-top: 3px; } .infocard .desc { font-size: 13px; color: rgba(238, 241, 245, .68); margin-top: 10px; line-height: 1.55; } .infocard .cat { display: inline-block; margin-top: 12px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #9ecbff; background: rgba(77, 163, 255, .16); padding: 4px 10px; border-radius: 999px; } /* controlli in basso al centro */ .controls { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 20px; } .btn-round { width: 50px; height: 50px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); color: #eef1f5; font-size: 20px; cursor: pointer; display: grid; place-items: center; transition: transform .15s, background .15s; } .btn-round:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .15); } .btn-round.liked { color: #ff6b81; } .btn-roulette { height: 54px; padding: 0 36px; border-radius: 14px; border: none; cursor: pointer; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--accent-contrast); background: linear-gradient(135deg, #4da3ff, #2f7bff); box-shadow: 0 8px 28px rgba(47, 123, 255, .45); transition: transform .15s, box-shadow .15s; } .btn-roulette:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(47, 123, 255, .6); } .btn-roulette:active { transform: scale(.97); } .like-count { font-size: 13px; color: rgba(238, 241, 245, .7); min-width: 20px; text-align: center; } .loading-hint { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 30; font-size: 13px; font-weight: 500; color: #eef1f5; padding: 9px 18px; border-radius: 999px; opacity: 0; transition: opacity .3s; } .loading-hint.on { opacity: 1; } /* ---------- cookie banner ---------- */ .cookiebar { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 60; width: min(580px, calc(100vw - 32px)); padding: 16px 20px; font-size: 13.5px; display: flex; gap: 18px; align-items: center; border-radius: 16px; color: rgba(238, 241, 245, .8); } .cookiebar a { color: #9ecbff; } .cookiebar button { border: none; border-radius: 10px; padding: 10px 22px; font-weight: 600; cursor: pointer; background: #eef1f5; color: #10141b; font-size: 13.5px; } /* ---------- pagine contenuto ---------- */ .page { max-width: 820px; margin: 0 auto; padding: 150px 28px 100px; } .page h1 { font-size: clamp(38px, 6vw, 62px); font-weight: 650; letter-spacing: -.03em; line-height: 1.04; } .page h1 .grad { color: var(--accent); } .page h2 { font-size: 24px; font-weight: 600; margin: 52px 0 14px; letter-spacing: -.02em; } .page p, .page li { color: var(--fg-dim); line-height: 1.75; font-size: 16px; margin-top: 12px; } .page .lead { font-size: 20px; color: var(--fg); } /* ---------- dashboard (studio & sadmin) ---------- */ .dash { max-width: 1240px; margin: 0 auto; padding: 112px 28px 80px; } .dash h1 { font-size: 32px; font-weight: 650; letter-spacing: -.02em; margin-bottom: 8px; } .dash .sub { color: var(--fg-dim); font-size: 15px; margin-bottom: 34px; } .grid { display: grid; gap: 20px; } .grid.kpi { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); } .kpi-card { padding: 24px 26px; } .kpi-card .n { font-size: 36px; font-weight: 650; letter-spacing: -.02em; color: var(--fg); } .kpi-card .l { font-size: 12px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; font-weight: 500; } .panel { padding: 28px; margin-top: 20px; } .panel h3 { font-size: 16px; font-weight: 600; margin-bottom: 18px; color: var(--fg); letter-spacing: -.01em; } table.list { width: 100%; border-collapse: collapse; font-size: 14.5px; } table.list th { text-align: left; color: var(--fg-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; padding: 10px 14px; border-bottom: 1px solid var(--border); } table.list td { padding: 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } table.list img.thumb { width: 92px; height: 46px; object-fit: cover; border-radius: 8px; display: block; } .badge { font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; display: inline-block; } .badge.approved { background: rgba(52, 217, 123, .14); color: var(--ok); } .badge.pending { background: rgba(255, 200, 87, .16); color: var(--warn); } .badge.rejected, .badge.failed { background: rgba(255, 93, 93, .13); color: var(--danger); } .badge.draft { background: rgba(77, 163, 255, .14); color: var(--accent); } .badge.processing, .badge.suspended { background: rgba(128, 140, 158, .16); color: var(--fg-dim); } .btn { display: inline-block; border: none; cursor: pointer; border-radius: 10px; font-weight: 600; font-size: 13.5px; padding: 11px 20px; transition: transform .15s, filter .15s; } .btn:hover { transform: translateY(-1px); filter: brightness(1.08); } .btn.primary { background: var(--accent); color: var(--accent-contrast); } .btn.light { background: var(--fg); color: var(--bg); } .btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); } .btn.ghost:hover { border-color: var(--accent); } .btn.danger { background: rgba(255, 93, 93, .12); color: var(--danger); border: 1px solid rgba(255, 93, 93, .3); } .btn.ok { background: rgba(52, 217, 123, .13); color: var(--ok); border: 1px solid rgba(52, 217, 123, .3); } input[type=text], input[type=email], input[type=password], select, textarea { width: 100%; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 10px; color: var(--fg); padding: 12px 15px; font-size: 14.5px; font-family: var(--font); outline: none; transition: border-color .15s; } input:focus, select:focus, textarea:focus { border-color: var(--accent); } label.fl { display: block; font-size: 11.5px; color: var(--fg-dim); margin: 16px 0 7px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; } /* tablekit: ricerca + ordinamento + impaginazione */ .tk-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .tk-search { max-width: 280px; } .tk-count { font-size: 12.5px; color: var(--fg-dim); } th.tk-sortable { cursor: pointer; user-select: none; } th.tk-sortable:hover { color: var(--fg); } th.tk-asc::after { content: " ▲"; font-size: 9px; color: var(--accent); } th.tk-desc::after { content: " ▼"; font-size: 9px; color: var(--accent); } .tk-pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 14px; } .tk-btn { border: 1px solid var(--border); background: transparent; color: var(--fg); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px; } .tk-btn:disabled { opacity: .35; cursor: default; } .tk-btn:not(:disabled):hover { border-color: var(--accent); } .tk-pageinfo { font-size: 12.5px; color: var(--fg-dim); } /* dropzone upload */ .dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 52px 24px; text-align: center; color: var(--fg-dim); cursor: pointer; transition: border-color .15s, background .15s; } .dropzone.drag, .dropzone:hover { border-color: var(--accent); background: rgba(77, 163, 255, .05); } .progressbar { height: 6px; border-radius: 999px; background: rgba(128, 140, 158, .22); overflow: hidden; margin-top: 16px; } .progressbar > div { height: 100%; width: 0%; background: var(--accent); transition: width .4s; } /* auth / login card */ .center-card { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .center-card .glass { width: min(420px, 100%); padding: 40px; } /* finestra ridotta su desktop: la scheda sale sopra i controlli per non sovrapporsi */ @media (max-width: 1080px) { .topbar { gap: 18px; padding: 0 20px; } .infocard { right: 16px; bottom: 124px; max-width: 280px; } } @media (max-width: 640px) { .topbar { gap: 12px; padding: 0 14px; height: 56px; } .topbar a.nav { font-size: 13px; } .topbar a.cta { padding: 8px 14px; font-size: 13px; } .infocard { right: 12px; left: 12px; max-width: none; bottom: 96px; padding: 14px 16px; } .controls { bottom: 14px; gap: 10px; padding: 10px 12px; } .btn-roulette { padding: 0 24px; font-size: 15px; } .page { padding-top: 110px; } .dash { padding-top: 92px; } } /* schermi molto stretti: restano logo, azione principale e tema */ @media (max-width: 480px) { .topbar a.nav { display: none; } .topbar form { display: none !important; } }