/*------------------- Global styles -------------------*/ :root { --bg: #f5f6f8; --bg_grey: rgba(255, 255, 255, .80); --cont_padding: 20px; --cont_padding_double: calc(var(--cont_padding) * 2); --cont_padding_half: calc(var(--cont_padding) * .5); --content_width_l: 1920px; --content_width: 1280px; --sidebar_width: 260px; --custom_scroll_width: 10px; --custom_scroll_height: 10px; --custom_scroll_border_radius: 0; --custom_scroll_scrollbar_color: var(--bg); --custom_scroll_scrollbar_thumb_color: var(--primary_color); --primary_color: #22c5c5; --secondary_color: #2c3341; --dark_color: #2c3341; --light_color: #fff; --black_color: #000; --grey_color: rgba(44, 51, 65, .50); --yellow_color: #d4a373; --font_size_xl: 20px; --font_size_l: 18px; --font_size: 16px; --font_size_s: 14px; --font_size_xs: 12px; --font_size_title_l: 50px; --font_size_title: 42px; --font_size_title_s: 28px; --font_family_primary: 'Inter', 'Arial', sans-serif; --block_head_offset_l: 50px; --block_head_offset: 40px; --block_padding_xl: 80px; --block_padding_l: 60px; --block_padding: 40px; --block_padding_s: 30px; --outside_gap_l: 140px; --outside_gap: 120px; --outside_gap_s: 80px; --inner_gap_l: 24px; --inner_gap: 20px; --inner_gap_s: 16px; --inner_gap_xs: 10px; --inner_gap_xxs: 8px; --inner_gap_xxxs: 4px; --border_radius_max: 100px; --border_radius_xl: 32px; --border_radius_l: 28px; --border_radius: 20px; --border_radius_s: 14px; --border_radius_xs: 10px; --zero_px: calc(0 * 1px); } ::selection { color: var(--light_color); background: var(--primary_color); } ::-moz-selection { color: var(--light_color); background: var(--primary_color); } html { height: 100%; min-height: -moz-available; min-height: -webkit-fill-available; min-height: fill-available; } body { height: 100%; min-height: -moz-available; min-height: -webkit-fill-available; min-height: fill-available; font-family: var(--font_family_primary); font-size: var(--font_size); font-weight: 400; line-height: normal; color: var(--dark_color); &.lock { overflow: clip; } } button { display: inline-block; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; cursor: pointer; vertical-align: top; letter-spacing: inherit; color: inherit; border: none; background: none; } .wrap { position: relative; display: flex; overflow: clip; flex-direction: column; min-height: 100%; background: var(--bg); & > .main { position: relative; display: flex; flex: 1 0 auto; flex-direction: column; } } .cont { width: 100%; max-width: calc(var(--content_width) + var(--cont_padding_double)); margin-inline: auto; padding-inline: var(--cont_padding); &.l_w { max-width: calc(var(--content_width_l) + var(--cont_padding_double)); } } .content_row { & > .cont.row { display: flex; align-content: stretch; align-items: stretch; flex-wrap: wrap; justify-content: space-between; .content { position: relative; display: flex; flex-direction: column; gap: var(--outside_gap_s); width: calc(100% - var(--sidebar_width) - var(--cont_padding)); } } & > .cont.centered { .content { width: 1040px; max-width: 100%; margin-inline: auto; } } } .bg_block { padding: var(--inner_gap); border-radius: 40px; background: var(--light_color); box-shadow: 0 -965px 250px 0 rgba(210, 216, 228, .00), 0 -618px 247px 0 rgba(210, 216, 228, .01), 0 -347px 208px 0 rgba(210, 216, 228, .03), 0 -154px 154px 0 rgba(210, 216, 228, .04), 0 -39px 85px 0 rgba(210, 216, 228, .05); &.no_bottom_radius { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } } .block { margin-bottom: var(--outside_gap); &.border { position: relative; margin-bottom: var(--block_padding_xl); padding-bottom: var(--block_padding_xl); &:after { position: absolute; right: 0; bottom: 0; left: 0; display: block; width: var(--content_width); max-width: 100%; height: 1px; margin-inline: auto; content: ''; background: rgba(44, 51, 65, .1); } } &.l_m { margin-bottom: var(--outside_gap_l); } &.s_m { margin-bottom: var(--outside_gap_s); } } img.cover, video.cover { display: block; width: 100%; height: 100%; border-radius: inherit; object-position:right; object-fit: cover; } /*------------- Overlay -------------*/ .overlay { position: fixed; inset: 0; display: none; z-index: 50; transition: opacity .2s linear, display .2s allow-discrete; pointer-events: none; opacity: 0; background: rgba(24, 31, 45, .40); &.show { display: block; pointer-events: auto; opacity: 1; @starting-style { opacity: 0; } } } /*------------------- Custom scroll -------------------*/ @media (hover: hover) { html ::-webkit-scrollbar { width: var(--custom_scroll_width); height: var(--custom_scroll_height); border-radius: var(--custom_scroll_border_radius); background-color: var(--bg); } html ::-webkit-scrollbar-thumb { border-radius: var(--custom_scroll_border_radius); background-color: var(--custom_scroll_scrollbar_thumb_color); } } /*-------------- ButtonUp --------------*/ .buttonUp { position: fixed; right: var(--cont_padding); bottom: var(--cont_padding); display: none; z-index: 10; .btn { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 60px; transition: background .2s linear; color: var(--light_color); border-radius: 50%; background: var(--primary_color); aspect-ratio: 1 / 1; .icon { display: block; width: 24px; aspect-ratio: 1 / 1; } &:hover { background: var(--secondary_color); } } } /*-------------- Grid row --------------*/ .grid_row { display: flex; align-content: stretch; align-items: stretch; flex-wrap: wrap; justify-content: flex-start; margin-bottom: calc(var(--gap_y) * -1); margin-left: calc(var(--gap_x) * -1); --items_per_line: 3; --gap_x: var(--inner_gap); --gap_y: var(--inner_gap); &.centered { justify-content: center; } & > * { width: calc(100% / var(--items_per_line) * var(--width_multiplier, 1) - var(--gap_x)); margin-bottom: var(--gap_y); margin-left: var(--gap_x); } } /*--------------- Accordion ---------------*/ .accordion { display: flex; flex-direction: column; gap: 6px; } .accordion_item { position: relative; transition: .2s linear; border: 1px solid rgba(44, 51, 65, .10); border-radius: 18px; background: rgba(255, 255, 255, .80); .head { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap_s); padding: 17px; cursor: pointer; .arr { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 46px; color: var(--light_color); border-radius: 50%; background: var(--primary_color); aspect-ratio: 1 / 1; svg { display: block; width: 24px; transition: transform .2s linear; aspect-ratio: 1 / 1; } } .title { width: calc(100% - 46px - var(--inner_gap_s)); font-size: var(--font_size_xl); line-height: calc(100% + 8px); } } .data { display: none; padding-block: var(--inner_gap_l) var(--block_padding_s); padding-inline: var(--block_padding_s); line-height: calc(100% + 10px); border-top: 1px solid rgba(44, 51, 65, .10); } @media (hover: hover) and (pointer: fine) { &:hover { z-index: 1; border-color: var(--primary_color); } } &.active { background: var(--light_color); .head { .arr { background: var(--secondary_color); svg { transform: rotate(180deg); } } } } } /*------------ Header ------------*/ header { padding-block: var(--inner_gap_xs) 0; .data { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; padding-block: var(--inner_gap_s); padding-inline: var(--block_padding) var(--inner_gap_s); border: 1px solid rgba(44, 51, 65, .10); border-radius: var(--border_radius_max); background: var(--light_color); } .logo { display: block; text-decoration: none; color: currentColor; img { display: block; width: 160px; height: 48px; } } .menu { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: var(--block_padding); margin-right: auto; margin-left: 100px; .item { & > .link { position: relative; display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--inner_gap_xs); transition: .2s linear; text-decoration: none; color: currentColor; border-radius: var(--border_radius_max); &.btn { padding-block: var(--inner_gap_s); padding-inline: 36px; color: var(--light_color); background: var(--secondary_color); anchor-name: --menu-modal-btn; } .icon { display: block; width: 20px; aspect-ratio: 1 / 1; } .icon + .icon { display: none; } &.active { z-index: 100; color: var(--dark_color); background: var(--light_color); .icon { display: none; } .icon + .icon { display: block; } } } @media (hover: hover) and (pointer: fine) { &.active > .link, &:not(.active) > .link:hover { color: var(--primary_color); &.btn { color: var(--light_color); background: var(--primary_color); } } } } .menu_modal { position: absolute; top: anchor(bottom); left: anchor(left); display: none; align-content: stretch; align-items: stretch; flex-wrap: wrap; justify-content: space-between; width: 1280px; margin-block: var(--inner_gap_l) 0; margin-inline: 0; padding: var(--inner_gap_xs); border: none; border-radius: var(--border_radius_l); background: var(--light_color); position-anchor: --menu-modal-btn; .main { position: relative; width: calc(100% - 380px - var(--block_padding) * 2); margin: var(--block_padding); .col { display: flex; flex-direction: column; gap: var(--inner_gap_s); width: 349px; max-width: 100%; padding-right: var(--inner_gap); border-right: 1px solid rgba(44, 51, 65, .10); } a { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 18px; line-height: calc(100% + 6px); transition: color .2s linear; text-decoration: none; color: currentColor; .icon { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 34px; transition: .2s linear; border: 1px solid var(--primary_color); border-radius: 50%; aspect-ratio: 1 / 1; svg { display: block; width: 20px; aspect-ratio: 1 / 1; } & + * { align-self: center; width: calc(100% - 34px - 14px); } } @media (hover: hover) and (pointer: fine) { &:hover { /*font-weight: 500;*/ color: var(--primary_color); .icon { color: var(--light_color); background: var(--primary_color); } } } &.active { /*font-weight: 500;*/ color: var(--primary_color); .icon { color: var(--light_color); background: var(--primary_color); } } } .sub { position: absolute; top: 0; right: 0; display: flex; overflow-x: hidden; overflow-y: auto; flex-direction: column; gap: 14px; width: calc(100% - 349px); height: 100%; padding-inline: var(--block_padding_l) var(--inner_gap); transition: opacity .2s linear, display .2s allow-discrete; pointer-events: none; opacity: 0; overscroll-behavior-y: contain; --custom_scroll_width: 4px; --custom_scroll_height: 4px; &.show { display: flex; pointer-events: auto; opacity: 1; @starting-style { opacity: 0; } } } } .contacts_informer { display: flex; flex-direction: column; gap: var(--inner_gap); width: 380px; max-width: 100%; padding: var(--block_padding); border-radius: var(--border_radius); background: var(--bg); .divider { width: 100%; height: 1px; background: rgba(44, 51, 65, .10); } .item { display: flex; flex-direction: column; gap: var(--inner_gap_xxs); .label { font-size: var(--font_size_s); color: var(--grey_color); } .val { display: flex; flex-direction: column; gap: var(--inner_gap_xxxs); line-height: calc(100% + 10px); a { width: fit-content; white-space: nowrap; text-decoration: none; color: currentColor; } } &.email { .val { a { color: var(--yellow_color); border-bottom: 1px solid; } } } &.messengers { .label { margin-bottom: 5px; } .val { display: flex; align-content: flex-start; align-items: flex-start; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 6px; a { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--inner_gap_xs); height: 50px; padding-inline: var(--block_padding_s); font-size: var(--font_size_s); transition: background .2s linear; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--secondary_color); .icon { display: block; width: 22px; aspect-ratio: 1 / 1; } @media (hover: hover) and (pointer: fine) { &:hover { background: var(--primary_color); } } } } } } .order_btn { width: 100%; height: 60px; margin: 0; } } &:popover-open { display: flex; opacity: 1; @starting-style { opacity: 0; } } } } .contacts { display: flex; flex-direction: column; gap: 6px; margin-left: var(--block_padding_l); .address { font-size: 13px; color: rgba(0, 0, 0, .50); } .phone { color: var(--black_color); a { white-space: nowrap; text-decoration: none; color: currentColor; } } } .order_btn { height: 50px; margin-left: var(--block_padding_l); padding-inline: var(--block_padding); transition: background .2s linear; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--primary_color); @media (hover: hover) and (pointer: fine) { &:hover { background: var(--secondary_color); } } } } /*----------------- Mob. header -----------------*/ .mob_header { position: relative; display: none; padding-block: var(--inner_gap_xs) 0; z-index: 100; .data { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; padding-block: var(--inner_gap_xs); padding-inline: var(--inner_gap_l) 12px; border: 1px solid rgba(44, 51, 65, .10); border-radius: var(--border_radius_max); background: var(--light_color); } .logo { display: block; text-decoration: none; color: currentColor; img { display: block; width: 118px; height: 36px; } } .mob_menu_btn { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 82px; height: 42px; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--primary_color); .icon { display: block; width: 20px; aspect-ratio: 1 / 1; } .icon + .icon { display: none; } &.active { .icon { display: none; } .icon + .icon { display: block; } } } } /*--------------- Mob. menu ---------------*/ .mob_menu { position: fixed; top: 0; right: 100%; left: auto; display: flex; overflow-x: hidden; overflow-y: auto; flex-direction: column; gap: var(--inner_gap_l); width: 100%; height: 100%; min-height: -moz-available; min-height: -webkit-fill-available; min-height: fill-available; padding-block: 75px var(--block_padding); padding-inline: var(--cont_padding); z-index: 90; transition: transform .3s linear; background: var(--light_color); overscroll-behavior-y: contain; &.show { transform: translateX(100%); } .section { display: flex; flex-direction: column; gap: var(--inner_gap); padding: var(--inner_gap); border: 1px solid rgba(44, 51, 65, .10); border-radius: 24px; background: var(--light_color); } .services_btn, .back_btn { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--inner_gap_xs); width: 100%; height: 50px; font-size: var(--font_size_s); color: var(--light_color); border-radius: var(--border_radius_max); background: var(--secondary_color); .icon { display: block; width: 18px; aspect-ratio: 1 / 1; } } .menu { display: flex; flex-direction: column; gap: var(--inner_gap); margin-top: var(--inner_gap_xxs); font-size: var(--font_size_l); a { display: inline-block; transition: color .2s linear; vertical-align: top; text-decoration: none; color: currentColor; &.active { color: var(--position); } } } .order_btn { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--inner_gap_xs); width: calc(100% - var(--inner_gap) * 2); min-height: 50px; margin-inline: var(--inner_gap); font-size: var(--font_size_s); color: var(--light_color); border-radius: var(--border_radius_max); background: var(--primary_color); .icon { display: block; width: 18px; aspect-ratio: 1 / 1; } } .contacts_wrap { .contacts { display: flex; flex-direction: column; gap: var(--inner_gap_xxs); .address { font-size: var(--font_size_xs); } .phone { font-size: var(--font_size_l); a { white-space: nowrap; text-decoration: none; color: currentColor; } } } .item { display: flex; flex-direction: column; gap: var(--inner_gap_xxs); padding-top: var(--inner_gap); border-top: 1px solid rgba(44, 51, 65, .10); .label { font-size: var(--font_size_xs); color: var(--grey_color); } .val { display: flex; flex-direction: column; gap: var(--inner_gap_xxxs); font-size: var(--font_size_s); line-height: 135%; a { width: fit-content; white-space: nowrap; text-decoration: none; color: currentColor; } } &.email { .val { a { color: var(--yellow_color); border-bottom: 1px solid; } } } } } .catalog { position: absolute; top: 0; right: 100%; overflow-x: hidden; overflow-y: auto; width: 100%; height: 100%; padding-block: 75px var(--block_padding); padding-inline: var(--cont_padding); z-index: 10; transition: transform .3s linear; background: var(--light_color); overscroll-behavior-y: contain; &.show { transform: translateX(100%); } } } /*------------- Sidebar -------------*/ aside { position: relative; display: flex; flex-direction: column; gap: var(--block_padding); width: var(--sidebar_width); max-width: 100%; z-index: 3; .links { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1px; padding: var(--inner_gap_xs); border-radius: var(--border_radius_xl); background: var(--light_color); a { display: block; width: 100%; padding-block: 12px; padding-inline: var(--inner_gap); font-size: var(--font_size_s); transition: .2s linear; text-decoration: none; color: currentColor; border-radius: var(--border_radius_max); @media (hover: hover) and (pointer: fine) { &:hover { color: var(--light_color); background: var(--primary_color); } } &.active { color: var(--light_color); background: var(--primary_color); } } } } /*--------------- Page head ---------------*/ .page_head { margin-bottom: var(--block_padding); padding-top: var(--block_padding_s); .cont { display: flex; flex-direction: column; gap: 34px; } .breadcrumbs { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: var(--inner_gap_xxxs) var(--inner_gap_s); line-height: 162.5%; color: var(--grey_color); a { transition: color .2s linear; text-decoration: none; color: var(--dark_color); @media (hover: hover) and (pointer: fine) { &:hover { color: var(--primary_color); } } } .sep { display: block; width: 16px; color: var(--primary_color); aspect-ratio: 1 / 1; background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2_3)'%3E%3Cpath d='M11.3338 0.805481L12.213 2.45404L13.8615 3.33327L12.213 4.21249L11.3338 5.86104L10.4545 4.21249L8.806 3.33327L10.4545 2.45404L11.3338 0.805481ZM5.33377 2.88881L7.11153 6.22215L10.4449 7.99992L7.11153 9.77771L5.33377 13.1111L3.55599 9.77771L0.222656 7.99992L3.55599 6.22215L5.33377 2.88881ZM13.1115 10.8889L12.0005 8.80551L10.8893 10.8889L8.806 11.9999L10.8893 13.1111L12.0005 15.1944L13.1115 13.1111L15.1949 11.9999L13.1115 10.8889Z' fill='%2322C5C5'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2_3'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat center; } } } .page_title { font-size: var(--font_size_title_l); font-weight: 400; line-height: normal; } /*---------------- Block head ----------------*/ .block_head { display: flex; flex-direction: column; gap: var(--inner_gap_l); margin-bottom: var(--block_head_offset); &.l_m { margin-bottom: var(--block_head_offset_l); } &.row { align-content: center; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap) var(--block_padding); } .title, .subtitle { font-weight: 400; line-height: normal; } .title { font-size: var(--font_size_title); &.size_l { font-size: var(--font_size_title_l); line-height: calc(100% + 10px); } } .title.size_s, .subtitle { font-size: var(--font_size_title_s); line-height: calc(100% + 4px); } .desc { line-height: calc(100% + 10px); color: var(--grey_color); } .all_link { margin-top: 18px; margin-right: auto; font-weight: 500; transition: color .2s linear; text-decoration: none; color: var(--yellow_color); border-bottom: 1px solid; @media (hover: hover) and (pointer: fine) { &:hover { color: var(--dark_color); } } } } /*------------------ Form elements ------------------*/ .form { --form_border_color: rgba(255, 255, 255, .10); --form_border_color_focus: rgba(255, 255, 255, .50); --form_border_radius: var(--border_radius_s); --form_error_color: red; --form_bg_color: rgba(255, 255, 255, .12); --form_placeholder_color: rgba(255, 255, 255, .50); --form_columns_gap: var(--inner_gap_xxs); --form_line_gap: var(--inner_gap_xxs); --form_input_height: 80px; --form_input_padding_inline: 27px; --form_textarea_height: 182px; --form_textarea_padding_block: 26px; --form_textarea_padding_inline: 27px; ::-webkit-input-placeholder { color: var(--form_placeholder_color); } :-moz-placeholder { color: var(--form_placeholder_color); } ::-moz-placeholder { opacity: 1; color: var(--form_placeholder_color); } :-ms-input-placeholder { color: var(--form_placeholder_color); } .columns { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; margin-left: calc(var(--form_columns_gap) * -1); & > * { width: calc(50% - var(--form_columns_gap)); margin-left: var(--form_columns_gap); &.width1of3 { width: calc(33.333% - var(--form_columns_gap)); } &.width2of3 { width: calc(66.666% - var(--form_columns_gap)); } } } .line { margin-bottom: var(--form_line_gap); } .field { position: relative; } .input { display: block; width: 100%; height: var(--form_input_height); padding-inline: var(--form_input_padding_inline); font-family: var(--font_family_primary); font-size: var(--font_size); transition: border-color .2s linear; color: var(--light_color); border: 1px solid var(--form_border_color); border-radius: var(--form_border_radius); background: var(--form_bg_color); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); *:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 calc(var(--form_input_height) / 2) var(--form_bg_color) !important; } &:focus { border-color: var(--form_border_color_focus); } &.error { border-color: var(--form_error_color); } } textarea { display: block; width: 100%; height: var(--form_textarea_height); padding-block: var(--form_textarea_padding_block); padding-inline: var(--form_textarea_padding_inline); font-family: var(--font_family_primary); font-size: var(--font_size); resize: none; transition: border-color .2s linear; color: var(--light_color); border: 1px solid var(--form_border_color); border-radius: var(--form_border_radius); background: var(--form_bg_color); field-sizing: content; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); *:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 calc(var(--form_textarea_height) / 2) var(--form_bg_color) !important; } &:focus { border-color: var(--form_border_color_focus); } &.error { border-color: var(--form_error_color); } } .error_text { margin-top: var(--inner_gap_xxxs); font-size: var(--font_size_s); color: var(--form_error_color); } .address { padding: var(--inner_gap_xs); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--border_radius_max); .grid_row { --items_per_line: 2; --gap_x: var(--inner_gap_xs); --gap_y: var(--inner_gap_xs); &:has(> label:only-child) { --items_per_line: 1; } } label { display: block; cursor: pointer; input { display: none; &:checked + span { color: var(--dark_color); border-color: var(--light_color); background: var(--light_color); } } span { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; padding-block: var(--inner_gap_s); padding-inline: var(--block_padding_s); font-size: var(--font_size_s); transition: .2s linear; text-align: center; color: var(--light_color); border: 1px solid var(--form_border_color); border-radius: var(--border_radius_max); background: var(--form_bg_color); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } } } .submit { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; padding-top: 22px; .agree { width: 260px; max-width: 100%; } } .agree { font-size: var(--font_size_s); line-height: 157.143%; color: rgba(255, 255, 255, .50); } .submit_btn { width: 336px; max-width: 100%; height: var(--form_input_height); padding-inline: var(--inner_gap_l); transition: background .2s linear; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--primary_color); @media (hover: hover) and (pointer: fine) { &:hover { background: var(--secondary_color); } } } } /*---------------- Typography ----------------*/ .text_block { line-height: 162.5%; & > * { margin-bottom: var(--inner_gap); } & > :last-child { margin-bottom: 0 !important; } & > :first-child { margin-top: 0 !important; } h1 { margin-bottom: var(--block_padding); font-size: var(--font_size_title); font-weight: 500; line-height: calc(100% + 10px); } h2 { margin-bottom: var(--block_padding); font-size: 30px; font-weight: 500; line-height: calc(100% + 12px); } h3 { margin-bottom: var(--block_padding_s); font-size: 22px; font-weight: 500; line-height: calc(100% + 10px); &[data-number] { position: relative; padding-left: 30px; &:before { position: absolute; top: 5px; left: 0; display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 22px; font-size: var(--font_size); font-weight: 700; line-height: 1; content: attr(data-number); text-align: center; color: var(--light_color); border-radius: 50%; background: var(--primary_color); aspect-ratio: 1 / 1; } } } * + h1, * + h2, * + h3 { margin-top: var(--block_padding); } h1 + *, h2 + *, h3 + * { margin-top: 0 !important; } img { display: block; max-width: 100%; border-radius: var(--border_radius_s); } .slider { overflow: hidden; margin-block: var(--block_padding_l); border-radius: var(--border_radius_s); .swiper { --spaceBetween: 0; --slidesPerView: 1; } .image { display: block; border-radius: 0; background: var(--bg); aspect-ratio: 1 / .613; img { min-height: 420px; border-radius: 0; } } } table { width: 100%; margin-block: calc(var(--inner_gap_xxxs) * -1); border-spacing: 0 var(--inner_gap_xxxs); border-collapse: separate; tr { @media (hover: hover) and (pointer: fine) { &:hover { td { border-color: transparent; background: rgba(44, 51, 65, .06); } } } } td { padding-block: var(--inner_gap_s); padding-inline: var(--inner_gap); font-size: var(--font_size_s); font-weight: 500; line-height: calc(100% + 10px); transition: .2s linear; text-align: left; vertical-align: middle; border-block: 1px solid rgba(44, 51, 65, .08); &:first-child { border-left: 1px solid rgba(44, 51, 65, .08); border-top-left-radius: 4px; border-bottom-left-radius: 4px; } &:last-child { border-right: 1px solid rgba(44, 51, 65, .08); border-top-right-radius: 4px; border-bottom-right-radius: 4px; } &.grey { color: var(--grey_color); } &.aligncenter { text-align: center; } &.alignend { text-align: right; } } } blockquote, q { display: block; width: 100%; margin-block: 100px; padding-block: 50px; padding-inline: 109px 0; font-size: 36px; font-weight: 500; line-height: calc(100% + 11px); border-block: 1px solid rgba(205, 208, 221, .70); background: url(../images/ic_quote.svg) 0 50px no-repeat; } ul { display: flex; flex-direction: column; gap: var(--inner_gap_s); ul, ol { margin-top: var(--inner_gap_s); } & > li { position: relative; display: block; overflow: hidden; padding-left: 30px; list-style-type: none; &:before { position: absolute; top: .5lh; left: var(--inner_gap_xs); display: block; width: 6px; content: ''; transform: translateY(-50%); border-radius: 50%; background: var(--primary_color); aspect-ratio: 1 / 1; } } } ol { display: flex; flex-direction: column; gap: var(--inner_gap); counter-reset: li; ul, ol { margin-top: var(--inner_gap); } & > li { position: relative; display: block; overflow: hidden; padding-left: 30px; list-style-type: none; &:before { position: absolute; top: 0; left: 0; font-weight: 700; content: counter(li); counter-increment: li; color: var(--primary_color); } } } a { font-weight: 500; color: var(--primary_color); text-decoration-thickness: 1px; &:hover { text-decoration: none; } } } /*------------------- First section -------------------*/ .first_section { margin-block: var(--inner_gap_xs); .cont { display: flex; align-content: stretch; align-items: stretch; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap_xs); } .main_slider { width: calc(100% - 620px - var(--inner_gap_xs)); } .video { position: relative; width: 620px; max-width: 100%; line-height: calc(100% + 10px); cursor: pointer; color: var(--light_color); border-radius: 24px; &:after { position: absolute; inset: 0; display: block; content: ''; z-index: 1; pointer-events: none; border-radius: inherit; background: rgba(44, 51, 65, .20); } .name { position: absolute; top: 0; left: 0; width: 100%; padding: var(--block_padding); line-height: calc(100% + 10px); z-index: 3; } video { position: absolute; inset: 0; display: block; border-radius: inherit; } .icon { position: absolute; right: var(--block_padding); bottom: var(--block_padding); display: block; width: 40px; z-index: 3; aspect-ratio: 1 / 1; } } } /*----------------- Main slider -----------------*/ .main_slider { .swiper { border-radius: 28px; background-color: #ece9ec; --spaceBetween: 0; --slidesPerView: 1; .swiper-slide { position: relative; overflow: hidden; min-height: 800px; padding: var(--block_padding_xl); padding-bottom: 200px; } .swiper-controls { position: absolute; bottom: 0; left: 0; gap: 18px; width: 100%; padding: var(--block_padding_xl); } .swiper-pagination { gap: var(--inner_gap_xs); margin-right: 0; margin-left: 12px; --swiper-pagination-bullet-inactive-color: rgba(44, 51, 65, .08); --swiper-pagination-bullet-hover-color: rgba(44, 51, 65, .30); --swiper-pagination-bullet-active-color: rgba(44, 51, 65, .30); .swiper-pagination-bullet { border: none; --swiper-pagination-bullet-height: 7px; --swiper-pagination-bullet-width: 25px; --swiper-pagination-bullet-border-radius: var(--border_radius_xs); } } } .data { position: relative; display: flex; flex-direction: column; gap: var(--block_padding_s); width: 680px; max-width: 100%; z-index: 3; } .title { font-size: 64px; font-weight: 400; line-height: normal; } .desc { line-height: calc(100% + 10px); } .btn { display: inline-flex; align-items: center; justify-content: center; &, &:hover { text-decoration: none; } width: fit-content; height: 80px; margin-top: var(--inner_gap); padding-inline: 70px; transition: background .2s linear; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--primary_color); @media (hover: hover) and (pointer: fine) { &:hover { background: var(--secondary_color); } } } .image { position: absolute; inset: 0; display: block; z-index: 1; pointer-events: none; } } /*------------- Catalog -------------*/ .catalog { .grid_row { --items_per_line: 3; --gap_x: var(--inner_gap_xs); --gap_y: var(--inner_gap_xs); } .category { position: relative; display: flex; flex-direction: column; gap: var(--inner_gap); min-height: 280px; padding: var(--block_padding_s); transition: .2s linear; text-decoration: none; color: currentColor; border: 1px solid transparent; border-radius: var(--border_radius); background: var(--light_color); & > * { transition: opacity .2s linear; } .name { font-size: var(--font_size_title_s); } .btn { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: var(--inner_gap_xs); width: fit-content; margin-top: auto; font-size: var(--font_size_s); line-height: 157.143%; color: var(--grey_color); .icon { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 40px; color: var(--light_color); border-radius: 50%; background: var(--primary_color); aspect-ratio: 1 / 1; svg { display: block; width: 20px; aspect-ratio: 1 / 1; } } } .thumb { position: absolute; right: var(--block_padding_s); bottom: var(--block_padding_s); display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 180px; z-index: 1; pointer-events: none; aspect-ratio: 1 / 1; img { display: block; max-width: 100%; max-height: 100%; } } .hover { position: absolute; inset: 0; display: flex; align-content: center; align-items: center; flex-direction: column; justify-content: center; gap: var(--inner_gap_s); padding: var(--block_padding); z-index: 3; text-align: center; opacity: 0; color: var(--light_color); background: url(../images/bg_catalog_item_hover.svg) 50% calc(100% - var(--block_padding))/158px auto no-repeat; .name, .desc { width: 480px; max-width: 100%; } .btn { margin-bottom: 39px; .icon { color: var(--dark_color); background: var(--light_color); } } } @media (hover: hover) and (pointer: fine) { &:hover { border-radius: 180px; background: var(--primary_color); & > * { opacity: 0; } .hover { opacity: 1; } } } } } .serviceitem { min-height: 300px; .top { flex-grow: 1; background-color: var(--primary_color); } &.noimage { .name, .desc { position: static; } .name:not(:last-child) { padding-bottom: 0; } } } /*---------------------- Popular services ----------------------*/ .popular_services { .swiper { overflow: visible; --spaceBetween-0: var(--inner_gap_xs); --slidesPerView-0: auto; --spaceBetween-768: var(--inner_gap_xs); --slidesPerView-768: 2; --spaceBetween-1024: var(--inner_gap_xs); --slidesPerView-1024: 3; --spaceBetween-1280: var(--inner_gap_xs); --slidesPerView-1280: 4; --spaceBetween-1440: var(--inner_gap_xs); --slidesPerView-1440: 5; &:not(.swiper-initialized) { .swiper-wrapper { gap: var(--spaceBetween-1440); } .swiper-slide { width: calc(100% / var(--slidesPerView-1440) - var(--spaceBetween-1440)); } } .swiper-slide { visibility: hidden; transition: opacity .2s linear, visibility .2s linear; pointer-events: none; opacity: 0; &.visible { visibility: visible; pointer-events: auto; opacity: 1; } } } .service { display: flex; flex-direction: column; padding: var(--inner_gap_xxxs); transition: .2s linear; text-decoration: none; color: currentColor; border: 1px solid rgba(44, 51, 65, .10); border-radius: 15px; background: var(--light_color); .top { position: relative; color: var(--light_color); border-radius: 12px; } .name { position: absolute; top: 0; left: 0; width: 100%; padding: var(--inner_gap_l); font-size: 24px; line-height: calc(100% + 8px); z-index: 3; } .desc { position: absolute; bottom: 0; left: 0; width: 100%; padding: var(--inner_gap_l); font-size: var(--font_size_s); line-height: calc(100% + 10px); z-index: 3; } &.noimage { .name, .desc { position: static; } .name:not(:last-child) { padding-bottom: 0; } } .thumb { display: block; border-radius: 12px; background: var(--bg); aspect-ratio: 1 / 1.201; &:after { position: absolute; inset: 0; display: block; content: ''; border-radius: inherit; background: rgba(44, 51, 65, .70); } } .bottom { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; padding: var(--inner_gap); } .price { font-size: var(--font_size_xl); font-weight: 500; } .link { transition: color .2s linear; color: var(--grey_color); } @media (hover: hover) and (pointer: fine) { &:hover { color: var(--light_color); background: var(--primary_color); .link { color: var(--light_color); } } } } } /*--------- FAQ ---------*/ .FAQ { .cont { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; } .block_head { width: 412px; max-width: 100%; margin-bottom: 0; } .btns { display: flex; flex-direction: column; gap: var(--inner_gap_xs); width: 360px; max-width: 100%; padding-top: var(--block_padding_s); border-top: 1px solid rgba(44, 51, 65, .10); .btn { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: fit-content; height: 50px; padding-inline: var(--block_padding); transition: background .2s linear; text-align: center; text-decoration: none; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--secondary_color); &.primary { background: var(--primary_color); } @media (hover: hover) and (pointer: fine) { &:hover { background: var(--primary_color); &.primary { background: var(--secondary_color); } } } } } .accordion { width: calc(100% - 500px); max-width: 100%; padding-top: var(--inner_gap); } } /*-------------------- Contacts block --------------------*/ .contacts_block form.form { padding-top: 0; } .contacts_block { position: relative; padding-block: 100px 116px; border-radius: var(--border_radius_l); .cont { position: relative; display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; z-index: 3; &.center { justify-content: center; } } .data { width: 460px; max-width: 100%; padding: 5px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 24px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); .title { padding-block: var(--inner_gap); padding-inline: 35px; font-size: 22px; color: var(--light_color); } .info { display: flex; flex-direction: column; gap: var(--inner_gap_l); padding-block: 35px var(--block_padding); padding-inline: 35px; border: 1px solid rgba(44, 51, 65, .10); border-radius: var(--border_radius); background: var(--light_color); } .contacts { display: flex; flex-direction: column; gap: var(--inner_gap_xxs); .address { font-size: var(--font_size_s); } .phone { font-size: 22px; a { white-space: nowrap; text-decoration: none; color: currentColor; } } } .item { display: flex; flex-direction: column; gap: var(--inner_gap_xxs); padding-top: var(--inner_gap_l); border-top: 1px solid rgba(44, 51, 65, .10); .label { font-size: var(--font_size_s); color: var(--grey_color); } .val { display: flex; flex-direction: column; gap: var(--inner_gap_xxxs); line-height: calc(100% + 10px); a { width: fit-content; white-space: nowrap; text-decoration: none; color: currentColor; } } &.email { .val { a { color: var(--yellow_color); border-bottom: 1px solid; } } } &.messengers { .label { margin-bottom: 5px; } .val { display: flex; align-content: flex-start; align-items: flex-start; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 6px; a { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--inner_gap_xs); height: 50px; padding-inline: var(--block_padding_s); font-size: var(--font_size_s); transition: background .2s linear; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--primary_color); .icon { display: block; width: 22px; aspect-ratio: 1 / 1; } @media (hover: hover) and (pointer: fine) { &:hover { background: var(--secondary_color); } } } } } } } .form { width: 680px; max-width: 100%; padding-top: var(--inner_gap); .title { margin-bottom: var(--inner_gap); font-size: var(--font_size_title_l); line-height: calc(100% + 10px); color: var(--light_color); } .desc { margin-bottom: var(--block_padding_s); line-height: calc(100% + 10px); color: var(--light_color); } } .bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: var(--border_radius_l); &:after { position: absolute; inset: 0; display: block; content: ''; border-radius: var(--border_radius_l); background: rgba(44, 51, 65, .68); } } } /*------------- Doctors -------------*/ .doctors { .grid_row { --items_per_line: 4; --gap_x: var(--inner_gap_xxs); --gap_y: var(--inner_gap_xxs); } .swiper { overflow: visible; --spaceBetween-0: var(--inner_gap_xxs); --slidesPerView-0: auto; --spaceBetween-768: var(--inner_gap_xxs); --slidesPerView-768: 3; --spaceBetween-1024: var(--inner_gap_xxs); --slidesPerView-1024: 4; &:not(.swiper-initialized) { .swiper-wrapper { gap: var(--spaceBetween-1024); } .swiper-slide { width: calc(100% / var(--slidesPerView-1024) - var(--spaceBetween-1024)); } } .swiper-slide { visibility: hidden; transition: opacity .2s linear, visibility .2s linear; pointer-events: none; opacity: 0; &.visible { visibility: visible; pointer-events: auto; opacity: 1; } } } .doctor { position: relative; display: flex; flex-direction: column; padding: var(--inner_gap_xxxs); transition: .2s linear; text-decoration: none; color: currentColor; border: 1px solid rgba(44, 51, 65, .10); border-radius: 16px; background: var(--light_color); .inner { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: var(--block_padding_s); z-index: 3; border-radius: 16px; background: var(--light_color); } .name { font-size: var(--font_size_xl); font-weight: 500; line-height: calc(100% + 6px); } .post { font-size: var(--font_size_s); line-height: calc(100% + 6px); color: var(--grey_color); } .location { position: absolute; bottom: var(--inner_gap_xs); left: var(--inner_gap_xs); display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 6px; width: max-content; max-width: calc(100% - var(--inner_gap_xs) * 2); padding-block: var(--inner_gap_xxs); padding-inline: var(--inner_gap); font-size: var(--font_size_s); z-index: 3; color: var(--light_color); border-radius: var(--border_radius_max); background: rgba(44, 51, 65, .80); .icon { display: block; width: 26px; aspect-ratio: 1 / 1; } span { max-width: calc(100% - 26px - 6px); } } .photo { display: block; margin-block: auto calc(var(--block_padding_s) * -1); margin-inline: calc(var(--block_padding_s) * -1); border-radius: var(--border_radius_xs); aspect-ratio: 1 / 1; } .btns { position: absolute; bottom: 0; left: -1px; display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--inner_gap_xxxs); width: calc(100% + 2px); padding-block: calc(6px + var(--inner_gap)) var(--inner_gap_xs); padding-inline: var(--inner_gap_xs); z-index: 1; transition: .2s linear; opacity: 0; border-radius: 0 0 16px 16px; background: var(--primary_color); .btn { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: calc(50% - var(--inner_gap_xxxs) / 2); height: 50px; transition: .2s linear; text-align: center; text-decoration: none; color: var(--dark_color); border-radius: var(--border_radius_max); background: var(--light_color); @media (hover: hover) and (pointer: fine) { &:hover { color: var(--light_color); background: var(--secondary_color); } } } } @media (hover: hover) and (pointer: fine) { &:hover { z-index: 5; border-color: var(--primary_color); background: var(--primary_color); .btns { transform: translateY(calc(100% - var(--inner_gap))); opacity: 1; } } } } } /*------------------- Contacts info -------------------*/ .contacts_info { .row { display: flex; align-content: stretch; align-items: stretch; flex-wrap: wrap; justify-content: space-between; gap: var(--block_padding); } .data { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap_l) var(--inner_gap); width: 540px; max-width: 100%; padding-top: var(--inner_gap_xxxs); .title { width: 100%; margin-bottom: 6px; font-size: var(--font_size_title_l); font-weight: 400; line-height: normal; } .btns { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: 5px; width: 100%; margin-bottom: 6px; .btn { width: calc(50% - 3px); padding-block: var(--inner_gap_s); padding-inline: var(--block_padding); font-size: var(--font_size_s); transition: .2s linear; border-radius: var(--border_radius_max); background: rgba(44, 51, 65, .10); @media (hover: hover) and (pointer: fine) { &:hover { color: var(--light_color); background: var(--secondary_color); } } &.active { color: var(--light_color); background: var(--secondary_color); } } } .address_data { display: none; &.show { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap_l) var(--inner_gap); } } .item { width: 260px; max-width: 100%; .label { font-size: var(--font_size_s); color: var(--grey_color); } &.phone { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; width: 100%; font-size: 26px; .label, .val { width: 260px; max-width: 100%; } a { white-space: nowrap; text-decoration: none; color: currentColor; } } &.email { display: flex; flex-direction: column; gap: var(--inner_gap_xxs); .val { line-height: calc(100% + 10px); a { color: var(--yellow_color); text-decoration-thickness: 1px; } } } &.email { display: flex; flex-direction: column; gap: var(--inner_gap_xxs); .val { line-height: calc(100% + 10px); a { color: var(--yellow_color); text-decoration-thickness: 1px; } } } &.work_time { display: flex; flex-direction: column; gap: var(--inner_gap_xxs); .val { display: flex; flex-direction: column; gap: var(--inner_gap_xxxs); line-height: calc(100% + 10px); } } &.info { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap); width: 100%; .label, .val { width: 260px; max-width: 100%; } .val { display: flex; flex-direction: column; gap: 14px; a { transition: color .2s linear; text-decoration: none; color: currentColor; border-bottom: 1px dotted; @media (hover: hover) and (pointer: fine) { &:hover { color: var(--primary_color); } } } } } &.messengers { width: 100%; .val { display: flex; align-content: flex-start; align-items: flex-start; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 6px; a { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--inner_gap_xs); height: 50px; padding-inline: var(--block_padding_s); font-size: var(--font_size_s); transition: .2s linear; text-decoration: none; color: var(--primary_color); border-radius: var(--border_radius_max); background: rgba(34, 197, 197, .16); .icon { display: block; width: 22px; aspect-ratio: 1 / 1; } @media (hover: hover) and (pointer: fine) { &:hover { color: var(--light_color); background: var(--primary_color); } } } } } } .divider { width: 100%; height: 1px; background: rgba(44, 51, 65, .10); } } .map_wrap { overflow: hidden; width: calc(100% - 540px - var(--block_padding)); padding: var(--inner_gap_xxxs); border: 1px solid var(--light_color); border-radius: var(--border_radius_xl); background: var(--light_color); .map { display: none; border: 1px solid var(--light_color); border-radius: var(--border_radius_l); background: var(--bg); &.show { display: block; } } } .requisites { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; gap: var(--block_padding) 148px; margin-top: var(--inner_gap); padding-top: var(--inner_gap_l); color: var(--grey_color); border-top: 1px solid rgba(44, 51, 65, .10); .label { font-size: 14px; } .col { font-size: var(--font_size_xs); line-height: calc(100% + 6px); &:last-child { br:first-child { display: none; } } a { color: var(--yellow_color); } } } } /*------------------ Article info ------------------*/ .article_info { padding: var(--block_padding_l); border-radius: var(--border_radius_xl); background: var(--light_color); } /*------------------- Category head -------------------*/ .category_head { margin-bottom: 30px; &:has(+.services) { margin-bottom: -70px; } .data { position: relative; overflow: hidden; min-height: 500px; padding-block: var(--block_padding_xl) calc(var(--block_padding_xl) + 70px); color: var(--light_color); border-radius: var(--border_radius_l); background-color: #7A7A79; } .cont { position: relative; z-index: 3; } .title { font-size: 64px; font-weight: 400; line-height: normal; } .desc { width: 580px; max-width: 100%; margin-top: var(--block_padding_s); font-size: var(--font_size_l); line-height: calc(100% + 10px); } .image { position: absolute; inset: 0; display: block; z-index: 1; pointer-events: none; border-radius: var(--border_radius_l); &:after { position: absolute; inset: 0; display: block; content: ''; border-radius: inherit; background: linear-gradient(90deg, rgba(44, 51, 65, .90) 0%, rgba(44, 51, 65, .30) 100%); } } } /*-------------- Services --------------*/ .services { position: relative; z-index: 3; .list { display: flex; flex-direction: column; gap: var(--inner_gap_xxxs); } .service { position: relative; display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap); padding: var(--block_padding_s); transition: .2s linear; text-decoration: none; color: currentColor; border-radius: 16px; background: var(--light_color); .arr { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 40px; transition: .2s linear; color: var(--primary_color); border: 1px solid rgba(34, 197, 197, .30); border-radius: 50%; aspect-ratio: 1 / 1; svg { display: block; width: 20px; aspect-ratio: 1 / 1; } } .info { display: flex; flex-direction: column; gap: 12px; width: 440px; max-width: 100%; } .name { font-size: 26px; line-height: calc(100% + 6px); transition: color .2s linear; color: var(--primary_color); } .price { font-size: var(--font_size_xl); font-weight: 500; } .desc { width: calc(100% - 480px - var(--inner_gap) * 2 - var(--block_padding_s)); margin-left: auto; font-size: var(--font_size_s); line-height: calc(100% + 10px); } @media (hover: hover) and (pointer: fine) { &:hover { color: var(--light_color); background: var(--primary_color); .arr { color: var(--dark_color); border-color: var(--light_color); background: var(--light_color); } .name { color: var(--light_color); } } } } } /*------------------- Category info -------------------*/ .category_info { .data { padding: var(--block_padding_l); border-radius: 16px; background: var(--light_color); } .text_block { width: 880px; max-width: 100%; } .accordion { gap: 0; margin-top: var(--block_padding_l); } .accordion_item { border-inline: none; border-radius: 0; .head { gap: var(--inner_gap); padding-block: var(--block_padding_s); padding-inline: 0; .arr { width: 36px; color: var(--dark_color); background: rgba(44, 51, 65, .12); svg { width: 20px; } } .title { width: calc(100% - 36px - var(--inner_gap)); font-size: 30px; font-weight: 500; line-height: calc(100% + 12px); } } .data { padding-block: var(--inner_gap_xs) var(--block_padding_l); padding-inline: 0; border: none; border-radius: 0; } } .accordion_item + .accordion_item { margin-top: -1px; } } /*----------------- Doctor info -----------------*/ .doctor_info { .cont { display: flex; align-content: stretch; align-items: stretch; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap_xs); } .order_btn { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--inner_gap_xs); width: 100%; min-height: 80px; padding-block: var(--inner_gap_s); padding-inline: 70px; transition: background .2s linear; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--secondary_color); .icon { display: block; width: 20px; aspect-ratio: 1 / 1; } @media (hover: hover) and (pointer: fine) { &:hover { background: var(--primary_color); } } } .col_left { position: relative; display: flex; flex-direction: column; gap: var(--inner_gap); width: 620px; max-width: 100%; .sticky { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--inner_gap); } .photo { display: block; border: 1px solid rgba(44, 51, 65, .10); border-radius: 24px; background: var(--light_color); aspect-ratio: 1 / 1.290; } } .col_main { display: flex; flex-direction: column; gap: var(--inner_gap); width: calc(100% - 620px - var(--inner_gap_xs)); .data { padding: var(--block_padding_xl); border: 1px solid rgba(44, 51, 65, .10); border-radius: 24px; background: var(--light_color); .name { /*width: 560px;*/ max-width: 100%; font-size: var(--font_size_title_l); font-weight: 400; line-height: 135%; } .info { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: var(--inner_gap) 54px; margin-top: var(--inner_gap_l); padding-bottom: var(--block_padding); line-height: calc(100% + 10px); border-bottom: 1px solid rgba(44, 51, 65, .14); .experience { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: var(--inner_gap_xs); .val { padding-block: var(--inner_gap_xxxs); padding-inline: 12px; font-weight: 500; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--primary_color); } } .clinic { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 14px; .label { color: var(--grey_color); } a { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 6px; transition: color .2s linear; text-decoration: none; color: currentColor; .icon { display: block; width: 26px; color: var(--primary_color); aspect-ratio: 1 / 1; } @media (hover: hover) and (pointer: fine) { &:hover { color: var(--primary_color); } } } } .reviews_count { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 14px; .label { color: var(--grey_color); } } } .education { margin-top: var(--block_padding); .title { margin-bottom: 28px; font-size: 28px; line-height: calc(100% + 4px); } .sub_title { margin-top: var(--inner_gap_l); margin-bottom: 18px; line-height: calc(100% + 10px); } .items { display: flex; flex-direction: column; gap: var(--inner_gap_s); line-height: calc(100% + 10px); & > * { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: nowrap; justify-content: space-between; gap: 14px; } .icon { align-self: center; width: 16px; min-width: 16px; color: var(--primary_color); aspect-ratio: 1 / 1; } .year { white-space: nowrap; } .desc { width: 100%; font-size:14px; color: var(--grey_color); } } } } .video { position: relative; cursor: pointer; color: var(--light_color); border-radius: 24px; &:after { position: absolute; inset: 0; display: block; content: ''; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(0deg, rgba(44, 51, 65, .42) 0%, rgba(44, 51, 65, .42) 100%); } .name { position: absolute; top: 0; left: 0; width: 600px; max-width: 100%; padding: var(--block_padding); line-height: calc(100% + 10px); z-index: 3; } video { display: block; min-height: 260px; border: 1px solid rgba(44, 51, 65, .10); border-radius: 24px; aspect-ratio: 1 / .424; } .icon { position: absolute; right: var(--block_padding); bottom: var(--block_padding); display: block; width: 40px; z-index: 3; aspect-ratio: 1 / 1; } } .before_after, .certs, .reviews { overflow: hidden; padding: var(--block_padding_xl); border: 1px solid rgba(44, 51, 65, .10); border-radius: 24px; background: var(--light_color); } } } /*------------------ Before after ------------------*/ .before_after { .swiper { overflow: visible; --spaceBetween-0: var(--inner_gap_xs); --slidesPerView-0: auto; --spaceBetween-768: var(--inner_gap_xs); --slidesPerView-768: 2; --spaceBetween-1024: var(--inner_gap_xs); --slidesPerView-1024: 2; &:not(.swiper-initialized) { .swiper-wrapper { gap: var(--spaceBetween-1024); } .swiper-slide { width: calc(100% / var(--slidesPerView-1024) - var(--spaceBetween-1024)); } } .swiper-slide { visibility: hidden; transition: opacity .2s linear, visibility .2s linear; pointer-events: none; opacity: 0; &.visible { visibility: visible; pointer-events: auto; opacity: 1; } } } .swiper-controls { justify-content: flex-end; margin-top: var(--inner_gap_l); } .slider { position: relative; --position: 50%; overflow: hidden; border-radius: 12px; aspect-ratio: 1 / .796; .image { position: absolute; inset: 0; z-index: 1; &.after { width: var(--position); z-index: 2; } img { object-position: left; } } .range { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; cursor: pointer; opacity: 0; } .handle { position: absolute; left: var(--position); display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 40px; height: 40px; margin-block: auto; z-index: 4; transform: translateX(-50%); pointer-events: none; border-radius: 50%; background: var(--light_color); inset-block: 0; aspect-ratio: 1 / 1; .icon { display: block; width: 14px; aspect-ratio: 1 / 1; } } } } /*----------- Certs -----------*/ .certs { .swiper { overflow: visible; --spaceBetween-0: var(--inner_gap); --slidesPerView-0: auto; --spaceBetween-768: var(--inner_gap_l); --slidesPerView-768: 2; --spaceBetween-1280: var(--inner_gap_l); --slidesPerView-1280: 3; &:not(.swiper-initialized) { .swiper-wrapper { gap: var(--spaceBetween-1280); } .swiper-slide { width: calc(100% / var(--slidesPerView-1280) - var(--spaceBetween-1280)); } } .swiper-slide { visibility: hidden; transition: opacity .2s linear, visibility .2s linear; pointer-events: none; opacity: 0; &.visible { visibility: visible; pointer-events: auto; opacity: 1; } } } .swiper-controls { justify-content: flex-end; margin-top: var(--inner_gap_l); } .cert { position: relative; display: flex; flex-direction: column; padding: var(--inner_gap_xxxs); text-decoration: none; color: var(--light_color); border: 1px solid rgba(44, 51, 65, .10); border-radius: 12px; background: var(--light_color); .thumb { position: relative; display: block; border-radius: var(--border_radius_xs); aspect-ratio: 1 / 1.063; &:after { position: absolute; inset: 0; display: block; content: ''; z-index: 1; transition: opacity .2s linear; opacity: 0; border-radius: inherit; background: rgba(44, 51, 65, .65); } } .icon { position: absolute; inset: 0; display: block; width: 20px; margin: auto; z-index: 3; transition: opacity .2s linear; opacity: 0; aspect-ratio: 1 / 1; } .desc { position: absolute; bottom: 0; left: 0; width: 100%; padding: var(--inner_gap_l); font-size: var(--font_size_s); line-height: calc(100% + 10px); z-index: 3; transition: opacity .2s linear; opacity: 0; } @media (hover: hover) and (pointer: fine) { &:hover { .thumb:after, .icon, .desc { opacity: 1; } } } } } /*------------- Reviews -------------*/ .reviews { .swiper { overflow: visible; --spaceBetween-0: var(--inner_gap); --slidesPerView-0: auto; --spaceBetween-768: var(--inner_gap_l); --slidesPerView-768: 2; --spaceBetween-1024: var(--inner_gap_l); --slidesPerView-1024: 2; &:not(.swiper-initialized) { .swiper-wrapper { gap: var(--spaceBetween-1024); } .swiper-slide { width: calc(100% / var(--slidesPerView-1024) - var(--spaceBetween-1024)); } } .swiper-slide { visibility: hidden; transition: opacity .2s linear, visibility .2s linear; pointer-events: none; opacity: 0; &.visible { visibility: visible; pointer-events: auto; opacity: 1; } } } .swiper-controls { justify-content: flex-end; margin-top: var(--inner_gap_l); } .review { display: flex; flex-direction: column; .name { font-size: 22px; font-weight: 500; line-height: 135%; } .date { margin-top: 12px; line-height: calc(100% + 10px); } .text { /* display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; */ margin-top: var(--inner_gap_l); padding-top: var(--inner_gap_l); line-height: calc(100% + 10px); /* text-overflow: ellipsis; */ border-top: 1px solid rgba(44, 51, 65, .14); /* -webkit-line-clamp: 6; */ &.show_full { display: block; } } .spoler_btn { width: fit-content; margin-top: var(--inner_gap_s); line-height: calc(100% + 10px); color: var(--yellow_color); border-bottom: 1px solid; span + span { display: none; } &.active { span { display: none; } span + span { display: block; } } } } } /*------------------ Service head ------------------*/ .service_head { margin-bottom: var(--block_padding_xl); .data { position: relative; overflow: hidden; min-height: 740px; padding-block: var(--block_padding_xl); color: var(--light_color); border-radius: var(--border_radius_l); .cont { position: relative; display: flex; flex-direction: column; gap: var(--block_padding_s); z-index: 3; } .title { width: 880px; max-width: 100%; font-size: 64px; font-weight: 400; line-height: normal; } .desc { width: 880px; max-width: 100%; margin-top: 0; line-height: calc(100% + 10px); ul { margin-top: var(--block_padding_s); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 880px; max-width: 100%; line-height: calc(100% + 10px); & > * { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap_xxs); } li { &::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' style='&%2310;'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.3307 10C18.3307 14.6024 14.5997 18.3334 9.9974 18.3334C5.39502 18.3334 1.66406 14.6024 1.66406 10C1.66406 5.39765 5.39502 1.66669 9.9974 1.66669C14.5997 1.66669 18.3307 5.39765 18.3307 10ZM13.356 7.47475C13.6001 7.71882 13.6001 8.11455 13.356 8.3586L9.18931 12.5253C8.94523 12.7694 8.54956 12.7694 8.30545 12.5253L6.63879 10.8586C6.39471 10.6145 6.39471 10.2189 6.63879 9.97477C6.88286 9.73069 7.2786 9.73069 7.52267 9.97477L8.7474 11.1994L10.6097 9.3371L12.4721 7.47475C12.7162 7.23067 13.1119 7.23067 13.356 7.47475Z' fill='currentColor' style='&%2310; fill: %2322c5c5;&%2310;'/%3E%3C/svg%3E"); display: block; width: 20px; height: 20px; color: var(--primary_color); aspect-ratio: 1 / 1; } } } } .pluses { display: flex; flex-direction: column; gap: 12px; width: 880px; max-width: 100%; line-height: calc(100% + 10px); & > * { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap_xxs); } .icon { display: block; width: 20px; color: var(--primary_color); aspect-ratio: 1 / 1; } span { width: calc(100% - 20px - var(--inner_gap_xxs)); } } .buy { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: var(--block_padding_l); width: 880px; max-width: 100%; padding-top: var(--block_padding); border-top: 1px solid rgba(255, 255, 255, .12); .price { display: flex; flex-direction: column; gap: 5px; .label { line-height: calc(100% + 10px); color: rgba(255, 255, 255, .50); } .val { font-size: var(--font_size_title); } } .btn { height: 80px; padding-inline: 70px; transition: background .2s linear; border-radius: var(--border_radius_max); background: var(--primary_color); @media (hover: hover) and (pointer: fine) { &:hover { background: var(--secondary_color); } } } } } .image { position: absolute; inset: 0; display: block; z-index: 1; pointer-events: none; &:after { position: absolute; inset: 0; display: block; content: ''; z-index: 1; background: linear-gradient(90deg, #2c3341 15%, rgba(44, 51, 65, .40) 100%); } } } /*------------------ Service desc ------------------*/ .service_desc { .cont { display: flex; flex-direction: column; gap: var(--block_padding_l); } .row { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: var(--block_padding_l); } .title { position: sticky; top: 0; width: 400px; max-width: 100%; font-size: var(--font_size_title); font-weight: 400; line-height: normal; } .text_block { width: calc(100% - 400px - var(--block_padding_xl)); &.l_w { width: 100%; } } } /*----------------- Prices grid -----------------*/ .prices_grid { .grid_row { --items_per_line: 4; --gap_x: var(--inner_gap_xxs); --gap_y: var(--inner_gap_xxs); } .item { padding: var(--inner_gap); transition: .2s linear; border: 1px solid rgba(44, 51, 65, .12); border-radius: var(--border_radius_s); background: var(--light_color); &, .item_body { display: flex; flex-direction: column; gap: var(--inner_gap); } .item_body { flex-grow: 1; } .sticker { width: fit-content; margin-bottom: -6px; padding-block: var(--inner_gap_xxs); padding-inline: var(--inner_gap); font-size: var(--font_size_s); transition: background .2s linear; border-radius: var(--border_radius_max); background: rgba(44, 51, 65, .12); } .name { font-size: 32px; } .features { font-size: var(--font_size_s); line-height: calc(100% + 8px); transition: border-color .2s linear; border-bottom: 1px solid rgba(44, 51, 65, .10); & > * { display: flex; align-content: center; align-items: center; flex-wrap: nowrap; justify-content: space-between; padding-block: var(--inner_gap_xs); transition: border-color .2s linear; border-top: 1px solid rgba(44, 51, 65, .10); } .label { transition: color .2s linear; color: var(--grey_color); } } .price { font-size: 26px; line-height: calc(100% + 6px); } .btn { width: 100%; height: 60px; padding-inline: var(--block_padding); transition: .2s linear; color: var(--light_color); border-radius: 100px; background: #22c5c5; } @media (hover: hover) and (pointer: fine) { &:hover { color: var(--light_color); background: var(--primary_color); .sticker { background: rgba(255, 255, 255, .12); } .features { border-color: rgba(255, 255, 255, .10); & > * { border-color: rgba(255, 255, 255, .10); } .label { color: var(--light_color); } } .btn { color: var(--dark_color); background: var(--light_color); } } } } } /*----------------- Prices list -----------------*/ .prices_list { .list { display: flex; flex-direction: column; gap: var(--inner_gap_xxxs); .exp { margin-top: var(--inner_gap); font-size: var(--font_size_s); line-height: calc(100% + 8px); color: var(--grey_color); } } .item { position: relative; display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--block_padding_s); padding-block: var(--inner_gap_s); padding-inline: var(--block_padding_s); line-height: calc(100% + 12px); border: 1px solid rgba(44, 51, 65, .10); border-radius: 16px; background: rgba(255, 255, 255, .80); .label { width: calc(100% - 262px - var(--block_padding_s)); } .price { width: 262px; max-width: 100%; font-weight: 600; text-align: right; } .btn { position: absolute; top: 0; right: 5px; bottom: 0; width: 160px; height: 50px; margin-block: auto; transition: .2s linear; transform: translateX(-100%); opacity: 0; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--yellow_color); @media (hover: hover) and (pointer: fine) { &:hover { background: var(--primary_color); } } } @media (hover: hover) and (pointer: fine) { &:hover { width: calc(100% + 175px); margin-right: -175px; padding-inline: var(--inner_gap) calc(175px + var(--inner_gap)); color: var(--light_color); border-radius: var(--border_radius_max); background: var(--secondary_color); .btn { transform: translateX(0); opacity: 1; } } } } } /*----------------------- Prices conditions -----------------------*/ .prices_conditions { .grid_row { --gap_x: var(--inner_gap_xs); --gap_y: var(--inner_gap_xs); } .item { display: flex; flex-direction: column; gap: var(--inner_gap); padding: var(--inner_gap_xs); transition: border-color .2s linear; border: 1px solid rgba(44, 51, 65, .12); border-radius: var(--border_radius_s); background: var(--light_color); .price { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; padding-block: var(--inner_gap_xs); padding-inline: var(--block_padding_s); font-size: 22px; color: var(--light_color); border-radius: var(--border_radius_xs); background: var(--primary_color); .exp { font-size: var(--font_size_s); } } .name { padding-inline: var(--inner_gap); font-size: 32px; } .desc { position: relative; margin-bottom: auto; padding-inline: var(--inner_gap); font-size: var(--font_size_s); line-height: calc(100% + 8px); z-index: 3; color: var(--grey_color); &:last-child { margin-bottom: 0; } } .thumb { position: relative; display: block; margin-inline: calc(var(--inner_gap_xs) * -1); margin-top: -38px; z-index: 1; border-radius: var(--border_radius_s); background: var(--light_color); aspect-ratio: 1 / .813; &:before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100px; content: ''; border-radius: inherit; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .00) 100%); } } .btn { height: 71px; margin-block: calc(var(--inner_gap_xs) * -1 - var(--inner_gap)) calc(var(--inner_gap_xs) * -1); margin-inline: calc(var(--inner_gap_xs) * -1); padding-top: var(--inner_gap_xs); transition: .2s linear; border-radius: 0 0 var(--border_radius_s) var(--border_radius_s); } @media (hover: hover) and (pointer: fine) { &:hover { border-color: var(--primary_color); .btn { color: var(--light_color); background: var(--primary_color); } } } } } /*----------------------------------- Indications/Contraindications -----------------------------------*/ .indications_contraindications { .grid_row { --items_per_line: 2; } .item { padding: var(--inner_gap_xs); border-radius: 18px; background: var(--light_color); } .title { padding-block: var(--inner_gap_s); padding-inline: var(---block_padding_s); font-size: 24px; font-weight: 500; text-align: center; border-radius: 12px; background: rgba(44, 51, 65, .12); .indications & { color: var(--light_color); background: var(--primary_color); } } .items { display: flex; flex-direction: column; gap: 12px; padding: var(--block_padding_s); line-height: calc(100% + 10px); & > * { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; .icon { display: block; gap: var(--inner_gap_xs); width: 20px; aspect-ratio: 1 / 1; .indications & { color: var(--primary_color); } .contraindications & { color: #e33f3f; } } span { width: calc(100% - 20px - var(--inner_gap_xs)); } } } } /*-------------------- Services steps --------------------*/ .services_steps { .data { position: relative; padding-block: var(--block_padding_xl); color: var(--light_color); border: 1px solid rgba(44, 51, 65, .10); border-radius: 24px; background: var(--secondary_color); } .block_head { gap: var(--block_padding); .desc { color: var(--light_color); } } .grid_row { counter-reset: number; --items_per_line: 4; --gap_x: 72px; --gap_y: 72px; } .item { position: relative; display: flex; flex-direction: column; &:after { position: absolute; top: 20px; left: 100%; display: block; width: calc(var(--gap_x) - var(--inner_gap)); height: 1px; content: ''; background: var(--primary_color); } &:nth-child(4n):after, &:last-child:after { display: none; } &:last-child { .number { .val { &:after { display: none; } } } } .number { position: relative; overflow: hidden; width: 100%; margin-bottom: 14px; .val { position: relative; display: block; width: fit-content; padding-block: 7px; padding-inline: var(--inner_gap_s); line-height: calc(100% + 10px); border-radius: 8px; background: var(--primary_color); &:after { position: absolute; top: 0; bottom: 0; left: 100%; display: block; width: 100vw; height: 1px; margin-block: auto; margin-left: var(--inner_gap); content: ''; background: var(--primary_color); } } span:after { content: counter(number); counter-increment: number; } } .name { font-size: 22px; line-height: calc(100% + 6px); } .desc { margin-top: var(--inner_gap); font-size: var(--font_size_s); line-height: calc(100% + 8px); color: rgba(255, 255, 255, .50); } } } /*---------------- About info ----------------*/ .about_info { .data { min-height: 630px; padding-block: 100px 238px; padding-inline: var(--block_padding_xl); border-radius: var(--border_radius_l); background: linear-gradient(270deg, rgba(255, 255, 255, .00) 30%, rgba(255, 255, 255, .50) 100%), linear-gradient(0deg, #dbd8de 0%, #dbd8de 100%), linear-gradient(270deg, rgba(255, 255, 255, .00) 30%, rgba(255, 255, 255, .50) 100%), lightgray -60.592px -316.178px / 214.183% 223.018% no-repeat; } .info { display: flex; flex-direction: column; gap: var(--block_padding); .title { font-size: 72px; font-weight: 400; line-height: 120%; max-width: 850px; } .desc { width: 620px; max-width: 100%; line-height: calc(100% + 10px); color: var(--grey_color); } } .row { display: flex; align-content: flex-end; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap); margin-top: -138px; padding-inline: var(--block_padding_xl); } .video_wrap { display: flex; flex-direction: column; justify-content: flex-end; width: 440px; max-width: 100%; height: 0; } .video { position: relative; display: block; width: 100%; margin-bottom: 360px; line-height: calc(100% + 10px); z-index: 10; cursor: pointer; transform: translateY(360px); text-decoration: none; color: var(--light_color); border-radius: 24px; &.is_stuck { transform: translateY(0); } &:after { position: absolute; inset: 0; display: block; content: ''; z-index: 1; pointer-events: none; border-radius: inherit; background: rgba(44, 51, 65, .20); } .name { position: absolute; top: 0; left: 0; width: 420px; max-width: 100%; padding: var(--block_padding); line-height: calc(100% + 10px); z-index: 3; } video { display: block; border-radius: inherit; aspect-ratio: 1 / 1.4; } .icon { position: absolute; right: var(--block_padding); bottom: var(--block_padding); display: block; width: 40px; z-index: 3; aspect-ratio: 1 / 1; } } .advantages { width: calc(100% - 440px - var(--inner_gap)); .grid_row { --items_per_line: 4; } .item { position: relative; display: flex; flex-direction: column; gap: var(--inner_gap); min-height: 340px; padding: var(--block_padding_s); border: 1px solid rgba(44, 51, 65, .10); border-radius: 24px; background: var(--light_color); &.primary { justify-content: center; padding-block: var(--block_padding_s) calc(var(--block_padding_s) * 4); text-align: center; color: var(--light_color); background: var(--primary_color); .desc { color: var(--light_color); } .icon { right: 0; left: 0; width: 142px; margin-inline: auto; } } .name { font-size: var(--font_size_title_s); line-height: calc(100% + 4px); } .desc { line-height: calc(100% + 10px); color: var(--grey_color); } .icon { position: absolute; right: var(--block_padding_s); bottom: var(--block_padding_s); display: block; display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 100px; pointer-events: none; aspect-ratio: 1 / 1; img { display: block; max-width: 100%; max-height: 100%; } } } } } /*----------------- Our mission -----------------*/ .our_mission { .cont { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; gap: var(--block_padding_xl); } .block_head { width: fit-content; margin-bottom: 0; } .text_block { position: relative; width: 600px; max-width: 100%; padding-left: 40px; background: url(../images/ic_quote.svg) 0 7px/20px auto no-repeat; &.size_l { width: calc(100% - 440px - var(--inner_gap) * 2); padding-left: 72px; font-size: 22px; line-height: 160%; background: url(../images/ic_quote.svg) 0 12px/42px auto no-repeat; } } .link { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--inner_gap_xs); width: 620px; height: 80px; margin-left: calc(var(--inner_gap) * -1); padding-inline: 70px; transition: background .2s linear; text-decoration: none; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--secondary_color); .icon { display: block; width: 28px; aspect-ratio: 1 / 1; } @media (hover: hover) and (pointer: fine) { &:hover { background: var(--primary_color); } } } } /*------------- History -------------*/ .history { .cont { display: flex; align-content: stretch; align-items: stretch; flex-wrap: wrap; justify-content: flex-start; gap: var(--block_padding_l); } .year_part1 { position: relative; width: 280px; max-width: 100%; margin-bottom: 71px; font-size: 220px; font-weight: 500; span { position: sticky; top: 0; } } .list { display: flex; flex-direction: column; gap: var(--block_padding_xl); } .item { .year_part2 { position: relative; width: fit-content; font-size: 220px; font-weight: 500; color: var(--bg); -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--primary_color); } .desc { width: 420px; max-width: 100%; font-size: 22px; line-height: 160%; .icon { position: relative; top: -1px; display: inline-block; width: 24px; margin-left: 6px; vertical-align: middle; aspect-ratio: 1 / 1; } } &.now { .year_part2 { color: var(--primary_color); -webkit-text-stroke: initial; &:before, &:after { position: absolute; top: 0; bottom: 0; left: 100%; display: block; width: 100vw; height: 6px; margin-block: auto; margin-left: var(--block_padding_l); content: ''; border-radius: 12px; background: var(--primary_color); } &:before { right: 100%; left: auto; margin-right: 400px; margin-left: 0; } } .desc { width: 840px; max-width: 100%; } } } } /*----------------- Main doctor -----------------*/ .main_doctor { .cont { display: flex; align-content: flex-end; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; gap: var(--block_padding_s); } .person { position: relative; width: calc(100% - 630px - var(--block_padding_s)); margin-left: -52px; .photo { position: relative; display: block; &:after { position: absolute; inset: 0; display: block; content: ''; background: linear-gradient(0deg, var(--bg) 0%, rgba(245, 246, 248, .00) 37.3%); } img { display: block; width: 100%; } } .info { position: absolute; bottom: 0; left: 98px; width: 823px; padding: var(--block_padding_l); color: var(--light_color); border-radius: 24px; background: var(--primary_color); &:after { position: absolute; top: 0; left: 100%; display: block; width: 48px; margin-left: var(--block_padding_s); content: ''; background: url(../images/ic_quote2.svg) 0 0/100% auto no-repeat; aspect-ratio: 1 / 1; } .name { font-size: 32px; font-weight: 500; line-height: 160%; } .post { margin-top: 14px; line-height: calc(100% + 10px); color: rgba(255, 255, 255, .70); } .icon { position: absolute; top: 0; right: 70px; bottom: 0; display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 142px; margin-block: auto; aspect-ratio: 1 / 1; img { display: block; width: 100%; } } } } .data { display: flex; flex-direction: column; gap: var(--block_padding_s); width: 680px; max-width: 100%; margin-bottom: 255px; .title, .text_block h3 { font-size: 32px; line-height: 160%; font-weight: 400; color: var(--dark_color); } .text_block { color: var(--grey_color); } } } /*-------------- Licenses --------------*/ .licenses { .swiper { overflow: visible; --spaceBetween-0: var(--inner_gap_xxs); --slidesPerView-0: auto; --spaceBetween-768: var(--inner_gap_xxs); --slidesPerView-768: 3; --spaceBetween-1024: var(--inner_gap_xxs); --slidesPerView-1024: 4; &:not(.swiper-initialized) { .swiper-wrapper { gap: var(--spaceBetween-1024); } .swiper-slide { width: calc(100% / var(--slidesPerView-1024) - var(--spaceBetween-1024)); } } .swiper-slide { visibility: hidden; transition: opacity .2s linear, visibility .2s linear; pointer-events: none; opacity: 0; &.visible { visibility: visible; pointer-events: auto; opacity: 1; } } } .item { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: currentColor; .thumb { padding: 5px; border: 1px solid rgba(44, 51, 65, .10); border-radius: 16px; background: var(--light_color); aspect-ratio: 1 / 1.273; img { border: 1px solid rgba(44, 51, 65, .10); border-radius: 12px; } } .name { padding-inline: 14px; font-size: var(--font_size_s); line-height: 145%; color: var(--grey_color); } } } /*------------------- Photo gallery -------------------*/ .photo_gallery { .swiper { overflow: visible; --spaceBetween: var(--inner_gap_xs); --slidesPerView: auto; &:not(.swiper-initialized) { .swiper-wrapper { gap: var(--spaceBetween-1024); } } .swiper-slide { width: 1250px; } } .image { display: block; border-radius: var(--border_radius_l); background: var(--light_color); aspect-ratio: 1 / .528; ; img { min-height: 420px; } } .caption { width: 620px; max-width: 100%; margin-inline: auto; margin-top: var(--inner_gap); font-size: var(--font_size_s); line-height: 150%; text-align: center; color: var(--grey_color); } } /*-------------------- Popular prices --------------------*/ .popular_prices { .data { padding-block: 90px 100px; border-radius: var(--border_radius_l); background: var(--light_color); .cont { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; } .block_head { gap: var(--block_padding_s); width: 420px; max-width: 100%; margin-bottom: 0; padding-top: var(--inner_gap_xs); .desc { color: var(--dark_color); } .btn { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: fit-content; height: 50px; margin-top: var(--inner_gap_xs); padding-inline: var(--block_padding); transition: background .2s linear; text-align: center; text-decoration: none; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--primary_color); @media (hover: hover) and (pointer: fine) { &:hover { background: var(--secondary_color); } } } } .list { display: flex; flex-direction: column; gap: var(--inner_gap_xxxs); width: calc(100% - 420px - var(--block_padding_xl)); .item { position: relative; display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap); width: 100%; margin-right: 0; padding-block: var(--inner_gap_s); padding-inline: var(--inner_gap); line-height: calc(100% + 12px); transition: .2s linear; text-decoration: none; color: currentColor; border: 1px solid rgba(44, 51, 65, .10); border-radius: 16px; background: rgba(255, 255, 255, .80); .label { width: calc(100% - 140px - var(--inner_gap)); } .price { width: 140px; max-width: 100%; font-weight: 600; text-align: right; } .btn { position: absolute; top: 0; right: 5px; bottom: 0; width: 160px; height: 50px; margin-block: auto; transition: .2s linear; transform: translateX(-100%); opacity: 0; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--yellow_color); @media (hover: hover) and (pointer: fine) { &:hover { background: var(--primary_color); } } } @media (hover: hover) and (pointer: fine) { &:hover { width: calc(100% + 175px); margin-right: -175px; padding-inline: var(--inner_gap) calc(175px + var(--inner_gap)); color: var(--light_color); border-radius: var(--border_radius_max); background: var(--secondary_color); .btn { transform: translateX(0); opacity: 1; } } } } .exp { margin-top: var(--inner_gap_l); font-size: var(--font_size_s); line-height: calc(100% + 8px); color: var(--grey_color); } } } } .priceslist { display: flex; flex-direction: column; gap: var(--inner_gap_xxxs); .item { position: relative; display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--inner_gap); width: 100%; margin-right: 0; padding-block: var(--inner_gap_s); padding-inline: var(--inner_gap); line-height: calc(100% + 12px); transition: .2s linear; text-decoration: none; color: currentColor; border: 1px solid rgba(44, 51, 65, .10); border-radius: 16px; background: rgba(255, 255, 255, .80); .label { width: calc(100% - 140px - var(--inner_gap)); } .price { width: 140px; max-width: 100%; font-weight: 600; text-align: right; } .btn { position: absolute; top: 0; right: 5px; bottom: 0; width: 160px; height: 50px; margin-block: auto; transition: .2s linear; transform: translateX(-100%); opacity: 0; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--yellow_color); @media (hover: hover) and (pointer: fine) { &:hover { background: var(--primary_color); } } } @media (hover: hover) and (pointer: fine) { &:hover { width: calc(100% + 175px); margin-right: -175px; padding-inline: var(--inner_gap) calc(175px + var(--inner_gap)); color: var(--light_color); border-radius: var(--border_radius_max); background: var(--secondary_color); .btn { transform: translateX(0); opacity: 1; } } } } .exp { margin-top: var(--inner_gap); font-size: var(--font_size_s); line-height: calc(100% + 8px); color: var(--grey_color); } } .page_prices { .priceslist { .item { @media (hover: hover) and (pointer: fine) { &:hover { width: inherit; margin-right: inherit; } } } } } .priceslist, .prices_list, .popular_prices .data .list { .item { @media (hover: none) { .btn { opacity: 1; position: static; width: 100%; height: 40px; transform: none; } } } } /*------------------ About clinic ------------------*/ .about_clinic { .block_head { .desc { align-self: flex-end; width: 620px; max-width: 100%; } } .row { --items_per_line: 2; --gap_x: var(--block_padding); --gap_y: var(--block_padding); } .advantages { .grid_row { --gap_x: var(--inner_gap); --gap_y: var(--inner_gap); --items_per_line: 2; } .item { position: relative; display: flex; flex-direction: column; gap: var(--inner_gap); min-height: 340px; padding: var(--block_padding_s); border: 1px solid rgba(44, 51, 65, .10); border-radius: 24px; background: var(--light_color); &.primary { justify-content: center; padding-block: var(--block_padding_s) calc(var(--block_padding_s) * 4); text-align: center; color: var(--light_color); background: var(--primary_color); .desc { color: var(--light_color); } .icon { right: 0; left: 0; width: 142px; margin-inline: auto; } } .name { font-size: var(--font_size_title_s); line-height: calc(100% + 4px); &.size_l { margin-bottom: -4px; font-size: calc(var(--font_size_title) + 4px); font-weight: 500; line-height: 135%; } } .desc { line-height: calc(100% + 10px); color: var(--grey_color); } .icon { position: absolute; right: var(--block_padding_s); bottom: var(--block_padding_s); display: block; display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; width: 100px; pointer-events: none; aspect-ratio: 1 / 1; img { display: block; max-width: 100%; max-height: 100%; } } } } .images { position: relative; .swiper { position: absolute; inset: 0; border: 1px solid rgba(44, 51, 65, .10); border-radius: 24px; --spaceBetween: 0; --slidesPerView: 1; .swiper-wrapper { position: absolute; inset: 0; } .swiper-controls { position: absolute; bottom: 0; left: 0; width: 100%; padding: var(--block_padding_s); .swiper-button-next, .swiper-button-prev { background: var(--light_color); &:hover { background: var(--primary_color); --swiper-navigation-color: var(--light_color); } } } } .image { display: block; height: 100%; background: var(--bg); } .additional_image { position: absolute; bottom: 0; left: 100%; width: 240px; margin-left: var(--block_padding_s); border: 1px solid rgba(44, 51, 65, .10); border-radius: 16px; aspect-ratio: 1 / 1; } } .our_mission { position: relative; margin-top: var(--block_padding); padding-top: var(--block_padding); border-top: 1px solid rgba(44, 51, 65, .10); .block_head { position: absolute; top: var(--block_padding); left: 0; } } } /*------------ Footer ------------*/ footer { padding-block: var(--block_padding_xl) var(--inner_gap_xs); background: var(--light_color); .cont { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; } .info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--inner_gap); width: 200px; max-width: 100%; } .logo { display: block; text-decoration: none; color: currentColor; img { display: block; width: 160px; height: 48px; } } .license { font-size: var(--font_size_s); font-weight: 300; line-height: 157.143%; color: rgba(32, 34, 36, .50); } .links { display: flex; flex-direction: column; gap: var(--inner_gap_s); font-size: var(--font_size_s); font-weight: 300; line-height: 128.571%; color: rgba(32, 34, 36, .50); a { display: inline-block; transition: color .2s linear; vertical-align: top; text-decoration: none; color: currentColor; @media (hover: hover) and (pointer: fine) { &:hover { color: var(--dark_color); } } } } .creator { a { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: var(--inner_gap_xxxs); width: fit-content; height: 40px; padding-inline: var(--inner_gap_s); font-size: var(--font_size_s); font-weight: 300; line-height: 128.571%; text-decoration: none; color: rgba(32, 34, 36, .50); border-radius: var(--border_radius_xs); background: rgba(44, 51, 65, .06); span { margin-left: 2px; transition: color .2s linear; color: var(--dark_color); } .icon { display: block; width: 14px; transition: color .2s linear; color: var(--dark_color); aspect-ratio: 1 / 1; } @media (hover: hover) and (pointer: fine) { &:hover { span, .icon { color: var(--primary_color); } } } } } .menu { display: flex; flex-direction: column; gap: var(--inner_gap_xs); font-size: 32px; a { display: inline-block; transition: color .2s linear; vertical-align: top; text-decoration: none; color: currentColor; @media (hover: hover) and (pointer: fine) { &:hover { color: var(--primary_color); } } } } .categories { display: flex; flex-direction: column; gap: var(--inner_gap); width: 240px; max-width: 100%; a { display: inline-block; transition: color .2s linear; vertical-align: top; text-decoration: none; color: currentColor; @media (hover: hover) and (pointer: fine) { &:hover { color: var(--primary_color); } } } } .contacts_wrap { display: flex; flex-direction: column; gap: var(--inner_gap_l); width: 300px; max-width: 100%; padding-right: var(--block_padding_l); .contacts { display: flex; flex-direction: column; gap: var(--inner_gap_xxs); .address { font-size: var(--font_size_s); } .phone { font-size: 22px; a { white-space: nowrap; text-decoration: none; color: currentColor; } } } .item { display: flex; flex-direction: column; gap: var(--inner_gap_xxs); padding-top: var(--inner_gap_l); border-top: 1px solid rgba(44, 51, 65, .10); .label { font-size: var(--font_size_s); color: var(--grey_color); } .val { display: flex; flex-direction: column; gap: var(--inner_gap_xxxs); line-height: calc(100% + 10px); a { width: fit-content; white-space: nowrap; text-decoration: none; color: currentColor; } } &.email { .val { a { color: var(--yellow_color); border-bottom: 1px solid; } } } } } .copyright { width: 100%; margin-top: var(--block_padding_l); padding-block: var(--inner_gap); padding-inline: var(--inner_gap); font-size: var(--font_size_s); font-weight: 300; line-height: calc(100% + 4px); text-align: center; color: var(--grey_color); border-radius: var(--border_radius_xs); background: rgba(44, 51, 65, .06); } } /*----------- PopUp -----------*/ .modal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; z-index: 100; transition: opacity .2s linear, display .2s allow-discrete; pointer-events: none; opacity: 0; border: none; outline: none; background: transparent; .wrapper { position: absolute; display: flex; overflow-x: clip; overflow-y: auto; flex-direction: column; width: 100%; height: 100%; padding-block: var(--inner_gap); padding-inline: var(--inner_gap); pointer-events: auto; overscroll-behavior-y: contain; } .inner { position: relative; width: 906px; max-width: 100%; margin: auto; padding: 5px; z-index: 3; border-radius: var(--border_radius_l); background: #dddae0; .data { position: relative; padding: var(--block_padding_l); z-index: 3; border-radius: calc(var(--border_radius_l) - 4px); background: var(--light_color); } .close_btn { position: absolute; top: 25px; right: 25px; width: 30px; z-index: 5; transition: color .2s linear; color: rgba(44, 51, 65, .30); .icon { display: block; width: 100%; aspect-ratio: 1 / 1; } @media (hover: hover) and (pointer: fine) { &:hover { color: var(--secondary_color); } } } .form { --form_border_color: rgba(44, 51, 65, .1); --form_border_color_focus: rgba(44, 51, 65, .5); --form_bg_color: rgba(44, 51, 65, .06); --form_placeholder_color: rgba(44, 51, 65, .50); --form_columns_gap: var(--inner_gap_xxs); --form_line_gap: var(--inner_gap_xxs); --form_input_height: 70px; input, textarea, select { color: #010101; } .address { border-color: rgba(44, 51, 65, .14); label { input { &:checked + span { color: var(--light_color); border-color: var(--secondary_color); background: var(--secondary_color); } } span { color: var(--dark_color); } } } .submit { padding-top: 12px; } .agree { color: rgba(44, 51, 65, .50); } .submit_btn { width: 266px; } } } &::backdrop { opacity: .86; background: var(--dark_color); } &[open] { opacity: 1; @starting-style { opacity: 0; } } } /*------------------- PopUp - Order -------------------*/ #order_modal { .inner { .data { margin-left: 235px; } .block_head { gap: var(--inner_gap_xs); margin-bottom: var(--block_padding_s); .desc { color: var(--dark_color); } } } .image { position: absolute; top: 0; left: 0; display: block; width: 240px; max-width: 100%; height: 100%; z-index: 1; pointer-events: none; border-radius: var(--border_radius_l); } } .btn-theme-dark, .btn.btn-theme-dark { display: flex; align-content: center; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--inner_gap_xs); width: fit-content; height: 80px; padding-inline: 70px; transition: background .2s linear; text-decoration: none; color: var(--light_color); border-radius: var(--border_radius_max); background: var(--secondary_color); &, &:hover { text-decoration: none; } .icon { display: block; width: 28px; aspect-ratio: 1 / 1; } @media (hover: hover) and (pointer: fine) { &:hover { background: var(--primary_color); } } } .block_head_title { h1, h2, h3 { font-size: var(--font_size_title); font-weight: 400; line-height: normal; margin-bottom: var(--block_head_offset); } &.size_l { h1, h2, h3 { font-size: var(--font_size_title_l); line-height: calc(100% + 10px); } } &.size_s { h1, h2, h3 { font-size: var(--font_size_title_s); line-height: calc(100% + 4px); } } } .map-contacts { row-gap: 5px; display: flex; flex-direction: column; align-items: flex-start; font-size: 14px; color: var(--dark_color); font-family: var(--font_family_primary); } .map-contacts p { margin-bottom: 0; } .map-contacts a { color: var(--yellow_color); } .map-contacts a:hover { text-decoration: none; } .navigation404 { font-size: 20px; } .navigation404, .navigation404 ul { row-gap: 5px; display: flex; flex-direction: column; align-items: flex-start; padding-left: 20px; } .navigation404 li ul { margin-top: 5px; } .navigation404 a { color: var(--dark_color); } .navigation404 ::marker { color: var(--yellow_color); } .page_prices_cat { row-gap: 20px; overflow: hidden; display: flex; align-items: flex-start; flex-direction: column; } .page_prices_cat+.page_prices_cat { margin-top: 30px; } .page_prices_cat_title { color: var(--dark_color); font-size: 32px; } .page_prices_item { width: 100%; border-radius: 1rem; background-color: #fff; } .page_prices_item .data { display: none; } .page_prices_item .data { padding: 20px 30px; border-top: 1px solid rgba(44, 51, 65, .10); } .page_prices_item_head { width: 100%; display: block; position: relative; cursor: pointer; font-size: 22px; padding: 20px 50px 20px 20px; } .page_prices_item_head::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.70696 9.7107C5.31643 10.1012 5.31643 10.7343 5.70696 11.1249L10.5992 16.0123C11.3804 16.7927 12.6462 16.7924 13.4269 16.0116L18.3173 11.1213C18.7078 10.7307 18.7078 10.0976 18.3173 9.707C17.9268 9.3165 17.2936 9.3165 16.9031 9.707L12.7174 13.8927C12.3269 14.2832 11.6938 14.2832 11.3032 13.8927L7.12117 9.7107C6.73065 9.3201 6.09748 9.3201 5.70696 9.7107Z' fill='currentColor' style='&%2310; fill: %2322c5c5;&%2310;'/%3E%3C/svg%3E"); position: absolute; top: 0; right: 0; width: 50px; height: 100%; display: flex; align-items: center; justify-content: center; will-change: transform; transition: transform .25s linear; } .page_prices_item.active .page_prices_item_head:after { transform: rotate(180deg); } .doctor { min-height: 300px; }