/* Negozio dei corsi: stesso linguaggio visivo delle dispense (dispense.manuzzi.photo). Palette, font e tema chiaro/scuro (segue le impostazioni del dispositivo) sono quelli della dispensa; le regole sovrascrivono il tema di pretix e si caricano con il segnale html_head del plugin. */ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-400.814fe1615d4d.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500.6708425c446b.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-400.b7d6b48d8d12.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-700.017598645bcc.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/lato-900.cf5ec3859b05.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("fonts/source-serif-4-500-800.6a682eb0234e.woff2") format("woff2"); } :root { --font-display: "Source Serif 4", "Cambria", "Georgia", serif; --font-body: "Lato", "Calibri", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", "Consolas", "Courier New", monospace; --bg: #F5F4F1; --bg2: #ECEAE5; --panel: #FFFFFF; --panel2: #F0EEE9; --line: #D9D6CF; --fg: #141414; --muted: #5E5B55; --dim: #8F8B83; --accent: #F2B705; --accent-hover: #DDA500; --accent-ink: #1A1300; --accent-text: #8A6200; --alert: #C93F2B; --good: #2E8B4A; --warn-bg: rgba(242, 183, 5, .14); --pretix-brand-primary: #8A6200; /* colore dei link e dei passi: nel tema chiaro l'ambra scura leggibile su bianco */ color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --bg: #111111; --bg2: #161616; --panel: #1C1C1C; --panel2: #2A2A2A; --line: #3D3D3D; --fg: #F2F2F2; --muted: #A8A8A8; --dim: #6B6B6B; --accent-text: #F2B705; --alert: #E5533D; --good: #6FBF73; --warn-bg: rgba(242, 183, 5, .12); --pretix-brand-primary: #F2B705; color-scheme: dark; } } /* ---------- base ---------- */ html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.55 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .container.main-box, .main-box { background: transparent; box-shadow: none; border: 0; border-radius: 0; max-width: 980px; padding-top: 24px; padding-bottom: 48px; } a { color: var(--accent-text); text-underline-offset: 3px; } a:hover, a:focus { color: var(--fg); } :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; } hr { border-color: var(--line); } ::selection { background: var(--accent); color: var(--accent-ink); } h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--font-display); font-weight: 700; color: var(--fg); letter-spacing: -.01em; text-wrap: balance; } h1, .h1 { font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; } h2, .h2 { font-size: clamp(1.5rem, 3.8vw, 2.1rem); line-height: 1.15; } h3, .h3 { font-size: 1.3rem; line-height: 1.2; font-weight: 600; } h4, .h4 { font-size: 1.15rem; line-height: 1.25; font-weight: 600; } legend { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--fg); border-bottom: 1px solid var(--line); } .text-muted, small, .help-block { color: var(--muted); } code, pre, kbd { font-family: var(--font-mono); background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; } /* ---------- testata ---------- */ .page-header { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin: 0 0 24px; } .event-logo { height: 72px; width: 72px; max-height: 72px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); } .page-header-links a, header a { color: var(--muted); } /* ---------- avvisi (anche la modalità test) ---------- */ .alert { border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); } .alert-warning, .alert-testmode { background: var(--warn-bg); border-color: var(--accent); color: var(--fg); } .alert-warning strong { color: var(--fg); } .alert-danger { border-color: var(--alert); background: color-mix(in srgb, var(--alert) 10%, var(--panel)); color: var(--fg); } .alert-success { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--panel)); color: var(--fg); } .alert-info { background: var(--panel2); border-color: var(--line); color: var(--fg); } /* ---------- schede (carrello, pannelli, prodotti) ---------- */ .panel, .panel-default { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: none; overflow: hidden; color: var(--fg); } .panel-default > .panel-heading, .panel-heading { background: transparent; color: var(--accent-text); border-bottom: 1px solid var(--line); padding: 14px 20px; } .panel-heading .panel-title, .panel-title { font: 500 .78rem/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); } .panel-title strong, .panel-heading strong { font-weight: 500; } .panel-body { padding: 20px; background: transparent; } .panel-footer { background: var(--panel2); border-top: 1px solid var(--line); } .panel-group .panel + .panel { margin-top: 12px; } /* pannelli di stato (conferma, pagamento, annullamento): stessa scheda, con il filetto giallo a segnalarli */ .panel-primary, .panel-success, .panel-warning, .panel-danger, .panel-info { background: var(--panel); border-color: var(--line); border-radius: 16px; box-shadow: none; } .panel-primary { border-color: var(--accent); } .panel-primary > .panel-heading, .panel-success > .panel-heading, .panel-warning > .panel-heading, .panel-danger > .panel-heading, .panel-info > .panel-heading { background: transparent; color: var(--accent-text); border-color: var(--line); } .panel-danger > .panel-heading, .panel-danger > .panel-heading .panel-title { color: var(--alert); } .panel-primary > .panel-body, .panel-success > .panel-body, .panel-warning > .panel-body, .panel-danger > .panel-body, .panel-info > .panel-body { background: transparent; color: var(--fg); } .list-group-item { background: var(--panel); border-color: var(--line); color: var(--fg); } .well { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; color: var(--fg); } .label { border-radius: 999px; padding: .4em .9em; font: 500 .72rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; } .label-warning, .label-primary { background: var(--accent); color: var(--accent-ink); } .label-success { background: var(--good); color: #fff; } .label-danger { background: var(--alert); color: #fff; } .label-default, .label-info { background: var(--panel2); color: var(--fg); border: 1px solid var(--line); } .thank-you h2, .thank-you .h2 { color: var(--good); } .table, table { color: var(--fg); } .table > thead > tr > th, .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-color: var(--line); } .table-striped > tbody > tr:nth-of-type(odd) { background: var(--panel2); } .product-row, .cart-row, .cart-rowgroup-total, .item-with-variations, .variation { border-color: var(--line); } .product-row .product-description, .variation-description { color: var(--muted); } .price, .totalprice, .singleprice, .total { font-family: var(--font-body); font-variant-numeric: tabular-nums; } .total, .cart-rowgroup-total, .totalprice strong { color: var(--fg); } .sneak-peek-trigger { background: linear-gradient(0deg, color-mix(in srgb, var(--panel) 92%, transparent) 44%, transparent 100%); } .panel-heading .fa, .fa-shopping-cart { color: var(--accent-text); } /* ---------- pulsanti: pillola, giallo come nelle dispense ---------- */ .btn { border-radius: 999px; min-height: 44px; font: 700 .95rem/1.2 var(--font-body); padding: 10px 22px; border-width: 1px; box-shadow: none; text-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn-block { display: flex; } .btn-xs, .btn-sm { min-height: 34px; padding: 6px 14px; font-size: .85rem; } .btn-lg { min-height: 52px; font-size: 1.05rem; padding: 12px 28px; } .btn-default, .btn-link { background: transparent; border-color: var(--line); color: var(--fg); } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active { background: var(--panel2); border-color: var(--dim); color: var(--fg); } .btn-primary, .btn-success, .btn-primary:visited { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-success:hover, .btn-success:focus, .btn-success:active { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); } .btn-danger { background: var(--alert); border-color: var(--alert); color: #fff; } .btn[disabled], .btn.disabled { opacity: .5; } .btn-checkbox { border-radius: 999px; } .input-group-btn .btn, .input-group-addon { border-radius: 0; } .checkout-button-row { margin-top: 28px; } .checkout-button-row .btn { min-height: 48px; } /* ---------- campi ---------- */ .form-control, select.form-control, textarea.form-control, .input-group-addon, .select2-selection, input[type="text"], input[type="email"], input[type="number"], input[type="tel"] { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; min-height: 44px; font-family: var(--font-body); } .input-group-addon { background: var(--panel2); color: var(--muted); } .input-group > .form-control:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .form-control:focus { border-color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } .form-control::placeholder { color: var(--dim); } label, .control-label { font-weight: 700; color: var(--fg); } .help-block { color: var(--muted); } .has-error .form-control { border-color: var(--alert); } .has-error .help-block, .has-error .control-label, .text-danger { color: var(--alert); } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-text); } /* ---------- passi dell'ordine ---------- */ .checkout-flow { margin: 8px 0 28px; } .checkout-flow .checkout-step .checkout-step-icon { background: var(--panel); border: 1px solid var(--line); color: var(--muted); } .checkout-flow .checkout-step.step-current .checkout-step-icon, .checkout-flow .checkout-step.step-done .checkout-step-icon { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .checkout-flow .checkout-step:before, .checkout-flow .checkout-step:after { background: var(--line); height: 4px; top: 23px; } .checkout-flow .checkout-step.step-done:before, .checkout-flow .checkout-step.step-done:after, .checkout-flow .checkout-step.step-current:before { background: var(--accent); } .checkout-flow .checkout-step .checkout-step-label { font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .checkout-flow .checkout-step.step-current .checkout-step-label, .checkout-flow .checkout-step.step-done .checkout-step-label a { color: var(--accent-text); } .progress { background: var(--bg2); border-radius: 999px; box-shadow: none; } .progress-bar, .progress-bar-success { background: var(--accent); color: var(--accent-ink); box-shadow: none; } /* ---------- fine pagina ---------- */ footer, footer a { color: var(--muted); font-size: .85rem; } footer { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 16px; } .modal-card-inner, .modal-card-content, .modal-card { background: var(--panel); color: var(--fg); border-radius: 16px; } /* ---------- telefoni ---------- */ @media (max-width: 767px) { body { font-size: 1rem; } .container.main-box, .main-box { padding-left: 16px; padding-right: 16px; } .panel-body { padding: 16px; } .checkout-flow .checkout-step-label { display: none; } } /* ===================================================================================================== Correzioni dopo la verifica UI/UX dell'ordine (scripts/audit-ui.py, desktop, chiaro e scuro) ===================================================================================================== */ /* ---------- pulsanti selezionati: pretix li colora di grigio chiaro (#eeeeee) in ogni tema, con testo chiaro nel tema scuro ---------- */ .btn.btn-checkbox.btn-checkbox-checked, .btn.btn-checkbox.btn-checkbox-checked:hover, .btn.btn-checkbox.btn-checkbox-checked:focus, .btn.btn-checkbox.btn-checkbox-checked:active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; } .btn-checkbox { justify-content: flex-start; padding-left: 40px; padding-right: 16px; } .btn-checkbox input[type="checkbox"] { accent-color: var(--accent-ink); width: 18px; height: 18px; margin: 0; top: 50%; transform: translateY(-50%); left: 12px; } .btn-checkbox:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; } /* stato "premuto" dei pulsanti neutri: sfondo e testo del tema, non i grigi fissi di pretix */ .btn-default:active, .btn-default.active, .btn-default:active:hover, .btn-default:active:focus, .btn-default.active:hover, .btn-default.active:focus { background: var(--panel2); color: var(--fg); border-color: var(--dim); box-shadow: none; } .btn-default[disabled], .input-item-count-dec[disabled], .input-item-count-inc[disabled] { background: var(--panel2); color: var(--dim); box-shadow: none; opacity: .7; } /* ---------- pulsanti: stessa altezza anche nel carrello (pretix li fissa a 34 px con una regola più specifica) ---------- */ .cart .checkout-button-row .btn, .checkout-button-row .btn { min-height: 48px; } .toggle-variations, .availability-box .btn { white-space: nowrap; } .availability-box .btn-default:not(.btn-checkbox) { padding-left: 14px; padding-right: 14px; } .btn-danger, .btn-danger:hover, .btn-danger:focus { background: var(--alert); border-color: var(--alert); color: #fff; } @media (prefers-color-scheme: dark) { .btn-danger, .btn-danger:hover, .btn-danger:focus { color: #141414; } } /* ---------- focus visibile in entrambi i temi (pretix usa un'ambra scura che sul fondo nero sparisce) ---------- */ a:focus, button:focus, .btn:focus, summary:focus, div:focus, button:active:focus, a:active:focus, .btn:active:focus, summary:active:focus, div:active:focus, label:focus { outline: 2px solid var(--accent-text); outline-offset: 2px; } .input-item-count-group input:focus, .input-group-price input:focus { outline: none; position: relative; z-index: 3; border-color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } #skip-to-main { background-color: var(--bg); } #skip-to-main a { color: var(--accent-text); background: var(--panel); padding: 8px 14px; border-radius: 8px; outline-color: var(--accent-text); } #skip-to-main a:active, #skip-to-main a:hover, #skip-to-main a:focus { color: var(--fg); outline: 2px solid var(--accent-text); outline-offset: 2px; } :root { --pretix-link-contrast-color: var(--accent-text); --pretix-link-hover-contrast-color: var(--fg); } /* ---------- scelta del metodo di pagamento: intestazione leggibile, quella scelta evidenziata ---------- */ .panel-default > .accordion-radio > .panel-heading, fieldset.accordion-panel > legend > .panel-heading, .accordion-radio .panel-heading { background: transparent; color: var(--fg); border: 0; padding: 14px 20px; display: block; } .accordion-radio .panel-title, .accordion-radio .panel-heading label { font: 700 1rem/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--fg); } .accordion-radio { cursor: pointer; } .panel-default:has(> .accordion-radio input[type="radio"]:checked) { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text); } .panel-default > .accordion-radio + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .panel-body { border-top: 1px solid var(--line); } input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; margin-top: 0; vertical-align: -3px; } .accordion-radio input[type="radio"] { margin-right: 12px; } /* ---------- collegamenti nelle intestazioni dei pannelli (es. "Aggiungi o rimuovi biglietti"): pretix li vuole bianchi ---------- */ .panel-heading a, .panel-title a, .panel-primary > .panel-heading a, .panel-heading a.h6 { color: var(--accent-text); } /* ---------- quantità: il campo era largo 38 px e tagliava i numeri da due cifre (fino a 15 posti) ---------- */ .input-item-count-group { width: 100%; max-width: 168px; } .input-item-count-group input, .product-row .input-item-count { min-width: 3.25rem; padding: 0 6px; text-align: center; } .input-item-count-dec, .input-item-count-inc { width: 2.75rem; min-height: 44px; padding: 0; justify-content: center; } .price { white-space: nowrap; } /* ---------- campi: testo alla stessa dimensione del resto della pagina, etichette allineate al primo campo ---------- */ .form-control, select.form-control, textarea.form-control, input[type="text"], input[type="email"], input[type="number"], input[type="tel"] { font-size: 1rem; line-height: 1.4; padding: 9px 14px; } select.form-control { padding-right: 34px; } textarea.form-control { min-height: 88px; } .form-horizontal .control-label, .control-label { font-size: .95rem; line-height: 1.35; padding-top: 11px; hyphens: manual; } .label-required, .control-label .label-required { display: block; font: 400 .78rem/1.3 var(--font-body); font-style: normal; color: var(--muted); margin-top: 2px; } .help-block { font-size: .92rem; margin-top: 6px; } .nameparts-form-group select[name="phone_0"] { flex: 0 0 9rem; } /* prefisso: stretto; il numero prende il resto */ .nameparts-form-group select[name="phone_0"] + input { flex: 1 1 auto; } .form-horizontal .radio, .form-horizontal .checkbox, .radio, .checkbox { min-height: 28px; } .radio label, .checkbox label { font-weight: 400; } .js-copy-answers { margin-bottom: 6px; } /* ---------- righe dei prodotti: colonna dei pulsanti più larga e pulsanti tutti della stessa larghezza ---------- */ .availability-box .btn { width: 100%; } @media (min-width: 992px) { .product-row > .col-md-8 { width: 56%; } .product-row > .col-md-2.price { width: 20%; text-align: right; } .product-row > .col-md-2.availability-box { width: 24%; } } /* ---------- caselle e pallini: spazio fra il controllo e il testo ---------- */ .radio, .checkbox { padding-left: 0; } .radio label, .checkbox label { padding-left: 30px; position: relative; line-height: 1.45; } .radio input[type="radio"], .checkbox input[type="checkbox"], .radio-inline input[type="radio"], .checkbox-inline input[type="checkbox"] { position: absolute; left: 0; top: 2px; margin: 0; } /* ---------- menu a tendina: Safari ignora l'altezza minima dei