/** * Extension product pages — shared layout (canonical: extension/seercode.html) * Load last in (after responsive-global.css). */ /* body { overflow-x: hidden } breaks position:sticky — use clip on extension pages */ html:has(.article-layout), body:has(.article-layout) { overflow-x: clip; } article:has(.article-layout) { overflow: visible; } /* ── Featured logo band ── */ .featured-img { max-width: var(--wide-w, 900px); margin: 1.75rem auto !important; padding: 0 2rem; } .logo-box-wrap { display: flex; justify-content: center; align-items: center; padding: 1.75rem 2rem !important; background: #000; border: 1px solid rgba(0, 255, 136, 0.08); } .logo-box { width: 140px; height: 140px; background: #000; border-radius: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 255, 136, 0.15); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 136, 0.1); } .logo-box img { width: 90px; height: 90px; object-fit: contain; } .logo-box.logo-box-banner { width: auto; max-width: min(100%, 380px); height: auto; min-height: 0; border-radius: 12px; padding: 0.65rem 1rem; background: #000; border: 1px solid rgba(0, 255, 136, 0.15); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 136, 0.1); } .logo-box.logo-box-banner img { display: block; width: auto; height: auto; max-width: 100%; max-height: 88px; object-fit: contain; margin: 0 auto; } /* ── Article + sticky sidebar ── */ .article-layout { max-width: var(--wide-w, 900px); margin: 0 auto; padding: 0 2rem 4rem !important; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 4rem; position: relative; align-items: start; min-width: 0; width: 100%; box-sizing: border-box; } .article-body { max-width: none !important; min-width: 0; overflow-wrap: anywhere; } /* Prevent wide grids/tables from blowing out the layout */ .article-body .feat-grid, .article-body .steps-row, .article-body .stats-callout, .article-body .privacy-grid, .article-body .speed-table, .article-body .video-wrap, .article-body .reviews-wrap { max-width: 100%; min-width: 0; } /* Article typography — match seercode */ .article-body p { font-size: 1.05rem; line-height: 2; margin-bottom: 1.6rem; } .article-body .drop-cap::first-letter { font-size: 4.5rem; line-height: 0.8; margin-right: 0.6rem; margin-top: 0.15rem; } .article-body h2 { font-size: 1.5rem; margin: 3rem 0 1.2rem; padding-top: 2rem; } .article-body h2:first-of-type { padding-top: 0; margin-top: 2rem; } .pull-quote { margin: 2.5rem 0 2.5rem -1.5rem; padding: 1.5rem 2rem; } .pull-quote p { font-size: 1.3rem !important; } /* ── Sidebar / TOC panel (sticky while reading) ── */ .sidebar { position: sticky !important; top: calc(72px + env(safe-area-inset-top, 0px)) !important; align-self: start !important; min-width: 0; z-index: 100; max-height: calc(100vh - 72px - env(safe-area-inset-top, 0px) - 1rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .sidebar-inner { position: static !important; top: auto !important; padding-top: 1rem; } .toc-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text3, #555566); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06)); } .toc-list { list-style: none; padding: 0; } .toc-list li { margin-bottom: 0.25rem; } .toc-list a { display: block; padding: 0.4rem 0 0.4rem 0.75rem; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text3, #555566); text-decoration: none; transition: all 0.2s; border-left: 2px solid transparent; line-height: 1.5; } .toc-list a:hover { color: var(--text, #e8e8f0); border-left-color: rgba(0, 255, 136, 0.3); } .toc-list a.active { color: var(--g, #00ff88); border-left-color: var(--g, #00ff88); font-weight: 700; } .sidebar-cta { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06)); } .sidebar-cta a { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 1rem; background: var(--g, #00ff88); color: #000; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: all 0.2s; } .sidebar-cta a:hover { box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); transform: translateY(-1px); } .sidebar-share { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06)); } .sidebar-share-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text3, #555566); margin-bottom: 0.75rem; } .share-links { display: flex; gap: 0.5rem; } .share-links a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 255, 136, 0.15); color: var(--g, #00ff88); font-size: 0.75rem; text-decoration: none; transition: all 0.2s; background: rgba(0, 255, 136, 0.04); } .share-links a:hover { border-color: var(--g, #00ff88); color: #000; background: var(--g, #00ff88); } /* ── Hero spacing (match seercode) ── */ .hero { max-width: var(--wide-w, 900px); margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 1.5rem; } .hero-lede { font-size: 1.2rem; line-height: 1.8; margin-bottom: 2rem; } @media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; gap: 0; } .sidebar { display: none; } } @media (max-width: 768px) { .hero h1 { font-size: 1.8rem; } .hero-lede { font-size: 1rem; } .featured-img { padding: 0 1.25rem; } .logo-box-wrap { padding: 2rem 1.25rem !important; } .article-layout { padding: 0 1.25rem 3rem !important; } .pull-quote { margin-left: 0; padding: 1.25rem; } .article-body h2 { font-size: 1.3rem; } }