:root{color-scheme:dark} /* ============================================================ SIMPLE MODE (one solid background, no transitions) Enabled by adding `blog-page-solid` to the class. This prevents any section background from going behind another. ============================================================ */ body.wp2-theme.blog-page-solid{background:var(--bg)} body.wp2-theme.blog-page-solid .shade-section{background:transparent} body.wp2-theme.blog-page-solid .shade-section::before, body.wp2-theme.blog-page-solid .shade-section::after{display:none} /* 20px space above + below each section */ body.wp2-theme.blog-page-solid .blog-section{padding:20px 0} body.wp2-theme.blog-page-solid .blog-hero{padding:56px 0 20px} body.wp2-theme.blog-page-solid .blog-hero.blog-hero-split{padding:58px 0 20px} body.wp2-theme.blog-page-solid .section.section-cta{padding:20px 0} /* Blog index (blog.html) — unique layout so it doesn't feel repeated */ body.wp2-theme.blog-index .blog-section .wrap{max-width:980px} .blog-index-showcase{border-radius:18px;overflow:hidden; background:radial-gradient(900px 260px at 18% 0%, rgba(255,255,255,0.10), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0.016)); border:1px solid rgba(255,255,255,0.09); box-shadow:0 28px 90px rgba(2,6,12,0.55); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .blog-index-thumb{display:block;position:relative;aspect-ratio:21/9;text-decoration:none;color:inherit;background:rgba(255,255,255,0.02)} .blog-index-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(0.92) contrast(1.06)} .blog-index-thumb::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.64));pointer-events:none} .blog-index-badge{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px; background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);color:rgba(203,213,225,0.92);font-weight:800;font-size:12px;letter-spacing:0.08em;text-transform:uppercase} .blog-index-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border-radius:999px;display:flex;align-items:center;justify-content:center; font-size:28px;color:#ffffff;background:rgba(10,14,20,0.62);border:1px solid rgba(255,255,255,0.16); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 22px 60px rgba(2,6,12,0.55); transition:transform .18s ease, background .18s ease} .blog-index-thumb:hover .blog-index-play{transform:translate(-50%,-50%) scale(1.04);background:rgba(10,14,20,0.70)} .blog-index-panel{padding:16px 16px;border-top:1px solid rgba(255,255,255,0.08)} .blog-index-lead{margin:0;color:var(--muted);line-height:1.75} .blog-index-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} /* Clean spec rows (not cards, not timeline) */ .blog-specs{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.018);box-shadow:0 24px 70px rgba(2,6,12,0.45)} .blog-spec{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px; border-top:1px solid rgba(255,255,255,0.06)} .blog-spec:first-child{border-top:0} .blog-spec:nth-child(odd){background:rgba(255,255,255,0.012)} .blog-spec h3{margin:0;color:#ffffff;font-size:14px;letter-spacing:0.18em;text-transform:uppercase} .blog-spec p{margin:0;color:var(--muted);line-height:1.65} @media (max-width:820px){ .blog-index-thumb{aspect-ratio:16/9} .blog-spec{grid-template-columns:1fr} .blog-spec h3{letter-spacing:0.12em} } /* ------------------------------------------------------------ Blog section background transitions (adjustable) How to tweak per section: - Set `--shade-in` (top fade height) - Set `--shade-out` (bottom fade height) - Optionally set `--shade-solid` (the section's base shade) Example: #video-section{--shade-in:60px;--shade-out:60px} ------------------------------------------------------------ */ .shade-section{position:relative;isolation:isolate;background:var(--shade-solid, rgba(255,255,255,0.02))} .shade-section::before,.shade-section::after{content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:0} .shade-section::before{top:calc(var(--shade-in, 56px) * -1);height:var(--shade-in, 56px); background:linear-gradient(180deg, rgba(0,0,0,0), var(--shade-solid, rgba(255,255,255,0.02)))} .shade-section::after{bottom:calc(var(--shade-out, 56px) * -1);height:var(--shade-out, 56px); background:linear-gradient(180deg, var(--shade-solid, rgba(255,255,255,0.02)), rgba(0,0,0,0))} .shade-section .wrap{position:relative;z-index:1} /* ------------------------------------------------------------ TWEAK THESE NUMBERS (User Panel page spacing) If the hero image/card looks like it “goes into” the next section, increase `--userpanel-hero-bottom-pad` and/or increase `--userpanel-video-top-pad`. ------------------------------------------------------------ */ :root{ --userpanel-hero-bottom-pad: 76px; --userpanel-video-top-pad: 54px; } .blog-hero{padding:56px 0 10px} .blog-hero .wrap{display:grid;gap:16px;max-width:900px} .blog-kicker{margin:0;color:var(--muted);font-weight:800;letter-spacing:0.14em;text-transform:uppercase;font-size:12px} .blog-title{margin:0;color:#ffffff;font-size:34px;line-height:1.08;letter-spacing:0.2px} .blog-subtitle{margin:0;color:var(--muted);line-height:1.65;max-width:70ch} .blog-hero-actions{display:flex;gap:10px;flex-wrap:wrap} /* Alternate hero layout (split) */ .blog-hero.blog-hero-split{padding:58px 0 var(--userpanel-hero-bottom-pad, 56px)} .blog-hero-split .wrap{max-width:1100px} .blog-hero-split-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:18px;align-items:center} .blog-hero-left{min-width:0} .blog-hero-right{min-width:0} .blog-hero-panel{position:relative;border-radius:18px;overflow:hidden; background:radial-gradient(900px 260px at 20% 0%, rgba(255,255,255,0.10), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 28px 90px rgba(2,6,12,0.55)} .blog-hero-media{display:block;width:100%;height:auto;object-fit:cover} .blog-hero-panel-inner{padding:16px 16px} .blog-hero-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 8px} .blog-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px; background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:rgba(203,213,225,0.92);font-weight:800;font-size:12px;letter-spacing:0.08em;text-transform:uppercase} .blog-hero-points{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;color:var(--muted)} .blog-hero-points li{display:flex;gap:10px;align-items:flex-start;line-height:1.55} .blog-hero-points li::before{content:'✓';color:var(--accent-2);font-weight:900;flex:0 0 auto;margin-top:1px} .blog-section{padding:34px 0} .blog-section .wrap{max-width:900px} /* Per-section transition knobs (User Panel page) */ #video-section{--shade-in:20px;--shade-out:74px;--shade-solid:rgba(255,255,255,0.022);padding-top:var(--userpanel-video-top-pad, 54px)} #features-section{--shade-in:56px;--shade-out:56px;--shade-solid:rgba(255,255,255,0.020)} #tutorials-section{--shade-in:56px;--shade-out:72px;--shade-solid:rgba(255,255,255,0.018)} .blog-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .blog-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.075);border-radius:16px;padding:16px 14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 24px 70px rgba(2,6,12,0.5)} .blog-card h3{margin:0 0 8px;color:#ffffff;font-size:16px;letter-spacing:0.2px} .blog-card p{margin:0;color:var(--muted);line-height:1.6} /* Featured media (sleek video presentation; still uses thumbnail link) */ .media-feature{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);gap:14px;align-items:stretch; background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:18px; box-shadow:0 24px 70px rgba(2,6,12,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden} .media-feature-thumb{position:relative;display:block;aspect-ratio:16/9;text-decoration:none;color:inherit;background:rgba(255,255,255,0.02)} .media-feature-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(0.9) contrast(1.05)} .media-feature-thumb::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.58));pointer-events:none} .media-feature-badge{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px; background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);color:rgba(203,213,225,0.92);font-weight:800;font-size:12px;letter-spacing:0.08em;text-transform:uppercase} .media-feature-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:999px;display:flex;align-items:center;justify-content:center; background:rgba(10,14,20,0.62);border:1px solid rgba(255,255,255,0.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 22px 60px rgba(2,6,12,0.55);transition:transform .18s ease, background .18s ease} .media-feature-play svg{display:block;color:#ffffff} .media-feature-thumb:hover .media-feature-play{transform:translate(-50%,-50%) scale(1.04);background:rgba(10,14,20,0.68)} .media-feature-body{padding:16px 16px;display:flex;flex-direction:column;justify-content:center;gap:10px; background:radial-gradient(900px 260px at 18% 0%, rgba(255,255,255,0.10), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0.018))} .media-feature-title{margin:0;color:#ffffff;font-size:18px;letter-spacing:0.2px} .media-feature-text{margin:0;color:var(--muted);line-height:1.65} .media-feature-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px} @media (max-width:920px){ .media-feature{grid-template-columns:1fr} } /* Legacy video styles kept for older blog pages (if any still use them) */ .blog-video{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(2,6,12,0.5)} .blog-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0} .blog-video-link{display:block;position:relative;aspect-ratio:16/9;text-decoration:none;color:inherit;background:rgba(255,255,255,0.02)} .blog-video-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(0.9) contrast(1.05)} .blog-video-link::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));pointer-events:none} .blog-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(10,14,20,0.62);border:1px solid rgba(255,255,255,0.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 22px 60px rgba(2,6,12,0.55)} .blog-video-play svg{display:block;color:#ffffff} .blog-video-link:hover .blog-video-play{transform:translate(-50%,-50%) scale(1.04)} /* Timeline (replaces “cards” when you want a cleaner look) */ .blog-timeline{position:relative;display:grid;gap:14px;padding-left:18px} .blog-timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,0.08)} .blog-timeline-item{position:relative;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.07);border-radius:16px;padding:16px 16px 16px 16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 24px 70px rgba(2,6,12,0.45)} .blog-timeline-item::before{content:"";position:absolute;left:-18px;top:18px;width:14px;height:14px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);box-shadow:0 10px 30px rgba(2,6,12,0.45)} .blog-timeline-item h3{margin:0 0 8px;color:#ffffff;font-size:16px;letter-spacing:0.2px} .blog-timeline-item p{margin:0;color:var(--muted);line-height:1.65} /* Link list (replaces tutorial cards) */ .blog-link-list{display:grid;gap:12px} .blog-link{display:block;text-decoration:none;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.07);border-radius:16px;padding:16px 16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 24px 70px rgba(2,6,12,0.45);position:relative} .blog-link::after{content:"→";position:absolute;right:16px;top:18px;color:rgba(203,213,225,0.82);font-weight:900} .blog-link:hover{border-color:rgba(255,255,255,0.14)} .blog-link h3{margin:0 34px 8px 0;color:#ffffff;font-size:16px;letter-spacing:0.2px} .blog-link p{margin:0;color:var(--muted);line-height:1.65} .blog-prose{color:var(--muted);line-height:1.75} .blog-prose p{margin:0 0 14px} .blog-faq{display:grid;gap:12px} .blog-faq details{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.075);border-radius:16px;box-shadow:0 24px 70px rgba(2,6,12,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden} .blog-faq summary{list-style:none;cursor:pointer;padding:16px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#ffffff;font-weight:800;letter-spacing:0.2px} .blog-faq summary::-webkit-details-marker{display:none} .blog-faq summary::after{content:'+';flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);color:var(--accent-2);font-weight:900} .blog-faq details[open] summary::after{content:'–'} .blog-faq .answer{padding:0 16px 16px;color:var(--muted);line-height:1.65} .blog-tutorials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .blog-tutorials a{color:var(--accent-2);text-decoration:none;font-weight:800} .blog-tutorials a:hover{text-decoration:underline} @media (max-width:920px){ .blog-title{font-size:26px} .blog-card-grid{grid-template-columns:1fr} .blog-tutorials{grid-template-columns:1fr} .blog-hero-split-grid{grid-template-columns:1fr} }