matching the page currently being viewed.
--------------------------------------------------------------------- */
.header-right ul li.has-dropdown {
position: relative;
}
.header-right ul li.has-dropdown .dropdown-caret {
display: inline-block;
margin-left: 4px;
font-size: 10px;
transition: transform 0.2s ease;
}
.header-right ul li.has-dropdown:hover .dropdown-caret,
.header-right ul li.has-dropdown.open .dropdown-caret {
transform: rotate(180deg);
}
.header-right ul li .dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
min-width: 230px;
list-style: none;
text-align: left;
background-color: #ffffff;
border-top: 3px solid #2b2f5a;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
z-index: 1000;
}
.header-right ul li.has-dropdown:hover .dropdown-menu,
.header-right ul li.has-dropdown.open .dropdown-menu {
display: block;
}
.header-right ul li .dropdown-menu li {
display: block;
width: 100%;
}
.header-right ul li .dropdown-menu li a {
display: block;
padding: 14px 20px;
background-color: #ffffff;
font-family: 'brand-medium', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 18px;
color: #4f4f4f;
text-transform: none;
text-decoration: none;
white-space: nowrap;
border-bottom: 1px solid #f0f0f0;
}
.header-right ul li .dropdown-menu li:last-child a {
border-bottom: none;
}
.header-right ul li .dropdown-menu li a:hover {
background-color: #2b2f5a;
color: #ffffff;
}
.header-right ul li .dropdown-menu li a.current {
color: #2b2f5a;
font-weight: 700;
}
.header-right ul li .dropdown-menu li a.current:hover {
color: #ffffff;
}
@media screen and (max-width: 767px) {
.header-right ul li .dropdown-menu {
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.header-right ul li .dropdown-menu li a {
white-space: normal;
}
}
/* ---------------------------------------------------------------------
3. Dashboard detail sections
Image + caption blocks used to walk through product screenshots.
Reuses docs.css's .promotion-content h2/p/img typography and
responsive breakpoints - only spacing and the image frame are added
here. Markup:
--------------------------------------------------------------------- */
.service-manage-detail {
margin-top: 65px;
}
.service-manage-detail h2 {
text-align: center;
}
.service-manage-detail p {
text-align: center;
max-width: 830px;
margin-left: auto;
margin-right: auto;
}
.service-manage-detail img {
display: block;
margin: 0 auto;
border: 1px solid #eaeaea;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
@media screen and (max-width: 767px) {
.service-manage-detail {
margin-top: 40px;
}
}
/* ---------------------------------------------------------------------
4. Results / proof page
Used only on results.html. Reuses docs.css's .best.profit-up and
.promotion-content.service-manage-detail wrappers, so headings, body
copy, spacing and breakpoints all match the service pages. Only the
table, testimonial cards, and CTA button are added here, and every
color comes from the existing palette:
#2b2f5a brand navy (headers, accents)
#4f4f4f body text
#eaeaea image/table border
#f0f0f0 hairline / zebra rows
Fonts follow the same brand-* -> Poppins -> Helvetica fallback stack
as the rest of site-enhancements.css.
--------------------------------------------------------------------- */
/* Headline result callout: same detail frame, slightly tighter */
.best.profit-up .results-headline p strong {
color: #2b2f5a;
}
/* Data tables (profit per item, volume rebates) */
.best.profit-up .results-table-wrap {
max-width: 720px;
margin: 28px auto 0;
overflow-x: auto; /* keeps tables usable on narrow screens */
}
.best.profit-up .results-table {
width: 100%;
border-collapse: collapse;
font-family: 'brand-medium', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 15px;
color: #4f4f4f;
}
.best.profit-up .results-table th,
.best.profit-up .results-table td {
padding: 13px 18px;
text-align: left;
border-bottom: 1px solid #f0f0f0;
}
.best.profit-up .results-table th {
background-color: #2b2f5a;
color: #ffffff;
font-family: 'brand-bold', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 700;
text-transform: none;
}
.best.profit-up .results-table tbody tr:nth-child(even) td {
background-color: #f7f7f9;
}
.best.profit-up .results-table td:last-child,
.best.profit-up .results-table th:last-child {
text-align: right;
white-space: nowrap;
font-weight: 700;
color: #2b2f5a;
}
.best.profit-up .results-table th:last-child {
color: #ffffff;
}
/* Testimonials: three cards, wrapping, matching the detail max-width */
.best.profit-up .results-quotes {
display: flex;
flex-wrap: wrap;
gap: 22px;
justify-content: center;
max-width: 900px;
margin: 30px auto 0;
}
.best.profit-up .results-quote {
flex: 1 1 260px;
max-width: 300px;
margin: 0;
padding: 24px;
background-color: #ffffff;
border: 1px solid #eaeaea;
border-left: 4px solid #2b2f5a;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
text-align: left;
}
.best.profit-up .results-quote p {
font-family: 'brand-light', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 300;
font-style: italic;
color: #4f4f4f;
margin: 0 0 12px;
max-width: none; /* override the centered detail-paragraph width */
}
.best.profit-up .results-quote cite {
font-family: 'brand-bold', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 700;
font-style: normal;
color: #2b2f5a;
font-size: 14px;
}
/* Call to action */
.best.profit-up .results-cta-btn {
display: inline-block;
margin-top: 22px;
padding: 15px 42px;
background-color: #2b2f5a;
color: #ffffff;
font-family: 'brand-bold', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 16px;
text-decoration: none;
border-radius: 40px;
transition: background-color 0.2s ease;
}
.best.profit-up .results-cta-btn:hover {
background-color: #1f2244;
}
/* Fine print */
.best.profit-up .results-fineprint {
max-width: 830px;
margin: 55px auto 0;
text-align: center;
font-family: 'brand-light', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 12px;
color: #9a9a9a;
line-height: 18px;
}