1 line
3.9 KiB
CSS
1 line
3.9 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column;height:10rem}.dd-card{background-color:#fff;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:1.875rem;max-width:15.625rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-preview button{border-width:0;align-items:center;background-color:transparent;color:#fff;margin:15% 0 0 0;transition:color .25s ease}.dd-card-preview button:hover{color:#bebebe}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:9.375rem}.progress{position:relative;background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:var(--progress-width,1%);transition:width 1s ease}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left}.dd-card-btn{background-color:#2a265f;border:0;border-radius:3.125rem;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);color:#fff;font-size:1rem;padding:.75rem 1.5625rem;position:absolute;bottom:1.875rem;right:1.875rem;letter-spacing:.0625rem}.social-panel-container{position:fixed;right:0;bottom:5rem;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-.625rem)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p i{margin:0 5px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}.floating-text a{color:#ff7500;text-decoration:none}@media screen and (max-width:480px){.social-panel-container.visible{transform:translateX(0)}.floating-btn{right:10px}} |