/* ========================================================== styles_kb.css — Knowledge Base / Articles Variant Stylesheet for S.W.E. Ventures This stylesheet is used for article/knowledgebase pages. It inherits the same color palette and structural patterns as styles.css but applies article-optimized typography, table styling, and layout adjustments. Colors (shared): Blue (primary): #303f9f Navy (nav): #0000A0 Orange (accent): #ff9800 Dark text: #272646 ========================================================== */ /* Google Fonts — must also be in via: */ /* ---------------------------------------------------------- Base / Body ---------------------------------------------------------- */ html, body { font-family: Verdana, sans-serif; font-size: 14px; line-height: 1.6; color: #222222; } /* ---------------------------------------------------------- Global Link Colors ---------------------------------------------------------- */ a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #303f9f; } a:focus { color: #303f9f; } a:active { color: #000000; } /* ---------------------------------------------------------- Headings — Article-optimized sizes ---------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000000; } h1 { font-family: 'Lora', Verdana, Helvetica, sans-serif; font-size: 28px; color: #272646; margin: 0.3em 0; letter-spacing: -1px; text-align: center; } h2 { font-family: 'Lora', Arial, Verdana, Helvetica, sans-serif; font-size: 20px; color: #302f59; margin: 30px 200px 10px 10px; letter-spacing: 1px; padding: 5px 0; border-bottom: 1px solid #302f59; } h3 { font-family: 'Jura', Verdana, Helvetica, sans-serif; font-size: 18px; color: #302f59; margin: 10px 0 2px 20px; padding: 5px 0; } h4 { font-family: 'Jura', Verdana, Helvetica, sans-serif; font-size: 14px; color: #404040; margin: 10px 0 2px 20px; padding: 5px 0; } h5 { font-family: 'Raleway', Verdana, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #404040; margin: 0.3em 0; } h6 { font-family: 'Raleway', Verdana, Helvetica, sans-serif; font-size: 16px; font-weight: normal; color: #302f59; margin: 0.3em 0; text-align: center; } /* ---------------------------------------------------------- Paragraphs ---------------------------------------------------------- */ p { margin: 0.5em 10px 0.5em 25px; } /* ---------------------------------------------------------- Tables — Article/data style ---------------------------------------------------------- */ table { width: 50%; border-collapse: collapse; margin: 1em auto; } th { text-align: center; border: 1px solid #303f9f; background-color: #303f9f; color: #ffffff; padding: 6px 10px; } td { border: 1px solid #aaaaaa; padding: 5px 10px; vertical-align: top; } tr:nth-child(even) td { background-color: #f0f4ff; } /* ---------------------------------------------------------- Outer Wrapper ---------------------------------------------------------- */ #outerWrapper { background-color: #ffffff; max-width: 1024px; text-align: left; margin: 25px auto; border: 1px solid #000000; border-radius: 10px; box-shadow: 0 0 20px #453823; overflow: hidden; } /* ---------------------------------------------------------- Header ---------------------------------------------------------- */ #header { background-color: #303f9f; padding: 10px; color: #ff9800; text-align: center; } #header p { color: #ff9800; margin: 0; text-align: center; font-size: 10px; } #header a:link { color: #ff9800; } #header a:visited { color: #ffca28; } #header a:hover { color: #ffffff; } #header a:focus { color: #ffffff; } #header a:active { color: #999999; } #header img { display: block; margin: 0 auto; max-width: 100%; height: auto; } /* ---------------------------------------------------------- Top Navigation — Flexbox (matches styles.css) ---------------------------------------------------------- */ #topnav { background-color: #0000A0; } #topnav ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; border-bottom: 3px solid #cce6ff; } #topnav ul li { display: block; } #topnav ul li a { display: block; padding: 10px 14px; font-size: 14px; white-space: nowrap; } #topnav a:link { color: #ffffff; text-decoration: none; } #topnav a:visited { color: #ffffff; text-decoration: none; } #topnav a:active { color: #ffffff; text-decoration: none; } #topnav a:hover { color: #303f9f; text-decoration: none; background-color: #ff9800; } #topnav a:focus { color: #ffffff; text-decoration: none; } /* Hamburger toggle — hidden on desktop */ #nav-toggle { display: none; } #nav-toggle-label { display: none; background-color: #0000A0; color: #ffffff; padding: 10px 14px; cursor: pointer; font-size: 20px; user-select: none; border-bottom: 3px solid #cce6ff; } /* ---------------------------------------------------------- Footer ---------------------------------------------------------- */ #footer { background-color: #303f9f; padding: 10px; border-radius: 0 0 8px 8px; color: #ff9800; text-align: center; } #footer p { color: #ff9800; margin: 0; text-align: center; font-size: 10px; } #footer a:link { color: #ff9800; } #footer a:visited { color: #ffca28; } #footer a:hover { color: #ffffff; } #footer a:focus { color: #ffffff; } #footer a:active { color: #999999; } /* ---------------------------------------------------------- Utility Classes ---------------------------------------------------------- */ .imgrc { max-width: 100%; height: auto; display: block; margin: 0 auto; } .orange { color: #ff9800; } .centered { text-align: center; } .center { margin-left: auto; margin-right: auto; } .margined { margin: 0 10px; padding: 0 10px; } .quote { text-align: center; font-style: italic; margin: 1em 10px 1em 100px; } /* Vertical text (used for special labels) */ .vertical { writing-mode: vertical-rl; text-orientation: upright; } /* ---------------------------------------------------------- Mobile Responsive Breakpoints ---------------------------------------------------------- */ @media screen and (max-width: 768px) { html, body { font-size: 13px; } #outerWrapper { margin: 10px auto; border-radius: 6px; } h1 { font-size: 22px; } h2 { font-size: 18px; margin-right: 10px; } h3 { font-size: 16px; } h4 { font-size: 13px; } table { width: 100%; } /* Hamburger menu */ #nav-toggle-label { display: block; } #topnav ul { display: none; flex-direction: column; border-bottom: none; } #nav-toggle:checked + #topnav ul { display: flex; } #topnav ul li a { border-bottom: 1px solid #1a2fa0; padding: 12px 16px; } .quote { margin-left: 20px; } } @media screen and (max-width: 480px) { html, body { font-size: 12px; } #outerWrapper { margin: 0; border-radius: 0; border-left: none; border-right: none; } h2 { margin-right: 10px; } p { margin-left: 10px; margin-right: 10px; } }