/**
* AGD Style Kit — depth, photography and the contact form.
*
* WHY THIS FILE EXISTS
*
* The site was measured before any of this was written. Weighted by the area
* each colour actually paints on the home page:
*
* #F5F7FA 4,324k near-white
* #FFFFFF 2,465k white
* #FFF7E8 1,385k cream
* #12171E 1,090k the one dark band
*
* So roughly 8.2 million pixels of near-white against 1.1 million of dark. The
* same measurement on knightgaragedoors.co.nz, the strongest local competitor,
* comes out almost exactly inverted: 7,595k of black against 1,129k of white,
* with a single saturated accent (#F7DE00) used sparingly on calls to action.
*
* The home page also carried four images over 80px wide, two of which were the
* logo. Knight carries twelve plus three background images; Dominator eleven
* plus fourteen. Two photographs on a page selling a visual product is the
* single biggest thing separating this site from the ones that look expensive.
*
* WHAT THIS DOES ABOUT IT
*
* Alternating bands. Dark sections carry the anchors — hero, calls to action,
* footer — and reading sections stay light, because long service copy set on
* a dark background measurably costs time on page. That is the deliberate
* difference from Knight, who put everything on black and keep their copy very
* short.
*
* Photography treatments, so a photo in a card is cropped, darkened and
* consistent rather than dropped in raw at whatever shape it happens to be.
*
* Firmer hover motion. The old states moved things 1 to 4px with no shadow
* change, which on a trackpad is close to imperceptible.
*
* SEO AND PERFORMANCE CONSTRAINTS THIS FILE HOLDS ITSELF TO
*
* Nothing above the fold is hidden and revealed — the largest contentful paint
* element is never opacity:0. No layout property is animated; every animation
* is transform and opacity only, so nothing here can cause layout shift. Every
* colour pairing that carries text is checked against WCAG AA in
* test/contrast.js and the test fails the build if a pairing drops below 4.5:1.
* No text is hidden from users but left for crawlers, anywhere.
*/
/* ==================================================================
* 1. A deeper palette
*
* Two new greys sit between the old --agd-dark and white, so a page can step
* down through four levels rather than jumping between white and near-black.
* The steel tint is the same hue family as a Colorsteel door, which is what
* most of the photography is of.
* ================================================================== */
.agd-sk {
--agd-steel: #232C38;
--agd-steel-2: #2E3A49;
--agd-graphite: #0D1219;
/* Warm off-white rather than #FFF. The page reads as paper instead of as a
lightbox, and it stops photographs looking like they have been cut out
and pasted on. */
--agd-paper: #F4F2EF;
--agd-paper-2: #EDEAE5;
/* Amber does the work of an accent colour here. It was already the brand's
button colour; it is simply used with more conviction. */
--agd-amber-soft: rgba(245, 166, 35, .14);
/* One scrim, used everywhere a photo sits behind text. Defined once so a
photo can never end up with text on it that has not been darkened. */
/* The middle stop is the one that matters and it started at .58. Composited
over a blown-out white sky — which is what half these photographs have in
them — that left paragraph text at 3.81:1, under the 4.5 WCAG asks for.
At .66 the same worst case is 5.05:1. The contrast test derives this
number from the value below rather than trusting a comment. */
--agd-scrim-mid: .66;
--agd-scrim: linear-gradient(180deg, rgba(13, 18, 25, .82) 0%, rgba(13, 18, 25, .66) 45%, rgba(13, 18, 25, .86) 100%);
--agd-scrim-side: linear-gradient(90deg, rgba(13, 18, 25, .94) 0%, rgba(13, 18, 25, .78) 45%, rgba(13, 18, 25, .48) 100%);
/* The focus ring has to be visible against whatever it lands on, and amber
on a light page is 1.81:1 — invisible. Dark by default, amber inside dark
and photographic bands, where dark would be the invisible one. */
--agd-focus: #12171E;
}
/* The body no longer sits on pure white. This is the single change that does
most of the "less bright" work. */
.agd-sk body,
body.agd-sk {
background: var(--agd-paper);
}
/* ==================================================================
* 2. Section rhythm
*
* Elementor sections get a class from the page builder; these are opt-in
* helpers applied by enhance.js on a repeating pattern, plus classes you can
* add by hand in Elementor's "CSS Classes" box.
* ================================================================== */
.agd-sk .agd-band-dark,
.agd-sk .agd-band-steel {
position: relative;
background: var(--agd-dark);
color: #fff;
}
.agd-sk .agd-band-steel { background: var(--agd-steel); }
/* Every text element inside a dark band sets its own colour. Inheriting from
the band loses to any theme rule that targets the element directly — which
is exactly how the quote card ended up with dark text on a dark panel. */
.agd-sk .agd-band-dark h1, .agd-sk .agd-band-steel h1,
.agd-sk .agd-band-dark h2, .agd-sk .agd-band-steel h2,
.agd-sk .agd-band-dark h3, .agd-sk .agd-band-steel h3,
.agd-sk .agd-band-dark h4, .agd-sk .agd-band-steel h4,
.agd-sk .agd-band-dark .elementor-heading-title,
.agd-sk .agd-band-steel .elementor-heading-title {
color: #fff;
}
.agd-sk .agd-band-dark p, .agd-sk .agd-band-steel p,
.agd-sk .agd-band-dark li, .agd-sk .agd-band-steel li,
.agd-sk .agd-band-dark .elementor-widget-text-editor,
.agd-sk .agd-band-steel .elementor-widget-text-editor {
/* #C9D2DD on #12171E is 10.8:1. Plenty of headroom, and softer than pure
white for a paragraph. */
color: #C9D2DD;
}
/* Alternating light sections, so even the light half of the page has rhythm
rather than being one continuous sheet. */
.agd-sk .agd-band-paper { background: var(--agd-paper); }
.agd-sk .agd-band-paper-2 { background: var(--agd-paper-2); }
/* A hairline between bands, so where one ends and the next begins is legible
even when two light bands meet. */
.agd-sk .agd-band-paper + .agd-band-paper,
.agd-sk .agd-band-paper-2 + .agd-band-paper-2 {
border-top: 1px solid rgba(23, 25, 28, .07);
}
/* ==================================================================
* 3. Photography
*
* Every photo used as a background goes through the same treatment: cover,
* centred, with the scrim over it. The scrim is not decoration — it is what
* makes white text on an unpredictable photograph legible, and it is applied
* as a pseudo-element so the photo itself is never filtered (a CSS filter on
* a large image is a per-frame cost on scroll).
* ================================================================== */
.agd-sk .agd-photo-band {
position: relative;
background-color: var(--agd-graphite);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #fff;
isolation: isolate;
}
.agd-sk .agd-photo-band::before {
content: '';
position: absolute;
inset: 0;
background: var(--agd-scrim);
z-index: 0;
pointer-events: none;
}
/* Everything the section actually contains sits above the scrim. */
.agd-sk .agd-photo-band > * { position: relative; z-index: 1; }
.agd-sk .agd-photo-band.is-side::before { background: var(--agd-scrim-side); }
.agd-sk .agd-photo-band h1,
.agd-sk .agd-photo-band h2,
.agd-sk .agd-photo-band h3,
.agd-sk .agd-photo-band .elementor-heading-title { color: #fff; }
.agd-sk .agd-photo-band p,
.agd-sk .agd-photo-band li { color: #E6EBF1; }
/* On a phone the scrim goes heavier. A photo that reads fine behind a headline
at 1400px is a busy mess behind the same headline wrapped onto four lines. */
@media (max-width: 780px) {
.agd-sk .agd-photo-band::before,
.agd-sk .agd-photo-band.is-side::before {
background: linear-gradient(180deg, rgba(13, 18, 25, .88) 0%, rgba(13, 18, 25, .78) 100%);
}
}
/* Images inside cards and widgets: one shape, cropped, never distorted.
aspect-ratio plus object-fit is what stops a portrait phone photo from
making one card in a row twice as tall as its neighbours. */
.agd-sk .agd-shot,
.agd-sk .service-card img,
.agd-sk .door-card img,
.agd-sk .post-card img,
.agd-sk .elementor-widget-image-box .elementor-image-box-img img {
width: 100%;
/* height:auto is doing real work here, not tidying up. An ![]()
carrying
width and height attributes gets a used height from the attribute, and
aspect-ratio only applies when one of the two dimensions is auto — so
without this the card images rendered 366px wide by a literal 675px
tall, which is a portrait crop of a landscape photo. */
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
border-radius: var(--agd-radius) var(--agd-radius) 0 0;
}
/* A photo needs an edge against a light background or it floats. */
.agd-sk .agd-shot { box-shadow: inset 0 0 0 1px rgba(23, 25, 28, .08); }
/* Card copy sets its own colour, like everything else here. Without this the
theme's blanket `.entry-content p { color:#333 }` wins the tie on
specificity by being declared later, and card text ends up a different grey
from every other paragraph on the page — which is precisely the kind of
quiet inconsistency that reads as "unfinished" without anyone being able to
say why. */
.agd-sk .agd-card p,
.agd-sk .agd-card li,
.agd-sk .service-card p,
.agd-sk .door-card p,
.agd-sk .post-card p { color: var(--agd-body); }
.agd-sk .agd-card h3,
.agd-sk .service-card h3,
.agd-sk .door-card h3,
.agd-sk .post-card h3 { color: var(--agd-ink); }
/* ==================================================================
* 4. Cards with real depth
* ================================================================== */
.agd-sk .service-card,
.agd-sk .door-card,
.agd-sk .post-card,
.agd-sk .elementor-widget-icon-box .elementor-icon-box-wrapper,
.agd-sk .agd-card {
background: #fff;
border: 1px solid rgba(23, 25, 28, .09);
border-radius: var(--agd-radius);
box-shadow: 0 1px 2px rgba(23, 25, 28, .04), 0 6px 16px rgba(23, 25, 28, .06);
overflow: hidden;
transition: transform .22s cubic-bezier(.2, .7, .3, 1),
box-shadow .22s cubic-bezier(.2, .7, .3, 1),
border-color .22s ease;
}
/* ==================================================================
* 5. Hover, with some conviction
*
* The previous states moved a card 4px and a button 1px, with no shadow
* change. On a trackpad that is close to invisible. These lift further, deepen
* the shadow, warm the border and — where there is a photo — push it in very
* slightly, which is the treatment that reads as "expensive" on trade sites.
*
* Only transform, box-shadow, border-color and opacity are animated. None of
* those trigger layout, so none of this can contribute to layout shift.
* ================================================================== */
@media (hover: hover) and (pointer: fine) {
.agd-sk .service-card:hover,
.agd-sk .door-card:hover,
.agd-sk .post-card:hover,
.agd-sk .agd-card:hover,
.agd-sk .elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
transform: translateY(-6px);
box-shadow: 0 8px 16px rgba(23, 25, 28, .08), 0 24px 48px rgba(23, 25, 28, .16);
border-color: rgba(245, 166, 35, .55);
}
/* The photo inside a hovered card. overflow:hidden on the card is what
turns this into a crop rather than a bulge. */
.agd-sk .service-card:hover .agd-shot,
.agd-sk .door-card:hover .agd-shot,
.agd-sk .post-card:hover .agd-shot,
.agd-sk .agd-card:hover .agd-shot,
.agd-sk .agd-card:hover img,
.agd-sk .service-card:hover img,
.agd-sk .door-card:hover img {
transform: scale(1.06);
}
.agd-sk .agd-shot,
.agd-sk .service-card img,
.agd-sk .door-card img,
.agd-sk .post-card img,
.agd-sk .agd-card img {
transition: transform .5s cubic-bezier(.2, .7, .3, 1);
will-change: transform;
}
/* Buttons: lift, deepen, and darken. */
.agd-sk .elementor-button:hover,
.agd-sk .btn:hover,
.agd-sk .wpcf7 input[type="submit"]:hover,
.agd-sk .agd-cta:hover {
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(23, 25, 28, .22);
}
.agd-sk .btn-accent:hover,
.agd-sk .wpcf7 input[type="submit"]:hover {
background: var(--agd-amber-dark);
}
/* A menu item that tells you it is a target. */
.agd-sk .primary-menu > li > a::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: 6px;
height: 2px;
background: var(--agd-amber);
transform: scaleX(0);
transform-origin: left;
transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
.agd-sk .primary-menu > li > a { position: relative; }
.agd-sk .primary-menu > li:hover > a::after,
.agd-sk .primary-menu > li.current-menu-item > a::after { transform: scaleX(1); }
}
.agd-sk .elementor-button,
.agd-sk .btn,
.agd-sk .agd-cta {
transition: transform .18s cubic-bezier(.2, .7, .3, 1),
box-shadow .18s cubic-bezier(.2, .7, .3, 1),
background-color .18s ease;
}
/* Someone who has asked their operating system to stop moving things gets a
colour change and nothing else. Required by WCAG 2.3.3, and it is also the
setting people with vestibular disorders actually rely on. */
@media (prefers-reduced-motion: reduce) {
.agd-sk *,
.agd-sk *::before,
.agd-sk *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
.agd-sk .service-card:hover,
.agd-sk .door-card:hover,
.agd-sk .post-card:hover,
.agd-sk .agd-card:hover,
.agd-sk .elementor-button:hover,
.agd-sk .btn:hover { transform: none !important; }
.agd-sk .agd-card:hover img,
.agd-sk .agd-shot { transform: none !important; }
}
/* ==================================================================
* 6. The contact form
*
* Measured on the live page before rewriting: the form wrapper had no padding,
* no background and no card — it sat in white space with the left half of the
* page empty. The fields carried a 0.606px border, which is a sub-pixel value
* that browsers round inconsistently, so the inputs barely read as inputs at
* all. The submit button had no font-size of its own, so it rendered at the
* browser default of 13.3px next to 16px fields.
*
* That is the whole of "the padding is not correct and it looks bland".
* ================================================================== */
.agd-sk .wpcf7 {
background: #fff;
border: 1px solid rgba(23, 25, 28, .10);
border-radius: var(--agd-radius-lg);
box-shadow: 0 2px 6px rgba(23, 25, 28, .05), 0 18px 40px rgba(23, 25, 28, .10);
padding: clamp(20px, 2.2vw, 34px);
}
/* A form on a dark band gets the inverse treatment rather than a white slab. */
.agd-sk .agd-band-dark .wpcf7,
.agd-sk .agd-photo-band .wpcf7 {
background: rgba(255, 255, 255, .04);
border-color: rgba(255, 255, 255, .16);
backdrop-filter: blur(6px);
}
.agd-sk .wpcf7 label {
display: block;
font-family: var(--agd-font-head);
font-weight: 600;
font-size: .86rem;
letter-spacing: .01em;
color: var(--agd-ink);
margin: 0 0 6px;
}
.agd-sk .agd-band-dark .wpcf7 label,
.agd-sk .agd-photo-band .wpcf7 label { color: #E6EBF1; }
/* The gap between fields was doing no work; this is the rhythm of the form. */
.agd-sk .wpcf7 p { margin: 0 0 18px; }
.agd-sk .wpcf7 p:last-of-type { margin-bottom: 0; }
.agd-sk .wpcf7 input[type="text"],
.agd-sk .wpcf7 input[type="email"],
.agd-sk .wpcf7 input[type="tel"],
.agd-sk .wpcf7 input[type="url"],
.agd-sk .wpcf7 input[type="number"],
.agd-sk .wpcf7 input[type="date"],
.agd-sk .wpcf7 select,
.agd-sk .wpcf7 textarea {
width: 100%;
box-sizing: border-box;
/* 14px vertical keeps the control at 48px, comfortably over the 44px
minimum touch target. */
padding: 14px 16px;
font-family: var(--agd-font-body);
font-size: 16px; /* 16px exactly: iOS zooms the page on focus below this */
line-height: 1.4;
color: var(--agd-ink);
background: #fff;
/* A whole pixel, and dark enough to see. The old 0.606px was a sub-pixel
border that rounded away to nothing on some displays and to 1px on
others; the grey that replaced it was 1.62:1 against the card, which
fails WCAG 1.4.11 — the boundary of a control needs 3:1, and on a white
field inside a white card the border is the only thing identifying it as
a control at all. #868E99 is 3.31:1. */
border: 1px solid #868E99;
border-radius: var(--agd-radius);
box-shadow: inset 0 1px 2px rgba(23, 25, 28, .05);
transition: border-color .16s ease, box-shadow .16s ease;
appearance: none;
}
.agd-sk .wpcf7 textarea { min-height: 150px; resize: vertical; }
.agd-sk .wpcf7 input[type="text"]:hover,
.agd-sk .wpcf7 input[type="email"]:hover,
.agd-sk .wpcf7 input[type="tel"]:hover,
.agd-sk .wpcf7 textarea:hover,
.agd-sk .wpcf7 select:hover { border-color: #5F6874; }
.agd-sk .wpcf7 input[type="text"]:focus,
.agd-sk .wpcf7 input[type="email"]:focus,
.agd-sk .wpcf7 input[type="tel"]:focus,
.agd-sk .wpcf7 input[type="url"]:focus,
.agd-sk .wpcf7 input[type="number"]:focus,
.agd-sk .wpcf7 select:focus,
.agd-sk .wpcf7 textarea:focus {
outline: none;
border-color: var(--agd-blue);
/* A ring rather than an outline, so the field does not change size and
nudge the rest of the form when it gains focus. */
box-shadow: 0 0 0 3px rgba(28, 117, 188, .22);
}
/* Keyboard users get a visible focus ring that does not depend on the colour
of the field. */
.agd-sk .wpcf7 input:focus-visible,
.agd-sk .wpcf7 textarea:focus-visible,
.agd-sk .wpcf7 select:focus-visible {
outline: 3px solid var(--agd-focus);
outline-offset: 2px;
}
/* Inside a dark band the dark ring would be the invisible one, so the token
flips to amber — 8.88:1 against the band. */
.agd-sk .agd-band-dark,
.agd-sk .agd-band-steel { --agd-focus: #F5A623; }
/* Over photography it flips again, to white. Amber measured 2.99:1 against the
scrim composited over a blown-out sky — just under the 3:1 a focus indicator
needs, and the one case where the brand colour cannot do the job. White is
6.06:1 against that same worst case. Being able to see where the keyboard
focus is beats being on-brand about it. */
.agd-sk .agd-photo-band { --agd-focus: #FFFFFF; }
.agd-sk .wpcf7 input[type="submit"] {
width: 100%;
min-height: 52px;
padding: 15px 28px;
font-family: var(--agd-font-head);
font-size: 1rem; /* was inheriting the browser default of 13.3px */
font-weight: 700;
letter-spacing: .01em;
color: var(--agd-ink);
background: var(--agd-amber);
border: 0;
border-radius: var(--agd-radius);
cursor: pointer;
box-shadow: 0 4px 12px rgba(245, 166, 35, .30);
}
@media (min-width: 600px) {
.agd-sk .wpcf7 input[type="submit"] { width: auto; min-width: 260px; }
}
/* Two-up on the short fields, so name and phone sit side by side instead of
forming a long column the visitor has to scroll. The wrapper is added by
hand in the Contact Form 7 template. */
@media (min-width: 640px) {
.agd-sk .wpcf7 .agd-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 18px;
}
/* A guard against a mis-paste, which has happened once for real.
*
* The instructions that shipped with the form template were in the same
* file as the template itself, and one line of that prose contained a
* literal . Pasted whole into the Form tab, the
* browser parsed that sentence as an opening tag with no closing one — so
* the row swallowed the entire rest of the form and laid the whole thing
* out, instructions and all, in two columns.
*
* This row is only ever meant to hold two fields. If it is holding three
* or more, something has gone wrong upstream, and a plain stacked form is
* a far better failure than a mangled two-column one. Browsers without
* :has() ignore this and behave as before, which is no worse than they
* did. */
.agd-sk .wpcf7 .agd-form-row:has(> p:nth-of-type(3)) {
display: block;
}
}
/* Validation, which Contact Form 7 leaves almost unstyled. */
.agd-sk .wpcf7 .wpcf7-not-valid { border-color: #B32D2E; background: #FEF6F6; }
.agd-sk .wpcf7 .wpcf7-not-valid-tip {
display: block; margin-top: 6px;
font-size: .82rem; font-weight: 600; color: #B32D2E;
}
.agd-sk .wpcf7 .wpcf7-response-output {
margin: 20px 0 0 !important;
padding: 14px 16px !important;
border: 1px solid !important;
border-radius: var(--agd-radius) !important;
font-size: .9rem;
}
.agd-sk .wpcf7 form.sent .wpcf7-response-output {
border-color: #1E9E63 !important; background: #EFFAF4; color: #12613D;
}
.agd-sk .wpcf7 form.invalid .wpcf7-response-output,
.agd-sk .wpcf7 form.failed .wpcf7-response-output {
border-color: #B32D2E !important; background: #FEF6F6; color: #8A1F20;
}
/* The panel that fills the empty half of the contact page.
*
* Named .agd-contact-panel, not .agd-trust. The first version used the latter
* and collided head-on with the four-across proof-point bar already defined in
* theme.css, which is display:grid and text-align:center — so this panel came
* out as a narrow centred column with the van photo squeezed to 78px wide. Two
* components, two names. */
.agd-sk .agd-contact-panel {
background: var(--agd-dark);
color: #fff;
border-radius: var(--agd-radius-lg);
padding: clamp(20px, 2.2vw, 32px);
height: 100%;
}
.agd-sk .agd-contact-panel h3 { color: #fff; margin: 0 0 16px; font-size: 1.15rem; }
.agd-sk .agd-contact-panel dl { margin: 0; }
.agd-sk .agd-contact-panel dt {
font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
color: #93A1B2; margin: 16px 0 2px;
}
.agd-sk .agd-contact-panel dd { margin: 0; font-size: 1rem; color: #fff; }
.agd-sk .agd-contact-panel dd a { color: #fff; text-decoration: none; }
.agd-sk .agd-contact-panel dd a:hover { text-decoration: underline; }
/* ==================================================================
* 7. Breadcrumbs
*
* Handled in crumbs.css, which is loaded separately and is deliberately not
* scoped under .agd-sk. Everything in this file only applies when the restyle
* is being shown, which during preview means staff only — and a removal the
* owner asked for should not be invisible to the public while visible to them.
* The reasoning about why this costs nothing in search lives there too.
* ================================================================== */
/* ==================================================================
* 8. Small things that add up
* ================================================================== */
/* Section padding that scales, so a band is generous on a desktop and not
wasteful on a phone. */
.agd-sk .agd-band-dark,
.agd-sk .agd-band-steel,
.agd-sk .agd-photo-band,
.agd-sk .agd-band-paper,
.agd-sk .agd-band-paper-2 {
padding-top: clamp(48px, 6vw, 96px);
padding-bottom: clamp(48px, 6vw, 96px);
}
/* An eyebrow above a heading — small, amber, spaced. Cheap, and it is most of
what makes a section header look designed rather than typed. */
.agd-sk .agd-eyebrow {
display: block;
font-family: var(--agd-font-head);
font-size: .74rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--agd-amber);
margin: 0 0 10px;
}
/* A rule that is not just a grey line. */
.agd-sk .agd-rule {
width: 56px; height: 4px; border: 0; border-radius: 2px;
background: var(--agd-amber);
margin: 0 0 22px;
}
/* Selection colour, because the default blue clashes with the amber. */
.agd-sk ::selection { background: rgba(245, 166, 35, .3); color: var(--agd-ink); }