:root { --accent: #ff6400; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(36, 40, 51, 1), -10px 10px rgba(36, 40, 51, 0.2), -10px -10px rgba(36, 40, 51, 1), 10px -10px rgba(36, 40, 51, 0.2); } 25% { box-shadow: -10px 10px rgba(36, 40, 51, 0.2), -10px -10px rgba(36, 40, 51, 1), 10px -10px rgba(36, 40, 51, 0.2), 10px 10px rgba(36, 40, 51, 1); } 50% { box-shadow: -10px -10px rgba(36, 40, 51, 1), 10px -10px rgba(36, 40, 51, 0.2), 10px 10px rgba(36, 40, 51, 1), -10px 10px rgba(36, 40, 51, 0.2); } 75% { box-shadow: 10px -10px rgba(36, 40, 51, 0.2), 10px 10px rgba(36, 40, 51, 1), -10px 10px rgba(36, 40, 51, 0.2), -10px -10px rgba(36, 40, 51, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #f1f5f9 }:root { --e-global-typography-primary-font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Helvetica; --e-global-typography-secondary-font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Helvetica; --e-global-typography-text-font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Helvetica; --e-global-typography-accent-font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Helvetica; } @media only screen and (min-width : 1201px) { ul.main-nav li a>i { display: inline-block; padding-right: 5px; } } @-webkit-keyframes newGradientFlow { 0% { background-position: 0% 50%; } 25% { background-position: 50% 50%; } 50% { background-position: 100% 50%; } 75% { background-position: 50% 50%; } 100% { background-position: 0% 50%; } } @keyframes newGradientFlow { 0% { background-position: 0% 50%; } 25% { background-position: 50% 50%; } 50% { background-position: 100% 50%; } 75% { background-position: 50% 50%; } 100% { background-position: 0% 50%; } } .c27-main-header .header-skin { position: relative; overflow: hidden; z-index: 0; } .c27-main-header .header-skin::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(135deg, #004A73 0%, #0091B8 55%, #D94D3F 100%); background-size: 300% 300%; background-position: 0% 50%; background-repeat: no-repeat; -webkit-animation: newGradientFlow 7s linear infinite; animation: newGradientFlow 7s linear infinite; will-change: background-position, transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); } .buttons, .qbutton, .wpcf7-form-control.wpcf7-submit.has-spinner, .cky-btn.cky-btn-accept, #place_order, .button { background-image: linear-gradient(to right, #FF512F 0%, #F09819 51%, #FF512F 100%) } .buttons, .qbutton, .wpcf7-form-control.wpcf7-submit.has-spinner, .cky-btn.cky-btn-accept, #place_order, .button { transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; display: block; border: none; border-radius: 5px; } .buttons:hover { background-position: right center; color: #fff; text-decoration: none !important; } .button-1.buttons:hover, .buttons.button-1:hover, .qbutton:hover, .wpcf7-form-control.wpcf7-submit.has-spinner:hover, .cky-btn.cky-btn-accept:hover, #place_order:hover, .button:hover { background: linear-gradient(to right, #FF512F 0%, #F09819 51%, #FF512F 100%); background-size: 200% auto; background-position: right center; color: #fff; text-decoration: none; transition: 0.5s; box-shadow: 0 0 20px #eee; } .buttons.button-1:visited { color: white; } .cts-account-actions { background: none; } .footer { background-image: linear-gradient(135deg, #004A73 0%, #0091B8 55%, #D94D3F 100%) !important; } .icon-title { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; transition: all 0.3s ease; cursor: default; } .icon-title .mi { font-size: 32px; color: inherit; transition: all 0.3s ease; } .icon-title img { height: 32px; width: auto; transition: all 0.3s ease; filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } /* Эффект наведения */ .icon-title:hover { color: #ffffff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.7); } .icon-title:hover .mi { text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); transform: scale(1.1); } .icon-title:hover img { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); } .logo a img { transition: all 0.4s ease; filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } .logo a:hover img { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)); } .copyright p { color: #fff; } .footer p { color: #fff; } .footer a { color: #fff; text-decoration: none; transition: all 0.3s ease; display: inline-block; } .footer a:hover { color: #ffffff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); transform: scale(1.05); } .user-area .mi { color: #fff; font-size: 24px; transition: all 0.3s ease; display: inline-block; } .user-area a:hover .mi { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); } footer.footer > div.container > div.row { position: relative; background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 15px; } .col-lg-4.col-sm-4.col-xs-12.c_widget.woocommerce { padding-top: 10px; padding-left: 30px; } .lf-head-btn { background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); border-radius: 10px; border: 2px solid rgba(0, 0, 0, 0.1); margin-bottom: 15px; color: #fff; text-shadow: black; text-shadow: 1px 1px 2px #444; } .cf7-cf-turnstile { margin-bottom: 0px !important; } @media screen and (max-width: 1200px) { .hide-on-mobile { display: none !important; } } @media (min-width: 1200px) { .hide-on-desktop { display: none !important; } } .trp-shortcode-switcher__wrapper { z-index: 99 !important; } .woocommerce-form-coupon-toggle .woocommerce-info { background: #ffddae; } .pms-account-subscription-details-table tr > td:first-of-type { padding-top: 5px; padding-right: 10px; padding-bottom: 5px; } .md-checkbox label::before { border-radius: 6px; } /*Contact Form 7 CSS Support*/ /* Styles configuration */ /* ** Contact Form 7 basics ** **/ /* Form width and border */ .wpcf7 { text-align: left; width: 90%; padding: 20px 25px !important; background-color: rgba(255, 255, 255, 0.2); background-position: center; background-size: cover; } /* Input Field widths */ .wpcf7-text, .wpcf7-textarea { width: 100%; border: 1px solid #e4e4e4; border-radius: 4px; color: #777; } .wpcf7-text { height: 50px; padding-left: 10px; } /* Input Field borders */ /* Input Field Text color */ .wpcf7-text:focus, .wpcf7-textarea:focus { border-color: #8f8f8f; } /* Label Font */ .wpcf7-form p { font-size: 16px; font-family: "Roboto", sans-serif; color: #000; } /* Submit button Font */ .wpcf7-submit { width: 85%; font-size: 15px !important; background-color: #1d2731 !important; border: 2px solid #fff !important; color: #fff !important; font-weight: bold !important; padding: 20px; } /* Submit button Hover */ .wpcf7-submit:hover { border-color: transparent !important; background-color: rgba(0, 0, 0, 0.2) !important; color: #000 !important; } /* Response messages - Error & Success */ .wpcf7-response-output { margin-bottom: 30px !important; } #add_payment_method #payment ul.payment_methods li img, .woocommerce-cart #payment ul.payment_methods li img, .woocommerce-checkout #payment ul.payment_methods li img { height: 32px; } .footer a { font-weight: bold; } .footer p { font-weight: bold; } .icon-title { font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Helvetica !important; } /* ============================ Fleet-Trade — Form styling Targets: .mailpoet-manage-subscription Mobile-first, responsive ============================ */ :root{ --ft-primary: #0693e3; /* vivid cyan-blue (site accent) */ --ft-accent: #9b51e0; /* optional secondary */ --ft-bg: #ffffff; --ft-muted: #6b7280; --ft-border: #e6e9ee; --ft-radius: 12px; --ft-shadow: 0 6px 18px rgba(18, 24, 40, 0.06); --ft-input-height: 48px; --ft-font: "GlacialIndifference", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } /* Base container */ .mailpoet-manage-subscription{ font-family: var(--ft-font); background: var(--ft-bg); border-radius: var(--ft-radius); box-shadow: var(--ft-shadow); padding: 18px; max-width: 840px; margin: 0 auto; color: #0b1220; box-sizing: border-box; } /* Paragraph blocks (each form row) */ .mailpoet-manage-subscription .mailpoet_paragraph{ margin-bottom: 14px; display: block; } /* Labels */ .mailpoet-manage-subscription label, .mailpoet-manage-subscription .mailpoet_text_label, .mailpoet-manage-subscription .mailpoet_select_label, .mailpoet-manage-subscription .mailpoet_segment_label{ display:block; font-weight:600; color: #111827; margin-bottom: 6px; font-size: 14px; } /* Small helper text */ .mailpoet-change-email-info, .mailpoet-manage-subscription .mailpoet_error, .mailpoet-manage-subscription span.mailpoet_error_jcfks, .mailpoet-manage-subscription .mailpoet_error_1tmo0, .mailpoet-manage-subscription .mailpoet_error_5gjzu{ font-size: 13px; color: var(--ft-muted); } /* Inputs & selects */ .mailpoet-manage-subscription input[type="text"], .mailpoet-manage-subscription input[type="email"], .mailpoet-manage-subscription input[type="tel"], .mailpoet-manage-subscription textarea, .mailpoet-manage-subscription select, .mailpoet-manage-subscription .mailpoet_text, .mailpoet-manage-subscription .mailpoet_select{ width: 100%; height: var(--ft-input-height); line-height: 1; padding: 0 14px; border-radius: 10px; border: 1px solid var(--ft-border); background: #fbfdff; box-sizing: border-box; outline: none; transition: box-shadow .18s ease, border-color .12s ease, transform .06s; font-size: 15px; color: #0b1220; } /* textarea tweak */ .mailpoet-manage-subscription textarea{ min-height: 120px; padding: 12px 14px; resize: vertical; } /* focus */ .mailpoet-manage-subscription input:focus, .mailpoet-manage-subscription textarea:focus, .mailpoet-manage-subscription select:focus{ border-color: color-mix(in srgb, var(--ft-primary) 60%, var(--ft-border)); box-shadow: 0 6px 18px rgba(6,147,227,0.08); } /* Disabled / readonly look */ .mailpoet-manage-subscription input[disabled], .mailpoet-manage-subscription input[readonly]{ background: #f6f7f9; color: #4b5563; cursor: not-allowed; } /* Checkboxes — modern inline style */ .mailpoet_checkbox_label{ display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: background .12s ease, border-color .12s ease; user-select: none; font-weight:500; } .mailpoet_checkbox_label input[type="checkbox"].mailpoet_checkbox{ appearance: none; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--ft-border); display: inline-grid; place-content: center; transition: background .12s ease, border-color .12s ease; background: white; } .mailpoet_checkbox_label input[type="checkbox"].mailpoet_checkbox:checked{ background: linear-gradient(135deg,var(--ft-primary), var(--ft-accent)); border-color: transparent; box-shadow: 0 2px 6px rgba(6,147,227,0.18) inset; } /* Show tick as pseudo-element */ .mailpoet_checkbox_label input[type="checkbox"].mailpoet_checkbox:checked::after{ content: "✔"; color: white; font-size: 12px; line-height: 1; } /* Checkbox label hover */ .mailpoet_checkbox_label:hover{ background: #fbfdff; border-color: var(--ft-border); } /* Fieldset (lists) */ .mailpoet-manage-subscription fieldset{ border: none; padding: 8px 0 0 0; margin: 0; } /* Submit button */ .mailpoet-manage-subscription .mailpoet_submit{ display: inline-block; min-width: 120px; height: 48px; padding: 0 22px; line-height: 46px; border-radius: 999px; font-weight:700; font-size: 15px; cursor: pointer; border: none; color: #fff; background: linear-gradient(90deg, var(--ft-primary), var(--ft-accent)); box-shadow: 0 8px 24px rgba(6,147,227,0.15); transition: transform .08s ease, box-shadow .12s ease, opacity .12s; } /* Submit hover / active */ .mailpoet-manage-subscription .mailpoet_submit:hover{ transform: translateY(-2px); box-shadow: 0 12px 32px rgba(6,147,227,0.18); } .mailpoet-manage-subscription .mailpoet_submit:active{ transform: translateY(0); } /* Loading dots (adapted to MailPoet markup) */ .mailpoet_form_loading{ display:inline-block; vertical-align: middle; margin-left: 10px; width: 36px; height: 18px; position: relative; } .mailpoet_form_loading span{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ft-primary); opacity: 0; position: absolute; left: 0; top: 5px; animation: mailpoet-bounce 1s infinite; } .mailpoet_form_loading span:nth-child(2){ left: 12px; animation-delay: .12s; } .mailpoet_form_loading span:nth-child(3){ left: 24px; animation-delay: .24s; } @keyframes mailpoet-bounce{ 0%{ transform: translateY(0); opacity: .15; } 50%{ transform: translateY(-6px); opacity: 1; } 100%{ transform: translateY(0); opacity: .15; } } /* Error states */ .mailpoet-manage-subscription .mailpoet_error_1tmo0, .mailpoet-manage-subscription .mailpoet_error_5gjzu, .mailpoet-manage-subscription .mailpoet_error_fbqsy, .mailpoet-manage-subscription .mailpoet_error_jcfks{ display:block; color: #e03a3a; margin-top: 6px; font-weight:600; font-size: 13px; } /* Responsive layout: from 768px — two-column grid */ @media (min-width: 768px){ .mailpoet-manage-subscription{ padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } /* Make certain children span full width (fieldset, email display, submit row) */ .mailpoet-manage-subscription fieldset, .mailpoet-manage-subscription p.mailpoet_paragraph:first-of-type, .mailpoet-manage-subscription .mailpoet_paragraph:last-child{ grid-column: 1 / -1; } /* For long selects (flag etc) make them full width on wide screens */ .mailpoet-manage-subscription select{ height: var(--ft-input-height); } } /* Larger screens: increase radius and spacing */ @media (min-width: 1200px){ .mailpoet-manage-subscription{ padding: 30px; border-radius: 16px; } .mailpoet-manage-subscription .mailpoet_paragraph{ margin-bottom: 18px; } } /* Accessibility: focus outline for keyboard users */ .mailpoet-manage-subscription input:focus-visible, .mailpoet-manage-subscription select:focus-visible, .mailpoet-manage-subscription textarea:focus-visible, .mailpoet-manage-subscription .mailpoet_submit:focus-visible{ outline: 3px solid color-mix(in srgb, var(--ft-primary) 20%, transparent); outline-offset: 3px; } /* Small niceties: reduce large select arrow visual on mobile */ .mailpoet-manage-subscription select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.2) 50%), linear-gradient(135deg, rgba(0,0,0,0.2) 50%, transparent 50%); background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 10px) calc(1em + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 36px; } /* If you need two-column pairing manually, add .two-col to parent .mailpoet_paragraph elements Example in HTML: <div class="mailpoet_paragraph two-col">...</div> */ .mailpoet-manage-subscription .two-col{ display:flex; gap:10px; } .mailpoet-manage-subscription .two-col > *{ flex:1; min-width:0; }