/* ============================================================ loweffort.com blog (09.10.2026): the GHL blog list (/blog) and the post template (/post/...) in the Low Effort design v4. Inter · ink #111F32 · accent red #A91614 · white / #F4F8FC · pills. GHL renders the markup and ships its own element styles (#blog-post- .blog-title {...}); every rule here is scoped to #preview-container plus an attribute selector, so it outranks them without naming the element ids. Nothing here changes any wording. ============================================================ */ #preview-container{ --ink:#111F32; --ink2:#1F2A3A; --muted:#607179; --faint:#667D9B; --line:#DCE3EC; --paper2:#F4F8FC; --accent:#A91614; --accent-dk:#8E1210; --sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } /* Inter everywhere, except icon fonts (the social icons in the author box) */ #preview-container [id^="blog-post-"],#preview-container [id^="blog-post-"] *:not(i):not([class*="icon"]):not([class*="fa-"]), #preview-container [id^="blog-subscribe-form-"],#preview-container [id^="blog-subscribe-form-"] *:not(i):not([class*="icon"]), #preview-container [id^="blog-content-"],#preview-container [id^="blog-content-"] *:not(i):not([class*="icon"]):not([class*="fa-"]){font-family:var(--sans)!important} #preview-container [id^="blog-post-"],#preview-container [id^="blog-content-"]{-webkit-font-smoothing:antialiased} /* ---- the sections that carry the blog elements: white, and clear of the fixed 72px site header ---- */ #preview-container .fullSection:has(.c-blog-post),#preview-container .fullSection:has(.c-blog-content){ background-color:#fff!important;border:0!important;padding:56px 24px 72px!important} body:has(.header .brand) #preview-container .fullSection:has(.c-blog-post), body:has(.header .brand) #preview-container .fullSection:has(.c-blog-content){padding-top:128px!important} #preview-container .fullSection:has(.c-blog-post)>.inner,#preview-container .fullSection:has(.c-blog-content)>.inner{max-width:1150px!important} /* an empty section left over under the list */ #preview-container .fullSection:has(.empty-component-wrapper):not(:has(.c-blog-post,.c-blog-content,.c-custom-code)){display:none!important} /* ---- /blog: heading ---- */ #preview-container [id^="blog-post-"]{padding:0!important;border:0!important;border-radius:0!important} #preview-container [id^="blog-post-"] .hl-blog-post-home{background:none!important;padding:0!important;margin:0!important;border-radius:0!important} #preview-container [id^="blog-post-"] .hl-blog-post-home>.flex>.w-full{text-align:left!important} #preview-container [id^="blog-post-"] .blog-heading{float:none!important;font-size:clamp(32px,4.4vw,48px)!important;line-height:1.18!important;font-weight:700!important; letter-spacing:-.015em;color:var(--ink)!important;text-transform:none!important;margin:0 0 36px!important;padding:0!important} #preview-container [id^="blog-post-"] .blog-heading::before{content:"Blog";display:block;font-size:12px;line-height:1.4;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--faint);margin:0 0 12px} /* ---- /blog: one post per row, hairline between rows ---- */ #preview-container [id^="blog-post-"] .blog-post-wrapper-compact{gap:0!important} #preview-container [id^="blog-post-"] .blog-post-wrapper-compact-list{border-top:1px solid var(--line);padding:32px 0!important;margin:0!important} #preview-container [id^="blog-post-"] .blog-compact-content{gap:48px;align-items:flex-start} #preview-container [id^="blog-post-"] .content-width-compact{max-width:none!important;width:auto!important;flex:1 1 0;min-width:0} #preview-container [id^="blog-post-"] .blog-title{font-size:24px!important;line-height:1.25!important;font-weight:700!important;letter-spacing:-.015em;color:var(--ink)!important; text-transform:none!important;font-style:normal!important;padding:0!important;margin:0 0 10px!important} #preview-container [id^="blog-post-"] .blog-title a{color:var(--ink)!important;text-decoration:none!important} #preview-container [id^="blog-post-"] .blog-title a:hover{text-decoration:underline!important;text-decoration-color:var(--accent)!important;text-decoration-thickness:2px!important;text-underline-offset:.2em} #preview-container [id^="blog-post-"] .blog-author{font-size:13px!important;font-weight:600!important;color:var(--ink2)!important;padding:0!important;margin:0 12px 0 0!important;text-transform:none!important} #preview-container [id^="blog-post-"] .blog-author-image{border-radius:50%!important;background:var(--paper2)!important} #preview-container [id^="blog-post-"] .blog-publish-date{font-size:13px!important;font-weight:400!important;color:var(--muted)!important;padding:0!important;margin:0!important;text-transform:none!important} #preview-container [id^="blog-post-"] .content-width-compact>.text-xs{margin:0 0 12px} #preview-container [id^="blog-post-"] .blog-description{font-size:16px!important;line-height:1.6!important;font-weight:400!important;color:var(--ink2)!important; text-transform:none!important;padding:0!important;margin:0 0 16px!important;max-width:62ch} #preview-container [id^="blog-post-"] .blog-button{background:none!important;font-size:15px!important;line-height:1.4!important;font-weight:600!important;color:var(--ink)!important; text-transform:none!important;padding:0!important;margin:0!important;border-radius:0!important;display:inline-flex;align-items:center;gap:6px; text-decoration:underline!important;text-decoration-color:var(--accent)!important;text-decoration-thickness:2px!important;text-underline-offset:.2em} #preview-container [id^="blog-post-"] .blog-button:hover{color:var(--accent-dk)!important} #preview-container [id^="blog-post-"] .blog-button-icon{stroke:var(--accent)!important;color:var(--accent)!important;width:14px!important;height:14px!important} #preview-container [id^="blog-post-"] .blog-image-compact-wrapper{width:320px!important;height:auto!important} #preview-container [id^="blog-post-"] .blog-image{border-radius:12px!important;background:var(--paper2)!important;margin:0!important;padding:0!important;display:block} #preview-container [id^="blog-post-"] .blog-image-compact{width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover} #preview-container [id^="blog-post-"] .blog-tag{background:var(--paper2)!important;color:var(--muted)!important;border-radius:999px!important;font-weight:600!important} /* ---- /blog: pagination ---- */ #preview-container [id^="blog-post-"] .hl-blog-post-home>.mt-10{border-top:1px solid var(--line);margin-top:0!important;padding-top:32px} #preview-container [id^="blog-post-"] .pagination-container{gap:8px!important;margin:0!important;padding:0!important} #preview-container [id^="blog-post-"] .pagination-button{font-size:15px!important;font-weight:500;color:var(--ink)!important;background:#fff!important;border:1px solid var(--line)!important; border-radius:999px!important;min-width:40px!important;height:40px;padding:0 14px!important;transition:border-color .15s} #preview-container [id^="blog-post-"] .pagination-button:hover:not(:disabled){border-color:var(--ink)!important;background:#fff!important} #preview-container [id^="blog-post-"] .pagination-button.active{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important;font-weight:600} #preview-container [id^="blog-post-"] .pagination-button:disabled{color:var(--muted)!important;opacity:.6} /* ---- /blog: subscribe band ---- */ #preview-container [id^="blog-subscribe-form-"]{margin-top:56px!important} #preview-container [id^="blog-subscribe-form-"] .hl-blog-subscribe-form{border:0!important;border-radius:0!important} #preview-container [id^="blog-subscribe-form-"] .subscribe-wrapper-plain,#preview-container [id^="blog-subscribe-form-"] .subscribe-wrapper{ background:var(--paper2)!important;border-radius:12px;padding:36px 40px!important;min-height:0!important} #preview-container [id^="blog-subscribe-form-"] .subscribe-content-plain{gap:40px!important} #preview-container [id^="blog-subscribe-form-"] .subscribe-text-section{flex:1 1 0!important} #preview-container [id^="blog-subscribe-form-"] .subscribe-form-plain{flex:0 1 440px!important} #preview-container [id^="blog-subscribe-form-"] .subscribe-title{font-size:24px!important;line-height:1.25!important;font-weight:700!important;letter-spacing:-.015em;color:var(--ink)!important;text-transform:none!important} #preview-container [id^="blog-subscribe-form-"] .subscribe-description{font-size:16px!important;line-height:1.6!important;color:var(--ink2)!important;margin-bottom:0!important} #preview-container [id^="blog-subscribe-form-"] .blog-subscribe-form-group{height:52px!important;border:1px solid var(--line);border-radius:999px!important;box-shadow:none!important;background:#fff!important;padding:4px;align-items:stretch} #preview-container [id^="blog-subscribe-form-"] .blog-subscribe-form-group:focus-within{border-color:var(--ink)} #preview-container [id^="blog-subscribe-form-"] .subscribe-email-input{font-size:15px!important;color:var(--ink)!important;border-radius:999px!important;padding:0 18px!important;min-width:0} #preview-container [id^="blog-subscribe-form-"] .subscribe-email-input::placeholder{color:var(--muted)!important} #preview-container [id^="blog-subscribe-form-"] .subscribe-button{background-color:var(--accent)!important;color:#fff!important;font-size:15px!important;font-weight:600!important;line-height:1.2!important; border-radius:999px!important;padding:0 22px!important;margin:0!important;align-items:center;white-space:nowrap;transition:background-color .16s ease} #preview-container [id^="blog-subscribe-form-"] .subscribe-button:hover{background-color:var(--accent-dk)!important} #preview-container [id^="blog-subscribe-form-"] .subscribe-success-message{border-radius:12px} /* ---- /post/...: one reading column ---- */ #preview-container [id^="blog-content-"]{background:#fff!important;border:0!important;padding:0!important} #preview-container [id^="blog-content-"] .blog-html-container-single{max-width:760px!important;background:#fff!important;color:var(--ink2)!important;font-size:18px;line-height:1.7;overflow:visible} #preview-container [id^="blog-content-"] .blog-cover-image-container img{border-radius:12px;background:var(--paper2)} #preview-container [id^="blog-content-"] .blog-content-title{font-size:clamp(30px,4vw,44px)!important;line-height:1.15!important;font-weight:700!important;letter-spacing:-.015em; color:var(--ink)!important;text-transform:none!important;padding:0!important;margin:36px 0 14px!important} #preview-container [id^="blog-content-"] .meta-section-1{line-height:1.5} #preview-container [id^="blog-content-"] .meta-section-1 span{font-size:14px!important;color:var(--muted)!important} #preview-container [id^="blog-content-"] .blog-category a{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)!important;text-decoration:none!important} #preview-container [id^="blog-content-"] .blog-category a:hover{color:var(--ink)!important} #preview-container [id^="blog-content-"] .blog-info-dot{font-size:14px!important} #preview-container [id^="blog-content-"] .blog-html{background:#fff!important;color:var(--ink2)!important;margin:28px 0 8px!important;padding-top:28px;border-top:1px solid var(--line)} #preview-container [id^="blog-content-"] .blog-html>*{margin-top:0;margin-bottom:1.15em} #preview-container [id^="blog-content-"] .blog-html p,#preview-container [id^="blog-content-"] .blog-html li{font-size:18px;line-height:1.7} #preview-container [id^="blog-content-"] .blog-html strong,#preview-container [id^="blog-content-"] .blog-html b{color:var(--ink);font-weight:700} #preview-container [id^="blog-content-"] .blog-html h1,#preview-container [id^="blog-content-"] .blog-html h2,#preview-container [id^="blog-content-"] .blog-html h3, #preview-container [id^="blog-content-"] .blog-html h4{color:var(--ink);font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:1.9em 0 .6em} #preview-container [id^="blog-content-"] .blog-html h1,#preview-container [id^="blog-content-"] .blog-html h2{font-size:28px} #preview-container [id^="blog-content-"] .blog-html h3{font-size:22px} #preview-container [id^="blog-content-"] .blog-html h4{font-size:18px} #preview-container [id^="blog-content-"] .blog-html a{color:var(--ink)!important;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.2em} #preview-container [id^="blog-content-"] .blog-html a:hover{color:var(--accent-dk)!important} #preview-container [id^="blog-content-"] .blog-html ul,#preview-container [id^="blog-content-"] .blog-html ol{padding-left:1.4em;margin:0 0 1.15em} #preview-container [id^="blog-content-"] .blog-html li{margin:0 0 .45em} #preview-container [id^="blog-content-"] .blog-html li p{margin:0} #preview-container [id^="blog-content-"] .blog-html blockquote{border-left:3px solid var(--accent)!important;padding:2px 0 2px 22px;margin:1.6em 0} #preview-container [id^="blog-content-"] .blog-html blockquote,#preview-container [id^="blog-content-"] .blog-html blockquote *{background:none!important;color:var(--ink)!important} #preview-container [id^="blog-content-"] .blog-html blockquote p{font-size:20px;line-height:1.5;font-weight:500;margin:0} #preview-container [id^="blog-content-"] .blog-html img,#preview-container [id^="blog-content-"] .blog-html video,#preview-container [id^="blog-content-"] .blog-html iframe{border-radius:12px} #preview-container [id^="blog-content-"] .blog-html hr{border-top:1px solid var(--line)!important;margin:2.2em 0} #preview-container [id^="blog-content-"] .blog-html figcaption{color:var(--muted)!important;font-style:normal!important;font-size:14px!important} #preview-container [id^="blog-content-"] .blog-html th{background:var(--paper2)!important;color:var(--ink)!important} #preview-container [id^="blog-content-"] .blog-html td,#preview-container [id^="blog-content-"] .blog-html th{border-color:var(--line)!important;font-size:16px} #preview-container [id^="blog-content-"] .blog-tags .tag{background:var(--paper2)!important;color:var(--muted)!important;border-radius:999px!important;font-weight:500} /* ---- /post/...: author box and back to top ---- */ #preview-container [id^="blog-content-"] .blog-author-details{background:var(--paper2)!important;border:0!important;border-radius:12px!important;padding:22px 24px!important;margin:32px 0 0!important; font-size:15px!important;color:var(--ink2)!important} #preview-container [id^="blog-content-"] .blog-author-container{justify-content:flex-start} #preview-container [id^="blog-content-"] .blog-author-details a{color:var(--ink)!important;text-decoration:none} #preview-container [id^="blog-content-"] .blog-author-name a{font-weight:700} #preview-container [id^="blog-content-"] .blog-author-details a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.2em} #preview-container [id^="blog-content-"] .blog-author-description-modern,#preview-container [id^="blog-content-"] .blog-author-description{font-size:15px!important;line-height:1.55!important;color:var(--ink2)!important;text-align:left} #preview-container [id^="blog-content-"] .blog-author-read-more{color:var(--ink)!important;font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.2em} #preview-container [id^="blog-content-"] .blog-author-image-post,#preview-container [id^="blog-content-"] .blog-author-image-post img{border-radius:50%!important} #preview-container [id^="blog-content-"] .hl-blog-content-back-to-top-container{background:none!important;margin:32px auto 0!important} #preview-container [id^="blog-content-"] .back-to-top{background:#fff!important;border:1px solid var(--line)!important;border-radius:999px!important;color:var(--ink)!important; font-size:15px!important;font-weight:600!important;padding:11px 20px!important;transition:border-color .15s} #preview-container [id^="blog-content-"] .back-to-top:hover{border-color:var(--ink)!important} #preview-container [id^="blog-content-"] .blog-back-button{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:15px;font-weight:600;color:var(--ink)!important;text-decoration:none} #preview-container [id^="blog-content-"] .blog-back-button:hover span{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.2em} @media(max-width:900px){ #preview-container [id^="blog-post-"] .blog-compact-content{gap:28px} #preview-container [id^="blog-post-"] .blog-image-compact-wrapper{width:240px!important} #preview-container [id^="blog-subscribe-form-"] .subscribe-content-plain{flex-direction:column!important;align-items:stretch!important;gap:22px!important} #preview-container [id^="blog-subscribe-form-"] .subscribe-form-plain{flex:0 0 auto!important;width:100%} } @media(max-width:767px){ #preview-container .fullSection:has(.c-blog-post),#preview-container .fullSection:has(.c-blog-content){padding:36px 20px 52px!important} body:has(.header .brand) #preview-container .fullSection:has(.c-blog-post), body:has(.header .brand) #preview-container .fullSection:has(.c-blog-content){padding-top:104px!important} #preview-container [id^="blog-post-"] .blog-heading{margin-bottom:24px!important} #preview-container [id^="blog-post-"] .blog-post-wrapper-compact-list{padding:26px 0!important} #preview-container [id^="blog-post-"] .blog-compact-content{flex-direction:column-reverse!important;gap:18px} #preview-container [id^="blog-post-"] .content-width-compact{flex:0 0 auto;width:100%!important} #preview-container [id^="blog-post-"] .blog-image-compact-wrapper{width:100%!important} #preview-container [id^="blog-post-"] .blog-compact-content>div:last-child{width:100%} #preview-container [id^="blog-post-"] .blog-title{font-size:21px!important} #preview-container [id^="blog-post-"] .pagination-button{min-width:36px!important;height:36px;padding:0 11px!important;font-size:14px!important} #preview-container [id^="blog-subscribe-form-"]{margin-top:40px!important} #preview-container [id^="blog-subscribe-form-"] .subscribe-wrapper-plain{padding:26px 22px!important;text-align:left!important} #preview-container [id^="blog-subscribe-form-"] .subscribe-title{font-size:21px!important} #preview-container [id^="blog-content-"] .blog-html p,#preview-container [id^="blog-content-"] .blog-html li{font-size:17px} #preview-container [id^="blog-content-"] .blog-html h1,#preview-container [id^="blog-content-"] .blog-html h2{font-size:24px} #preview-container [id^="blog-content-"] .blog-html h3{font-size:20px} #preview-container [id^="blog-content-"] .blog-html blockquote p{font-size:18px} #preview-container [id^="blog-content-"] .blog-author-details{padding:18px!important} } /* ---- footer: the blog's copy of the site footer (same text, same look; markup from build.py) ---- */ #le-foot{background:#111F32;color:#667D9B;font-family:Lato,"Inter",system-ui,sans-serif;font-size:14px;line-height:21px;text-align:center;padding:40px 20px 34px} #le-foot .wrap{max-width:1220px;margin:0 auto} #le-foot img{display:block;width:140px;height:140px;margin:0 auto 30px} #le-foot p{margin:0;color:#667D9B} #le-foot p:first-of-type{margin-bottom:21px} #le-foot p.small{font-size:12px;line-height:18px;font-style:italic;max-width:900px;margin:20px auto} #le-foot p.links{line-height:19.6px} #le-foot a{color:#667D9B;text-decoration:none} #le-foot a:hover{color:#fff} /* the code element that carries the footer sits in its own section: no padding, full width */ #preview-container .fullSection:has(#le-foot){padding:0!important;margin:0!important;border:0!important;background:#111F32!important} #preview-container .fullSection:has(#le-foot)>.inner,#preview-container .fullSection:has(#le-foot) .inner, #preview-container .fullSection:has(#le-foot) [class*="row-"],#preview-container .fullSection:has(#le-foot) [class*="col-"], #preview-container .fullSection:has(#le-foot) .c-custom-code{max-width:none!important;width:100%!important;padding:0!important;margin:0!important} @media(max-width:767px){ #le-foot{font-size:12px;line-height:18px;padding:40px 20px 30px} #le-foot img{width:120px;height:120px} #le-foot p:first-of-type{margin-bottom:18px} #le-foot p.small{font-size:11px;line-height:16.5px;padding:0 10px} #le-foot p.links{line-height:18px;padding:0 40px} }