works — and the page's primary
heading spent a fortnight as pasted HTML for no reason.
Responsive sizes now come from the widget's own typography controls, so the
`!important` font-size overrides that used to live here are gone with them.
`.at-accent` is the two-tone word, in both this heading and the closing
CTA's; the glow is scoped to the hero because only the hero wants it. */
.at-accent {
color: var(--amantec-cyan);
}
.at-hero-h1 .at-accent {
text-shadow: 0 0 34px rgba(22, 190, 207, 0.7);
}
/* Home hero — "Neo-HUD / Dark Ops" direction (AmanTec Tech Refresh design
canvas, Direction A), replacing the plainer Main-direction glow pass
above. Same wrapper-must-be-the-positioned-layer pattern as
.elementor-element-heromedia1 / .elementor-element-ctaglow: the widget
wrapper itself is made position:absolute, not a child div inside it.
Reused as-is (same id, same rule) on every inner page's Page Header —
see apply-neohud-inner-headers-2026-08-31.php — Elementor's generated
class is id-based, so one shared "herogrid1" id picks up this one rule
on all 13 pages with no per-page duplication. */
.elementor-element-herogrid1 {
position: absolute !important;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.at-hero-grid {
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(0deg, rgba(22,190,207,0.05) 0px, rgba(22,190,207,0.05) 1px, transparent 1px, transparent 42px),
repeating-linear-gradient(90deg, rgba(22,190,207,0.05) 0px, rgba(22,190,207,0.05) 1px, transparent 1px, transparent 42px);
}
.at-hero-glow {
position: absolute;
width: 640px;
height: 640px;
right: -160px;
top: -160px;
background: radial-gradient(circle, rgba(22,190,207,0.16) 0%, rgba(22,190,207,0) 70%);
}
/* Page Header positioning context — same gotcha as .elementor-element-
herosec1: Elementor containers don't get position:relative by default
the way widget wrappers do, so herogrid1's absolute layer needs an
explicit positioned/clipped ancestor here too. One page's header id per
selector since each inner page duplicates its own Page Header container
with its own id (see DESIGN.md's Page Header entry) rather than sharing
one template part. */
.elementor-element-aboutheader,
.elementor-element-trainheader,
.elementor-element-srvheader,
.elementor-element-gzheader,
.elementor-element-bsheader,
.elementor-element-sphheader,
.elementor-element-grcheader,
.elementor-element-aiheader,
.elementor-element-ftheader,
.elementor-element-opheader,
.elementor-element-newsheader,
.elementor-element-contactheader {
position: relative;
overflow: hidden;
}
.at-status-pill {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 auto 26px;
padding: 7px 16px;
border: 1px solid rgba(22,190,207,0.4);
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
color: #16BECF;
}
.at-status-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #16BECF;
box-shadow: 0 0 8px 2px rgba(22,190,207,0.8);
}
@media (prefers-reduced-motion: no-preference) {
.at-status-dot { animation: at-status-pulse 2.4s ease-in-out infinite; }
}
@keyframes at-status-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* Hero CTA buttons — clipped-corner, uppercase mono, matching the Neo-HUD
mockup. Elementor doesn't set clip-path/font-family/text-transform
itself on the button widget, so this wins without !important. */
.elementor-element-herobtn1 .elementor-button,
.elementor-element-herobtn2 .elementor-button {
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
text-transform: uppercase;
letter-spacing: 0.04em;
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
/* Trust bar — "Lead-in and flush run" (direction B on the AmanTec Trust Bar
canvas, chosen by the user 2026-09-01). Replaces the hairline-divided
data-strip treatment entirely.
WHY THE OLD ONE WENT. It was a rendering bug, not a style preference. It
depended on "1px flex_gap + the row's own background showing through =
dividers", which needed the five cells to split the row evenly via
`flex: 1 1 0`. That rule never applied: Elementor's
`.elementor-element { --flex-grow: initial; flex-grow: var(--flex-grow) }`
is an exact (0,1,0) tie that loads after this stylesheet and wins on
source order — the same tie already documented for `.elementor
img{height:auto}`, the icon-box title colour and the solutions grid.
Measured live: every cell computed `flex: 0 1 auto` and sized to its text
(741px of content in a 1140px row), so `space-between` scattered them and
the "1px dividers" rendered as four ~100px teal slabs.
Direction B removes the mechanism rather than repairing it: no dividers,
no cell backgrounds, no equal columns. Items sizing to their own content
is now CORRECT, so the broken `flex: 1 1 0` rule is deleted rather than
forced — there is nothing left for that reset to break. */
/* RETIRED 2026-10-04: the whole trust band was removed from Home. The ISO
certification statement had to go (the certificates are ICON Contracting's,
not AmanTec's), and a band holding a caption and one lone fact was not worth
keeping, so the `trustbar` section went with it. These rules and the
`trust-lead` / `trust-fact` / `trust-cert` widgets stay in the theme, unused,
so the band can be rebuilt without redesigning it — do not restore the old
"held within the group" certification wording with them.
The facts group right while the caption stays hard left. All of them are
siblings in one flex row, and `space-between` would spread the facts apart
too — so the row is flex-start with a 76px column gap for the rhythm
between facts, and the caption takes `margin-inline-end: auto` to push the
group to the far edge. Logical property: RTL is free. */
.elementor-element-tblabel {
margin-inline-end: auto;
}
.at-tb-lead {
max-inline-size: 190px;
font-size: 12.5px;
font-weight: 600;
line-height: 1.55;
color: #7FA3A8;
}
/* Colour stance is inverted from the old strip on purpose: the VALUE is
white and the label carries the cyan. On #080B0C that is ~19:1 for the
value, ~8.9:1 for the label and ~6.4:1 for the caption. */
.at-tb-value {
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-size: 26px;
font-weight: 700;
color: #FFFFFF;
line-height: 1.15;
}
.at-tb-label {
margin-top: 9px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #16BECF;
}
/* Gap steps down before the row can crowd — without this the row's minimum
width is 920px (616px of content + four 76px gaps) while the container is
only 964px at a 1024px viewport, so it overflows just above the 900px
breakpoint below.
`!important` on the custom properties, not a two-class selector: the
container's authored gap lands in Elementor's per-post stylesheet as
`.elementor-21 .elementor-element.elementor-element-trustbarrow
{ --column-gap: 76px }`, which is (0,3,0) and outranks anything reasonable
here. Same family of tie that broke this component in the first place,
one specificity step higher. */
@media (max-width: 1200px) {
.elementor-element-trustbarrow {
--column-gap: 44px !important;
}
}
@media (max-width: 900px) {
/* Below 900px the caption takes its own full-width line and the four
facts fall into a 2-up grid, rather than the old single stacked column
which ran the band to five tall rows on a phone. `align-items` is
overridden through the same variable Elementor drives it with, since
the container's authored `center` would centre the grid ROWS here. */
.elementor-element-trustbarrow {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
--column-gap: 28px !important;
--row-gap: 26px !important;
--align-items: start !important;
}
.elementor-element-tblabel {
grid-column: 1 / -1;
margin-inline-end: 0;
}
.at-tb-lead {
max-inline-size: none;
}
}
@media (max-width: 767px) {
/* 26px mono needs ~130px for "ISO 27001" and the 2-up columns are only
133px at 375px — it wrapped to two lines, which pushed that cell's
label out of line with the one beside it and made the row ragged.
20px fits the longest value on one line at the narrowest column. */
.at-tb-value {
font-size: 20px;
}
.at-tb-label {
margin-top: 7px;
font-size: 10px;
}
}
/* ===================== Neo-HUD clipped corners — sitewide ===================== */
/* Real bug fix: earlier passes added clip-path to a few buttons as plain
CSS but never removed the underlying Elementor border_radius SETTING
those same buttons still carried (border-radius rounds the box before
clip-path cuts it, so the corner rendered as a muddled rounded arc sitting
inside the diagonal cut line, not a clean cut). Fixed at the source in
apply-neohud-clip-corners-2026-08-31.php (every id below now has
border_radius:0 in its own Elementor settings, not fought here with
!important — there's no competing value left). This block adds the
diagonal notch itself, extended to every bordered card/box and button
found sitewide (see discover-radius-elements-2026-08-31.php's scan),
not just the hero/nav ones touched in earlier passes.
Two notch sizes only, not one per former radius value — a consistent cut
size reads as one deliberate system; 12px for the bigger/former-14px
cards, 10px for everything else (buttons and most cards). */
.elementor-element-solcard0,
.elementor-element-solcard1,
.elementor-element-solcard2,
.elementor-element-solcard3,
.elementor-element-solcard4,
.elementor-element-taicardlight,
.elementor-element-taicarddark,
.elementor-element-lp1,
.elementor-element-lp2,
.elementor-element-lp3,
.elementor-element-lp4,
.elementor-element-lp5,
.elementor-element-lp6,
.elementor-element-lc1,
.elementor-element-lc2,
.elementor-element-lc3,
.elementor-element-lc4,
.elementor-element-lc5,
.elementor-element-lc6,
.elementor-element-lc7,
.elementor-element-optile0,
.elementor-element-optile1,
.elementor-element-optile2,
.elementor-element-optile3,
.elementor-element-optile4,
.elementor-element-optile5 {
clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}
.elementor-element-herobtn1,
.elementor-element-herobtn2,
.elementor-element-taibtn1,
.elementor-element-taibtn2,
.elementor-element-ctabtn1,
.elementor-element-testicol1,
.elementor-element-testicol2,
.elementor-element-testicol3,
.elementor-element-teamcard0,
.elementor-element-teamcard1,
.elementor-element-traincard0,
.elementor-element-trainbtn0,
.elementor-element-traincard1,
.elementor-element-trainbtn1,
.elementor-element-traincard3,
.elementor-element-trainbtn3,
.elementor-element-traincard4,
.elementor-element-trainbtn4,
.elementor-element-traincard5,
.elementor-element-trainbtn5,
.elementor-element-traincard6,
.elementor-element-trainbtn6,
.elementor-element-traincard7,
.elementor-element-trainbtn7,
.elementor-element-traincard8,
.elementor-element-trainbtn8,
.elementor-element-srvcard0,
.elementor-element-srvcard1,
.elementor-element-srvcard2,
.elementor-element-srvcard3,
.elementor-element-srvcard4,
.elementor-element-srvcard5,
.elementor-element-srvcard6,
.elementor-element-srvcard7,
.elementor-element-srvctabtn,
.elementor-element-gzcapcard0,
.elementor-element-gzcapcard1,
.elementor-element-gzcapcard2,
.elementor-element-gzcapcard3,
.elementor-element-gzcapcard4,
.elementor-element-gzbencard0,
.elementor-element-gzbencard1,
.elementor-element-gzbencard2,
.elementor-element-gzbencard3,
.elementor-element-bssup0,
.elementor-element-bssup1,
.elementor-element-bssup2,
.elementor-element-bssup3,
.elementor-element-bsoff0,
.elementor-element-bsoff1,
.elementor-element-bsoff2,
.elementor-element-bsoff3,
.elementor-element-sphprod0,
.elementor-element-sphprod1,
.elementor-element-sphprod2,
.elementor-element-sphprod3,
.elementor-element-sphprod4,
.elementor-element-sphprod5,
.elementor-element-sphprod6,
.elementor-element-sphprod7,
.elementor-element-sphprod8,
.elementor-element-sphprod9,
.elementor-element-sphprod10,
.elementor-element-sphprod11,
.elementor-element-sphsol0,
.elementor-element-sphsol1,
.elementor-element-sphsol2,
.elementor-element-sphsol3,
.elementor-element-sphsol4,
.elementor-element-sphsol5,
.elementor-element-grccard0,
.elementor-element-grccard1,
.elementor-element-grccard2,
.elementor-element-grccard3,
.elementor-element-grccard4,
.elementor-element-aicard0,
.elementor-element-aicard1,
.elementor-element-aicard2,
.elementor-element-aicard3,
.elementor-element-aicard4,
.elementor-element-aicard5,
.elementor-element-ftcard0,
.elementor-element-ftcard0badge,
.elementor-element-ftcard0btn,
.elementor-element-ftcard1,
.elementor-element-ftcard1badge,
.elementor-element-ftcard1btn,
.elementor-element-ftcard2,
.elementor-element-ftcard2badge,
.elementor-element-ftcard2btn,
.elementor-element-ftcard3,
.elementor-element-ftcard3badge,
.elementor-element-ftcard3btn,
.elementor-element-ftcard4,
.elementor-element-ftcard4badge,
.elementor-element-ftcard4btn,
.elementor-element-ftcard5,
.elementor-element-ftcard5badge,
.elementor-element-ftcard5btn {
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
/* Contact form (WPForms) — same treatment extended to its fields/submit,
which aren't Elementor elements so they're handled here rather than via
the discovery script. border-radius:8px/10px (previously set with
!important in the Contact Us brand-alignment block above) replaced with
0 + the same 10px notch. */
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea,
.wpforms-container button[type="submit"].wpforms-submit {
border-radius: 0 !important;
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
/* Nav dropdown flyout panel — same notch, completing the popover's
consistency with every other box on the site.
FIXED 2026-09-01: this rule used to put `clip-path` on the panel itself,
which silently killed the third-level (sideways) submenu. `clip-path`
clips EVERY descendant, and a sideways flyout sits outside its parent's
box by definition — measured, the Services panel spans x 752-1068 while
its nested flyout renders at x 1066-1291, so all but a 2px sliver was
clipped away. The element was there and hoverable the whole time; it just
never painted, which is why it read as "the submenu stopped appearing".
The notch now lives on a `::before` background layer instead, so the panel
keeps its clipped corner without clipping what's inside it. Two details
that matter:
- `isolation: isolate` on the panel, so the layer's `z-index: -1` stays
inside the panel's own stacking context rather than sliding behind the
header. The alternative (positioning the rows above the layer with
`position: relative` on each `li`) would have made each row the
containing block for the nested flyout and moved it.
- The panel's own background/border/shadow move to the layer wholesale;
leaving them on the element would double the border. */
.site-header .site-navigation ul.menu li ul {
border-radius: 0;
clip-path: none;
background: transparent;
border: 0;
box-shadow: none;
isolation: isolate;
}
.site-header .site-navigation ul.menu li ul::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: #0B0F10;
border: 1px solid rgba(22, 190, 207, 0.22);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
pointer-events: none;
}
/* Button-widget correction: the 19 button ids above (Trainings, Training/AI
split, About Us "harder to breach" CTA, Cybersecurity Services closing
CTA, Free Cyber Tools "Learn More") were included in the tier-10 blanket
rule above using their WRAPPER id alone — that's correct for containers
(the card's visible border/background paints directly on the wrapper),
but a button widget's visible box is the CHILD `.elementor-button` link,
not the wrapper (which has no visible styling of its own). clip-path
isn't inherited, so the wrapper rule silently did nothing visible on
these — same root cause as the original hero-button bug, just missed on
the new ones because the wrapper's own border-radius WAS already zeroed
(Elementor settings, not this stylesheet) and so looked "fixed" at a
glance. Same fix as herobtn1/herobtn2's existing dedicated rule: target
the inner `.elementor-button` explicitly. */
.elementor-element-taibtn1 .elementor-button,
.elementor-element-taibtn2 .elementor-button,
.elementor-element-ctabtn1 .elementor-button,
.elementor-element-srvctabtn .elementor-button,
.elementor-element-trainbtn0 .elementor-button,
.elementor-element-trainbtn1 .elementor-button,
.elementor-element-trainbtn3 .elementor-button,
.elementor-element-trainbtn4 .elementor-button,
.elementor-element-trainbtn5 .elementor-button,
.elementor-element-trainbtn6 .elementor-button,
.elementor-element-trainbtn7 .elementor-button,
.elementor-element-trainbtn8 .elementor-button,
.elementor-element-ftcard0btn .elementor-button,
.elementor-element-ftcard1btn .elementor-button,
.elementor-element-ftcard2btn .elementor-button,
.elementor-element-ftcard3btn .elementor-button,
.elementor-element-ftcard4btn .elementor-button,
.elementor-element-ftcard5btn .elementor-button {
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
/* ===================== Home polish pass — 2026-09-01 =====================
/impeccable polish on Home: header, hero, and page-wide layout rhythm.
Every defect below was confirmed against the RENDERED page (computed
styles and measured contrast ratios), not inferred from source. Content
and settings changes for the same pass live in
build-scripts/polish-home-2026-09-01.php.
========================================================================= */
/* --- Header: the washed-grey bug ---------------------------------------
`rgba(5,8,9,0.82)` + `backdrop-filter` was written for a bar that sits
OVER dark content. As a solid strip above a white page body it had
nothing dark to sample, so it composited to a mid-grey at every scroll
position — visibly not the near-black DESIGN.md's Navigation entry
describes, and worst on mobile where the bar is tallest. The glass stays
(it is doing real work once the bar overlays content on scroll); the base
fill is raised so the bar reads as Neo-HUD chrome whatever is behind it.
Sitewide, because the bug is sitewide. */
.site-header {
background: rgba(8, 11, 12, 0.94);
}
/* --- Header: condense on scroll ---------------------------------------
The bar was one fixed height at every scroll position. Giving it a
resting height and a tighter scrolled height is what makes the overlay
below read as one authored move rather than a background colour
appearing. Logo and padding are the only things that move — the nav's
own rhythm is untouched. */
/* Only ONE layout-affecting property animates here — the bar's own
padding, which is the only honest way to change a bar's height. The logo
condenses via `transform: scale()` (composited, no layout) rather than a
second animated `height`, so the class toggle costs one reflow instead of
two. It is also a discrete state change on a scroll threshold, not a
per-frame animation. */
.site-header .header-inner {
padding-block: 22px;
transition: padding 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header .custom-logo,
.site-header .site-logo img {
transform-origin: left center;
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.at-scrolled .header-inner {
padding-block: 10px;
}
.site-header.at-scrolled .custom-logo,
.site-header.at-scrolled .site-logo img {
transform: scale(0.84);
}
/* Below 1200px: phones, tablets and small laptops (2026-09-21).
Hello Elementor caps the header at 500px (576–767), 600px (768–991) and
800px (992–1199) — theme.css, 500/600/800/1140 steps — and pads it 20px on
phones, while the page content runs to 30px from each edge at every one of
these widths. So the logo sat anywhere from 10px outside to ~200px inside
the headlines' edge. The header now runs the same width as the content
(30px side inset) at every width below 1200px, so the logo lines up with
the page.
992–1199 had a second problem: Hello switches to the full desktop menu at
992px, and the eight items (~870px) could not fit beside the logo — the
menu wrapped to a second row and the header grew to ~225px. That range
uses the hamburger panel instead. Even at full width the eight items only
fit from ~1135px, so the desktop menu starts at 1200px, where the 1140px
header is known to hold it.
`body` prefixes: Hello's rules are (0,2,0) for the width and (0,4,0)
!important for the toggle/nav display, and its stylesheets load after
this one. */
@media (max-width: 1199px) {
body .site-header .header-inner {
max-width: none;
padding-inline: 30px;
}
}
/* 1200px and up (2026-09-21): Hello's 1140px header is already exactly the
width of the page content (both centre a 1140px column), but its 20px
side padding pushed the logo 20px in from every headline and pulled the
menu's last item (Contact Us) 20px short of the content's right edge.
No side padding here, so both ends line up with the page. It also gives
the eight-item menu 40px more room. */
@media (min-width: 1200px) {
body .site-header .header-inner {
padding-inline: 0;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
body .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation {
display: none !important;
}
body .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder {
display: flex !important;
}
}
@media (max-width: 767px) {
/* the mobile bar measured 133px tall — a 46px logo floating in a field
of padding with the hamburger stranded opposite it. Logo raised back to
48px 2026-09-01 (see the 62px desktop note) while keeping the tightened
padding, so the bar gains height from the mark, not from empty space. */
.site-header .header-inner {
padding-block: 14px;
}
.site-header .custom-logo,
.site-header .site-logo img {
height: 48px;
}
.site-header.at-scrolled .header-inner {
padding-block: 8px;
}
}
/* --- Header: overlay the Home hero -------------------------------------
`position: fixed` rather than a negative pull-up on the content: fixed
takes the bar out of flow entirely, so the hero starts at document top
with no offset arithmetic to keep in sync with the header's real height
(which is font- and zoom-dependent, so any hard-coded offset would drift).
Every section below scrolls under it exactly as it did when sticky.
`at-overlay-header` is added by amantec_body_class() on the front page
only — see the comment there for why inner pages are excluded. */
body.at-overlay-header .site-header {
position: fixed !important;
inset-inline: 0;
top: 0;
background: transparent;
border-bottom-color: transparent;
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
body.at-overlay-header .site-header.at-scrolled {
background: rgba(8, 11, 12, 0.9);
border-bottom-color: rgba(22, 190, 207, 0.32);
}
/* Elementor's generated per-post CSS sets this padding at
`.elementor-NNN .elementor-element.elementor-element-herosec1`, which
outranks anything reasonable here — !important matches the tie-break
pattern already established throughout this file. Top padding now has to
clear the resting header as well as set the hero's own breathing room.
2026-10-04, with the hero at 100svh and its content centred: the gap
between the two paddings is what positions the copy. Flex centres it
between them, so `padding-top − padding-bottom` shifts it down by half that
difference, and setting the difference to the header's own height lands the
copy on the optical centre of the area the fixed header leaves free — at any
viewport height, which a fixed offset could not do. The header measures 139px
from 768px up (137px at 600px, 121px at 375px), so desktop takes 230/90 and
lands dead on centre. Below 767px the difference is pulled back to 100px
against a 121px header, which sits the copy 10px high on purpose: 150/50 is
the largest pair that keeps the whole copy block inside a 667px handset
(the hero itself measures 685px there, so only 18px of its bottom padding
falls below the fold, not a word of the copy), and a 10px lift costs less
than making the shortest phones scroll to reach the buttons. Measured at 375x812, 375x667, 768x1024 and
1024x768. A landscape phone (740x380) is past saving either way — the copy
alone is taller than the viewport, so the hero runs long and scrolls, which
is why these paddings are a floor and not a fixed height. */
body.at-overlay-header .elementor-element-herosec1 {
padding-top: 230px !important;
padding-bottom: 90px !important;
}
@media (max-width: 767px) {
body.at-overlay-header .elementor-element-herosec1 {
padding-top: 150px !important;
padding-bottom: 50px !important;
}
}
/* --- Hero: legibility over the video -----------------------------------
The old overlay was a single diagonal linear-gradient that reached its
LIGHTEST point (0.42 alpha) at 60% across — directly under the centred
copy column, and directly over the busiest part of the network-graph
footage. Recomposed as a scrim that actually tracks the composition: a
radial holding the copy column, plus a vertical pass that darkens under
the now-overlaying header and again into the trust bar below, so the
hero hands off to that dark strip without a seam. */
.at-hero-overlay {
background:
radial-gradient(ellipse 64% 60% at 50% 52%, rgba(3, 6, 7, 0.82) 0%, rgba(3, 6, 7, 0.52) 46%, rgba(3, 6, 7, 0) 78%),
linear-gradient(180deg, rgba(3, 6, 7, 0.88) 0%, rgba(3, 6, 7, 0.34) 24%, rgba(3, 6, 7, 0.42) 66%, rgba(3, 6, 7, 0.92) 100%);
}
/* --- Hero: the status pill was not centred -----------------------------
`.at-status-pill` is `display:inline-flex` with `margin: 0 auto` — auto
inline margins do nothing for an inline-level box, so the pill sat hard
against the container's inline-start edge while the H1, paragraph and
button row above and below it were all centred. It read as a bug, and at
1440px it was ~500px adrift of everything else. Centring belongs on the
parent, where inline-level content actually listens for it. */
.elementor-element-herostatus1 {
text-align: center;
}
.at-status-pill {
/* more space below the pill than the H1 gives its own paragraph, so the
lead reads as belonging to the headline and the pill reads as separate
chrome above it. */
margin: 0 0 30px;
}
/* --- Hero: lead paragraph measure --------------------------------------
Measured before the fix: 677 characters, centred across the full 1120px
content box — ~113 characters per line over 6 lines, against DESIGN.md's
65-75ch. On mobile it ran to 13 lines. The copy itself was split across
the sections it belongs to (see the build script); what remains is held
to a real measure here.
THE ONE DISCLOSED EXCEPTION TO THE ALL--IS-14PX RULE.
The hero lead is 17px (16px under 768px), not 14px. That rule is a
standing user directive that carries "no exceptions" — this exception was
offered, declined by default, and then granted directly by the user on
2026-09-01 after seeing the 14px version live. It exists because this is
the only
on the site sitting directly beneath 70px display type; at
14px the step between them was a five-fold jump with nothing in between,
which read as a caption rather than as the headline's own sentence. It is
NOT a reopening of the body tier: every other
on the site, including
the three section intros this same pass created, is still 14px. Do not
raise a second one without the same kind of direct instruction.
The measure has to go on the
, not the widget wrapper: Elementor's own
`.elementor-widget-text-editor` rule sets `max-width:100%` at a
specificity this can't beat, and max-inline-size IS max-width, so a
wrapper rule computes straight back to 100%. Note `ch` is relative to the
element's own font-size, so the 62ch measure holds at 62 characters
through the size bump — it did not need retuning alongside it. Leading
tightens from 1.8 to 1.65 because the looser value was compensating for
the smaller size and is too airy at 17px. */
.elementor-element-11ed3c1 p {
max-inline-size: 62ch;
margin-inline: auto;
/* 17px -> 14px, 2026-09-02: the "every
is 14px, no exceptions"
directive is now actually enforced sitewide. The measure stays at 62ch
because that is a ratio of the font size, not a fixed width, so the line
length stays right at the smaller size. */
line-height: 1.65;
color: rgba(255, 255, 255, 0.88);
}
@media (max-width: 767px) {
/* one step down, mirroring the H1's own 70 -> 48 -> 36 ramp. The 62ch cap
is deliberately left in place rather than released here: measured at
both ends of this range it never binds tighter than the column already
does (36ch at 375px, 72ch at 700px), so lifting it would be a rule that
changes nothing. */
}
/* More space above the H1 than below it — the paragraph belongs to the
heading, the pill does not. */
.elementor-element-11ed3c1 {
margin-top: 22px;
}
/* --- Solution cards: title colour now comes from the fixed kit ---------
The 2026-09-01 polish pass forced these to ink with !important, because
the icon-box widgets set no title colour and therefore inherited the
global kit's `primary` — which was cyan, measuring 2.26:1 on white against
a 3:1 large-text floor. The kit's `primary` is teal as of
fix-kit-primary-to-teal-2026-09-01.php, so the inherited value is now
correct (5.53:1) and the override is gone: these five cards match the 70
sibling card titles on Trainings / Services / GravityZone / Bitdefender /
Sophos / GRC / AI GRC instead of being the one page with ink titles.
Only the hover state still needs a rule. Elementor's own
`:has(:hover)` sets the title back to kit-primary on hover, which is now
the SAME teal as its rest state — i.e. no feedback at all on a card that
is entirely a link. Teal-dark restores the affordance and matches the
primary button's own hover. */
.elementor-element-solicon0:hover .elementor-icon-box-title,
.elementor-element-solicon1:hover .elementor-icon-box-title,
.elementor-element-solicon2:hover .elementor-icon-box-title,
.elementor-element-solicon3:hover .elementor-icon-box-title,
.elementor-element-solicon4:hover .elementor-icon-box-title,
.elementor-element-solcard0:hover .elementor-icon-box-title,
.elementor-element-solcard1:hover .elementor-icon-box-title,
.elementor-element-solcard2:hover .elementor-icon-box-title,
.elementor-element-solcard3:hover .elementor-icon-box-title,
.elementor-element-solcard4:hover .elementor-icon-box-title {
color: var(--amantec-teal-dark) !important;
}
/* --- Card index numbers were effectively invisible ---------------------
#D7DDDD on white measured 1.37:1. It is a quiet catalogue tag, not
decoration — if it is on the card it should be readable. Reuses the
Paper muted-text token (6.1:1) and drops a size/adds tracking so it still
reads as a tag rather than competing with the title. (#4A5456 is the
Paper-mode muted-ink literal used throughout this file; it has no token
of its own.) */
.at-solnum {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: #4A5456;
}
/* --- Section intros: the relocated hero sentences ----------------------
Same measure discipline as the hero lead — these are single sentences
under a 34px heading, so they get a real measure rather than the full
1320px container. */
.elementor-element-statsintro p,
.elementor-element-taiintro p,
.elementor-element-solintro p {
max-inline-size: 68ch;
margin-inline: auto;
}
/* ===================== Impact panel — overdrive, 2026-09-01 ===============
/impeccable overdrive on the Home Impact section. The problem was an energy
collapse, not a dull card style: a dark video hero, then the dark trust
strip, then four small white boxes. The user picked the "dark inset
instrument panel" direction of three offered — the section stays Paper, so
DESIGN.md's "don't convert a content section to dark without being asked"
holds, and only the stat row becomes Neo-HUD. A panel dropped into a light
band is a bookend moment, which is what Neo-HUD is for.
Motion brief, also the user's pick: ONE entrance, then completely still.
No scroll parallax, no ambient loop.
========================================================================= */
.at-panel {
position: relative;
background: #080B0C;
border: 1px solid rgba(22, 190, 207, 0.28);
/* Safe to clip here, unlike the nav flyout: nothing escapes this box, and
the sweep below is REQUIRED to be clipped by it. See DESIGN.md Shapes
for the rule this is the good side of. */
border-radius: 0;
clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
overflow: hidden;
isolation: isolate;
}
.at-panel-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.at-stat {
padding: 40px 30px 38px;
border-inline-start: 1px solid rgba(22, 190, 207, 0.16);
}
.at-stat:first-child {
border-inline-start: 0;
}
.at-stat-num {
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-size: 46px;
font-weight: 700;
line-height: 1.15;
color: #FFFFFF;
letter-spacing: -0.01em;
}
/* Labels are Title-case here, not the uppercase+tracked register the trust
bar's labels use. Deliberate: these run to 45+ characters ("Hours Spent
Training Organizations and Individuals") and wrap to three lines, where
uppercase with 0.1em tracking stops being readable. Same cyan, same role,
readable at the length this content actually is. */
.at-stat-label {
margin-top: 14px;
font-size: 12.5px;
font-weight: 600;
line-height: 1.55;
letter-spacing: 0.01em;
color: #16BECF;
}
/* --- The odometer ------------------------------------------------------
Cells are sized in `em`, so the roll distance scales with font-size and the
strips stay aligned through every breakpoint and any resize mid-animation —
a px height measured once at build time would not. */
.at-od {
display: inline-flex;
align-items: flex-start;
}
.at-od-win {
display: inline-block;
overflow: hidden;
height: 1.15em;
line-height: 1.15;
}
.at-od-strip {
display: block;
transform: translateY(0);
}
.at-od-cell {
display: block;
height: 1.15em;
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.at-od-static {
display: inline-block;
line-height: 1.15;
}
.at-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --- The sweep ---------------------------------------------------------
A single pass of cyan across the readout. Each column's digits begin
rolling as it crosses them (delays are set in JS), so this reads as one
instrument powering on rather than as two unrelated effects. */
.at-panel-sweep {
position: absolute;
inset-block: 0;
inset-inline-start: -240px;
width: 240px;
z-index: 1;
pointer-events: none;
opacity: 0;
background: linear-gradient(
90deg,
rgba(22, 190, 207, 0) 0%,
rgba(22, 190, 207, 0.10) 40%,
rgba(22, 190, 207, 0.30) 50%,
rgba(22, 190, 207, 0.10) 60%,
rgba(22, 190, 207, 0) 100%
);
}
/* Hidden state is applied ONLY under `js-at-ready`, which the script adds
after confirming it can resolve the entrance — so a no-JS visitor never
meets an invisible panel. Same guard as the closing CTA's reveal. */
.at-panel.js-at-ready {
opacity: 0;
transform: translateY(14px);
transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.at-panel.js-at-ready.is-on {
opacity: 1;
transform: none;
}
.at-panel.js-at-ready .at-od-strip {
/* 20 = two full 0-9 cycles plus the target digit appended by the script. */
transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}
.at-panel.js-at-ready.is-on .at-od-strip {
transform: translateY(calc(-20 * 1.15em));
}
.at-panel.js-at-ready.is-on .at-panel-sweep {
animation: at-panel-sweep 720ms cubic-bezier(0.4, 0, 0.2, 1) 100ms 1 both;
}
/* The travel distance is the PANEL's width + the bar's own width, set as
`--at-sweep-x` by the script. It cannot be written in CSS: a percentage in
`translateX` resolves against the ELEMENT (240px here), not the parent, and
the `100vw` first written here overshot a 1140px panel by 540px — the panel
clips the overflow, so the sweep looked finished at ~68% of its duration
while the last column's digits had not started. The mistimed version read
as two unrelated effects, which is exactly what this entrance must not be. */
@keyframes at-panel-sweep {
0% { opacity: 0; transform: translateX(0); }
12% { opacity: 1; }
86% { opacity: 1; }
100% { opacity: 0; transform: translateX(var(--at-sweep-x, 120vw)); }
}
/* --- Responsive --------------------------------------------------------
2-up at tablet, 1-up on phones. Dividers move with the arrangement: the
inline border only belongs between columns, so the wrapped rows take a
block border instead of inheriting an inline one that would sit in the
wrong place. */
@media (max-width: 1024px) {
.at-stat-num { font-size: 40px; }
.at-stat { padding: 34px 26px 32px; }
}
@media (max-width: 900px) {
.at-panel-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.at-stat:nth-child(2n + 1) {
border-inline-start: 0;
}
.at-stat:nth-child(n + 3) {
border-block-start: 1px solid rgba(22, 190, 207, 0.16);
}
}
@media (max-width: 560px) {
.at-panel-grid {
grid-template-columns: minmax(0, 1fr);
}
.at-stat {
border-inline-start: 0;
padding: 28px 22px 26px;
}
.at-stat + .at-stat {
border-block-start: 1px solid rgba(22, 190, 207, 0.16);
}
.at-stat-num { font-size: 34px; }
.at-stat-label { margin-top: 10px; font-size: 12px; }
}
/* ===================== Single news item — 2026-09-01 =====================
Template: single.php (root of this child theme, so it claims single POSTS
only and leaves the 13 Elementor pages on the parent's part). Built from a
reviewed design canvas; layout is the site's existing inner-page
vocabulary rather than a new one.
========================================================================= */
/* hello-elementor's `.site-main` carries a max-width and auto inline margins
(it is built for a boxed content column). post_class() puts that class on
this template's too, which left the dark arrival band floating as an
inset 1140px rectangle with paper either side instead of running full-bleed
like every other Page Header on the site.
THREE classes, and the count is the whole point. The parent's rule is
`body:not([class*="elementor-page-"]) .site-main` in hello's separate
`theme.css` — an attribute selector inside :not() counts as a class, so it
is (0,2,1), and theme.css is enqueued AFTER this stylesheet. A plain
`.amantec-article` (0,1,0) and even `.site-main.amantec-article` (0,2,0)
both lose to it. Prefixing with the body's own `single-post` class reaches
(0,3,0), which wins outright with no !important.
It also sets that max-width inside four `@media (min-width: …)` blocks
(500/600/800/1140px); media queries add no specificity, so this one
unconditional rule beats all four without restating a single breakpoint.
Neutralised rather than dropping `site-main` from post_class(), so anything
else keyed to that class still applies. */
.single-post .site-main.amantec-article {
max-width: none;
width: 100%;
margin-inline: 0;
padding: 0;
background: var(--amantec-paper);
}
/* --- arrival band: the same Page Header pattern as the 12 inner pages --- */
.amantec-article-header {
position: relative;
overflow: hidden;
background: var(--amantec-ink);
/* 30px sides, not 20px (2026-09-21): the site header's logo and every
Elementor page's content sit 30px from the edge below 1200px, and the
header now matches them exactly, so articles were the one page type
10px off. Above 1200px the 1140px inner column centres either way. */
padding: 64px 30px 56px;
}
.amantec-article-header__deco {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
/* Reuses the hero's own decorative classes rather than redefining their
values — .at-hero-grid and .at-hero-glow are plain classes (only their
Elementor POSITIONING wrapper was id-scoped), so the one set of tokens
stays in one place. (A third layer, .at-hero-circuit, was removed sitewide
on 2026-09-02 at the user's request.) */
/* 1140px, not the 1400px the Page Header's Elementor wrapper reports: that
wrapper is 1400 wide but the CONTENT inside it resolves to Elementor's
1140 boxed container, which is where every other headline on the site
starts (x=150 at a 1440 viewport). Measured off the live inner pages
rather than read off the wrapper — the two disagree. */
.amantec-article-header__inner {
position: relative;
max-width: 1140px;
margin-inline: auto;
}
.amantec-article-title {
margin: 0;
max-inline-size: 980px;
font-size: 48px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--amantec-white);
text-wrap: pretty;
}
/* --- the article column ------------------------------------------------ */
.amantec-article-body {
max-inline-size: 68ch;
margin-inline: auto;
padding: 72px 30px 88px;
}
/* 17px, not the sitewide 14px: the user's explicit choice on the design
canvas, made against a 14px column set side by side at the same measure.
This is the SECOND disclosed exception to the All--Is-14px Rule, after
the Home hero lead, and it is scoped to article bodies — a 600-900 word
news story is the one content type on this site the 14px rule was never
written for. Everything outside `.amantec-article-body` is unaffected. */
.amantec-article-body p {
margin: 0 0 22px;
/* 17px -> 14px, 2026-09-02, under the sitewide "every
is 14px, no
exceptions" directive. Flagged to the user at the time: this is the one
place on the site where a larger size was doing real work — a news
article is long-form reading copy, and 14px justified at this measure is
harder to read than 17px was. Reverting is this one value.
The 68ch measure below is a ratio of the font size, so the line length
stays correct at the smaller size without touching it. */
font-size: 14px;
line-height: 1.75;
color: var(--amantec-ink);
/* Justified on the user's instruction 2026-09-01. `hyphens` is not
optional alongside it: justifying a 68ch column without hyphenation
opens visible rivers of white space between words, worst on the mobile
column where the measure drops to ~45 characters. The document's
`lang="en-US"` (set by WP in header.php) is what lets the browser
hyphenate at all — if this template is ever reused for Arabic, revisit
both properties together. */
text-align: justify;
-webkit-hyphens: auto;
hyphens: auto;
}
.amantec-article-body p:last-of-type {
margin-bottom: 0;
}
/* The dateline paragraph, tagged in single.php only when the first paragraph
really is one (see the detection note there). */
.amantec-article-body p.amantec-article-dateline {
/* Not justified and not hyphenated: it is one short line where justify
can only do harm, and a hyphenated place name would read as an error. */
text-align: start;
hyphens: manual;
margin-bottom: 30px;
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-size: 11.5px;
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #4A5456;
}
/* h2-h4 all appear as section headings across the six real posts (147 uses
h4 where h2 is meant), so all three are given a real step rather than
assuming the markup is semantically clean. More space above than below. */
.amantec-article-body h2,
.amantec-article-body h3,
.amantec-article-body h4 {
margin: 48px 0 16px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--amantec-ink);
text-wrap: pretty;
}
.amantec-article-body h2 { font-size: 28px; }
.amantec-article-body h3 { font-size: 24px; }
.amantec-article-body h4 { font-size: 21px; }
.amantec-article-body ul,
.amantec-article-body ol {
margin: 0 0 22px;
padding-inline-start: 22px;
font-size: 14px;
line-height: 1.75;
color: var(--amantec-ink);
}
.amantec-article-body li {
margin-bottom: 10px;
}
.amantec-article-body li::marker {
color: var(--amantec-teal);
}
.amantec-article-body strong {
font-weight: 700;
color: var(--amantec-ink);
}
/* One post leads with a 200x200 inline image; keep any image in the column
contained and never overflowing the measure. */
.amantec-article-body img {
max-width: 100%;
height: auto;
display: block;
margin: 6px 0 26px;
}
/* Embeds. WordPress's oEmbed drops a bare `