/* GLOBAL */
/* ==== */
html {
scroll-behavior: smooth;
}
#savecontent {
margin-top: -2px;
}
.anchor {
scroll-margin-top: 150px;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: inherit;
}
h1,
.h1 {
font-size: clamp(35px, 4.4vw, 46px);
}
h1.mega,
.h1.mega {
font-size: clamp(36px, 4.7vw, 70px);
}
h1.ultra,
.h1.ultra {
font-size: clamp(37px, 5.3vw, 95px);
}
h2,
.h2 {
font-size: clamp(32px, 4vw, 42px);
}
h3,
.h3 {
font-size: clamp(29px, 3.6vw, 37px);
}
h4,
.h4 {
font-size: clamp(26px, 3.2vw, 32px);
}
h5,
.h5 {
font-size: clamp(23px, 2.8vw, 27px);
}
h6,
.h6 {
font-size: clamp(20px, 2.4vw, 22px);
}
body {
font-size: clamp(15px, 2vw, 18px);
}
.btn {
white-space: normal;
}
a:hover img,
a.bg-img:hover a.bg-image:hover {
opacity: .85;
}
#savecontent img {
max-width: 100% !important;
height: auto !important;
}
.rightfloat {
float: right;
margin: 0 0 .5rem 1rem;
width: 40%;
}
@media (max-width: 767px) {
.rightfloat {
float: none;
margin: 0 0 1rem 0;
width: 100%;
}
}
.btn-primary {
color: white !important;
}
.round {
border-radius: 12px;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
background-color: rgba(0, 0, 0, 0.9);
padding: 1rem;
background-size: 20px;
}
@media(min-width: 1600px) {
.container {
max-width: 1300px;
}
}
@media(min-width: 1600px) {
.container.container-wide {
width: 1500px !important;
max-width: 1500px !important;
}
}
.product-image {
background-size: cover !important;
min-height: auto !important;
padding-bottom: 75%;
}
#savecontent form label {
font-weight: bold;
}
#savecontent form .checkbox-group label,
#savecontent form .radio-group label {
font-weight: normal;
}
.formbuilder-required {
color: red;
}
.text-right.addToCart {
text-align: left !important;
}
.blog-detail-page {
background: var(--light);
}
.blog-detail-page .blog {
border-radius: 12px;
padding: 1.5rem;
background: white;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}
.blog-detail-page .blog h4 {
margin-top: 1rem;
}
form li p {
margin-bottom: 0;
}
form label {
font-weight: bold;
}
form .checkbox-group label,
form .radio-group label {
font-weight: normal;
}
.formbuilder-checkbox,
.formbuilder-radio {
margin-bottom: 4px;
}
/* ==== HammerCat Home ==== */
/* All content headings share the display serif; header and footer live
outside #savecontent so they keep the theme sans */
#savecontent h1,
#savecontent h2,
#savecontent h3,
#savecontent h4,
#savecontent h5,
#savecontent h6,
#savecontent .h1,
#savecontent .h2,
#savecontent .h3,
#savecontent .h4,
#savecontent .h5,
#savecontent .h6 {
font-family: Georgia, "Playfair Display", "Times New Roman", serif;
}
/* Shared elegant bits (reusable on interior pages) */
.hc-eyebrow {
display: inline-flex;
align-items: center;
font-size: .72rem;
letter-spacing: .32em;
text-transform: uppercase;
font-weight: 600;
color: var(--primary-alt);
margin-bottom: 1.1rem;
}
.hc-eyebrow::before {
content: "";
display: inline-block;
width: 36px;
height: 1px;
background: var(--primary-alt);
margin-right: 14px;
}
.hc-eyebrow-c::after {
content: "";
display: inline-block;
width: 36px;
height: 1px;
background: var(--primary-alt);
margin-left: 14px;
}
.hc-display {
font-family: Georgia, "Playfair Display", "Times New Roman", serif;
font-weight: 400;
line-height: 1.15;
letter-spacing: -.01em;
margin-bottom: 1.1rem;
}
.hc-display em {
font-style: italic;
color: var(--primary-alt);
}
.hc-lead {
font-size: 1.12rem;
line-height: 1.7;
font-weight: 300;
}
.hc-lead-c {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* Hero carousel: height is fixed by CSS so caption length never changes it */
#hc-hero .carousel-item {
height: 74vh;
min-height: 480px;
max-height: 800px;
overflow: hidden;
}
@supports (height: 1svh) {
#hc-hero .carousel-item {
height: 74svh;
}
}
@media(min-width: 1200px){
#hc-hero .carousel-item {
height: 80vh;
}
}
#hc-hero .hc-hero-img,
#savecontent #hc-hero .hc-hero-img {
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: center;
}
#hc-hero .hc-hero-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
background:
linear-gradient(0deg, rgba(7, 13, 20, .38), rgba(7, 13, 20, 0) 32%),
linear-gradient(90deg, rgba(7, 13, 20, .66) 0%, rgba(7, 13, 20, .34) 46%, rgba(7, 13, 20, 0) 78%);
}
#hc-hero .hc-hero-caption {
max-width: 640px;
}
#hc-hero .hc-hero-kicker {
display: inline-flex;
align-items: center;
color: rgba(255, 255, 255, .78);
font-size: .72rem;
letter-spacing: .32em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 1rem;
}
#hc-hero .hc-hero-kicker::before {
content: "";
display: inline-block;
width: 34px;
height: 1px;
background: var(--primary-alt);
margin-right: 14px;
}
#hc-hero .hc-hero-title {
font-family: Georgia, "Playfair Display", "Times New Roman", serif;
font-weight: 400;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.12;
margin-bottom: 1.25rem;
text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
#hc-hero .hc-hero-list {
margin-bottom: 1.75rem;
}
#hc-hero .hc-hero-list li {
font-size: clamp(16px, 2.1vw, 19px);
letter-spacing: .01em;
padding: .3rem 0;
text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
#hc-hero .hc-hero-list i {
color: var(--primary-alt);
margin-right: .55rem;
}
#hc-hero .hc-hero-btn {
letter-spacing: .06em;
padding-left: 1.4rem;
padding-right: 1.4rem;
}
#hc-hero .carousel-indicators li {
width: 9px;
height: 9px;
border-radius: 50%;
border: 0;
opacity: .5;
}
#hc-hero .carousel-indicators .active {
opacity: 1;
}
@media (max-width: 767px) {
#hc-hero .carousel-control-prev,
#hc-hero .carousel-control-next {
display: none;
}
}
@media (max-width: 575px) {
#hc-hero .carousel-item {
height: 62vh;
height: 62svh;
min-height: 430px;
max-height: 620px;
}
#hc-hero .hc-hero-kicker {
display: none;
}
}
/* Intro */
.hc-stats {
display: flex;
margin: 1.75rem 0;
padding: 1.1rem 0;
border-top: 1px solid rgba(0, 0, 0, .15);
border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.hc-stat {
flex: 1 1 0;
min-width: 0;
text-align: center;
padding: 0 .5rem;
}
.hc-stat + .hc-stat {
border-left: 1px solid rgba(0, 0, 0, .15);
}
.hc-stat-num {
display: block;
font-family: Georgia, "Playfair Display", "Times New Roman", serif;
font-size: clamp(24px, 3vw, 34px);
line-height: 1.1;
color: var(--primary);
}
.hc-stat-label {
display: block;
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
margin-top: .35rem;
}
@media (max-width: 575px) {
.hc-stat {
padding: 0 .35rem;
}
.hc-stat-label {
font-size: .6rem;
letter-spacing: .1em;
}
}
.hc-intro-btns .btn {
margin: 0 .75rem .5rem 0;
}
.hc-intro-img {
box-shadow: 0 18px 44px rgba(10, 20, 30, .16);
}
/* Gallery tiles (clickable: hover = shadow + color only, no lift, no zoom) */
.hc-gal-tile {
display: block;
background: #fff;
color: #212529;
overflow: hidden;
box-shadow: 0 1px 3px rgba(10, 20, 30, .08);
transition: box-shadow .25s ease;
text-decoration: none;
}
.hc-gal-tile:hover,
.hc-gal-tile:focus {
color: #212529;
text-decoration: none;
box-shadow: 0 14px 34px rgba(10, 20, 30, .16);
}
.hc-gal-img {
position: relative;
overflow: hidden;
padding-bottom: 62%;
}
.hc-gal-img img,
#savecontent .hc-gal-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
object-fit: cover;
}
.hc-gal-body {
padding: 1.15rem 1.25rem 1.3rem;
}
.hc-gal-title {
margin-bottom: .3rem;
font-weight: 400;
transition: color .25s ease;
}
.hc-gal-tile:hover .hc-gal-title {
color: var(--primary);
}
.hc-gal-desc {
font-size: .95rem;
line-height: 1.55;
}
.hc-gal-cta {
margin-top: .9rem;
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
font-weight: 600;
color: var(--primary-alt);
}
.hc-gal-cta i {
margin-left: .3rem;
font-size: .65rem;
vertical-align: middle;
transition: transform .25s ease;
}
.hc-gal-tile:hover .hc-gal-cta i {
transform: translateX(4px);
}
/* Hero Ken Burns + slower crossfade.
Opacity animates on .carousel-item (Bootstrap fade), transform animates
on the inner img only: never both on one element or the compositor
drops to the main thread and it jitters.
The -next/-prev selectors start the zoom on the very first fade-in frame
and the identical animation value carries through the swap to .active,
so the motion never restarts mid-transition. */
#hc-hero .carousel-item {
transition-duration: 1.2s; /* doubled from Bootstrap's .6s; BS 4.4 reads this from CSS */
}
#hc-hero .carousel-item.active.carousel-item-left,
#hc-hero .carousel-item.active.carousel-item-right {
/* outgoing slide: hold full opacity beneath the incoming fade-over,
then release only after the 1.2s fade completes (BS hardcodes .6s) */
transition: opacity 0s 1.2s;
}
/* The platform's carousel CSS is Bootstrap 4.0-era: its fade has NO z-index
rules, so overlapping slides paint in DOM order. That only works going
forward; clicking back (or wrapping 8 to 1) puts the incoming slide UNDER
the held outgoing one: the fade happens invisibly, then hard-cuts.
These are the stacking rules Bootstrap 4.1+ ships: incoming above, outgoing below. */
#hc-hero .carousel-item.active,
#hc-hero .carousel-item-next.carousel-item-left,
#hc-hero .carousel-item-prev.carousel-item-right {
z-index: 1;
}
#hc-hero .carousel-item.active.carousel-item-left,
#hc-hero .carousel-item.active.carousel-item-right {
z-index: 0;
}
/* the platform CSS gives the arrows no z-index either (also added in BS 4.1),
so they must sit above the z-index:1 slides */
#hc-hero .carousel-control-prev,
#hc-hero .carousel-control-next {
z-index: 2;
}
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
#hc-hero .carousel-item.active .hc-hero-img,
#hc-hero .carousel-item-next .hc-hero-img,
#hc-hero .carousel-item-prev .hc-hero-img {
animation: hcKbIn 9.5s linear both;
}
#hc-hero .carousel-item:nth-child(even).active .hc-hero-img,
#hc-hero .carousel-item-next:nth-child(even) .hc-hero-img,
#hc-hero .carousel-item-prev:nth-child(even) .hc-hero-img {
animation-name: hcKbOut;
}
/* vary the zoom focal point so consecutive slides don't feel repetitive */
#hc-hero .carousel-item:nth-child(4n+1) .hc-hero-img {
transform-origin: 62% 42%;
}
#hc-hero .carousel-item:nth-child(4n+2) .hc-hero-img {
transform-origin: 35% 55%;
}
#hc-hero .carousel-item:nth-child(4n+3) .hc-hero-img {
transform-origin: 55% 65%;
}
#hc-hero .carousel-item:nth-child(4n) .hc-hero-img {
transform-origin: 42% 35%;
}
}
@keyframes hcKbIn {
from {
transform: scale(1);
}
to {
transform: scale(1.12);
}
}
@keyframes hcKbOut {
from {
transform: scale(1.12);
}
to {
transform: scale(1);
}
}
.sub-hero .container {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
/* ==== HammerCat interior pages ==== */
/* Page heroes use the platform sub-hero pattern (bg-image section +
.overlay.opacity-4.bg-black + extended py utilities), no custom CSS needed. */
/* Story page bits (reusable) */
.hc-xlist {
margin: 1.25rem 0 0;
}
.hc-xlist li {
padding: .35rem 0;
font-size: 1.05rem;
}
.hc-xlist i {
margin-right: .45rem;
}
.hc-figcap {
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
margin-top: .8rem;
}
.hc-pull {
font-family: Georgia, "Playfair Display", "Times New Roman", serif;
font-size: clamp(20px, 2.4vw, 27px);
line-height: 1.45;
margin: 1.25rem 0 1.5rem;
}
.hc-pull em {
font-style: italic;
color: var(--primary-alt);
}
/* Why HammerCat: benefit cards (not clickable, so no hover effects) */
.hc-why-card {
background: #fff;
border-top: 3px solid var(--primary-alt);
padding: 1.75rem 1.5rem 1.6rem;
box-shadow: 0 1px 3px rgba(10, 20, 30, .08);
}
.hc-why-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 1px solid var(--primary-alt);
border-radius: 50%;
color: var(--primary-alt);
font-size: 1.15rem;
margin-bottom: 1rem;
}
.hc-why-title {
font-weight: 400;
margin-bottom: .5rem;
}
/* eyebrow variant for dark photo bands: text goes white, rules stay accent */
.hc-eyebrow-light {
color: rgba(255, 255, 255, .85);
}
/* Owner Stories: five long-form stories, magazine style. Wide column
gets a lead + compact body text; narrow column holds the photo +
serif pull quote in a sticky-top wrapper that rides along while
the story scrolls, offset below the fixed site header. */
.hc-story-stick {
top: 120px;
}
.hc-story-body p,
.hc-story-body li {
font-size: .98rem;
line-height: 1.75;
}
.hc-story-body li {
padding: .15rem 0;
}
.hc-story-body > :last-child {
margin-bottom: 0;
}
/* Model pages: dimensions spec sheet (reused on all 4 model pages) */
.hc-specs {
background: #fff;
border-top: 3px solid var(--primary-alt);
box-shadow: 0 1px 3px rgba(10, 20, 30, .08);
padding: 1.4rem 2rem 1.7rem;
}
.hc-specs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 3.5rem;
}
.hc-spec {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1.25rem;
padding: .8rem 0;
border-bottom: 1px solid rgba(0, 0, 0, .07);
font-size: .95rem;
line-height: 1.55;
}
.hc-spec-label {
font-family: Georgia, "Playfair Display", "Times New Roman", serif;
font-size: 1.02rem;
color: var(--primary);
white-space: nowrap;
}
.hc-spec-value {
text-align: right;
}
.hc-spec-full {
grid-column: 1 / -1;
display: block;
border-bottom: 0;
padding-bottom: .2rem;
}
.hc-spec-full .hc-spec-label {
display: block;
margin-bottom: .3rem;
}
.hc-spec-full .hc-spec-value {
display: block;
text-align: left;
}
@media (max-width: 767px) {
.hc-specs {
padding: 1rem 1.25rem 1.4rem;
}
.hc-specs-grid {
grid-template-columns: 1fr;
}
}
/* Offset accent frame: quiet luxury border floating behind a photo */
.hc-frame {
position: relative;
margin: 0 12px 12px 0;
}
.hc-frame::after {
content: "";
position: absolute;
top: 14px;
left: 14px;
right: -12px;
bottom: -12px;
border: 1px solid var(--primary-alt);
border-radius: 12px;
z-index: -1;
}
/* Homepage owner-quote closer */
.hc-quoteband {
font-family: Georgia, "Playfair Display", "Times New Roman", serif;
font-size: clamp(24px, 3.2vw, 38px);
line-height: 1.35;
letter-spacing: -.01em;
max-width: 860px;
margin: 0 auto .75rem;
}
/* Homepage fleet: smaller model tiles, reusing the gallery tile pattern.
Bordered so they read as cards on the white section; 2x2 on phones. */
.hc-model-tile {
border: 1px solid rgba(0, 0, 0, .06);
}
.hc-model-tile .hc-gal-img {
padding-bottom: 66%;
}
.hc-model-tile .hc-gal-body {
padding: .9rem 1rem 1rem;
}
.hc-model-tile .hc-gal-title {
font-size: 1.15rem;
}
.hc-model-tile .hc-gal-desc {
font-size: .82rem;
line-height: 1.45;
}
.hc-model-tile .hc-gal-cta {
margin-top: .55rem;
font-size: .64rem;
letter-spacing: .18em;
}
@media (max-width: 575px) {
.hc-model-tile .hc-gal-body {
padding: .7rem .8rem .85rem;
}
.hc-model-tile .hc-gal-title {
font-size: .98rem;
}
.hc-model-tile .hc-gal-desc {
font-size: .74rem;
}
}
/* Compare page: vs chips (not clickable) + responsive comparison grid.
Div grid instead of a table element so rows stack into labeled blocks on phones. */
.hc-vs {
display: inline-block;
background: #fff;
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 50px;
padding: .5rem 1.2rem;
margin: .25rem .3rem;
font-size: .82rem;
letter-spacing: .05em;
}
.hc-vs-v {
font-family: Georgia, "Playfair Display", "Times New Roman", serif;
font-style: italic;
color: var(--primary-alt);
padding: 0 .15rem;
}
.hc-cmp {
background: #fff;
border-top: 3px solid var(--primary-alt);
box-shadow: 0 1px 3px rgba(10, 20, 30, .08);
overflow: hidden;
}
.hc-cmp-row {
display: grid;
grid-template-columns: 190px 1fr 1.1fr;
}
.hc-cmp-row + .hc-cmp-row {
border-top: 1px solid rgba(0, 0, 0, .07);
}
.hc-cmp-cat {
font-family: Georgia, "Playfair Display", "Times New Roman", serif;
font-size: 1.05rem;
color: var(--primary);
padding: 1.1rem 1.25rem;
}
.hc-cmp-other {
padding: 1.1rem 1.25rem;
color: #6c757d;
font-size: .95rem;
line-height: 1.6;
}
.hc-cmp-hammer {
padding: 1.1rem 1.25rem;
font-size: .95rem;
line-height: 1.6;
border-left: 1px solid rgba(0, 0, 0, .07);
}
.hc-cmp-headrow .hc-cmp-other,
.hc-cmp-headrow .hc-cmp-hammer {
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
padding-top: 1rem;
padding-bottom: 1rem;
}
.hc-cmp-headrow .hc-cmp-hammer {
color: var(--primary-alt);
}
.hc-cmp-mini {
display: block;
font-size: .64rem;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: .3rem;
}
.hc-cmp-hammer .hc-cmp-mini {
color: var(--primary-alt);
}
@media (max-width: 767px) {
.hc-cmp-headrow {
display: none;
}
.hc-cmp-row {
grid-template-columns: 1fr;
}
.hc-cmp-cat {
padding-bottom: 0;
}
.hc-cmp-other {
padding-top: .75rem;
padding-bottom: .5rem;
}
.hc-cmp-hammer {
border-left: 0;
padding-top: .5rem;
}
}
/* ==== Media & Awards page ==== */
/* Media tile: centered card with a logo up top. Card 1 is a plain div
(no URL), so hover styling is scoped to anchor tiles only. */
.hc-media-tile {
display: block;
height: 100%;
background: #fff;
border-top: 3px solid var(--primary-alt);
box-shadow: 0 1px 3px rgba(10, 20, 30, .08);
padding: 1.75rem 1.5rem 1.6rem;
color: inherit;
text-align: center;
}
a.hc-media-tile {
transition: box-shadow .25s ease;
}
a.hc-media-tile:hover,
a.hc-media-tile:focus {
color: inherit;
text-decoration: none;
box-shadow: 0 8px 22px rgba(10, 20, 30, .16);
}
.hc-media-logo {
display: flex;
align-items: center;
justify-content: center;
height: 90px;
max-width: 220px;
margin: 0 auto 1.1rem;
}
.hc-media-logo img,
#savecontent .hc-media-logo img {
max-height: 100%;
max-width: 100%;
width: auto;
}
.hc-media-desc {
display: block;
font-size: .92rem;
line-height: 1.6;
}
.hc-media-cta {
display: block;
margin-top: .9rem;
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
}
.hc-media-cta i {
margin-left: .35rem;
}
/* ==== Contact page: form styling ==== */
/* The CUSTFORM shortcode renders .form-group-1 through -5. The form
becomes a 2-col grid: everything spans full width by default, then
the four short fields (name/name/phone/email) pair up at md+. */
#hc-contact-2 form {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.4rem;
}
#hc-contact-2 form > * {
grid-column: 1 / -1;
}
#hc-contact-2 form .form-group {
margin-bottom: 1.35rem;
}
#hc-contact-2 form label {
font-size: .74rem;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: .4rem;
}
#hc-contact-2 form .form-control {
border: 1px solid rgba(0, 0, 0, .18);
border-radius: 8px;
padding: .65rem .9rem;
height: auto;
transition: border-color .2s ease, box-shadow .2s ease;
}
#hc-contact-2 form .form-control:focus {
border-color: var(--primary-alt);
box-shadow: 0 0 0 3px rgba(10, 20, 30, .07);
outline: 0;
}
#hc-contact-2 form textarea.form-control {
min-height: 150px;
}
#hc-contact-2 form button[type="submit"] {
padding: .7rem 2.6rem;
letter-spacing: .08em;
text-transform: uppercase;
font-size: .85rem;
}
@media (min-width: 768px) {
#hc-contact-2 form .form-group-1,
#hc-contact-2 form .form-group-2,
#hc-contact-2 form .form-group-3,
#hc-contact-2 form .form-group-4 {
grid-column: auto;
}
}
@media (max-width: 575px) {
#hc-contact-2 form button[type="submit"] {
width: 100%;
}
}
/* PAGE SPECIFIC */
/* FOOTER */