/* IT Company — Best CSS (drop this inside ) — Modern, performant, accessible, responsive — Works with the HTML structure from the theme in canvas */ /* ---------- Design Tokens ---------- */ :root{ /* Palette */ --bg:#0b1220; --surface:#0f172a; --surface-2:#111827; --text:#e6edf6; --muted:#94a3b8; --line:rgba(148,163,184,.18); --brand:#0ea5e9; /* cyan-500 */ --brand-2:#22d3ee; /* cyan-300 */ --success:#10b981; /* green */ --warning:#f59e0b; /* amber */ --danger:#ef4444; /* red */ /* Effects */ --radius:16px; --shadow:0 10px 30px rgba(2,6,23,.35); --ring:0 0 0 4px rgba(34,211,238,.35); /* Layout */ --max:1180px; --space:16px; } /* Optional light mode (enable by adding body.light) */ body.light{ --bg:#f7fafc; --surface:#ffffff; --surface-2:#f1f5f9; --text:#0b1220; --muted:#465466; --line:rgba(2,6,23,.12); --brand:#0ea5e9; --brand-2:#0284c7; --shadow:0 8px 24px rgba(2,6,23,.08); --ring:0 0 0 4px rgba(14,165,233,.25); } /* ---------- Base ---------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img{max-width:100%;height:auto;border-radius:12px} /* Links */ a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-2)} a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px} /* Typography */ h1,h2,h3,h4{line-height:1.2;margin:0 0 8px} h1{font-size:clamp(28px,4vw,44px)} h2{font-size:clamp(22px,3.2vw,32px)} h3{font-size:18px} .muted{color:var(--muted)} .lead{color:var(--muted);max-width:65ch} /* Utility */ .container{max-width:var(--max);margin-inline:auto;padding:var(--space)} .badge{display:inline-flex;gap:8px;align-items:center;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.3);color:#7dd3fc;padding:6px 10px;border-radius:999px;font-size:12px} .pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(148,163,184,.12);color:var(--muted);font-size:12px;margin-right:6px} .card{background:var(--surface);border:1px solid var(--line);padding:16px;border-radius:var(--radius);box-shadow:var(--shadow)} .grid{display:grid;gap:16px} .section{padding:26px 0} /* Buttons */ .btn,.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;font-weight:700} .btn-primary,.cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#04121a;box-shadow:0 8px 24px rgba(34,211,238,.35)} .btn-ghost{background:rgba(148,163,184,.12);color:var(--text);border:1px solid var(--line)} .btn:disabled{opacity:.6;cursor:not-allowed} .btn,.cta{transition:transform .08s ease, box-shadow .2s ease, background .2s ease} .btn:hover,.cta:hover{transform:translateY(-1px)} .btn:active,.cta:active{transform:translateY(0)} .btn:focus-visible,.cta:focus-visible{outline:none;box-shadow:var(--ring)} /* Header/Nav */ .site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(15,23,42,.6),rgba(15,23,42,0));backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;gap:12px;justify-content:space-between} .brand{display:flex;align-items:center;gap:12px} .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 6px 18px rgba(34,211,238,.35)} .site-title{font-weight:700;letter-spacing:.2px} .site-desc{font-size:12px;color:var(--muted)} .menu{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .menu a{padding:10px 12px;border-radius:10px;color:var(--text)} .menu a:hover{background:rgba(148,163,184,.1)} /* Hero */ .hero{padding:44px 0 20px} .hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center} .hero-card{background:linear-gradient(180deg,rgba(2,6,23,.7),rgba(2,6,23,.4));border:1px solid var(--line);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow)} .stat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px} .stat .kpi{background:var(--surface);border:1px solid var(--line);padding:12px;border-radius:14px;text-align:center} .kpi b{font-size:20px} /* Main + Sidebar */ .layout{display:grid;grid-template-columns:2fr 1fr;gap:18px} .post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px} .post-card h2{margin:0 0 8px} .meta{font-size:12px;color:var(--muted);margin-bottom:8px} .sidebar .widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px} /* Blog widget defaults */ .post-body{font-size:16px} .post-body pre, .post-body code{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px;overflow:auto} .post-body table{width:100%;border-collapse:collapse;margin:10px 0;border:1px solid var(--line)} .post-body th,.post-body td{padding:10px;border:1px solid var(--line)} /* PageList (menu) */ .PageList ul{display:flex;gap:8px;align-items:center;margin:0;padding:0;list-style:none} .PageList ul li a{padding:10px 12px;border-radius:10px;display:block} .PageList ul li a:hover{background:rgba(148,163,184,.1)} /* Popular posts */ .PopularPosts .widget-content ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .PopularPosts .item-title{display:block} .PopularPosts .item-thumbnail{border-radius:10px;overflow:hidden} /* Labels */ .Label .cloud-label-widget-content{display:flex;flex-wrap:wrap;gap:8px} .Label .label-size{background:rgba(148,163,184,.12);border:1px solid var(--line);padding:6px 10px;border-radius:999px} /* Search */ .search input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.25);background:#0b1220;color:var(--text)} body.light .search input{background:#fff} .search input:focus{outline:none;box-shadow:var(--ring)} /* Pagination */ #blog-pager, .blog-pager{display:flex;gap:10px;justify-content:space-between} #blog-pager a, .blog-pager a{padding:10px 14px;border-radius:12px;border:1px solid var(--line)} /* Footer */ footer{margin-top:28px;border-top:1px solid var(--line);background:linear-gradient(0deg,rgba(2,6,23,.6),rgba(2,6,23,.3));padding:24px 0} .footgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .copyright{color:var(--muted);font-size:12px;margin-top:10px} /* Animations */ .fade-in{opacity:0;transform:translateY(6px);animation:fadeIn .5s ease .05s forwards} @keyframes fadeIn{to{opacity:1;transform:none}} /* ---------- Responsive ---------- */ @media (max-width: 1200px){ :root{--max:1024px} } @media (max-width: 980px){ .hero-wrap{grid-template-columns:1fr} .layout{grid-template-columns:1fr} .grid.cols-3{grid-template-columns:1fr 1fr 1fr} .footgrid{grid-template-columns:1fr 1fr} } @media (max-width: 768px){ .menu{display:none} .grid.cols-3,.grid{grid-template-columns:1fr 1fr} } @media (max-width: 640px){ .grid,.grid.cols-3{grid-template-columns:1fr} .footgrid{grid-template-columns:1fr} } @media (max-width: 420px){ .badge{display:none} } /* ---------- Nice extras ---------- */ /* Underline accent on links in content */ .post-body a{background:linear-gradient(transparent 60%, rgba(14,165,233,.25) 60%);padding:0 .1em;border-radius:4px} .post-body a:hover{background:linear-gradient(transparent 55%, rgba(34,211,238,.35) 55%)} /* Focus outlines for interactive elements */ button,input,select,textarea,[role="button"],[role="tab"],a{outline-color:transparent} button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible,[role="tab"]:focus-visible,a:focus-visible{box-shadow:var(--ring)} /* Tables overflow on mobile */ .table-wrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:12px} /* Image captions */ .figure{margin:12px 0;text-align:center} .figure figcaption{font-size:12px;color:var(--muted)}