NetKnow Corporate Blog

.limit-text h2 span {

background: #c62828;

color: white;

font-size: 16px;

font-weight: 700;

padding: 4px 14px;

border-radius: 40px;

margin-left: 10px;

box-shadow: 0 2px 6px #b71c1c;

border: 1px solid #ffb6b6;

}



.limit-text p {

color: #5c3f3f;

font-size: 16px;

margin-top: 6px;

line-height: 1.4;

max-width: 500px;

}



.usage-pill {

background: white;

border-radius: 60px;

padding: 12px 28px;

box-shadow: 0 4px 14px rgba(160, 20, 20, 0.2);

border: 2px solid #d34646;

text-align: center;

}



.usage-pill .big-num {

font-size: 42px;

font-weight: 900;

color: #b71c1c;

line-height: 1;

text-shadow: 0 1px 3px #ffbebe;

}



.usage-pill .small-label {

font-size: 14px;

color: #7a2e2e;

font-weight: 600;

letter-spacing: 0.2px;

}



/ account detail =E2=80=94 subtle, but with red expiring tag /

.account-detail {

background: #faf5f5;

border-radius: 24px;

padding: 20px 28px;

margin: 24px 0 28px 0;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

align-items: center;

border: 1px solid #dcbaba;

}



.plan-item {

display: flex;

gap: 40px;

flex-wrap: wrap;

}



.detail-col {

display: flex;

flex-direction: column;

}



.detail-label {

font-size: 14px;

color: #6e4f4f;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 0.4px;

}



.detail-value {

font-size: 20px;

font-weight: 700;

color: #2d1c1c;

margin-top: 4px;

}



.expiring-tag {

background: #b71c1c;

color: #ffffff;

font-weight: 800;

font-size: 18px;

padding: 4px 20px;

border-radius: 40px;

border: 1px solid #ffa4a4;

box-shadow: 0 0 10px #ff6f6f;

letter-spacing: 0.5px;

}



.final-date {

font-size: 20px;

font-weight: 700;

color: #3b2424;

background: white;

padding: 8px 22px;

border-radius: 40px;

border: 2px solid #b76262;

}



/ consequences =E2=80=94 red alert box /

.consequences {

background: #ffefed;

border-radius: 24px;

padding: 22px 28px;

margin: 28px 0 24px 0;

border: 2px solid #d84343;

box-shadow: 0 6px 0 #a33b3b;

}



.consequences h3 {

font-size: 20px;

font-weight: 800;

color: #9a1717;

margin-bottom: 18px;

display: flex;

align-items: center;

gap: 8px;

text-transform: uppercase;

}



.consequences ul {

list-style: none;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 16px 30px;

}



.consequences li {

font-size: 16px;

color: #3e1b1b;

display: flex;

align-items: center;

gap: 12px;

font-weight: 600;

background: rgba(255,255,240,0.5);

padding: 6px 12px;

border-radius: 40px;

border: 1px solid #f0b6b6;

}



.consequences li::before {

content: "=E2=9A=A0=EF=B8=8F";

font-size: 20px;

filter: drop-shadow(0 2px 2px #b33);

}



/ signature /

.signature {

margin: 20px 0 28px 0;

}



.signature p {

font-size: 16px;

color: #4e2e2e;

}



.signature .team {

font-weight: 800;

color: #8b1a1a;

margin-top: 12px;

font-size: 18px;

}



/ CTA button =E2=80=94 aggressive red /

.cta-block {

background: #b71c1c;

border-radius: 100px;

display: inline-block;

width: auto;

margin: 12px 0 20px 0;

box-shadow: 0 14px 24px -8px #7a2020;

transition: all 0.2s;

border: 1px solid #ffb7b7;

}



.cta-block a {

display: flex;

align-items: center;

gap: 20px;

padding: 18px 42px 18px 36px;

text-decoration: none;

color: white;

font-weight: 700;

font-size: 20px;

letter-spacing: 0.3px;

text-shadow: 0 2px 4px #5f0000;

}



.cta-block a span {

background: #ffffff;

color: #b71c1c;

padding: 6px 20px;

border-radius: 40px;

font-size: 16px;

font-weight: 800;

box-shadow: inset 0 -2px 0 #aaa;

}



.cta-block:hover {

background: #a11515;

transform: scale(1.01);

box-shadow: 0 18px 28px -6px #a14040;

}



/ footer /

.footer-links {

border-top: 2px solid #f0c0c0;

padding-top: 18px;

margin-top: 12px;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

align-items: center;

color: #973d3d;

font-size: 14px;

}

.links a {

color: #a13232;

text-decoration: none;

margin-right: 22px;

font-weight: 600;

}



.links a:hover {

text-decoration: underline;

color: #c10000;

}



.copyright {

color: #ad5a5a;

}



hr {

border: none;

border-top: 3px dotted #d88;

margin: 16px 0 10px;

}



/ mobile /

@media (max-width: 650px) {

.alert-header {

flex-direction: column;

align-items: flex-start;

gap: 16px;

}

.usage-pill {

align-self: flex-start;

}

.account-detail {

flex-direction: column;

align-items: flex-start;

gap: 20px;

}

.plan-item {

gap: 24px;

}

.consequences ul {

grid-template-columns: 1fr;

}

.cta-block a {

padding: 15px 28px;

font-size: 18px;

flex-wrap: wrap;

justify-content: center;

}

}













--000000000000fecab2064b756941--