/* =====================================================================
TandT LLC Premium — Design System
Vanilla CSS. No frameworks. Mobile-first, min-width breakpoints.
===================================================================== */
/* ---------------------------------------------------------------------
1. Design Tokens
--------------------------------------------------------------------- */
:root {
/* Brand palette — approved TandT LLC brand colors (Aug 2026 brand sheet).
The logo's own teal (#0E7CB5 / #0E7CB5) sits close to Primary Blue and
is kept as --tandt-primary-deep for places that want the logo-exact
tone (e.g. a hover state); every other token below is the approved hex. */
--tandt-navy: #0F172A; /* Dark Navy */
--tandt-primary: #0E7CB5; /* Primary Blue */
--tandt-primary-deep: #0E7CB5; /* logo-exact teal, for hover/active states only */
--tandt-accent: #0E7CB5;
--tandt-slate: #334155;
--tandt-text: #1E293B; /* Primary Text */
--tandt-text-muted: #64748B; /* Secondary Text */
--tandt-light-bg: #F8FAFC; /* Light Gray */
--tandt-soft-blue: #E6F4FB; /* Soft Blue */
--tandt-border: #E2E8F0;
--tandt-white: #FFFFFF;
--tandt-success: #16A34A;
--tandt-warning: #F59E0B;
--tandt-error: #DC2626;
/* Typography — system stacks only: zero font-loading requests */
--tandt-font-heading: Georgia, 'Times New Roman', Times, serif;
--tandt-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--tandt-fs-base: 1.0625rem;
--tandt-fs-sm: 0.9rem;
--tandt-fs-lg: 1.25rem;
--tandt-fs-xl: 1.75rem;
--tandt-fs-2xl: 2.25rem;
--tandt-fs-3xl: 3rem;
--tandt-space-1: 0.5rem;
--tandt-space-2: 1rem;
--tandt-space-3: 1.5rem;
--tandt-space-4: 2rem;
--tandt-space-5: 3rem;
--tandt-space-6: 4.5rem;
--tandt-space-7: 6rem;
--tandt-radius-sm: 4px;
--tandt-radius-md: 8px;
--tandt-radius-lg: 16px;
--tandt-container: 1200px;
--tandt-shadow-none: none;
--tandt-shadow-sm: 0 1px 3px rgba(15, 76, 100, 0.08);
--tandt-shadow-md: 0 8px 24px rgba(15, 76, 100, 0.10);
--tandt-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.16);
--tandt-transition: 180ms ease;
}
/* Respect the visitor's OS-level motion preference sitewide — smooth
anchor scrolling and the small hover lift/transition on buttons,
cards and links are all disabled rather than just "reduced", since
none of them carry information the visitor would lose. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ---------------------------------------------------------------------
2. Reset / Base
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--tandt-font-body);
font-size: var(--tandt-fs-base);
line-height: 1.65;
color: var(--tandt-text);
background: var(--tandt-white);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tandt-primary); text-decoration: none; }
a:hover { color: var(--tandt-accent); }
h1, h2, h3, h4, h5, h6 {
font-family: var(--tandt-font-heading);
color: var(--tandt-navy);
line-height: 1.2;
margin: 0 0 var(--tandt-space-2);
font-weight: 700;
}
h1 { font-size: clamp(2rem, 1.5rem + 2vw, var(--tandt-fs-3xl)); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, var(--tandt-fs-2xl)); }
h3 { font-size: var(--tandt-fs-xl); }
p { margin: 0 0 var(--tandt-space-2); }
ul, ol { padding-left: 1.25em; }
button { font-family: inherit; }
/* Focus states — visible everywhere, never suppressed */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid var(--tandt-accent);
outline-offset: 2px;
}
/* Skip link */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--tandt-navy);
color: var(--tandt-white);
padding: 12px 20px;
z-index: 1000;
border-radius: 0 0 var(--tandt-radius-sm) 0;
}
.skip-link:focus {
left: 0;
}
/* ---------------------------------------------------------------------
3. Layout primitives
--------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--tandt-container);
margin-inline: auto;
padding-inline: var(--tandt-space-2);
}
.section { padding-block: var(--tandt-space-6); }
/* When two full-padding .section elements sit directly back to back on
the same (white) background with nothing visually marking a new
section — no color change, no divider — their padding stacks into a
gap that reads as a layout mistake rather than a deliberate break
(e.g. 72px + 72px = 144px of dead space with nothing in it). Add
these modifiers to whichever side of that boundary makes more sense
per-template, rather than changing the base .section padding
everywhere and risking every other already-tuned section spacing on
the site. */
.section--tight-top { padding-top: var(--tandt-space-3); }
.section--tight-bottom { padding-bottom: var(--tandt-space-3); }
@media (max-width: 640px) {
/* Mobile content-priority fix (Phase 12 audit): with 10-15+ sections
on major pages by this point in the project, full desktop section
padding (4.5rem top+bottom = 9rem per section) turns every page
into an extremely long scroll on a phone — exactly the "oversized
section stack" the brief warns against. Cut roughly in half rather
than to a fixed small value, so the visual rhythm between sections
is preserved, just compressed. section--tight (used for compact
headers) is intentionally excluded — it's already small. */
.section:not(.section--tight) { padding-block: var(--tandt-space-4); }
}
.section--tight { padding-block: var(--tandt-space-4); }
.section--muted { background: var(--tandt-light-bg); }
.section-head { max-width: 720px; margin-bottom: var(--tandt-space-4); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--tandt-font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tandt-accent);
margin-bottom: var(--tandt-space-1);
padding-bottom: 0.4em;
border-bottom: 2px solid var(--tandt-accent);
}
.grid { display: grid; gap: var(--tandt-space-3); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* ---------------------------------------------------------------------
4. Buttons
--------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.85em 1.6em;
border-radius: var(--tandt-radius-sm);
font-weight: 600;
font-size: 0.98rem;
border: 2px solid transparent;
cursor: pointer;
transition: background var(--tandt-transition), color var(--tandt-transition), border-color var(--tandt-transition), transform var(--tandt-transition), box-shadow var(--tandt-transition);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 76, 100, 0.18); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow: none;
}
.btn-primary { background: var(--tandt-primary); color: var(--tandt-white); }
.btn-primary:hover { background: var(--tandt-navy); color: var(--tandt-white); }
.btn-accent { background: var(--tandt-accent); color: var(--tandt-navy); }
.btn-accent:hover { background: #14889f; color: var(--tandt-white); }
.btn-outline { background: transparent; color: var(--tandt-white); border-color: currentColor; }
.btn-outline:hover { background: rgba(255,255,255,0.12); color: var(--tandt-white); }
.btn-outline-navy { background: transparent; color: var(--tandt-navy); border-color: var(--tandt-navy); }
.btn-outline-navy:hover { background: var(--tandt-navy); color: var(--tandt-white); }
.btn-sm { padding: 0.55em 1.1em; font-size: 0.88rem; }
/* Tertiary / text-link button — lowest visual weight, for a third
action beside a Primary + Secondary pair (e.g. "skip this step").
Deliberately keeps the underline text links already rely on
elsewhere, so it still reads as a link rather than a button. */
.btn-text {
background: none;
border: none;
padding: 0.4em 0;
color: var(--tandt-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.btn-text:hover { color: var(--tandt-navy); transform: none; box-shadow: none; background: none; }
/* ---------------------------------------------------------------------
5. Header / Navigation
--------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--tandt-white);
border-bottom: 1px solid var(--tandt-border);
transition: box-shadow var(--tandt-transition);
}
.site-header.is-scrolled { box-shadow: var(--tandt-shadow-sm); }
.header-inner {
display: flex;
align-items: center;
gap: var(--tandt-space-4);
padding-block: 0.85rem;
}
.site-branding { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.site-branding img.custom-logo { max-height: 46px; width: auto; }
.site-branding .site-title {
font-family: var(--tandt-font-heading);
font-size: 1.4rem;
color: var(--tandt-navy);
font-weight: 700;
margin: 0;
}
.site-branding .site-tagline {
display: block;
font-family: var(--tandt-font-body);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tandt-accent);
font-weight: 700;
}
.mobile-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-sm);
min-width: 52px;
min-height: 52px;
padding: 0.6rem;
color: var(--tandt-navy);
cursor: pointer;
margin-left: auto;
/* Tells the browser this element only ever taps/clicks — never
pans or double-tap-zooms — so it can dispatch the click
immediately instead of waiting a couple hundred ms to check
whether a second tap is coming. Without it, some mobile browsers
add a perceptible delay before *any* click is registered, which
reads as "the button doesn't respond right away". */
touch-action: manipulation;
}
@media (min-width: 1200px) {
.mobile-nav-toggle { display: none; margin-left: 0; }
}
/* Mobile menu panel: a proper floating panel below the header, not a
flex child squeezed into the header row. Positioned relative to
.site-header (position: sticky, which establishes a positioning
context the same way relative/absolute does). */
.primary-navigation {
display: none;
}
.primary-navigation.is-open {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: calc(100vh - 100%);
overflow-y: auto;
background: var(--tandt-white);
border-top: 1px solid var(--tandt-border);
border-bottom: 1px solid var(--tandt-border);
box-shadow: var(--tandt-shadow-md);
padding: var(--tandt-space-2) var(--tandt-space-2) var(--tandt-space-3);
-webkit-overflow-scrolling: touch;
}
@media (min-width: 1200px) {
.primary-navigation {
display: block;
position: static;
max-height: none;
overflow: visible;
background: none;
border: none;
box-shadow: none;
padding: 0;
}
}
/* A translucent backdrop behind the open mobile panel, and a body
scroll lock while it's open (both toggled by main.js), so the open
menu reads as a deliberate overlay rather than content that just
pushed the page down. */
body.has-mobile-nav-open { overflow: hidden; }
body.has-mobile-nav-open::after {
content: "";
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.4);
z-index: 90;
}
@media (min-width: 1200px) {
body.has-mobile-nav-open::after { display: none; }
}
.primary-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
@media (min-width: 1200px) {
.primary-menu { flex-direction: row; align-items: center; gap: 0.4rem; }
.primary-menu > li { flex-shrink: 0; }
}
.primary-menu li { position: relative; }
.primary-menu li.has-dropdown {
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
@media (min-width: 1200px) {
/* At desktop widths the submenu is pulled out of normal flow via
position: absolute (further down), so it no longer needs to wrap
onto its own line the way it does in the mobile accordion — but
without turning wrap off here too, a tight-but-still->=1200px
window could still squeeze the caret button onto a second line
underneath its label instead of staying inline next to it, which
also throws off the spacing of every item around it. */
.primary-menu li.has-dropdown { flex-wrap: nowrap; }
/* One shared, rounded hover surface spanning both the label and the
caret together, rather than the label getting its own underline
and the caret getting its own separate background box right next
to it — two disconnected hover treatments on what reads visually
as a single item is what "no premium hover" was describing. */
.primary-menu li.has-dropdown {
border-radius: var(--tandt-radius-sm);
transition: background var(--tandt-transition);
}
.primary-menu li.has-dropdown:hover,
.primary-menu li.has-dropdown:focus-within {
background: var(--tandt-light-bg);
}
.primary-menu li.has-dropdown:hover .nav-link,
.primary-menu li.has-dropdown:hover .dropdown-toggle,
.primary-menu li.has-dropdown:focus-within .nav-link,
.primary-menu li.has-dropdown:focus-within .dropdown-toggle {
color: var(--tandt-primary);
}
}
.primary-menu .nav-link {
display: flex;
align-items: center;
flex: 1;
gap: 0.35rem;
padding: 0.85rem 0.95rem;
color: var(--tandt-navy);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.01em;
border-radius: var(--tandt-radius-sm);
position: relative;
white-space: nowrap;
touch-action: manipulation;
}
@media (min-width: 1200px) {
.primary-menu > li:not(.has-dropdown) > .nav-link::after {
content: "";
position: absolute;
left: 0.95rem;
right: 0.95rem;
bottom: 0.5rem;
height: 2px;
background: var(--tandt-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--tandt-transition);
}
.primary-menu > li:not(.has-dropdown) > .nav-link:hover::after,
.primary-menu > li.current-menu-item:not(.has-dropdown) > .nav-link::after {
transform: scaleX(1);
}
}
.primary-menu .nav-link:hover,
.primary-menu li.current-menu-item > .nav-link { color: var(--tandt-primary); }
@media (max-width: 1199px) {
.primary-menu .nav-link:hover,
.primary-menu li.current-menu-item > .nav-link { background: var(--tandt-light-bg); }
}
/* The submenu open/close button — separate from the link itself (see
inc/navigation.php), so tapping it never navigates, only toggles. */
.dropdown-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 3rem;
background: none;
border: none;
border-radius: var(--tandt-radius-sm);
color: var(--tandt-navy);
cursor: pointer;
touch-action: manipulation;
}
@media (min-width: 1200px) {
/* 3rem was sized for a comfortable mobile touch target, but the
icon sits centered inside that width, so on a mouse-driven desktop
row it reads as a large gap of empty space between the label and
the actual chevron glyph rather than a tightly-attached caret.
Tightened here specifically, since desktop doesn't need the extra
touch-target padding mobile does. */
.dropdown-toggle { width: 1.85rem; }
}
.dropdown-toggle:focus-visible { color: var(--tandt-primary); background: var(--tandt-light-bg); }
.dropdown-toggle svg { transition: transform var(--tandt-transition); pointer-events: none; }
.has-dropdown.is-open > .dropdown-toggle svg,
.has-dropdown:focus-within > .dropdown-toggle svg { transform: rotate(180deg); }
/* Submenu: a collapsible accordion panel on mobile (closed by default,
opened only via .is-open on its parent ), a hover/focus flyout
on desktop. Previously this had no mobile-specific display rule at
all, so every submenu sat permanently expanded under its parent
with no way to collapse it. */
.primary-menu .sub-menu {
display: none;
list-style: none;
margin: 0;
padding: 0.2rem 0 0.4rem 1rem;
background: var(--tandt-white);
width: 100%;
}
.primary-menu li.has-dropdown.is-open > .sub-menu { display: block; }
@media (min-width: 1200px) {
.primary-menu .sub-menu {
display: block;
position: absolute;
left: 0;
top: 100%;
min-width: 280px;
/* A regular (non-mega) submenu, like Resources', can hold real
resource titles that run 50-70+ characters. With .nav-link's
white-space: nowrap (needed on the top-level bar so labels like
"Talk to an Expert" never wrap) inherited by these nested links
too, long titles were refusing to wrap and spilling straight out
past this box's edge instead of staying inside it — the "text
out" bleed onto the hero background. Overridden back to
white-space: normal below, and given a viewport-safe max-width
so long titles wrap onto 2 lines within a contained, readable
box instead of overflowing or growing arbitrarily wide. */
max-width: min(400px, calc(100vw - 2.5rem));
padding: 0.4rem;
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-md);
box-shadow: var(--tandt-shadow-md);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity var(--tandt-transition), transform var(--tandt-transition), visibility var(--tandt-transition);
}
.primary-menu li.has-dropdown:hover > .sub-menu,
.primary-menu li.has-dropdown:focus-within > .sub-menu,
.primary-menu li.has-dropdown.is-open > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
.primary-menu .sub-menu .nav-link {
padding: 0.6rem 0.85rem;
font-weight: 500;
white-space: normal;
line-height: 1.4;
}
/* ---------------------------------------------------------------------
5b. Services mega-menu (see inc/navigation.php — TandT_Nav_Walker)
--------------------------------------------------------------------- */
/* Dimmed backdrop behind the open mega-menu, toggled via a body class
from main.js (initMegaMenuBackdrop). Sits above page content but
below the header/mega-menu itself, so the flyout reads as a distinct
floating surface instead of a plain dropdown competing with whatever
is behind it. */
.mega-menu-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.35);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 90;
transition: opacity var(--tandt-transition), visibility var(--tandt-transition);
}
body.has-mega-menu-open .mega-menu-backdrop {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (min-width: 1200px) {
/* Escapes the "Services" 's own positioning context (removed via
.has-mega-menu below) so this can be centered under the whole
header instead of anchored to wherever "Services" happens to sit
in the row. Anchoring to the trigger word directly is fine for a
narrow dropdown, but this panel is up to 820px wide — with "Home"
now the first nav item, "Services" no longer starts near the left
edge, so left:0-from-the-trigger was pushing a wide panel far
enough right that it ran off the edge of the viewport on any
reasonably common laptop/desktop width, exactly the cut-off
"Featured" card in the screenshot this was reported from. */
.has-mega-menu { position: static; }
.primary-menu .sub-menu.mega-menu {
left: 50%;
right: auto;
transform: translateX(-50%) translateY(6px);
min-width: 700px;
max-width: min(820px, calc(100vw - 2.5rem));
width: max-content;
padding: var(--tandt-space-3) var(--tandt-space-4) var(--tandt-space-4);
border-radius: var(--tandt-radius-lg);
border: 1px solid var(--tandt-border);
box-shadow: var(--tandt-shadow-lg);
z-index: 95;
}
.primary-menu li.has-dropdown:hover > .sub-menu.mega-menu,
.primary-menu li.has-dropdown:focus-within > .sub-menu.mega-menu,
.primary-menu li.has-dropdown.is-open > .sub-menu.mega-menu {
transform: translateX(-50%) translateY(0);
}
.mega-menu__body {
display: grid !important;
grid-template-columns: 1fr 250px;
gap: var(--tandt-space-4);
align-items: stretch;
}
.mega-menu__columns {
grid-column: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--tandt-space-4) var(--tandt-space-4);
list-style: none;
margin: 0;
padding: 0;
}
.mega-menu__featured {
grid-column: 2;
align-self: stretch;
}
}
/* Slim header bar across the top of the panel: replaces what used to
be a whole left-hand column of marketing copy (icon, kicker,
sentence, link) just to say "Services" and offer one link. A single
row does the same job without eating a quarter of the panel's width. */
.mega-menu__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tandt-space-2);
padding-bottom: var(--tandt-space-2);
margin-bottom: var(--tandt-space-3);
border-bottom: 1px solid var(--tandt-border);
}
.mega-menu__header-title {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tandt-text-muted);
}
.mega-menu__view-all {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-size: 0.86rem;
font-weight: 700;
color: var(--tandt-primary);
}
.mega-menu__view-all svg { width: 14px; height: 14px; transition: transform var(--tandt-transition); }
.mega-menu__view-all:hover { color: var(--tandt-navy); }
.mega-menu__view-all:hover svg { transform: translateX(3px); }
.mega-menu__columns { list-style: none; margin: 0; padding: 0; }
.mega-menu__column { display: flex; flex-direction: column; gap: 0.3rem; }
.mega-menu__column-title {
display: flex;
align-items: center;
gap: 0.55rem;
font-family: var(--tandt-font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--tandt-navy);
padding: 0.4rem 0.5rem;
/* Deliberately no :hover state and no cursor: pointer here — this is
a plain grouping label, not a link, and giving it hover styling
would visually promise a click that doesn't do anything. */
cursor: default;
}
.mega-menu__column-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 26px;
height: 26px;
border-radius: var(--tandt-radius-sm);
background: var(--tandt-soft-blue);
color: var(--tandt-primary);
}
.mega-menu__column-icon svg { width: 14px; height: 14px; }
.mega-menu__column-title-text { line-height: 1.2; }
.mega-menu__sublist {
list-style: none;
margin: 0;
padding: 0 0 0 0.5rem;
}
.mega-menu__sublist .nav-link {
display: block;
padding: 0.42rem 0.5rem;
font-weight: 500;
font-size: 0.88rem;
line-height: 1.35;
border-radius: var(--tandt-radius-sm);
/* Same fix as the regular .sub-menu links above: these titles (e.g.
"Government Technology & Systems Engineering Support") are long
enough to need wrapping within their column instead of inheriting
nowrap from the base .nav-link rule and overflowing it. */
white-space: normal;
}
.mega-menu__featured {
display: flex;
flex-direction: column;
gap: 0.55rem;
background: linear-gradient(155deg, var(--tandt-navy) 0%, #16233f 100%);
color: var(--tandt-white);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-3);
height: 100%;
box-shadow: var(--tandt-shadow-sm);
transition: transform var(--tandt-transition), box-shadow var(--tandt-transition);
}
a.mega-menu__featured:hover {
transform: translateY(-3px);
box-shadow: var(--tandt-shadow-md);
}
.mega-menu__featured-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--tandt-radius-sm);
background: rgba(255, 255, 255, 0.12);
color: var(--tandt-white);
margin-bottom: 0.3rem;
}
.mega-menu__featured-icon svg { width: 20px; height: 20px; }
.mega-menu__featured-kicker {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #7DD3FC;
}
.mega-menu__featured-heading { color: var(--tandt-white); font-size: 1.22rem; margin: 0; font-family: var(--tandt-font-heading); }
.mega-menu__featured-text { color: #CBD5E1; font-size: 0.88rem; margin: 0; line-height: 1.55; }
.mega-menu__featured-link {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-weight: 700;
font-size: 0.9rem;
color: var(--tandt-white);
margin-top: auto;
padding-top: 0.7rem;
}
.mega-menu__featured-link svg { width: 14px; height: 14px; transition: transform var(--tandt-transition); }
a.mega-menu__featured:hover .mega-menu__featured-link { color: #7DD3FC; }
a.mega-menu__featured:hover .mega-menu__featured-link svg { transform: translateX(3px); }
/* Mobile and tablet (below the 1200px nav breakpoint): the mega-menu
collapses into the same accordion panel as any other dropdown
(opened via the Services toggle button, or by tapping the "Services"
label itself — see initDropdowns() in main.js). Columns stack
full-width, and the Featured/CMMC promo card is dropped entirely —
it's a nice-to-have on a wide desktop flyout, but on a phone or
tablet accordion it's just extra scrolling before someone reaches
the actual service links they came for. */
@media (max-width: 1199px) {
.mega-menu__body { display: flex; flex-direction: column; gap: var(--tandt-space-2); padding: 0.2rem 1rem 0.6rem 1rem; }
.mega-menu__header { padding: 0 0 var(--tandt-space-2); margin: 0 0 var(--tandt-space-2); }
.mega-menu__columns { display: flex; flex-direction: column; gap: var(--tandt-space-2); }
.mega-menu__sublist { padding-left: 2.15rem; }
.mega-menu__featured { display: none; }
}
.primary-navigation__cta { margin-top: var(--tandt-space-2); padding-top: var(--tandt-space-2); border-top: 1px solid var(--tandt-border); }
.primary-navigation__cta .btn { display: block; text-align: center; }
@media (min-width: 1200px) {
.primary-navigation__cta { display: none; }
}
.header-cta { display: none; }
@media (min-width: 1200px) {
.header-cta {
display: inline-flex;
margin-left: auto;
flex-shrink: 0;
}
/* Without this, a tight header row (logo + 7 nav items + this
button) can shrink the button below its natural width, wrapping
"Talk to an Expert" onto two lines — a primary CTA button should
never do that regardless of how tight things get; the nav is what
should give, not this. */
.header-cta .btn { white-space: nowrap; }
}
/* ---------------------------------------------------------------------
6. Footer
--------------------------------------------------------------------- */
.site-footer {
background: var(--tandt-navy);
color: #CFE3EC;
padding-block: var(--tandt-space-6) var(--tandt-space-3);
}
.footer-grid {
display: grid;
gap: var(--tandt-space-4);
grid-template-columns: 1fr;
margin-bottom: var(--tandt-space-4);
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: var(--tandt-space-3); } }
.site-footer h4 {
color: var(--tandt-white);
font-family: var(--tandt-font-body);
font-size: 0.85rem;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--tandt-space-2);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { color: #CFE3EC; }
.site-footer a:hover { color: var(--tandt-accent); }
.footer-brand__logo-link { display: inline-block; max-width: 100%; line-height: 0; margin-bottom: var(--tandt-space-2); }
.footer-brand img {
display: block;
max-height: 40px;
width: auto;
height: auto;
max-width: 200px;
margin-bottom: 0;
filter: brightness(0) invert(1);
}
@media (max-width: 480px) {
.footer-brand img { max-height: 34px; max-width: 160px; }
}
.footer-brand__tagline {
color: #9FBCC8;
font-size: 0.92rem;
line-height: 1.6;
max-width: 32ch;
}
.footer-contact__list { margin-bottom: var(--tandt-space-2); }
.footer-contact__address { color: #9FBCC8; font-size: 0.92rem; }
.footer-contact__cta { color: var(--tandt-white); border-color: rgba(255,255,255,0.35); }
.footer-contact__cta:hover { background: var(--tandt-white); color: var(--tandt-navy); border-color: var(--tandt-white); }
.footer-social { display: flex; gap: 0.65rem; margin-top: var(--tandt-space-3); }
.footer-social a {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 50%;
color: #CFE3EC;
background: rgba(255,255,255,0.04);
transition: background var(--tandt-transition), border-color var(--tandt-transition), color var(--tandt-transition), transform var(--tandt-transition);
}
.footer-social a:hover,
.footer-social a:focus-visible {
background: var(--tandt-accent);
border-color: var(--tandt-accent);
color: var(--tandt-navy);
transform: translateY(-2px);
}
.footer-social a svg { display: block; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: var(--tandt-space-2);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--tandt-space-2);
font-size: 0.85rem;
color: #9FBCC8;
}
.footer-bottom a { color: #9FBCC8; }
/* ---------------------------------------------------------------------
7. Hero
--------------------------------------------------------------------- */
.hero {
position: relative;
background: linear-gradient(180deg, var(--tandt-light-bg) 0%, var(--tandt-white) 100%);
padding-block: var(--tandt-space-6) var(--tandt-space-5);
overflow: hidden;
}
.hero-home { padding-block: var(--tandt-space-7) var(--tandt-space-6); }
@media (max-width: 640px) {
.hero { padding-block: var(--tandt-space-4) var(--tandt-space-3); }
.hero-home { padding-block: var(--tandt-space-5) var(--tandt-space-4); }
}
.hero-inner { max-width: 760px; }
.hero-inner--wide { max-width: 900px; }
.hero h1 { margin-bottom: var(--tandt-space-2); }
.hero p.hero-sub { font-size: var(--tandt-fs-lg); color: var(--tandt-slate); margin-bottom: var(--tandt-space-3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-media {
margin-top: var(--tandt-space-4);
border-radius: var(--tandt-radius-md);
overflow: hidden;
box-shadow: var(--tandt-shadow-md);
}
.hero-media img { width: 100%; }
.hero--academy {
background: linear-gradient(135deg, var(--tandt-navy) 0%, var(--tandt-primary) 100%);
color: var(--tandt-white);
}
.hero--academy h1, .hero--academy .eyebrow { color: var(--tandt-white); }
.hero--academy .eyebrow { color: var(--tandt-accent); }
.hero--academy p.hero-sub { color: #CFE3EC; }
/* Trust Banner — mandatory highlighted statement directly below the
homepage hero (e.g., "The Independence Rule..."). */
.trust-banner {
background: var(--tandt-navy);
color: var(--tandt-white);
padding: var(--tandt-space-4) var(--tandt-space-4);
text-align: center;
position: relative;
}
.trust-banner::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--tandt-accent), var(--tandt-primary));
}
.trust-banner p {
margin: 0;
font-family: var(--tandt-font-heading);
font-style: italic;
font-size: 1.3rem;
line-height: 1.55;
max-width: 880px;
margin-inline: auto;
position: relative;
}
.trust-banner p::before { content: "\201C"; }
.trust-banner p::after { content: "\201D"; }
@media (min-width: 768px) { .trust-banner p { font-size: 1.5rem; } }
/* Highlight Box — reusable callout for compliance/standards/geography
facts (e.g., the Gov Tech pillar's NAICS/standards/footprint block).
Editable per-page via the "Highlight Box" meta box. */
.highlight-box {
background: var(--tandt-light-bg);
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-3);
margin-block: var(--tandt-space-4);
}
.highlight-box h3 { font-size: 1.1rem; margin-bottom: var(--tandt-space-2); }
.highlight-box-grid { display: grid; gap: var(--tandt-space-2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .highlight-box-grid { grid-template-columns: repeat(2, 1fr); } }
.highlight-box-item dt {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--tandt-accent);
font-weight: 700;
margin-bottom: 0.2rem;
}
.highlight-box-item dd { margin: 0; color: var(--tandt-text); font-weight: 600; }
/* ---------------------------------------------------------------------
8. Cards
--------------------------------------------------------------------- */
.card {
background: var(--tandt-white);
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-3);
transition: box-shadow var(--tandt-transition), transform var(--tandt-transition), border-color var(--tandt-transition);
height: 100%;
display: flex;
flex-direction: column;
box-shadow: var(--tandt-shadow-sm);
}
.card:hover { box-shadow: var(--tandt-shadow-md); transform: translateY(-3px); border-color: var(--tandt-accent); }
.card-icon {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--tandt-light-bg);
color: var(--tandt-primary);
border-radius: var(--tandt-radius-md);
margin-bottom: var(--tandt-space-2);
box-shadow: inset 0 0 0 1px rgba(20, 108, 148, 0.12);
transition: background var(--tandt-transition), color var(--tandt-transition);
}
.card:hover .card-icon { background: var(--tandt-primary); color: var(--tandt-white); }
.card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.card p { color: var(--tandt-text-muted); flex-grow: 1; }
.card-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; margin-top: var(--tandt-space-1); }
.card-media img { border-radius: var(--tandt-radius-md) var(--tandt-radius-md) 0 0; margin: calc(-1 * var(--tandt-space-3)) calc(-1 * var(--tandt-space-3)) var(--tandt-space-2); width: calc(100% + var(--tandt-space-3) * 2); }
/* Blog cards: designed cover (with a fallback monogram when no photo is
set yet), category badge, and a padded body — replaces the old bare
card so the archive grid never looks unfinished pre-photography. */
.blog-card { padding: 0; overflow: hidden; }
.blog-card__cover {
display: block;
position: relative;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--tandt-navy) 0%, var(--tandt-primary) 130%);
overflow: hidden;
}
.blog-card__cover::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 22px);
}
.blog-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__cover-mark {
position: absolute;
right: 0.9rem;
bottom: 0.6rem;
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: 4.5rem;
line-height: 1;
color: rgba(255,255,255,0.16);
}
.blog-card__body { padding: var(--tandt-space-3); display: flex; flex-direction: column; flex-grow: 1; }
.blog-card__meta { flex-wrap: wrap; row-gap: 0.35rem; margin-bottom: 0.6rem; }
.blog-card__badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
border-radius: 999px;
background: rgba(14, 124, 181, 0.1);
color: var(--tandt-primary);
font-weight: 700;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.blog-card h3 { font-size: 1.15rem; line-height: 1.35; }
.blog-card--featured { grid-column: 1 / -1; }
@media (min-width: 768px) {
.blog-card--featured { display: grid; grid-template-columns: 1.1fr 1fr; }
.blog-card--featured .blog-card__cover { aspect-ratio: auto; height: 100%; }
.blog-card--featured .blog-card__body { justify-content: center; }
.blog-card--featured h3 { font-size: 1.6rem; }
.blog-card--featured .blog-card__cover-mark { font-size: 7rem; }
}
/* Pricing cards */
.pricing-card {
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-4);
display: flex;
flex-direction: column;
background: var(--tandt-white);
}
.pricing-card--featured {
border-color: var(--tandt-accent);
box-shadow: var(--tandt-shadow-md);
position: relative;
}
.pricing-badge {
position: absolute;
top: -14px; left: var(--tandt-space-3);
background: var(--tandt-accent);
color: var(--tandt-navy);
font-size: 0.75rem;
font-weight: 700;
padding: 0.3rem 0.75rem;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pricing-price { font-family: var(--tandt-font-heading); font-size: var(--tandt-fs-2xl); color: var(--tandt-navy); margin: 0.5rem 0; }
.pricing-cadence { color: var(--tandt-text-muted); font-size: 0.85rem; margin-bottom: var(--tandt-space-2); }
.pricing-features { list-style: none; padding: 0; margin: 0 0 var(--tandt-space-3); flex-grow: 1; }
.pricing-features li { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.6rem; color: var(--tandt-text); }
.pricing-features li svg { color: var(--tandt-success); flex-shrink: 0; margin-top: 0.2em; }
/* ---------------------------------------------------------------------
9. CTA band
--------------------------------------------------------------------- */
.cta-band {
background: var(--tandt-navy);
color: var(--tandt-white);
padding: var(--tandt-space-5) var(--tandt-space-4);
border-radius: var(--tandt-radius-md);
box-shadow: var(--tandt-shadow-md);
}
.cta-band-inner { display: flex; flex-direction: column; gap: var(--tandt-space-3); align-items: flex-start; }
@media (min-width: 768px) {
.cta-band-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--tandt-space-4); }
}
.cta-band h2 { color: var(--tandt-white); margin-bottom: 0.35rem; }
.cta-band p { color: #CFE3EC; margin-bottom: 0; }
.cta-band .btn { flex-shrink: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* ---------------------------------------------------------------------
Homepage "Scoping Call" auto-embed (inc/forms/auto-embed.php) —
premium split layout: intro copy beside the form card, replacing
the plain heading-over-form box used on other pages.
--------------------------------------------------------------------- */
.tandt-scoping-cta { background: var(--tandt-soft-blue); }
.tandt-scoping-cta__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-5);
align-items: center;
}
@media (min-width: 900px) {
.tandt-scoping-cta__grid { grid-template-columns: 0.85fr 1.15fr; }
}
.tandt-scoping-cta__intro h2 { margin: 0.3em 0 0.6em; }
.tandt-scoping-cta__intro p { color: var(--tandt-text-muted); margin: 0; }
.tandt-scoping-cta__form .tandt-forms-card { max-width: none; }
/* ---------------------------------------------------------------------
10. Breadcrumbs
--------------------------------------------------------------------- */
.breadcrumbs { padding-block: var(--tandt-space-2); font-size: 0.85rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0; gap: 0.35rem; }
.breadcrumbs li { display: flex; align-items: center; gap: 0.35rem; color: var(--tandt-text-muted); }
.breadcrumb-sep { margin-left: 0.35rem; }
/* ---------------------------------------------------------------------
11. Blog
--------------------------------------------------------------------- */
.entry-header { max-width: 760px; }
.entry-header .eyebrow a { color: inherit; }
.entry-header h1 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.85rem); line-height: 1.15; margin: 0.4em 0 0.7em; }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; font-size: 0.86rem; color: var(--tandt-text-muted); margin-bottom: var(--tandt-space-2); }
.entry-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.entry-meta svg { opacity: 0.7; flex: none; }
/* The "Quick Answer" callout — see template-parts/blog/content-single.php.
Deliberately plain and text-forward rather than boxed-and-shadowed
like a promo card: it's meant to read as part of the article itself
(an extractable summary), not as a separate UI widget competing with
the actual content. */
.tandt-quick-answer {
border-left: 3px solid var(--tandt-primary);
background: var(--tandt-light-bg);
padding: 1rem 1.25rem;
margin: var(--tandt-space-2) 0 var(--tandt-space-3);
border-radius: 0 var(--tandt-radius-sm) var(--tandt-radius-sm) 0;
}
.tandt-quick-answer__label {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tandt-primary);
margin-bottom: 0.4rem;
}
.tandt-quick-answer p {
margin: 0;
font-size: 1.02rem;
line-height: 1.6;
color: var(--tandt-navy);
}
.entry-meta__author { gap: 0.55rem !important; }
.entry-meta__author img { border-radius: 50%; box-shadow: 0 0 0 2px var(--tandt-white), 0 0 0 3px var(--tandt-border); }
.entry-meta__author-name { font-weight: 700; color: var(--tandt-navy); }
.entry-content { max-width: 760px; font-size: 1.06rem; line-height: 1.75; }
.entry-content > * + * { margin-top: var(--tandt-space-3); }
.entry-content > p:first-of-type { font-size: 1.16rem; color: var(--tandt-navy); }
.entry-content h2 {
margin-top: var(--tandt-space-5);
padding-top: var(--tandt-space-3);
border-top: 1px solid var(--tandt-border);
}
.entry-content h3 { margin-top: var(--tandt-space-4); }
.entry-content img { border-radius: var(--tandt-radius-md); }
.entry-content blockquote {
border-left: 3px solid var(--tandt-accent);
margin: var(--tandt-space-3) 0;
padding: 0.2rem 0 0.2rem var(--tandt-space-3);
font-size: 1.12rem;
font-style: italic;
color: var(--tandt-navy);
}
.entry-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--tandt-space-3); max-width: 760px; }
.entry-tags a {
background: var(--tandt-white);
border: 1px solid var(--tandt-border);
padding: 0.3rem 0.85rem;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
color: var(--tandt-primary);
transition: background var(--tandt-transition), border-color var(--tandt-transition);
}
.entry-tags a:hover { background: rgba(14, 124, 181, 0.08); border-color: var(--tandt-accent); }
/* Single-post two-column layout: reading column + a sidebar that
actually earns the space instead of sitting empty next to a
760px-capped article. Stacks to one column below 1024px, sidebar
after the article. */
.tandt-two-col { display: block; }
@media (min-width: 1024px) {
.tandt-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--tandt-space-5); align-items: start; }
.tandt-two-col__sidebar { position: sticky; top: var(--tandt-space-3); }
}
.tandt-sidebar { display: flex; flex-direction: column; gap: var(--tandt-space-3); }
.tandt-sidebar__card {
background: var(--tandt-white);
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-3);
}
.tandt-sidebar__label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--tandt-text-muted);
margin: 0 0 0.5rem;
}
.tandt-sidebar__author { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.tandt-sidebar__author img { border-radius: 50%; box-shadow: 0 0 0 3px var(--tandt-light-bg), 0 0 0 4px var(--tandt-border); }
.tandt-sidebar__author > div { flex: 1; min-width: 0; }
.tandt-sidebar__name { font-family: var(--tandt-font-heading); font-weight: 700; margin: 0; }
.tandt-sidebar__bio { width: 100%; margin: 0.6rem 0 0; font-size: 0.86rem; color: var(--tandt-text-muted); }
.tandt-sidebar__cta { background: var(--tandt-navy); border-color: var(--tandt-navy); }
.tandt-sidebar__cta-title { font-family: var(--tandt-font-heading); font-weight: 700; color: #fff; margin: 0 0 0.4rem; font-size: 1.02rem; }
.tandt-sidebar__cta-text { color: #CBD5E1; font-size: 0.86rem; margin: 0 0 var(--tandt-space-2); }
.tandt-sidebar__cta-btn { display: block; text-align: center; }
.tandt-sidebar__list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tandt-sidebar__list li { padding: 0.7rem 0; border-top: 1px solid var(--tandt-border); }
.tandt-sidebar__list li:first-child { border-top: none; padding-top: 0; }
.tandt-sidebar__list li a { display: block; font-weight: 600; font-size: 0.92rem; line-height: 1.4; color: var(--tandt-navy); }
.tandt-sidebar__list li a:hover { color: var(--tandt-accent); }
.tandt-sidebar__list li span { display: block; margin-top: 0.2rem; font-size: 0.76rem; color: var(--tandt-text-muted); }
/* Tables inside editor content (e.g., comparison tables) */
.entry-content table,
.wp-block-table table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-block: var(--tandt-space-3);
font-size: 0.95rem;
border-radius: var(--tandt-radius-md);
overflow: hidden;
box-shadow: var(--tandt-shadow-sm);
}
.entry-content table caption { text-align: left; margin-bottom: 0.5rem; color: var(--tandt-text-muted); }
.entry-content th, .entry-content td,
.wp-block-table th, .wp-block-table td {
border: 1px solid var(--tandt-border);
border-top: none;
border-left: none;
padding: 0.85rem 1.1rem;
text-align: left;
vertical-align: top;
}
.entry-content td:last-child, .entry-content th:last-child,
.wp-block-table td:last-child, .wp-block-table th:last-child { border-right: none; }
.entry-content thead th, .wp-block-table thead th {
background: var(--tandt-navy);
color: var(--tandt-white);
font-family: var(--tandt-font-heading);
font-weight: 700;
border-color: var(--tandt-navy);
}
.entry-content tbody tr:last-child td { border-bottom: none; }
.entry-content tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even) { background: var(--tandt-light-bg); }
@media (max-width: 640px) {
.entry-content table, .wp-block-table table { display: block; overflow-x: auto; white-space: nowrap; }
}
/* ---------------------------------------------------------------------
Blog & Content Tools (Part 10): table of contents, author box,
persona-aware Smart CTA. Each is independently toggleable from
Blog Tools settings, so none of this assumes the others are present.
--------------------------------------------------------------------- */
.tandt-blog-toc {
max-width: 760px;
margin: var(--tandt-space-3) 0;
padding: var(--tandt-space-3);
background: var(--tandt-light-bg);
border: 1px solid var(--tandt-border);
border-left: 3px solid var(--tandt-accent);
border-radius: var(--tandt-radius-md);
}
.tandt-blog-toc__title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tandt-navy);
margin: 0 0 0.6rem;
}
.tandt-blog-toc__title svg { color: var(--tandt-accent); }
.tandt-blog-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.tandt-blog-toc__item { counter-increment: toc; font-size: 0.92rem; }
.tandt-blog-toc__item::before { content: counter(toc) "."; color: var(--tandt-accent); font-weight: 600; margin-right: 0.4em; }
.tandt-blog-toc__item--h3 { margin-left: 1.4rem; font-size: 0.87rem; }
.tandt-blog-toc a { color: var(--tandt-navy); }
.tandt-blog-toc a:hover { color: var(--tandt-accent); }
.tandt-blog-smart-cta {
max-width: 760px;
margin: var(--tandt-space-4) 0;
padding: var(--tandt-space-3) var(--tandt-space-4);
background: var(--tandt-navy);
border-radius: var(--tandt-radius-md);
text-align: left;
}
.tandt-blog-smart-cta__eyebrow {
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--tandt-accent);
margin: 0 0 0.4rem;
}
.tandt-blog-smart-cta__text { color: #E2E8F0; margin: 0 0 var(--tandt-space-2); font-size: 1.02rem; }
.tandt-blog-smart-cta .btn { display: inline-block; }
/* Related-service internal link — deliberately lighter-weight than the
Smart CTA above (a plain bordered strip, not a dark filled block):
this shows on every matched post regardless of visitor, so it needs
to read as a normal, expected part of the article rather than a
promotional interruption competing with the persona CTA. */
.tandt-blog-related-service {
max-width: 760px;
margin: var(--tandt-space-3) 0;
padding: var(--tandt-space-2) var(--tandt-space-3);
border: 1px solid var(--tandt-border);
border-left: 3px solid var(--tandt-primary);
border-radius: 0 var(--tandt-radius-sm) var(--tandt-radius-sm) 0;
display: flex;
align-items: center;
gap: 0.85rem;
}
.tandt-blog-related-service__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--tandt-soft-blue);
color: var(--tandt-primary);
}
.tandt-blog-related-service__icon svg { width: 14px; height: 14px; }
.tandt-blog-related-service__eyebrow {
margin: 0 0 0.15rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tandt-text-muted);
}
.tandt-blog-related-service__link {
font-weight: 700;
font-size: 1rem;
color: var(--tandt-navy);
}
.tandt-blog-related-service__link:hover { color: var(--tandt-primary); }
.tandt-blog-author-box {
max-width: 760px;
display: flex;
gap: var(--tandt-space-3);
align-items: flex-start;
margin: var(--tandt-space-4) 0;
padding: var(--tandt-space-3);
background: var(--tandt-light-bg);
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-md);
}
.tandt-blog-author-box img { border-radius: 50%; flex: none; box-shadow: 0 0 0 3px var(--tandt-white), 0 0 0 4px var(--tandt-border); }
.tandt-blog-author-box__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tandt-text-muted); margin: 0 0 0.15rem; }
.tandt-blog-author-box__name { font-family: var(--tandt-font-heading); font-weight: 700; margin: 0 0 0.4rem; }
.tandt-blog-author-box__bio { color: var(--tandt-text-muted); font-size: 0.92rem; margin: 0 0 0.4rem; }
.tandt-blog-author-box__link { font-size: 0.85rem; font-weight: 600; }
@media (max-width: 480px) {
.tandt-blog-author-box { flex-direction: column; }
}
.pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: var(--tandt-space-4); }
.pagination a, .pagination span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; height: 40px;
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-sm);
color: var(--tandt-navy);
}
.pagination .current { background: var(--tandt-navy); color: var(--tandt-white); border-color: var(--tandt-navy); }
/* ---------------------------------------------------------------------
12. Forms (native WP: search, contact fallback, comment form)
--------------------------------------------------------------------- */
.search-form { display: flex; gap: 0.5rem; }
.search-form input[type="search"],
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select {
width: 100%;
padding: 0.75em 1em;
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-sm);
font-family: inherit;
font-size: 1rem;
background: var(--tandt-white);
}
.contact-fallback { background: var(--tandt-light-bg); border-radius: var(--tandt-radius-md); padding: var(--tandt-space-3); }
.contact-fallback-list { list-style: none; padding: 0; font-size: 1.15rem; font-weight: 600; }
/* ---------------------------------------------------------------------
13. Utility
--------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-muted { color: var(--tandt-text-muted); }
.mt-0 { margin-top: 0; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
.demo-copy-notice {
display: inline-block;
background: #FFF6DA;
color: #7A5B00;
border: 1px solid #F0DDA0;
border-radius: var(--tandt-radius-sm);
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
margin-bottom: var(--tandt-space-2);
}
.tandt-legal-notice {
display: block;
background: #FFF6DA;
color: #7A5B00;
border: 1px solid #F0DDA0;
border-left: 4px solid #D9A400;
border-radius: var(--tandt-radius-sm);
padding: 0.9rem 1.1rem;
font-size: 0.92rem;
margin: 0 0 var(--tandt-space-5);
}
.tandt-legal-notice strong { color: #5C4400; }
/* 404 / search */
.not-found-wrap { text-align: center; padding-block: var(--tandt-space-6); }
.not-found-wrap .search-form { max-width: 420px; margin: var(--tandt-space-3) auto 0; }
/* ---------------------------------------------------------------------
Homepage Differentiation Matrix — composed cards, not a raw table.
Replaces the previously pasted WYSIWYG comparison table (the "Table
and difference" issue). Three columns on desktop, stacked on mobile,
with the TandT column visually emphasized so the eye lands there.
--------------------------------------------------------------------- */
.tandt-diff__intro {
max-width: 62ch;
margin: var(--tandt-space-2) auto 0;
color: var(--tandt-text-muted);
font-size: var(--tandt-fs-lg);
}
.tandt-diff__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-3);
margin-top: var(--tandt-space-5);
align-items: stretch;
}
@media (min-width: 900px) {
.tandt-diff__grid { grid-template-columns: repeat(3, 1fr); }
}
.tandt-diff__col {
background: var(--tandt-white);
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--tandt-shadow-sm);
}
.tandt-diff__col-head {
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: var(--tandt-fs-lg);
color: var(--tandt-navy);
background: var(--tandt-light-bg);
padding: var(--tandt-space-3);
border-bottom: 1px solid var(--tandt-border);
line-height: 1.3;
}
.tandt-diff__col--emphasis {
border: 2px solid var(--tandt-primary);
box-shadow: var(--tandt-shadow-md);
transform: translateY(-4px);
}
.tandt-diff__col--emphasis .tandt-diff__col-head {
background: var(--tandt-navy);
color: var(--tandt-white);
}
.tandt-diff__badge {
display: inline-block;
background: var(--tandt-primary);
color: var(--tandt-white);
font-size: var(--tandt-fs-sm);
font-family: var(--tandt-font-body);
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 999px;
padding: 0.2em 0.8em;
margin-bottom: 0.5em;
}
.tandt-diff__cell {
display: flex;
flex-direction: column;
gap: 0.3em;
padding: var(--tandt-space-3);
border-bottom: 1px solid var(--tandt-border);
}
.tandt-diff__cell:last-child { border-bottom: none; }
.tandt-diff__row-label {
font-size: var(--tandt-fs-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tandt-text-muted);
}
.tandt-diff__col--emphasis .tandt-diff__row-label { color: var(--tandt-primary); }
.tandt-diff__row-value {
color: var(--tandt-text);
line-height: 1.5;
}
@media (min-width: 900px) {
.tandt-diff__col--emphasis { transform: translateY(-8px); }
}
/* ---------------------------------------------------------------------
Partners / Technology Ecosystem grid.
--------------------------------------------------------------------- */
.tandt-partners__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--tandt-space-3);
margin-top: var(--tandt-space-5);
}
@media (min-width: 640px) { .tandt-partners__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .tandt-partners__grid { grid-template-columns: repeat(5, 1fr); } }
.tandt-partners__item {
position: relative;
background: var(--tandt-white);
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-md);
display: flex;
align-items: center;
justify-content: center;
padding: var(--tandt-space-3);
min-height: 108px;
overflow: hidden;
transition: box-shadow var(--tandt-transition), transform var(--tandt-transition), border-color var(--tandt-transition);
}
.tandt-partners__item::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--tandt-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--tandt-transition);
}
.tandt-partners__item:hover {
box-shadow: var(--tandt-shadow-md);
border-color: transparent;
transform: translateY(-3px);
}
.tandt-partners__item:hover::before { transform: scaleX(1); }
.tandt-partners__item a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.tandt-partners__item img {
max-height: 48px;
max-width: 100%;
width: auto;
filter: grayscale(1) opacity(0.75);
transition: filter var(--tandt-transition);
}
.tandt-partners__item:hover img { filter: grayscale(0) opacity(1); }
.tandt-partners__wordmark {
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: 0.98rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--tandt-navy);
opacity: 0.72;
text-align: center;
transition: opacity var(--tandt-transition);
}
.tandt-partners__item:hover .tandt-partners__wordmark { opacity: 1; }
.tandt-partners__note {
max-width: 62ch;
margin: var(--tandt-space-4) auto 0;
color: var(--tandt-text-muted);
font-size: 0.78rem;
text-align: center;
opacity: 0.8;
}
.tandt-partners__viewall { text-align: center; margin-top: var(--tandt-space-3); }
.tandt-partners__viewall a {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-weight: 700;
color: var(--tandt-primary);
}
.tandt-partners__viewall a:hover { color: var(--tandt-navy); }
.tandt-partners__viewall svg { width: 14px; height: 14px; }
/* ---------------------------------------------------------------------
CMMC dedicated page — role clarity box + readiness-journey diagram.
--------------------------------------------------------------------- */
.tandt-cmmc-role {
margin-top: var(--tandt-space-4);
border-left: 4px solid var(--tandt-primary);
background: var(--tandt-soft-blue);
}
.tandt-cmmc-role h3 { margin-bottom: 0.4em; }
.tandt-cmmc-role p { margin: 0; color: var(--tandt-text); }
/* ---------------------------------------------------------------------
Service Framework — generalized arrow-chain diagram (was CMMC-only
".tandt-cmmc-journey"; every service page can use it now via
template-parts/service/service-framework.php).
--------------------------------------------------------------------- */
.tandt-framework__chain {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: var(--tandt-space-2);
margin-top: var(--tandt-space-2);
}
.tandt-framework__stage {
display: flex;
align-items: center;
gap: var(--tandt-space-2);
}
.tandt-framework__num {
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: var(--tandt-fs-lg);
color: var(--tandt-white);
background: var(--tandt-navy);
border-radius: 999px;
width: 2.4em;
height: 2.4em;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tandt-framework__label {
font-weight: 600;
color: var(--tandt-navy);
max-width: 9em;
}
.tandt-framework__arrow {
color: var(--tandt-border);
font-size: 1.5rem;
margin: 0 0.2em;
}
@media (max-width: 640px) {
.tandt-framework__chain { flex-direction: column; align-items: flex-start; }
.tandt-framework__arrow { transform: rotate(90deg); margin: 0.2em 0 0.2em 1.1em; }
}
/* ---------------------------------------------------------------------
About page — leadership grid.
--------------------------------------------------------------------- */
.tandt-leadership__card { text-align: center; }
.tandt-leadership__photo {
width: 128px;
height: 128px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto var(--tandt-space-2);
border: 3px solid var(--tandt-soft-blue);
}
.tandt-leadership__name { margin-bottom: 0.15em; }
.tandt-leadership__title {
color: var(--tandt-primary);
font-weight: 600;
font-size: var(--tandt-fs-sm);
margin-bottom: 0.6em;
}
.tandt-leadership__bio { color: var(--tandt-text-muted); font-size: var(--tandt-fs-sm); }
.tandt-leadership__linkedin { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 600; }
/* ---------------------------------------------------------------------
Contact page — premium two-panel layout: white form panel on the
wider/left column so it's the first thing a visitor can act on,
dark info panel (details + intro copy) on the narrower/right column.
--------------------------------------------------------------------- */
.tandt-contact-split {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-radius: var(--tandt-radius-lg, 12px);
overflow: hidden;
box-shadow: var(--tandt-shadow-md);
}
@media (min-width: 900px) {
.tandt-contact-split { grid-template-columns: 1.15fr 0.85fr; align-items: stretch; }
}
.tandt-contact-split__info {
background: var(--tandt-navy);
color: #E2E8F0;
padding: clamp(2rem, 4vw, 3rem);
display: flex;
flex-direction: column;
}
.tandt-contact-split__info .entry-content h2,
.tandt-contact-split__info .entry-content :is(h1, h2, h3) { color: var(--tandt-white); }
.tandt-contact-split__info .entry-content p { color: #CBD5E1; }
.tandt-contact-split__details {
list-style: none;
padding: 0;
margin: var(--tandt-space-4) 0 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.tandt-contact-split__details a { color: var(--tandt-white); font-weight: 600; }
.tandt-contact-split__label {
display: block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748B;
margin-bottom: 0.25rem;
}
.tandt-contact-split__form {
background: var(--tandt-white);
padding: clamp(1.5rem, 4vw, 3rem);
display: flex;
align-items: center;
}
.tandt-contact-split__form .tandt-forms-card {
box-shadow: none;
border: none;
padding: 0;
width: 100%;
max-width: none;
}
.tandt-contact-split__form .contact-fallback { width: 100%; }
.tandt-form-page__benefits {
list-style: none;
margin: var(--tandt-space-2) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.tandt-form-page__benefits li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
color: #CBD5E1;
font-size: var(--tandt-fs-sm);
}
.tandt-form-page__check {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(63, 169, 220, 0.18);
color: var(--tandt-accent, #3FA9DC);
margin-top: 0.1rem;
}
.tandt-form-page__check svg { width: 13px; height: 13px; }
/* ---------------------------------------------------------------------
Homepage hero — dark split layout with the TandT capability model.
--------------------------------------------------------------------- */
.hero--dark {
background: var(--tandt-navy);
color: var(--tandt-white);
}
.hero--dark .eyebrow { color: var(--tandt-primary); }
.hero--dark h1 { color: var(--tandt-white); }
.hero--dark p.hero-sub { color: #CBD5E1; }
.hero-split {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-5);
align-items: center;
}
@media (min-width: 900px) {
.hero-split { grid-template-columns: 1.15fr 0.85fr; }
}
.hero-split__main { max-width: 640px; }
/* Hero visual: the abstract architecture/network graphic (or the
admin's own uploaded hero image) on the right, with the four
floating topic badges layered over it. Replaces the previous plain
"Engineering → Trust" capability list with the premium asymmetric
composition from the Phase 01 brief. */
.hero-visual {
position: relative;
min-height: 320px;
}
.hero-visual__frame {
position: relative;
border-radius: var(--tandt-radius-md);
overflow: hidden;
background: radial-gradient(120% 120% at 30% 20%, rgba(14,124,181,0.22) 0%, rgba(15,23,42,0) 60%);
border: 1px solid rgba(255,255,255,0.10);
}
.hero-visual__image {
width: 100%;
height: auto;
display: block;
}
.hero-visual__default {
width: 100%;
height: auto;
display: block;
}
.hero-visual__badges {
position: absolute;
inset: 0;
pointer-events: none;
}
.hero-visual__badge {
position: absolute;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.9rem 0.55rem 0.6rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.72);
border: 1px solid rgba(255, 255, 255, 0.16);
color: var(--tandt-white);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.01em;
box-shadow: 0 10px 24px rgba(0,0,0,0.28);
backdrop-filter: blur(6px);
white-space: nowrap;
}
.hero-visual__badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7em;
height: 1.7em;
border-radius: 50%;
background: rgba(14, 124, 181, 0.35);
color: #7FD1F0;
flex-shrink: 0;
}
.hero-visual__badge-icon svg { width: 60%; height: 60%; }
.hero-visual__badge--0 { top: 6%; left: -4%; }
.hero-visual__badge--1 { top: 26%; right: -6%; }
.hero-visual__badge--2 { bottom: 22%; left: -8%; }
.hero-visual__badge--3 { bottom: 2%; right: -2%; }
@media (max-width: 899px) {
.hero-visual__badge { position: static; margin: 0.35rem 0.35rem 0 0; }
.hero-visual__badges {
position: static;
display: flex;
flex-wrap: wrap;
margin-top: var(--tandt-space-2);
}
}
@media (min-width: 900px) {
/* The visual is allowed to bleed slightly past the container edge for
depth, per the Phase 01 composition brief — restrained, not a full
breakout. */
.hero-visual { margin-right: -1.5rem; }
}
/* ---------------------------------------------------------------------
Hero Info Strip — compact editorial strip directly below the hero.
--------------------------------------------------------------------- */
.hero-info-strip {
background: var(--tandt-white);
border-bottom: 1px solid var(--tandt-border);
}
.hero-info-strip__list {
list-style: none;
margin: 0;
padding: var(--tandt-space-3) 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
@media (min-width: 768px) {
.hero-info-strip__list { grid-template-columns: repeat(4, 1fr); }
}
.hero-info-strip__item {
border-top: 1px solid var(--tandt-border);
padding: var(--tandt-space-2) 0;
}
@media (min-width: 768px) {
.hero-info-strip__item {
border-top: none;
border-left: 1px solid var(--tandt-border);
padding: 0.2rem var(--tandt-space-3);
}
.hero-info-strip__item:first-child { border-left: none; padding-left: 0; }
}
.hero-info-strip__link {
display: flex;
flex-direction: column;
gap: 0.25rem;
color: inherit;
}
a.hero-info-strip__link:hover .hero-info-strip__title { color: var(--tandt-primary); }
.hero-info-strip__title {
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: 1.02rem;
color: var(--tandt-navy);
transition: color var(--tandt-transition);
}
.hero-info-strip__text {
font-size: 0.88rem;
color: var(--tandt-text-muted);
line-height: 1.5;
}
/* ---------------------------------------------------------------------
Process Panel — reusable steps + diagram section (Independent
Assurance, Technology Due Diligence, AI & Responsible AI).
--------------------------------------------------------------------- */
.tandt-process-panel--muted { background: var(--tandt-light-bg); }
.tandt-process-panel--dark { background: var(--tandt-navy); color: var(--tandt-white); }
.tandt-process-panel--dark .eyebrow { color: var(--tandt-primary); }
.tandt-process-panel--dark h2 { color: var(--tandt-white); }
.tandt-process-panel__intro { max-width: 60ch; color: var(--tandt-text-muted); margin-top: 0.4em; }
.tandt-process-panel--dark .tandt-process-panel__intro { color: #CBD5E1; }
.tandt-process-panel__body {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-4);
margin-top: var(--tandt-space-4);
align-items: start;
}
@media (min-width: 860px) {
.tandt-process-panel__body { grid-template-columns: 1.3fr 1fr; }
.tandt-process-panel__body--image-left { grid-template-columns: 1fr 1.3fr; }
.tandt-process-panel__body--image-left .tandt-process-panel__diagram { order: -1; }
}
.tandt-process-panel__list { display: flex; flex-direction: column; gap: 0.6rem; }
.tandt-process-panel__item {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.85rem 1.1rem;
border-left: 3px solid var(--tandt-primary);
background: var(--tandt-white);
border-radius: 0 var(--tandt-radius-sm) var(--tandt-radius-sm) 0;
box-shadow: var(--tandt-shadow-sm);
}
.tandt-process-panel--dark .tandt-process-panel__item { background: rgba(255,255,255,0.05); }
.tandt-process-panel__item.is-active { background: var(--tandt-navy); border-left-color: var(--tandt-primary); }
.tandt-process-panel__item.is-active .tandt-process-panel__text,
.tandt-process-panel__item.is-active .tandt-process-panel__num { color: var(--tandt-white); }
.tandt-process-panel--dark .tandt-process-panel__item.is-active { background: var(--tandt-primary); }
.tandt-process-panel__num {
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: var(--tandt-fs-sm);
color: var(--tandt-primary);
flex-shrink: 0;
width: 2em;
}
.tandt-process-panel__check {
display: inline-flex;
color: var(--tandt-success);
flex-shrink: 0;
}
.tandt-process-panel__text { font-weight: 500; color: var(--tandt-text); }
.tandt-process-panel--dark .tandt-process-panel__text { color: #E2E8F0; }
.tandt-process-panel__cta { margin-top: var(--tandt-space-2); align-self: flex-start; }
.tandt-process-panel__diagram {
background: var(--tandt-light-bg);
border: 1px dashed var(--tandt-border);
border-radius: var(--tandt-radius-md);
min-height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--tandt-text-muted);
text-align: center;
padding: var(--tandt-space-3);
}
.tandt-process-panel--dark .tandt-process-panel__diagram {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.15);
color: #94A3B8;
}
.tandt-process-panel__diagram-icon { color: var(--tandt-primary); opacity: 0.7; }
.tandt-process-panel__diagram-caption { font-size: var(--tandt-fs-sm); }
.tandt-process-panel__diagram--image {
background: none;
border: none;
padding: 0;
display: block;
}
.tandt-process-panel__diagram--image img {
width: 100%;
height: auto;
border-radius: var(--tandt-radius-md);
display: block;
}
/* ---------------------------------------------------------------------
Who We Help — editorial list, replaces the old icon grid.
--------------------------------------------------------------------- */
.tandt-who-we-help { background: var(--tandt-navy); color: var(--tandt-white); }
.tandt-who-we-help__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-4);
}
@media (min-width: 900px) {
.tandt-who-we-help__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--tandt-space-5); }
}
.tandt-who-we-help__lead { align-self: start; }
.tandt-who-we-help__lead .eyebrow { color: var(--tandt-primary); }
.tandt-who-we-help__lead h2 { color: var(--tandt-white); margin-bottom: var(--tandt-space-2); }
.tandt-who-we-help__lead p { color: #CBD5E1; max-width: 40ch; }
.tandt-who-we-help__list { list-style: none; margin: 0; padding: 0; }
.tandt-who-we-help__item {
display: grid;
grid-template-columns: 1fr;
gap: 0.35rem;
padding: var(--tandt-space-2) 0;
border-top: 1px solid rgba(255,255,255,0.14);
}
@media (min-width: 640px) {
.tandt-who-we-help__item { grid-template-columns: 15ch 1fr; gap: var(--tandt-space-3); align-items: baseline; }
}
.tandt-who-we-help__item:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.tandt-who-we-help__label {
font-family: var(--tandt-font-heading);
font-weight: 700;
color: var(--tandt-white);
font-size: 1.05rem;
}
.tandt-who-we-help__text { color: #9FBCC8; font-size: 0.95rem; line-height: 1.6; }
/* ---------------------------------------------------------------------
CMMC & Federal Compliance — major dark/high-contrast homepage feature.
--------------------------------------------------------------------- */
.tandt-cmmc-teaser { background: var(--tandt-navy); color: var(--tandt-white); }
.tandt-cmmc-teaser__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-4);
align-items: center;
}
@media (min-width: 780px) { .tandt-cmmc-teaser__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--tandt-space-5); } }
.tandt-cmmc-teaser__copy .eyebrow { color: var(--tandt-primary); }
.tandt-cmmc-teaser__copy h2 { color: var(--tandt-white); margin-bottom: var(--tandt-space-2); max-width: 20ch; }
.tandt-cmmc-teaser__copy p { color: #CBD5E1; margin-bottom: var(--tandt-space-3); max-width: 56ch; }
.tandt-cmmc-teaser__flow {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-3);
}
.tandt-cmmc-teaser__flow-label {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tandt-primary);
margin-bottom: var(--tandt-space-2);
}
.tandt-cmmc-teaser__flow-list { list-style: none; margin: 0; padding: 0; }
.tandt-cmmc-teaser__flow-list li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0;
border-top: 1px solid rgba(255,255,255,0.10);
font-weight: 600;
color: var(--tandt-white);
font-size: 0.95rem;
}
.tandt-cmmc-teaser__flow-list li:first-child { border-top: none; }
.tandt-cmmc-teaser__flow-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
background: var(--tandt-primary);
color: var(--tandt-white);
font-size: 0.8rem;
font-weight: 700;
flex-shrink: 0;
}
/* ---------------------------------------------------------------------
Strategic Positioning — editorial split under the hero.
--------------------------------------------------------------------- */
.tandt-positioning__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-4);
}
@media (min-width: 900px) {
.tandt-positioning__grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--tandt-space-5); }
}
.tandt-positioning__statement { align-self: start; }
.tandt-positioning__lead {
font-family: var(--tandt-font-heading);
font-size: clamp(1.6rem, 3vw, 2.25rem);
line-height: 1.25;
color: var(--tandt-navy);
margin-top: 0.5rem;
}
.tandt-positioning__body h2 { max-width: 22ch; margin-bottom: var(--tandt-space-2); }
.tandt-positioning__body p { color: var(--tandt-text-muted); max-width: 62ch; margin-bottom: var(--tandt-space-2); }
.tandt-positioning__steps {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0;
margin-top: var(--tandt-space-3);
padding: 0;
}
.tandt-positioning__steps li {
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tandt-primary);
padding-right: var(--tandt-space-3);
margin-right: var(--tandt-space-3);
border-right: 1px solid var(--tandt-border);
}
.tandt-positioning__steps li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
/* ---------------------------------------------------------------------
Problems — "what TandT helps clients solve" editorial list.
--------------------------------------------------------------------- */
.tandt-problems__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--tandt-border);
}
@media (min-width: 768px) {
.tandt-problems__list { grid-template-columns: 1fr 1fr; }
}
.tandt-problems__item { border-bottom: 1px solid var(--tandt-border); }
@media (min-width: 768px) { .tandt-problems__item:nth-child(odd) { border-right: 1px solid var(--tandt-border); } }
.tandt-problems__link {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: var(--tandt-space-3);
color: inherit;
position: relative;
transition: background var(--tandt-transition);
}
a.tandt-problems__link:hover { background: var(--tandt-white); }
.tandt-problems__title {
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: 1.15rem;
color: var(--tandt-navy);
padding-right: 2em;
}
.tandt-problems__text { color: var(--tandt-text-muted); font-size: 0.95rem; line-height: 1.6; max-width: 48ch; }
.tandt-problems__arrow {
position: absolute;
top: var(--tandt-space-3);
right: var(--tandt-space-3);
color: var(--tandt-primary);
transition: transform var(--tandt-transition);
}
a.tandt-problems__link:hover .tandt-problems__arrow { transform: translateX(3px); }
/* ---------------------------------------------------------------------
Core Services showcase — numbered category rows.
--------------------------------------------------------------------- */
.tandt-services-showcase__rows { border-top: 1px solid var(--tandt-border); }
.tandt-services-showcase__row {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-2);
padding: var(--tandt-space-4) 0;
border-bottom: 1px solid var(--tandt-border);
scroll-margin-top: 90px;
}
@media (min-width: 900px) {
.tandt-services-showcase__row {
grid-template-columns: 4.5rem 1.4fr 1fr;
align-items: start;
gap: var(--tandt-space-3);
}
}
.tandt-services-showcase__num {
font-family: var(--tandt-font-heading);
font-size: 1.8rem;
color: var(--tandt-border);
font-weight: 700;
line-height: 1;
}
.tandt-services-showcase__category h3 { margin-bottom: 0.3em; }
.tandt-services-showcase__category p { color: var(--tandt-text-muted); max-width: 46ch; margin: 0; }
.tandt-services-showcase__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tandt-services-showcase__links a {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-weight: 600;
color: var(--tandt-navy);
}
.tandt-services-showcase__links a:hover { color: var(--tandt-primary); }
.tandt-services-showcase__links svg { width: 14px; height: 14px; }
.tandt-services-showcase__footer { margin-top: var(--tandt-space-4); text-align: center; }
/* ---------------------------------------------------------------------
How TandT Works — horizontal connected timeline.
--------------------------------------------------------------------- */
.tandt-methodology__timeline {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-3);
counter-reset: none;
}
@media (min-width: 900px) {
.tandt-methodology__timeline {
grid-template-columns: repeat(var(--tandt-steps, 6), 1fr);
position: relative;
padding-top: var(--tandt-space-2);
}
.tandt-methodology__timeline::before {
content: "";
position: absolute;
top: calc(var(--tandt-space-2) + 1.1rem);
left: 4%;
right: 4%;
height: 1px;
background: var(--tandt-border);
}
}
.tandt-methodology__step {
display: flex;
flex-direction: column;
gap: 0.35rem;
position: relative;
}
.tandt-methodology__num {
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: 1.1rem;
color: var(--tandt-primary);
background: var(--tandt-white);
width: 2.2rem;
}
.tandt-methodology__title { font-weight: 700; color: var(--tandt-navy); }
.tandt-methodology__text { color: var(--tandt-text-muted); font-size: 0.88rem; line-height: 1.55; }
/* ---------------------------------------------------------------------
Outcomes — large editorial typography.
--------------------------------------------------------------------- */
.tandt-outcomes__grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--tandt-border);
border-left: 1px solid var(--tandt-border);
}
@media (min-width: 640px) { .tandt-outcomes__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tandt-outcomes__grid { grid-template-columns: repeat(3, 1fr); } }
.tandt-outcomes__item {
padding: var(--tandt-space-4) var(--tandt-space-3);
border-right: 1px solid var(--tandt-border);
border-bottom: 1px solid var(--tandt-border);
}
.tandt-outcomes__title {
display: block;
font-family: var(--tandt-font-heading);
font-size: 1.6rem;
color: var(--tandt-navy);
margin-bottom: 0.5rem;
}
.tandt-outcomes__text { color: var(--tandt-text-muted); font-size: 0.95rem; line-height: 1.6; }
/* ---------------------------------------------------------------------
Insights & Resources — unified featured + grid layout.
--------------------------------------------------------------------- */
.card--featured { grid-column: 1 / -1; }
@media (min-width: 768px) {
.card--featured.blog-card,
.card--featured.resource-card {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: stretch;
}
.card--featured.resource-card .card-media { height: 100%; margin: 0; }
.card--featured.resource-card .card-media img { height: 100%; object-fit: cover; }
.card--featured h3 { font-size: 1.6rem; }
}
.tandt-insights__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-3);
}
@media (min-width: 640px) { .tandt-insights__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tandt-insights__grid { grid-template-columns: repeat(3, 1fr); } }
/* ---------------------------------------------------------------------
Phase 03 — Service Detail Page System.
--------------------------------------------------------------------- */
/* Service hero — distinct from both the homepage hero and the generic
page hero: breadcrumb sits inside it, and the right column shows the
page's own Framework steps as a compact vertical chain. */
.hero-service { padding-block: var(--tandt-space-5) var(--tandt-space-5); }
.hero-service .breadcrumbs { padding-block: 0 var(--tandt-space-3); }
.hero-service__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-4);
align-items: start;
}
@media (min-width: 900px) {
.hero-service__grid { grid-template-columns: 1.4fr 1fr; gap: var(--tandt-space-5); }
}
.hero-service__main h1 { max-width: 18ch; }
.hero-service__main .hero-sub { max-width: 56ch; }
.hero-service__visual {
background: var(--tandt-navy);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-3);
align-self: start;
}
.hero-service__visual-label {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tandt-primary);
margin-bottom: var(--tandt-space-2);
}
.hero-service__chain { list-style: none; margin: 0; padding: 0; }
.hero-service__chain li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0;
border-top: 1px solid rgba(255,255,255,0.10);
color: var(--tandt-white);
font-weight: 600;
font-size: 0.92rem;
}
.hero-service__chain li:first-child { border-top: none; }
.hero-service__chain-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7em;
height: 1.7em;
border-radius: 50%;
background: var(--tandt-primary);
color: var(--tandt-white);
font-size: 0.78rem;
font-weight: 700;
flex-shrink: 0;
}
.hero-service__visual--image { background: none; padding: 0; border-radius: var(--tandt-radius-md); overflow: hidden; }
.hero-service__visual--image img { width: 100%; height: auto; display: block; border-radius: var(--tandt-radius-md); }
/* Service Introduction */
.tandt-service-intro__inner { max-width: 760px; }
.tandt-service-intro__inner h2 { margin-bottom: var(--tandt-space-2); }
.tandt-service-intro__inner p { color: var(--tandt-text-muted); margin-bottom: var(--tandt-space-2); font-size: var(--tandt-fs-lg); }
/* Why This Matters / Who Needs This */
.tandt-service-matters__grid { display: grid; grid-template-columns: 1fr; gap: var(--tandt-space-4); }
.tandt-service-matters__grid--split { grid-template-columns: 1fr; }
@media (min-width: 768px) {
.tandt-service-matters__grid--split { grid-template-columns: 1fr 1fr; gap: var(--tandt-space-5); }
}
.tandt-service-matters__col h2 { margin-bottom: var(--tandt-space-2); max-width: 20ch; }
.tandt-service-matters__list { list-style: none; margin: 0; padding: 0; }
.tandt-service-matters__list li {
padding: 0.6rem 0;
border-top: 1px solid var(--tandt-border);
color: var(--tandt-text-muted);
}
.tandt-service-matters__list--check li { display: flex; align-items: flex-start; gap: 0.6rem; }
.tandt-service-matters__list--check svg { color: var(--tandt-primary); flex-shrink: 0; margin-top: 0.2em; width: 16px; height: 16px; }
/* Service Capabilities */
.tandt-service-capabilities__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tandt-border); }
.tandt-service-capabilities__item {
display: grid;
grid-template-columns: 3.5rem 1fr;
gap: var(--tandt-space-3);
padding: var(--tandt-space-3) 0;
border-bottom: 1px solid var(--tandt-border);
align-items: baseline;
}
.tandt-service-capabilities__num {
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: 1.5rem;
color: var(--tandt-border);
}
.tandt-service-capabilities__title { display: block; font-weight: 700; color: var(--tandt-navy); font-size: 1.05rem; margin-bottom: 0.2em; }
.tandt-service-capabilities__text { display: block; color: var(--tandt-text-muted); max-width: 60ch; }
/* Service Framework label wrapper reuses .tandt-framework__* above. */
/* Deliverables / Outcomes */
.tandt-service-outcomes__grid { display: grid; grid-template-columns: 1fr; gap: var(--tandt-space-4); }
@media (min-width: 768px) { .tandt-service-outcomes__grid { grid-template-columns: 1fr 1fr; gap: var(--tandt-space-5); } }
.tandt-service-outcomes__deliverables h2,
.tandt-service-outcomes__outcomes h2 { margin-bottom: var(--tandt-space-2); }
.tandt-service-outcomes__deliverable-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.tandt-service-outcomes__deliverable-list li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--tandt-text); }
.tandt-service-outcomes__deliverable-list svg { color: var(--tandt-primary); flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.15em; }
.tandt-service-outcomes__outcome-list { margin: 0; }
.tandt-service-outcomes__outcome-list > div { padding: 0.6rem 0; border-top: 1px solid var(--tandt-border); }
.tandt-service-outcomes__outcome-list dt { font-weight: 700; color: var(--tandt-navy); }
.tandt-service-outcomes__outcome-list dd { margin: 0.15rem 0 0; color: var(--tandt-text-muted); }
/* Why TandT */
.tandt-service-why__grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--tandt-border); border-left: 1px solid var(--tandt-border); }
@media (min-width: 640px) { .tandt-service-why__grid { grid-template-columns: 1fr 1fr; } }
.tandt-service-why__item { padding: var(--tandt-space-3); border-right: 1px solid var(--tandt-border); border-bottom: 1px solid var(--tandt-border); }
.tandt-service-why__title { display: block; font-weight: 700; color: var(--tandt-navy); margin-bottom: 0.3em; }
.tandt-service-why__text { display: block; color: var(--tandt-text-muted); font-size: 0.92rem; line-height: 1.6; }
/* FAQ accordion (drives inc/seo/schema-faq.php's [tandt_faq] shortcode) */
.tandt-service-faq__inner { max-width: 800px; margin-inline: auto; }
.tandt-faq { display: flex; flex-direction: column; gap: 0.75rem; }
.tandt-faq-item {
background: var(--tandt-white);
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-sm);
padding: var(--tandt-space-2) var(--tandt-space-3);
}
.tandt-faq-item summary {
cursor: pointer;
font-weight: 700;
color: var(--tandt-navy);
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.tandt-faq-item summary::-webkit-details-marker { display: none; }
.tandt-faq-item summary::after {
content: "+";
font-size: 1.3rem;
color: var(--tandt-primary);
flex-shrink: 0;
transition: transform var(--tandt-transition);
}
.tandt-faq-item[open] summary::after { transform: rotate(45deg); }
.tandt-faq-item summary:focus-visible { outline: 2px solid var(--tandt-primary); outline-offset: 3px; }
.tandt-faq-answer { color: var(--tandt-text-muted); padding-top: 0.6rem; line-height: 1.65; }
.tandt-faq-answer p:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------------
Phase 04 — About Page.
--------------------------------------------------------------------- */
/* About hero — light, editorial, capability index instead of a graphic. */
.hero-about { padding-block: var(--tandt-space-5); background: var(--tandt-white); }
.hero-about .breadcrumbs { padding-block: 0 var(--tandt-space-3); }
.hero-about__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-4);
align-items: start;
}
@media (min-width: 900px) {
.hero-about__grid { grid-template-columns: 1.4fr 1fr; gap: var(--tandt-space-5); }
}
.hero-about__main h1 { max-width: 18ch; }
.hero-about__main .hero-sub { max-width: 58ch; color: var(--tandt-text-muted); }
.hero-about__index {
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-3);
background: var(--tandt-light-bg);
}
.hero-about__index-label {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tandt-primary);
margin-bottom: var(--tandt-space-2);
}
.hero-about__index-list { list-style: none; margin: 0; padding: 0; }
.hero-about__index-list li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0;
border-top: 1px solid var(--tandt-border);
font-weight: 600;
color: var(--tandt-navy);
font-size: 0.95rem;
}
.hero-about__index-list li:first-child { border-top: none; }
.hero-about__index-num {
font-family: var(--tandt-font-heading);
font-weight: 700;
color: var(--tandt-border);
font-size: 1.1rem;
width: 1.8em;
}
/* Company Positioning — dark, centered. */
.tandt-about-positioning { background: var(--tandt-navy); color: var(--tandt-white); text-align: center; }
.tandt-about-positioning__inner { max-width: 760px; margin-inline: auto; }
.tandt-about-positioning__inner h2 { color: var(--tandt-white); margin-bottom: var(--tandt-space-2); }
.tandt-about-positioning__inner p { color: #CBD5E1; margin-bottom: var(--tandt-space-2); }
.tandt-about-positioning__terms {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin: var(--tandt-space-3) 0;
}
.tandt-about-positioning__term {
font-family: var(--tandt-font-heading);
font-weight: 700;
color: var(--tandt-white);
font-size: 1.05rem;
}
.tandt-about-positioning__plus { color: var(--tandt-primary); font-weight: 700; }
.tandt-about-positioning .btn-outline { margin-top: var(--tandt-space-2); }
/* How TandT Thinks — large typographic principles. */
.tandt-about-principles__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tandt-border); }
.tandt-about-principles__item {
display: grid;
grid-template-columns: 1fr;
gap: 0.3rem;
padding: var(--tandt-space-4) 0;
border-bottom: 1px solid var(--tandt-border);
}
@media (min-width: 768px) {
.tandt-about-principles__item { grid-template-columns: 5rem 1fr 1.4fr; gap: var(--tandt-space-3); align-items: baseline; }
}
.tandt-about-principles__num {
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: 2.2rem;
color: var(--tandt-border);
line-height: 1;
}
.tandt-about-principles__title {
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: 1.4rem;
color: var(--tandt-navy);
}
.tandt-about-principles__text { color: var(--tandt-text-muted); max-width: 56ch; }
/* Our Approach note beneath the reused .tandt-methodology timeline. */
.tandt-about-approach__note { max-width: 70ch; margin: var(--tandt-space-3) auto 0; text-align: center; color: var(--tandt-text-muted); font-size: 0.9rem; }
/* Technical + Executive Perspective — the page's signature vertical flow. */
.tandt-about-perspective__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-4);
}
@media (min-width: 900px) {
.tandt-about-perspective__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--tandt-space-5); align-items: center; }
}
.tandt-about-perspective__copy h2 { margin-bottom: var(--tandt-space-2); max-width: 20ch; }
.tandt-about-perspective__copy p { color: var(--tandt-text-muted); max-width: 48ch; }
.tandt-about-perspective__flow { list-style: none; margin: 0; padding: 0; }
.tandt-about-perspective__stage {
position: relative;
background: var(--tandt-white);
border: 1px solid var(--tandt-border);
border-left: 4px solid var(--tandt-primary);
border-radius: var(--tandt-radius-sm);
padding: var(--tandt-space-2) var(--tandt-space-3);
margin-bottom: var(--tandt-space-3);
}
.tandt-about-perspective__title { display: block; font-family: var(--tandt-font-heading); font-weight: 700; color: var(--tandt-navy); font-size: 1.05rem; margin-bottom: 0.25em; }
.tandt-about-perspective__text { display: block; color: var(--tandt-text-muted); font-size: 0.9rem; }
.tandt-about-perspective__connector {
display: block;
width: 2px;
height: var(--tandt-space-3);
background: var(--tandt-border);
margin: 0 0 var(--tandt-space-3) 1.4rem;
}
/* Capability Ecosystem — hub-and-spoke diagram. */
.tandt-ecosystem__diagram { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin-inline: auto; }
.tandt-ecosystem__hub {
background: var(--tandt-navy);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-2) var(--tandt-space-4);
}
.tandt-ecosystem__hub a,
.tandt-ecosystem__hub span {
color: var(--tandt-white);
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: 1.15rem;
}
.tandt-ecosystem__hub a:hover { color: var(--tandt-accent); }
.tandt-ecosystem__connector { width: 2px; height: var(--tandt-space-3); background: var(--tandt-border); }
.tandt-ecosystem__spokes {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--tandt-space-2);
position: relative;
padding-top: var(--tandt-space-3);
border-top: 1px solid var(--tandt-border);
width: 100%;
}
.tandt-ecosystem__spoke {
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-sm);
padding: 0.7rem 1.1rem;
background: var(--tandt-white);
}
.tandt-ecosystem__spoke a,
.tandt-ecosystem__spoke span { font-weight: 600; color: var(--tandt-navy); font-size: 0.92rem; }
.tandt-ecosystem__spoke a:hover { color: var(--tandt-primary); }
/* Standards We Work Against — compact list. */
.tandt-about-standards__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.tandt-about-standards__list { list-style: none; margin: var(--tandt-space-2) 0 0; padding: 0; }
.tandt-about-standards__list li {
padding: 0.6rem 0;
border-top: 1px solid var(--tandt-border);
color: var(--tandt-text-muted);
font-size: 0.92rem;
}
/* ---------------------------------------------------------------------
Phase 05 — Contact Page + Forms.
--------------------------------------------------------------------- */
/* Contact hero — light, focused, no "Contact Us" as the only headline. */
.hero-contact { padding-block: var(--tandt-space-5); background: var(--tandt-white); }
.hero-contact .breadcrumbs { padding-block: 0 var(--tandt-space-3); }
.hero-contact__inner { max-width: 760px; }
.hero-contact__inner h1 { max-width: 20ch; }
.hero-contact__inner .hero-sub { color: var(--tandt-text-muted); font-size: var(--tandt-fs-lg); }
/* Contact Pathways — 4 self-routing options before the main form. */
.tandt-contact-pathways__grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--tandt-border);
border-left: 1px solid var(--tandt-border);
}
@media (min-width: 640px) { .tandt-contact-pathways__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tandt-contact-pathways__grid { grid-template-columns: repeat(4, 1fr); } }
.tandt-contact-pathways__item {
padding: var(--tandt-space-3);
border-right: 1px solid var(--tandt-border);
border-bottom: 1px solid var(--tandt-border);
background: var(--tandt-white);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.tandt-contact-pathways__title { font-family: var(--tandt-font-heading); font-weight: 700; color: var(--tandt-navy); font-size: 1.05rem; }
.tandt-contact-pathways__text { color: var(--tandt-text-muted); font-size: 0.88rem; line-height: 1.55; flex-grow: 1; }
.tandt-contact-pathways__link {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-weight: 700;
font-size: 0.88rem;
color: var(--tandt-primary);
}
.tandt-contact-pathways__link svg { width: 14px; height: 14px; }
.tandt-contact-pathways__link:hover { color: var(--tandt-navy); }
/* Service Pathways — compact internal-linking row. */
.tandt-contact-services__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
.tandt-contact-services__list a {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.6rem 1.1rem;
border: 1px solid var(--tandt-border);
border-radius: 999px;
font-weight: 600;
font-size: 0.88rem;
color: var(--tandt-navy);
background: var(--tandt-white);
}
.tandt-contact-services__list a:hover { border-color: var(--tandt-primary); color: var(--tandt-primary); }
.tandt-contact-services__list svg { width: 13px; height: 13px; }
/* ---------------------------------------------------------------------
Phase 06 — Insights archive category filter row.
--------------------------------------------------------------------- */
.tandt-insights-intro {
color: var(--tandt-text-muted);
font-size: 0.98rem;
margin: var(--tandt-space-2) 0 0;
}
.tandt-insights-filter {
background: var(--tandt-white);
border-bottom: 1px solid var(--tandt-border);
}
.tandt-insights-filter__list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding-block: var(--tandt-space-2);
overflow-x: auto;
}
.tandt-insights-filter__link {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.9rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
color: var(--tandt-text-muted);
border: 1px solid var(--tandt-border);
white-space: nowrap;
}
.tandt-insights-filter__link:hover { border-color: var(--tandt-primary); color: var(--tandt-primary); }
.tandt-insights-filter__link.is-active {
background: var(--tandt-navy);
border-color: var(--tandt-navy);
color: var(--tandt-white);
}
/* ---------------------------------------------------------------------
Phase 07 — Partners / Technology Ecosystem page.
--------------------------------------------------------------------- */
.tandt-partner-category { margin-bottom: var(--tandt-space-5); }
.tandt-partner-category:last-of-type { margin-bottom: var(--tandt-space-3); }
.tandt-partner-category__head { margin-bottom: var(--tandt-space-3); border-bottom: 1px solid var(--tandt-border); padding-bottom: var(--tandt-space-2); }
.tandt-partner-category__head h3 { margin-bottom: 0.2em; }
.tandt-partner-category__head p { color: var(--tandt-text-muted); margin: 0; }
.tandt-partner-category__items {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--tandt-space-3);
}
@media (min-width: 640px) { .tandt-partner-category__items { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .tandt-partner-category__items { grid-template-columns: repeat(4, 1fr); } }
.tandt-partner-category__item {
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-3);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
text-align: center;
}
.tandt-partner-category__logo { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; }
.tandt-partner-category__logo img { max-height: 40px; max-width: 100%; width: auto; object-fit: contain; }
.tandt-partner-category__desc { color: var(--tandt-text-muted); font-size: 0.82rem; line-height: 1.5; margin: 0; }
/* ---------------------------------------------------------------------
Phase 08 — CMMC Levels + Readiness vs Assessment.
--------------------------------------------------------------------- */
.tandt-cmmc-levels__list {
list-style: none;
margin: var(--tandt-space-4) 0 0;
padding: 0;
counter-reset: none;
max-width: 900px;
margin-inline: auto;
}
.tandt-cmmc-levels__item {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-2);
padding: var(--tandt-space-3) 0;
border-top: 1px solid var(--tandt-border);
}
.tandt-cmmc-levels__item:last-child { border-bottom: 1px solid var(--tandt-border); }
@media (min-width: 768px) {
.tandt-cmmc-levels__item { grid-template-columns: 220px 1fr; gap: var(--tandt-space-4); }
}
.tandt-cmmc-levels__badge { display: flex; flex-direction: column; gap: 0.2rem; }
.tandt-cmmc-levels__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background: var(--tandt-light-bg);
color: var(--tandt-text-muted);
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.3rem;
}
.tandt-cmmc-levels__level {
font-family: var(--tandt-font-heading);
font-weight: 700;
font-size: 1.3rem;
color: var(--tandt-navy);
}
.tandt-cmmc-levels__name {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tandt-primary);
}
.tandt-cmmc-levels__detail p { margin: 0 0 0.5rem; color: var(--tandt-text-muted); font-size: 0.92rem; line-height: 1.6; }
.tandt-cmmc-levels__detail p:last-child { margin-bottom: 0; }
.tandt-cmmc-levels__detail strong { color: var(--tandt-navy); }
.tandt-cmmc-levels__note {
max-width: 70ch;
margin: var(--tandt-space-4) auto 0;
text-align: center;
color: var(--tandt-text-muted);
font-size: 0.82rem;
line-height: 1.6;
}
.tandt-cmmc-levels__note a { color: var(--tandt-primary); font-weight: 600; }
.tandt-cmmc-distinction__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-3);
max-width: 1000px;
margin-inline: auto;
}
@media (min-width: 768px) { .tandt-cmmc-distinction__grid { grid-template-columns: 1fr 1fr; } }
.tandt-cmmc-distinction__col {
background: var(--tandt-white);
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-3);
}
.tandt-cmmc-distinction__col--dark { background: var(--tandt-navy); border-color: var(--tandt-navy); color: var(--tandt-white); }
.tandt-cmmc-distinction__label {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tandt-primary);
margin-bottom: 0.4rem;
}
.tandt-cmmc-distinction__col--dark .tandt-cmmc-distinction__label { color: #7FD1F0; }
.tandt-cmmc-distinction__col h3 { margin-bottom: var(--tandt-space-2); }
.tandt-cmmc-distinction__col--dark h3 { color: var(--tandt-white); }
.tandt-cmmc-distinction__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.tandt-cmmc-distinction__col li {
padding-left: 1.2em;
position: relative;
font-size: 0.92rem;
color: var(--tandt-text-muted);
line-height: 1.5;
}
.tandt-cmmc-distinction__col--dark li { color: #CBD5E1; }
.tandt-cmmc-distinction__col li::before { content: "–"; position: absolute; left: 0; color: var(--tandt-primary); }
.tandt-cmmc-distinction__note {
margin-top: var(--tandt-space-3);
padding-top: var(--tandt-space-3);
border-top: 1px solid rgba(255,255,255,0.14);
font-size: 0.85rem;
color: #CBD5E1;
font-weight: 600;
}
/* ---------------------------------------------------------------------
Phase 09 — AI Assurance & Governance page.
--------------------------------------------------------------------- */
/* The AI Governance Landscape (law vs standard vs framework vs methodology) */
.tandt-ai-landscape__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--tandt-space-3);
margin-top: var(--tandt-space-3);
}
@media (min-width: 640px) { .tandt-ai-landscape__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tandt-ai-landscape__grid { grid-template-columns: repeat(3, 1fr); } }
.tandt-ai-landscape__item {
border: 1px solid var(--tandt-border);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-3);
}
.tandt-ai-landscape__kicker {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tandt-primary);
background: rgba(14,124,181,0.08);
padding: 0.25em 0.6em;
border-radius: 999px;
margin-bottom: 0.6rem;
}
.tandt-ai-landscape__item h3 { margin-bottom: 0.4em; font-size: 1.1rem; }
.tandt-ai-landscape__item p { color: var(--tandt-text-muted); font-size: 0.88rem; line-height: 1.6; margin: 0; }
/* AI Risk Classification */
.tandt-ai-risk-tiers__list { display: grid; grid-template-columns: 1fr; gap: var(--tandt-space-2); max-width: 800px; margin-inline: auto; }
.tandt-ai-risk-tiers__item {
display: grid;
grid-template-columns: 6rem 1fr;
gap: var(--tandt-space-3);
align-items: center;
background: var(--tandt-white);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-2) var(--tandt-space-3);
border-left: 5px solid var(--tandt-border);
}
.tandt-ai-risk-tiers__item--low { border-left-color: #2E9E5B; }
.tandt-ai-risk-tiers__item--medium { border-left-color: #D69E2E; }
.tandt-ai-risk-tiers__item--high { border-left-color: #C0392B; }
.tandt-ai-risk-tiers__level { font-family: var(--tandt-font-heading); font-weight: 700; font-size: 1.05rem; color: var(--tandt-navy); }
.tandt-ai-risk-tiers__text { color: var(--tandt-text-muted); font-size: 0.9rem; line-height: 1.55; }
/* Shadow AI */
.tandt-ai-shadow__grid { display: grid; grid-template-columns: 1fr; gap: var(--tandt-space-4); }
@media (min-width: 860px) { .tandt-ai-shadow__grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--tandt-space-5); } }
.tandt-ai-shadow__copy h2 { margin-bottom: var(--tandt-space-2); max-width: 20ch; }
.tandt-ai-shadow__copy > p { color: var(--tandt-text-muted); max-width: 56ch; margin-bottom: var(--tandt-space-2); }
.tandt-ai-shadow__steps {
background: var(--tandt-navy);
border-radius: var(--tandt-radius-md);
padding: var(--tandt-space-3);
align-self: start;
}
.tandt-ai-shadow__steps-label {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tandt-primary);
margin-bottom: var(--tandt-space-2);
}
.tandt-ai-shadow__steps ol { list-style: none; margin: 0; padding: 0; }
.tandt-ai-shadow__steps li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0;
border-top: 1px solid rgba(255,255,255,0.1);
color: var(--tandt-white);
font-weight: 600;
}
.tandt-ai-shadow__steps li:first-child { border-top: none; }
.tandt-ai-shadow__steps li span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7em;
height: 1.7em;
border-radius: 50%;
background: var(--tandt-primary);
color: var(--tandt-white);
font-size: 0.78rem;
flex-shrink: 0;
}
/* AI Governance Roadmap */
.tandt-ai-roadmap__list {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--tandt-border);
max-width: 900px;
margin-inline: auto;
}
@media (min-width: 768px) { .tandt-ai-roadmap__list { grid-template-columns: repeat(3, 1fr); border-top: none; border-left: 1px solid var(--tandt-border); } }
.tandt-ai-roadmap__item {
padding: var(--tandt-space-3);
border-bottom: 1px solid var(--tandt-border);
}
@media (min-width: 768px) { .tandt-ai-roadmap__item { border-bottom: 1px solid var(--tandt-border); border-right: 1px solid var(--tandt-border); } }
.tandt-ai-roadmap__num { display: block; font-family: var(--tandt-font-heading); font-weight: 700; color: var(--tandt-border); font-size: 1.3rem; margin-bottom: 0.3rem; }
.tandt-ai-roadmap__title { display: block; font-weight: 700; color: var(--tandt-navy); margin-bottom: 0.2rem; }
.tandt-ai-roadmap__text { display: block; color: var(--tandt-text-muted); font-size: 0.88rem; line-height: 1.5; }
/* ---------------------------------------------------------------------
Phase 10 — Search "no results" state.
--------------------------------------------------------------------- */
.tandt-search-empty {
max-width: 640px;
margin: 0 auto;
text-align: center;
padding: var(--tandt-space-5) 0;
}
.tandt-search-empty p { color: var(--tandt-text-muted); font-size: var(--tandt-fs-lg); margin-bottom: var(--tandt-space-3); }