/* ============================================================
PROGTN — DESIGN ENHANCEMENTS
------------------------------------------------------------
A drop-in layer that upgrades the base marketing.css toward
a more distinctive, "world-class" B2B brand.
HOW TO USE
----------
This file is linked after marketing.css in every page's
:
Because every page already links marketing.css, the
enhancements apply site-wide.
The file is fully self-contained: it re-declares the design
tokens it depends on, so it works even if the base file
changes. Every rule is scoped to existing markup classes, so
no HTML edits are required to see the improvement.
WHAT IT ADDRESSES
-----------------
1. Typography — distinctive grotesque display face for
headings + clean sans for body (Google Fonts).
2. Color — a more confident, cohesive palette with a
defined hierarchy and accessible contrast.
3. Hero — keeps the original spinning-logo mark, with
tightened padding and a nudge to the eyebrow.
4. Imagery — richer framing of stock photos.
5. Services — a gross-to-net flow diagram in the Accounting
section, plus accordion & spacing polish.
============================================================ */
/* ------------------------------------------------------------
0. FONTS
------------------------------------------------------------
Loaded via Google Fonts. "Sora" is a characterful geometric
grotesque that reads as modern-but-serious for B2B; "Inter"
is a clean, highly-legible body face. Both are free and
self-hostable if you prefer to avoid the CDN.
------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@500;600;700;800&display=swap");
/* ------------------------------------------------------------
1. DESIGN TOKENS
------------------------------------------------------------
Re-declared here so this file is self-contained. The palette
keeps the amber identity but deepens it and adds a confident
ink/navy for text and a warm paper background, giving the
whole site a more considered, editorial feel.
------------------------------------------------------------ */
:root {
/* Brand accent — deeper, more confident amber */
--accent: #c2620a;
--accent-dark: #9a4d06;
--accent-light: #fdf0dc;
--accent-glow: rgba(194, 98, 10, 0.16);
/* Ink / text — near-black with a warm cast instead of flat gray */
--ink: #1a1d24;
--ink-soft: #2b303b;
--muted: #5b6472;
--muted-strong: #3f4754;
/* Surfaces */
--paper: #fbfaf7;
--white: #ffffff;
--border: #e7e3da;
--border-strong: #d8d2c4;
/* Typography */
--font-display:
"Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
--font-body:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
/* Elevation */
--shadow-sm: 0 2px 8px rgba(26, 29, 36, 0.06);
--shadow-md: 0 12px 32px rgba(26, 29, 36, 0.1);
--shadow-lg: 0 24px 60px rgba(26, 29, 36, 0.16);
}
/* ------------------------------------------------------------
2. BASE TYPOGRAPHY
------------------------------------------------------------ */
body {
font-family: var(--font-body);
background: var(--paper);
color: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display);
letter-spacing: -0.02em;
color: var(--ink);
}
h1 {
font-weight: 700;
letter-spacing: -0.03em;
}
/* ------------------------------------------------------------
3. HEADER / NAV
------------------------------------------------------------ */
.site-header {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--border);
}
.form-logo {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: 0.06em;
color: var(--ink);
}
.site-nav a {
color: var(--muted-strong);
font-weight: 500;
}
.site-nav a:hover {
color: var(--ink);
background: rgba(26, 29, 36, 0.05);
}
.site-nav a.active {
color: var(--accent);
}
.nav-cta {
background: var(--accent);
box-shadow: 0 4px 14px var(--accent-glow);
}
.nav-cta:hover {
background: var(--accent-dark);
}
/* ------------------------------------------------------------
4. HERO — typography only
------------------------------------------------------------
The hero visual (spinning rings + PROGTN mark) is left as the
original in marketing.css. Only the heading typeface is
upgraded here. The gross-to-net flow diagram now lives in its
own section (see section 12, .gtn-flow).
------------------------------------------------------------ */
.hero {
/* Shorten the hero — less vertical padding than the base
100px 24px. */
padding: 64px 24px;
}
/* Nudge the hero eyebrow (GROSS-TO-NET • REVENUE MANAGEMENT •
ADVISORY) up a touch so it sits closer to the top. */
.hero .form-eyebrow {
margin-top: -8px;
}
.hero h1,
.hero h2 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.03em;
}
.hero p {
color: #c6ccd6;
}
/* ------------------------------------------------------------
5. EYEBROWS & SECTION HEADINGS
------------------------------------------------------------ */
.form-eyebrow {
color: var(--accent);
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.18em;
}
.section-heading h2 {
font-weight: 700;
}
/* ------------------------------------------------------------
6. CARDS & GRIDS
------------------------------------------------------------ */
.marketing-option,
.work-scope-card,
.form-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow-sm);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}
.marketing-option:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: var(--shadow-md);
}
.marketing-option h2,
.marketing-option h3 {
font-family: var(--font-display);
font-weight: 600;
}
.option-number {
color: var(--accent);
font-family: var(--font-display);
font-weight: 700;
}
.option-link {
color: var(--accent);
font-weight: 600;
}
/* ------------------------------------------------------------
7. IMAGERY — richer stock-photo treatment
------------------------------------------------------------
Frames the existing .service-image so the generic stock
photos read as intentional brand imagery rather than
clip-art.
------------------------------------------------------------ */
.service-image {
position: relative;
border-radius: 16px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
filter: saturate(0.92) contrast(1.02);
}
/* ------------------------------------------------------------
8. CTA / BUTTONS
------------------------------------------------------------ */
.service-cta {
background: linear-gradient(135deg, var(--accent-light), #fbe7c8);
border-left: 4px solid var(--accent);
border-radius: 14px;
}
.service-button,
.form-submit {
background: var(--accent);
box-shadow: 0 6px 18px var(--accent-glow);
transition:
background 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
.service-button:hover,
.form-submit:hover {
background: var(--accent-dark);
transform: translateY(-1px);
box-shadow: 0 8px 24px var(--accent-glow);
}
/* ------------------------------------------------------------
9. INSIGHTS TABLE
------------------------------------------------------------ */
.insights-table {
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow-sm);
}
.insights-table-header {
background: #f4f1ea;
color: var(--muted-strong);
font-family: var(--font-display);
letter-spacing: 0.12em;
}
.insights-col-title {
color: var(--ink);
font-weight: 600;
}
.insights-col-link {
color: var(--accent);
font-weight: 600;
}
/* ------------------------------------------------------------
10. FOOTER
------------------------------------------------------------ */
.site-footer {
background: #14161c;
color: #aeb6c2;
border-top: 0;
}
.footer-column h3,
.footer-column h4 {
color: #f4f1ea;
font-family: var(--font-display);
}
.footer-column a {
color: #aeb6c2;
}
.footer-column a:hover {
color: #f5c98a;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: #8a93a1;
}
.footer-legal a {
color: #8a93a1;
}
.footer-legal a:hover {
color: #f5c98a;
}
/* ------------------------------------------------------------
12. GROSS-TO-NET FLOW DIAGRAM
------------------------------------------------------------
A "clarity from complexity" visual: gross revenue funneling
through deduction nodes down to net. Used inside the
Accounting & Sales Operations service section (services.html).
Styled for a light background.
------------------------------------------------------------ */
.gtn-flow-diagram {
display: flex;
align-items: center;
gap: 20px;
margin: 8px 0 28px;
padding: 28px;
border-radius: 16px;
background: var(--white);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.gtn-flow-node {
flex: 0 0 auto;
padding: 12px 24px;
border-radius: 10px;
font-family: var(--font-display);
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.16em;
text-align: center;
}
.gtn-flow-gross {
background: var(--accent-light);
border: 1px solid rgba(194, 98, 10, 0.4);
color: var(--accent-dark);
}
.gtn-flow-net {
background: var(--accent);
color: #fff;
box-shadow: 0 6px 18px var(--accent-glow);
}
/* The deduction chips in the middle */
.gtn-flow-deductions {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.gtn-flow-deductions span {
padding: 8px 16px;
border-radius: 999px;
background: #f4f1ea;
border: 1px solid var(--border);
color: var(--ink);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
}
/* ------------------------------------------------------------
13. SERVICES PAGE — accordion & spacing polish
------------------------------------------------------------
Refines the services page layout: page container, accordion
headers, content margins, headings, imagery, and CTA.
------------------------------------------------------------ */
/* Page card — more generous, better-aligned container */
.services-page {
padding: 48px 40px;
}
.services-page > h1 {
margin-bottom: 18px;
font-size: clamp(1.9rem, 4vw, 2.6rem);
}
.services-page > .intro {
margin-bottom: 40px;
font-size: 1.05rem;
line-height: 1.8;
}
/* Accordion — roomier headers with a refined hover */
.service-accordion {
border-top: 1px solid var(--border);
}
.accordion-header {
padding: 26px 12px;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.01em;
border-radius: 10px;
transition:
color 0.2s ease,
background 0.2s ease,
padding 0.2s ease;
}
.accordion-header:hover {
background: var(--accent-light);
color: var(--accent-dark);
padding-left: 18px;
}
.accordion-icon {
width: 30px;
height: 30px;
font-size: 22px;
border-radius: 50%;
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.25s ease;
}
/* Rotate the icon when the section is open */
.accordion-header[aria-expanded="true"] .accordion-icon {
transform: rotate(180deg);
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
/* Content — more generous padding and breathing room */
.service-content {
padding: 8px 12px 40px;
line-height: 1.8;
}
.service-content p {
margin-bottom: 20px;
color: var(--muted-strong);
}
/* Sub-headings — clearer hierarchy with a subtle accent rule */
.service-content h3 {
margin-top: 36px;
margin-bottom: 12px;
padding-top: 4px;
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
}
.service-content h3:first-child {
margin-top: 0;
}
/* Imagery — framed and centered */
.service-image {
max-width: 440px;
margin: 8px auto 32px;
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
}
/* CTA — more polished callout */
.service-cta {
margin-top: 40px;
padding: 32px;
background: linear-gradient(135deg, var(--accent-light), #fbe7c8);
border-left: 4px solid var(--accent);
border-radius: 14px;
}
.service-cta h3 {
margin-top: 0;
margin-bottom: 12px;
color: var(--accent-dark);
font-size: 1.15rem;
}
.service-cta p {
margin-bottom: 24px;
color: var(--ink-soft);
}
.service-button {
padding: 14px 26px;
border-radius: 9px;
font-weight: 700;
box-shadow: 0 6px 18px var(--accent-glow);
transition:
background 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
.service-button:hover {
background: var(--accent-dark);
transform: translateY(-1px);
box-shadow: 0 8px 24px var(--accent-glow);
}
/* ------------------------------------------------------------
11. RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 700px) {
.services-page {
padding: 28px 20px;
}
.accordion-header {
padding: 22px 8px;
font-size: 1rem;
}
.service-content {
padding: 4px 8px 32px;
}
.service-cta {
padding: 24px;
}
.gtn-flow-diagram {
flex-direction: column;
gap: 16px;
padding: 20px;
}
.gtn-flow-deductions {
flex-direction: column;
align-items: center;
}
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}