.pp_Dawn_input {padding: .8rem 1.5rem !important;border: solid 1px;} .pp_a_style1 {color: inherit;text-decoration: none;} .pp_Craft_input {padding: .8rem 1.5rem !important;border: solid 1px;} .pp_Ride_input {padding: .8rem 1.5rem !important;border: solid 1px;} .pp_Venture_input {border: 1px solid #E6E6E6;} .pp-t-m-t-10{margin-top:10px;} .pp-Empire { padding: .6rem;}/* ============================================ 1) ОБЩАЯ СТИЛИСТИКА «КАРТОЧКИ» ============================================ */ /* Фон всей страницы (чтобы карточка «плавала» на светло-сером фоне) */ body { background-color: #f5f5f5; margin: 0; padding: 0; font-family: 'Outfit', sans-serif; /* ваш красивый шрифт */ } /* Обёртка «карточки» с трекингом */ .custom-tracking-wrapper { max-width: 70%; /* ограничиваем ширину карточки */ margin: 40px auto; /* отступ сверху и центрирование по горизонтали */ padding: 30px 25px; /* внутренние отступы */ background-color: #ffffff; /* белый фон */ border-radius: 8px; /* скруглённые углы */ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* лёгкая тень */ box-sizing: border-box; } /* Ваш «верхний» заголовок */ .custom-tracking-wrapper .tracking-header h1 { font-size: 32px; /* размер шрифта */ font-weight: 700; /* жирность */ color: #222222; /* цвет заголовка */ margin: 0 0 12px; /* отступ снизу перед подзаголовком */ text-align: center; } /* Ваш подзаголовок («Enter your tracking…») */ .custom-tracking-wrapper .tracking-header .tracking-subtitle { font-size: 16px; color: #666666; margin: 0 0 25px; line-height: 1.4; text-align: center; } /* ============================================ 2) СКРЫВАЕМ ДУБЛИРУЮЩИЙСЯ ЗАГОЛОВОК ParcelPanel ============================================ */ /* В вашем HTML это

Track Your Order

*/ .custom-tracking-wrapper #pp-tracking-page-app .pp_tracking_title { display: none !important; margin: 0; padding: 0; } /* ============================================ 3) ОТСТУП МЕЖДУ «ВЕРХНИМ» ЗАГОЛОВКОМ И ЛЕЙБЛОМ «Tracking Number» ============================================ */ /* Лейбл у вас — это

Tracking Number

*/ .custom-tracking-wrapper #pp-tracking-page-app .pp_tracking_span { margin-top: 20px; /* отступ сверху (между «Track Your Order» и «Tracking Number») */ text-align: left; /* выравниваем лейбл слева внутри карточки */ font-size: 16px; font-weight: 500; color: #555555; /* цвет текста «Tracking Number» */ font-family: 'Outfit', sans-serif; } /* Чтобы сам точно не сдвигался, рекомендуем reset-стиль: */ .custom-tracking-wrapper #pp-tracking-page-app .pp_tracking_span span { display: inline-block; } /* ============================================ 4) СТИЛИ ДЛЯ ПОЛЯ ВВОДА ============================================ */ /* Инпут у вас имеет класс .PP-TextField__Input */ .custom-tracking-wrapper #pp-tracking-page-app .PP-TextField__Input { width: 100%; max-width: 320px; /* не слишком широкое поле */ padding: 10px 12px; /* внутренние отступы */ font-size: 16px; border: 1px solid #ccc; /* светло-серая рамка */ border-radius: 4px; box-sizing: border-box; margin: 0 auto; /* центрируем по горизонтали */ transition: border-color 0.2s; } /* Рамка при фокусе */ .custom-tracking-wrapper #pp-tracking-page-app .PP-TextField__Input:focus { border-color: #008000; /* меняем на зелёный (или любой другой под ваш сайт) */ outline: none; } /* ============================================ 5) СТИЛИ ДЛЯ КНОПКИ «Track» ============================================ */ /* Кнопка — */ .custom-tracking-wrapper #pp-tracking-page-app .pp-button-enter, .custom-tracking-wrapper #pp-tracking-page-app .button-enter, .custom-tracking-wrapper #pp-tracking-page-app .btn, .custom-tracking-wrapper #pp-tracking-page-app .styled-submit { display: inline-block; /* чтобы можно было задавать padding */ background-color: #e8472e; /* основной цвет кнопки = зелёный */ color: #ffffff; /* цвет текста */ font-size: 16px; font-weight: 600; padding: 12px 24px; /* размер кнопки */ margin-top: 20px; /* отступ сверху */ border: none; cursor: pointer; transition: background-color 0.2s; } /* Если хотите кнопку именно ширины поля ввода, раскомментируйте этот блок: */ /* .custom-tracking-wrapper #pp-tracking-page-app .pp-button-enter, .custom-tracking-wrapper #pp-tracking-page-app .button-enter, .custom-tracking-wrapper #pp-tracking-page-app .btn, .custom-tracking-wrapper #pp-tracking-page-app .styled-submit { width: 100%; max-width: 320px; margin: 20px auto 0; text-align: center; } */ /* Наведение на кнопку */ .custom-tracking-wrapper #pp-tracking-page-app .pp-button-enter:hover, .custom-tracking-wrapper #pp-tracking-page-app .button-enter:hover, .custom-tracking-wrapper #pp-tracking-page-app .btn:hover, .custom-tracking-wrapper #pp-tracking-page-app .styled-submit:hover { background-color: #000000; /* чуть темнее зелёный на ховере */ } /* ============================================ 6) СООБЩЕНИЯ ОБ ОШИБКАХ / СТАТУСАХ ============================================ */ /* ParcelPanel выводит ошибки внутрь

или

*/ .custom-tracking-wrapper #pp-tracking-page-app .parcel-error, .custom-tracking-wrapper #pp-tracking-page-app .pp-error-message, .custom-tracking-wrapper #pp-tracking-page-app .pp-status-message { font-size: 14px; color: #ff0000; /* красный цвет для ошибок */ margin-top: 12px; } /* ============================================ 7) ФУТЕР «Need help? Contact us» ============================================ */ .custom-tracking-wrapper .tracking-footer { margin-top: 30px; text-align: center; font-size: 14px; color: #555555; font-family: 'Outfit', sans-serif; } .custom-tracking-wrapper .tracking-footer a { color: #e8472e; /* зелёный цвет ссылки */ text-decoration: none; } .custom-tracking-wrapper .tracking-footer a:hover { text-decoration: underline; } /* ============================================ 8) АДАПТИВ ДЛЯ МОБИЛЬНЫХ ЭКРАНОВ ============================================ */ @media (max-width: 600px) { .custom-tracking-wrapper { max-width: 100%; margin: 20px 10px; padding: 20px 15px; } .custom-tracking-wrapper .tracking-header h1 { font-size: 28px; margin-bottom: 8px; } .custom-tracking-wrapper .tracking-header .tracking-subtitle { font-size: 14px; margin-bottom: 20px; } .custom-tracking-wrapper #pp-tracking-page-app .pp_tracking_span { margin-top: 16px; font-size: 14px; } .custom-tracking-wrapper #pp-tracking-page-app .PP-TextField__Input { max-width: 100%; font-size: 14px; } .custom-tracking-wrapper #pp-tracking-page-app .pp-button-enter, .custom-tracking-wrapper #pp-tracking-page-app .button-enter, .custom-tracking-wrapper #pp-tracking-page-app .btn, .custom-tracking-wrapper #pp-tracking-page-app .styled-submit { font-size: 14px; padding: 10px 20px; max-width: 100%; } .custom-tracking-wrapper .tracking-footer { font-size: 13px; } }

Track Your Order

Sign up and GET 10% OFF

Enjoy your DISCOUNT!