/* ============================================================
genstonecompanies.com — the 2026 visual language
============================================================
genstone-base carries the 2027 design; this site's content was authored
against the 2026 one. These are the treatments that differ — all of them,
found by diffing the two themes declaration by declaration.
It is a short file on purpose. Two rules kept it that way:
1. Override DECLARATIONS, never whole rules.
The first draft lifted each differing rule wholesale, and it broke two
things. A rule copied here arrives AFTER everything the parent loaded,
so a parent modifier of equal specificity that relied on source order
loses to the base rule it was written to override — that turned
headings on blue grounds black, because the markup is
`class="gs-heading-lg gs-heading-lg--white"` and the parent breaks that
0-1-0 tie by declaring `--white` second.
It also restated `.gs-btn { padding: 13px 26px }`, which defeated
`.gs-btn--lg`'s padding: the parent sets that through --gs-btn-pad-*
custom properties, and a literal padding here ignores them. Large
buttons quietly shrank.
2. Check the parent's mechanism before overriding a value. Most of what
looked different was not: the parent's button padding and border width
resolve to the same numbers through tokens, and `text-transform` moved
from `--lg` up to `.gs-btn`. Only the values below actually differ.
NOT here, deliberately: .site-header, .site-main and the hero statements
bar. Those were ported INTO genstone-base under scoped selectors of their
own, and re-stating the 2026 versions would fight the port.
The hero carousel is not here either — its 59 differing declarations are a
redesign, not a re-skin, and it is handled by the parent's hero style
option instead.
============================================================ */
/* ── Buttons ─────────────────────────────────────────────────
Pills, not squares. That is the whole difference: the parent's padding and
border width already resolve to this site's values through its tokens. */
.gs-btn {
border-radius: 50px;
}
/* .gs-btn--primary is orange here. genstone-base groups it with --blue in one
rule, which is why a selector-keyed diff missed this: the selector STRING
differs, so it read as "only in 2026" rather than as a value to override.
The hero's primary CTA hardcodes this class, so without it that button
comes out blue. */
.gs-btn--primary {
background: var(--gs-orange);
color: var(--gs-white);
border: 0;
}
.gs-btn--primary:hover {
background: var(--gs-orange-dark);
}
.gs-btn--ghost-navy:hover {
background: var(--gs-navy);
color: var(--gs-white);
}
/* ── Backgrounds ─────────────────────────────────────────────
Both grounds are a noise texture over a banded gradient, banded
differently in the two themes. */
.gs-bg--light {
background-image:
}
.gs-bg--blue {
background-image:
}
/* ── Headings and eyebrows ───────────────────────────────────
Both flip colour, and both have a parent modifier of equal specificity
that has to keep winning — see rule 1 above. */
.gs-heading-lg {
color: var(--gs-text-dark);
}
/* Re-stated so it still beats the rule above, as it does in the parent. */
.gs-heading-lg--white {
color: var(--gs-white);
}
.gs-eyebrow {
color: var(--gs-blue);
}
/* Same reason as .gs-heading-lg--white. */
.gs-eyebrow--light {
color: var(--gs-white);
}
/* The underline is a hand-drawn masked stroke here, not the parent's flat
2px bar, so the mask and the geometry it needs come across together. */
.gs-eyebrow::after {
height: 14px;
bottom: -18px;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
z-index: -1;
}
/* ── Gravity Forms ───────────────────────────────────────────
The form buttons mirror .gs-btn, so they follow it back to pills and to
the orange ramp. The parent already declares these !important; matching
that is the only way to reach the same declarations, not escalation. */
.gform-theme--foundation .gform_button,
.gform-theme--foundation .gform_next_button,
.gform-theme--framework .gform_button,
.gform-theme--framework .gform_next_button {
padding: 16px 32px !important;
border-radius: 50px !important;
border: 2px solid transparent !important;
background: linear-gradient(135deg, var(--gs-orange) 0%, var(--gs-orange-dark) 100%) !important;
}
.gform-theme--foundation .gform_button:hover,
.gform-theme--foundation .gform_next_button:hover,
.gform-theme--framework .gform_button:hover,
.gform-theme--framework .gform_next_button:hover {
background: linear-gradient(135deg, var(--gs-orange-dark) 0%, var(--gs-orange) 100%) !important;
}
.gform-theme--foundation .gform_previous_button,
.gform-theme--framework .gform_previous_button {
border-radius: 50px !important;
}
/* ── Hero ────────────────────────────────────────────────────
The Classic hero itself lives in genstone-base — it is a whole design, not
a re-skin, and belongs with the theme that offers the choice. This is the
one part of it that is this site's preference rather than the design's:
the parent draws the tagline in orange, and here it reads white and
regular-weight over the photograph.
Same specificity as the parent's rule (0-2-0), loaded after it, so it wins
on source order without out-specifying anything. */
.hero-carousel--style-classic .hero-carousel__tagline {
color: var(--gs-white);
font-weight: 400;
}
/* ── Universal Content ───────────────────────────────────────
The only block-level difference outside the hero. */
.universal-content__col-body ul {
list-style: disc;
}