/* ========================================================= ASPIC FVG – AREA RISERVATA / MY ACCOUNT ========================================================= */ /* ========================================================= RESET GENERALE ========================================================= */ body.woocommerce-account { background: #f7f9fc; } body.woocommerce-account *, .aspic-account-membership, .aspic-account-membership * { box-sizing: border-box; } /* ========================================================= WRAPPER ACCOUNT ========================================================= */ body.woocommerce-account .woocommerce { display: flex !important; width: min(1480px, calc(100% - 60px)); max-width: 1480px; margin: 60px auto 80px !important; padding: 0 !important; gap: 40px; align-items: flex-start; font-family: "Manrope", sans-serif; } body.woocommerce-account .woocommerce::before, body.woocommerce-account .woocommerce::after { display: none !important; content: none !important; } /* ========================================================= SIDEBAR ACCOUNT ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-navigation { order: 1; position: sticky; top: 110px; display: block !important; width: 260px !important; min-width: 260px; max-width: 260px; flex: 0 0 260px; float: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden; background: #ffffff; border: 1px solid rgba(20, 54, 119, .08); border-radius: 16px; box-shadow: 0 10px 30px rgba(20, 54, 119, .06); } body.woocommerce-account .woocommerce-MyAccount-navigation::before, body.woocommerce-account .woocommerce-MyAccount-navigation::after { display: none !important; content: none !important; } /* ========================================================= MENU SIDEBAR ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: block !important; width: 100%; margin: 0 !important; padding: 12px !important; list-style: none; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li { display: block; width: 100%; margin: 0 0 5px !important; padding: 0 !important; border: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { margin-bottom: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a { position: relative; display: flex; width: 100%; min-height: 44px; align-items: center; padding: 0 14px; color: #4f5969; background: transparent; border-radius: 9px; font-size: 12px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: color .22s ease, background .22s ease, transform .22s ease; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { color: #143677; background: #f6faff; transform: translateX(2px); } /* ========================================================= MENU ATTIVO ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #143677; background: #edf5fd; } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before { content: ""; position: absolute; left: 0; top: 9px; width: 3px; height: calc(100% - 18px); background: #3275b9; border-radius: 0 4px 4px 0; } /* ========================================================= LOGOUT ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid rgba(20, 54, 119, .08) !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a { color: #9b6563; } body.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: #8b5553; background: #fbf1f0; } /* ========================================================= CONTENT ACCOUNT ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content { order: 2; display: block !important; width: auto !important; min-width: 0; flex: 1 1 0; float: none !important; margin: 0 !important; padding: 38px 42px !important; background: #ffffff; border: 1px solid rgba(20, 54, 119, .07); border-radius: 16px; box-shadow: 0 10px 30px rgba(20, 54, 119, .05); } body.woocommerce-account .woocommerce-MyAccount-content::before, body.woocommerce-account .woocommerce-MyAccount-content::after { display: none !important; content: none !important; } /* ========================================================= TIPOGRAFIA ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content h1, body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3 { color: #143677; font-family: "Nunito Sans", "Manrope", sans-serif; font-weight: 600; } body.woocommerce-account .woocommerce-MyAccount-content h2 { margin-top: 0; font-size: 36px; line-height: 1.05; } body.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 27px; line-height: 1.1; } body.woocommerce-account .woocommerce-MyAccount-content p { color: #5f6674; font-size: 13px; line-height: 1.75; } body.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; } body.woocommerce-account .woocommerce-MyAccount-content strong { color: #143677; } body.woocommerce-account .woocommerce-MyAccount-content a { color: #3275b9; font-weight: 700; text-decoration: none; } body.woocommerce-account .woocommerce-MyAccount-content a:hover { color: #143677; } /* ========================================================= FORM ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content .form-row { margin-bottom: 17px; } body.woocommerce-account .woocommerce-MyAccount-content label { display: block; margin-bottom: 7px; color: #143677; font-size: 10px; font-weight: 800; } body.woocommerce-account .woocommerce-MyAccount-content input.input-text, body.woocommerce-account .woocommerce-MyAccount-content input[type="text"], body.woocommerce-account .woocommerce-MyAccount-content input[type="email"], body.woocommerce-account .woocommerce-MyAccount-content input[type="password"], body.woocommerce-account .woocommerce-MyAccount-content input[type="tel"], body.woocommerce-account .woocommerce-MyAccount-content select, body.woocommerce-account .woocommerce-MyAccount-content textarea { width: 100%; min-height: 48px; padding: 11px 13px; color: #333b48; background: #fafbfd; border: 1px solid #dce3ec; border-radius: 8px; font-family: "Manrope", sans-serif; font-size: 12px; outline: none; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; } body.woocommerce-account .woocommerce-MyAccount-content input:focus, body.woocommerce-account .woocommerce-MyAccount-content select:focus, body.woocommerce-account .woocommerce-MyAccount-content textarea:focus { background: #ffffff; border-color: #3275b9; box-shadow: 0 0 0 3px rgba(50, 117, 185, .08); } /* ========================================================= PASSWORD – DETTAGLI ACCOUNT ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content fieldset { position: relative; margin: 42px 0 24px !important; padding: 34px 28px 28px !important; background: #fbf1f0; border: 1px solid rgba(201, 135, 132, .18); border-radius: 14px; } body.woocommerce-account .woocommerce-MyAccount-content fieldset legend { display: inline-block; width: auto !important; margin: 0 0 8px !important; padding: 0 10px !important; color: #143677; background: #fbf1f0; font-family: "Nunito Sans", "Manrope", sans-serif; font-size: 28px; font-weight: 600; line-height: 1.05; } body.woocommerce-account .woocommerce-EditAccountForm fieldset legend { position: static !important; float: none !important; transform: none !important; } /* ========================================================= BOTTONI ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content .button, body.woocommerce-account .woocommerce-MyAccount-content button.button, body.woocommerce-account .woocommerce-MyAccount-content input.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 16px; color: #ffffff !important; background: #143677 !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 800; line-height: 1; text-decoration: none; transition: background .25s ease, transform .25s ease; } body.woocommerce-account .woocommerce-MyAccount-content .button:hover, body.woocommerce-account .woocommerce-MyAccount-content button.button:hover, body.woocommerce-account .woocommerce-MyAccount-content input.button:hover { color: #ffffff !important; background: #3275b9 !important; transform: translateY(-1px); } /* ========================================================= ORDINI ========================================================= */ body.woocommerce-account table.shop_table { width: 100%; margin: 20px 0 0; overflow: hidden; background: #ffffff; border: 1px solid #e4eaf1; border-radius: 12px; border-collapse: separate; border-spacing: 0; } body.woocommerce-account table.shop_table th { padding: 13px 14px; color: #143677; background: #edf5fd; border: 0; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; } body.woocommerce-account table.shop_table td { padding: 14px; color: #5f6674; border: 0; border-top: 1px solid #edf0f4; font-size: 12px; vertical-align: middle; } /* ========================================================= INDIRIZZI ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: auto !important; width: 100% !important; gap: 20px !important; align-items: stretch !important; margin: 28px 0 0 !important; padding: 0 !important; } /* ========================================================= PRIMA CARD INDIRIZZO ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address:first-child, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .u-column1, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-1 { grid-column: 1 !important; grid-row: 1 !important; } /* ========================================================= SECONDA CARD INDIRIZZO ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address:nth-child(2), body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .u-column2, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-2 { grid-column: 2 !important; grid-row: 1 !important; } /* ========================================================= CARD INDIRIZZO ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .u-column1, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .u-column2, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-1, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-2 { display: flex !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 250px; height: 100% !important; flex-direction: column; float: none !important; clear: none !important; margin: 0 !important; padding: 26px !important; background: #fafbfd; border: 1px solid rgba(20, 54, 119, .08); border-radius: 14px; box-shadow: 0 6px 20px rgba(20, 54, 119, .035); } /* ========================================================= HEADER CARD INDIRIZZO ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title.title { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= TITOLO INDIRIZZO ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important; margin: 0 0 10px !important; padding: 0 !important; color: #143677; font-family: "Nunito Sans", "Manrope", sans-serif; font-size: 29px !important; font-weight: 600; line-height: 1.05 !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: normal !important; hyphens: none !important; } /* ========================================================= LINK AGGIUNGI / MODIFICA ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit { display: inline-block !important; width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; color: #3275b9; font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 800; line-height: 1.4; text-align: left; text-decoration: none; white-space: normal; } /* ========================================================= TESTO INDIRIZZO ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address { display: block; width: 100%; margin: 28px 0 0 !important; padding: 0 !important; color: #626b79; font-size: 12px; font-style: normal; line-height: 1.7; } /* ========================================================= RESET FLOAT INDIRIZZI ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column1, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column2, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .col-1, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .col-2 { float: none !important; width: 100% !important; } /* ========================================================= DETTAGLIO ORDINE ========================================================= */ body.woocommerce-account .woocommerce-order-details, body.woocommerce-account .woocommerce-customer-details { margin-top: 30px; } body.woocommerce-account .woocommerce-order-details__title, body.woocommerce-account .woocommerce-column__title { margin-bottom: 15px; } /* ========================================================= NOTICE ========================================================= */ body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-error { margin: 0 0 22px; padding: 16px 18px; border: 0; border-radius: 9px; font-family: "Manrope", sans-serif; font-size: 11px; line-height: 1.6; } body.woocommerce-account .woocommerce-message { color: #28724c; background: #edf8f1; } body.woocommerce-account .woocommerce-info { color: #143677; background: #edf5fd; } body.woocommerce-account .woocommerce-error { color: #934746; background: #fbf1f0; } /* ========================================================= ASPIC FVG – LA MIA ASSOCIAZIONE Coerente con il PHP endpoint /associazione/ ========================================================= */ .aspic-account-membership, .aspic-account-membership * { box-sizing: border-box; } .aspic-account-membership { --aspic-blue: #143677; --aspic-accent: #3275b9; --aspic-light-blue: #edf5fd; --aspic-blush: #fbf1f0; --aspic-text: #5f6674; --aspic-border: rgba(20, 54, 119, .09); width: 100%; color: var(--aspic-text); font-family: "Manrope", sans-serif; } /* ========================================================= HEADER ========================================================= */ .aspic-account-membership__heading { margin-bottom: 24px; } .aspic-account-membership__heading > span { display: block; margin-bottom: 8px; color: var(--aspic-accent); font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; } body.woocommerce-account .woocommerce-MyAccount-content .aspic-account-membership__heading h2 { margin: 0 !important; color: var(--aspic-blue); font-family: "Nunito Sans", "Manrope", sans-serif; font-size: 45px !important; font-weight: 600; line-height: 1 !important; } .aspic-account-membership__heading p { max-width: 760px; margin: 14px 0 0 !important; color: var(--aspic-text); font-size: 12px !important; line-height: 1.7 !important; } /* ========================================================= AVVISI ========================================================= */ .aspic-account-membership__notice { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid transparent; border-radius: 11px; } .aspic-account-membership__notice strong { display: block; margin-bottom: 3px; font-size: 11px; } .aspic-account-membership__notice p { margin: 0 !important; color: inherit !important; font-size: 10px !important; line-height: 1.55 !important; } .aspic-account-membership__notice--success { color: #286b49; background: #eef8f2; border-color: #d5ebde; } .aspic-account-membership__notice--warning { color: #80631f; background: #fff7e3; border-color: #f2dfae; } .aspic-account-membership__notice--info { color: #285d91; background: #edf5fd; border-color: #d4e4f5; } .aspic-account-membership__notice--danger { color: #914c4a; background: #fbf1f0; border-color: #efd4d2; } .aspic-account-membership__notice-button { display: inline-flex; min-height: 40px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0 15px; color: #ffffff !important; background: var(--aspic-blue); border-radius: 7px; font-size: 9px; font-weight: 800; text-decoration: none !important; white-space: nowrap; } .aspic-account-membership__notice-button:hover { color: #ffffff !important; background: var(--aspic-accent); } /* ========================================================= GRID PRINCIPALE ========================================================= */ .aspic-account-membership__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .aspic-account-membership__card { min-width: 0; min-height: 190px; padding: 22px; background: #ffffff; border: 1px solid var(--aspic-border); border-radius: 13px; box-shadow: 0 5px 18px rgba(20, 54, 119, .035); } .aspic-account-membership__label { display: block; margin-bottom: 9px; color: var(--aspic-accent); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } .aspic-account-membership__value { display: block; color: var(--aspic-blue); font-size: 20px; font-weight: 800; line-height: 1.2; } .aspic-account-membership__card p { margin: 13px 0 0 !important; color: #6b7380 !important; font-size: 10px !important; line-height: 1.6 !important; } /* ========================================================= STATO ASSOCIAZIONE ========================================================= */ .aspic-account-membership__status { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 10px; border-radius: 30px; font-size: 10px; font-weight: 800; line-height: 1; } .aspic-account-membership__status.is-active { color: #28724c; background: #eaf7ef; } .aspic-account-membership__status.is-pending, .aspic-account-membership__status.is-verification { color: #85641c; background: #fff4d5; } .aspic-account-membership__status.is-rejected { color: #934746; background: #fbf1f0; } /* ========================================================= STATO PAGAMENTO ========================================================= */ .aspic-account-membership__payment { display: inline-flex; width: auto; align-items: center; min-height: 28px; padding: 6px 10px; border-radius: 30px; font-size: 10px; font-weight: 800; } .aspic-account-membership__payment--paid { color: #28724c; background: #eaf7ef; } .aspic-account-membership__payment--pending { color: #85641c; background: #fff4d5; } .aspic-account-membership__payment--failed, .aspic-account-membership__payment--cancelled, .aspic-account-membership__payment--refunded { color: #934746; background: #fbf1f0; } .aspic-account-membership__payment--none { color: #687385; background: #eff2f5; } /* ========================================================= VERIFICA TESSERA ========================================================= */ .aspic-account-membership__verified { color: #28724c !important; font-weight: 700; } .aspic-account-membership__not-verified { color: #85641c !important; font-weight: 700; } /* ========================================================= POSIZIONE ASSOCIATIVA ========================================================= */ .aspic-account-membership__position { margin-top: 16px; padding: 26px; background: #ffffff; border: 1px solid var(--aspic-border); border-radius: 13px; } .aspic-account-membership__position-heading > span { display: block; margin-bottom: 5px; color: var(--aspic-accent); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } body.woocommerce-account .woocommerce-MyAccount-content .aspic-account-membership__position-heading h3 { margin: 0 0 18px !important; color: var(--aspic-blue); font-family: "Nunito Sans", "Manrope", sans-serif; font-size: 29px !important; font-weight: 600; } .aspic-account-membership__position-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .aspic-account-membership__position-grid > div { min-width: 0; padding: 13px; background: #f8fafc; border-radius: 8px; } .aspic-account-membership__position-grid span { display: block; margin-bottom: 4px; color: #8a93a1; font-size: 8px; } .aspic-account-membership__position-grid strong { display: block; color: var(--aspic-blue); font-size: 10px; overflow-wrap: anywhere; } /* ========================================================= PANNELLO ID TESSERA ========================================================= */ .aspic-account-membership__member-id { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 30px; align-items: center; margin-top: 16px; padding: 27px; background: linear-gradient( 135deg, #fbf1f0 0%, #ffffff 100% ); border: 1px solid rgba(201, 135, 132, .15); border-radius: 14px; } .aspic-account-membership__member-id-content > span { display: block; margin-bottom: 6px; color: #c98784; font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } body.woocommerce-account .woocommerce-MyAccount-content .aspic-account-membership__member-id-content h3 { margin: 0 !important; color: var(--aspic-blue); font-family: "Nunito Sans", "Manrope", sans-serif; font-size: 30px !important; font-weight: 600; } .aspic-account-membership__member-id-content p { max-width: 540px; margin: 10px 0 0 !important; color: #626b79 !important; font-size: 10px !important; line-height: 1.65 !important; } .aspic-account-membership__member-id-form { display: flex; flex-direction: column; gap: 8px; } .aspic-account-membership__member-id-field { width: 100%; } .aspic-account-membership__member-id-field label { margin-bottom: 6px !important; } .aspic-account-membership__member-id-field input[type="text"] { width: 100%; } .aspic-account-membership__button { display: inline-flex; width: auto; min-height: 43px; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; padding: 0 16px; color: #ffffff !important; background: var(--aspic-blue) !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; font-family: "Manrope", sans-serif; font-size: 9px !important; font-weight: 800; cursor: pointer; } .aspic-account-membership__button svg { width: 17px; height: 17px; flex: 0 0 17px; } .aspic-account-membership__button:hover { color: #ffffff !important; background: var(--aspic-accent) !important; } /* ========================================================= RINNOVO ========================================================= */ .aspic-account-membership__renewal { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 16px; padding: 28px; background: linear-gradient( 135deg, #edf5fd 0%, #ffffff 65%, #fbf1f0 100% ); border: 1px solid var(--aspic-border); border-radius: 14px; } .aspic-account-membership__renewal > div > span { display: block; margin-bottom: 6px; color: var(--aspic-accent); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } body.woocommerce-account .woocommerce-MyAccount-content .aspic-account-membership__renewal h3 { margin: 0 !important; color: var(--aspic-blue); font-family: "Nunito Sans", "Manrope", sans-serif; font-size: 31px !important; font-weight: 600; line-height: 1 !important; } .aspic-account-membership__renewal h3 em { color: #c98784; font-weight: 500; } .aspic-account-membership__renewal p { max-width: 580px; margin: 10px 0 0 !important; font-size: 10px !important; line-height: 1.65 !important; } .aspic-account-membership__renewal form { margin: 0; } .aspic-account-membership__renewal-button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; padding: 0 16px; color: #ffffff !important; background: var(--aspic-blue) !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; font-family: "Manrope", sans-serif; font-size: 9px !important; font-weight: 800; line-height: 1; text-decoration: none !important; white-space: nowrap; cursor: pointer; } .aspic-account-membership__renewal-button:hover { color: #ffffff !important; background: var(--aspic-accent) !important; } /* ========================================================= ULTIMO ORDINE ========================================================= */ .aspic-account-membership__order { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 16px; padding: 22px 24px; background: #f8fafc; border: 1px solid var(--aspic-border); border-radius: 12px; } body.woocommerce-account .woocommerce-MyAccount-content .aspic-account-membership__order h3 { margin: 2px 0 4px !important; color: var(--aspic-blue); font-size: 24px !important; } .aspic-account-membership__order p { margin: 0 !important; font-size: 10px !important; } .aspic-account-membership__order-link { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; padding: 0 14px; color: var(--aspic-blue) !important; background: #ffffff; border: 1px solid rgba(20, 54, 119, .12); border-radius: 7px; font-size: 9px; font-weight: 800; text-decoration: none !important; white-space: nowrap; } .aspic-account-membership__order-link:hover { color: #ffffff !important; background: var(--aspic-blue); border-color: var(--aspic-blue); } /* ========================================================= SUPPORTO ========================================================= */ .aspic-account-membership__support { display: flex; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 16px 4px 0; border-top: 1px solid var(--aspic-border); } .aspic-account-membership__support p { margin: 0 !important; color: #7b8490 !important; font-size: 9px !important; } .aspic-account-membership__support a { color: var(--aspic-accent) !important; font-size: 9px; font-weight: 800; text-decoration: none !important; } /* ========================================================= TABLET ASSOCIAZIONE ========================================================= */ @media (max-width: 1050px) { .aspic-account-membership__position-grid { grid-template-columns: 1fr 1fr; } .aspic-account-membership__member-id { grid-template-columns: 1fr; } } /* ========================================================= MOBILE ASSOCIAZIONE ========================================================= */ @media (max-width: 767px) { .aspic-account-membership__heading { margin-bottom: 20px; } body.woocommerce-account .woocommerce-MyAccount-content .aspic-account-membership__heading h2 { font-size: 37px !important; } .aspic-account-membership__heading p { font-size: 11px !important; } .aspic-account-membership__notice { flex-direction: column; align-items: flex-start; } .aspic-account-membership__notice-button { width: 100%; } .aspic-account-membership__grid { grid-template-columns: 1fr; gap: 12px; } .aspic-account-membership__card { min-height: 0; padding: 19px; } .aspic-account-membership__position { padding: 20px 17px; } .aspic-account-membership__position-grid { grid-template-columns: 1fr; } .aspic-account-membership__member-id { gap: 18px; padding: 21px 17px; } body.woocommerce-account .woocommerce-MyAccount-content .aspic-account-membership__member-id-content h3 { font-size: 28px !important; } .aspic-account-membership__button { width: 100%; align-self: stretch; } .aspic-account-membership__renewal { flex-direction: column; align-items: flex-start; padding: 22px 18px; } .aspic-account-membership__renewal form, .aspic-account-membership__renewal-button { width: 100%; } .aspic-account-membership__order { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 18px; } .aspic-account-membership__order-link { width: 100%; } .aspic-account-membership__support { flex-direction: column; gap: 7px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { body.woocommerce-account .woocommerce { width: calc(100% - 40px); gap: 28px; } body.woocommerce-account .woocommerce-MyAccount-navigation { width: 220px !important; min-width: 220px; max-width: 220px; flex: 0 0 220px; } body.woocommerce-account .woocommerce-MyAccount-content { padding: 32px 28px !important; } } @media (max-width: 900px) { body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr !important; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address:first-child, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .u-column1, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-1 { grid-column: 1 !important; grid-row: 1 !important; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address:nth-child(2), body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .u-column2, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-2 { grid-column: 1 !important; grid-row: 2 !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* ===================================================== WRAPPER ====================================================== */ body.woocommerce-account .woocommerce { display: flex !important; width: calc(100% - 24px) !important; max-width: none !important; flex-direction: column; margin: 28px auto 45px !important; gap: 18px; } /* ===================================================== NAV MOBILE ====================================================== */ body.woocommerce-account .woocommerce-MyAccount-navigation { position: static !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 0 0 auto !important; overflow: visible !important; background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* ===================================================== MENU MOBILE A GRIGLIA ====================================================== */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100% !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: flex; width: 100% !important; min-width: 0 !important; min-height: 52px; align-items: center; justify-content: flex-start; padding: 0 15px; color: #4f5969; background: #ffffff; border: 1px solid rgba(20, 54, 119, .08); border-radius: 10px; box-shadow: 0 4px 14px rgba(20, 54, 119, .035); font-size: 12px; font-weight: 700; white-space: normal; text-align: left; transform: none !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { color: #143677; background: #f6faff; transform: none !important; } /* ===================================================== ATTIVO MOBILE ====================================================== */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #143677; background: #edf5fd; border-color: rgba(50, 117, 185, .18); box-shadow: inset 4px 0 0 #3275b9; } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before { display: none !important; } /* ===================================================== LOGOUT MOBILE ====================================================== */ body.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout { grid-column: 1 / -1; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a { color: #9b6563; background: #fbf1f0; } /* ===================================================== CONTENT MOBILE ====================================================== */ body.woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; margin: 0 !important; padding: 24px 18px !important; background: #ffffff; border: 1px solid rgba(20, 54, 119, .07); border-radius: 14px; box-shadow: 0 8px 24px rgba(20, 54, 119, .04); } body.woocommerce-account .woocommerce-MyAccount-content p { font-size: 13px; line-height: 1.7; } body.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 32px; } body.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 26px; } /* ===================================================== FORM MOBILE ====================================================== */ body.woocommerce-account .woocommerce-MyAccount-content input.input-text, body.woocommerce-account .woocommerce-MyAccount-content input[type="text"], body.woocommerce-account .woocommerce-MyAccount-content input[type="email"], body.woocommerce-account .woocommerce-MyAccount-content input[type="password"], body.woocommerce-account .woocommerce-MyAccount-content input[type="tel"], body.woocommerce-account .woocommerce-MyAccount-content select, body.woocommerce-account .woocommerce-MyAccount-content textarea { min-height: 46px; } /* ===================================================== PASSWORD MOBILE ====================================================== */ body.woocommerce-account .woocommerce-MyAccount-content fieldset { margin-top: 30px !important; padding: 26px 18px 20px !important; border-radius: 12px; } body.woocommerce-account .woocommerce-MyAccount-content fieldset legend { font-size: 24px; padding: 0 7px !important; } /* ===================================================== INDIRIZZI MOBILE ====================================================== */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr !important; gap: 14px !important; margin-top: 22px !important; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .u-column1, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .u-column2, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-1, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .col-2 { width: 100% !important; max-width: 100% !important; min-height: 0; padding: 22px 18px !important; border-radius: 12px; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 { font-size: 27px !important; line-height: 1.08 !important; } /* ===================================================== TABELLE MOBILE ====================================================== */ body.woocommerce-account table.shop_table { display: block; width: 100%; max-width: 100%; overflow-x: auto; } } /* ========================================================= MOBILE PICCOLO ========================================================= */ @media (max-width: 420px) { body.woocommerce-account .woocommerce { width: calc(100% - 16px) !important; } body.woocommerce-account .woocommerce-MyAccount-content { padding: 21px 16px !important; } /* MENU UNA COLONNA */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a { min-height: 48px; padding: 0 13px; font-size: 11px; } } /* ========================================================= ASPIC FVG – MY ACCOUNT V2 / NUOVA IDENTITÀ FRONTEND ========================================================= */ body.woocommerce-account{ --aspic-blue:#143677; --aspic-orange:#F2A34A; --aspic-orange-soft:#FFF1DF; --aspic-green:#78A980; --aspic-green-soft:#EDF6EE; --aspic-bordeaux:#B45F78; --aspic-bordeaux-soft:#F8E8ED; --aspic-text:#4F5968; background:#FFF9F4; } body.woocommerce-account .woocommerce-MyAccount-navigation{border-radius:20px;box-shadow:0 10px 30px rgba(20,54,119,.05)} body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{color:var(--aspic-blue);background:var(--aspic-green-soft)} body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{color:var(--aspic-blue);background:var(--aspic-bordeaux-soft)} body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before{background:var(--aspic-bordeaux)} body.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a{color:#8E4357} body.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover{background:var(--aspic-bordeaux-soft)} body.woocommerce-account .woocommerce-MyAccount-content{border-radius:22px} .aspic-account-membership{--aspic-blue:#143677;--aspic-orange:#F2A34A;--aspic-orange-soft:#FFF1DF;--aspic-green:#78A980;--aspic-green-soft:#EDF6EE;--aspic-bordeaux:#B45F78;--aspic-bordeaux-soft:#F8E8ED;--aspic-text:#4F5968} .aspic-account-membership__hero, .aspic-account-membership__header{background:linear-gradient(135deg,var(--aspic-green-soft) 0%,#fff 55%,var(--aspic-orange-soft) 100%);border-radius:22px} .aspic-account-membership__eyebrow{color:var(--aspic-bordeaux);background:var(--aspic-bordeaux-soft)} .aspic-account-membership a.button, .aspic-account-membership button.button, body.woocommerce-account .woocommerce-MyAccount-content .button{background:var(--aspic-bordeaux)!important;border-color:var(--aspic-bordeaux)!important;color:#fff!important} .aspic-account-membership a.button:hover, .aspic-account-membership button.button:hover, body.woocommerce-account .woocommerce-MyAccount-content .button:hover{background:var(--aspic-blue)!important;border-color:var(--aspic-blue)!important;color:#fff!important} body.woocommerce-account mark{background:var(--aspic-orange-soft);color:var(--aspic-blue)} body.woocommerce-account .woocommerce-message{border-top-color:var(--aspic-green)} body.woocommerce-account .woocommerce-info{border-top-color:var(--aspic-bordeaux)} @media(max-width:767px){body.woocommerce-account{background:#fff}body.woocommerce-account .woocommerce{width:calc(100% - 28px)!important;margin:35px auto 55px!important}} /* ========================================================= ASPIC Soci 1.2.5 — Link Carrello nell'area riservata ========================================================= */ .woocommerce-MyAccount-navigation-link--aspic-cart-link a { position: relative; } .woocommerce-MyAccount-navigation-link--aspic-cart-link a::before { content: "↗"; display: inline-block; margin-right: 8px; opacity: .55; font-size: .9em; }