css/adaptive.css - master - RusToya/Crimea_plus

css/adaptive.css
1 267 строк23 KB
Руслан Уфимцев
Commin1
24 июн 2026, 19:23
24 июн 2026, 19:23ce059c2
@media (max-width: 1024px) {

    .section-welcome {
        padding-top: 120px;
    }

    .section-welcome .container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .welcome__text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .welcome__title {
        font-size: var(--text-3xl);
        letter-spacing: 2px;
    }

    .welcome__image {
        width: 400px;
    }

    .welcome__image-wrapper {
        transform: translate(0, 0);
        opacity: 1;
    }


    .pluses__wrapper {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .pluses__item {
        width: 45%;
        height: 320px;
    }

    .plus__title-text {
        font-size: var(--text-xl);
    }


    .counter__wrapper {
        flex-direction: column;
        align-items: center;
    }

    .counter__image {
        width: 60%;
        transform: translate(0, 0);
        opacity: 1;
    }

    .counter__items-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }

    .counter__item {
        width: 45%;
    }

    .coutner-item__num {
        font-size: var(--text-3xl);
    }


    .section-links__wrapper {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .section-links__button {
        width: 80%;
    }

    .section-links__image {
        order: -1;
    }

    .links-image__image {
        max-width: 300px;
    }
}

@media (max-width: 768px) {

    .section-welcome {
        padding-top: 100px;
        padding-bottom: 40px;
    }

    .welcome__title {
        font-size: var(--text-2xl);
        letter-spacing: 1px;
        line-height: 1.2;
    }

    .welcome__title br {
        display: none;
    }

    .welcome__citate {
        font-size: var(--text-sm);
    }

    .welcome__citate:last-of-type {
        font-size: var(--text-sm);
    }

    .welcome__image {
        width: 280px;
    }

    .welcome__button {
        width: 100%;
        max-width: 280px;
        font-size: var(--text-base);
    }


    .section-pluses {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .pluses__title {
        font-size: var(--text-2xl);
        letter-spacing: 1px;
    }

    .pluses__title-text {
        font-size: var(--text-base);
        margin: 16px !important;
    }

    .pluses__wrapper {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .pluses__item {
        width: 100%;
        max-width: 320px;
        height: 260px;
    }

    .pluses__item > div {
        padding: 16px;
    }

    .plus__image {
        width: 50%;
    }

    .plus__title-text {
        font-size: var(--text-lg);
    }


    .counter__title {
        font-size: var(--text-2xl);
        letter-spacing: 1px;
    }

    .counter__title-text {
        font-size: var(--text-base);
        margin: 16px !important;
    }

    .counter__image {
        width: 80%;
    }

    .counter-image__image {
        width: 100%;
    }

    .counter__items-list {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .counter__item {
        width: 100%;
    }

    .coutner-item__num {
        font-size: var(--text-2xl);
    }

    .counter-item__text {
        font-size: var(--text-sm);
    }


    .section-links {
        margin-top: 24px !important;
    }

    .links__title {
        font-size: var(--text-2xl);
        letter-spacing: 1px;
    }

    .links__title-text {
        font-size: var(--text-base);
        margin: 16px !important;
        padding: 0 16px;
    }

    .section-links__wrapper {
        gap: 24px;
    }

    .section-links__button {
        width: 100%;
        max-width: 320px;
    }

    .links__button {
        width: 100%;
        font-size: var(--text-base);
        padding: 12px 16px !important;
    }

    .links-button__text {
        font-size: var(--text-sm);
        padding: 0 8px;
    }

    .links-image__image {
        max-width: 200px;
    }

    .section-links__image {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 425px) {

    .section-welcome {
        padding-top: 80px;
    }

    .welcome__title {
        font-size: var(--text-xl);
        letter-spacing: 0.5px;
    }

    .welcome__image {
        width: 200px;
    }

    .welcome__button {
        font-size: var(--text-sm);
        padding: 10px 16px !important;
    }


    .pluses__item {
        height: 220px;
        max-width: 280px;
    }

    .plus__title-text {
        font-size: var(--text-base);
    }

    .pluses__item > div {
        padding: 12px;
    }


    .coutner-item__num {
        font-size: var(--text-xl);
    }


    .links__title {
        font-size: var(--text-xl);
    }

    .links-image__image {
        max-width: 150px;
    }

    .section-links__button {
        max-width: 280px;
    }

    .links__button {
        font-size: var(--text-sm);
        padding: 10px 12px !important;
    }

    .links-button__text {
        font-size: var(--text-xs);
    }
}

@media (max-width: 768px) {

    .welcome__title,
    .welcome__citate,
    .welcome__button,
    .welcome__image-wrapper,
    .pluses__item,
    .counter__image,
    .counter__item,
    .section-links__button {
        transform: translate(0, 0) !important;
        opacity: 1 !important;
    }


    .pluses__item:nth-child(1),
    .pluses__item:nth-child(2),
    .pluses__item:nth-child(3),
    .pluses__item:nth-child(4),
    .counter__item:nth-child(1),
    .counter__item:nth-child(2),
    .counter__item:nth-child(3),
    .counter__item:nth-child(4) {
        transition-delay: 0s !important;
    }
}



@media (max-width: 1024px) {

    .section-pur-welcome {
        padding-top: 60px;
        padding-bottom: 20px;
        margin-bottom: 40px;
    }

    .section-pur-welcome .container {
        flex-direction: column;
        text-align: center;
        margin-top: 30px;
        padding-bottom: 30px;
    }

    .pur-welcome__text {
        align-items: center;
    }

    .pur__title {
        font-size: var(--text-2xl);
        letter-spacing: 1px;
    }

    .pur__text {
        font-size: var(--text-sm);
    }

    .pur-welcome__button {
        margin-top: 16px !important;
    }

    .pur-welcome__image {
        margin-top: 20px;
        justify-content: center;
        transform: translate(0, 0);
        opacity: 1;
    }

    .pur__image {
        width: 60%;
        transform: rotate(5deg);
    }


    .pur-list__search {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pur-list__add-button {
        width: 100%;
        justify-content: center;
    }

    .pur-list__search-wrapper {
        max-width: 100%;
    }


    .pur-add__fields {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 16px;
    }

    .pur-add__card {
        padding: 20px;
    }


    .pr-list__table-list {
        overflow-x: auto;
    }

    .pr-list__table-header,
    .pr-list__table-row {
        grid-template-columns: 40px 1.5fr 70px 80px 100px 120px 100px;
        padding: 12px 16px;
        font-size: 13px;
        min-width: 700px;
    }

    .pr-list__th,
    .pr-list__td {
        font-size: 13px;
        white-space: nowrap;
    }

    .pr-list__table-footer {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        text-align: center;
    }

    .pr-list__footer-text {
        font-size: 13px;
    }
}

@media (max-width: 768px) {

    .section-pur-welcome {
        padding-top: 40px;
        padding-bottom: 10px;
        margin-bottom: 30px;
    }

    .section-pur-welcome .container {
        margin-top: 20px;
        padding-bottom: 20px;
    }

    .pur__title {
        font-size: var(--text-xl);
        letter-spacing: 0.5px;
    }

    .pur__text {
        font-size: var(--text-sm);
        padding: 0 12px;
    }

    .pur-welcome__button {
        font-size: var(--text-sm);
        padding: 8px 20px !important;
    }

    .pur__image {
        width: 70%;
        transform: rotate(3deg);
    }


    .pur-list__add-button {
        font-size: var(--text-sm);
        padding: 10px 16px !important;
    }

    .pur-list__search-input {
        font-size: var(--text-sm);
        padding: 8px 12px;
        min-width: 100px;
    }

    .pur-list__search-button {
        padding: 10px;
    }

    .pur-list__search-button svg {
        width: 16px;
        height: 16px;
    }


    .pur-add__fields {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pur-add__card {
        padding: 16px;
        border-radius: var(--radius);
    }

    .pur-add__title {
        font-size: var(--text-base);
    }

    .pur-add__subtitle {
        font-size: var(--text-sm);
    }

    .pur-add__label {
        font-size: 12px;
    }

    .pur-add__input {
        font-size: var(--text-sm);
        padding: 8px 12px;
    }

    .pur-add__actions {
        flex-direction: column;
        gap: 8px;
    }

    .pur-add__btn {
        width: 100%;
        text-align: center;
        padding: 10px 16px;
        font-size: var(--text-sm);
    }


    .pr-list__table-header,
    .pr-list__table-row {
        grid-template-columns: 35px 1.2fr 60px 70px 90px 100px 80px;
        padding: 10px 12px;
        font-size: 12px;
        min-width: 600px;
        gap: 6px;
    }

    .pr-list__th,
    .pr-list__td {
        font-size: 12px;
    }

    .pr-list__table-footer {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 12px 16px;
    }

    .pr-list__footer-text {
        font-size: 12px;
    }


    .pur-welcome__image {
        transform: translate(0, 0) !important;
        opacity: 1 !important;
    }
}

@media (max-width: 425px) {
    .pur__title {
        font-size: var(--text-lg);
        letter-spacing: 0;
    }

    .pur__text {
        font-size: var(--text-xs);
    }

    .pur-welcome__button {
        font-size: var(--text-xs);
        padding: 6px 16px !important;
    }

    .pur__image {
        width: 80%;
    }

    .pur-list__add-button {
        font-size: var(--text-xs);
        padding: 8px 12px !important;
    }

    .pur-list__search-input {
        font-size: var(--text-xs);
        padding: 6px 10px;
    }

    .pur-add__card {
        padding: 12px;
    }

    .pur-add__title {
        font-size: var(--text-sm);
    }

    .pur-add__subtitle {
        font-size: var(--text-xs);
    }

    .pur-add__input {
        font-size: var(--text-xs);
        padding: 6px 10px;
    }

    .pur-add__btn {
        font-size: var(--text-xs);
        padding: 8px 12px;
    }

    .pr-list__table-header,
    .pr-list__table-row {
        grid-template-columns: 30px 1fr 50px 60px 80px 90px 70px;
        padding: 8px 10px;
        font-size: 11px;
        min-width: 500px;
        gap: 4px;
    }

    .pr-list__th,
    .pr-list__td {
        font-size: 11px;
    }

    .pr-list__table-footer {
        padding: 10px 12px;
    }

    .pr-list__footer-text {
        font-size: 11px;
    }
}


@media (max-width: 1024px) {

    .section-sale-welcome {
        padding-top: 60px;
        padding-bottom: 20px;
        margin-bottom: 40px;
    }

    .section-sale-welcome .container {
        flex-direction: column;
        text-align: center;
        margin-top: 30px;
        padding-bottom: 30px;
    }

    .sale-welcome__text {
        align-items: center;
    }

    .sale__title {
        font-size: var(--text-2xl);
        letter-spacing: 1px;
    }

    .sale__text {
        font-size: var(--text-sm);
    }

    .sale-welcome__button {
        margin-top: 16px !important;
    }

    .sale-welcome__image {
        margin-top: 20px;
        justify-content: center;
        transform: translate(0, 0);
        opacity: 1;
    }

    .sale__image {
        width: 60%;
    }


    .sale-list__search {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .sale-list__add-button {
        width: 100%;
        justify-content: center;
    }

    .sale-list__search-wrapper {
        max-width: 100%;
    }


    .sale-add__fields {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 16px;
    }

    .sale-add__card {
        padding: 20px;
    }


    .sale-list__table-list {
        overflow-x: auto;
    }

    .sale-list__table-header,
    .sale-list__table-row {
        grid-template-columns: 35px 80px 90px 1.2fr 60px 60px 100px 110px 100px;
        padding: 12px 16px;
        font-size: 13px;
        min-width: 800px;
    }

    .sale-list__th,
    .sale-list__td {
        font-size: 13px;
        white-space: nowrap;
    }

    .sale-list__table-footer {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        text-align: center;
    }

    .sale-list__footer-text {
        font-size: 13px;
    }
}

@media (max-width: 768px) {

    .section-sale-welcome {
        padding-top: 40px;
        padding-bottom: 10px;
        margin-bottom: 30px;
    }

    .section-sale-welcome .container {
        margin-top: 20px;
        padding-bottom: 20px;
    }

    .sale__title {
        font-size: var(--text-xl);
        letter-spacing: 0.5px;
    }

    .sale__text {
        font-size: var(--text-sm);
        padding: 0 12px;
    }

    .sale-welcome__button {
        font-size: var(--text-sm);
        padding: 8px 20px !important;
    }

    .sale__image {
        width: 70%;
    }


    .sale-list__add-button {
        font-size: var(--text-sm);
        padding: 10px 16px !important;
    }

    .sale-list__search-input {
        font-size: var(--text-sm);
        padding: 8px 12px;
        min-width: 100px;
    }

    .sale-list__search-button {
        padding: 10px;
    }

    .sale-list__search-button svg {
        width: 16px;
        height: 16px;
    }


    .sale-add__fields {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sale-add__card {
        padding: 16px;
        border-radius: var(--radius);
    }

    .sale-add__title {
        font-size: var(--text-base);
    }

    .sale-add__subtitle {
        font-size: var(--text-sm);
    }

    .sale-add__label {
        font-size: 12px;
    }

    .sale-add__input {
        font-size: var(--text-sm);
        padding: 8px 12px;
    }

    .sale-add__actions {
        flex-direction: column;
        gap: 8px;
    }

    .sale-add__btn {
        width: 100%;
        text-align: center;
        padding: 10px 16px;
        font-size: var(--text-sm);
    }


    .sale-list__table-header,
    .sale-list__table-row {
        grid-template-columns: 30px 70px 80px 1fr 50px 50px 90px 100px 90px;
        padding: 10px 12px;
        font-size: 12px;
        min-width: 700px;
        gap: 6px;
    }

    .sale-list__th,
    .sale-list__td {
        font-size: 12px;
    }

    .sale-list__table-footer {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 12px 16px;
    }

    .sale-list__footer-text {
        font-size: 12px;
    }


    .sale-welcome__image {
        transform: translate(0, 0) !important;
        opacity: 1 !important;
    }


    .status-badge {
        font-size: 10px;
        padding: 2px 8px;
    }
}

@media (max-width: 425px) {
    .sale__title {
        font-size: var(--text-lg);
        letter-spacing: 0;
    }

    .sale__text {
        font-size: var(--text-xs);
    }

    .sale-welcome__button {
        font-size: var(--text-xs);
        padding: 6px 16px !important;
    }

    .sale__image {
        width: 80%;
    }

    .sale-list__add-button {
        font-size: var(--text-xs);
        padding: 8px 12px !important;
    }

    .sale-list__search-input {
        font-size: var(--text-xs);
        padding: 6px 10px;
    }

    .sale-add__card {
        padding: 12px;
    }

    .sale-add__title {
        font-size: var(--text-sm);
    }

    .sale-add__subtitle {
        font-size: var(--text-xs);
    }

    .sale-add__input {
        font-size: var(--text-xs);
        padding: 6px 10px;
    }

    .sale-add__btn {
        font-size: var(--text-xs);
        padding: 8px 12px;
    }

    .sale-list__table-header,
    .sale-list__table-row {
        grid-template-columns: 25px 60px 70px 1fr 45px 45px 80px 90px 80px;
        padding: 8px 10px;
        font-size: 10px;
        min-width: 600px;
        gap: 4px;
    }

    .sale-list__th,
    .sale-list__td {
        font-size: 10px;
    }

    .sale-list__table-footer {
        padding: 10px 12px;
    }

    .sale-list__footer-text {
        font-size: 10px;
    }

    .status-badge {
        font-size: 9px;
        padding: 2px 6px;
    }
}


@media (max-width: 1024px) {

    .section-stock-welcome {
        padding-top: 60px;
        padding-bottom: 20px;
        margin-bottom: 40px;
    }

    .section-stock-welcome .container {
        flex-direction: column;
        text-align: center;
        margin-top: 30px;
        padding-bottom: 30px;
    }

    .stock-welcome__text {
        align-items: center;
    }

    .stock__title {
        font-size: var(--text-2xl);
        letter-spacing: 1px;
    }

    .stock__text {
        font-size: var(--text-sm);
    }

    .stock-welcome__button {
        margin-top: 16px !important;
    }

    .stock-welcome__image {
        margin-top: 20px;
        justify-content: center;
        transform: translate(0, 0);
        opacity: 1;
    }

    .stock__image {
        width: 60%;
    }


    .stock-list__search {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .stock-list__add-button {
        width: 100%;
        justify-content: center;
    }

    .stock-list__search-wrapper {
        max-width: 100%;
    }


    .stock-add__fields {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 16px;
    }


    .stock-add__field:last-child {
        display: none;
    }

    .stock-add__card {
        padding: 20px;
    }


    .stock-list__table-list {
        overflow-x: auto;
    }

    .stock-list__table-header,
    .stock-list__table-row {
        grid-template-columns: 40px 1.5fr 70px 80px 110px 130px 100px;
        padding: 12px 16px;
        font-size: 13px;
        min-width: 720px;
    }

    .stock-list__th,
    .stock-list__td {
        font-size: 13px;
        white-space: nowrap;
    }

    .stock-list__table-footer {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        text-align: center;
    }

    .stock-list__footer-text {
        font-size: 13px;
    }
}

@media (max-width: 768px) {

    .section-stock-welcome {
        padding-top: 40px;
        padding-bottom: 10px;
        margin-bottom: 30px;
    }

    .section-stock-welcome .container {
        margin-top: 20px;
        padding-bottom: 20px;
    }

    .stock__title {
        font-size: var(--text-xl);
        letter-spacing: 0.5px;
    }

    .stock__text {
        font-size: var(--text-sm);
        padding: 0 12px;
    }

    .stock-welcome__button {
        font-size: var(--text-sm);
        padding: 8px 20px !important;
    }

    .stock__image {
        width: 70%;
    }


    .stock-list__add-button {
        font-size: var(--text-sm);
        padding: 10px 16px !important;
    }

    .stock-list__search-input {
        font-size: var(--text-sm);
        padding: 8px 12px;
        min-width: 100px;
    }

    .stock-list__search-button {
        padding: 10px;
    }

    .stock-list__search-button svg {
        width: 16px;
        height: 16px;
    }


    .stock-add__fields {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stock-add__field:last-child {
        display: none;
    }

    .stock-add__card {
        padding: 16px;
        border-radius: var(--radius);
    }

    .stock-add__title {
        font-size: var(--text-base);
    }

    .stock-add__subtitle {
        font-size: var(--text-sm);
    }

    .stock-add__label {
        font-size: 12px;
    }

    .stock-add__input {
        font-size: var(--text-sm);
        padding: 8px 12px;
    }

    .stock-add__actions {
        flex-direction: column;
        gap: 8px;
    }

    .stock-add__btn {
        width: 100%;
        text-align: center;
        padding: 10px 16px;
        font-size: var(--text-sm);
    }


    .stock-list__table-header,
    .stock-list__table-row {
        grid-template-columns: 35px 1.2fr 60px 70px 90px 110px 80px;
        padding: 10px 12px;
        font-size: 12px;
        min-width: 620px;
        gap: 6px;
    }

    .stock-list__th,
    .stock-list__td {
        font-size: 12px;
    }

    .stock-list__table-footer {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 12px 16px;
    }

    .stock-list__footer-text {
        font-size: 12px;
    }


    .stock-welcome__image {
        transform: translate(0, 0) !important;
        opacity: 1 !important;
    }
}

@media (max-width: 425px) {
    .stock__title {
        font-size: var(--text-lg);
        letter-spacing: 0;
    }

    .stock__text {
        font-size: var(--text-xs);
    }

    .stock-welcome__button {
        font-size: var(--text-xs);
        padding: 6px 16px !important;
    }

    .stock__image {
        width: 80%;
    }

    .stock-list__add-button {
        font-size: var(--text-xs);
        padding: 8px 12px !important;
    }

    .stock-list__search-input {
        font-size: var(--text-xs);
        padding: 6px 10px;
    }

    .stock-add__card {
        padding: 12px;
    }

    .stock-add__title {
        font-size: var(--text-sm);
    }

    .stock-add__subtitle {
        font-size: var(--text-xs);
    }

    .stock-add__input {
        font-size: var(--text-xs);
        padding: 6px 10px;
    }

    .stock-add__btn {
        font-size: var(--text-xs);
        padding: 8px 12px;
    }

    .stock-list__table-header,
    .stock-list__table-row {
        grid-template-columns: 30px 1fr 50px 60px 80px 90px 70px;
        padding: 8px 10px;
        font-size: 10px;
        min-width: 520px;
        gap: 4px;
    }

    .stock-list__th,
    .stock-list__td {
        font-size: 10px;
    }

    .stock-list__table-footer {
        padding: 10px 12px;
    }

    .stock-list__footer-text {
        font-size: 10px;
    }
}