/* /css/pages/card.css (4.46 KB) */
/* /css/mods/layout/contact-form.css (2.04 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: 0; 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; align-items: center; gap: var(--top-gap-1); justify-content: space-between; } .landing_card_requisites dl dd > button[name="copy_requisites"] { opacity: 0; } .landing_card_requisites dl dd:hover > button[name="copy_requisites"] { opacity: 1; } .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_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: 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; } } @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_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 } .top-content .landing_card_requisites dl dd > button.top-button[name="copy_requisites"] { width: auto; margin-top: 0; opacity: 1;} .landing_card_documents .items a { width: 100%; } } .g_contact_form { border-radius: 16px; background: var(--color-bg-primary-1) url(/controller/file/?src=/cloud/tv/common/tpl/landings/card/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(/controller/file/?src=/cloud/tv/common/tpl/landings/card/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; } }