/* ============================================================ article-page.css — AIToolsRecap articlexx page.. Clean rewrite. Load LAST in ArticleNew.aspx . No dependency on article.css / article-v2.css / article-v11.css. Uses site.css CSS variables only (--ink, --paper, --accent, --rule, --muted, --gold, --cream). ============================================================ */ /* ── PAGE BACKGROUND ─────────────────────────────────────── */ /* Scoped to article panel only — don't fight site.css body bg */ #MainContent_pnlArticle, [id$="pnlArticle"] { display: block; width: 100%; } /* ============================================================ HERO — full-width dark banner ============================================================ */ .art-hero { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: #1a1a1a !important; color: #fff !important; padding: 52px 40px 44px !important; margin: 0 !important; border-bottom: 3px solid var(--accent) !important; } /* Undo any art-shell width-capping on the hero */ .art-hero.art-shell { width: 100% !important; max-width: 100% !important; } .art-hero > * { max-width: 860px; margin-left: auto; margin-right: auto; } .art-hero-tag { display: block; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-family: 'DM Mono', monospace; margin-bottom: 14px; } .art-hero-title { font-family: 'Playfair Display', serif !important; font-size: clamp(1.8rem, 4vw, 3rem) !important; font-weight: 900 !important; color: #ffffff !important; line-height: 1.15 !important; margin: 0 0 16px !important; letter-spacing: -0.02em; } .art-hero-excerpt { font-size: 1.05rem !important; color: rgba(255,255,255,0.65) !important; line-height: 1.75 !important; margin: 0 0 22px !important; max-width: 640px; } .art-hero-meta { display: flex !important; flex-wrap: wrap !important; gap: 6px 0 !important; font-family: 'DM Mono', monospace !important; font-size: 0.68rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.4) !important; border-top: 1px solid rgba(255,255,255,0.12) !important; padding-top: 16px !important; margin-top: 6px !important; } .art-hero-meta span { padding-right: 16px; color: rgba(255,255,255,0.45); } .art-hero-meta span + span::before { content: '•'; margin-right: 16px; color: rgba(255,255,255,0.2); } /* ============================================================ COVER IMAGE — full-width, below hero, above layout ============================================================ */ .art-cover { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; line-height: 0; overflow: hidden; background: #111; box-sizing: border-box !important; display: block !important; } /* Undo art-shell on cover if it still has that class */ .art-cover.art-shell { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .art-cover img, .art-cover img[id] { width: 100% !important; height: auto !important; max-height: 460px !important; object-fit: cover !important; object-position: center !important; display: block !important; border-radius: 0 !important; } /* ============================================================ BREADCRUMB — slim gray trail below cover ============================================================ */ .art-breadcrumb { width: 100%; max-width: 980px; margin: 0 auto; padding: 10px 24px 6px; font-size: 0.7rem; font-family: 'DM Mono', monospace; color: #999; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; box-sizing: border-box; } .art-breadcrumb a { color: #888; text-decoration: none; } .art-breadcrumb a:hover { color: #333; text-decoration: underline; } .bc-sep { color: #bbb; font-size: 0.6rem; } .bc-current { color: #555; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ TWO-COLUMN LAYOUT — article left, sidebar right This is the core fix. We own this rule completely. ============================================================ */ .art-layout { display: grid !important; grid-template-columns: 1fr 290px !important; gap: 32px !important; max-width: 980px !important; margin: 0 auto !important; padding: 28px 24px 40px !important; align-items: start !important; box-sizing: border-box !important; background: transparent !important; /* Undo any art-shell that tries to override */ width: auto !important; } /* Undo art-shell on layout div if it has that class */ .art-layout.art-shell { width: auto !important; max-width: 980px !important; } /* ============================================================ ARTICLE BODY — left column white card ============================================================ */ .art-body { min-width: 0 !important; /* critical: prevents grid blowout */ overflow: hidden !important; /* contain any overflow */ word-break: break-word !important; overflow-wrap: break-word !important; background: #ffffff; border: 1px solid #e5e0d8; border-radius: 10px; padding: 32px 36px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box; } .art-content-wrap { font-family: Georgia, 'Times New Roman', serif; font-size: 1rem; line-height: 1.8; color: #2a2826; overflow-wrap: break-word; word-break: break-word; overflow: hidden; } .art-content-wrap > *:first-child { margin-top: 0; } .art-content-wrap > *:last-child { margin-bottom: 0; } .art-content-wrap h2 { font-family: 'DM Sans', sans-serif; font-size: 1.2rem; font-weight: 800; color: #1a1918; margin: 30px 0 12px; padding-bottom: 8px; border-bottom: 1px solid #ede9e2; } .art-content-wrap h3 { font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 700; color: #1a1918; margin: 22px 0 8px; } .art-content-wrap p { margin: 0 0 16px; color: #2a2826; } .art-content-wrap a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(200,64,26,0.3); } .art-content-wrap a:hover { color: #a33214; } .art-content-wrap ul, .art-content-wrap ol { padding-left: 22px; margin: 0 0 16px; } .art-content-wrap li { margin-bottom: 6px; } .art-content-wrap blockquote { border-left: 3px solid var(--accent); margin: 20px 0; padding: 12px 20px; background: #faf7f2; border-radius: 0 4px 4px 0; font-style: italic; color: #555; } .art-content-wrap strong { font-weight: 700; color: #1a1918; } .art-content-wrap em { font-style: italic; color: #555; } .art-content-wrap code { background: #f5f1eb; padding: 2px 6px; border-radius: 3px; font-family: 'DM Mono', monospace; font-size: 0.85em; color: #b04020; } .art-content-wrap pre { background: #1c1c1c; color: #e8e0d0; padding: 18px 22px; border-radius: 6px; overflow-x: auto; margin: 18px 0; } .art-content-wrap pre code { background: none; color: inherit; padding: 0; } .art-content-wrap table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.9rem; } .art-content-wrap th { background: #f5f1eb; text-align: left; padding: 8px 12px; font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #666; border-bottom: 2px solid #e5e0d8; } .art-content-wrap td { padding: 10px 12px; border-bottom: 1px solid #ede9e2; color: #2a2826; } /* ── Tags ── */ .art-tags { margin-top: 26px; padding-top: 20px; border-top: 1px solid #ede9e2; display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .art-tags-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #999; font-family: 'DM Mono', monospace; padding-top: 4px; white-space: nowrap; } .art-tags-items { display: flex; flex-wrap: wrap; gap: 7px; } .art-tag { display: inline-block; padding: 4px 11px; border: 1px solid #ddd9d0; border-radius: 30px; font-size: 0.72rem; color: #555; font-family: 'DM Mono', monospace; background: #faf7f2; cursor: default; transition: border-color 0.15s, color 0.15s; } .art-tag:hover { border-color: var(--accent); color: var(--accent); } /* ── Share actions ── */ .art-actions { margin-top: 22px; padding: 18px 20px; border: 1px solid #e5e0d8; border-radius: 10px; background: #fafaf8; } .art-actions-title { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #999; font-family: 'DM Mono', monospace; margin-bottom: 12px; } .art-actions-row { display: flex; flex-wrap: wrap; gap: 8px; } /* Override site.css .btn for these small share buttons */ .art-actions-row .btn { font-size: 0.72rem !important; padding: 7px 13px !important; border-radius: 4px !important; font-family: 'DM Sans', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.03em !important; text-transform: none !important; text-decoration: none !important; cursor: pointer; transition: all 0.15s; display: inline-block; } .art-actions-row .btn-solid { background: #1a1a1a !important; color: #fff !important; border: 1px solid #1a1a1a !important; } .art-actions-row .btn-solid:hover { background: #333 !important; } .art-actions-row .btn-outline { background: transparent !important; color: #444 !important; border: 1px solid #ccc !important; } .art-actions-row .btn-outline:hover { border-color: #888 !important; color: #111 !important; } .art-actions-row .btn-ghost { background: transparent !important; color: #888 !important; border: 1px solid #e0dbd4 !important; } .art-actions-row .btn-ghost:hover { color: #333 !important; border-color: #aaa !important; } /* ============================================================ SIDEBAR — right column ============================================================ */ .art-sidebar { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; position: sticky !important; top: 20px !important; } .sb-box { border: 1px solid #e0dbd4; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .sb-box-title { padding: 11px 16px; font-family: 'DM Mono', monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid #e0dbd4; background: #fafaf8; color: var(--ink); } .sb-box-body { padding: 14px 16px; } .sb-list-body { padding: 4px 16px; } .sb-link-item { display: block; padding: 11px 0; text-decoration: none; color: var(--ink); border-bottom: 1px solid #eeebe5; transition: color 0.15s; } .sb-link-item:last-child { border-bottom: none; } .sb-link-item:hover .sb-link-title { color: var(--accent); } .sb-link-title { display: block; font-size: 0.82rem; font-weight: 700; line-height: 1.42; color: #1a1918; margin-bottom: 3px; } .sb-link-meta { display: block; font-size: 0.68rem; color: #999; font-family: 'DM Mono', monospace; } .sb-cta-text { font-size: 0.82rem; color: #666; line-height: 1.55; margin: 0 0 12px; font-family: 'DM Sans', sans-serif; } .sb-full-btn { display: block !important; text-align: center !important; width: 100% !important; box-sizing: border-box !important; padding: 10px 16px !important; border-radius: 5px !important; font-size: 0.76rem !important; font-weight: 700 !important; text-decoration: none !important; font-family: 'DM Sans', sans-serif !important; cursor: pointer; transition: all 0.15s; text-transform: none !important; letter-spacing: 0.01em !important; } /* Gold box (prompts) */ .sb-box-gold { border-left: 4px solid var(--gold) !important; } .sb-box-title-gold { background: var(--gold) !important; color: #1a1a1a !important; } .sb-gold-btn { background: var(--gold) !important; color: #1a1a1a !important; border: none !important; } .sb-gold-btn:hover { background: #b08a1e !important; } /* Red/accent box (reviews) */ .sb-box-accent { border-left: 4px solid var(--accent) !important; } .sb-box-title-accent { background: var(--accent) !important; color: #fff !important; } .sb-box-accent .sb-full-btn { background: var(--accent) !important; color: #fff !important; border: none !important; } .sb-box-accent .sb-full-btn:hover { background: #a33214 !important; } /* Outline btn in plain sidebar box */ .sb-box .btn-outline.sb-full-btn { background: transparent !important; color: #333 !important; border: 1px solid #ccc !important; } .sb-box .btn-outline.sb-full-btn:hover { border-color: #888 !important; color: #111 !important; } /* ============================================================ BOTTOM CONTENT BLOCKS — below the two-column layout ============================================================ */ .art-bottom { max-width: 980px; margin: 0 auto; padding: 20px 24px 64px; box-sizing: border-box; } .art-bottom-block { margin-bottom: 44px; } .art-bottom-block:last-child { margin-bottom: 0; } /* Section header row */ .abb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #ddd9d0; } .abb-title { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #888; font-family: 'DM Mono', monospace; display: flex; align-items: center; gap: 6px; } .abb-title em { font-style: normal; color: var(--accent); } .abb-view-all { font-size: 0.7rem; font-weight: 700; color: var(--accent); text-decoration: none; font-family: 'DM Sans', sans-serif; white-space: nowrap; } .abb-view-all:hover { text-decoration: underline; } /* Bottom article cards — 4 column grid */ .abb-articles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .abb-art-card { background: #ffffff; border: 1px solid #e5e0d8; border-radius: 6px; padding: 16px 16px 14px; text-decoration: none !important; display: block; transition: border-color 0.15s, box-shadow 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .abb-art-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(200,64,26,0.1); } .abb-art-card .ac-cat { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #c0281e; font-family: 'DM Mono', monospace; margin-bottom: 8px; display: block; } .abb-art-card .ac-title { font-size: 0.84rem; font-weight: 700; color: #1a1918; line-height: 1.42; font-family: 'DM Sans', sans-serif; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; } .abb-art-card .ac-meta { font-size: 0.68rem; color: #aaa; font-family: 'DM Mono', monospace; } /* Bottom comparison rows */ .abb-comps { display: flex; flex-direction: column; gap: 10px; } .abb-comp-card { background: #ffffff; border: 1px solid #e5e0d8; border-radius: 6px; padding: 15px 20px; text-decoration: none !important; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: border-color 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .abb-comp-card:hover { border-color: var(--accent); } .abb-comp-card .cc-title { font-size: 0.88rem; font-weight: 700; color: #1a1918; font-family: 'DM Sans', sans-serif; line-height: 1.4; } .abb-comp-card .cc-sub { font-size: 0.74rem; color: #888; font-family: 'DM Sans', sans-serif; margin-top: 4px; line-height: 1.4; } .abb-comp-card .cc-arrow { color: var(--accent); font-size: 1.1rem; flex-shrink: 0; } /* Bottom prompt cards */ .abb-prompt-card { background: #fdf8f0; border: 1px solid #e8dcc8; border-radius: 8px; padding: 20px 24px; text-decoration: none !important; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; transition: border-color 0.15s, background 0.15s; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .abb-prompt-card:last-child { margin-bottom: 0; } .abb-prompt-card:hover { border-color: var(--accent); background: #fdf3e6; } .abb-prompt-card .pc-label { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-family: 'DM Mono', monospace; margin-bottom: 6px; display: block; } .abb-prompt-card .pc-title { font-size: 0.94rem; font-weight: 700; color: #b05018; font-family: 'DM Sans', sans-serif; line-height: 1.35; margin-bottom: 8px; display: block; } .abb-prompt-card .pc-sub { font-size: 0.82rem; color: #666; font-family: 'DM Sans', sans-serif; line-height: 1.6; max-width: 540px; } .abb-prompt-card .pc-btn { flex-shrink: 0; align-self: center; background: var(--accent); color: #fff; font-size: 0.76rem; font-weight: 700; padding: 10px 20px; border-radius: 4px; font-family: 'DM Sans', sans-serif; white-space: nowrap; border: none; transition: background 0.15s; cursor: pointer; } .abb-prompt-card:hover .pc-btn { background: #a33214; } /* ── Not found panel ── */ .not-found { text-align: center; padding: 80px 24px; color: #555; } .not-found-icon { font-size: 3rem; margin-bottom: 16px; } .not-found-title { font-size: 1.5rem; font-weight: 700; color: #1a1918; margin-bottom: 10px; font-family: 'Playfair Display', serif; } .not-found-text { font-size: 0.9rem; color: #888; margin-bottom: 24px; } /* ============================================================ RESPONSIVE ============================================================ */ /* Tablet — collapse sidebar below article */ @media (max-width: 900px) { .art-layout { grid-template-columns: 1fr !important; padding: 20px 16px 32px !important; } .art-sidebar { position: static !important; top: auto !important; } .abb-articles { grid-template-columns: 1fr 1fr !important; } } /* Mobile */ @media (max-width: 600px) { .art-hero { padding: 32px 16px 28px !important; } .art-body { padding: 20px 18px !important; } .abb-articles { grid-template-columns: 1fr !important; } .abb-prompt-card { flex-direction: column; } .abb-prompt-card .pc-btn { width: 100%; text-align: center; } .art-actions-row { gap: 6px; } .art-hero-title { font-size: 1.6rem !important; } }