/* * GARS Website - Modern Typography with Source Sans 3 * Professional, clean, and optimized for readability * * Implementation: Link this CSS file in your section after any existing stylesheets * This will override default fonts while preserving your existing layout */ /* Import Source Sans 3 from Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&display=swap'); /* === BASE TYPOGRAPHY === */ body { font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #333; font-weight: 400; background-color: #6599ff; /* Blue background */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* === HEADINGS === */ h1, h2, h3, h4, h5, h6 { font-family: 'Source Sans 3', sans-serif; font-weight: 600; line-height: 1.3; color: #2c3e50; margin-top: 1.2em; margin-bottom: 0.6em; } h1 { font-size: 2.5em; font-weight: 700; letter-spacing: -0.02em; margin-top: 0; } h2 { font-size: 1.8em; font-weight: 600; color: #34495e; } h3 { font-size: 1.4em; font-weight: 600; } h4 { font-size: 1.2em; font-weight: 600; } h5, h6 { font-size: 1em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } /* === PARAGRAPHS & TEXT === */ p { margin-bottom: 1em; line-height: 1.7; } /* Larger, more readable body text */ .content p, .main-content p, article p { font-size: 1.05em; line-height: 1.7; } /* Lead paragraphs / introductions */ .lead, p.lead { font-size: 1.2em; font-weight: 300; line-height: 1.6; color: #555; } /* === LINKS === */ a { color: #3498db; text-decoration: none; transition: color 0.3s ease; } a:hover { color: #2980b9; text-decoration: underline; } a:visited { color: #8e44ad; } /* === LISTS === */ ul, ol { margin-bottom: 1em; padding-left: 1.5em; line-height: 1.6; } li { margin-bottom: 0.5em; } /* Technical lists (frequencies, specifications) */ ul.technical-list, .repeater-specs ul { list-style: none; padding-left: 0; } ul.technical-list li, .repeater-specs ul li { padding-left: 1.5em; position: relative; } ul.technical-list li:before, .repeater-specs ul li:before { content: "▸"; position: absolute; left: 0; color: #3498db; font-weight: 600; } /* === NAVIGATION === */ nav, .navigation, .menu { font-family: 'Source Sans 3', sans-serif; font-weight: 500; font-size: 0.95em; } nav a, .navigation a, .menu a { font-weight: 500; letter-spacing: 0.02em; } /* Left sidebar navigation menu styling */ .nav-link { font-size: 1.15em !important; /* Larger font size for navigation */ font-weight: 500; letter-spacing: 0.01em; line-height: 1.5; display: inline-block; transition: all 0.2s ease; } .nav-link:hover { color: #2980b9; transform: translateX(3px); /* Subtle shift on hover */ } /* Current page indicator - add class="nav-link current" to the current page link */ .nav-link.current { font-weight: 700 !important; /* Bold for current page */ color: #2c3e50; /* Darker color for emphasis */ } /* Alternative: if you prefer to use a non-link for current page */ /* Add class="nav-current" to plain text (not a link) for current page */ .nav-current { font-size: 1.15em; font-weight: 700; color: #2c3e50; letter-spacing: 0.01em; line-height: 1.5; display: inline-block; } /* === TABLES === */ table { font-family: 'Source Sans 3', sans-serif; font-size: 0.95em; } th { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9em; } td { font-weight: 400; } /* === TABLE STRIPING (ODD/EVEN ROW COLORS) === */ /* Striped table rows - colors match membership page */ table tr:nth-child(odd) { background-color: #EEEEEE; /* Gray for odd rows - matches membership page */ } table tr:nth-child(even) { background-color: #B0D0FF; /* Light blue for even rows - matches membership page */ } /* Hover effect on table rows for better interactivity */ table tr:hover { background-color: #e8f4f8; /* Light blue on hover */ transition: background-color 0.2s ease; } /* Header row styling - distinct from data rows */ /* Removed automatic blue header - let HTML bgcolor attributes control colors */ /* table tr:first-child, table thead tr { background-color: #3498db !important; color: white; font-weight: 600; } table tr:first-child:hover, table thead tr:hover { background-color: #2980b9 !important; } table tr:first-child td, table thead td, table thead th { color: white; font-weight: 600; padding: 10px; } */ /* Only apply bold weight to actual thead elements if present */ thead th, thead td { font-weight: 600; padding: 10px; } /* Better spacing in table cells */ table td { padding: 8px 10px; border: none; } table th { padding: 10px; border: none; } /* === PAGE BACKGROUND === */ /* Background color is set individually on each HTML page using bgcolor attribute */ /* Example: */ /* This allows per-page control and matches the membership page approach */ /* Data table specific styling */ /* This targets tables that display member lists, repeater info, etc. */ table table { border-collapse: collapse; width: 100%; } /* Nested tables inside main layout table - these get the striping */ table table tr:nth-child(odd) { background-color: #f5f9fc; /* Very light blue tint for odd rows */ } table table tr:nth-child(even) { background-color: #ffffff; /* White for even rows */ } /* === EMPHASIS & STRONG === */ strong, b { font-weight: 600; } em, i { font-style: italic; } /* === CODE & TECHNICAL TEXT === */ code, kbd, samp { font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace; font-size: 0.9em; background: #f4f4f4; padding: 2px 6px; border-radius: 3px; } pre { font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace; font-size: 0.9em; background: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto; line-height: 1.5; } /* === CALLOUTS & SPECIAL SECTIONS === */ .callout, .notice, .alert { font-size: 1em; line-height: 1.6; padding: 15px 20px; border-radius: 5px; margin: 1.5em 0; } .callout strong, .notice strong, .alert strong { font-weight: 600; } /* === BUTTONS === */ button, .button, input[type="submit"], input[type="button"] { font-family: 'Source Sans 3', sans-serif; font-weight: 600; letter-spacing: 0.02em; } /* === FORMS === */ input, textarea, select { font-family: 'Source Sans 3', sans-serif; font-size: 1em; line-height: 1.5; } label { font-weight: 600; font-size: 0.95em; } /* === BLOCKQUOTES === */ blockquote { font-size: 1.1em; font-weight: 300; font-style: italic; line-height: 1.6; margin: 1.5em 0; padding-left: 1.5em; border-left: 4px solid #3498db; color: #555; } /* === SMALL TEXT & CAPTIONS === */ small, .small-text, figcaption { font-size: 0.875em; line-height: 1.5; } /* === PAGE TITLES === */ .page-title, .site-title { font-weight: 700; font-size: 2em; letter-spacing: -0.02em; } /* === RESPONSIVE TYPOGRAPHY === */ @media screen and (max-width: 768px) { body { font-size: 15px; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.25em; } } @media screen and (max-width: 480px) { body { font-size: 14px; } h1 { font-size: 1.75em; } h2 { font-size: 1.35em; } } /* === PRINT STYLES === */ @media print { body { font-size: 12pt; line-height: 1.5; color: #000; } h1 { font-size: 18pt; } h2 { font-size: 14pt; } h3 { font-size: 12pt; } }