/* /css/pages/card.css (6.93 KB) */
/* /css/mods/layout/contact-form.css (1.97 KB) */
[data-submod="card"] article { max-width: 840px; } [data-submod="card"] .top-page .top-content { padding-top: 16px; display: flex; flex-direction: column; gap: 32px; } [data-submod="card"] .top-page .top-content section { box-sizing: border-box; border-radius: 16px; width: 100%; padding: 24px; margin: 0 auto; } [data-submod="card"] .top-page .top-content .top-button { margin: 0; } [data-submod="card"] .top-page h1, [data-submod="card"] .top-page h2, [data-submod="card"] .top-page h3 { margin: 0 0 24px 0; color: inherit !important; font-size: 32px; font-weight: 700; line-height: unset !important; } .landing_card_cotacts { background: var(--color-layout-front-2); color: var(--color-text-1); position: relative; overflow: hidden; } .landing_card_cotacts_block { display: flex; position: relative; z-index: 1; } .landing_card_cotacts_block b { margin: 0 0 16px 0; font-size: 24px; } .landing_card_cotacts_block > div { width: 50%; line-height: 1.6; } .landing_card_cotacts_block .top-comment { font-size: inherit; } .landing_card_cotacts > svg { position: absolute; right: 0px; bottom: 0; transform: rotate(8.23deg); } .landing_card_contact_form { padding: 0 !important; display: flex; gap: inherit; } .landing_card_contact_form div { width: 100%; } .landing_card_requisites, .landing_card_documents, .landing_card_colors { border: solid 1px var(--color-layout-front-4); font-size: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; } .landing_card_requisites dl { border: none; padding: 0; margin: 0; font-size: 14px; display: flex; flex-wrap: wrap; } .landing_card_requisites dl dt, .landing_card_requisites dl dd { border: none; border-bottom: solid 1px var(--color-line-2); padding: 16px 0; width: 50%; display: flex; } .landing_card_requisites dl dt { align-items: center; color: var(--color-text-3); white-space: nowrap; } .landing_card_requisites dl dd { margin-inline-start: 0; } .landing_card_requisites dl dt:first-child, .landing_card_requisites dl dd:first-of-type { padding-top: 0; } .landing_card_requisites dl dt:last-of-type, .landing_card_requisites dl dd:last-child { border-bottom: none; padding-bottom: 0; } .landing_card_documents div { width: 100%; display: flex; flex-wrap: wrap; gap: 16px; } .landing_card_documents .items a { width: 45%; display: flex; align-items: center } .landing_card_documents .items a i:nth-child(1) { border: solid 1px; border-radius: 8px; padding: 4px 8px; margin-right: 16px; line-height: 14px; } .landing_card_documents .items a:hover { text-decoration: none !important; } .landing_card_documents .items a:hover i:nth-child(2) { text-decoration: underline; } .landing_card_faq { padding: 24px; } .landing_card_logo { background: var(--color-bg-primary-1); color: #FFF; } .landing_card_logo a[id] { color: var(--color-layer-primary-2) !important; } .landing_card_logo .items { display: flex; gap: 24px; flex-wrap: wrap; } .landing_card_logo .items a { border-radius: 16px; background: #FFF; width: calc(33% - 16px); padding: 24px; color: var(--color-text-1) !important; text-align: center; position: relative; flex-grow: 1; } .landing_card_logo .items a.small { width: auto; flex-grow: 0; } .landing_card_logo img { height: 42px; } .landing_card_logo .hover { --top-icon-color: var(--color-text-2); box-shadow: var(--top-shadow-s); border-radius: 8px; background: #FFF; width: 160px; text-align: center; line-height: 36px; position: absolute; top: calc(50% - 18px); left: calc(50% - 160px / 2); display: none; } .landing_card_logo .items a.small .hover { width: 42px; left: auto; } .landing_card_logo .items a.small .hover i { display: none; } .landing_card_logo .items a:hover img { opacity: 0.1; } .landing_card_logo .items a:hover .hover { display: block; } .landing_card_logo .items a.dark { background: var(--color-blue-dd); } .landing_card_colors { border: none; background-color: var(--color-layout-front-2); color: var(--color-text-1); flex-direction: column; } .landing_card_colors .items { margin: 0 48px; font-size: 16px; display: flex; column-gap: 70px; } .landing_card_colors_item, .landing_card_colors_item_codes { display: flex; } .landing_card_colors_item { align-items: center; column-gap: 32px; } .landing_card_colors_item_circle { border-radius: 100%; width: 100px; min-width: 100px; height: 100px; } .landing_card_colors_item:nth-child(2) .landing_card_colors_item_circle { border: solid 1px var(--color-layout-front-5); } .landing_card_colors_item_codes { white-space: nowrap; flex-wrap: wrap; justify-content: space-between; row-gap: 8px; } .landing_card_colors_item_codes i:nth-child(odd) { width: 35%; } .landing_card_colors_item_codes i:nth-child(even) { width: 65%; font-weight: 700; } .landing_card_sanitary { --g_back-color: var(--color-layout-front-2); box-shadow: var(--g_back-color) 20vw 0 0, var(--g_back-color) -20vw 0 0, var(--g_back-color) 40vw 0 0, var(--g_back-color) -40vw 0 0, var(--g_back-color) 60vw 0 0, var(--g_back-color) -60vw 0 0; background: var(--g_back-color); font-size: 16px; } .landing_card_sanitary img { margin: -24px 4px 0 4px; } @media only screen and (max-width: 1366px) { .landing_card_colors .items { margin: 0; font-size: 14px; column-gap: 32px; } .landing_card_colors_item { column-gap: 24px; } } @media only screen and (max-width: 900px) { [data-submod="card"] .top-page .top-content { gap: 16px; } [data-submod="card"] .top-page .top-content section { padding: 16px; } [data-submod="card"] .top-page h1, [data-submod="card"] .top-page h2, [data-submod="card"] .top-page h3 { margin: 0 0 16px 0; } .landing_card_logo .items { gap: 16px; } .landing_card_logo img { height: 32px; } .landing_card_colors_item_circle { width: 72px; min-width: 72px; height: 72px; } } @media only screen and (max-width: 600px) { [data-submod="card"] .top-page .top-content .top-button { width: 100%; order: 1; margin-top: 16px; } .landing_card_cotacts_block { flex-wrap: wrap; } .landing_card_contact_form { flex-wrap: wrap; } .landing_card_logo .items a { width: 100%; order: 1; } .landing_card_logo .items a.small { width: 30%; height: calc(50vw - 16px - 16px - 32px - 32px); flex-grow: 1; order: 0; display: flex; align-items: center; justify-content: center; } .landing_card_sanitary { display: flex; flex-wrap: wrap; } .landing_card_sanitary img { margin: 4px auto 0 auto; order: 1; } .top-content .landing_card_requisites dt, .top-content .landing_card_requisites dd { width: 100%; } .top-content .landing_card_requisites dt { border: none; padding: 8px 0 0 0; font-size: 12px; } .top-content .landing_card_requisites dd { padding: 0 0 8px 0; } .landing_card_documents .items a { width: 100%; } .landing_card_colors .items { column-gap: 0; row-gap: 16px; flex-wrap: wrap; } .landing_card_colors_item { width: 100%; column-gap: 16px; justify-content: space-around; } .landing_card_colors_item_codes { width: 50%; row-gap: 4px; } } .g_contact_form { border-radius: 16px; background: var(--color-bg-primary-1) url(/images/common/layout/contactForm.svg) calc(100% + 40px) 50% no-repeat; background-size: 132px auto; padding: 32px; margin: 0 auto; color: #FFF; display: grid; grid-gap: 34px 48px; grid-template: "title ul" "button ul" / 320px 1fr; } .g_contact_form_title { font-size: 32px; font-weight: 700; line-height: 1; grid-area: title; } .g_contact_form_button { --top-forms-base-height: 40px; font-size: 14px; grid-area: button; } html .g_contact_form_button.top-color_theme { --top-button-background-color: var(--color-layout-front-1); --top-button-background-color-hover: var(--color-bg-shading-1); --top-button-background-color-active: var(--color-bg-shading-2); --top-button-background-color-selected: var(--color-bg-shading-2); } .g_contact_form_ul { height: 100%; padding: 0px 100px 0px 20px; margin: 0; font-size: 16px; grid-area: ul; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .g_contact_form_ul li { width: 100%; } .g_contact_form_ul li:first-child:last-child { list-style: none; margin-left: -20px; } .g_contact_form-s { background-position: calc(100% + 20px) 10px; background-size: 80px auto; padding: 24px; grid-gap: 16px; grid-template: "title" "ul" "button"; } .g_contact_form-s .g_contact_form_ul { padding-right: 20px; font-size: 14px; gap: 4px; } .g_contact_form-dark { background-color: var(--color-text-1); background-image: url(/images/common/layout/help.svg); } @media only screen and (max-width: 900px) { .g_contact_form { background-position: calc(100% + 20px) 10px; background-size: 80px auto; padding: 24px; grid-gap: 16px; grid-template: "title" "ul" "button"; } .g_contact_form_ul { padding-right: 20px; font-size: 14px; gap: 4px; } .g_contact_form-s .g_contact_form_title { font-size: 22px; } } @media only screen and (max-width: 600px) { .g_contact_form_title { font-size: 22px; } }