#e8e8e8
1.modal { 2 width: 450px; 3 background: linear-gradient(180deg, #DCF9E0 0%, #FFFFFF 30.21%); 4 box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); 5 border-radius: 16px; 6} 7 8.banner { 9 width: 100%; 10 height: 30px; 11 margin: 0; 12 background-size: 100%; 13 background-repeat: no-repeat; 14} 15 16.title { 17 font-weight: 700; 18 font-size: 17px; 19 line-height: 21px; 20 text-align: center; 21 color: #2B2B2F; 22 margin-bottom: 15px; 23} 24 25.description { 26 max-width: 80%; 27 margin: auto; 28 font-weight: 600; 29 font-size: 11px; 30 line-height: 16px; 31 text-align: center; 32 color: #5F5D6B; 33} 34 35.tab-container { 36 display: flex; 37 flex-direction: row; 38 align-items: flex-start; 39 position: relative; 40 padding: 2px; 41 background-color: #ebebec; 42 border-radius: 9px; 43 margin: 10px 20px 0px 20px; 44} 45 46.indicator { 47 content: ""; 48 width: 50%; 49 height: 28px; 50 background: #FFFFFF; 51 position: absolute; 52 top: 2px; 53 left: 2px; 54 z-index: 9; 55 border: 0.5px solid rgba(0, 0, 0, 0.04); 56 box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04); 57 border-radius: 7px; 58 transition: all 0.2s ease-out; 59} 60 61.tab { 62 width: 50%; 63 height: 28px; 64 position: relative; 65 z-index: 99; 66 background-color: transparent; 67 border: 0; 68 outline: none; 69 flex: none; 70 align-self: stretch; 71 flex-grow: 1; 72 cursor: pointer; 73 font-weight: 500; 74} 75 76.tab--1:hover ~ .indicator { 77 left: 2px; 78} 79 80.tab--2:hover ~ .indicator { 81 left: calc(50% - 2px); 82} 83 84.benefits { 85 padding: 20px; 86 display: flex; 87 flex-direction: column; 88 gap: 20px; 89} 90 91.benefits > span { 92 font-size: 15px; 93 color: #2B2B2F; 94 font-weight: 700; 95} 96 97.benefits ul { 98 display: flex; 99 flex-direction: column; 100 gap: 10px; 101} 102 103.benefits ul li { 104 display: flex; 105 align-items: center; 106 justify-content: flex-start; 107 gap: 10px; 108} 109 110.benefits ul li span { 111 font-weight: 600; 112 font-size: 12px; 113 color: #5F5D6B; 114} 115 116.modal--footer { 117 display: flex; 118 align-items: center; 119 justify-content: space-between; 120 padding: 20px; 121 border-top: 1px solid #ebebec; 122} 123 124.price { 125 position: relative; 126 font-size: 32px; 127 color: #2B2B2F; 128 font-weight: 900; 129} 130 131.price sup { 132 font-size: 13px; 133} 134 135.price sub { 136 width: fit-content; 137 position: absolute; 138 font-size: 11px; 139 color: #5F5D6B; 140 bottom: 5px; 141 display: inline-block; 142} 143 144.upgrade-btn { 145 display: flex; 146 flex-direction: row; 147 justify-content: center; 148 align-items: center; 149 width: 215px; 150 height: 40px; 151 background: #0bdd12; 152 box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5); 153 border-radius: 7px; 154 border: 0; 155 outline: none; 156 color: #ffffff; 157 font-size: 13px; 158 font-weight: 600; 159 transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); 160} 161 162.upgrade-btn:hover { 163 background-color: #07b90d; 164} 165 166.form { 167 display: flex; 168 flex-direction: column; 169 gap: 10px; 170}
2.9K views
2.9K views
Comments
MIT License