/* theme-green.css Drop this file into your assets/css/ folder and add the following line to your HTML AFTER the main.css link: It overrides only the colour values — no layout or typography changes. Remove or comment out the line to revert to the original purple theme. */ /* ----------------------------------------------- Base page background #312450 (body) → #1a3d2b ----------------------------------------------- */ body { background: #1a3d2b; } /* ----------------------------------------------- Core backgrounds #312450 (sidebar) → #1a3d2b deep forest green #261c3e (footer/alt) → #245c3e mid forest green #1e1533 (mobile overlay) → #14301f darkest green ----------------------------------------------- */ #sidebar { background: #1a3d2b; } /* Tablet-breakpoint top bar keeps the same sidebar colour */ @media screen and (max-width: 1280px) { #sidebar { background: #1a3d2b; } } .wrapper.alt { background-color: #245c3e; } /* ----------------------------------------------- Section wrapper colours style1 (intro) #5e42a6 → #2e7d52 style1-alt #493382 → #246644 style2 #5052b5 → #3a9e68 style2-alt #3e4094 → #2e8557 style3 #b74e91 → #5ab882 style3-alt #953d75 → #47a06e ----------------------------------------------- */ .wrapper.style1 { background-color: #2e7d52; } .wrapper.style1-alt { background-color: #246644; } .wrapper.style2 { background-color: #3a9e68; } .wrapper.style2-alt { background-color: #2e8557; } .wrapper.style3 { background-color: #5ab882; } .wrapper.style3-alt { background-color: #47a06e; } /* ----------------------------------------------- Spotlight image overlay rgba(49, 36, 80, 0.9) → rgba(26, 61, 43, 0.9) ----------------------------------------------- */ .spotlights > section > .image:before { background: rgba(26, 61, 43, 0.9); } /* ----------------------------------------------- Top/tablet header bar (max-width 1280px) background: #312450 → #1a3d2b active accent: #b74e91 → #5ab882 ----------------------------------------------- */ @media screen and (max-width: 1280px) { #header { background-color: #1a3d2b; } #header > nav > ul > li a.active { background-color: #5ab882; color: #0d2419 !important; } #sidebar nav a:after { background-color: #5ab882; } } /* ----------------------------------------------- Sidebar nav links default rgba(255,255,255,0.35) — keep as-is (reads as light green on dark bg) hover rgba(255,255,255,0.55) — keep as-is active #ffffff — keep as-is underline track #3c2c62 → #245c3e underline fill gradient #5e42a6→#b74e91 → #245c3e→#5ab882 ----------------------------------------------- */ #sidebar nav a:before { background: #245c3e; } #sidebar nav a:after { background-image: -moz-linear-gradient(to right, #245c3e, #5ab882); background-image: -webkit-linear-gradient(to right, #245c3e, #5ab882); background-image: -ms-linear-gradient(to right, #245c3e, #5ab882); background-image: linear-gradient(to right, #245c3e, #5ab882); } /* ----------------------------------------------- Buttons (active bg #5e42a6 → #2e7d52, text on inverted button #312450 → #0d2419) ----------------------------------------------- */ input[type="submit"], input[type="reset"], input[type="button"], button, .button { background-color: transparent; } input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover, .button:hover { background-color: rgba(255, 255, 255, 0.075); } /* Filled / CTA button variant */ input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary, button.primary, .button.primary { background-color: #5ab882; color: #0d2419 !important; } /* ----------------------------------------------- Feature-section icon colours style1 #5e42a6 → #2e7d52 style2 #5052b5 → #3a9e68 style3 #b74e91 → #5ab882 (icon :before pseudo uses wrapper bg as colour source; these rules catch any explicit colour overrides) ----------------------------------------------- */ .wrapper.style1 .icon.major:before { color: #5ab882; } .wrapper.style2 .icon.major:before { color: #7dd4a0; } .wrapper.style3 .icon.major:before { color: #0d2419; } /* ----------------------------------------------- Select element and form accent ----------------------------------------------- */ .select-wrapper:before { color: #5ab882; } /* ----------------------------------------------- Mobile overlay (our custom CSS in index/project) #1e1533 → #14301f ----------------------------------------------- */ #mobile-nav-overlay { background: #14301f; } /* ----------------------------------------------- Custom sub-nav caret and toggle button ----------------------------------------------- */ .subnav-toggle .subnav-chevron { color: rgba(200, 235, 215, 0.45); } .subnav-toggle[aria-expanded="true"] .subnav-chevron { color: rgba(200, 235, 215, 0.9); } /* ----------------------------------------------- Project nav bar home button accent rgba(94,66,166,…) → rgba(46,125,82,…) ----------------------------------------------- */ .project-nav-bar a.nav-home { background: rgba(46, 125, 82, 0.35); } .project-nav-bar a.nav-home:hover { background: rgba(46, 125, 82, 0.55); }