/* ════════════════════════════════════════════════════════════════ BLOG — shared styles matching the showroom design language. Dark default, light via [data-theme="light"] on . ════════════════════════════════════════════════════════════════ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#070708;--bg-2:#0c0c0e;--bg-3:#131317;--surface:#16161b;--surface-2:#1c1c22; --line:#22222a;--line-2:#2e2e38;--line-3:#3a3a46; --tx:#fafaf9;--tx-2:#a8a8b0;--tx-3:#74747c;--tx-4:#4a4a52; --lime:#bef264;--lime-2:#a3e635;--lime-d:#84cc16; --violet:#a78bfa;--orange:#fb923c;--blue:#60a5fa; --grad-1:linear-gradient(135deg,#bef264 0%,#a3e635 100%); --serif:'Fraunces',Georgia,serif; --sans:'Inter Tight',-apple-system,'Segoe UI',system-ui,sans-serif; --mono:'JetBrains Mono',Menlo,monospace; --easing:cubic-bezier(.22,.61,.36,1); --easing-spring:cubic-bezier(.34,1.56,.64,1); --mesh-opacity:.45; --grid-opacity:.012; } :root[data-theme="light"]{ --bg:#fafaf9;--bg-2:#f3f3f1;--bg-3:#e8e8e5;--surface:#ffffff;--surface-2:#f5f5f2; --line:#e0e0db;--line-2:#cdcdc6;--line-3:#a8a8a0; --tx:#0a0a0a;--tx-2:#3a3a3a;--tx-3:#6a6a6a;--tx-4:#9a9a9a; --lime:#84cc16;--lime-2:#65a30d;--lime-d:#4d7c0f; --violet:#7c3aed;--orange:#ea580c;--blue:#2563eb; --grad-1:linear-gradient(135deg,#84cc16 0%,#65a30d 100%); --mesh-opacity:.18; } html{transition:background-color .35s var(--easing);scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--sans);background:var(--bg);color:var(--tx);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:'cv11','ss03'} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ::selection{background:var(--lime);color:var(--bg)} /* Mesh + grid backdrops */ .mesh{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .mesh::before,.mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(120px);opacity:var(--mesh-opacity)} .mesh::before{width:900px;height:900px;background:radial-gradient(circle,var(--lime) 0%,transparent 70%);top:-300px;left:-200px;animation:meshA 28s ease-in-out infinite alternate} .mesh::after{width:800px;height:800px;background:radial-gradient(circle,var(--violet) 0%,transparent 70%);bottom:-300px;right:-200px;animation:meshB 36s ease-in-out infinite alternate} @keyframes meshA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40vw,30vh) scale(1.2)}} @keyframes meshB{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-30vw,-25vh) scale(1.3)}} @media(prefers-reduced-motion:reduce){.mesh::before,.mesh::after{animation:none}} .grid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--grid-color,rgba(255,255,255,.012)) 1px,transparent 1px),linear-gradient(90deg,var(--grid-color,rgba(255,255,255,.012)) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 80%)} :root[data-theme="light"] .grid-bg{--grid-color:rgba(0,0,0,.05)} /* NAV */ .nav{position:sticky;top:0;z-index:100;background:rgba(7,7,8,.65);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--line)} :root[data-theme="light"] .nav{background:rgba(250,250,249,.75)} .nav-w{max-width:1320px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;letter-spacing:-.02em} .brand-mk{width:30px;height:30px;border-radius:9px;background:var(--grad-1);display:flex;align-items:center;justify-content:center;color:var(--bg);font-weight:800;font-size:14px;box-shadow:0 0 24px rgba(190,242,100,.35),inset 0 1px 0 rgba(255,255,255,.4)} .nav-l{display:flex;gap:6px;align-items:center} .nav-l a{color:var(--tx-2);font-weight:500;font-size:14px;padding:8px 14px;border-radius:8px;transition:color .15s,background .15s} .nav-l a:hover,.nav-l a.active{color:var(--tx);background:var(--surface)} .nav-l a.active{color:var(--lime)} .nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--tx);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;font-size:13px;transition:transform .2s var(--easing-spring)} .nav-cta:hover{transform:translateY(-2px)} .theme-toggle{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--tx-2);transition:.2s} .theme-toggle:hover{color:var(--tx);border-color:var(--line-3)} .theme-toggle .ic-sun{display:none} :root[data-theme="light"] .theme-toggle .ic-moon{display:none} :root[data-theme="light"] .theme-toggle .ic-sun{display:block} @media(max-width:880px){.nav-l{display:none}} /* PAGE WRAP */ .wrap{max-width:1280px;margin:0 auto;padding:0 28px} .wrap-narrow{max-width:780px;margin:0 auto;padding:0 28px} /* BLOG INDEX HERO */ .idx-hero{padding:88px 0 56px;text-align:center;position:relative} .idx-hero .eb{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--mono);font-size:11px;color:var(--tx-2);letter-spacing:.08em;text-transform:uppercase;background:var(--surface);margin-bottom:28px} .idx-hero .eb::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)} .idx-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(48px,8vw,96px);line-height:.95;letter-spacing:-.04em;margin-bottom:24px;font-variation-settings:'opsz' 144} .idx-hero h1 em{font-style:italic;color:var(--lime)} .idx-hero p{font-size:clamp(17px,1.6vw,20px);color:var(--tx-2);max-width:600px;margin:0 auto;line-height:1.55} /* POST GRID */ .posts{padding:48px 0 100px;display:grid;grid-template-columns:repeat(2,1fr);gap:32px} @media(max-width:880px){.posts{grid-template-columns:1fr;gap:24px}} .post-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:.3s var(--easing);display:flex;flex-direction:column;cursor:pointer} .post-card:hover{transform:translateY(-6px);border-color:var(--line-3);box-shadow:0 24px 60px -20px rgba(0,0,0,.5)} :root[data-theme="light"] .post-card:hover{box-shadow:0 24px 60px -20px rgba(0,0,0,.15)} .post-card.featured{grid-column:span 2} @media(max-width:880px){.post-card.featured{grid-column:span 1}} .post-img{aspect-ratio:16/9;background:var(--bg-2);position:relative;overflow:hidden} .post-img .gradient{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:clamp(48px,8vw,120px);font-style:italic;color:rgba(255,255,255,.15);font-weight:400;letter-spacing:-.04em;text-align:center;padding:24px} :root[data-theme="light"] .post-img .gradient{color:rgba(0,0,0,.15)} .post-img.g1{background:linear-gradient(135deg,#1e1b4b 0%,#0f172a 50%,#1e1b4b 100%)} .post-img.g2{background:linear-gradient(135deg,#3f1d38 0%,#0f0f17 50%,#1a0f2e 100%)} .post-img.g3{background:linear-gradient(135deg,#0c2f1a 0%,#0a0f0a 50%,#1a3a2e 100%)} .post-img.g4{background:linear-gradient(135deg,#3a1a0a 0%,#1a0a0a 50%,#3a2010 100%)} .post-img.g5{background:linear-gradient(135deg,#0a2236 0%,#0a0f1a 50%,#0e1f3a 100%)} .post-img.g6{background:linear-gradient(135deg,#3a1a1a 0%,#1a0a0f 50%,#2e1a2a 100%)} .post-img.g7{background:linear-gradient(135deg,#1a3a1a 0%,#0a1a0f 50%,#0f2a1a 100%)} .post-img.g8{background:linear-gradient(135deg,#2a1a3a 0%,#1a0f2a 50%,#3a1a4a 100%)} .post-img.g9{background:linear-gradient(135deg,#3a2a0a 0%,#1a1a0a 50%,#2a2010 100%)} .post-img.g10{background:linear-gradient(135deg,#0f3a3a 0%,#0a1a1a 50%,#1a2a3a 100%)} .post-img.g11{background:linear-gradient(135deg,#2a0f0a 0%,#0f0a0a 50%,#1a1a0f 100%)} .post-body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1} .post-meta{display:flex;gap:14px;font-family:var(--mono);font-size:11px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px} .post-meta .cat{color:var(--lime)} .post-card h2{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:-.02em;margin-bottom:12px;color:var(--tx)} .post-card.featured h2{font-size:34px} .post-card p{color:var(--tx-2);font-size:14.5px;line-height:1.6;margin-bottom:20px;flex:1} .post-card .read{font-family:var(--mono);font-size:11px;color:var(--lime);text-transform:uppercase;letter-spacing:.08em;display:inline-flex;align-items:center;gap:6px} .post-card .read::after{content:"→";transition:transform .2s} .post-card:hover .read::after{transform:translateX(4px)} /* POST PAGE */ .post-hero{padding:72px 0 48px;text-align:center;border-bottom:1px solid var(--line)} .post-hero .breadcrumbs{font-family:var(--mono);font-size:11px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:24px} .post-hero .breadcrumbs a{color:var(--tx-3);transition:color .15s} .post-hero .breadcrumbs a:hover{color:var(--lime)} .post-hero .cat{display:inline-block;color:var(--lime);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px} .post-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5.5vw,64px);line-height:1.05;letter-spacing:-.03em;margin-bottom:24px;font-variation-settings:'opsz' 144;max-width:800px;margin-left:auto;margin-right:auto} .post-hero h1 em{font-style:italic;color:var(--lime)} .post-hero .lead{font-size:clamp(17px,1.6vw,20px);color:var(--tx-2);max-width:640px;margin:0 auto 28px;line-height:1.55} .post-hero .byline{display:flex;justify-content:center;gap:18px;font-family:var(--mono);font-size:12px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.06em;flex-wrap:wrap} .post-hero .byline span{display:inline-flex;align-items:center;gap:8px} .post-hero .byline .dot{color:var(--line-3)} /* ARTICLE BODY */ article{padding:64px 0 88px;font-size:18px;line-height:1.72;color:var(--tx-2)} article p{margin-bottom:1.4em;font-size:18px;color:var(--tx)} article p strong{color:var(--tx);font-weight:600} article h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.5vw,38px);color:var(--tx);margin:2.4em 0 .8em;letter-spacing:-.02em;line-height:1.2} article h2 em{font-style:italic;color:var(--lime)} article h3{font-family:var(--sans);font-weight:700;font-size:21px;color:var(--tx);margin:1.8em 0 .6em;letter-spacing:-.01em} article ul,article ol{margin:0 0 1.4em 1.4em;color:var(--tx);font-size:18px} article li{margin-bottom:.5em;line-height:1.65} article ul li::marker{color:var(--lime)} article a{color:var(--lime);border-bottom:1px solid rgba(190,242,100,.3);transition:border-color .2s,background .2s;padding:0 2px} article a:hover{border-color:var(--lime);background:rgba(190,242,100,.08)} :root[data-theme="light"] article a{border-bottom-color:rgba(132,204,22,.4)} article blockquote{margin:2em 0;padding:24px 32px;border-left:3px solid var(--lime);background:var(--surface);border-radius:0 14px 14px 0;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.4;color:var(--tx);letter-spacing:-.01em} article blockquote p{font-size:22px;margin:0;color:var(--tx)} article hr{border:none;height:1px;background:var(--line);margin:3em auto;max-width:80px} article code{font-family:var(--mono);font-size:.92em;background:var(--surface);padding:2px 7px;border-radius:5px;border:1px solid var(--line);color:var(--lime)} article .tldr{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px 28px;margin:0 0 2.4em;font-size:16px;line-height:1.6;color:var(--tx-2)} article .tldr strong{color:var(--lime);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:8px} article .demo-link{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:1.8em 0;transition:.2s;text-decoration:none} article .demo-link:hover{transform:translateX(4px);border-color:var(--lime);background:rgba(190,242,100,.04)} article .demo-link .ic{width:42px;height:42px;border-radius:11px;background:var(--grad-1);display:flex;align-items:center;justify-content:center;color:var(--bg);font-weight:700;font-size:18px;flex-shrink:0} article .demo-link .tx{flex:1;border:none;background:none;padding:0;color:var(--tx)} article .demo-link .tx strong{display:block;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--tx);margin-bottom:3px} article .demo-link .tx span{color:var(--tx-2);font-size:13px;font-style:normal;font-family:var(--sans)} article .demo-link .arrow{color:var(--tx-3);font-size:18px;transition:.2s} article .demo-link:hover .arrow{color:var(--lime);transform:translateX(4px)} /* END-OF-POST CTA */ .eopost-cta{margin:32px 0 0;padding:48px 40px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);text-align:center;position:relative;overflow:hidden} .eopost-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(190,242,100,.08) 0%,transparent 60%);pointer-events:none} .eopost-cta h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;margin-bottom:14px;color:var(--tx)} .eopost-cta h3 em{font-style:italic;color:var(--lime)} .eopost-cta p{font-size:16px;color:var(--tx-2);margin-bottom:24px;max-width:480px;margin-left:auto;margin-right:auto} .eopost-cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .eopost-cta .btn-pri{display:inline-flex;align-items:center;gap:8px;background:var(--tx);color:var(--bg);padding:13px 24px;border-radius:999px;font-weight:600;font-size:14px;transition:transform .2s var(--easing-spring)} .eopost-cta .btn-pri:hover{transform:translateY(-2px)} .eopost-cta .btn-sec{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);padding:13px 24px;border-radius:999px;font-weight:500;font-size:14px;color:var(--tx);transition:.2s} .eopost-cta .btn-sec:hover{border-color:var(--tx);background:var(--surface)} /* RELATED POSTS */ .related{padding:64px 0 0;border-top:1px solid var(--line);margin-top:32px} .related h4{font-family:var(--mono);font-size:11px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:28px} .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:880px){.related-grid{grid-template-columns:1fr;gap:16px}} .related-card{padding:22px 22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:.2s;display:block} .related-card:hover{transform:translateY(-4px);border-color:var(--line-3)} .related-card .cat{font-family:var(--mono);font-size:10px;color:var(--lime);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px} .related-card h5{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.2;color:var(--tx);letter-spacing:-.01em} /* FOOTER */ footer{padding:64px 0 28px;border-top:1px solid var(--line);margin-top:48px} .footer-wrap{max-width:1280px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px 32px} @media(max-width:880px){.footer-wrap{grid-template-columns:1fr 1fr;gap:32px 24px}} footer h4{font-family:var(--mono);font-size:11px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px} footer ul{list-style:none} footer li{font-size:13px;color:var(--tx-2);margin-bottom:8px} footer a{transition:color .15s} footer a:hover{color:var(--lime)} .copy{max-width:1280px;margin:48px auto 0;padding:24px 28px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.06em;flex-wrap:wrap;gap:12px} /* Mobile padding */ @media(max-width:600px){ .idx-hero{padding:48px 0 32px} article{padding:40px 0 60px;font-size:17px} article p{font-size:17px} article blockquote{padding:18px 20px;font-size:18px} article blockquote p{font-size:18px} .post-hero{padding:48px 0 32px} .eopost-cta{padding:32px 24px} .post-body{padding:24px 24px 26px} }