/** Shopify CDN: Minification failed
Line 100:41 Unexpected "{"
**/
/* =====================================================================
BARRIER ACCESS — Contact page · rev 2026-08-05
---------------------------------------------------------------------
Four hooks the mockup needs that no Horizon setting exposes: the
callout's left accent bar, the contact cards' red top rule and shared
height, the form / sidebar split stacking at 1024px, and a scroll
offset so a linked-to section clears the sticky header.
Each hangs off a class typed into the section's own "Custom CSS class"
field (sections/section.liquid → snippets/section.liquid), so it
follows the section rather than a generated Shopify id.
The contact form itself is Horizon's stock block on its default
fields, so nothing here touches it.
Values are the mockup's own tokens, resolved:
--red #C8102E · --safety #FFB800 · --line #E3E5E8 · --sp-16 16px
--sp-24 24px
===================================================================== */
/* ==========================================================
1. Freight-quote callout — left accent bar
----------------------------------------------------------
The group block exposes a border on all four sides or none, so the
mockup's single 4px safety-yellow edge has to come from here. Only
the callout section carries the class, and it holds exactly one
group block.
========================================================== */
.cst_contact_callout .group-block {
border-inline-start: 3px solid #c8102e;
}
/* ==========================================================
2. Contact cards — red top rule
----------------------------------------------------------
Same reason as the callout: `border-top: 3px solid var(--red)` on
.ccard is a single-edge border. Restricted to the section's direct
children so the cards' inner text blocks are untouched.
========================================================== */
.cst_contact_cards .section-content-wrapper > .group-block {
border-block-start: 3px solid #c8102e;
}
/* The mockup lays the cards out as a CSS grid, so they share a height
regardless of how long each note runs. Horizon drives a flex row's
align-items from the section's "Vertical alignment" setting, which offers
start / center / end but not stretch — so the grid's equal-height
behaviour has to be restored here. In the stacked mobile layout stretch is
also what we want: one full-width card per row. */
.cst_contact_cards .section-content-wrapper {
align-items: stretch;
}
/* Two cards per row between the theme's mobile breakpoint and 1024px, which
is where the mockup's own `.contactgrid` drops from four columns to two
(barrier-access-mockup-design/responsive.css). Below 750px the section's
"Stack on mobile" setting already takes over and gives one per row.
`--gap` is the section's own Gap setting, declared on the content wrapper
by snippets/gap-style.liquid and inherited here, so this keeps tracking
the setting if the merchant changes it. The range starts at 750px because
at 749px Horizon's own `mobile-column` rule still applies and a
flex-basis would size height instead of width. */
@media only screen and (min-width: 750px) and (max-width: 1024px) {
.cst_contact_cards .section-content-wrapper {
flex-wrap: wrap;
}
.cst_contact_cards .section-content-wrapper > .group-block {
flex: 0 0 calc((100% - var(--gap, 24px)) / 2);
max-width: calc((100% - var(--gap, 24px)) / 2);
}
}
/* The card's phone/email value is a link inside a text block.
At rest it stays in the card's ink colour rather than taking the theme's
link colour (mockup `.ccard__value`), and it is underlined so it reads as
a link without relying on colour alone.
The underline has to be asked for explicitly: Horizon draws it but paints
it out with `text-decoration-color: transparent` on every `a`
(assets/base.css "Links"), re-enabling it only for links inside its own
paragraph styles. Thickness, offset and the colour transition are left to
the theme's `a` rule so this matches links elsewhere on the site.
On hover both the text and the underline go to the brand red — matching
the mockup's `a.ccard__value:hover { color: var(--red) }` — because
`text-decoration-color: currentcolor` follows the text. */
.cst_contact_cards .group-block a,
.custom-section-content a {
text-decoration: none;
}
.cst_contact_cards .group-block a:hover, {
color: #c8102e !important;
}
/* ==========================================================
3. Quote form — inputs
----------------------------------------------------------
Mockup `.qform__input` / `.qform__textarea`:
padding: 12px 16px font-size: 14px
background: #FFFFFF color: #1C1E21
border: 1px solid #E3E5E8 border-radius: 2px
focus → border-color: #C8102E
textarea: min-height 132px, resize: vertical, line-height 1.6
Colour, border width and corner radius are NOT here — they are the
contact-form block's own "Input" settings, written into
templates/page.contact.json, so a merchant can retune them in the
editor. Only the geometry the block exposes no setting for lives here.
Row gaps restate the mockup's 20px between rows / 16px within a row;
the block's own stylesheet drives both from one `--gap-md` token.
========================================================== */
.cst_contact_form .contact-form__form {
gap: 20px;
}
.cst_contact_form .contact-form__form-row {
gap: 16px;
}
/* Mockup `.qform__label`: 13px semibold ink, sitting 6px above its control
(the 6px is the block's own `.contact-form__field` gap). The red asterisk
is `.qform__req`. */
.cst_contact_form .contact-form__label {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: #1c1e21;
}
.cst_contact_form .contact-form__required {
color: #c8102e;
}
.cst_contact_form .contact-form__input {
font-family: var(--font-body--family);
font-size: 14px;
line-height: 1.6;
padding-inline: 16px;
}
/* Single-line fields are a flat 42px tall. Expressed in rem (42 ÷ 16) rather
than px so the control still grows with the root font size at 200% zoom
instead of clipping its own text (PROJECT_RULES § 4.3). `min-height` rather
than `height` for the same reason. Vertical padding goes to zero — an
centres its own text — so the box lands on exactly 42px. */
.cst_contact_form .contact-form__input:not(.contact-form__input--textarea) {
min-height: 2.625rem;
padding-block: 0;
}
/* The textarea keeps the mockup's box padding and its own 132px floor. */
.cst_contact_form .contact-form__input--textarea {
min-height: 132px;
padding-block: 12px;
resize: vertical;
}
/* The mockup swaps the border to brand red on focus. It also sets
`outline: none`; that half is deliberately not copied — a 1px border is not
an adequate focus indicator on its own (PROJECT_RULES § 4.4), so the
theme's focus ring stays on top of the red border. */
.cst_contact_form .contact-form__input:focus,
.cst_contact_form .contact-form__input:focus-visible {
border-color: #c8102e;
outline: none;
}
/* ==========================================================
4. Quote form — "Send Request" button
----------------------------------------------------------
Mockup `.btn.btn--red.btn--lg`: a red parallelogram, min 52px tall,
16px/32px padding, 15px semibold, with a diagonal sheen that sweeps
across on hover and a 2px nudge to the right.
The theme already implements exactly this shape as `.button--slanted`
(snippets/button.liquid), but blocks/contact-form-submit-button.liquid
has no "shape" setting to switch it on, and that file is vendored
Horizon code we are leaving untouched — so the geometry is restated
here. Colours are not: those come from the block's own button-custom
settings in templates/page.contact.json.
`display: inline-flex` is needed because the theme's `.button` uses
`display: grid`, which ignores `gap` on the main axis and would not
centre the label once a min-height is introduced.
========================================================== */
.cst_contact_form .submit-button {
/* 9px over a 52px height is the same ~12° lean as every other slant in
the design (mockup --clip-slant). */
--ba-submit-slant: 9px;
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
padding: 16px 32px;
border-radius: 0;
clip-path: polygon(
var(--ba-submit-slant) 0,
100% 0,
calc(100% - var(--ba-submit-slant)) 100%,
0 100%
);
font-size: 15px;
font-weight: 600;
line-height: 1;
}
/* Mockup `.btn--red:hover` → --red-dark. Stated here rather than as a
setting because this block, unlike the generic button block, exposes no
hover colours of its own. */
.cst_contact_form .submit-button:hover {
background-color: #a50d26;
}
/* Sheen sweep — mockup `.btn--red::after`. Purely decorative, so it and the
hover nudge are gated behind a fine pointer and prefers-reduced-motion. */
.cst_contact_form .submit-button::after {
content: '';
position: absolute;
inset-block: 0;
left: -60%;
z-index: 1;
width: 40%;
background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.18), transparent);
transform: skewX(-12deg);
pointer-events: none;
transition: left 0.55s ease;
}
@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
.cst_contact_form .submit-button:hover {
translate: 2px 0;
}
.cst_contact_form .submit-button:hover::after {
left: 130%;
}
.cst_contact_form .submit-button:active {
translate: 2px 0;
scale: 0.98;
transition-duration: 60ms;
}
}
/* ==========================================================
5. Quote form — the form / sidebar split stacks at 1024px
----------------------------------------------------------
The mockup's `.formsplit` goes single-column at 1024px, but a group
block's "Stack on mobile" setting only reaches down to the theme's
749px breakpoint — between the two the 62/38 split squeezes the form
inputs and the sidebar panels to unreadable widths.
Resetting flex-basis is not optional: Horizon sizes a custom-width
column with `flex-basis: var(--size-style-width)` (assets/base.css),
which in a column flex container would set its *height* instead.
The section holds exactly one row group — the split itself — so the
descendant selector cannot reach anything else.
========================================================== */
@media only screen and (min-width: 750px) and (max-width: 1024px) {
.cst_contact_form .layout-panel-flex--row {
flex-direction: column;
}
.cst_contact_form .layout-panel-flex--row > .group-block--width-custom {
flex-basis: auto;
width: 100%;
}
}
/* ==========================================================
6. Department rows — phone layout
----------------------------------------------------------
On desktop each row is name (26%) · description (fills, centred) ·
action (right edge). The description's centring is a block setting, not
a rule here.
Below the theme's 749px breakpoint the row becomes a column — Horizon's
own `mobile-column` — and the mockup changes three things
(barrier-access-mockup-design/responsive.css, `@media (max-width: 768px)`):
.dept gap: var(--sp-6) → 6px instead of the row's 16px
.dept__name }
.dept__desc } flex: 1 0 100% → full width, so everything reads
.dept__link } from the same left edge
Full width already comes from each column's "Width on mobile: Fill"
setting; the gap and the text alignment need these rules.
========================================================== */
@media only screen and (max-width: 749px) {
/* The gap has to be set as the `gap` property, not by redefining `--gap`:
snippets/gap-style.liquid writes `--gap` inline on the content wrapper,
and an inline custom property cannot be overridden from a stylesheet.
Two classes outrank `.layout-panel-flex`, which is where `gap: var(--gap)`
is declared (assets/base.css). */
.cst_dept_list .layout-panel-flex--row.mobile-column {
gap: 6px;
}
/* The description carries `--text-align: center` inline from its block
setting, which `.text-block > *` reads. Setting `text-align` on the child
directly overrides that for phones — no inline declaration exists on the
child to compete with — so name, description and action all align left. */
.cst_dept_list .text-block > * {
text-align: left;
}
}
/* ==========================================================
7. Anchor offset under the sticky header
----------------------------------------------------------
"Request a quote" links on this page (and from the header) jump to the
quote-form section by fragment. Without an offset the sticky header
covers the top of it. `:target` keeps this to the section actually
being jumped to — and keeps it off an id selector, which
PROJECT_RULES § 4.2 reserves for JS and anchors.
Both elements are listed because a fragment can land on either one:
.section — the section's own "Custom anchor ID" (#quote-form),
set on the inner element by snippets/section.liquid
.section-wrapper — Shopify's generated outer wrapper
(#shopify-section-), for anything still
linking that way
`--header-group-height` is the custom property layout/theme.liquid
keeps in sync with the real rendered header height, so this stays
correct if the header or announcement bar changes height.
========================================================== */
.section:target,
.section-wrapper:target {
scroll-margin-block-start: calc(var(--header-group-height, 120px) + 16px);
}