/* ========================================================================== Blog styles for autoteletech.com - Used by: * home/blog/index.html (blog index, generated by Eleventy) * home/blog//index.html (single posts, generated by Eleventy) * home/index.html (homepage "Latest from the blog" widget) - Loaded in addition to home/styles.css so nav, footer, fonts match. ========================================================================== */ /* ---------- Blog index ---------- */ #blogIndex { display:block; padding:120px 20px 60px; background:#ededf3; box-sizing:border-box; } #blogIndex .blogIndexInner { max-width:1100px; width:100%; margin:0 auto; } #blogIndex .blogIndexHeader { text-align:center; margin:0 0 40px; } #blogIndex .blogIndexHeader h1 { font-family:'Nunito Sans', sans-serif; font-size:42px; font-weight:900; text-transform:uppercase; color:#454853; margin:0 0 8px; line-height:1.1; } #blogIndex .blogIndexHeader p { font-size:18px; color:#54555d; margin:0; } #blogIndex .blogList { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:28px; } #blogIndex .blogCard { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(30,32,40,0.08); display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; } #blogIndex .blogCard:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(30,32,40,0.14); } #blogIndex .blogCardImage { display:block; width:100%; aspect-ratio:16/9; overflow:hidden; background:#dadbe3; } #blogIndex .blogCardImage img { width:100%; height:100%; object-fit:cover; display:block; } #blogIndex .blogCardBody { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; } #blogIndex .blogCardMeta { font-size:13px; color:#8b8d99; text-transform:uppercase; letter-spacing:0.05em; margin:0 0 8px; } #blogIndex .blogCardMetaSep { margin:0 6px; } #blogIndex .blogCardTitle { font-size:21px; font-weight:700; line-height:1.25; margin:0 0 10px; text-transform:none; } #blogIndex .blogCardTitle a { color:#3b3d48; text-decoration:none; } #blogIndex .blogCardTitle a:hover { color:#e96556; } #blogIndex .blogCardExcerpt { font-size:16px; line-height:1.5; color:#54555d; margin:0 0 16px; flex:1; } #blogIndex .blogCardLink { font-size:15px; font-weight:700; color:#e96556; text-decoration:none; align-self:flex-start; } #blogIndex .blogCardLink:hover { text-decoration:underline; } #blogIndex .blogEmpty { text-align:center; font-size:18px; color:#54555d; padding:40px 0; } /* ---------- Single blog post ---------- */ #blogPost { display:block; padding:120px 20px 60px; background:#ededf3; box-sizing:border-box; } #blogPost .blogPostInner { max-width:780px; width:100%; margin:0 auto; background:#fff; padding:48px 56px 56px; border-radius:10px; box-shadow:0 6px 18px rgba(30,32,40,0.08); box-sizing:border-box; } #blogPost .blogPostBack { font-size:14px; margin:0 0 18px; } #blogPost .blogPostBack a { color:#e96556; text-decoration:none; } #blogPost .blogPostBack a:hover { text-decoration:underline; } #blogPost .blogPostHeader { margin:0 0 28px; } #blogPost .blogPostHeader h1 { font-family:'Nunito Sans', sans-serif; font-size:36px; font-weight:900; line-height:1.15; color:#3b3d48; margin:0 0 10px; text-transform:none; } #blogPost .blogPostMeta { font-size:14px; color:#8b8d99; text-transform:uppercase; letter-spacing:0.05em; margin:0; } #blogPost .blogPostMetaSep { margin:0 6px; } #blogPost .blogPostHero { margin:0 0 32px; } #blogPost .blogPostHero img { width:100%; height:auto; border-radius:8px; display:block; } #blogPost .blogPostBody { font-size:18px; line-height:1.65; color:#3b3d48; } #blogPost .blogPostBody h2 { font-size:26px; font-weight:700; margin:36px 0 14px; line-height:1.25; color:#3b3d48; text-transform:none; background:none; } #blogPost .blogPostBody h3 { font-size:21px; font-weight:700; margin:28px 0 10px; line-height:1.3; color:#3b3d48; text-transform:none; } #blogPost .blogPostBody p { font-size:18px; line-height:1.65; margin:0 0 18px; } #blogPost .blogPostBody ul, #blogPost .blogPostBody ol { margin:0 0 18px 22px; padding:0; } #blogPost .blogPostBody li { font-size:18px; line-height:1.6; margin:0 0 8px; } #blogPost .blogPostBody a { color:#e96556; text-decoration:underline; } #blogPost .blogPostBody a:hover { color:#d0533f; } #blogPost .blogPostBody blockquote { border-left:3px solid #e96556; padding:6px 0 6px 18px; margin:18px 0; color:#54555d; font-style:italic; } #blogPost .blogPostBody img { max-width:100%; height:auto; border-radius:6px; margin:16px 0; } #blogPost .blogPostBody pre { background:#f6f6fa; padding:14px 18px; border-radius:6px; overflow-x:auto; font-size:15px; } #blogPost .blogPostBody code { background:#f0f0f5; padding:2px 6px; border-radius:4px; font-size:0.92em; } #blogPost .blogPostBody pre code { background:none; padding:0; } #blogPost .blogPostTags { margin:32px 0 0; } #blogPost .blogPostTag { display:inline-block; font-size:13px; color:#8b8d99; background:#f0f0f5; padding:4px 10px; border-radius:999px; margin:0 6px 6px 0; } #blogPost .blogPostCta { margin:48px 0 0; padding:28px 30px; background:#282a33; border-radius:8px; text-align:center; } #blogPost .blogPostCta h2 { font-size:24px; font-weight:900; color:#fff; margin:0 0 8px; text-transform:uppercase; background:none; border:none; padding:0; line-height:1.2; } #blogPost .blogPostCta p { color:#d2d5e3; font-size:16px; margin:0 0 18px; } #blogPost .blogPostCta .button { margin:0 auto; } /* ---------- Homepage "Latest from the blog" section ---------- */ #latestBlog { background:#fff; padding:70px 0; } #latestBlog .latestBlogInner { max-width:1100px; width:100%; margin:0 auto; padding:0 30px; box-sizing:border-box; text-align:center; } #latestBlog h2 { text-align:center; font-size:38px; line-height:1.2; background:none; color:#454853; border-bottom:2px solid #e96556; display:inline-block; width:100%; max-width:520px; padding:0 0 12px; margin:0 0 30px; } #latestBlog .latestBlogList { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; text-align:left; } #latestBlog .latestBlogCard { background:#f7f7f9; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; box-shadow:0 2px 8px rgba(30,32,40,0.06); } #latestBlog .latestBlogCard:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(30,32,40,0.12); } #latestBlog .latestBlogCardImage { display:block; width:100%; aspect-ratio:16/9; background:#dadbe3; } #latestBlog .latestBlogCardImage img { width:100%; height:100%; object-fit:cover; display:block; } #latestBlog .latestBlogCardBody { padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; } #latestBlog .latestBlogCardMeta { font-size:12px; color:#8b8d99; text-transform:uppercase; letter-spacing:0.05em; margin:0 0 6px; } #latestBlog .latestBlogCardTitle { font-size:18px; font-weight:700; line-height:1.3; margin:0 0 8px; text-transform:none; } #latestBlog .latestBlogCardTitle a { color:#3b3d48; text-decoration:none; } #latestBlog .latestBlogCardTitle a:hover { color:#e96556; } #latestBlog .latestBlogCardExcerpt { font-size:15px; line-height:1.5; color:#54555d; margin:0 0 12px; flex:1; } #latestBlog .latestBlogCardLink { font-size:14px; font-weight:700; color:#e96556; text-decoration:none; align-self:flex-start; } #latestBlog .latestBlogCardLink:hover { text-decoration:underline; } #latestBlog .latestBlogAll { display:inline-block; margin:30px auto 0; font-size:16px; font-weight:700; color:#e96556; text-decoration:none; text-transform:uppercase; letter-spacing:0.04em; } #latestBlog .latestBlogAll:hover { text-decoration:underline; } @media all and (max-width: 900px), (orientation:portrait) { #blogIndex { padding:90px 16px 40px; } #blogIndex .blogIndexHeader h1 { font-size:30px; } #blogIndex .blogList { grid-template-columns:1fr; gap:20px; } #blogPost { padding:90px 12px 40px; } #blogPost .blogPostInner { padding:28px 22px 32px; } #blogPost .blogPostHeader h1 { font-size:26px; } #blogPost .blogPostBody { font-size:17px; } #blogPost .blogPostBody h2 { font-size:22px; } #blogPost .blogPostBody h3 { font-size:19px; } #blogPost .blogPostBody p, #blogPost .blogPostBody li { font-size:17px; } #latestBlog { padding:45px 0; } #latestBlog .latestBlogInner { padding:0 20px; } #latestBlog h2 { font-size:28px; } #latestBlog .latestBlogList { grid-template-columns:1fr; gap:18px; } }