/* @ 📄 Список файлов [[file_list.html]] */
/* @ html title_about-me [[index.html]] */
/* @ CSS Global [[css/global-styles.css]] */
/* #region DRAFTS */
/*
.title_inner {
background-color: rgba(255, 0, 0, 0.35);
}
.title_content_wrapper {
background-color: rgba(0, 128, 0, 0.452);
}
.title_slogan {
background-color: rgba(255, 255, 255, 0.486);
}
.title_brain_landscape_img {
background-color: rgba(255, 255, 255, 0.466);
}
.title_brain_portrait_PC_img {
background-color: rgba(255, 255, 255, 0.466);
}
.title_pib {
background-color: rgba(255, 255, 255, 0.438);
}
.title_specialization {
background-color: rgba(255, 0, 0, 0.274);
}
.nav_arrow_img {
background-color: rgba(255, 0, 0, 0.308);
}
.title_photo {
background-color: rgba(255, 255, 255, 0.493);
}
.who_am_i {
background-color: rgba(255, 0, 0, 0.473);
}
.who_am_i_text_intro {
background-color: yellow;
}
*/
/* #endregion */
/* #region SERVICE SECTION */
/* ❌проект snap-align заморожен
.snap_align {
}
html { настройка кадрового перескока
height: 100%;
scroll-snap-type: y mandatory;
overflow-y: scroll;
чисто для плавности перескоков
scroll-behavior: smooth;
}
.snap_align > div {
position: absolute;
z-index: -10;
scroll-snap-align: start;
}
.snap_align > :nth-child(1) {
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
.snap_align > :nth-child(2) {
top: 100vh;
left: 0;
⭐задается через скрипт
width: 100%;
}
#snap_stop {
position: relative;
z-index: 5;
height: 0px;
width: 100%;
} */
/* #endregion */
/* #region GENERAL SETTINGS */
.fullwidth_content_section {
/* height: 2000px; */
width: 100%;
text-align: center;
}
/* .content_section {
display: inline-block;
width: 100%;
max-width: 1200px;
text-align: center;
background-color: rgba(255, 0, 0, 0.452);
} */
.textCondensed--90{
--text-condensed: 0.9;
}
/* #endregion */
/* #region INDIVIDUAL SETTINGS */
html {
/* @ CSS Global [[css/global-styles.css]] */
}
body {
/* @ CSS Global [[css/global-styles.css]] */
}
header {
/* [[css/header.css]] */
}
h1 > span[data-media="portrait--mobile"] {
--text-condensed: 0.75;
}
.title_wrapper {
position: relative;
z-index: 10;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #7cd7fe;
}
.title_wrapper_background_wrapper {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.title_wrapper_background_img {
position: absolute;
/* height: auto; */
/* width: auto; */
transform: scale(var(--title_scale));
transform-origin: center;
}
.title_wrapper_background_photo_frame {
}
.title_outer {
display:block;
overflow: hidden; /* ❤️❤️❤️❤️❤️ */
}
.title_inner {
transform-origin: top left;
overflow: hidden;
}
.title_content_wrapper {
height: 100%;
text-align: center;
}
.nav_arrow_wrapper {
position: relative;
height: 74px;
width: 74px;
/* overflow: hidden; */
}
.nav_arrow_inverted {
position: absolute;
top: 0;
left: 0;
height: 74px;
width: 74px;
z-index: 2;
}
.nav_arrow_overlay {
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
height: 71px;
width: 70px;
overflow: hidden;
}
.nav_arrow_overlay > div {
display: block;
position: relative;
top: -120px;
left: 0;
width: 70px;
height: 100px;
background-color: red;
/* background: linear-gradient(to bottom,
rgba(255, 0, 0, 1) 0%,
rgba(255, 0, 0, 1) 50%,
rgba(255, 0, 0, 0) 51%); */
pointer-events: none;
animation: sweepDown 3s infinite linear;
}
@keyframes sweepDown {
0% {top: -200px;}
100% {top: 100px;}
}
.nav_arrow_img {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.who_am_i {
position: relative;
z-index: 1;
text-align: left;
}
#who_am_i {
scroll-margin-top: calc(-80px * var(--scale_1920) + 64px * var(--scale_1200));
}
.who_am_i_background {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
background-color: #7cd7fe;
}
.who_am_i_photo {
position: absolute;
}
.who_am_i_intro {
position: absolute;
text-align: left;
color: black;
filter: drop-shadow(1px 1px 0 white);
}
.who_am_i_brain_img {
position: absolute;
overflow: hidden;
}
.who_am_i_brain_img > img {
position: relative;
top: 0;
transition: all 0.5s ease-out;
}
.who_am_i_brain_img > img:hover {
filter: invert(100%);
}
.who_am_i > h2 {
position: absolute;
font-weight: bold;
text-transform: uppercase;
color: white;
}
.who_am_i_who_am_i {
position: absolute;
text-align: left;
color: black;
}
.who_am_i_who_am_i > p > span:nth-of-type(1) {
font-weight: bold;
}
.who_am_i_who_am_i_background {
position: absolute;
z-index: -1;
}
.education {
position: relative;
}
#education[data-media="landscape__portrait--PC"] {
scroll-margin-top: calc(-115px * var(--scale_1920) + 64px * var(--scale_1200));
}
#education[data-media="portrait--mobile"] {
scroll-margin-top: 0;
}
.education > h2 {
position: absolute;
z-index: 3;
text-transform: uppercase;
transition: all 0.5s ease-out;
}
.education > h2:hover {
color: red;
}
.education > h2 + div {
outline: 0;
}
.education_text_wrapper {
position: absolute;
left: 0;
}
.education_embroidery_img {
}
.education_hat {
position: absolute;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
.education_hat:hover {
filter: invert(100%);
transform: rotate(-5deg);
}
.education_text {
position: absolute;
z-index: 1;
}
.education_text > div:nth-child(1) {
float: right;
background: transparent;
opacity: 0; /* приховує фігуру, але залишає її для обтікання */
pointer-events: none; /* не заважає взаємодії з текстом */
}
.education_text > div:nth-child(2) {
text-align: left;
color: white;
}
.education_photo_pc {
}
.education_photo_mob {
}
.my_way {
position: relative;
text-align: right;
}
#my_way[data-media="landscape__portrait--PC"] {
scroll-margin-top: calc(-100px * var(--scale_1920) + 64px * var(--scale_1200));
}
#my_way[data-media="portrait--mobile"] {
scroll-margin-top: calc(-165px * var(--scale_1920) + 64px * var(--scale_1200));
}
.my_way > h2 {
position: absolute;
font-weight: bold;
text-align: right;
text-transform: uppercase;
transition: all 0.2s ease-in-out;
}
.my_way > h2:hover {
color: white;
}
.my_way_photo {
position: absolute;
}
.my_way_text {
position: absolute;
text-align: left;
}
.my_way_hand {
position: absolute;
background-color: var(--color-test);
transition: all 0.3s ease-in-out;
}
div.my_way_hand {
z-index: 3;
}
div.my_way_hand:hover ~ img.my_way_hand {
transform: rotate(360deg);
filter: invert(100%);
}
.my_way_text_background {
position: absolute;
z-index: -1;
background-color: #7cd7fe;
}
.my_way_tracery {
position: absolute;
z-index: -2;
overflow: hidden;
}
.my_way_background {
}
.creed {
outline: 0;
}
#creed[data-media="portrait--mobile"] {
scroll-margin-top: calc(-203px * var(--scale_1920) + 64px * var(--scale_1200));
}
.creed > h2 > span {
/* спрятанный заголовок h2 для семантики, так как h2 здесь картинка */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.creed_content_wrapper {
position: absolute;
display: flex;
align-content: flex-start;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
gap: 0px;
}
.creed_content_title {
margin-top: 10px;
height: 80px;
text-align: right;
font-weight: bold;
transition: all 0.2s ease-out;
}
.creed_content_title:hover {
color: red;
}
.creed_content_title > span {
}
.creed_content_text {
margin-top: 10px;
display: flex;
align-items: center;
height: 80px;
}
.creed_content_text > span {
font-size: 18px;
line-height: 15px;
text-align: left;
}
.creed_devil_img {
position: absolute;
transform: scale(1) rotate(0);
overflow: hidden;
filter: sepia(0) hue-rotate(0deg) saturate(1) brightness(1) contrast(1);
transition: all 0.3s ease-out;
}
.creed_devil_img:hover {
transform: scale(1.5) rotate(10deg);
opacity: 1;
filter: sepia(1) hue-rotate(-10deg) saturate(33) brightness(3.4) contrast(40);
}
.creed_angel_img {
position: absolute;
}
.creed_sun_img {
}
.why_me {
}
#why_me[data-media="landscape__portrait--PC"] {
scroll-margin-top: calc(-190px * var(--scale_1920) + 64px * var(--scale_1200));
}
#why_me[data-media="portrait--mobile"] {
scroll-margin-top: calc(-150px * var(--scale_1920) + 64px * var(--scale_1200));
}
.why_me > h2 {
position: absolute;
z-index: 2;
height: 43px;
padding-left: 14px;
font-size: 30px;
font-weight: bold;
text-align: left;
color: grey;
mix-blend-mode: hard-light;
}
.why_me_photo_pc {
}
.why_me_photo_mob {
}
.why_me_frame_pc {
}
.why_me_frame_mob {
}
.why_me_text {
position: absolute;
z-index: 6;
}
.why_me_text > div:nth-child(2) {
text-align: left;
color: white;
}
.why_me_text > div:nth-child(2) p {
display: block;
}
.why_me_text > div:nth-child(2) span {
--text-condensed: 0.85;
font-weight: bold;
}
.why_me_squares {
}
.how_work {
}
#how_work {
scroll-margin-top: calc(-117px * var(--scale_1920) + 64px * var(--scale_1200));
}
.how_work > h2 {
position: absolute;
z-index: 2;
font-weight: bold;
text-transform: uppercase;
color: white;
}
.how_work_text {
position: absolute;
z-index: 6;
font-size: 24px;
text-align: left;
}
.how_work_tree_img {
position: absolute;
z-index: 5;
filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.4));
}
.how_work_content_background {
position: absolute;
z-index: -1;
}
.how_work_serotonin_img {
position: absolute;
z-index: 5;
filter: saturate(0%);
transition: all 1s ease-in-out;
}
.how_work_serotonin_img > img {
width: 100%;
}
@media (pointer: fine) {
.how_work_serotonin_img.animate_1, .how_work_dopamine_img.animate_1 {
filter: saturate(200%);
}
.how_work_serotonin_img.animate_2, .how_work_dopamine_img.animate_2 {
filter: saturate(0%);
}
}
@media (pointer: coarse) {
.how_work_serotonin_img.animate_1, .how_work_dopamine_img.animate_1 {
animation: how_work_serotonin_img 1s ease-in-out 0s 1 normal forwards running;
}
.how_work_serotonin_img.animate_2, .how_work_dopamine_img.animate_2 {
animation: how_work_serotonin_img 1s ease-in-out 0s 1 reverse forwards running;
}
@keyframes how_work_serotonin_img {
0% {
filter: saturate(0%);
}
100% {
filter: saturate(200%);
}
}
}
.how_work_serotonin_title {
position: absolute;
opacity: 0.3;
filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg);
transition: all 1s ease-in-out;
}
.how_work_serotonin_title > img {
height: 100%;
}
@media (pointer: fine) {
.how_work_serotonin_title.animate_1 {
opacity: 1;
filter: invert(55%) sepia(50%) saturate(500%) hue-rotate(290deg);
}
.how_work_serotonin_title.animate_2 {
opacity: 0.3;
filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg);
}
}
@media (pointer: coarse) {
.how_work_serotonin_title.animate_1 {
animation: how_work_serotonin_title 1s ease-in-out 0s 1 normal forwards running;
}
.how_work_serotonin_title.animate_2 {
animation: how_work_serotonin_title 1s ease-in-out 0s 1 reverse forwards running;
}
@keyframes how_work_serotonin_title {
0% {
opacity: 0.3;
filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg);
}
100% {
opacity: 1;
filter: invert(55%) sepia(50%) saturate(500%) hue-rotate(290deg);
}
}
}
.how_work_dopamine_img {
position: absolute;
z-index: 7;
filter: saturate(0%);
transition: all 1s ease-in-out;
}
.how_work_dopamine_img > img {
width: 100%;
}
.how_work_dopamine_title {
position: absolute;
opacity: 0.3;
filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg);
transition: all 1s ease-in-out;
}
.how_work_dopamine_title > img {
height: 100%;
}
.how_work_dopamine_title.animate_1 {
opacity: 1;
filter: invert(70%) sepia(100%) saturate(300%) hue-rotate(170deg);
}
@media (pointer: fine) {
.how_work_dopamine_title.animate_1 {
opacity: 1;
filter: invert(70%) sepia(100%) saturate(300%) hue-rotate(170deg);
}
.how_work_dopamine_title.animate_2 {
opacity: 0.3;
filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg);
}
}
@media (pointer: coarse) {
.how_work_dopamine_title.animate_1 {
animation: how_work_dopamine_title 1s ease-in-out 0s 1 normal forwards running;
}
.how_work_dopamine_title.animate_2 {
animation: how_work_dopamine_title 1s ease-in-out 0s 1 reverse forwards running;
}
@keyframes how_work_dopamine_title {
0% {
opacity: 0.3;
filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg);
}
100% {
opacity: 1;
filter: invert(70%) sepia(100%) saturate(300%) hue-rotate(170deg);
}
}
}
.add_active {
}
#add_active[data-media="landscape__portrait--PC"] {
scroll-margin-top: calc(-228px * var(--scale_1920) + 64px * var(--scale_1200));
}
#add_active[data-media="portrait--mobile"] {
scroll-margin-top: calc(-35px * var(--scale_1920) + 64px * var(--scale_1200));
}
.add_active > h2 {
position: absolute;
width: 728px;
text-transform: uppercase;
}
.add_active > h2 > span:nth-of-type(1) {
position: relative;
z-index: 2;
display: inline-block;
font-size: 40px;
font-weight: normal;
color: white;
text-align: left;
white-space: nowrap;
}
.add_active > h2 > span:nth-of-type(1) > span {
--text-condensed: 0.7;
}
.add_active > h2 > span:nth-of-type(2) {
position: relative;
top: -31px;
left: 286px;
display: inline-block;
font-size: 40px;
font-weight: bold;
color: black;
text-align: left;
white-space: nowrap;
}
.add_active > h2 > span:nth-of-type(2) > span {
--text-condensed: 0.9;
}
.add_active > h2 > span:nth-of-type(3) {
position: absolute;
z-index: -1;
top: 0px;
left: 138px;
height: 53px;
width: 448px;
background-color: #adadad;
}
.add_active_photo_left_wrapper {
position: absolute;
height: 672px;
filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.25));
}
.add_active_photo_left_photo {
position: absolute;
z-index: 2;
top: 32px;
}
.add_active_photo_left_stiky {
position: absolute;
z-index: 3;
top: 23px;
}
.add_active_photo_left_background {
position: absolute;
z-index: 1;
top: 0;
}
.add_active_photo_right_wrapper {
position: absolute;
height: 672px;
filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.25));
}
.add_active_photo_right_photo {
position: absolute;
z-index: 2;
top: 32px;
left: 39px;
}
.add_active_photo_right_stiky {
position: absolute;
top: 6px;
left: 470px;
z-index: 3;
}
.add_active_photo_right_background {
position: absolute;
z-index: 1;
top: 0;
left: 0px;
}
.add_active_text_wrapper {
position: absolute;
z-index: 2;
height: 457px;
width: 591px;
}
.add_active_text_pin {
position: absolute;
z-index: 3;
top: 0;
left: 271px;
}
.add_active_text_content {
position: absolute;
z-index: 2;
top: 80px;
left: 28px;
height: 324px;
width: 532px;
transform: rotate(-4.5deg);
font-size: 24px;
line-height: 30px;
text-align: left;
}
.add_active_text_background {
position: absolute;
z-index: 1;
top: 13px;
left: 0;
filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.35));
}
.add_active_tracery {
}
.add_active_tracery_hash {
position: absolute;
z-index: 3;
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.35));
}
.add_active_tracery_books {
position: absolute;
}
.add_active_tracery_stack {
position: absolute;
}
.additional_wrapper {
}
.additional {
}
#additional[data-media="landscape__portrait--PC"] {
scroll-margin-top: calc(-65px * var(--scale_1920) + 64px * var(--scale_1200));
}
#additional[data-media="portrait--mobile"] {
scroll-margin-top: calc(-184px * var(--scale_1920) + 64px * var(--scale_1200));
}
.additional > h2 {
position: absolute;
z-index: 2;
pointer-events: none;
}
.additional > h2 > span {
/* спрятанный заголовок h2 для семантики, так как h2 здесь картинка */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.additional_title_background {
position: absolute;
z-index: 1;
height: 268px;
width: 298px;
background-image: url(../img/title_about_me/additional/title_background.svg);
transition: all 1s ease-in-out;
}
.additional_title_background.animate_1 {
filter: sepia(70%) saturate(800%) hue-rotate(0deg);
}
.additional_title_background.animate_2 {
filter: sepia(70%) saturate(800%) hue-rotate(60deg);
}
.additional_title_background.animate_3 {
filter: sepia(70%) saturate(800%) hue-rotate(120deg);
}
.additional_title_background.animate_4 {
filter: sepia(70%) saturate(800%) hue-rotate(180deg);
}
.additional_title_background.animate_5 {
filter: sepia(70%) saturate(800%) hue-rotate(240deg);
}
.additional_title_background.animate_6 {
filter: sepia(70%) saturate(800%) hue-rotate(300deg);
}
.additional > h2 ~ *:nth-child(3) {
position: absolute;
z-index: 3;
pointer-events: none;
}
.additional_photo {
position: absolute;
}
.additional_text_wrapper {
position: absolute;
}
.additional_text_content {
position: absolute;
top: 82px;
left: 47px;
height: 377px;
width: 637px;
transform: rotate(-5.1deg);
font-size: 24px;
text-align: left;
line-height: 30px;
}
.additional_text_content > p:nth-of-type(4) {
text-align: right;
}
.additional_text_background {
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
}
.additional_drop_1 {
position: absolute;
overflow: hidden;
}
.additional_drop_1 > img {
margin-left: -105px;
}
.additional_drop_2 {
position: absolute;
}
.additional_drop_3 {
position: absolute;
}
.additional_drop_4 {
position: absolute;
}
.additional_drop_1,
.additional_drop_2,
.additional_drop_3,
.additional_drop_4,
.additional_drop_5,
.additional_drop_6 {
transition: all 1s ease-in-out;
--hover_animation_forwards_debounce: 1000;
}
.additional_drop_1, .additional_drop_4 {
filter: sepia(30%) saturate(500%) hue-rotate(160deg);
}
.additional_drop_5 {
filter: sepia(0%) saturate(100%) hue-rotate(0deg);
}
.additional_drop_1 > img,
.additional_drop_2 > img,
.additional_drop_3 > img,
.additional_drop_4 > img,
.additional_drop_5 > img,
.additional_drop_6 > img {
height: 100%;
/* width: 100%; */
}
.additional_drop_1.animate_1,
.additional_drop_2.animate_1,
.additional_drop_3.animate_1,
.additional_drop_4.animate_1,
.additional_drop_5.animate_1,
.additional_drop_6.animate_1 {
filter: sepia(30%) saturate(800%) hue-rotate(0deg);
}
.additional_drop_1.animate_2,
.additional_drop_2.animate_2,
.additional_drop_3.animate_2,
.additional_drop_4.animate_2,
.additional_drop_5.animate_2,
.additional_drop_6.animate_2 {
filter: sepia(30%) saturate(800%) hue-rotate(60deg);
}
.additional_drop_1.animate_3,
.additional_drop_2.animate_3,
.additional_drop_3.animate_3,
.additional_drop_4.animate_3,
.additional_drop_5.animate_3,
.additional_drop_6.animate_3 {
filter: sepia(30%) saturate(800%) hue-rotate(120deg);
}
.additional_drop_1.animate_4,
.additional_drop_2.animate_4,
.additional_drop_3.animate_4,
.additional_drop_4.animate_4,
.additional_drop_5.animate_4,
.additional_drop_6.animate_4 {
filter: sepia(30%) saturate(800%) hue-rotate(180deg);
}
.additional_drop_1.animate_5,
.additional_drop_2.animate_5,
.additional_drop_3.animate_5,
.additional_drop_4.animate_5,
.additional_drop_5.animate_5,
.additional_drop_6.animate_5 {
filter: sepia(30%) saturate(800%) hue-rotate(240deg);
}
.additional_drop_1.animate_6,
.additional_drop_2.animate_6,
.additional_drop_3.animate_6,
.additional_drop_4.animate_6,
.additional_drop_5.animate_6,
.additional_drop_6.animate_6 {
filter: sepia(30%) saturate(800%) hue-rotate(300deg);
}
.additional_drop_5.animate_7,
.additional_drop_1.animate_7,
.additional_drop_2.animate_7,
.additional_drop_3.animate_7,
.additional_drop_4.animate_7,
.additional_drop_5.animate_7,
.additional_drop_6.animate_7 {
filter: sepia(0%) saturate(100%) hue-rotate(0deg);
}
.additional_drop_6 {
position: absolute;
}
.additional_slogan {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.navbar {
/* Navbar [[css/navbar.css]] */
}
footer {
/* [[css/footer.css]] */
}
/* #endregion */
@media (min-aspect-ratio: 1001/1000), (max-aspect-ratio: 1001/1000) and (min-width: 601px) /* ! landscape + portrait+PC */ {
.who_am_i {
height: 1004px;
width: 1920px;
}
.who_am_i_background {
height: calc(100% - 53px);
}
.who_am_i_photo {
top: 100px;
left: 370px;
height: 904px;
width: 580px;
}
.who_am_i_intro {
top: 215px;
left: 970px;
width: 580px;
font-size: 24px;
}
.who_am_i_brain_img {
top: 100px;
left: 1475px;
width: 445px;
}
.who_am_i_brain_img > img {
left: 450px;
}
.who_am_i_brain_img.visible > img {
left: 0;
}
.who_am_i > h2 {
top: 591px;
left: 1459px;
font-size: 40px;
}
.who_am_i_who_am_i {
top: 643px;
left: 970px;
width: 580px;
font-size: 24px;
}
.who_am_i_who_am_i_background {
top: 588px;
left: 310px;
height: 225px;
width: 1300px;
background-image: url(../img/title_about_me/who_am_i/background_PC.svg);
}
.education {
top: calc(-54px * var(--scale_1920));
height: 1303px;
width: 1920px;
}
.education > h2 {
top: 239px;
left: 802px;
height: 45px;
width: 400px;
padding-left: 25px;
font-size: 40px;
color: black;
line-height: 48px;
filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white);
}
.education > h2 + div {
content: "";
position: absolute;
z-index: 1;
top: 238px;
left: 802px;
height: 45px;
width: 400px;
border-radius: 10px;
filter: none;
background-image: url(../img/title_about_me/education/title_background_pc.svg);
}
.education_text_wrapper {
z-index: -1;
top: 0;
height: 1303px;
width: 1920px;
background-image: url(../img/title_about_me/education/background_pc.svg);
}
.education_embroidery_img {
position: absolute;
top: 0;
left: 7px;
opacity: 0.3;
transition: all 0.5s ease-out;
}
.education_embroidery_img:hover {
opacity: 1;
}
.education_hat {
top: 160px;
left: 0px;
opacity: 0;
}
.education_hat.visible {
left: 189px;
opacity: 1;
}
.education_text {
top: 370px;
left: 360px;
width: 630px;
}
.education_text > div:nth-child(1) {
width: 126px;
height: 706px;
shape-outside: url('../img/title_about_me/education/text_shape_right_pc.svg');
}
.education_text > div:nth-child(2) {
position: relative;
font-size: 24px;
line-height: 40px;
}
.education_photo_pc {
position: absolute;
top: 53px;
right: 0px;
height: auto;
width: 1119px;
overflow: hidden;
}
.education_photo_mob {
display: none;
}
.my_way {
top: calc(-143px * var(--scale_1920));
height: 1097px;
width: 1920px;
}
.my_way > h2 {
top: 196px;
right: 370px;
width: 500px;
font-size: 40px;
line-height: 40px;
}
.my_way_photo {
top: 120px;
left: 0px;
height: 882px;
width: 580px;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.my_way_photo.visible {
left: 370px;
opacity: 1;
}
.my_way_text {
top: 424px;
right: 370px;
width: 560px;
font-size: 24px;
}
.my_way_hand {
top: 816px;
right: 300px;
height: 235px;
width: 331px;
}
.my_way_text_background {
top: 60px;
left: 482px;
height: 1003px;
width: 1148px;
}
.my_way_tracery {
top: 0;
left: 811px;
width: 1109px;
opacity: 0;
transition: all 2s ease-out;
}
.my_way_tracery.visible {
opacity: 0.4;
}
.my_way_background {
position: absolute;
top: 77px;
left: 0px;
z-index: -3;
height: 986px;
width: 100%;
background-color: white;
}
.my_way_background > img {
margin-top: 478px;
}
.creed {
margin-top: -1px;
height: 1047px;
width: 1920px;
padding-top: 5px;
background-image: linear-gradient( 90deg, rgb(175,231,255) 0%, rgb(255,254,252) 100%);
}
.creed > h2 > img:nth-of-type(1) {
position: absolute;
top: 24px;
left: 0;
z-index: -1;
opacity: 1;
transition: all 3s cubic-bezier(.76,0,.5,.5);
}
.creed > h2 > img:nth-of-type(1).visible {
opacity: 0.3;
}
.creed > h2 > img:nth-of-type(2) {
display: none;
}
.creed_content_wrapper {
left: 494px;
height: 1000px;
width: 1250px;
padding-left: 176px;
background-image: url(../img/title_about_me/creed/text_wrapper_background_pc.svg);
}
.creed_content_title {
width: 406px;
font-size: 40px;
line-height: 80px;
white-space: nowrap;
}
.creed_content_title > span {
--text-condensed: 0.55;
}
.creed_content_text {
margin-left: 69px;
width: 405px;
}
.creed_content_text > span {
}
.creed_devil_img {
top: 23px;
left: 0px;
height: auto;
width: 295px;
opacity: 0.3;
}
.creed_devil_img > img {
float: right;
}
.creed_angel_img {
top: 617px;
right: 0;
}
.creed_angel_img > img {
transform: scale(1) translateX(0px) translateY(0px);
opacity: 0.25;
transition: all 0.5s ease-in-out;
pointer-events: none;
}
.creed_angel_img:hover > img {
transform: scale(1.5) translateX(-800px) translateY(-320px);
opacity: 1;
}
.creed_angel_img:hover ~ .creed_devil_img {
opacity: 0;
transform: scale(0.01);
}
.creed_sun_img {
position: absolute;
top: 72px;
right: 0px;
height: auto;
width: 364px;
overflow: hidden;
opacity: 0.15;
}
.why_me {
height: 1458px;
width: 1920px;
background-image: url(../img/title_about_me/why_me/background_pc.svg);
}
.why_me > h2 {
top: 268px;
right: 313px;
width: 592px;
background-color: rgba(255, 255, 255, 0.7);
}
.why_me_photo_pc {
position: absolute;
top: 67px;
left: 370px;
}
.why_me_photo_mob {
display: none;
}
.why_me_frame_pc {
position: absolute;
z-index: 5;
top: 322px;
right: 340px;
filter: drop-shadow(15px 16px 10px rgba(0, 0, 0, 0.6));
pointer-events: none;
}
.why_me_frame_mob {
display: none;
}
.why_me_text {
top: 363px;
right: 409px;
width: 410px;
height: 600px;
}
.why_me_text > div:nth-child(1) {
float: left;
height: 600px;
width: 212px;
shape-outside: url('../img/title_about_me/why_me/text_frame.svg');
/* background-image: url('../img/title_about_me/why_me/text_frame.svg'); */
background: transparent;
opacity: 0; /* приховує фігуру, але залишає її для обтікання */
pointer-events: none; /* не заважає взаємодії з текстом */
}
.why_me_text > div:nth-child(2) {
font-size: 24px;
line-height: 28px;
}
.why_me_squares {
position: absolute;
height: 1460px;
width: 1920px;
overflow: hidden;
}
.why_me_squares > img {
position: absolute;
filter: drop-shadow(30px 30px 30px rgba(0, 0, 0, 0.3))sepia(0%) saturate(100%) hue-rotate(0deg);
}
.why_me_squares > img.animate {
animation: squares_hovering 6s ease-in-out 0s 1 normal none;
}
@keyframes squares_hovering {
0% {transform: scale(1.00); opacity: 1; filter: drop-shadow(30px 30px 30px rgba(0, 0, 0, 0.3)) sepia( 0%) saturate(100%) hue-rotate( 0deg);}
20% {transform: scale(1.65); opacity: 1; filter: drop-shadow(30px 30px 30px rgba(0, 0, 0, 0.3)) sepia(100%) saturate(500%) hue-rotate(-100deg);}
35% {transform: scale(0.01); opacity: 0; filter: drop-shadow(30px 30px 30px rgba(0, 0, 0, 0.3)) sepia(100%) saturate(500%) hue-rotate(-200deg);}
80% {transform: scale(0.01); opacity: 0; filter: drop-shadow(30px 30px 30px rgba(0, 0, 0, 0.3)) sepia(100%) saturate(500%) hue-rotate( 200deg);}
95% {transform: scale(1.40); opacity: 1; filter: drop-shadow(30px 30px 30px rgba(0, 0, 0, 0.3)) sepia(100%) saturate(500%) hue-rotate( 100deg);}
100% {transform: scale(1.00); opacity: 1; filter: drop-shadow(30px 30px 30px rgba(0, 0, 0, 0.3)) sepia( 0%) saturate(100%) hue-rotate( 0deg);}
}
.why_me_squares > img:nth-of-type(1) {
z-index: 2;
top: 108px;
left: 468px;
height: 80px;
}
.why_me_squares > img:nth-of-type(2) {
z-index: 1;
top: 165px;
left: 380px;
height: 130px;
}
.why_me_squares > img:nth-of-type(3) {
z-index: 1;
top: 319px;
left: 118px;
height: 229px;
}
.why_me_squares > img:nth-of-type(4) {
z-index: 2;
top: 416px;
left: 290px;
height: 156px;
}
.why_me_squares > img:nth-of-type(5) {
z-index: 1;
top: 379px;
left: 427px;
height: 55px;
}
.why_me_squares > img:nth-of-type(6) {
z-index: 2;
top: 611px;
left: -94px;
height: 182px;
}
.why_me_squares > img:nth-of-type(7) {
z-index: 1;
top: 725px;
left: -127px;
height: auto;
}
.why_me_squares > img:nth-of-type(8) {
z-index: 2;
top: 1056px;
left: 31px;
height: 236px;
}
.why_me_squares > img:nth-of-type(9) {
z-index: 2;
top: 174px;
left: 1781px;
height: 131px;
}
.why_me_squares > img:nth-of-type(10) {
z-index: 1;
top: 264px;
left: 1672px;
height: 193px;
}
.why_me_squares > img:nth-of-type(11) {
z-index: 2;
top: 526px;
left: 1673px;
height: 117px;
}
.why_me_squares > img:nth-of-type(12) {
z-index: 1;
top: 613px;
left: 1759px;
height: 191px;
}
.why_me_squares > img:nth-of-type(13) {
z-index: 2;
top: 833px;
left: 1587px;
height: 117px;
}
.why_me_squares > img:nth-of-type(14) {
z-index: 1;
top: 898px;
left: 1611px;
height: 237px;
}
.why_me_squares > img:nth-of-type(15) {
z-index: 3;
top: 1063px;
left: 1456px;
height: 55px;
}
.why_me_squares > img:nth-of-type(16) {
z-index: 2;
top: 1103px;
left: 1401px;
height: 287px;
filter: drop-shadow(30px 22px 24px rgba(0, 0, 0, 0.3));
}
.how_work {
position: relative;
top: calc(-185px *var(--scale_1920));
height: 1154px;
width: 1920px;
background-image: url(../img/title_about_me/how_work/background_pc.svg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: auto;
}
.how_work > h2 {
top: 336px;
left: 363px;
font-size: 40px;
}
.how_work_text {
top: 415px;
left: 370px;
width: 580px;
line-height: 40px;
}
.how_work_tree_img {
top: 212px;
left: 930px;
}
.how_work_content_background {
top: 171px;
left: 251px;
height: 824px;
width: 1414px;
opacity: 0.9;
background-image: url(../img/title_about_me/how_work/content_background_pc_blue.svg);
}
.how_work_content_background > div {
height: 100%;
width: 100%;
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.35));
background-image: url(../img/title_about_me/how_work/content_background_pc_white.svg);
}
.how_work_serotonin_img {
top: 67px;
left: 30px;
}
.how_work_serotonin_title {
top: 556px;
left: 53px;
}
.how_work_dopamine_img {
top: 700px;
right: 12px;
}
.how_work_dopamine_title {
top: 184px;
right: 19px;
}
.add_active {
position: relative;
top: calc(-385px *var(--scale_1920));
height: 1336px;
width: 1920px;
background-image: url(../img/title_about_me/add_active/background_pc.svg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: auto;
}
.add_active > h2 {
top: 230px;
left: 470px;
}
.add_active_photo_left_wrapper {
z-index: 2;
top: 306px;
left: 304px;
width: 683px;
}
.add_active_photo_left_photo {
left: 88px;
}
.add_active_photo_left_stiky {
left: 0;
}
.add_active_photo_left_background {
left: 56px;
}
.add_active_photo_right_wrapper {
z-index: 1;
top: 346px;
right: 325px;
width: 670px;
}
.add_active_text_wrapper {
top: 755px;
left: 670px;
}
.add_active_tracery {
}
.add_active_tracery_hash {
top: 883px;
left: 292px;
}
.add_active_tracery_books {
top: 123px;
left: 24px;
height: 1140px;
width: 1896px;
opacity: 0.3;
}
.add_active_tracery_stack {
top: 417px;
left: 1px;
height: 764px;
width: 1881px;
opacity: 0.3;
}
.additional_wrapper {
position: relative;
top: calc(-385px *var(--scale_1920));
height: 965px;
width: 1920px;
}
.additional {
position: absolute;
height: 1350px;
width: 1920px;
background-image: url(../img/title_about_me/additional/background.svg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: auto;
}
.additional > h2 {
top: 101px;
left: 435px;
}
.additional_title_background {
top: 59px;
left: 393px;
filter: sepia(70%) saturate(800%) hue-rotate(165deg);
}
.additional > h2 ~ *:nth-child(3) {
top: 55px;
left: 391px;
}
.additional_photo {
top: 14px;
left: 586px;
}
.additional_text_wrapper {
top: 591px;
left: 370px;
}
.additional_drop_1 {
top: 140px;
left: 0px;
}
.additional_drop_2 {
top: -157px;
left: 1355px;
}
.additional_drop_3 {
top: 20px;
left: 1552px;
}
.additional_drop_4 {
top: 433px;
right: 0;
width: 251px;
overflow: hidden;
}
.additional_drop_5 {
position: absolute;
top: 705px;
left: 0px;
overflow: hidden;
}
.additional_drop_5 > img {
margin-left: -173px;
}
.additional_drop_6 {
top: 1017px;
left: 1380px;
}
.additional_slogan {
top: 1182px;
width: 1143px;
}
}
@media (min-aspect-ratio: 1001/1000) /* ! landscape */ {
.title_wrapper {
/* см.общие свойства */
}
.title_wrapper_background_wrapper {
/* см.общие свойства */
}
.title_wrapper_background_img {
/* см.общие свойства */
height: 5000px;
width: 5000px;
}
.title_wrapper_background_photo_frame {
position: absolute;
height: auto;
width: auto;
transform: scale(var(--title_scale));
transform-origin: center;
}
.title_wrapper_background_photo_slogan_frame_outer {
position: absolute;
/* left: 0px; */
height: auto;
width: auto;
transform: scale(var(--title_scale));
transform-origin: center;
}
.title_outer {
/* см.общие свойства */
}
.title_inner {
height: 1080px;
width: 1920px;
}
.title_content_wrapper {
float: left;
width: 1159px;
}
.title_slogan {
margin-top: 24px;
margin-left: 61px;
position: relative;
z-index: -1;
width: 1850px;
text-align: left;
overflow: hidden;
}
.title_slogan > img {
position: relative;
top: 0px;
left: 1340px;
width: 1130px;
transition: all 2s cubic-bezier(0.63, 0.25, 0.04, 0.85);
}
.title_slogan.visible > img {
left: 0px;
}
.title_slogan_background {
position: absolute;
height: 80px;
width: 1100px;
transform: translateY(-135px) translateX(60px);
z-index: -2;
box-shadow: 0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff;
background-color: #7fd9ff;
}
.title_brain_landscape_img {
height: 638px;
width: 1134px;
transform: scale(0.01);
filter: drop-shadow(0 0 24px white) blur(50px);
transition: all 2s cubic-bezier(0.63, 0.25, 0.04, 0.85);
}
.title_brain_landscape_img.visible {
transform: scale(1);
filter: drop-shadow(0 0 24px white) blur(0px);
}
.title_brain_portrait_PC_img {
display: none;
}
.title_pib {
height: 118px;
width: 100%;
overflow: hidden;
font-size: 119px;
line-height: 106px;
color: white;
font-weight: bold;
text-align: right;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.title_pib > span {
position: relative;
top: 0;
left: -1155px;
transition: all 2s cubic-bezier(0.63, 0.25, 0.04, 0.85);
}
.title_pib.visible > span {
left: 0px;
}
.title_pib_background {
position: absolute;
height: 130px;
width: 1100px;
transform: translateY(-100px) translateX(56px);
z-index: -1;
box-shadow: 0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff;
background-color: #7fd9ff;
}
.divide_line {
margin-top: 2px;
position: relative;
left: 1200px;
z-index: -1;
height: 4px;
width: 1300px;
background-color: white;
box-shadow: 4px 1px 0px 0px rgba(0, 0, 0, 0.5);
transition: all 2s cubic-bezier(0.63, 0.25, 0.04, 0.85);
}
.divide_line.visible {
left: 61px;
}
.title_specialization {
margin-top: 6px;
width: 100%;
overflow: hidden;
font-size: 34px;
color: white;
font-weight: bold;
line-height: 30px;
text-align: left;
filter: drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.6));
}
.title_specialization > span {
position: relative;
left: -720px;
display: inline-block;
width: 800px;
transition: all 2s cubic-bezier(0.63, 0.25, 0.04, 0.85);
}
.title_specialization.visible > span {
left: 61px;
}
.title_specialization_background {
position: absolute;
height: 70px;
width: 720px;
transform: translateY(-60px) translateX(56px);
z-index: -2;
box-shadow: 0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff,
0 0 50px #7fd9ff;
background-color: #7fd9ff;
}
.nav_arrow_wrapper {
display: inline-block;
left: 380px;
top: -10px;
}
.title_photo_landscape {
height: 1200px;
width: 761px;
float: right;
object-fit: cover;
object-position: -1358px -60px;
}
.title_photo_slogan_frame {
position: absolute;
transform: translateX(12px);
height: 1080px;
z-index: 1;
}
.title_photo_portrait_PC {
display: none;
}
.title_photo_portrait_mobile {
display: none;
}
.title_photo_portrait_mobile_background {
display: none;
}
}
@media (max-aspect-ratio: 1001/1000) and (min-width: 601px) /* ! portrait+PC */ {
.title_wrapper {
/* см.общие свойства */
}
.title_wrapper_background_wrapper {
/* см.общие свойства */
}
.title_wrapper_background_img {
/* см.общие свойства */
height: 3700px;
width: 3700px;
filter: blur(5px);
}
.title_wrapper_background_photo_frame {
display: none;
}
.title_outer {
/* см.общие свойства */
}
.title_inner {
height: 1080px;
width: 768px;
}
.title_content_wrapper {
width: 100%;
}
.title_slogan {
margin: 26px auto 0 auto;
width: 650px;
}
.title_slogan > img {
width: 100%;
}
.title_slogan_background {
display: none;
}
.title_brain_landscape_img {
display: none;
}
.title_brain_portrait_PC_img {
margin-top: 240px;
height: 551px;
width: 768px;
filter: drop-shadow(0 0 10px white);
}
.title_pib {
position: absolute;
top: 165px;
left: 14px;
height: 150px;
width: 480px;
font-size: 80px;
line-height: 72px;
color: white;
font-weight: bold;
text-align: right;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.title_pib_background {
display: none;
}
.divide_line {
display: none;
}
.title_specialization {
display: inline-block;
position: relative;
left: -96px;
margin-top: 12px;
height: 50px;
width: 670px;
font-size: 32px;
color: white;
font-weight: bold;
line-height: 30px;
text-align: center;
transform-origin: top left;
filter: drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.6));
}
.title_specialization > span {
--text-condensed: 0.85;
}
.title_specialization_background {
display: none;
}
.nav_arrow_wrapper {
display: block;
margin: auto;
margin-top: 4px;
}
.title_photo_landscape {
display: none;
}
.title_photo_slogan_frame {
display: none;
}
.title_photo_portrait_PC {
position: absolute;
top: 105px;
left: 484px;
}
.title_photo_portrait_mobile {
display: none;
}
.title_photo_portrait_mobile_background {
display: none;
}
}
@media (max-aspect-ratio: 1001/1000) and (max-width: 600px) /* ! portrait+mobile */ {
header{
/* [[css/header.css]] */
}
.title_wrapper {
/* см.общие свойства */
}
.title_wrapper_background_wrapper {
/* см.общие свойства */
}
.title_wrapper_background_img {
/* см.общие свойства */
height: 3400px;
width: 3400px;
filter: blur(5px);
}
.title_wrapper_background_photo_frame {
display: none;
}
.title_outer {
/* см.общие свойства */
}
.title_inner {
height: 972px;
width: 600px;
}
.title_content_wrapper {
width: 100%;
text-align: center;
}
.title_slogan {
margin: 16px auto 0 auto;
width: 550px;
}
.title_slogan > img {
width: 100%;
}
.title_slogan_background {
display: none;
}
.title_brain_landscape_img {
display: none;
}
.title_brain_portrait_PC_img {
display: none;
}
.title_pib {
display: inline-block;
margin-top: 700px;
font-size: 58px;
line-height: 46px;
color: white;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.title_pib_background {
display: none;
}
.divide_line {
display: none;
}
.title_specialization {
display: inline-block;
margin-top: 8px;
width: 500px;
font-size: 23px;
color: white;
line-height: 20px;
text-align: center;
filter: drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.6));
}
.title_specialization_background {
display: none;
}
.nav_arrow_wrapper {
display: block;
margin: auto;
}
.title_photo_landscape {
display: none;
}
.title_photo_slogan_frame {
display: none;
}
.title_photo_portrait_PC {
display: none;
}
.title_photo_portrait_mobile {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100px;
}
.title_photo_portrait_mobile_background {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 144px;
z-index: -1;
}
.who_am_i {
height: 870px;
width: 600px;
}
.who_am_i_background {
height: calc(100% - 31px);
}
.who_am_i_photo {
top: 93px;
left: 10px;
height: 777px;
width: 280px;
overflow: hidden;
}
.who_am_i_photo > img {
margin-left: -100px;
height: 777px;
}
.who_am_i_intro {
top: 179px;
left: 309px;
width: 210px;
font-size: 18px;
line-height: 21.5px;
}
.who_am_i_brain_img {
top: 99px;
right: 4px;
height: 272px;
filter: invert(100%);
}
.who_am_i_brain_img > img {
left: 0;
height: 272px;
}
.who_am_i > h2 {
top: 573px;
right: 7px;
font-size: 24px;
}
.who_am_i_who_am_i {
top: 607px;
left: 308px;
width: 280px;
font-size: 20px;
line-height: 20px;
overflow: hidden;
}
.who_am_i_who_am_i > p > :nth-child(2) {
--text-condensed: 0.85;
white-space: nowrap;
}
.who_am_i_who_am_i_background {
top: 567px;
left: 0;
height: 207px;
width: 600px;
background-image: url(../img/title_about_me/who_am_i/background_mob.svg);
}
.education {
top: calc(-31px * var(--scale_1920));
height: 1086px;
width: 600px;
}
.education > h2 {
top: 106px;
left: 50%;
transform: translateX(-50%);
height: 48px;
width: 302px;
font-size: 24px;
line-height: 51px;
color: white;
filter: drop-shadow(1px 1px 0px black);
background-image: url(../img/title_about_me/education/title_background_mob.svg);
}
.education > h2 + div {
display: none;
}
.education_text_wrapper {
z-index: 1;
top: 10px;
height: 1086px;
width: 600px;
background-image: url(../img/title_about_me/education/background_mob_top.webp),
url(../img/title_about_me/education/background_mob_bottom.svg);
}
.education_embroidery_img {
display: none;
}
.education_hat {
top: 753px;
left: 61px;
filter: invert(100%);
opacity: 0.3;
}
.education_text {
top: 560px;
left: 20px;
width: 560px;
}
.education_text > div:nth-child(1) {
height: 214px;
width: 264px;
shape-outside: url('../img/title_about_me/education/text_shape_right_mob.svg'); /* правильний шлях */
}
.education_text > div:nth-child(2) {
font-size: 20px;
line-height: 24px;
}
.education_photo_pc {
display: none;
}
.education_photo_mob {
position: absolute;
top: 0;
left: 0;
height: 921px;
width: 600px;
}
.my_way {
top: calc(-125px * var(--scale_1920));
height: 1200px;
width: 600px;
background-image: url(../img/title_about_me/my_way/background_mob.svg);
}
.my_way > h2 {
top: 312px;
right: 22px;
height: 60px;
width: 350px;
overflow: hidden;
font-size: 27px;
line-height: 27px;
}
.my_way > h2 > span {
height: 60px;
--text-condensed: 0.8;
}
.my_way > h2 > div > span {
margin-top: 6px;
}
.my_way_photo {
top: 241px;
left: 11px;
height: 679px;
width: 279px;
overflow: hidden;
}
.my_way_photo > img {
position: relative;
left: -76px;
height: 679px;
}
.my_way_text {
top: 473px;
left: 301px;
width: 280px;
font-size: 20px;
line-height: 23px;
}
.my_way_hand {
top: 846px;
right: 17px;
height: 136px;
width: 192px;
}
.my_way_text_background {
top: 170px;
left: 150px;
height: 821px;
width: 440px;
}
.my_way_tracery {
top: 0;
left: 0;
height: 1200px;
width: 600px;
opacity: 0.4;
}
.my_way_tracery > img {
position: relative;
left: -486px;
height: 1185px;
}
.my_way_background {
display: none;
}
.creed {
margin-top: calc(-308px * var(--scale_1920));
height: 1500px;
width: 600px;
background-image: url(../img/title_about_me/creed/background_mob.svg);
}
.creed > h2 > img:nth-of-type(1) {
display: none;
}
.creed > h2 > img:nth-of-type(2) {
position: absolute;
top: 204px;
left: 139px;
width: 412px;
}
.creed_content_wrapper {
top: 470px;
left: 0;
height: 1000px;
width: 600px;
overflow: hidden;
background-image: url(../img/title_about_me/creed/text_wrapper_background_mob.svg);
}
.creed_content_title {
margin-left: -60px;
display: flex;
align-items: center;
justify-content: flex-end;
width: 250px;
font-size: 24px;
line-height: 20px;
}
.creed_content_title > span {
--text-condensed: 0.6;
}
.creed_content_text {
margin-left: 26px;
width: 367px;
}
.creed_content_text > span {
}
.creed_devil_img {
top: 128px;
height: 245px;
width: 210px;
opacity: 0.4;
}
.creed_devil_img > img {
margin-left: -30px;
height: 245px;
}
.creed_angel_img {
top: 2px;
right: 0;
height: 226px;
width: 225px;
overflow: hidden;
opacity: 0.4;
}
.creed_angel_img > img {
height: 226px;
}
.creed_sun_img {
display: none;
}
.why_me {
position: relative;
height: 1250px;
width: 600px;
background-image: url(../img/title_about_me/why_me/background_mob.svg);
}
.why_me::before {
position: absolute;
z-index: 2;
top: -9px;
left: 0;
height: 108px;
width: 600px;
content: "";
clip-path: inset(8px 0 0 0);
filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, 0.25));
background-image: url(../img/title_about_me/why_me/background_mob_wave_blue.svg);
}
.why_me::after {
position: absolute;
z-index: 1;
top: -9px;
left: 0;
height: 108px;
width: 600px;
content: "";
clip-path: inset(9px 0 0 0);
filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, 0.15));
background-image: url(../img/title_about_me/why_me/background_mob_wave_white.svg);
}
.why_me > h2 {
top: 154px;
left: 26px;
width: 560px;
background-color: rgba(255, 255, 255, 1);
}
.why_me_photo_pc {
display: none;
}
.why_me_photo_mob {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 1250px;
width: 600px;
}
.why_me_frame_pc {
display: none;
}
.why_me_frame_mob {
position: absolute;
z-index: 5;
top: 208px;
right: 18px;
filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1));
}
.why_me_text {
top: 392px;
right: 24px;
width: 271px;
overflow: hidden;
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.35));
}
.why_me_text > div:nth-child(2) {
font-size: 20px;
line-height: 24px;
}
.why_me_squares {
display: none;
}
.how_work {
height: 1228px;
width: 600px;
background-image: url(../img/title_about_me/how_work/background_mob.svg);
}
.how_work > h2 {
top: 167px;
left: 50px;
font-size: 24px;
}
.how_work_text {
top: 242px;
left: 40px;
height: 671px;
width: 520px;
line-height: 38px;
}
.how_work_text > div:nth-child(1) {
float: right;
height: 309px;
width: 381px;
shape-outside: url('../img/title_about_me/how_work/text_shape_up_mob.svg');
background: transparent;
opacity: 0; /* приховує фігуру, але залишає її для обтікання */
pointer-events: none; /* не заважає взаємодії з текстом */
}
.how_work_text > div:nth-child(2) {
margin-top: 28px;
float: left;
height: 331px;
width: 377px;
shape-outside: url('../img/title_about_me/how_work/text_shape_bottom_mob.svg');
background: transparent;
opacity: 0; /* приховує фігуру, але залишає її для обтікання */
pointer-events: none; /* не заважає взаємодії з текстом */
}
.how_work_tree_img {
z-index: 1;
top: 300px;
left: 80px;
width: 450px;
opacity: 0.2;
}
.how_work_content_background {
top: 87px;
left: 0;
height: 918px;
width: 600px;
opacity: 0.9;
background-image: url(../img/title_about_me/how_work/content_background_mob_blue.svg);
}
.how_work_content_background > div {
height: 100%;
width: 100%;
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.35));
background-image: url(../img/title_about_me/how_work/content_background_mob_white.svg);
}
.how_work_serotonin_img {
top: 786px;
left: 23px;
width: 352px;
transform: rotate(-178.19deg) scaleX(-1);
opacity: 0.7;
}
.how_work_serotonin_title {
top: 1022px;
left: 191px;
height: 160px;
transform: rotate(-90deg);
}
.how_work_dopamine_img {
top: 33px;
right: 40px;
height: 287px;
width: 247px;
transform: rotate(-89.51deg);
opacity: 0.7;
}
.how_work_dopamine_title {
top: -45px;
right: 90px;
height: 177px;
transform: rotate(90deg);
}
.add_active {
height: 1100px;
width: 600px;
background-image: url(../img/title_about_me/add_active/background_mob.svg);
}
.add_active > h2 {
top: 37px;
left: -33px;
transform: scale(0.673);
transform-origin: top left;
}
.add_active_photo_left_wrapper {
z-index: 1;
top: 123px;
left: 0;
width: 640px;
overflow: hidden;
transform: scale(0.6);
transform-origin: top left;
}
.add_active_photo_left_photo {
left: 45px;
}
.add_active_photo_left_stiky {
left: -43px;
}
.add_active_photo_left_background {
left: 13px;
}
.add_active_photo_right_wrapper {
z-index: 2;
top: 420px;
right: -257px;
width: 642px;
transform: scale(0.6);
transform-origin: top left;
overflow: hidden;
}
.add_active_text_wrapper {
top: 760px;
left: 88px;
transform: scale(0.6);
transform-origin: top left;
}
.add_active_tracery {
}
.add_active_tracery_hash {
top: 931px;
right: 75px;
height: 123px;
}
.add_active_tracery_books {
top: 190px;
right: 37px;
height: 513px;
width: 563px;
overflow: hidden;
opacity: 0.3;
}
.add_active_tracery_books > img {
float: right;
height: 513px;
transform: scaleX(-1);
}
.add_active_tracery_stack {
top: 405px;
left: 33px;
height: 344px;
width: 567px;
overflow: hidden;
opacity: 0.3;
}
.add_active_tracery_stack > img {
height: 344px;
transform: scaleX(-1);
}
.additional_wrapper {
margin-top: -50px;
height: 1293px;
width: 600px;
overflow: hidden;
background-image: url(../img/title_about_me/additional/background_mob.svg);
}
.additional {
}
.additional > h2 {
top: 147px;
left: 11px;
transform: scale(0.6);
}
.additional_title_background {
top: 108px;
left: -30px;
transform: scale(0.6);
}
.additional > h2 ~ *:nth-child(3) {
top: 92px;
left: -37px;
transform: scale(0.6);
}
.additional_photo {
top: 30px;
left: -138px;
transform: scale(0.5);
}
.additional_text_wrapper {
top: 578px;
left: -131px;
transform: scale(0.6);
}
.additional_drop_1 {
top: 331px;
left: -70px;
transform: scale(0.418);
}
.additional_drop_1 > img {
margin-left: -144px;
}
.additional_drop_2 {
top: 88px;
left: 421px;
transform: scale(0.292);
}
.additional_drop_3 {
top: 97px;
right: -112px;
transform: scale(0.6);
transform-origin: top left;
}
.additional_drop_4 {
top: 590px;
left: 272px;
height: 454px;
width: 451px;
transform: scale(0.443);
}
.additional_drop_5 {
display: none;
}
.additional_drop_6 {
top: 24px;
left: 27px;
transform: scale(0.6);
transform-origin: top left;
}
.additional_slogan {
top: 1209px;
width: 560px;
}
}
@supports not (backdrop-filter: blur(5px)) /* на миМакс в опере не работает блюр */ {
header::before {
background-color: #7cd7fe;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.35))
}
.header_submenu1::before {
background-color: #7cd7fe;
}
}
@supports not (font-size: clamp(1rem, 2vw, 3rem)) { /* на миМакс в опере не работает clamp */
.footer_background {
display: none;
}
}