File: /var/www/quadcode/one-time-popup/src/scss/components/popup-webinar/index.scss
@use '../../utils/media';
@use '../../utils/variables';
.popupWebinar {
position: fixed;
display: flex;
z-index: 101;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: variables.$primary2;
backdrop-filter: blur(15px);
overflow-y: auto;
opacity: 0;
pointer-events: none;
transition: 0.4s ease-in-out;
&.active {
display: flex;
opacity: 1;
pointer-events: all;
}
@include media.breakpoint-down('tabM') {
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
width: 1232px;
&::-webkit-scrollbar {
width: 0;
}
@include media.breakpoint-down('tabL') {
height: 100%;
overflow-y: auto;
width: 98%;
margin: auto;
padding: 0px;
&::-webkit-scrollbar {
width: 0;
}
}
@include media.breakpoint-down('tabM') {
max-width: 359px;
margin: auto;
width: 100%;
}
}
&::-webkit-scrollbar {
width: 0;
opacity: 0;
display: none;
}
& .container {
@include media.breakpoint-down('tabL') {
height: auto;
}
}
&__content {
background: variables.$white-bg;
border-radius: 32px;
padding: 64px;
width: 1232px;
min-height: 1003px;
position: relative;
overflow: hidden;
margin: 20px 0;
@include media.breakpoint-down('deskL') {
padding: 48px;
width: 893px;
min-height: 789px;
}
@include media.breakpoint-down('tabL') {
padding: 32px;
width: 750px;
min-height: 665px;
margin: 10px 0;
}
@include media.breakpoint-down('tabM') {
padding: 20px;
width: 359px;
min-height: 626px;
position: relative;
}
}
&__title {
font-family: 'Suisse Intl', serif;
font-weight: 500;
font-size: 24px;
line-height: 32px;
letter-spacing: -0.35px;
position: relative;
margin-bottom: 25px;
height: 50px;
border-radius: 91px;
border: 1px solid variables.$red;
color: variables.$red;
padding: 9px 24px;
display: inline-block;
@include media.breakpoint-down('tabL') {
font-weight: 400;
font-size: 14px;
line-height: 20px;
height: 38px;
margin-bottom: 13px;
}
@include media.breakpoint-down('tabM') {
font-size: 12px;
line-height: 14px;
height: 26px;
padding: 6px 15px;
margin-bottom: 9px;
}
p {
color: inherit;
font-family: inherit;
}
}
&__description {
font-family: 'Suisse Intl', serif;
font-weight: 500;
font-size: 64px;
line-height: 64px;
letter-spacing: -0.6px;
color: variables.$text-black;
text-align: left;
margin-bottom: 72px;
max-width: 653px;
@include media.breakpoint-down('deskL') {
font-size: 40px;
line-height: 46px;
max-width: 591px;
}
@include media.breakpoint-down('tabL') {
margin-bottom: 64px;
}
@include media.breakpoint-down('tabM') {
font-size: 26px;
line-height: 32px;
max-width: 100%;
margin-bottom: 32px;
br {
display: none;
}
}
p {
color: inherit;
font-family: inherit;
}
}
&__text {
font-family: 'Suisse Intl', serif;
font-weight: 500;
font-size: 24px;
line-height: 32px;
letter-spacing: -0.3px;
margin-bottom: 30px;
color: variables.$text-grey;
@include media.breakpoint-down('deskL') {
margin-bottom: 19px;
}
@include media.breakpoint-down('tabL') {
margin-bottom: 14px;
}
@include media.breakpoint-down('tabM') {
font-size: 18px;
line-height: 20px;
margin-bottom: 12px;
}
}
&__bullets {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 56px;
max-width: 670px;
@include media.breakpoint-down('deskL') {
margin-bottom: 85px;
max-width: 460px;
}
@include media.breakpoint-down('tabL') {
margin-bottom: 68px;
max-width: 334px;
}
@include media.breakpoint-down('tabM') {
gap: 0;
margin-bottom: 244px;
}
}
&__bullet {
font-family: 'Suisse Intl', serif;
font-size: 24px;
font-weight: 500;
line-height: 32px;
letter-spacing: -0.3px;
color: variables.$text-grey;
min-height: 44px;
margin-left: 50px;
position: relative;
@include media.breakpoint-down('deskL') {
font-size: 18px;
line-height: 26px;
min-height: 32px;
margin-left: 38px;
font-weight: 400;
}
@include media.breakpoint-down('tabL') {
font-size: 14px;
min-height: 24px;
line-height: 20px;
margin-left: 31px;
}
@include media.breakpoint-down('tabM') {
font-size: 12px;
line-height: 14px;
}
&:before {
left: -50px;
@include media.breakpoint-down('deskL') {
background-size: 75%;
background-repeat: no-repeat;
background-position: center center;
left: -44px;
}
@include media.breakpoint-down('tabL') {
background-size: 57%;
left: -40px;
}
}
&:nth-child(1) {
&:before {
background-image: url("data:image/svg+xml,%3Csvg width='44' height='45' viewBox='0 0 44 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.5 19.7004C34.5 18.8826 34.4989 18.3582 34.4668 17.9601C34.4437 17.674 34.4087 17.5279 34.3804 17.4484L34.355 17.3883C34.228 17.1362 34.0269 16.9342 33.7837 16.8087C33.7325 16.7823 33.6079 16.7311 33.2354 16.7004C32.8446 16.6681 32.329 16.6667 31.52 16.6667H12.48C11.6709 16.6667 11.1554 16.6681 10.7647 16.7004C10.3922 16.7311 10.2676 16.7823 10.2163 16.8087C9.97315 16.9341 9.77207 17.1361 9.64502 17.3883C9.61586 17.4462 9.56398 17.579 9.53321 17.9601C9.50108 18.3582 9.5 18.8826 9.5 19.7004V30.467C9.5 31.2847 9.50106 31.8091 9.53321 32.2072C9.56398 32.5882 9.61588 32.7206 9.64502 32.7785C9.7562 32.9993 9.92397 33.1813 10.127 33.3073L10.2163 33.3581L10.271 33.382C10.345 33.409 10.485 33.4433 10.7647 33.4665C11.1554 33.4988 11.6709 33.5002 12.48 33.5002H31.52C32.3291 33.5002 32.8446 33.4988 33.2354 33.4665C33.6081 33.4356 33.7325 33.3845 33.7837 33.3581L33.8731 33.3073C34.0761 33.1813 34.2439 32.9991 34.355 32.7785C34.3841 32.7206 34.436 32.5882 34.4668 32.2072C34.4989 31.8091 34.5 31.2847 34.5 30.467V19.7004ZM22 11.0002C20.6004 11.0002 20.198 11.0136 19.9053 11.0929C18.9798 11.3439 18.2461 12.0792 17.9932 13.0343C17.9537 13.1835 17.9308 13.3594 17.9175 13.6667H26.0825C26.0692 13.3595 26.0463 13.1835 26.0068 13.0343L25.9541 12.8576C25.6617 11.9889 24.9623 11.3283 24.0947 11.0929C23.802 11.0136 23.3996 11.0002 22 11.0002ZM37.5 30.467C37.5 31.2358 37.5012 31.9016 37.457 32.4484C37.4115 33.0122 37.3106 33.5795 37.0347 34.1276C36.6505 34.8907 36.0501 35.5232 35.3086 35.9435L35.1587 36.0246C34.6109 36.307 34.0435 36.4098 33.4824 36.4562C32.9394 36.5011 32.2789 36.5002 31.52 36.5002H12.48C11.7211 36.5002 11.0606 36.5011 10.5176 36.4562C9.95649 36.4098 9.38906 36.307 8.84131 36.0246V36.0241C8.03083 35.6062 7.37505 34.9413 6.96534 34.1276C6.68937 33.5795 6.58849 33.0122 6.54297 32.4484C6.49883 31.9016 6.5 31.2358 6.5 30.467V19.7004C6.5 18.9314 6.49882 18.2653 6.54297 17.7184C6.5885 17.1546 6.68933 16.5874 6.96534 16.0392C7.37515 15.2253 8.03081 14.5601 8.84131 14.1422C9.38905 13.8598 9.9565 13.757 10.5176 13.7106C11.0606 13.6657 11.7211 13.6667 12.48 13.6667H14.9155C14.9356 13.1428 14.9821 12.6862 15.0933 12.2663C15.617 10.2883 17.1471 8.73249 19.1201 8.19742H19.1206C19.896 7.98722 20.7957 8.00016 22 8.00016C23.2043 8.00016 24.104 7.98722 24.8794 8.19742H24.8799C26.7912 8.71578 28.2872 10.1921 28.855 12.0822L28.9067 12.2663C29.0179 12.6862 29.0644 13.1428 29.0845 13.6667H31.52C32.2789 13.6667 32.9394 13.6657 33.4824 13.7106C34.0435 13.757 34.611 13.8598 35.1587 14.1422C35.969 14.5601 36.6249 15.2252 37.0347 16.0392L37.1299 16.2458C37.3347 16.7292 37.4172 17.2251 37.457 17.7184C37.5012 18.2653 37.5 18.9314 37.5 19.7004V30.467Z' fill='%236E6E6E'/%3E%3C/svg%3E%0A");
content: '';
position: absolute;
width: 44px;
height: 44px;
top: -7px;
@include media.breakpoint-down('deskL') {
top: -10px;
}
@include media.breakpoint-down('tabL') {
top: -13px;
}
@include media.breakpoint-down('tabM') {
top: -15px;
}
}
}
&:nth-child(2) {
&:before {
background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32.4326 27.2461C33.0146 26.6567 33.9642 26.6506 34.5537 27.2324C35.1432 27.8145 35.1494 28.7645 34.5674 29.354L28.3467 35.6538C28.0648 35.9392 27.6804 36.1001 27.2793 36.1001C26.8782 36.1001 26.4937 35.9392 26.2119 35.6538L23.4473 32.854C22.8652 32.2645 22.8714 31.3145 23.4609 30.7324C24.0504 30.1505 25 30.1567 25.582 30.7461L27.2793 32.4648L32.4326 27.2461ZM18.2939 24.7002C19.1224 24.7002 19.7939 25.3718 19.7939 26.2002C19.7938 27.0285 19.1223 27.7002 18.2939 27.7002H15.5293C14.701 27.7001 14.0294 27.0285 14.0293 26.2002C14.0293 25.3718 14.7009 24.7003 15.5293 24.7002H18.2939ZM30.6177 22.7002V14.7202C30.6177 13.5197 30.6164 12.7081 30.5659 12.082C30.5168 11.473 30.4284 11.1715 30.3257 10.9673C30.0693 10.4577 29.6621 10.0468 29.1655 9.79053C28.9703 9.68981 28.6796 9.60166 28.0825 9.55225C27.4672 9.50133 26.6688 9.5 25.4824 9.5H16.6353C15.4489 9.5 14.6505 9.50133 14.0352 9.55225C13.438 9.60166 13.1473 9.68983 12.9521 9.79053C12.4556 10.0468 12.0484 10.4577 11.792 10.9673C11.6893 11.1715 11.6009 11.473 11.5518 12.082C11.5013 12.7081 11.5 13.5197 11.5 14.7202V29.2798C11.5 30.4804 11.5013 31.2919 11.5518 31.918C11.6009 32.527 11.6892 32.8284 11.792 33.0327L11.8418 33.127C12.0996 33.5929 12.4866 33.9688 12.9521 34.209V34.2095C13.1473 34.3102 13.438 34.3983 14.0352 34.4478C14.6505 34.4987 15.4489 34.5 16.6353 34.5H21.0586C21.887 34.5 22.5586 35.1716 22.5586 36C22.5586 36.8284 21.887 37.5 21.0586 37.5H16.6353C15.4991 37.5 14.5553 37.501 13.7876 37.4375C13.0019 37.3725 12.2685 37.232 11.5767 36.875C10.5126 36.326 9.65064 35.4519 9.11182 34.3809C8.76262 33.6867 8.62539 32.9508 8.56152 32.1592C8.49903 31.3845 8.5 30.4315 8.5 29.2798V14.7202C8.5 13.5685 8.49903 12.6155 8.56152 11.8408C8.62538 11.0492 8.7626 10.3133 9.11182 9.61914C9.65062 8.54818 10.5126 7.67409 11.5767 7.125C12.2685 6.768 13.0019 6.62753 13.7876 6.5625C14.5553 6.49897 15.499 6.5 16.6353 6.5H25.4824C26.6186 6.5 27.5624 6.49898 28.3301 6.5625C29.1158 6.62753 29.8492 6.76802 30.541 7.125C31.6051 7.67409 32.4666 8.54823 33.0054 9.61914C33.3547 10.3134 33.4923 11.0492 33.5562 11.8408C33.6187 12.6155 33.6177 13.5685 33.6177 14.7202V22.7002C33.6176 23.5285 32.946 24.2002 32.1177 24.2002C31.2893 24.2002 30.6178 23.5285 30.6177 22.7002ZM23.8237 19.1001C24.6521 19.1002 25.3237 19.7717 25.3237 20.6001C25.3237 21.4284 24.652 22.1 23.8237 22.1001H15.5293C14.701 22.1 14.0294 21.4284 14.0293 20.6001C14.0293 19.7717 14.7009 19.1002 15.5293 19.1001H23.8237ZM26.5884 13.5C27.4167 13.5001 28.0884 14.1716 28.0884 15C28.0884 15.8284 27.4167 16.4999 26.5884 16.5H15.5293C14.7009 16.4999 14.0293 15.8284 14.0293 15C14.0293 14.1716 14.7009 13.5001 15.5293 13.5H26.5884Z' fill='%236E6E6E'/%3E%3C/svg%3E%0A");
content: '';
position: absolute;
width: 44px;
height: 44px;
top: -7px;
@include media.breakpoint-down('deskL') {
top: -10px;
}
@include media.breakpoint-down('tabL') {
top: -13px;
}
@include media.breakpoint-down('tabM') {
top: -15px;
}
}
}
&:nth-child(3) {
&:before {
background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.5 8.66666C5.5 7.74619 6.24703 7 7.16854 7H36.8315C37.753 7 38.5 7.74619 38.5 8.66666C38.5 9.52454 37.8511 10.231 37.0169 10.3232V20.8825C37.0169 22.0695 37.0169 23.0602 36.9507 23.8696C36.8816 24.7138 36.7323 25.5064 36.35 26.2558C35.7635 27.4057 34.8276 28.3406 33.6764 28.9265C32.9261 29.3084 32.1326 29.4575 31.2875 29.5265C30.4772 29.5926 29.4853 29.5926 28.297 29.5926H26.6086L31.9671 34.0529C32.675 34.6422 32.7706 35.6931 32.1807 36.4003C31.5907 37.1074 30.5386 37.2029 29.8307 36.6137L23.6685 31.4843V35.3333C23.6685 36.2538 22.9215 37 22 37C21.0785 37 20.3315 36.2538 20.3315 35.3333V31.4843L14.1693 36.6137C13.4614 37.2029 12.4093 37.1074 11.8193 36.4003C11.2294 35.6931 11.325 34.6422 12.033 34.0529L17.3914 29.5926H15.703C14.5147 29.5926 13.5228 29.5926 12.7125 29.5265C11.8674 29.4575 11.0739 29.3084 10.3236 28.9265C9.17245 28.3406 8.23652 27.4057 7.64997 26.2558C7.26766 25.5064 7.11836 24.7138 7.04931 23.8696C6.9831 23.0602 6.98312 22.0694 6.98315 20.8824L6.98315 10.3232C6.14889 10.231 5.5 9.52454 5.5 8.66666ZM10.3202 10.3333V20.8148C10.3202 22.0869 10.3215 22.9407 10.3753 23.5982C10.4275 24.2362 10.5207 24.5413 10.6233 24.7425C10.8899 25.2652 11.3154 25.6902 11.8386 25.9565C12.0401 26.059 12.3455 26.1521 12.9843 26.2042C13.6425 26.2579 14.4973 26.2592 15.7708 26.2592H28.2292C29.5027 26.2592 30.3575 26.2579 31.0157 26.2042C31.6545 26.1521 31.9599 26.059 32.1614 25.9565C32.6846 25.6902 33.1101 25.2652 33.3767 24.7425C33.4793 24.5413 33.5725 24.2362 33.6247 23.5982C33.6785 22.9407 33.6798 22.0869 33.6798 20.8148V10.3333H10.3202ZM22 12.9259C22.9215 12.9259 23.6685 13.6721 23.6685 14.5926V22C23.6685 22.9205 22.9215 23.6666 22 23.6666C21.0785 23.6666 20.3315 22.9205 20.3315 22V14.5926C20.3315 13.6721 21.0785 12.9259 22 12.9259ZM16.0674 15.8889C16.9889 15.8889 17.736 16.6351 17.736 17.5555V22C17.736 22.9205 16.9889 23.6666 16.0674 23.6666C15.1459 23.6666 14.3989 22.9205 14.3989 22V17.5555C14.3989 16.6351 15.1459 15.8889 16.0674 15.8889ZM27.9326 18.8518C28.8541 18.8518 29.6011 19.598 29.6011 20.5185V22C29.6011 22.9205 28.8541 23.6666 27.9326 23.6666C27.0111 23.6666 26.264 22.9205 26.264 22V20.5185C26.264 19.598 27.0111 18.8518 27.9326 18.8518Z' fill='%236E6E6E'/%3E%3C/svg%3E%0A");
content: '';
position: absolute;
width: 44px;
height: 44px;
top: -7px;
@include media.breakpoint-down('deskL') {
top: -10px;
}
@include media.breakpoint-down('tabL') {
top: -13px;
}
@include media.breakpoint-down('tabM') {
top: -15px;
}
}
}
}
&__tags {
gap: 18px;
display: flex;
flex-direction: row;
margin-bottom: 98px;
align-items: flex-start;
@include media.breakpoint-down('deskL') {
margin-bottom: 50px;
}
@include media.breakpoint-down('tabL') {
margin-bottom: 48px;
}
@include media.breakpoint-down('tabM') {
flex-direction: column;
gap: 0;
margin-bottom: 24px;
}
}
&__tag {
display: flex;
align-items: center;
gap: 6px;
height: 32px;
@include media.breakpoint-down('tabM') {
height: 24px;
}
> div {
font-family: 'Suisse Intl', serif;
font-weight: 500;
font-size: 24px;
line-height: 32px;
letter-spacing: 0;
text-align: center;
color: variables.$text-grey;
display: flex;
align-items: center;
&:first-child {
transform: translateY(1px);
}
@include media.breakpoint-down('tabL') {
font-weight: 400;
font-size: 18px;
line-height: 26px;
}
@include media.breakpoint-down('tabM') {
font-size: 12px;
line-height: 14px;
}
}
}
&__icon {
@include media.breakpoint-down('tabM') {
width: 24px;
height: 24px;
}
}
&__close {
position: absolute;
cursor: pointer;
width: 44px;
height: 44px;
padding: 7px;
top: 64px;
right: 64px;
@include media.breakpoint-down('deskL') {
top: 43px;
}
@include media.breakpoint-down('tabL') {
width: 34px;
height: 34px;
top: 30px;
right: 34px;
}
@include media.breakpoint-down('tabM') {
top: 18px;
right: 22px;
}
svg {
width: 31px;
height: 31px;
@include media.breakpoint-down('tabL') {
width: 24px;
height: 24px;
}
}
}
.button {
display: inline-flex;
align-items: center;
box-sizing: border-box;
font-family: 'Suisse Intl', serif;
font-weight: 500;
font-size: 40px;
line-height: 46px;
letter-spacing: 0;
color: white;
border-radius: 41px;
padding: 16px 28px;
height: 82px;
background: variables.$red100;
@include media.breakpoint-down('tabL') {
font-size: 24px;
line-height: 32px;
padding: 18px 30px;
}
@include media.breakpoint-down('tabM') {
width: calc(100% - 40px);
height: 56px;
text-align: center;
font-size: 18px;
line-height: 20px;
display: block;
z-index: 10;
position: absolute;
bottom: 20px;
}
&:hover {
background: variables.$red2;
}
}
&__bgImg {
height: 815px;
width: 609px;
position: absolute;
right: -16px;
top: 135px;
@include media.breakpoint-down('deskL') {
right: -168px;
top: 252px;
transform: scale(0.95);
}
@include media.breakpoint-down('tabL') {
right: -126px;
top: 150px;
transform: scale(0.8);
}
@include media.breakpoint-down('tabM') {
display: none;
}
}
&__bgImg_mobile {
display: none;
height: 241px;
width: 285px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 365px;
z-index: 2;
&:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, variables.$white-bg 100%);
width: 100%;
height: 100%;
}
@include media.breakpoint-down('tabM') {
display: block;
top: auto;
bottom: 20px;
}
}
}