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 {
text-align: center;
}
.best.profit-up .results-cta-btn {
display: table;
margin-top: 22px !important;
margin-left: auto !important;
margin-right: auto !important;
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;
text-align: center;
border-radius: 40px;
transition: background-color 0.2s ease;
float: none !important;
}
.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;
}
/* ---------------------------------------------------------------------
5. Profit ledger calculator
Two-column layout: left (details), right (receipt calculator card).
Uses the fundraising zip's structure, styled to match the site palette.
IMPORTANT: .profit sits on a dark background image (profit.jpg), the
same one used by the site's "how it works" style sections. docs.css
already handles light-on-dark text for this via .how-head h2 (white)
and .how-head p (#c4c4c4) - the left column below relies on those and
only adds what docs.css doesn't cover (the aside callout, spacing,
and taming the normally-60px hero heading down to fit a narrower
column). The right-hand card has its own light cream background, so
its text stays dark navy for contrast there.
--------------------------------------------------------------------- */
.profit {
padding-top: 75px;
padding-bottom: 75px;
background-image: url(../images/profit.jpg);
background-size: cover;
}
.ledger__grid {
display: flex;
flex-wrap: wrap;
gap: 64px;
max-width: 1180px;
margin: 0 auto;
align-items: center;
}
.ledger__copy {
flex: 1 1 300px;
}
/* Tame the site's normal 60px centered/uppercase hero heading (and its
decorative before/after arrow icons, meant for a full-width centered
intro) down to something that reads well in a narrower left column,
left-aligned next to the calculator card. Only scoped to this
instance - .section-head elsewhere on the site is untouched. */
.ledger__copy .section-head {
text-align: left;
margin-bottom: 24px;
}
.ledger__copy .section-head-in {
max-width: none;
margin: 0;
}
.ledger__copy .section-head h2 {
font-size: 32px;
line-height: 38px;
text-transform: none;
margin-bottom: 16px;
}
.ledger__copy .section-head h2:before,
.ledger__copy .section-head h2:after {
content: none;
}
.ledger__copy .section-head span {
margin: 0 0 20px;
}
.ledger__copy .how-head h2 {
color: #ffffff;
}
.ledger__copy .how-head p {
color: #d6d6e2;
font-size: 16px;
line-height: 24px;
max-width: none;
margin: 0 0 16px;
}
.ledger__aside {
border-left: 3px solid #e0b47a;
padding-left: 16px;
font-size: 15px;
margin-bottom: 24px;
color: #d6d6e2;
}
.ledger__aside strong {
color: #ffffff;
font-family: 'brand-bold', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 700;
}
.ledger {
position: relative;
background: #fffef9;
border: 1px solid #eaeaea;
border-radius: 4px;
padding: 32px 28px 24px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
flex: 1 1 320px;
min-width: 320px;
}
.ledger__perf {
position: absolute;
left: 0; right: 0; top: -1px;
height: 9px;
background: radial-gradient(circle at 6px 0, transparent 5px, #fffef9 5.5px) repeat-x;
background-size: 12px 9px;
}
.ledger__title {
font-family: 'brand-bold', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 24px;
color: #2b2f5a;
text-align: center;
letter-spacing: .02em;
margin: 0 0 4px;
}
.ledger__meta {
text-align: center;
font-family: 'brand-medium', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: #9a9a9a;
margin: 0 0 20px;
padding-bottom: 14px;
border-bottom: 1px dashed #eaeaea;
}
/* Inputs stack in a single column - three fields side-by-side inside a
~320px card had no room to breathe. Each field gets full box styling
since neither docs.css nor the rest of this file style .field. */
.ledger__inputs {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 22px;
}
.field {
margin: 0;
}
.field label {
display: block;
font-family: 'brand-medium', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 500;
color: #6e6e6e;
font-size: 11px;
letter-spacing: .05em;
text-transform: uppercase;
margin-bottom: 6px;
}
.field input,
.field select {
width: 100%;
box-sizing: border-box;
font-family: 'brand-medium', 'Poppins', Helvetica, Arial, sans-serif;
font-size: 15px;
color: #2b2f5a;
background-color: #fafafa;
border: 1px solid #e1e1e1;
border-radius: 8px;
padding: 12px 14px;
}
.field input:focus,
.field select:focus {
outline: none;
border-color: #2b2f5a;
box-shadow: 0 0 0 3px rgba(43, 47, 90, .12);
}
.field select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%232b2f5a' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
}
.ledger__lines {
margin: 0;
border-top: 1px dashed #eaeaea;
padding-top: 12px;
}
.lline {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
}
.lline dt {
margin: 0;
font-family: 'brand-light', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 14px;
color: #4f4f4f;
}
.lline dt span {
display: block;
font-size: 11px;
color: #9a9a9a;
}
.lline dd {
margin: 0;
font-family: 'brand-bold', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 16px;
color: #2b2f5a;
white-space: nowrap;
}
.lline--total {
margin-top: 8px;
padding-top: 12px;
border-top: 2px solid #2b2f5a;
align-items: center;
}
.lline--total dt {
font-family: 'brand-bold', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 15px;
color: #2b2f5a;
}
.lline--total dd {
font-size: 28px;
color: #1f2244;
letter-spacing: -.01em;
}
.ledger__next {
margin: 12px 0 0;
background-color: #fef5ec;
border-radius: 4px;
padding: 9px 12px;
font-family: 'brand-medium', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 13px;
color: #7a5410;
}
.ledger__next:empty {
display: none;
}
.ledger__fine {
font-family: 'brand-light', 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 11px;
color: #9a9a9a;
line-height: 1.5;
margin: 12px 0 0;
}
@media screen and (max-width: 767px) {
.ledger__grid {
flex-direction: column;
gap: 40px;
}
.ledger__copy,
.ledger {
flex: 1 1 100%;
min-width: auto;
}
.ledger__copy .section-head h2 {
font-size: 26px;
line-height: 32px;
}
.lline dt {
font-size: 13px;
}
.lline--total dd {
font-size: 24px;
}
}