/* ========================================================== styles.css — S.W.E. Ventures Master Stylesheet Combines main site styles and knowledge base / article styles. Use on article pages for KB-specific typography. Colors: Blue (primary): #303f9f Navy (nav): #0000A0 Orange (accent): #ff9800 Dark text: #272646 Body bg: #e3e5e6 Content bg: #eff9fe KB content bg: #ffffff Google Fonts — include in every : ========================================================== */ /* ========================================================== 1. BASE — Body & Global ========================================================== */ html, body { font-family: Verdana, sans-serif; font-size: 15px; line-height: 1.6; background-color: #e3e5e6; color: #222222; } /* KB pages: slightly smaller base font */ body.kb { font-size: 14px; } a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #303f9f; } a:focus { color: #303f9f; } a:active { color: #000000; } /* ========================================================== 2. HEADINGS — Main site defaults ========================================================== */ h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000000; } h1 { font-family: 'Lora', Verdana, Helvetica, sans-serif; font-size: 38px; color: #272646; margin: 0.3em 0; letter-spacing: -1px; text-align: center; } h2 { font-family: 'Lora', Arial, Verdana, Helvetica, sans-serif; font-size: 34px; color: #302f59; margin: 0.3em 0; letter-spacing: 1px; text-align: center; } h3 { font-family: 'Jura', Verdana, Helvetica, sans-serif; font-size: 28px; color: #302f59; letter-spacing: -1px; margin: 30px 0 25px 0; padding: 5px 0; border-bottom: 1px solid #302f59; } h4 { font-family: 'Jura', Verdana, Helvetica, sans-serif; font-size: 28px; font-weight: normal; color: #404040; margin: 0.3em 0; } h5 { font-family: 'Raleway', Verdana, Helvetica, sans-serif; font-size: 24px; font-weight: normal; color: #404040; margin: 0.3em 0; } h6 { font-family: 'Raleway', Verdana, Helvetica, sans-serif; font-size: 20px; font-weight: normal; color: #302f59; margin: 0.3em 0; } /* ========================================================== 2b. HEADINGS — KB overrides (body.kb) ========================================================== */ body.kb h1 { font-family: 'Lora', Verdana, Helvetica, sans-serif; font-size: 28px; color: #272646; margin: 0.3em 0; letter-spacing: -1px; text-align: center; } body.kb 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; text-align: left; } body.kb h3 { font-family: 'Jura', Verdana, Helvetica, sans-serif; font-size: 18px; color: #302f59; margin: 10px 0 2px 20px; padding: 5px 0; border-bottom: none; letter-spacing: 0; } body.kb h4 { font-family: 'Jura', Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: normal; color: #404040; margin: 10px 0 2px 20px; padding: 5px 0; } body.kb h5 { font-family: 'Raleway', Verdana, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #404040; margin: 0.3em 0; } body.kb h6 { font-family: 'Raleway', Verdana, Helvetica, sans-serif; font-size: 16px; font-weight: normal; color: #302f59; margin: 0.3em 0; text-align: center; } /* ========================================================== 3. PARAGRAPHS ========================================================== */ p { margin: 0.6em 15px; } body.kb p { margin: 0.5em 10px 0.5em 25px; } /* ========================================================== 4. TABLES — KB only ========================================================== */ body.kb table { width: 50%; border-collapse: collapse; margin: 1em auto; } body.kb th { text-align: center; border: 1px solid #303f9f; background-color: #303f9f; color: #ffffff; padding: 6px 10px; } body.kb td { border: 1px solid #aaaaaa; padding: 5px 10px; vertical-align: top; } body.kb tr:nth-child(even) td { background-color: #f0f4ff; } /* ========================================================== 5. OUTER WRAPPER ========================================================== */ #outerWrapper { background-color: #eff9fe; max-width: 1024px; text-align: left; margin: 25px auto; border: 1px solid #000000; border-radius: 10px; box-shadow: 0 0 20px #453823; overflow: hidden; } /* KB pages use white background */ body.kb #outerWrapper { background-color: #ffffff; } /* ========================================================== 6. TOOLTIP — touch device support ========================================================== */ @media (pointer: coarse), (hover: none) { [title] { position: relative; display: inline-flex; justify-content: center; } [title]:focus::after { content: attr(title); position: absolute; top: 90%; color: #000; background-color: #fff; border: 1px solid; width: fit-content; padding: 3px; z-index: 100; } } /* ========================================================== 7. 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; } /* ========================================================== 8. TOP NAVIGATION — Flexbox + Hamburger ========================================================== */ #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 checkbox — always hidden */ #nav-toggle { display: none; } /* Hamburger label — hidden on desktop, shown on mobile */ #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; } /* ========================================================== 9. MAIN CONTENT ========================================================== */ #content { padding: 20px 15px; } /* ========================================================== 10. 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; } /* ========================================================== 11. UTILITY CLASSES ========================================================== */ /* Responsive image — centered, scales to container */ .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; } .set-width { width: 300px; } /* Vertical text — KB pages */ .vertical { writing-mode: vertical-rl; text-orientation: upright; } /* ========================================================== 12. RESPONSIVE — Tablet (max 768px) ========================================================== */ @media screen and (max-width: 768px) { html, body { font-size: 14px; } body.kb { font-size: 13px; } #outerWrapper { margin: 10px auto; border-radius: 6px; } /* Main site heading sizes */ h1 { font-size: 28px; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 15px; } /* KB heading sizes */ body.kb h1 { font-size: 22px; } body.kb h2 { font-size: 18px; margin-right: 10px; } body.kb h3 { font-size: 16px; } body.kb h4 { font-size: 13px; } /* KB tables full width on tablet */ body.kb table { width: 100%; } /* Hamburger — show label, collapse nav list */ #nav-toggle-label { display: block; } #topnav ul { display: none; flex-direction: column; border-bottom: none; } /* ~ general sibling selector — correct fix for hamburger */ #nav-toggle:checked ~ ul { display: flex; } #topnav ul li a { border-bottom: 1px solid #1a2fa0; padding: 12px 16px; } .quote { margin-left: 20px; } .set-width { width: 100%; } } /* ========================================================== 13. RESPONSIVE — Phone (max 480px) ========================================================== */ @media screen and (max-width: 480px) { html, body { font-size: 13px; } body.kb { font-size: 12px; } #outerWrapper { margin: 0; border-radius: 0; border-left: none; border-right: none; } h1 { font-size: 24px; letter-spacing: 0; } h2 { font-size: 20px; } h3 { font-size: 18px; } body.kb h2 { margin-right: 10px; } p { margin-left: 10px; margin-right: 10px; } #content { padding: 15px 10px; } } /* ========================================================== 14. KB ARTICLE LAYOUT — Shared across all article pages All rules scoped to body.kb so non-article pages are completely unaffected. ========================================================== */ /* --- 14a. #content reset for KB pages --- Override the main site #content padding so article pages control their own spacing via #page-intro / #article-body. ---------------------------------------------------------- */ body.kb #content { padding: 0; } /* --- 14b. Page intro band --- Dark navy header band at top of every article page. ---------------------------------------------------------- */ body.kb #page-intro { background-color: #272646; padding: 32px 36px 26px 36px; border-bottom: 4px solid #ff9800; } body.kb #page-intro .breadcrumb { font-family: 'Raleway', Verdana, sans-serif; font-size: 11px; letter-spacing: 1px; color: #aab8d0; margin-bottom: 10px; } body.kb #page-intro .breadcrumb a { color: #aab8d0; text-decoration: none; } body.kb #page-intro .breadcrumb a:hover { color: #ff9800; } body.kb #page-intro h1 { font-family: 'Lora', Verdana, serif; font-size: 30px; color: #ffffff; letter-spacing: 0; margin: 0 0 10px 0; padding: 0; border: none; text-align: left; } body.kb #page-intro p { font-size: 15px; color: #dde4f0; line-height: 1.7; margin: 0; padding: 0; max-width: 700px; } /* --- 14c. Article body — two-column grid --- Left: article main (1fr). Right: sidebar (250px fixed). min-width: 0 on both children prevents CSS grid overflow. ---------------------------------------------------------- */ body.kb #article-body { display: grid; grid-template-columns: 1fr 250px; gap: 0; align-items: start; } body.kb #article-main { padding: 30px 28px 32px 36px; border-right: 1px solid #cce6ff; min-width: 0; } /* --- 14d. Article sections --- Each content block within the article main column. ---------------------------------------------------------- */ body.kb .article-section { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #e8f0fb; } body.kb .article-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } body.kb .article-section h2 { font-family: 'Jura', Verdana, sans-serif; font-size: 18px; color: #272646; text-align: left; letter-spacing: 0; margin: 0 0 14px 0; padding-bottom: 8px; border-bottom: 2px solid #303f9f; } body.kb .article-section p { font-size: 14px; color: #444444; line-height: 1.75; margin: 0 0 12px 0; padding: 0; } body.kb .article-section p:last-child { margin-bottom: 0; } /* --- 14e. Callout boxes --- Standard blue callout and dark navy variant. Individual pages may override border color via CSS vars or additional selectors for themed variants. ---------------------------------------------------------- */ body.kb .callout { border-left: 5px solid #303f9f; background-color: #eef3ff; border-radius: 0 6px 6px 0; padding: 14px 18px; margin: 14px 0; } body.kb .callout.dark { border-left-color: #ff9800; background-color: #272646; } body.kb .callout p { font-size: 14px; line-height: 1.7; margin: 0 !important; color: #333333; } body.kb .callout.dark p { color: #dde4f0 !important; } body.kb .callout.dark strong { color: #ff9800; } body.kb .callout.dark a { color: #ff9800; } /* --- 14f. Pull quote --- Centered italic serif quote used in several articles. ---------------------------------------------------------- */ body.kb .pull-quote { font-family: 'Lora', serif; font-size: 16px; font-style: italic; color: #272646; text-align: center; padding: 14px 20px; border-top: 2px solid #cce6ff; border-bottom: 2px solid #cce6ff; margin: 18px 0; line-height: 1.6; } body.kb .pull-quote .attrib { display: block; font-size: 12px; font-style: normal; color: #888888; margin-top: 6px; font-family: 'Raleway', Verdana, sans-serif; letter-spacing: 1px; } /* --- 14g. Sidebar --- Right-hand 250px column. Stacks below article on mobile. ---------------------------------------------------------- */ body.kb #article-sidebar { padding: 28px 20px; background-color: #f8faff; min-width: 0; overflow: hidden; } body.kb .sidebar-block { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #cce6ff; } body.kb .sidebar-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } body.kb .sidebar-block h3 { font-family: 'Jura', Verdana, sans-serif; font-size: 13px; font-weight: bold; color: #272646; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px 0; padding-bottom: 6px; border-bottom: 2px solid #303f9f; } body.kb .sidebar-block p { font-size: 12px; color: #555555; line-height: 1.6; margin: 0 0 8px 0; padding: 0; } body.kb .sidebar-block p:last-child { margin-bottom: 0; } body.kb .sidebar-block ul { list-style: none; padding: 0; margin: 0; } body.kb .sidebar-block ul li { font-size: 12px; padding: 5px 0; border-bottom: 1px dotted #cce6ff; color: #444444; } body.kb .sidebar-block ul li:last-child { border-bottom: none; } body.kb .sidebar-block ul li a { color: #303f9f; text-decoration: none; } body.kb .sidebar-block ul li a:hover { color: #ff9800; } /* --- 14h. Sidebar CTA button --- Orange call-to-action button used in every article sidebar. ---------------------------------------------------------- */ body.kb .sidebar-cta { display: block; background-color: #ff9800; color: #272646 !important; font-family: 'Raleway', Verdana, sans-serif; font-size: 13px; font-weight: 500; text-decoration: none !important; text-align: center; padding: 11px 16px; border-radius: 4px; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 10px; transition: background-color 0.2s ease; } body.kb .sidebar-cta:hover { background-color: #e68900 !important; color: #ffffff !important; } /* --- 14i. Article footer bar --- Thin bar below the article body with page date and back link. ---------------------------------------------------------- */ body.kb #article-footer { background-color: #f0f5ff; border-top: 1px solid #cce6ff; padding: 14px 36px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 11px; color: #888888; font-style: italic; } body.kb #article-footer a { color: #303f9f; font-style: normal; text-decoration: none; } body.kb #article-footer a:hover { color: #ff9800; } /* --- 14j. Responsive — KB article layout --- At 760px the two-column grid collapses to single column. At 480px additional padding reductions apply. ---------------------------------------------------------- */ @media screen and (max-width: 760px) { body.kb #page-intro { padding: 24px 18px; } body.kb #page-intro h1 { font-size: 24px; } body.kb #article-body { grid-template-columns: 1fr; } body.kb #article-main { padding: 24px 18px; border-right: none; border-bottom: 1px solid #cce6ff; } body.kb #article-sidebar { padding: 24px 18px; } body.kb #article-footer { padding: 14px 18px; flex-direction: column; align-items: flex-start; } } @media screen and (max-width: 480px) { body.kb #page-intro { padding: 18px 14px; } body.kb #page-intro h1 { font-size: 21px; } body.kb #article-main { padding: 18px 14px; } body.kb #article-sidebar { padding: 18px 14px; } body.kb #article-footer { padding: 10px 14px; } } /* ========================================================== 15. ARTICLES INDEX PAGE Styles for articles/index.htm — article cards, categories, video grid, resource cards, and request-article CTA band. ========================================================== */ /* ------------------------------------------------------- Articles index page specific styles ------------------------------------------------------- */ /* Page intro band */ #page-intro { background-color: #272646; color: #ffffff; text-align: center; padding: 36px 40px 30px 40px; border-bottom: 4px solid #ff9800; } #page-intro h1 { font-family: 'Lora', Verdana, serif; font-size: 34px; color: #ffffff; letter-spacing: 0; margin-bottom: 12px; } #page-intro p { font-size: 15px; color: #dde4f0; max-width: 680px; margin: 0 auto 8px auto; line-height: 1.7; } /* Intro band */ #articles-intro { padding: 28px 36px 20px 36px; border-bottom: 1px solid #cce6ff; } #articles-intro p { font-size: 14px; color: #444444; line-height: 1.75; margin: 0 0 10px 0; max-width: 820px; } #articles-intro p:last-child { margin-bottom: 0; } /* Article category sections */ .article-category { padding: 28px 36px; } .article-category + .article-category { border-top: 1px solid #cce6ff; } .article-category:nth-child(even) { background-color: #f5f8ff; } /* Category header row */ .cat-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid #303f9f; } .cat-label { display: inline-block; font-family: 'Raleway', Verdana, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; background-color: #303f9f; color: #ffffff; padding: 3px 10px; border-radius: 3px; flex-shrink: 0; } .cat-header h2 { font-family: 'Jura', Verdana, sans-serif; font-size: 20px; color: #272646; text-align: left; letter-spacing: 0; margin: 0; padding: 0; border: none; } /* Article card grid */ .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } /* Individual article card */ .article-card { background-color: #ffffff; border: 1px solid #cce6ff; border-left: 4px solid #303f9f; border-radius: 0 6px 6px 0; padding: 16px 16px 14px 16px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; transition: border-left-color 0.15s ease, box-shadow 0.15s ease; } .article-card:hover { border-left-color: #ff9800; box-shadow: 0 2px 10px rgba(48,63,159,0.12); text-decoration: none; } .article-card h3 { font-family: 'Jura', Verdana, sans-serif; font-size: 14px; font-weight: bold; color: #272646; margin: 0; padding: 0; border: none; letter-spacing: 0; line-height: 1.3; } .article-card p { font-size: 12px; color: #666666; line-height: 1.5; margin: 0; flex-grow: 1; } .article-card .read-link { font-family: 'Raleway', Verdana, sans-serif; font-size: 11px; font-weight: 500; color: #303f9f; letter-spacing: 0.5px; align-self: flex-start; margin-top: 2px; } .article-card:hover .read-link { color: #ff9800; } /* Book / special resource card */ .resource-card { background-color: #272646; border-radius: 6px; padding: 20px 20px 18px 20px; display: flex; align-items: flex-start; gap: 16px; text-decoration: none; transition: opacity 0.15s ease; } .resource-card:hover { opacity: 0.9; text-decoration: none; } .resource-card .res-icon { font-size: 32px; flex-shrink: 0; margin-top: 2px; } .resource-card .res-content h3 { font-family: 'Jura', Verdana, sans-serif; font-size: 15px; font-weight: bold; color: #ffffff; margin: 0 0 6px 0; padding: 0; border: none; letter-spacing: 0; } .resource-card .res-content p { font-size: 13px; color: #aab8d0; line-height: 1.55; margin: 0 0 8px 0; } .resource-card .res-content .res-link { font-family: 'Raleway', Verdana, sans-serif; font-size: 11px; font-weight: 500; color: #ff9800; letter-spacing: 0.5px; } /* Video resource cards */ .video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .video-card { background-color: #f0f5ff; border: 1px solid #cce6ff; border-top: 3px solid #303f9f; border-radius: 0 0 6px 6px; padding: 16px; } .video-card .vc-label { font-family: 'Raleway', Verdana, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #303f9f; display: block; margin-bottom: 6px; } .video-card h3 { font-family: 'Jura', Verdana, sans-serif; font-size: 14px; font-weight: bold; color: #272646; margin: 0 0 6px 0; padding: 0; border: none; letter-spacing: 0; line-height: 1.35; } .video-card p { font-size: 12px; color: #666666; margin: 0 0 10px 0; line-height: 1.5; } .video-card a.vc-link { font-size: 12px; color: #303f9f; word-break: break-all; text-decoration: none; } .video-card a.vc-link:hover { color: #ff9800; } /* Request article CTA */ #request-article { background-color: #303f9f; text-align: center; padding: 28px 30px; border-top: 4px solid #ff9800; } #request-article p { font-size: 15px; color: #dde4f0; margin: 0 auto 18px auto; max-width: 560px; line-height: 1.7; } #request-article p strong { color: #ffffff; } .cta-button { display: inline-block; background-color: #ff9800; color: #272646 !important; font-family: 'Raleway', Verdana, sans-serif; font-size: 14px; font-weight: 500; text-decoration: none !important; padding: 12px 28px; border-radius: 4px; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 3px 8px rgba(0,0,0,0.25); transition: background-color 0.2s ease, box-shadow 0.2s ease; } .cta-button:hover { background-color: #e68900 !important; color: #ffffff !important; box-shadow: 0 5px 14px rgba(0,0,0,0.35); } /* Last updated footer */ #page-footer { background-color: #f0f5ff; border-top: 1px solid #cce6ff; padding: 12px 36px; font-size: 11px; color: #888888; font-style: italic; text-align: right; } /* Responsive */ @media screen and (max-width: 680px) { #page-intro { padding: 28px 18px; } #page-intro h1 { font-size: 26px; } #articles-intro { padding: 22px 18px; } .article-category { padding: 22px 18px; } .article-grid { grid-template-columns: 1fr; } .video-grid { grid-template-columns: 1fr; } #request-article { padding: 24px 18px; } #page-footer { padding: 12px 18px; text-align: left; } }