/*----------------------------------------*/ /* Button CSS START /*----------------------------------------*/ .cus-btn { flex-shrink: 0; position: relative; overflow: hidden; border: 1px solid $accent-1; display: inline-flex; justify-content: center; font-size: clamp(14px, 0.938vw, 32px); // font-family: $font-sec; font-weight: 500; line-height: 120%; /* 21.6px */ align-items: center; height: clamp(42px, 2.5vw, 84px); padding: 0 32px; text-decoration: none; border-radius: $br-10; cursor: pointer; text-transform: capitalize; background: $accent-1; user-select: none; text-align: center; -webkit-user-select: none; touch-action: manipulation; span { svg { width: clamp(18px, 1.25vw, 32px); height: clamp(18px, 1.25vw, 32px); path { fill: $white; } } &:first-child { color: $white; position: relative; transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1); z-index: 10; } &:last-child { color: $accent-1; display: block; position: absolute; bottom: 0; transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1); z-index: 100; opacity: 0; top: 42%; left: 50%; transform: translateY(225%) translateX(-50%); height: 14px; line-height: 13px; width: 100%; text-align: center; svg { path { fill: $accent-1; } } } } &:after { content: ""; position: absolute; bottom: -50%; left: 0; width: 100%; height: 100%; background-color: $accent-2; border: 0; transform-origin: bottom center; transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1); transform: skewY(9.3deg) scaleY(0); z-index: 50; } &:hover { border: 1px solid $accent-1; &:after { transform-origin: bottom center; transform: skewY(6.3deg) scaleY(2); } span { &:last-child { transform: translateX(-50%) translateY(-50%); opacity: 1; transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1); } } } } .cus-btn-2 { flex-shrink: 0; position: relative; overflow: hidden; border: 1px solid $accent-1; display: inline-flex; text-transform: capitalize; justify-content: center; font-size: clamp(14px, 0.938vw, 32px); align-items: center; height: clamp(42px, 2.5vw, 84px); padding: 0 32px; font-family: $font-sec; font-weight: 500; line-height: 120%; /* 21.6px */ text-decoration: none; border-radius: $br-10; cursor: pointer; background: transparent; user-select: none; text-align: center; -webkit-user-select: none; touch-action: manipulation; span { svg { width: clamp(18px, 1.25vw, 32px); height: clamp(18px, 1.25vw, 32px); path { fill: $accent-1; } } &:first-child { color: $accent-1; position: relative; transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1); z-index: 10; } &:last-child { color: $white; display: block; position: absolute; bottom: 0; transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1); z-index: 100; opacity: 0; top: 42%; left: 50%; transform: translateY(225%) translateX(-50%); height: 14px; line-height: 13px; width: 100%; text-align: center; svg { path { fill: $white; } } } } &:after { content: ""; position: absolute; bottom: -50%; left: 0; width: 100%; height: 100%; background-color: $accent-1; border: 0; transform-origin: bottom center; transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1); transform: skewY(9.3deg) scaleY(0); z-index: 50; } &:hover { border: 1px solid $accent-1; &:after { transform-origin: bottom center; transform: skewY(6.3deg) scaleY(2); } span { &:last-child { transform: translateX(-50%) translateY(-50%); opacity: 1; transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1); } } } } .cus-arrow-btn { display: flex; align-items: center; gap: $gap-8; color: $black; transition: $transition; svg { path { transition: $transition; } } &:hover { transition: 0.2s ease-in-out; color: $accent-1; gap: $gap-12; svg { path { fill: $accent-1; transition: $transition; } } } } /*----------------------------------------*/ /* scroll to top /*----------------------------------------*/ .scrollToTopBtn { background-color: $accent-1; border: 1px solid $accent-1; border-radius: $br-8; color: $white; cursor: pointer; font-size: clamp(18px, 1.25vw, 48px); line-height: 48px; display: grid; align-items: center; justify-content: center; width: clamp(40px, 2.5vw, 64px); height: clamp(40px, 2.5vw, 64px); position: fixed; bottom: 30px; right: 30px; z-index: 100; opacity: 0; transform: translateY(100px); transition: all .5s ease; &:hover { background: $accent-2; color: $accent-1; transition: $transition; border: 1px solid $accent-1; } } .showBtn { opacity: 1; transform: translateY(0); } // SLIDER ARROWS .slider-arrows { display: flex; align-items: center; gap: $gap-16; .arrow-btn { width: clamp(32px, 2.5vw, 64px); height: clamp(32px, 2.5vw, 64px); border-radius: $br-8; display: grid; align-items: center; justify-content: center; background: $light-white; transition: $transition; border: 1px solid $accent-1; svg { width: clamp(22px, 1.458vw, 64px); height: clamp(22px, 1.458vw, 64px); transition: $transition; path { fill: $accent-1; transition: $transition; } } &:hover { background-color: $accent-1; transition: $transition; path { fill: $white; transition: $transition; } } } } // SOCIAL ICONS .social-icons { display: flex; align-items: center; gap: clamp(8px, 0.625vw, 20px); @include media-query(490px) { gap: 16px; } &.icon-v2 { gap: $gap-20; } li { a { display: grid; align-items: center; justify-content: center; border-radius: 4px; transition: $transition; svg { width: clamp(20px, 1.25vw, 48px); height: clamp(20px, 1.25vw, 48px); path { transition: $transition; } } &:hover { svg { path { fill: $accent-2; transition: $transition; } } } } } } // =================== PAGINATIONS =================== // .pagination { margin-left: auto; margin-right: auto; text-align: center; overflow: hidden; display: flex; #border-pagination { padding: 10px; display: flex; gap: 11px; margin: 0 auto; padding: 0; text-align: center; li { display: inline; &:first-child { margin-right: 24px; @include media-query(490px) { margin-right: 9px; } } &:last-child { margin-left: 24px; @include media-query(490px) { margin-left: 9px; } } span { color: $dark-gray; transition: $transition; } a { display: flex; align-items: center; justify-content: center; text-decoration: none; color: $accent-1; width: clamp(36px, 2.448vw, 60px); height: clamp(36px, 2.448vw, 60px); border-radius: 4px; border: 1px solid $accent-1; background: $accent-3; float: left; transition: $transition; font-family: $font-sec; font-size: clamp(16px, 0.938vw, 32px); font-style: normal; font-weight: 500; line-height: 150%; /* 21.6px */ @include media-query(399px) { font-size: 14px; } svg { @include media-query(490px) { width: 10px; height: 17px; } path { stroke: $black; transition: $transition; } } &.active { background-color: $accent-1; color: $white; border: 1px solid $accent-1; svg { path { transition: $transition; } } } &:hover { background-color: $accent-1; color: $white; border-radius: 1px solid $accent-1; svg { path { transition: $transition; } } } } &:hover { span { color: $white; transition: $transition; } } } } }