File "styles.css"

Full path: /home/u525140468/domains/productsizer.com/public_html/assets/styles.css
File size: 3.99 B (3.99 KB bytes)
MIME-type: text/plain
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');


body { font-family: 'Outfit', sans-serif;}

.gbox{z-index:-999;position:relative}
.gradient{position:fixed;width:400px;height:400px;border-radius:50%;filter:blur(80px);opacity:.7}

.blue{background:#b8d4fc;top:0;left:0}
.pink{background:#f7c6e6;bottom:0;left:10%}
.purple{background:#e2c7fa;top:10%;right:0;opacity:.5}
.green{background:#c4f1da;bottom:0;right:10%;opacity:.5}

/*Deep gradient */
.green {background:#f1ecc4;} .green, .purple{width:600px;height:600px;}

.bg-blue-x {background-color: rgb(248 249 252 / 1);}

.bg-sun  {
  border-radius: 500px;
  background: linear-gradient(90deg,#195ee6 -.55%,#8b44ff 45.76%,#f64 66.05%,#ffdf70 99.34%);
  filter: blur(100px);
}

@media (max-width: 768px) {
.gradient{width:350px;height:350px;opacity:.7;filter:blur(60px)}
.purple{top:40%}
.green{background:#f1ecc4;bottom:10%;left:0}
}

.container1{max-width:800px;margin:auto}

.shadow-xl2 {
  box-shadow: 0px 4px 24px rgba(4, 20, 58, 0.04);
  border: 1px solid #e6e7eb;
}

/* Icon Style */
.icon-container{border:1px solid #ddd;padding:10px;display:inline-block;border-radius:1.5rem;background:transparent;margin:6px}
.icon-wrapper{border:4px solid transparent;border-radius:1.5rem;box-shadow:2px 3px 5px #0000001a;display:inline-block;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.icon-inner{width:56px;height:56px;border-radius:1.5rem;display:flex;align-items:center;justify-content:center;position:relative}
.icon-download{width:32px;height:32px;color:#fff;filter:drop-shadow(0 1px 2px #ffffff9c)}
.grid > div:nth-child(16n+1) .icon-inner{background:linear-gradient(140deg,#8be8b0,#34d707);box-shadow:0 6px 12px #48bb7880}
.grid > div:nth-child(16n+2) .icon-inner{background:linear-gradient(140deg,#60a5fa,#2563eb);box-shadow:0 6px 12px #2563eb80}
.grid > div:nth-child(16n+3) .icon-inner{background:linear-gradient(140deg,#fde68a,#eab308);box-shadow:0 6px 12px #eab30880}
.grid > div:nth-child(16n+4) .icon-inner{background:linear-gradient(140deg,#f87171,#dc2626);box-shadow:0 6px 12px #dc262680}
.grid > div:nth-child(16n+5) .icon-inner{background:linear-gradient(140deg,#d8b4fe,#a855f7);box-shadow:0 6px 12px #a855f780}
.grid > div:nth-child(16n+6) .icon-inner{background:linear-gradient(140deg,#5eead4,#14b8a6);box-shadow:0 6px 12px #14b8a680}
.grid > div:nth-child(16n+7) .icon-inner{background:linear-gradient(140deg,#a5b4fc,#4f46e5);box-shadow:0 6px 12px #4f46e580}
.grid > div:nth-child(16n+8) .icon-inner{background:linear-gradient(140deg,#fdba74,#f97316);box-shadow:0 6px 12px #f9731680}
.grid > div:nth-child(16n+9) .icon-inner{background:linear-gradient(140deg,#6ee7b7,#10b981);box-shadow:0 6px 12px #10b98180}
.grid > div:nth-child(16n+10) .icon-inner{background:linear-gradient(140deg,#7dd3fc,#0ea5e9);box-shadow:0 6px 12px #0ea5e980}
.grid > div:nth-child(16n+11) .icon-inner{background:linear-gradient(140deg,#bef264,#84cc16);box-shadow:0 6px 12px #84cc1680}
.grid > div:nth-child(16n+12) .icon-inner{background:linear-gradient(140deg,#c4b5fd,#8b5cf6);box-shadow:0 6px 12px #8b5cf680}
.grid > div:nth-child(16n+13) .icon-inner{background:linear-gradient(140deg,#f0abfc,#d946ef);box-shadow:0 6px 12px #d946ef80}
.grid > div:nth-child(16n+14) .icon-inner{background:linear-gradient(140deg,#67e8f9,#06b6d4);box-shadow:0 6px 12px #06b6d480}
.grid > div:nth-child(16n+15) .icon-inner{background:linear-gradient(140deg,#f9a8d4,#ec4899);box-shadow:0 6px 12px #ec489980}
.grid > div:nth-child(16n+16) .icon-inner{background:linear-gradient(140deg,#fda4af,#f43f5e);box-shadow:0 6px 12px #f43f5e80}

.icon-inner{width:76px;height:76px;}
.icon-download{width:42px;height:42px;}

/* New icon style */
.icon-download {
  color: #fff;
  filter: drop-shadow(0 1px 2px #2424240d);
}
.icon-container {border: 0px solid #ddd;}
.icon-wrapper, .icon-inner {border-radius: 5.5rem;}