/* ===================================== Bronze/Orange color scheme for Barceloneta ===================================== */ :root { --bronze-dark: #4E3320; --bronze: #8C5A2B; --bronze-light: #B87B3E; --orange: #D2691E; --orange-light: #E8935A; --cream: #FBF5EC; --text-dark: #3A2A1A; } /* ---------- Base Elements ---------- */ body { color: var(--text-dark); background-color: var(--cream); } /* All links */ a { color: var(--orange); text-decoration: none; } a:hover, a:focus { color: var(--bronze-dark); text-decoration: underline; } /* ---------- Headings ---------- */ .documentFirstHeading, h1, h2, h3 { color: var(--bronze-dark); } .documentFirstHeading { border-bottom: 1px solid var(--bronze-light); padding-bottom: 0.3em; } /* ---------- Header / Logo Area ---------- */ #portal-header { background-color: var(--cream); border-bottom: 2px solid var(--bronze); } /* ---------- Main Navigation (top-level) ---------- */ #portal-globalnav.navbar { background-color: var(--bronze-dark); border-bottom: 1px solid var(--bronze); } /* Top-level items */ #portal-globalnav .navTreeLevel0 > .navTreeItem > a.navTreeItem, #portal-globalnav .nav-link { color: #F3E3CE; font-weight: 500; padding: 0.6em 1em; transition: background-color 0.15s ease, color 0.15s ease; } /* Hover / focus on top-level items */ #portal-globalnav .navTreeItem > a.navTreeItem:hover, #portal-globalnav .navTreeItem > a.navTreeItem:focus, #portal-globalnav .nav-link:hover, #portal-globalnav .nav-link:focus { background-color: var(--orange); color: #fff; border-radius: 3px; } /* Currently selected section */ #portal-globalnav .navTreeItemInPath > a.navTreeItem, #portal-globalnav .navTreeCurrentItem > a.navTreeItem, #portal-globalnav .nav-item.active > .nav-link { background-color: var(--orange); color: #fff; border-radius: 3px; } /* Dropdown submenus (if used) */ #portal-globalnav .subMenu, #portal-globalnav .dropdown-menu { background-color: var(--bronze); border: 1px solid var(--bronze-dark); } #portal-globalnav .subMenu a, #portal-globalnav .dropdown-menu a { color: #F3E3CE; } #portal-globalnav .subMenu a:hover, #portal-globalnav .dropdown-menu a:hover { background-color: var(--orange); color: #fff; } /* Mobile hamburger toggle */ #portal-globalnav .navbar-toggler { border-color: var(--bronze-light); } #portal-globalnav .navbar-toggler-icon { filter: invert(90%) sepia(20%) saturate(300%) hue-rotate(-10deg); } /* Collapsed mobile menu panel */ #portal-globalnav .navbar-collapse { background-color: var(--bronze-dark); } /* ---------- Buttons ---------- */ .btn-primary, input.context, button.context, #form-buttons-save { background-color: var(--orange); border-color: var(--bronze); color: #fff; } .btn-primary:hover, input.context:hover, button.context:hover { background-color: var(--bronze); border-color: var(--bronze-dark); } .btn-secondary, input.standalone, button.standalone { background-color: var(--cream); border-color: var(--bronze-light); color: var(--bronze-dark); } /* ---------- Portlets ---------- */ .portletHeader, .portlet-header { background-color: var(--bronze); color: #fff; } .portlet { border: 1px solid var(--bronze-light); } .portletItem a { color: var(--bronze-dark); } /* ---------- Search Box ---------- */ #portal-searchbox input[type="text"] { border: 1px solid var(--bronze-light); } #portal-searchbox .searchButton { background-color: var(--orange); border-color: var(--bronze); } /* ---------- Breadcrumbs ---------- */ #portal-breadcrumbs a { color: var(--bronze); } /* ---------- Tags / Keywords ---------- */ .subject-tags a, .keyword { background-color: var(--orange-light); color: #fff; border-radius: 3px; } /* ---------- Footer ---------- */ #portal-footer, #portal-footer-wrapper { background-color: var(--bronze-dark); color: #F3E3CE; } #portal-footer a { color: var(--orange-light); } /* ---------- Tables ---------- */ table.listing thead th, table.contenttype-Folder thead th { background-color: var(--bronze); color: #fff; } /* ---------- States ---------- */ .state-published { color: var(--orange); } /* ---------- Bootstrap Navbar Override ---------- */ .navbar-barceloneta { --bs-navbar-color: #F3E3CE; --bs-navbar-active-color: #ffffff; --bs-navbar-hover-color: #ffffff; --bs-navbar-background: var(--bronze-dark); --bs-navbar-active-background: var(--orange); --bs-navbar-hover-background: rgba(210, 105, 30, 0.55); /* orange @ 55% */ background-color: var(--bs-navbar-background); }