/* ========================================================= two-feature-columns.css Reusable two-column feature layout for The-Hurds.net pages. Purpose: - Creates a controlled two-column feature area inside the main page. - Left column = image, gallery, thumbnails, media, or support content. - Right column = primary article/content/ad/source boxes. - Column proportions can be adjusted with CSS variables. - Protects this layout from older global rules such as aside, p, box-10g, etc. ========================================================= */ /* ========================================================= DEFAULT VARIABLES These are safe defaults. You can override these later in the webpage if desired. ========================================================= */ :root { /* Overall feature width */ --two-feature-max-width: 1500px; /* Space between the two feature columns */ --two-feature-column-gap: 1.35rem; /* Column proportions */ --two-feature-left-column: minmax(280px, 0.85fr); --two-feature-right-column: minmax(0, 2.15fr); /* Sticky behavior for the left feature column */ --two-feature-sticky-top: 1.25rem; /* Color and surface styling */ --two-feature-bg: #f6f3ee; --two-feature-paper: #ffffff; --two-feature-ink: #222222; --two-feature-muted: #6b6b6b; --two-feature-line: #d8d1c8; --two-feature-accent: #8b3f2f; --two-feature-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); /* Box styling */ --two-feature-box-radius: 18px; --two-feature-box-padding: 1.15rem 1.25rem; --two-feature-box-border: 1px solid var(--two-feature-line); --two-feature-box-shadow: var(--two-feature-shadow); --two-feature-box-bg: var(--two-feature-paper); } /* ========================================================= MAIN FEATURE WRAPPER ========================================================= */ .two-feature-layout { width: 100%; max-width: var(--two-feature-max-width); margin: 0 auto; color: var(--two-feature-ink); } /* Keep box sizing predictable inside this layout only */ .two-feature-layout, .two-feature-layout * { box-sizing: border-box; } /* ========================================================= TWO-COLUMN GRID ========================================================= */ .two-feature-grid { display: grid; grid-template-columns: var(--two-feature-left-column) var(--two-feature-right-column); gap: var(--two-feature-column-gap); align-items: start; width: 100%; } /* ========================================================= LEFT FEATURE COLUMN Intended for: - Hero image - Gallery - Thumbnails - Media panel - Supporting visual content ========================================================= */ .two-feature-left { min-width: 0; width: 100%; } /* Optional sticky behavior for the left feature column */ .two-feature-left-sticky { position: sticky; top: var(--two-feature-sticky-top); } /* ========================================================= RIGHT FEATURE COLUMN Intended for: - Main article text - Research notes - Ad boxes - Source boxes - Page-specific content boxes ========================================================= */ .two-feature-right { min-width: 0; width: 100%; } /* Direct children in the right column should fill the column width */ .two-feature-right > * { width: 100%; max-width: 100%; } /* ========================================================= REUSABLE CONTENT BOX Use this for right-column div boxes. Example:
...
========================================================= */ .two-feature-box { width: 100%; padding: var(--two-feature-box-padding); border: var(--two-feature-box-border); border-radius: var(--two-feature-box-radius); box-shadow: var(--two-feature-box-shadow); background: var(--two-feature-box-bg); color: var(--two-feature-ink); margin: 0 0 1rem 0; } /* Optional heading treatment inside feature boxes */ .two-feature-box h1, .two-feature-box h2, .two-feature-box h3 { margin-top: 0; } /* Optional muted text utility */ .two-feature-muted { color: var(--two-feature-muted); } /* Optional accent text utility */ .two-feature-accent { color: var(--two-feature-accent); } /* ========================================================= PROTECTION FROM OLDER GLOBAL RULES This prevents old generic aside styling from breaking the left feature column. ========================================================= */ .two-feature-layout aside.two-feature-left { float: none; margin-left: 0; padding-left: 0; width: 100%; max-width: 100%; box-shadow: none; font-style: normal; color: inherit; } /* Prevent old paragraph styling from forcing a different look inside the feature system unless you intentionally add it later. */ .two-feature-layout p { max-width: none; } /* ========================================================= MEDIA / IMAGE SAFETY Keeps images, embeds, and panels from overflowing their columns. ========================================================= */ .two-feature-layout img, .two-feature-layout video, .two-feature-layout iframe { max-width: 100%; } /* ========================================================= RESPONSIVE STACKING On narrower screens, the two columns become one column. The left sticky behavior is turned off for mobile/tablet. ========================================================= */ @media (max-width: 900px) { .two-feature-grid { grid-template-columns: 1fr; } .two-feature-left-sticky { position: static; } }