/* ============================================================ Aavenir — Industry Pages · Shared Design System Primary brand: green ##F56200 · accent orange #F56200 Per-page industry accent is set via --accent on ============================================================ */ :root{ --navy:#0B211C;--navy-2:#0E342A;--ink:#15241E;--text:#232B26;--text-soft:#5A6270; --brand:#F56200;--brand-2:#5DBB63;--brand-soft:#E9F7F0;--brand-dark:#0B855C; --accent:#0EA5A4; /* overridden per industry */ --accent-soft:#E6F6F5; --gold:#F6B33B;--danger:#D84A3F; --bg:#FFFFFF;--muted:#F6F8F7;--muted-2:#EEF2F0;--border:#E5EAE7; --shadow-sm:0 1px 2px rgba(16,40,32,.06),0 1px 3px rgba(16,40,32,.04); --shadow:0 8px 30px rgba(16,40,32,.08); --shadow-lg:0 24px 60px rgba(16,40,32,.14); --radius:14px;--maxw:1180px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:17px} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:200;border-radius:8px} .skip:focus{left:16px;top:16px} h1,h2,h3,h4{color:var(--ink);line-height:1.14;letter-spacing:-.02em;font-weight:700} h2{font-size:clamp(28px,3.4vw,42px)} h3{font-size:21px;letter-spacing:-.01em} .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);margin-bottom:14px} .lede{font-size:19px;color:var(--text-soft);max-width:720px} .center{text-align:center} .center .lede{margin-left:auto;margin-right:auto} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;padding:13px 22px;border-radius:10px;cursor:pointer;transition:.18s ease;border:1px solid transparent;white-space:nowrap} .btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(245, 98, 0,.28)} .btn-primary:hover{background:var(--brand-dark);transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border)} .btn-ghost:hover{border-color:var(--brand);color:var(--brand)} .btn-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)} .btn-light:hover{background:rgba(255,255,255,.2)} .btn-white{background:#fff;color:var(--brand)} .btn-white:hover{transform:translateY(-1px);box-shadow:var(--shadow)} /* Nav */ header.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px} .logo{display:flex;align-items:center;color:var(--ink)} .logo-img{height:34px;width:auto;display:block} .logo-white{filter:brightness(0) invert(1)} @media(max-width:520px){.logo-img{height:30px}} .nav-links{display:flex;align-items:center;gap:22px} .nav-links a{font-size:14.5px;font-weight:500;color:var(--text-soft);white-space:nowrap} .nav-links a:hover{color:var(--ink)} .nav-links a.active{color:var(--ink);font-weight:600} .nav-cta{display:flex;align-items:center;gap:14px} .nav-cta a.signin{font-size:15px;font-weight:600;color:var(--ink)} @media(max-width:1000px){.nav-links{display:none}.nav-cta a.signin{display:none}} /* Hero */ .hero{position:relative;background: radial-gradient(1100px 560px at 82% -10%,var(--accent-glow,rgba(14,165,164,.28)),transparent 60%), linear-gradient(158deg,#0B211C 0%,#0E342A 52%,var(--hero-2,#123a30) 100%);color:#fff;overflow:hidden} .hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;opacity:.5;pointer-events:none} .hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center;padding:76px 0 84px} .hero h1{color:#fff;font-size:clamp(33px,4.4vw,54px);line-height:1.08} .hero h1 .hl{background:linear-gradient(90deg,#c6f0d5,var(--accent-lite,#7fe0c9));-webkit-background-clip:text;background-clip:text;color:transparent} .hero p.sub{color:#C7D6CE;font-size:19px;margin-top:22px;max-width:560px} .hero .eyebrow{color:var(--accent-lite,#7fe0c9)} .hero-badge{width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:var(--accent-lite,#7fe0c9);margin-bottom:20px} .hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap} .hero-trust{margin-top:26px;display:flex;align-items:center;gap:12px;color:#9fb0a7;font-size:14px;flex-wrap:wrap} .hero-trust .pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:6px 12px;border-radius:99px;font-weight:600;color:#e2ede7} @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:38px;padding:54px 0}} /* HubSpot form card (hero right + CTA) */ .form-card{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;color:var(--text)} .form-card .fc-head{padding:22px 26px 16px;border-bottom:1px solid var(--border)} .form-card .fc-head h3{font-size:20px} .form-card .fc-head p{color:var(--text-soft);font-size:14.5px;margin-top:4px} .form-card .fc-body{padding:22px 26px 26px} /* Placeholder shown until the real HubSpot form is embedded inside .hs-form */ .hs-form{min-height:280px} .hs-form .hs-placeholder{border:2px dashed var(--border);border-radius:12px;padding:26px;text-align:center;color:var(--text-soft);background:var(--muted)} .hs-form .hs-placeholder strong{display:block;color:var(--ink);font-size:15px;margin-bottom:6px} .hs-form .hs-placeholder code{font-size:12px;background:#fff;border:1px solid var(--border);border-radius:6px;padding:2px 7px;color:var(--brand-dark)} .hs-fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} .hs-fieldrow .full{grid-column:1/-1} .hs-mock label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:5px} .hs-mock input,.hs-mock select{width:100%;height:42px;border:1px solid var(--border);border-radius:9px;padding:0 12px;font-size:14px;background:#fff;color:var(--text)} .hs-mock .btn{width:100%;justify-content:center;margin-top:6px} .hs-note{font-size:12px;color:var(--text-soft);text-align:center;margin-top:12px} /* Sections */ section{padding:80px 0} .section-tight{padding:56px 0} .muted-bg{background:var(--muted)} .navy-bg{background:linear-gradient(158deg,#0B211C,#0E342A);color:#fff} .navy-bg h2{color:#fff} .head-block{max-width:760px;margin:0 auto 48px} /* Trust logos */ .logos-label{text-align:center;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft);font-weight:700;margin-bottom:24px} .logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px} .logo-chip{display:flex;align-items:center;gap:9px;padding:12px 22px;border:1px solid var(--border);border-radius:12px;background:#fff;font-weight:700;color:#3c4a44;letter-spacing:-.01em;filter:grayscale(1);opacity:.82;transition:.2s} .logo-chip:hover{filter:none;opacity:1;box-shadow:var(--shadow-sm)} .logo-chip .sq{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--brand),var(--accent))} /* Answer capsule + takeaways (AEO/GEO) */ .aeo{padding:58px 0 4px} .answer-capsule{background:var(--brand-soft);border:1px solid #CDEEDE;border-left:4px solid var(--brand);border-radius:14px;padding:26px 30px;max-width:900px;margin:0 auto} .answer-capsule .q{font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--brand);margin-bottom:10px} .answer-capsule p{font-size:18px;color:var(--ink);line-height:1.62;margin:0} .answer-capsule .upd{margin-top:14px;font-size:13px;color:var(--text-soft)} .takeaways{max-width:900px;margin:24px auto 0} .takeaways h2{font-size:20px;margin-bottom:14px} .takeaways ul{list-style:none;display:grid;gap:11px} .takeaways li{display:flex;gap:12px;font-size:15.5px;color:var(--text)} .takeaways .ck{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;margin-top:1px;font-size:12px} /* Stat band */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .stat{padding:6px 4px} .stat .n{font-size:clamp(32px,3.8vw,44px);font-weight:800;letter-spacing:-.03em;background:linear-gradient(90deg,#fff,var(--accent-lite,#a9e9d7));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .stat .t{color:#aebbb3;font-size:15px;margin-top:4px} .stat-src{text-align:center;margin-top:22px;font-size:13px;color:#8b9c94} @media(max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:26px}} /* Card grids */ .grid{display:grid;gap:22px} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} @media(max-width:880px){.g3{grid-template-columns:1fr 1fr}} @media(max-width:620px){.g2,.g3{grid-template-columns:1fr}} .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:.2s} .card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#d3ece0} .card .ic{width:46px;height:46px;border-radius:11px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand);margin-bottom:16px} .card h3{margin-bottom:9px} .card p{color:var(--text-soft);font-size:15.5px} .pain .ic{background:#FFF1F0;color:var(--danger)} /* Stakeholder cards */ .card.sh{border-top:3px solid var(--accent)} .card.sh h3{margin-bottom:14px} .sh-line{font-size:14.5px;color:var(--text-soft);margin-bottom:13px} .sh-line:last-child{margin-bottom:0} .sh-line span{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px} .sh-pain span{color:var(--danger)} .sh-solve span{color:var(--brand)} .pain h3 .risk{font-size:12px;font-weight:700;color:var(--danger);display:block;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px} /* Solution map */ .map{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff} .map .col-h{padding:17px 26px;font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase} .map .col-h.p{background:#FFF6F5;color:#C24135;border-bottom:1px solid var(--border)} .map .col-h.s{background:var(--brand-soft);color:var(--brand);border-bottom:1px solid var(--border);border-left:1px solid var(--border)} .map .cell{padding:19px 26px;border-bottom:1px solid var(--border);font-size:15.5px} .map .cell.s{border-left:1px solid var(--border);background:#fbfefc} .map .cell .lbl{font-weight:700;color:var(--ink);display:block;margin-bottom:3px} .map .cell.p .lbl{color:#9a3c33} .map .check{color:var(--brand);font-weight:800} .map-row:last-child .cell{border-bottom:none} @media(max-width:720px){.map{grid-template-columns:1fr}.map .col-h.s,.map .cell.s{border-left:none}} /* Modules / use cases */ .uc{display:flex;align-items:flex-start;gap:13px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;font-weight:600;color:var(--ink);font-size:15.5px;transition:.2s} .uc:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-2px)} .uc .dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:8px} .uc small{display:block;font-weight:400;color:var(--text-soft);font-size:13px;margin-top:2px} /* Why choose Aavenir */ .why{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .why ul{list-style:none;margin-top:8px} .why li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)} .why li:last-child{border-bottom:none} .why .ck{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);color:var(--accent-lite,#a9e9d7);display:grid;place-items:center;font-weight:800;margin-top:2px} .why li b{color:#fff}.why li span{color:#aebbb3;font-size:15px} .why .badge-stack{display:grid;grid-template-columns:1fr 1fr;gap:14px} .why .badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:18px;text-align:center} .why .badge .b1{font-size:15px;font-weight:800;color:#fff;letter-spacing:.02em} .why .badge .b2{color:#9fb0a7;font-size:12.5px;margin-top:4px} @media(max-width:820px){.why{grid-template-columns:1fr;gap:32px}} /* Case study */ .case{display:grid;grid-template-columns:1.1fr .9fr;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border)} .case .left{padding:44px;background:#fff} .case .quote{font-size:22px;line-height:1.5;color:var(--ink);font-weight:600;letter-spacing:-.01em} .case .right{background:linear-gradient(158deg,var(--navy-2),#0B211C);color:#fff;padding:44px;display:flex;flex-direction:column;justify-content:center;gap:22px} .case .metric .n{font-size:38px;font-weight:800;background:linear-gradient(90deg,#fff,var(--accent-lite,#a9e9d7));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .case .metric .t{color:#aebbb3;font-size:14px} .who{display:flex;align-items:center;gap:12px;margin-top:22px} .who .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;display:grid;place-items:center;font-weight:800} .who b{display:block;color:var(--ink)}.who span{color:var(--text-soft);font-size:14px} @media(max-width:760px){.case{grid-template-columns:1fr}.case .left,.case .right{padding:30px}} /* Testimonials */ .quote-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:.2s} .quote-card:hover{box-shadow:var(--shadow)} .quote-card .stars{color:var(--gold);letter-spacing:2px;font-size:15px;margin-bottom:12px} .quote-card p{color:var(--text);font-size:16px;margin-bottom:18px} .quote-card .who b{font-size:15px} .disclaimer{font-size:12px;color:var(--text-soft);text-align:center;margin-top:20px;opacity:.7} /* Resources */ .res{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.2s} .res:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .res .thumb{height:132px;position:relative;display:grid;place-items:center} .res .thumb .kind{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.2);color:#fff;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:99px} .res .thumb svg{color:rgba(255,255,255,.6)} .res .b{padding:22px} .res h3{font-size:18px;margin-bottom:8px} .res p{color:var(--text-soft);font-size:14px} .res .more{color:var(--brand);font-weight:600;font-size:14px;margin-top:12px;display:inline-block} /* FAQ */ .faq{max-width:840px;margin:0 auto} details.acc{border:1px solid var(--border);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden} details.acc summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:700;color:var(--ink);font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:16px} details.acc summary::-webkit-details-marker{display:none} details.acc summary .pm{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;transition:.2s} details.acc[open] summary .pm{transform:rotate(45deg)} details.acc .a{padding:0 24px 22px;color:var(--text-soft);font-size:15.5px} /* Final CTA */ .cta-band{background:radial-gradient(900px 400px at 70% 0%,var(--accent-glow,rgba(14,165,164,.3)),transparent 60%),linear-gradient(158deg,#0B211C,#0E342A);color:#fff;border-radius:22px;padding:54px;position:relative;overflow:hidden} .cta-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center} .cta-band h2{color:#fff;margin-bottom:14px} .cta-band p{color:#C7D6CE;max-width:520px;font-size:18px} .cta-band .cta-points{list-style:none;margin-top:20px;display:grid;gap:10px} .cta-band .cta-points li{display:flex;gap:10px;color:#d7e3dd;font-size:15px} .cta-band .cta-points .ck{color:var(--accent-lite,#a9e9d7);font-weight:800} @media(max-width:820px){.cta-grid{grid-template-columns:1fr;gap:28px}} /* Footer */ footer{background:var(--navy);color:#aebbb3;padding:58px 0 30px;font-size:14.5px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)} footer .logo{color:#fff;margin-bottom:14px} footer h4{color:#fff;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px} footer a{display:block;color:#9fb0a7;padding:6px 0} footer a:hover{color:#fff} .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;color:#7f9089;font-size:13px;flex-wrap:wrap;gap:12px} @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}} /* Index / landing */ .ind-hero{text-align:center;padding:96px 0 60px} .ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:40px} @media(max-width:900px){.ind-grid{grid-template-columns:1fr 1fr}} @media(max-width:620px){.ind-grid{grid-template-columns:1fr}} .ind-card{display:block;background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;transition:.2s;position:relative;overflow:hidden} .ind-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:#d3ece0} .ind-card .bar{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--ic,#0EA5A4))} .ind-card .ic{width:50px;height:50px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:16px} .ind-card h3{margin-bottom:8px} .ind-card p{color:var(--text-soft);font-size:15px} .ind-card .go{margin-top:14px;color:var(--brand);font-weight:600;font-size:14px} /* ============================================================ Blog — article layout additions (extends the industry system) ============================================================ */ .post-hero{padding:64px 0 58px;text-align:left} .post-hero .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:#9fb0a7;margin-bottom:22px} .post-hero .crumbs a{color:#c7d6ce;font-weight:600} .post-hero .crumbs a:hover{color:#fff} .post-hero .crumbs .sep{opacity:.5} .post-hero h1{max-width:860px;font-size:clamp(30px,4vw,48px)} .post-hero .sub{max-width:720px} .post-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;align-items:center} .post-meta .pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:6px 13px;border-radius:99px;font-weight:600;color:#e2ede7;font-size:13.5px} .post-meta .pill.kind{background:var(--accent);border-color:transparent;color:#fff} .article{max-width:800px;margin:0 auto;font-size:17.5px} .article>p{margin:0 0 22px;color:var(--text)} .article h2{font-size:clamp(24px,2.6vw,32px);margin:52px 0 18px} .article h3{font-size:20px;margin:34px 0 12px} .article ul,.article ol{margin:0 0 22px;padding-left:24px;color:var(--text)} .article li{margin-bottom:10px} .article li::marker{color:var(--brand);font-weight:700} .article strong{color:var(--ink)} .article a{color:var(--brand-dark);font-weight:600;border-bottom:1px solid rgba(14,159,110,.35)} .article a:hover{color:var(--brand);border-bottom-color:var(--brand)} .article table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden} .article th{background:var(--muted);text-align:left;padding:13px 16px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--border)} .article td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text)} .article tr:last-child td{border-bottom:none} .table-scroll{overflow-x:auto;margin:26px 0} .table-scroll table{margin:0;min-width:560px} .callout{background:var(--brand-soft);border:1px solid #CDEEDE;border-left:4px solid var(--brand);border-radius:12px;padding:22px 26px;margin:30px 0} .callout .t{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:8px} .callout p{margin:0;font-size:16px;color:var(--ink)} .callout.accent{background:var(--accent-soft);border-color:transparent;border-left-color:var(--accent)} .callout.accent .t{color:var(--accent)} .check-list{list-style:none;padding-left:0!important;display:grid;gap:12px;margin:24px 0!important} .check-list li{display:flex;gap:12px;margin:0!important;background:#fff;border:1px solid var(--border);border-radius:11px;padding:15px 18px;font-size:15.5px} .check-list .ck{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:12px;margin-top:2px} .check-list b{color:var(--ink)} .quote-pull{border-left:4px solid var(--accent);padding:6px 0 6px 24px;margin:32px 0;font-size:21px;font-weight:600;color:var(--ink);line-height:1.5;letter-spacing:-.01em} .quote-pull cite{display:block;font-size:14px;color:var(--text-soft);font-style:normal;font-weight:500;margin-top:10px} .post-cta{background:linear-gradient(158deg,var(--navy-2),#0B211C);border-radius:16px;padding:34px 38px;margin:44px 0;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap} .post-cta h3{color:#fff;font-size:21px;margin-bottom:6px} .post-cta p{color:#aebbb3;font-size:15px;margin:0;max-width:440px} .post-author{display:flex;align-items:center;gap:14px;border-top:1px solid var(--border);margin-top:48px;padding-top:28px} .post-author .av{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;display:grid;place-items:center;font-weight:800} .post-author b{display:block;color:var(--ink)} .post-author span{color:var(--text-soft);font-size:14px} /* Blog hub */ .hub-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 38px} .hub-filters button{font:inherit;font-size:14px;font-weight:600;padding:9px 18px;border-radius:99px;border:1px solid var(--border);background:#fff;color:var(--text-soft);cursor:pointer;transition:.18s} .hub-filters button:hover{border-color:var(--brand);color:var(--brand)} .hub-filters button.on{background:var(--navy);border-color:var(--navy);color:#fff} .res .thumb .ind-tag{position:absolute;bottom:14px;left:14px;color:rgba(255,255,255,.85);font-size:12px;font-weight:700;letter-spacing:.04em} /* Blog cover images */ .post-cover{max-width:1120px;margin:28px auto 0;padding:0 24px} .post-cover img{width:100%;height:auto;display:block;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow)} .res .thumb.has-img{height:168px;overflow:hidden} .res .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .res .thumb.has-img .kind{z-index:2;background:rgba(15,26,43,.78)} .res .thumb.has-img .ind-tag{z-index:2;background:rgba(15,26,43,.78);color:#fff;padding:4px 9px;border-radius:99px}