/* * base.css — Educational CyberPlayGround® Responsive Foundation * * PURPOSE: Provides responsive scaffolding and documents the site's color * vocabulary as CSS custom properties. Does NOT override inline styles. * Inline bgcolor/color/style attributes are intentional design decisions * and must be preserved. * * USAGE: Link from every page : * * (This will be added site-wide via SSI nav include in Phase 1 step 1a.) * * Phase 1 of the edu-cyberpg.com modernization plan. * See: docs/modernization/02-modernization-plan.md */ *, *::before, *::after { box-sizing: border-box; } body { max-width: 960px; margin: 0 auto; padding: 0 8px; font-size: clamp(14px, 2.5vw, 16px); } img { max-width: 100%; height: auto; } /* * Mobile table reflow — switches layout tables to block stacking below 768px. * * The :not(.content-table) guard preserves genuine data tables (e.g. the NCFR * folksong list with categories, comparative linguistics tables) so they are * not destroyed by the block-layout reflow. During Phase 2 channel work, * editors should add class="content-table" to any table holding actual * tabular data rather than being used for page layout. */ @media (max-width: 768px) { table:not(.content-table), table:not(.content-table) thead, table:not(.content-table) tbody, table:not(.content-table) tr, table:not(.content-table) td, table:not(.content-table) th { display: block; width: 100% !important; } } :root { /* Site-wide semantic colors */ --color-authority: #000080; /* Navy — section headers, authority text */ --color-nav-key: #228B22; /* Forest green — key navigation, channel headings */ --color-emphasis: #CC0000; /* Dark red — emphasis, warnings */ --color-callout-bg: #FFFFCC; /* Cream — information boxes, callouts */ --color-body-text: #000000; /* Black — standard body text */ --color-mid-gray: #666666; /* Medium gray — metadata, secondary text */ /* Channel-specific accent colors */ --color-music-accent: #330099; /* Music channel purple */ --color-ncfr-header: #990000; /* NCFR dark red headers */ --color-ncfr-feature: #CCFF66; /* NCFR lime green featured sections */ --color-ncfr-text: #FF9933; /* NCFR orange text */ --color-ncfr-folksong: #330099; /* NCFR purple = folksongs proper */ }