/* /home/headajyj/public_html/headsntail/assets/css/polish.css
Visual polish layer, loaded after every other stylesheet (header.php). Pure CSS on top of the existing pages:
brighter palette, soft aurora background, glass cards with a 3D tilt + spotlight (polish.js), glowing buttons, reveal-on-scroll.
Switch off: 'polish' => 'off' in app/config/site.php, or add ?polish=off to any URL to compare. Only transform/opacity animate (fast). */
:root{
--pz-bg:#0a0f1c; --pz-bg-2:#0f1626; --pz-line:rgba(148,184,255,.14); --pz-line-hi:rgba(124,247,255,.45);
--pz-cyan:#7cf7ff; --pz-blue:#2ab3ff; --pz-violet:#a78bfa; --pz-pink:#f472b6;
--pz-glow:0 0 0 1px rgba(124,247,255,.22), 0 18px 48px -18px rgba(42,179,255,.55), 0 0 60px -20px rgba(167,139,250,.45);
--hc-muted:#a9b6cb; --text-secondary:#bcc7d8; --hc-line:rgba(148,184,255,.12);
}
/* ---------- background: brighter navy + slow aurora ---------- */
html{background:var(--pz-bg)}
body{background:var(--pz-bg) !important;position:relative}
body::before{
content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
background:
radial-gradient(40% 35% at 15% 20%, rgba(42,179,255,.22), transparent 70%),
radial-gradient(35% 30% at 85% 15%, rgba(167,139,250,.22), transparent 70%),
radial-gradient(45% 40% at 60% 90%, rgba(124,247,255,.12), transparent 70%),
radial-gradient(30% 30% at 30% 80%, rgba(244,114,182,.10), transparent 70%);
filter:blur(40px);
animation:pz-aurora 28s ease-in-out infinite alternate;
}
@keyframes pz-aurora{
0%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(3%,-2%,0) scale(1.06)}
100%{transform:translate3d(-3%,3%,0) scale(1.03)}
}
/* subtle grid texture */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 75%)}
/* sections that painted a flat black now let the aurora through */
.abt-section,.prj-section,.tl-main,.tl-guide,.tl-more,.hc-page,.b2-philosophy-section,.b4-skills-section{background-color:transparent !important}
.abt-section.alt,.prj-section.alt{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.015)) !important}
/* ---------- header: glass + animated light line ---------- */
.h-header{background:linear-gradient(180deg,rgba(10,15,28,.92),rgba(10,15,28,.75)) !important;border-bottom:1px solid var(--pz-line) !important;backdrop-filter:blur(18px) saturate(140%)}
.h-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
background:linear-gradient(90deg,transparent,var(--pz-blue),var(--pz-cyan),var(--pz-violet),transparent);background-size:200% 100%;opacity:.8;animation:pz-line 8s linear infinite}
@keyframes pz-line{from{background-position:200% 0}to{background-position:-200% 0}}
.h-nav-link.active,.h-nav-link:hover{text-shadow:0 0 18px rgba(124,247,255,.55)}
/* ---------- hero titles: gradient text + halo ---------- */
.tl-hero h1,.abt-hero h1,.prj-hero h1,.hnt-blog-hero__title,.hc-title,.head h2,.b4-section-title,.section-heading h2,.tl-group h2,.tl-more h2{
background:linear-gradient(92deg,#ffffff 0%,#dff8ff 45%,var(--pz-cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
filter:drop-shadow(0 0 22px rgba(124,247,255,.18))}
.tl-hero,.abt-hero,.prj-hero,.hnt-blog-hero{position:relative;overflow:hidden;isolation:isolate}
.tl-hero::before,.abt-hero::before,.prj-hero::before,.hnt-blog-hero::before{
content:"";position:absolute;z-index:-1;width:60vw;height:60vw;max-width:900px;max-height:900px;left:50%;top:-30%;transform:translateX(-50%);border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(42,179,255,.28),rgba(167,139,250,.18) 40%,transparent 70%);filter:blur(60px);animation:pz-breathe 9s ease-in-out infinite}
@keyframes pz-breathe{0%,100%{transform:translateX(-50%) scale(1);opacity:.8}50%{transform:translateX(-50%) scale(1.12);opacity:1}}
.tl-badges span,.chips span,.section-tag,.kicker,.eyebrow,.hnt-blog-hero__eyebrow{border:1px solid var(--pz-line-hi) !important;background:rgba(124,247,255,.08) !important;color:#bff6ff !important;box-shadow:0 0 18px -6px rgba(124,247,255,.5)}
/* ---------- cards: glass, gradient edge, lift, 3D tilt + spotlight (polish.js sets --mx/--my/--rx/--ry) ---------- */
.pz-card{position:relative;isolation:isolate;overflow:hidden;
background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) !important;
border:1px solid var(--pz-line) !important;border-radius:18px;backdrop-filter:blur(10px);
box-shadow:0 10px 30px -18px rgba(0,0,0,.8);
transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
transition:transform .18s ease-out,box-shadow .35s ease,border-color .35s ease;will-change:transform}
.pz-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(124,247,255,.16),transparent 45%);opacity:0;transition:opacity .35s ease}
.pz-card::after{content:"";position:absolute;inset:-1px;z-index:-2;pointer-events:none;border-radius:inherit;padding:1px;
background:linear-gradient(135deg,rgba(124,247,255,.0),rgba(42,179,255,.55),rgba(167,139,250,.55),rgba(244,114,182,.0));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease}
.pz-card:hover{--ty:-6px;border-color:transparent !important;box-shadow:var(--pz-glow)}
.pz-card:hover::before,.pz-card:hover::after{opacity:1}
.pz-card .ico,.service-card__icon,.b2-pillar-icon,.result-icon{filter:drop-shadow(0 0 14px rgba(124,247,255,.45))}
/* ---------- buttons ---------- */
.btn.primary,.t-btn.primary,.hc-btn,.btn-primary,.b4-category-tab.active,.rb-form .t-btn.primary{
background:linear-gradient(135deg,var(--pz-violet),var(--pz-blue) 60%,var(--pz-cyan)) !important;color:#07111f !important;border:0 !important;font-weight:800;
box-shadow:0 10px 30px -10px rgba(42,179,255,.75),0 0 0 1px rgba(255,255,255,.08) inset;transition:transform .15s ease,box-shadow .25s ease,filter .25s ease}
.btn.primary:hover,.t-btn.primary:hover,.hc-btn:hover,.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 16px 36px -10px rgba(124,247,255,.75),0 0 0 1px rgba(255,255,255,.12) inset}
.t-btn,.btn,.btn-secondary,.ghost{border-color:var(--pz-line) !important}
.t-btn:hover,.btn:hover,.btn-secondary:hover{border-color:var(--pz-line-hi) !important;box-shadow:0 0 24px -8px rgba(124,247,255,.6)}
/* ---------- inputs ---------- */
.t-input,.field input,.field textarea,.field select,.form-row input,.form-row textarea{border-color:var(--pz-line) !important;transition:border-color .2s ease,box-shadow .2s ease}
.t-input:focus,.field input:focus,.field textarea:focus,.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--pz-line-hi) !important;box-shadow:0 0 0 3px rgba(124,247,255,.15),0 0 24px -8px rgba(124,247,255,.6)}
.t-box{border-color:var(--pz-line) !important;box-shadow:0 30px 70px -40px rgba(42,179,255,.45),0 0 0 1px rgba(255,255,255,.03) inset}
/* ---------- prose links ---------- */
.hc-prose a:not(.hc-btn),.tl-prose a{background-image:linear-gradient(90deg,var(--pz-cyan),var(--pz-violet));background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s ease;text-decoration:none}
.hc-prose a:not(.hc-btn):hover,.tl-prose a:hover{background-size:100% 1.5px}
/* ---------- reveal on scroll (only when polish.js is running: html.pz-js) ---------- */
.pz-js .pz-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.pz-js .pz-reveal.pz-in{opacity:1;transform:none}
.pz-js .pz-card.pz-reveal{transition:opacity .6s ease,transform .18s ease-out,box-shadow .35s ease,border-color .35s ease}
.pz-js .pz-card.pz-reveal:not(.pz-in){transform:translateY(18px)}
/* ---------- tables, footer ---------- */
.t-table tr:hover td,.t-table tr:hover th{background:rgba(124,247,255,.04)}
footer,.h-footer,.site-footer{border-top:1px solid var(--pz-line)}
/* ---------- motion safety ---------- */
@media (prefers-reduced-motion:reduce){
body::before,.h-header::after,.tl-hero::before,.abt-hero::before,.prj-hero::before,.hnt-blog-hero::before{animation:none !important}
.pz-card{transform:none !important;transition:box-shadow .3s ease,border-color .3s ease}
.pz-js .pz-reveal{opacity:1;transform:none;transition:none}
}
@media (max-width:760px){body::before{filter:blur(28px)}.pz-card{transform:none !important}}
/* ================= theme switch (polish.js builds the control; choice kept in localStorage 'hnt-theme') ================= */
.pz-theme{position:fixed;left:14px;bottom:14px;z-index:1200;display:flex;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--pz-line);background:rgba(10,15,28,.82);backdrop-filter:blur(14px);box-shadow:0 10px 30px -12px rgba(0,0,0,.8)}
.pz-theme button{border:0;background:none;color:#cbd5e1;font:600 12px/1 "Segoe UI",Arial,sans-serif;padding:8px 11px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s}
.pz-theme button[aria-pressed=true]{background:linear-gradient(135deg,var(--pz-violet),var(--pz-blue));color:#07111f}
.pz-theme button:hover{color:#fff}
@media (max-width:760px){.pz-theme{left:10px;bottom:10px}.pz-theme button span{display:none}.pz-theme button{padding:9px 11px;font-size:14px}}
/* ---------- MONO: black and white, no colours ---------- */
html[data-theme=mono]{--pz-cyan:#ffffff;--pz-blue:#d4d4d8;--pz-violet:#a1a1aa;--pz-pink:#e4e4e7;--pz-line:rgba(255,255,255,.14);--pz-line-hi:rgba(255,255,255,.5);
--pz-glow:0 0 0 1px rgba(255,255,255,.22),0 18px 48px -18px rgba(255,255,255,.35);
--accent-blue:#e4e4e7;--accent-cyan:#ffffff;--accent-purple:#a1a1aa;--accent-green:#d4d4d8;--hc-accent:#ffffff;--hc-accent-2:#a1a1aa;--pz-bg:#0a0a0a}
html[data-theme=mono] body::before{background:radial-gradient(40% 35% at 15% 20%,rgba(255,255,255,.10),transparent 70%),radial-gradient(35% 30% at 85% 15%,rgba(255,255,255,.08),transparent 70%),radial-gradient(45% 40% at 60% 90%,rgba(255,255,255,.06),transparent 70%)}
html[data-theme=mono] .tl-hero::before,html[data-theme=mono] .abt-hero::before,html[data-theme=mono] .prj-hero::before,html[data-theme=mono] .hnt-blog-hero::before{background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.06) 40%,transparent 70%)}
html[data-theme=mono] .tl-hero h1,html[data-theme=mono] .abt-hero h1,html[data-theme=mono] .prj-hero h1,html[data-theme=mono] .hnt-blog-hero__title,html[data-theme=mono] .hc-title,html[data-theme=mono] .head h2,html[data-theme=mono] .b4-section-title,html[data-theme=mono] .section-heading h2,html[data-theme=mono] .tl-group h2,html[data-theme=mono] .tl-more h2{background:linear-gradient(92deg,#fff,#d4d4d8);-webkit-background-clip:text;background-clip:text;filter:none}
html[data-theme=mono] .tl-badges span,html[data-theme=mono] .chips span,html[data-theme=mono] .section-tag,html[data-theme=mono] .kicker,html[data-theme=mono] .eyebrow,html[data-theme=mono] .hnt-blog-hero__eyebrow,html[data-theme=mono] .tl-card .tag,html[data-theme=mono] .cat,html[data-theme=mono] .hnt-blog-card__cat{background:rgba(255,255,255,.08) !important;color:#e4e4e7 !important;border-color:rgba(255,255,255,.3) !important;box-shadow:none}
html[data-theme=mono] .pz-card::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),transparent 45%)}
html[data-theme=mono] .pz-card::after{background:linear-gradient(135deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}
html[data-theme=mono] .btn.primary,html[data-theme=mono] .t-btn.primary,html[data-theme=mono] .hc-btn,html[data-theme=mono] .btn-primary,html[data-theme=mono] .b4-category-tab.active,html[data-theme=mono] .pz-theme button[aria-pressed=true]{background:linear-gradient(135deg,#fff,#d4d4d8) !important;color:#0a0a0a !important;box-shadow:0 10px 30px -10px rgba(255,255,255,.5)}
html[data-theme=mono] .h-header::after{background:linear-gradient(90deg,transparent,#fff,#71717a,transparent);background-size:200% 100%}
html[data-theme=mono] .h-nav-link.active,html[data-theme=mono] .h-nav-link:hover,html[data-theme=mono] a{text-shadow:none}
html[data-theme=mono] .tl-prose a,html[data-theme=mono] .hc-prose a,html[data-theme=mono] .t-fxres b,html[data-theme=mono] .t-clock b,html[data-theme=mono] .t-sub,html[data-theme=mono] .hc-meta a,html[data-theme=mono] .tl-crumbs a,html[data-theme=mono] .hc-crumbs a{color:#fff !important}
html[data-theme=mono] .t-msg{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:#e4e4e7}
html[data-theme=mono] .t-input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.12)}
html[data-theme=mono] img,html[data-theme=mono] .ico,html[data-theme=mono] .service-card__icon,html[data-theme=mono] .b2-pillar-icon,html[data-theme=mono] .result-icon,html[data-theme=mono] .hc-cover,html[data-theme=mono] .t-map,html[data-theme=mono] .h-logo-icon,html[data-theme=mono] .hc-tools__card .ico{filter:grayscale(1)}
html[data-theme=mono] .h-nav-link.active::before,html[data-theme=mono] .h-nav-link::before{background:#fff !important}
/* ---------- LIGHT: white page, dark text (beta: inverts the page body, keeps pictures and the header natural) ---------- */
html[data-theme=light]{--pz-bg:#f3f5f9;--pz-line:rgba(15,23,42,.12);--pz-line-hi:rgba(15,23,42,.35)}
html[data-theme=light] body{background:#f3f5f9 !important}
html[data-theme=light] body::before{opacity:.55;filter:blur(50px)}
html[data-theme=light] body::after{opacity:.5;background-image:linear-gradient(rgba(15,23,42,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.06) 1px,transparent 1px)}
html[data-theme=light] main,html[data-theme=light] body>section,html[data-theme=light] .h-footer,html[data-theme=light] footer{filter:invert(1) hue-rotate(180deg)}
html[data-theme=light] body>section img,html[data-theme=light] body>section .ico,html[data-theme=light] body>section .b2-pillar-icon,html[data-theme=light] body>section .b4-skill-icon,html[data-theme=light] body>section .b1-carousel-container img,html[data-theme=light] main img,html[data-theme=light] main video,html[data-theme=light] main iframe,html[data-theme=light] main canvas,html[data-theme=light] main .rb-paper,html[data-theme=light] main .t-qr,html[data-theme=light] main .t-map,html[data-theme=light] main .ico,html[data-theme=light] main .service-card__icon,html[data-theme=light] main .b2-pillar-icon,html[data-theme=light] main .result-icon,html[data-theme=light] main .hc-tools__card .ico,html[data-theme=light] main .t-thumb,html[data-theme=light] main .b4-skill-icon,html[data-theme=light] footer img{filter:invert(1) hue-rotate(180deg)}
html[data-theme=light] .h-header{background:rgba(255,255,255,.86) !important;border-bottom:1px solid rgba(15,23,42,.1) !important}
html[data-theme=light] .h-nav-link{color:#0f172a !important}
html[data-theme=light] .h-nav-link.active,html[data-theme=light] .h-nav-link:hover{color:#0369a1 !important;text-shadow:none}
html[data-theme=light] .h-menu-toggle span{background:#0f172a !important}
html[data-theme=light] .h-nav-menu{background:rgba(255,255,255,.96) !important}
html[data-theme=light] .pz-theme{background:rgba(255,255,255,.9);border-color:rgba(15,23,42,.12)}
html[data-theme=light] .pz-theme button{color:#334155}html[data-theme=light] .pz-theme button:hover{color:#0f172a}
html[data-theme=light] ::selection{background:#bae6fd;color:#0f172a}
/* ---------- LIGHT: more colour (the page body is inverted, so light tints here come out as deep blue/violet/pink) ---------- */
html[data-theme=light] body::before{opacity:1;filter:blur(55px);
background:radial-gradient(45% 40% at 12% 18%,rgba(59,130,246,.45),transparent 70%),radial-gradient(38% 34% at 88% 12%,rgba(168,85,247,.42),transparent 70%),radial-gradient(45% 40% at 60% 95%,rgba(34,211,238,.35),transparent 70%),radial-gradient(32% 30% at 28% 82%,rgba(244,114,182,.35),transparent 70%)}
html[data-theme=light] .pz-card{background:linear-gradient(160deg,rgba(59,130,246,.18),rgba(168,85,247,.10)) !important;border-color:rgba(59,130,246,.45) !important;box-shadow:0 14px 34px -18px rgba(59,130,246,.9)}
html[data-theme=light] .pz-card::after{opacity:.55}
html[data-theme=light] .pz-card:hover{box-shadow:0 0 0 1px rgba(168,85,247,.5),0 20px 48px -16px rgba(59,130,246,.95)}
html[data-theme=light] .pz-card::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(59,130,246,.35),transparent 45%)}
html[data-theme=light] .tl-hero h1,html[data-theme=light] .abt-hero h1,html[data-theme=light] .prj-hero h1,html[data-theme=light] .hnt-blog-hero__title,html[data-theme=light] .hc-title,html[data-theme=light] .head h2,html[data-theme=light] .b4-section-title,html[data-theme=light] .section-heading h2,html[data-theme=light] .tl-group h2,html[data-theme=light] .tl-more h2{background:linear-gradient(92deg,#bfdbfe 0%,#c4b5fd 55%,#fbcfe8 100%);-webkit-background-clip:text;background-clip:text;filter:none}
html[data-theme=light] .tl-hero::before,html[data-theme=light] .abt-hero::before,html[data-theme=light] .prj-hero::before,html[data-theme=light] .hnt-blog-hero::before{background:radial-gradient(circle,rgba(59,130,246,.45),rgba(168,85,247,.3) 40%,transparent 70%)}
html[data-theme=light] .tl-badges span,html[data-theme=light] .chips span,html[data-theme=light] .section-tag,html[data-theme=light] .kicker,html[data-theme=light] .eyebrow,html[data-theme=light] .hnt-blog-hero__eyebrow,html[data-theme=light] .tl-card .tag,html[data-theme=light] .cat,html[data-theme=light] .hnt-blog-card__cat,html[data-theme=light] .stack-card span,html[data-theme=light] .chips{background:rgba(59,130,246,.22) !important;border-color:rgba(59,130,246,.6) !important}
html[data-theme=light] .abt-section.alt,html[data-theme=light] .prj-section.alt{background:linear-gradient(180deg,rgba(59,130,246,.10),rgba(168,85,247,.06)) !important}
html[data-theme=light] .t-box{background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(168,85,247,.08)) !important;border-color:rgba(59,130,246,.4) !important}
html[data-theme=light] .t-msg{background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.5)}
html[data-theme=light] .t-table th{color:#9fd8ff}
html[data-theme=light] .pz-theme{background:linear-gradient(135deg,rgba(219,234,254,.95),rgba(237,233,254,.95));border-color:rgba(59,130,246,.35)}
html[data-theme=light] .h-header{background:linear-gradient(90deg,rgba(239,246,255,.92),rgba(245,243,255,.92),rgba(253,242,248,.92)) !important}
html[data-theme=light] .h-header::after{opacity:1}
/* ---------- type: Rajdhani is thin at 15px/400; bigger and a little heavier everywhere, headings bolder ---------- */
body{font-size:16.5px;font-weight:500;line-height:1.6}
@media (max-width:768px){body{font-size:16px}}
.tl-card p,.tl-card span:not(.ico),.why-card p,.service-card p,.process-card p,.mvv-card p,.info-card p,.stack-card p,.hnt-blog-card__excerpt,.hc-card p,.tl-group-intro,.abt-section .head p,.prj-section .head p,.lead,.hero-sub,.b2-pillar-description{font-size:16.5px !important;font-weight:500;color:#c9d4e3}
html[data-theme=light] .tl-card p,html[data-theme=light] .why-card p,html[data-theme=light] .service-card p,html[data-theme=light] .mvv-card p,html[data-theme=light] .hc-card p,html[data-theme=light] .tl-group-intro,html[data-theme=light] .abt-section .head p,html[data-theme=light] .lead{color:#c3cad6}
.tl-card b,.tl-card h3,.why-card h3,.service-card h3,.process-card h3,.mvv-card h3,.info-card h3,.stack-card h3,.hnt-blog-card__title,.hc-card h3,.b2-pillar-title{font-size:19px !important;font-weight:700;letter-spacing:.1px}
.t-label{font-size:15.5px !important;font-weight:700}.t-input.one,.t-box select,.t-box input{font-size:17px !important}
.t-table{font-size:16.5px}.t-msg{font-size:15px}.tl-prose,.hc-prose{font-size:17.5px}
h1,h2,h3{font-weight:800}
.h-nav-link{font-weight:700;letter-spacing:1.6px}
.tl-card .ico{font-size:32px !important;line-height:1}.tl-card em{font-size:13.5px}
/* ---------- blog cards: category pill, meta chips and "Read more" were tiny and low-contrast ---------- */
.hnt-blog-card__category{font-size:12px !important;letter-spacing:.08em;min-height:30px;padding:0 12px;background:rgba(124,247,255,.14) !important;border:1px solid rgba(124,247,255,.45) !important;color:#bff6ff !important}
.hnt-blog-card__meta span{font-size:13px !important;color:#dbe4f0 !important;background:rgba(255,255,255,.07) !important;border-color:rgba(148,184,255,.22) !important}
.hnt-blog-card__read{font-size:15px !important;font-weight:800;color:#7cf7ff !important;padding:8px 0 2px;border-bottom:2px solid transparent;transition:border-color .2s,gap .2s}
.hnt-blog-card__read:hover{opacity:1 !important;border-bottom-color:#7cf7ff;gap:12px}
.hnt-blog-card__title{font-size:19px !important}.hnt-blog-card__excerpt{font-size:15.5px !important;font-weight:500}
html[data-theme=light] .hnt-blog-card__category{background:rgba(59,130,246,.25) !important;border-color:rgba(59,130,246,.6) !important;color:#dbeafe !important}
html[data-theme=light] .hnt-blog-card__read{color:#60a5fa !important}
html[data-theme=mono] .hnt-blog-card__category{background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.35) !important;color:#f4f4f5 !important}
html[data-theme=mono] .hnt-blog-card__read{color:#fff !important}