Pivot.css: Difference between revisions

Latest revision as of 16:56, 28 August 2025

/* Using colors: #25326b (dark blue) and #f16522 (orange) */

/* Custom colors - top bar */
.tab-bar {
    background: #25326b;
    color: #ffffff;
}

/* Sidebar labels */
ul.side-nav label {
    background: #25326b;
    color: #ffffff; 
    padding: .25em .5em;
}

/* Sidebar background color */
body {
    background-color: #f8f9fa; /* Light neutral background for readability */
}

/* Main body of page content */
#p-cactions {
    padding-top: 1.5em;
    padding-bottom: .5em;
    background-color: #ffffff; /* Pure white for maximum contrast */
    border-left: 1px solid #25326b; /* Dark blue border */
    border-right: 1px solid #25326b; /* Dark blue border */
    color: #25326b; /* Dark blue */
}

/* Additional WCAG AAA compliant styling */

/* Links and interactive elements using orange accent */
a {
    color: #b8440f; /* Darker orange variant for higher contrast */
}

a:hover, a:focus {
    color: #25326b; /* Dark blue on hover/focus */
    text-decoration: underline;
}

/* Button styling for accessibility */
button, .button {
    background: #25326b;
    color: #ffffff;
    border: 2px solid #25326b;
    padding: 0.5em 1em;
}

button:hover, .button:hover {
    background: #1a2450; /* Darker blue on hover */
    border-color: #1a2450;
}

/* Focus indicators for keyboard navigation */
button:focus, a:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid #f16522; /* Orange outline for focus visibility */
    outline-offset: 2px;
}

/* High contrast text styling */
.content {
    color: #25326b; /* Dark blue text */
    line-height: 1.6; /* Improved readability */
}

/* Headings with proper contrast */
h1, h2, h3, h4, h5, h6 {
    color: #25326b;
}

/* Navigation elements */
.top-bar-section ul li > a {
    color: #ffffff;
}

.top-bar-section ul li > a:hover {
    background: #1a2450;
}