/* =============================== BLOG STYLES (scoped to #content) =============================== */ .blog-head { background: rgba(0,0,0,.78); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 1rem; box-shadow: 0 18px 40px rgba(0,0,0,.40); margin-bottom: 1rem; } .blog-head h1 { margin: 0 0 .25rem; } /* ---- Tunables ---- */ #content { /* Frosted “reading rails” behind the two columns */ --rail-bg: rgba(0,0,0,.78); /* adjust alpha to change darkness */ --rail-blur: 6px; /* Card/search/archive boxes (sit on top of rails) */ --card-bg: transparent; /* e.g. rgba(0,0,0,.06) if you want a fill */ --card-border: rgba(255,255,255,.16); } /* Optional presets (flip by adding a class to ) */ body.blog-contrast-light #content { --rail-bg: rgba(0,0,0,.98); --rail-blur: 5px; --card-border: rgba(255,255,255,.92); --card-bg: transparent; } body.blog-contrast-dark #content { --rail-bg: rgba(0,0,0,.42); --rail-blur: 7px; --card-border: rgba(255,255,255,.22); --card-bg: rgba(0,0,0,.96); } /* ---- Layout ---- */ #content .layout-2col { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 2rem; align-items: start; position: relative; /* for rails */ } @media (max-width: 900px) { #content .layout-2col { grid-template-columns: 1fr; } } /* Rails: frosted panels behind LEFT content + RIGHT archive */ #content .layout-2col > div:first-child, #content .layout-2col > aside.archive-nav { position: relative; } #content .layout-2col > div:first-child::before, #content .layout-2col > aside.archive-nav::before { content: ""; position: absolute; inset: -10px -12px; /* small gutter around content */ border-radius: 16px; background: var(--rail-bg); -webkit-backdrop-filter: blur(var(--rail-blur)) saturate(1.1); backdrop-filter: blur(var(--rail-blur)) saturate(1.1); pointer-events: none; z-index: 0; } #content .layout-2col > div:first-child > *, #content .layout-2col > aside.archive-nav > * { position: relative; z-index: 1; } /* ---- Search ---- */ #content .blog-search { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: .65rem; padding: .6rem; } #content .blog-search input[type="search"] { flex: 1 1 320px; min-width: 220px; padding: .6rem .8rem; border-radius: .5rem; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.55); color: #fff; } #content .blog-search .btn, #content .blog-search .btn-ghost { padding: .6rem .9rem; border-radius: .5rem; border: 1px solid transparent; font-weight: 600; cursor: pointer; } #content .blog-search .btn { background: #21a366; color: #fff; } #content .blog-search .btn:hover { filter: brightness(1.08); } #content .blog-search .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.2); } #content .blog-search .btn-ghost:hover { background: rgba(255,255,255,.06); } /* ---- Results header ---- */ #content .results-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: .5rem 0 1rem; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: .65rem; padding: .6rem .8rem; } #content .results-head .h2 { margin: 0; font-size: 1.25rem; text-shadow: 0 2px 8px rgba(0,0,0,.85); } #content .results-head .results-meta { opacity: .8; font-size: .95rem; } /* ---- Card grid ---- */ #content .blog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1rem; } #content .blog-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: .6rem; padding: 1rem; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } #content .blog-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); box-shadow: 0 10px 24px rgba(0,0,0,.35); } #content .blog-card h3 { margin: 0 0 .35rem; font-size: 1.1rem; line-height: 1.25; } #content .blog-card h3 a { text-decoration: none; text-shadow: 0 2px 8px rgba(0,0,0,.85); } #content .blog-card .meta { opacity: .85; font-size: .9rem; margin-bottom: .5rem; text-shadow: 0 1px 2px rgba(0,0,0,.6); } #content .blog-card p { margin: 0 0 .75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,.6); } #content .blog-card .read { font-weight: 600; text-decoration: none; } #content .blog-card .read:hover { text-decoration: underline; } /* ---- No results ---- */ #content .muted { opacity: .7; } /* ---- Archive sidebar ---- */ #content .archive-nav { position: sticky; top: 6.5rem; align-self: start; } #content .archive-title { margin: 0 0 .5rem; font-size: 1.1rem; text-shadow: 0 2px 8px rgba(0,0,0,.85); } #content .archive-nav details { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: .5rem; margin: 0 0 .5rem; padding: .6rem .75rem; } #content .archive-nav summary { cursor: pointer; font-weight: 600; list-style: none; } #content .archive-nav summary::-webkit-details-marker { display: none; } #content .archive-nav ul { list-style: none; margin: .25rem 0 0; padding: 0; } #content .archive-nav li { margin: .25rem 0; } #content .archive-nav a { text-decoration: none; } #content .archive-nav a:hover { text-decoration: underline; } #content .archive-nav .is-current { font-weight: 700; text-decoration: underline; } /* ---- Focus ring ---- */ #content a:focus, #content button:focus, #content input:focus { outline: 2px solid #21a366; outline-offset: 2px; } /* ---- Load more button (full width, arrow, pretty) ---- */ #blog-load-more { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: .85rem; padding: .9rem 1rem; border-radius: 999px; font-weight: 700; letter-spacing: .02em; color: #fff; background: linear-gradient(180deg, #2bd081, #1e9d62); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, opacity .12s ease; cursor: pointer; } /* arrow icon */ #blog-load-more::after { content: ""; width: 14px; height: 14px; margin-left: .5rem; background-repeat: no-repeat; background-size: 14px 14px; /* chevron-down SVG */ background-image: url("data:image/svg+xml;utf8,"); transition: transform .2s ease; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); } #blog-load-more:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2); } #blog-load-more:hover::after { transform: translateY(2px); } #blog-load-more:active { transform: translateY(0); filter: brightness(.98); box-shadow: 0 8px 18px rgba(0,0,0,.35); } /* Focus ring for keyboard users */ #blog-load-more:focus-visible { outline: 3px solid #21a366; outline-offset: 3px; } /* If you ever set disabled on the button */ #blog-load-more:disabled { opacity: .6; cursor: default; filter: none; transform: none; box-shadow: 0 6px 14px rgba(0,0,0,.25); }