+ attribution
.
Squarespace also draws a 6px partial "stroke" on text blocks. We wrap the
whole container in a clean white card, tuck the decorative mark inside the
top-left corner, and pull attribution into the card footer with readable
contrast. Scoped to the testimonials collection + fluid-engine only.
========================================================================= */
/* Kill Squarespace partial stroke borders on testimonial text blocks */
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .sqs-block-html [id^="block-"] {
--stroke-thickness: 0px !important;
--stroke-style: none !important;
}
/* Card shell — quote + attribution together (require attribution sibling) */
#collection-685e34beddf4302d026ea7f7
.fluid-engine .fe-block .sqs-block-html:has(
.sqs-html-content > p.sqsrte-large:first-child + p:not(:empty)
)
.sqs-text-block-container {
background: var(--fortezza-white) !important;
border: 1px solid var(--fortezza-line) !important;
border-top: 3px solid var(--fortezza-gold) !important;
border-radius: var(--fortezza-radius-lg) !important;
box-shadow: var(--fortezza-shadow-md) !important;
padding: clamp(1.4rem, 2.6vw, 2.1rem) !important;
height: 100%;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
/* Quote body */
#collection-685e34beddf4302d026ea7f7
.fluid-engine .fe-block .sqs-html-content > p.sqsrte-large:first-child {
position: relative;
font-family: "PT Serif", Georgia, serif;
font-size: clamp(1.05rem, 1.45vw, 1.22rem);
line-height: 1.68;
color: hsla(0, 6%, 20%, 1) !important;
background: transparent !important;
border: none !important;
border-left: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 0 0.5rem;
padding: 0.15rem 0 0 2.35rem;
}
/* Decorative open-quote — inside testimonial quote cards only (not footer) */
#collection-685e34beddf4302d026ea7f7
.fluid-engine .fe-block .sqs-block-html:has(
.sqs-html-content > p.sqsrte-large:first-child + p:not(:empty)
)
.sqs-html-content > p.sqsrte-large:first-child::before {
content: "\201C";
position: absolute;
top: -0.12rem;
left: 0;
font-size: clamp(2.2rem, 4vw, 2.85rem);
line-height: 1;
font-family: "Marcellus", Georgia, serif;
color: var(--fortezza-gold);
opacity: 0.5;
pointer-events: none;
}
/* Attribution — inside card footer, high contrast */
#collection-685e34beddf4302d026ea7f7
.fluid-engine .fe-block .sqs-html-content > p.sqsrte-large:first-child + p:not(:empty) {
font-family: "Marcellus", Georgia, serif;
font-size: 0.92rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fortezza-charcoal) !important;
margin: 0.85rem 0 0;
padding-top: 0.85rem;
border-top: 1px solid var(--fortezza-line);
text-align: right;
}
#collection-685e34beddf4302d026ea7f7
.fluid-engine .fe-block .sqs-html-content > p.sqsrte-large:first-child + p:not(:empty)::before {
content: "— ";
color: var(--fortezza-gold);
}
/* Hide empty spacer paragraphs after attribution */
#collection-685e34beddf4302d026ea7f7
.fluid-engine .fe-block .sqs-html-content > p:empty,
#collection-685e34beddf4302d026ea7f7
.fluid-engine .fe-block .sqs-html-content > p[data-rte-preserve-empty="true"]:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Circular project photos — framed, not flat */
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .sqs-block-image .sqs-image-content,
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .fluid-image-component-root {
border-radius: 50% !important;
overflow: hidden;
box-shadow: var(--fortezza-shadow-md);
border: 4px solid var(--fortezza-white);
outline: 1px solid var(--fortezza-line);
}
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .sqs-block-image img {
border-radius: 50%;
}
/* Make those circles TRUE circles. Squarespace masks them with an SVG
clip-path in objectBoundingBox units (which stretches to the element's box),
and this file adds border-radius:50% — but the source photos are portrait /
landscape and nothing forced a 1:1 box, so both were rendering as vertical
ovals in the static mirror (the shape-mask JS that squares the box never
runs). Force the framed wrapper + the clipped container to 1:1 and cover-crop
the image to its focal point so it reads as a clean, framed circular avatar. */
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .sqs-block-image .fluid-image-component-root,
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .sqs-block-image .sqs-image-content {
aspect-ratio: 1 / 1 !important;
width: 100% !important;
height: auto !important;
position: relative !important;
}
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .sqs-block-image .fluid-image-animation-wrapper {
height: 100% !important;
}
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .sqs-block-image .content-fill,
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .sqs-block-image img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
}
/* Injected page intro — not a quote card */
#collection-685e34beddf4302d026ea7f7 .fortezza-page-heading .sqs-html-content > p.sqsrte-large {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
color: hsla(0, 6%, 30%, 1) !important;
font-size: 1.12rem;
}
#collection-685e34beddf4302d026ea7f7 .fortezza-page-heading .sqs-html-content > p.sqsrte-large::before {
content: none !important;
}
/* Align quote blocks vertically in their grid cells */
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .sqs-block-html {
height: 100%;
}
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .sqs-block-alignment-wrapper,
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .sqs-block-content {
height: 100%;
}
/* =========================================================================
7b. Real Estate Representation — property case-study cards
-------------------------------------------------------------------------
The page lists 4 closed-deal case studies as plain text blocks: an h3
("Represented the Seller/Buyer") followed by a stack of sqsrte-large lines
(neighborhood, sale price, $/SqFt, size, address link). They read as a
flat data dump. Promote them into refined "case study" cards: a sand panel,
a gold rule above the title, a clear price hierarchy, and a map-link
treatment — scoped to the page's collection id so it never leaks.
========================================================================= */
/* Case-study card shell */
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-block-html:has(.sqs-html-content > h3:first-child)
.sqs-text-block-container {
background: var(--fortezza-white);
border: 1px solid var(--fortezza-line);
border-top: 3px solid var(--fortezza-gold);
border-radius: var(--fortezza-radius-lg);
box-shadow: var(--fortezza-shadow-sm);
padding: clamp(1.2rem, 2vw, 1.65rem);
height: 100%;
box-sizing: border-box;
}
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-block-html:has(.sqs-html-content > h3:first-child) {
height: 100%;
}
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-block-alignment-wrapper,
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-block-content {
height: 100%;
}
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-html-content > h3:first-child {
position: relative;
font-family: "Marcellus", Georgia, serif;
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--fortezza-charcoal);
padding-top: 0;
margin-bottom: 0.9rem;
}
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-html-content > h3:first-child::before {
content: "";
display: block;
width: 38px;
height: 2px;
background: var(--fortezza-gold);
margin: 0 0 0.85rem;
border-radius: 2px;
}
/* The detail rows: tighten the stack and give it a quiet panel */
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-html-content > h3:first-child ~ p.sqsrte-large {
font-size: 1rem;
line-height: 1.5;
margin: 0.18rem 0;
color: hsla(0, 6%, 26%, 1);
}
/* Emphasize the SOLD / price line (the only in the card body) */
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-html-content > h3:first-child ~ p.sqsrte-large strong {
font-family: "Marcellus", Georgia, serif;
letter-spacing: 0.06em;
color: var(--fortezza-gold);
}
/* The address map link — read as a refined footnote, not a body link */
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-html-content > h3:first-child ~ p.sqsrte-large a {
font-family: "PT Serif", Georgia, serif;
font-size: 0.95rem;
color: hsla(0, 6%, 32%, 1);
border-bottom: 1px solid hsla(40, 12%, 55%, 0.45);
text-decoration: none !important;
}
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-html-content > h3:first-child ~ p.sqsrte-large a:hover {
color: var(--fortezza-gold);
border-bottom-color: var(--fortezza-gold);
}
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-html-content > h3:first-child ~ p.sqsrte-large a span {
text-decoration: none !important;
}
/* =========================================================================
8. Footer
========================================================================= */
#footer-sections,
footer.sections {
background: var(--fortezza-stone) !important;
border-top: 1px solid var(--fortezza-line);
padding-top: clamp(2rem, 4vw, 3rem);
padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
#footer-sections .content-wrapper,
footer.sections .content-wrapper {
padding-block: clamp(1rem, 2vw, 1.5rem) !important;
}
#footer-sections .sqs-html-content p,
footer.sections .sqs-html-content p {
/* Darker than --fortezza-ink on stone (~4.1:1) for WCAG AA body copy (4.5:1+) */
color: hsla(0, 7%, 14%, 1);
}
/* Footer company name — display weight */
#footer-sections .sqs-html-content p.sqsrte-large,
footer.sections .sqs-html-content p.sqsrte-large {
font-family: "Marcellus", Georgia, serif !important;
letter-spacing: 0.08em;
color: var(--fortezza-charcoal) !important;
}
/* Footer contact row: make email/phone feel like a refined contact block */
#footer-sections .sqs-html-content strong,
footer.sections .sqs-html-content strong {
font-weight: 400;
color: var(--fortezza-charcoal);
}
/* Footer text links (email / phone / Facebook / Instagram) — refined, and given
a padded hit area so the stacked links no longer touch (they were ~26px tall
with a 0px gap → easy to mis-tap, especially the two social links which go to
different destinations). Underline switched from border-bottom to
text-decoration so it tracks the text instead of floating below the padding. */
#footer-sections .sqs-html-content a,
footer.sections .sqs-html-content a {
display: block;
width: fit-content;
margin: 0.4rem auto;
padding: 0.25rem 0.5rem;
border-bottom: none;
color: hsla(0, 7%, 14%, 1);
text-decoration: underline;
text-decoration-color: hsla(40, 12%, 55%, 0.4);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* The only
s in the footer separate the two stacked links in the contact &
social blocks; with the links now block-level, hide the
so they stack
cleanly (margin above gives the separation) instead of adding an empty line. */
#footer-sections .sqs-html-content br,
footer.sections .sqs-html-content br {
display: none;
}
/* Footer copyright / designed-by small print */
#footer-sections .sqs-html-content p.sqsrte-small,
footer.sections .sqs-html-content p.sqsrte-small {
font-size: 0.82rem;
letter-spacing: 0.04em;
/* Was 40% lightness (~2.2:1 on stone); deepen for AA small-text contrast */
color: hsla(0, 6%, 28%, 1);
}
/* =========================================================================
9. Blog listing & posts
========================================================================= */
.blog-basic-grid .blog-item,
.blog-side-by-side .blog-item,
.blog-alternating-side-by-side .blog-item {
transition: transform 0.3s var(--fortezza-ease), box-shadow 0.3s var(--fortezza-ease);
}
/* Hover lift for the active side-by-side listing (the blog page's actual
layout) as well as the basic-grid variant. */
.blog-basic-grid .blog-item:hover,
.blog-side-by-side .blog-item:hover,
.blog-alternating-side-by-side .blog-item:hover {
transform: translateY(-4px);
}
.blog-image-wrapper {
overflow: hidden;
border-radius: var(--fortezza-radius);
}
.blog-image-wrapper img {
transition: transform 0.7s var(--fortezza-ease);
}
.blog-image-wrapper:hover img {
transform: scale(1.05);
}
/* Blog excerpt body copy — comfortable leading + brand ink */
.blog-excerpt p {
line-height: 1.6;
color: hsla(0, 6%, 28%, 1);
}
.blog-title {
font-family: "Marcellus", Georgia, serif !important;
line-height: 1.25 !important;
}
.blog-title a {
color: var(--fortezza-charcoal) !important;
transition: color 0.18s var(--fortezza-ease);
}
.blog-title a:hover {
color: var(--fortezza-gold) !important;
}
.blog-more-link {
font-family: "Marcellus", Georgia, serif !important;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 0.8rem !important;
color: var(--fortezza-charcoal) !important;
border-bottom: 1px solid var(--fortezza-gold) !important;
padding-bottom: 2px;
transition: color 0.18s var(--fortezza-ease), border-color 0.18s var(--fortezza-ease);
}
.blog-more-link:hover {
color: var(--fortezza-gold) !important;
}
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-html-content > p.sqsrte-large:empty,
#collection-686c55b26a6e2505ae250a51
.fe-block .sqs-html-content > p.sqsrte-large[data-rte-preserve-empty="true"]:empty {
display: none !important;
margin: 0 !important;
}
.blog-meta-primary,
.blog-meta-secondary {
font-family: "PT Serif", Georgia, serif;
font-size: 0.82rem;
letter-spacing: 0.06em;
color: hsla(0, 6%, 45%, 1);
}
/* Blog listing — SQS duplicates author in primary + secondary; show date only */
.blog-side-by-side .blog-meta-primary,
.blog-side-by-side .blog-meta-delimiter {
display: none !important;
}
.blog-side-by-side .blog-meta-secondary .blog-author {
display: none !important;
}
/* =========================================================================
10. Forms (contact + careers modal)
-------------------------------------------------------------------------
The forteza-contact-form.css already does the heavy lifting; this layer
adds focus polish and button consistency so the forms feel unified.
========================================================================= */
.fortezza-contact-form .field-element:focus,
.fortezza-modal .field-element:focus {
border-color: var(--fortezza-gold) !important;
box-shadow: 0 0 0 3px hsla(38, 28%, 52%, 0.18) !important;
}
.fortezza-contact-form button[type="submit"]:not(:disabled):hover,
.fortezza-modal button[type="submit"]:not(:disabled):hover {
background: var(--fortezza-gold) !important;
border-color: var(--fortezza-gold) !important;
color: var(--fortezza-white) !important;
transform: translateY(-2px);
box-shadow: var(--fortezza-shadow-md);
}
.fortezza-modal__panel {
border-radius: var(--fortezza-radius-lg) !important;
box-shadow: var(--fortezza-shadow-lg) !important;
}
.fortezza-modal__close {
border-radius: 50%;
width: 38px;
height: 38px;
display: grid;
place-items: center;
transition: background 0.16s var(--fortezza-ease), color 0.16s var(--fortezza-ease);
}
.fortezza-modal__close:hover {
background: var(--fortezza-stone);
color: var(--fortezza-charcoal);
}
/* Mobile — top-align the careers modal. A vertically-centered fixed modal gets
pushed partly off-screen when the on-screen keyboard opens (the resume form
has 7 fields + a file upload), hiding the top fields and the close button.
Anchor it to the top, cap height to the dynamic viewport so it scrolls
internally, and tighten padding to reclaim width on narrow phones. */
@media (max-width: 640px) {
.fortezza-modal {
align-items: flex-start !important;
padding: 14px 12px !important;
}
.fortezza-modal__panel {
max-height: calc(100vh - 28px) !important;
max-height: calc(100svh - 28px) !important;
padding: 24px 18px 20px !important;
}
}
/* =========================================================================
11. Image blocks (single images / posters) — subtle frame + hover
========================================================================= */
.sqs-block-image .sqs-image,
.sqs-image-content {
border-radius: var(--fortezza-radius);
overflow: hidden;
}
.sqs-block-image[data-animation-role="image"] img,
.sqs-image-content img {
transition: transform 0.7s var(--fortezza-ease);
}
@media (hover: hover) {
.sqs-block-image:hover img,
.sqs-image-content:hover img {
transform: scale(1.03);
}
}
/* =========================================================================
12. Global layout system — rhythm, measure, alternating bands
-------------------------------------------------------------------------
Squarespace fluid-engine grids ship with tight 11px gaps and no page-level
rhythm. This layer adds breathing room, readable text measure, subtle
section alternation, and a refined fixed-header glass treatment — without
touching the exported HTML.
========================================================================= */
/* Fixed header: warm frosted glass instead of flat opaque white */
.tweak-fixed-header-style-basic #header .header-background-solid,
.tweak-fixed-header-style-basic #header .header-background.theme-bg--primary {
background: hsla(0, 0%, 99%, 0.9) !important;
backdrop-filter: blur(14px) saturate(1.08);
-webkit-backdrop-filter: blur(14px) saturate(1.08);
}
/* Looser fluid-engine gutters — every page benefits */
.fluid-engine {
row-gap: clamp(16px, 2vw, 26px) !important;
column-gap: clamp(14px, 1.6vw, 22px) !important;
}
/* Comfortable copy measure on light content sections (not heroes) */
.page-section:not(.has-background):not(:has(.fortezza-hero-bg))
.sqs-block-html .sqs-html-content > p:not(.sqsrte-large):not(.sqsrte-small) {
max-width: 68ch;
}
/* Alternate light bands so long pages don't read as one flat sheet */
#sections > .page-section.layout-engine-section:not(.has-background):nth-of-type(even) {
background-color: hsla(36, 8%, 97%, 1);
}
#sections > .page-section.layout-engine-section:not(.has-background):nth-of-type(even)
.section-background {
background-color: hsla(36, 8%, 97%, 1) !important;
}
/* Service / about image+text rows — give copy a quiet panel on wide screens */
@media (min-width: 900px) {
.page-section:not(.has-background) .fe-block:has(.sqs-block-image)
+ .fe-block .sqs-html-content {
padding: clamp(0.5rem, 1.5vw, 1.25rem) 0;
}
}
/* Blog listing — promote each post into a card with clear separation */
.blog-side-by-side-wrapper {
display: flex;
flex-direction: column;
gap: clamp(1.25rem, 2.5vw, 2rem);
max-width: min(var(--fortezza-maxw), 100%);
margin-inline: auto;
}
.blog-side-by-side-wrapper .blog-item {
margin-bottom: 0 !important;
}
.blog-side-by-side .blog-item {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
background: var(--fortezza-white);
border: 1px solid var(--fortezza-line);
border-radius: var(--fortezza-radius-lg);
padding: 0 !important;
box-shadow: var(--fortezza-shadow-sm);
overflow: hidden;
}
.blog-side-by-side .blog-image-wrapper {
order: -1;
width: 100% !important;
max-width: none !important;
flex: none !important;
margin: 0;
border-radius: calc(var(--fortezza-radius-lg) - 1px) calc(var(--fortezza-radius-lg) - 1px) 0 0;
aspect-ratio: 16 / 10;
position: relative;
}
.blog-side-by-side .blog-image-wrapper .image-wrapper {
display: block;
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
}
.blog-side-by-side .blog-item-summary {
width: 100% !important;
max-width: none !important;
flex: 1 1 auto;
}
.blog-side-by-side .blog-item-text {
padding: clamp(1.1rem, 2.2vw, 1.65rem);
}
.blog-side-by-side .blog-meta-section {
margin-bottom: 0.45rem;
}
.blog-side-by-side .blog-meta-secondary .blog-date {
font-family: "PT Serif", Georgia, serif;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: hsla(0, 6%, 48%, 1);
}
.blog-side-by-side .blog-title {
font-size: clamp(1.2rem, 1.8vw, 1.45rem) !important;
margin: 0 0 0.65rem;
}
.blog-side-by-side .blog-excerpt {
margin-bottom: 0.85rem;
}
.blog-side-by-side .blog-more-link {
margin-top: 0.15rem;
}
/* Blog index — two-column editorial grid on wide screens */
@media (min-width: 960px) {
.blog-side-by-side-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.35rem, 2.2vw, 2rem);
}
}
/* Blog index section — quiet stone band behind the card grid */
#collection-67c89b0370c79c635d2e7208.page-section {
background-color: hsla(36, 10%, 96%, 1);
}
#collection-67c89b0370c79c635d2e7208 .section-background {
background-color: hsla(36, 10%, 96%, 1) !important;
}
#collection-67c89b0370c79c635d2e7208 .content-wrapper {
padding-top: clamp(1.5rem, 3vw, 2.5rem);
padding-bottom: clamp(2.5rem, 4vw, 3.75rem);
}
/* =========================================================================
13. Contact page — editorial split layout
-------------------------------------------------------------------------
Scoped to collection-67c7c3445e03545e66104f9e. Transforms the "Let's Work
Together" block from a flat taupe grid into a deliberate split: framed photo
left, intro + inquiry card right (unified panel on desktop).
========================================================================= */
#collection-67c7c3445e03545e66104f9e
[data-section-id="67c7c3445e03545e66104fb4"] {
background: linear-gradient(
168deg,
hsla(36, 12%, 95%, 1) 0%,
var(--fortezza-stone) 42%,
hsla(40, 14%, 90%, 0.55) 100%
);
position: relative;
}
#collection-67c7c3445e03545e66104f9e
[data-section-id="67c7c3445e03545e66104fb4"] .content-wrapper {
padding-block: clamp(2.75rem, 5.5vw, 5rem) !important;
}
/* Section title */
#collection-67c7c3445e03545e66104f9e #block-31c3d9a5056e77c738d2 h1 {
font-size: clamp(2.1rem, 4.2vw, 3.15rem);
letter-spacing: 0.015em;
margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}
/* Left column — construction photo frame */
#collection-67c7c3445e03545e66104f9e #block-82f1772e7ffa0981729e .sqs-image-content {
border-radius: var(--fortezza-radius-lg);
box-shadow: var(--fortezza-shadow-lg);
border: 1px solid hsla(0, 0%, 100%, 0.7);
overflow: hidden;
}
#collection-67c7c3445e03545e66104f9e #block-82f1772e7ffa0981729e img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Intro copy — lead paragraph */
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content > p.sqsrte-large {
font-size: clamp(1.05rem, 1.45vw, 1.22rem);
line-height: 1.65;
color: hsla(0, 6%, 24%, 1);
margin: 0;
}
/* Direct contact line — email + phone */
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content > p.fortezza-contact-direct,
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content > p:not(.sqsrte-large) {
font-family: "Marcellus", Georgia, serif;
font-size: 1.02rem;
letter-spacing: 0.03em;
line-height: 1.55;
margin: 1.35rem 0 0;
padding: 0.95rem 1.1rem;
background: hsla(38, 28%, 52%, 0.09);
border-left: 3px solid var(--fortezza-gold);
border-radius: 0 var(--fortezza-radius) var(--fortezza-radius) 0;
}
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content > p.fortezza-contact-direct::before,
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content > p:not(.sqsrte-large)::before {
content: "Direct line";
display: block;
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fortezza-gold);
margin-bottom: 0.45rem;
}
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content a {
border-bottom: none;
color: var(--fortezza-charcoal);
transition: color 0.18s var(--fortezza-ease);
}
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content a:hover {
color: var(--fortezza-gold);
}
/* Direct-line callout — comfortable tap-to-email / tap-to-call targets. The two
links were tight inline text (the phone only ~21px tall — below the 44px
mobile standard and WCAG AA's 24px). Render each as its own full-width row at
least 44px tall so they are easy to tap on a phone. */
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content > p.fortezza-contact-direct br {
display: none;
}
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content > p.fortezza-contact-direct a {
display: block;
/* Block keeps the long email wrapping naturally; the vertical padding lifts
each row's tap height to ~44px (the short phone link was ~21px). */
padding: 0.62rem 0;
width: fit-content;
max-width: 100%;
overflow-wrap: break-word;
}
@media (max-width: 767px) {
#collection-67c7c3445e03545e66104f9e
#block-c06a2271b9870d1e6955
.sqs-html-content
> p.fortezza-contact-direct
a[href^="mailto"] {
width: 100%;
overflow-wrap: anywhere;
word-break: break-all;
hyphens: none;
/* Slightly smaller so the full address fits one line in the ~295px callout */
font-size: clamp(0.82rem, 3.55vw, 0.96rem) !important;
line-height: 1.35 !important;
letter-spacing: -0.01em;
}
/* Footer duplicate on the contact page — same orphan-wrap issue */
#collection-67c7c3445e03545e66104f9e a[href^="mailto:david@fortezzaconstructiongroup.com"] {
overflow-wrap: anywhere;
word-break: break-all;
}
}
/* Right column — unified inquiry card (desktop) */
@media (min-width: 768px) {
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-text-block-container {
height: 100%;
display: flex;
flex-direction: column;
}
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content {
flex: 1;
background: var(--fortezza-white);
padding: clamp(1.35rem, 2.2vw, 1.85rem) clamp(1.35rem, 2.2vw, 1.85rem) clamp(1rem, 1.8vw, 1.35rem);
border: 1px solid var(--fortezza-line);
border-bottom: none;
border-radius: var(--fortezza-radius-lg) var(--fortezza-radius-lg) 0 0;
box-shadow: var(--fortezza-shadow-sm);
}
#collection-67c7c3445e03545e66104f9e #block-6cd003ccf7f1bc72e7ae .form-wrapper {
background: var(--fortezza-white);
padding: clamp(0.35rem, 1vw, 0.75rem) clamp(1.35rem, 2.2vw, 1.85rem) clamp(1.5rem, 2.2vw, 2rem);
border: 1px solid var(--fortezza-line);
border-top: 1px solid hsla(36, 6%, 88%, 1);
border-radius: 0 0 var(--fortezza-radius-lg) var(--fortezza-radius-lg);
box-shadow: var(--fortezza-shadow-md);
}
}
/* Mobile — stacked cards with clear separation */
@media (max-width: 767px) {
#collection-67c7c3445e03545e66104f9e #block-82f1772e7ffa0981729e {
margin-bottom: 0.5rem;
}
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content {
background: var(--fortezza-white);
padding: 1.35rem 1.25rem;
border: 1px solid var(--fortezza-line);
border-radius: var(--fortezza-radius-lg);
box-shadow: var(--fortezza-shadow-sm);
margin-bottom: 1rem;
}
#collection-67c7c3445e03545e66104f9e #block-6cd003ccf7f1bc72e7ae .form-wrapper {
background: var(--fortezza-white);
padding: 1.35rem 1.25rem 1.5rem;
border: 1px solid var(--fortezza-line);
border-radius: var(--fortezza-radius-lg);
box-shadow: var(--fortezza-shadow-md);
}
}
/* Form panel heading (no HTML change) */
#collection-67c7c3445e03545e66104f9e #block-6cd003ccf7f1bc72e7ae .form-wrapper::before {
content: "Send a message";
display: block;
font-family: "Marcellus", Georgia, serif;
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
letter-spacing: 0.02em;
color: var(--fortezza-charcoal);
margin-bottom: 1.1rem;
padding-bottom: 0.65rem;
border-bottom: 1px solid var(--fortezza-line);
}
/* =========================================================================
14. Accessibility & motion preferences
========================================================================= */
/* Visible focus ring for keyboard users on interactive elements */
a:focus-visible,
button:focus-visible,
.sqs-block-button-element:focus-visible,
.header-nav-item > a:focus-visible {
outline: 2px solid var(--fortezza-gold);
outline-offset: 3px;
border-radius: 2px;
}
/* Respect reduced motion — disable all the zoom/lift transitions */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.fortezza-hero-bg img,
.gallery-masonry-item:hover img,
.gallery-grid-item:hover img,
.blog-image-wrapper:hover img,
.sqs-block-button-element:hover {
transform: none !important;
}
}
/* =========================================================================
15. Small-screen refinements
========================================================================= */
@media (max-width: 767px) {
/* Hero text shouldn't crowd the very edges on phones */
.page-section.has-background:has(.fortezza-hero-bg) .sqs-html-content {
padding-left: 6vw;
padding-right: 6vw;
}
/* Service-page hero titles keep the original SQS ~48px size on phones, but
the text column is only ~260px wide — so long titles like "Real Estate
Representation" broke MID-WORD ("Representa" / "tion"). Scale the title to
fit the column and forbid mid-word breaks (wrap at spaces instead). The
homepage hero h1 has its own more-specific rule, so it's unaffected. */
.page-section.has-background:has(.fortezza-hero-bg) .sqs-html-content > h1 {
font-size: clamp(1.6rem, 7.4vw, 2.25rem) !important;
line-height: 1.2 !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
/* Testimonial cards — keep decorative quote inside on mobile */
#collection-685e34beddf4302d026ea7f7
.fluid-engine .fe-block .sqs-html-content > p.sqsrte-large:first-child::before {
font-size: 2.35rem;
top: -0.08rem;
}
#collection-685e34beddf4302d026ea7f7
.fluid-engine .fe-block .sqs-html-content > p.sqsrte-large:first-child {
padding-left: 2rem;
}
/* Testimonials layout — the SQS fluid-engine grid-areas overlap the circular
project photos onto the quote cards on phones (a photo peeked out behind a
card's right edge) and left-align them. Collapse the whole grid into a clean
single stacked column and center the photos at a sensible size. */
#collection-685e34beddf4302d026ea7f7 .fluid-engine {
display: flex !important;
flex-direction: column !important;
gap: clamp(1.1rem, 3.5vw, 1.75rem) !important;
}
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block {
grid-area: auto !important;
width: 100% !important;
margin: 0 !important;
}
/* Cap + center the circular photos (full width would make a 390px circle) */
#collection-685e34beddf4302d026ea7f7 .fluid-engine .fe-block .sqs-block-image {
max-width: 188px !important;
margin-inline: auto !important;
}
/* Section heading gold rule: a touch shorter on mobile */
.page-section .sqs-html-content > h1::before,
.page-section .sqs-html-content > h2:first-child::before {
width: 36px;
}
/* Buttons full-width friendly tap targets on mobile */
.sqs-block-button-container {
width: 100%;
}
.sqs-block-button-element {
display: inline-flex;
align-items: center;
justify-content: center;
padding-left: 28px !important;
padding-right: 28px !important;
}
/* Contact inquiry card — tighter padding on phones */
#collection-67c7c3445e03545e66104f9e #block-6cd003ccf7f1bc72e7ae .form-wrapper::before {
font-size: 1.1rem;
margin-bottom: 0.9rem;
}
}
/* =========================================================================
16. Photo-section legibility — must win over global typography above
-------------------------------------------------------------------------
Squarespace bright-inverse / black-bold / dark / black sections expect
light text on photography. Without these !important rules, global body
styles paint charcoal copy on dark wood/skyline photos (About founder bio,
Turnkey mid-page bands, etc.).
========================================================================= */
.page-section.has-background:not(:has(.fortezza-hero-bg)):is(
.bright-inverse,
.black-bold,
.black,
.dark
) .sqs-block-html:not(.sqs-background-enabled) .sqs-text-block-container {
background-color: rgba(10, 10, 10, 0.62) !important;
padding: clamp(1rem, 2.5vw, 1.85rem) clamp(1.2rem, 3vw, 2.25rem) !important;
border-radius: 8px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28) !important;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.page-section.has-background:not(:has(.fortezza-hero-bg)):is(
.bright-inverse,
.black-bold,
.black,
.dark
) .sqs-block-html:not(.sqs-background-enabled) .sqs-html-content
:is(h1, h2, h3, h4, h5, h6) {
color: hsla(0, 0%, 99%, 1) !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
.page-section.has-background:not(:has(.fortezza-hero-bg)):is(
.bright-inverse,
.black-bold,
.black,
.dark
) .sqs-block-html:not(.sqs-background-enabled) .sqs-html-content
:is(p, span, li, strong, em, .sqsrte-large, .sqsrte-small, .sqsrte-text-color--black) {
color: hsla(0, 0%, 93%, 1) !important;
}
.page-section.has-background:not(:has(.fortezza-hero-bg)):is(
.bright-inverse,
.black-bold,
.black,
.dark
) .sqs-block-html:not(.sqs-background-enabled) .sqs-html-content a {
color: hsla(45, 10%, 88%, 1) !important;
border-bottom-color: hsla(45, 10%, 80%, 0.55) !important;
}
.page-section.has-background:not(:has(.fortezza-hero-bg)):is(
.bright-inverse,
.black-bold,
.black,
.dark
) .sqs-block-html:not(.sqs-background-enabled) .sqs-html-content a:hover {
color: hsla(0, 0%, 100%, 1) !important;
border-bottom-color: hsla(0, 0%, 100%, 1) !important;
}
/* Injected heroes — override sqsrte-text-color--black on photo when no text box */
.page-section.has-background:has(.fortezza-hero-bg)
.sqs-block-html:not(.sqs-background-enabled)
.sqs-html-content .sqsrte-text-color--black {
color: hsla(0, 0%, 99%, 1) !important;
}
/* Contact direct-line panel sits on light card — keep dark text */
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content > p.fortezza-contact-direct,
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content > p:not(.sqsrte-large) {
color: var(--fortezza-charcoal) !important;
}
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content > p.fortezza-contact-direct a,
#collection-67c7c3445e03545e66104f9e #block-c06a2271b9870d1e6955 .sqs-html-content > p:not(.sqsrte-large) a {
color: var(--fortezza-charcoal) !important;
}
/* =========================================================================
17. Careers page — intro panel + centered CTA
========================================================================= */
#collection-6858947e941dd854664c04ae #block-9a22d924da112a6a0574 .sqs-text-block-container {
max-width: 42rem;
margin-inline: auto;
background: var(--fortezza-white);
border: 1px solid var(--fortezza-line);
border-top: 3px solid var(--fortezza-gold);
border-radius: var(--fortezza-radius-lg);
box-shadow: var(--fortezza-shadow-sm);
padding: clamp(1.5rem, 3vw, 2.25rem);
text-align: center;
}
#collection-6858947e941dd854664c04ae #block-9a22d924da112a6a0574 .sqs-html-content > p.sqsrte-large {
line-height: 1.65;
color: hsla(0, 6%, 24%, 1);
margin: 0;
}
#collection-6858947e941dd854664c04ae #block-f7baeedfd5400c6e2404 .sqs-block-button-container {
justify-content: center !important;
margin-top: 0.5rem;
}
#collection-6858947e941dd854664c04ae #block-4c7b5dc410abd7903faf h1 {
font-family: "Marcellus", Georgia, serif;
font-size: clamp(2rem, 4vw, 2.75rem);
text-align: center;
margin: 0 0 0.35rem;
color: var(--fortezza-charcoal);
}
/* =========================================================================
18. Blog post article — typography, cover hero, readable shell
-------------------------------------------------------------------------
SQS exported sqsrte-text-color--white on body copy inside light-bold
theme posts (invisible headings/lists). Cover images are injected via JS
from og:image; this layer styles the article shell and inline media.
========================================================================= */
.collection-type-blog-side-by-side [data-sqsp-section="blog-item"].page-section {
padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
padding-bottom: clamp(2.75rem, 5vw, 4rem);
}
.collection-type-blog-side-by-side [data-sqsp-section="blog-item"] .content-wrapper {
display: block !important;
max-width: min(var(--fortezza-maxw), 100%);
margin-inline: auto !important;
padding-inline: clamp(1rem, 3vw, 2.5rem);
box-sizing: border-box;
}
.collection-type-blog-side-by-side [data-sqsp-section="blog-item"] .content {
width: 100% !important;
max-width: 100% !important;
margin-inline: auto !important;
}
/* SQS ships single posts at 75% width (tweak-blog-item-width-medium) — full centered column */
.collection-type-blog-side-by-side .blog-item-wrapper {
width: 100% !important;
max-width: min(76rem, 100%);
margin-inline: auto !important;
float: none !important;
}
.collection-type-blog-side-by-side .blog-item-wrapper article.entry {
width: 100% !important;
padding: 0 !important;
margin: 0 auto !important;
box-sizing: border-box !important;
float: none !important;
}
.collection-type-blog-side-by-side .blog-item-inner-wrapper {
width: 100% !important;
max-width: none !important;
margin-inline: auto !important;
float: none !important;
}
.fortezza-blog-back {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: "Marcellus", Georgia, serif;
font-size: 0.82rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: hsla(0, 6%, 38%, 1);
text-decoration: none;
border-bottom: 1px solid transparent;
margin: 0 0 clamp(1.1rem, 2vw, 1.5rem);
transition: color 0.18s var(--fortezza-ease), border-color 0.18s var(--fortezza-ease);
}
.fortezza-blog-back:hover {
color: var(--fortezza-gold);
border-bottom-color: var(--fortezza-gold);
}
.fortezza-blog-back__icon {
font-size: 1.05rem;
line-height: 1;
}
.fortezza-blog-cover {
width: 100%;
max-width: 100%;
margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem);
aspect-ratio: 16 / 9;
border-radius: var(--fortezza-radius-lg);
overflow: hidden;
border: 1px solid var(--fortezza-line);
box-shadow: var(--fortezza-shadow-md);
background: var(--fortezza-stone);
float: none !important;
}
.fortezza-blog-cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.blog-item-content [id^="block-"] {
--stroke-thickness: 0 !important;
--stroke-style: none !important;
}
.collection-type-blog-side-by-side .blog-item-top-wrapper {
text-align: center;
max-width: 52rem;
margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem);
padding-bottom: 0;
border-bottom: none;
}
.collection-type-blog-side-by-side .entry-title--large {
font-family: "Marcellus", Georgia, serif;
font-size: clamp(1.65rem, 3.2vw, 2.35rem);
line-height: 1.22;
text-wrap: balance;
color: var(--fortezza-charcoal);
margin: 0 0 0.65rem;
}
.blog-side-by-side-item-wrapper .blog-meta-item--author {
display: none !important;
}
.collection-type-blog-side-by-side .blog-item-meta-wrapper {
justify-content: center;
}
.collection-type-blog-side-by-side .blog-meta-item--date {
font-family: "PT Serif", Georgia, serif;
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: hsla(0, 6%, 48%, 1);
}
.collection-type-blog-side-by-side .blog-item-content-wrapper {
width: 100%;
max-width: none;
margin-inline: auto;
background: var(--fortezza-white);
border: 1px solid var(--fortezza-line);
border-radius: var(--fortezza-radius-lg);
padding: clamp(1.5rem, 2.8vw, 2.5rem) clamp(1.35rem, 3.5vw, 3rem);
box-shadow: var(--fortezza-shadow-sm);
float: none !important;
}
.blog-item-content .sqs-layout,
.blog-item-content .sqs-row,
.blog-item-content .sqs-col-12,
.blog-item-content .sqs-block,
.blog-item-content .sqs-block-content,
.blog-item-content .sqs-text-block-container {
width: 100%;
max-width: none;
float: none !important;
}
.blog-item-content .sqs-layout {
width: 100%;
}
.blog-item-content .sqs-html-content {
max-width: none;
width: 100%;
margin-inline: 0;
}
.blog-item-content [class*="sqs-col"] .sqs-block {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Blog body copy — override site-wide 68ch paragraph cap inside posts */
.blog-item-content .sqs-html-content > p,
.blog-item-content .sqs-html-content > ul,
.blog-item-content .sqs-html-content > ol,
.blog-item-content .sqs-html-content > h3 {
max-width: none !important;
}
.blog-item-content .sqs-html-content > p.sqsrte-large:first-child {
font-size: clamp(1.05rem, 1.35vw, 1.15rem);
line-height: 1.72;
color: hsla(0, 6%, 26%, 1);
margin-bottom: 1.65rem;
}
.blog-item-content .sqs-html-content h3 {
font-family: "Marcellus", Georgia, serif;
font-size: clamp(1.1rem, 1.5vw, 1.28rem);
line-height: 1.3;
margin: 2rem 0 0.6rem;
color: var(--fortezza-charcoal);
padding-left: 0.85rem;
border-left: 3px solid var(--fortezza-gold);
}
.blog-item-content .sqs-html-content ul {
margin: 0.35rem 0 1rem;
padding-left: 1.35rem;
}
.blog-item-content .sqs-html-content li p {
margin: 0.2rem 0;
}
@media (max-width: 767px) {
.collection-type-blog-side-by-side [data-sqsp-section="blog-item"] .content-wrapper {
padding-inline: clamp(0.65rem, 3.5vw, 1rem);
}
.collection-type-blog-side-by-side .blog-item-content-wrapper {
padding: clamp(1.15rem, 4.5vw, 1.5rem) clamp(1rem, 4vw, 1.25rem);
border-radius: var(--fortezza-radius);
}
.collection-type-blog-side-by-side .entry-title--large {
font-size: clamp(1.45rem, 6.5vw, 1.85rem);
line-height: 1.28;
}
.collection-type-blog-side-by-side .blog-item-content .sqs-html-content > p,
.collection-type-blog-side-by-side .blog-item-content .sqs-html-content li p {
font-size: 1rem;
line-height: 1.65;
}
.fortezza-blog-cover {
border-radius: var(--fortezza-radius);
margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
}
}
/* Inline images inside article body */
.blog-item-content .sqs-block-image {
margin: clamp(1.5rem, 3vw, 2.25rem) 0;
max-width: 100%;
}
.blog-item-content .sqs-block-image .sqs-block-content,
.blog-item-content .sqs-block-image .sqs-image-content,
.blog-item-content .sqs-block-image .sqs-block-image-figure {
border-radius: var(--fortezza-radius-lg);
overflow: hidden;
box-shadow: var(--fortezza-shadow-sm);
}
.blog-item-content .sqs-block-image img {
width: 100%;
height: auto;
display: block;
border-radius: var(--fortezza-radius-lg);
}
.blog-item-content .sqs-block-image .image-caption,
.blog-item-content .sqs-block-image .image-subtitle {
font-family: "PT Serif", Georgia, serif;
font-size: 0.85rem;
line-height: 1.45;
color: hsla(0, 6%, 45%, 1);
text-align: center;
margin-top: 0.55rem;
}
/* Hide empty author profile + comments chrome on single posts */
.collection-type-blog-side-by-side .blog-item-author-profile-wrapper,
.collection-type-blog-side-by-side .blog-item-comments {
display: none !important;
}
/* Exported white spans on light post body — force readable dark copy */
.blog-item-content .sqsrte-text-color--white,
.blog-item-content .sqsrte-text-color--white strong,
.blog-item-content h3 .sqsrte-text-color--white {
color: hsla(0, 6%, 20%, 1) !important;
border-left-color: var(--fortezza-gold) !important;
}
.blog-item-content .sqs-html-content a .sqsrte-text-color--white,
.blog-item-content .sqs-html-content a:has(.sqsrte-text-color--white) {
color: var(--fortezza-charcoal) !important;
border-bottom-color: hsla(38, 28%, 52%, 0.55) !important;
}
.blog-item-content .sqs-html-content a:hover .sqsrte-text-color--white,
.blog-item-content .sqs-html-content a:has(.sqsrte-text-color--white):hover {
color: var(--fortezza-gold) !important;
border-bottom-color: var(--fortezza-gold) !important;
}
/* Testimonials grid — equal-height quote cards */
#collection-685e34beddf4302d026ea7f7 .fluid-engine.fe-685e3523e5944c2585ae21c7 {
align-items: stretch;
}
#collection-685e34beddf4302d026ea7f7 .fluid-engine.fe-685e3523e5944c2585ae21c7 .fe-block {
display: flex;
flex-direction: column;
}
#collection-685e34beddf4302d026ea7f7
.fluid-engine.fe-685e3523e5944c2585ae21c7
.fe-block
.sqs-block {
flex: 1;
display: flex;
flex-direction: column;
}
#collection-685e34beddf4302d026ea7f7
.fluid-engine.fe-685e3523e5944c2585ae21c7
.fe-block
.sqs-block-content {
flex: 1;
display: flex;
flex-direction: column;
}
/* =========================================================================
19. Site-wide polish — strokes, footer gaps, cards, imagery
========================================================================= */
/* Squarespace partial stroke borders leak on many exported text blocks */
#sections .sqs-block-html [id^="block-"] {
--stroke-thickness: 0 !important;
--stroke-style: none !important;
}
/* Footer / social rows — hide empty Squarespace spacer paragraphs */
#footer-sections .sqs-html-content > p:empty,
#footer-sections .sqs-html-content > p[data-rte-preserve-empty="true"]:empty,
footer.sections .sqs-html-content > p:empty,
footer.sections .sqs-html-content > p[data-rte-preserve-empty="true"]:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
/* Real estate case-study cards — equal height within each grid row */
#collection-686c55b26a6e2505ae250a51 .fluid-engine {
align-items: stretch;
}
#collection-686c55b26a6e2505ae250a51
.fluid-engine
.fe-block:has(.sqs-html-content > h3:first-child) {
display: flex;
flex-direction: column;
}
#collection-686c55b26a6e2505ae250a51
.fluid-engine
.fe-block:has(.sqs-html-content > h3:first-child)
.sqs-block,
#collection-686c55b26a6e2505ae250a51
.fluid-engine
.fe-block:has(.sqs-html-content > h3:first-child)
.sqs-block-content {
flex: 1;
display: flex;
flex-direction: column;
}
/* Blog posts — SQS exports entire body as sqsrte-large; normalize after lead */
.blog-item-content .sqs-html-content > p.sqsrte-large:not(:first-child),
.blog-item-content .sqs-html-content li p.sqsrte-large {
font-size: 1rem;
line-height: 1.68;
}
/* Turnkey estate photo band — constrain long centered copy */
[data-section-id="687472630fe02e39c794d6af"] .sqs-text-block-container {
max-width: 52rem;
margin-inline: auto;
}
/* Light-section inline images — consistent corner radius */
.page-section:not(.has-background) .sqs-block-image .sqs-image-content,
.page-section:not(.has-background) .fluid-image-component-root {
border-radius: var(--fortezza-radius-lg);
overflow: hidden;
}
.page-section:not(.has-background) .sqs-block-image img {
border-radius: var(--fortezza-radius-lg);
}
/* Blog listing excerpt — tidy card height without clipping mid-sentence */
.blog-side-by-side .blog-excerpt p {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.62;
font-size: 0.96rem;
color: hsla(0, 6%, 32%, 1);
}
/* Blog listing — uniform thumbnail crop (also on stacked cards) */
.blog-side-by-side .blog-image-wrapper {
aspect-ratio: 16 / 10;
}
.blog-side-by-side .blog-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* =========================================================================
20. Page-specific editorial panels + hero copy polish
========================================================================= */
/* About — intro copy below hero into a centered panel */
#collection-67c7c3445e03545e66104fa1 #block-01273b106b7d84a084b1 .sqs-text-block-container {
max-width: 44rem;
margin-inline: auto;
background: var(--fortezza-white);
border: 1px solid var(--fortezza-line);
border-top: 3px solid var(--fortezza-gold);
border-radius: var(--fortezza-radius-lg);
box-shadow: var(--fortezza-shadow-sm);
padding: clamp(1.5rem, 3vw, 2.25rem);
text-align: center;
}
#collection-67c7c3445e03545e66104fa1 #block-01273b106b7d84a084b1 .sqs-html-content > p.sqsrte-large {
font-size: clamp(1.02rem, 1.35vw, 1.12rem);
line-height: 1.68;
color: hsla(0, 6%, 24%, 1);
margin: 0 0 0.85rem;
}
#collection-67c7c3445e03545e66104fa1 #block-01273b106b7d84a084b1 .sqs-html-content > p.sqsrte-large:last-child {
margin-bottom: 0;
}
/* About — founder name over wood photo */
[data-section-id="68585287a84c594c1b5ca341"] #block-760ef271c3a2bcec3706 h2 {
font-size: clamp(1.65rem, 3vw, 2.2rem);
text-align: center;
margin: 0 0 0.75rem;
}
/* Real estate — hero tagline (exported as h4) */
#collection-686c55b26a6e2505ae250a51 #block-yui_3_17_2_1_1752356486830_18620 .sqs-text-block-container {
max-width: 36rem;
}
#collection-686c55b26a6e2505ae250a51 #block-yui_3_17_2_1_1752356486830_18620 h4 {
font-family: "Marcellus", Georgia, serif;
font-size: clamp(1.15rem, 1.8vw, 1.45rem);
line-height: 1.45;
font-weight: 400;
letter-spacing: 0.02em;
color: hsla(0, 6%, 22%, 1);
margin: 0;
}
/* Real estate — drop empty spacer rows inside case-study cards */
#collection-686c55b26a6e2505ae250a51 .sqs-html-content > p.sqsrte-large:empty,
#collection-686c55b26a6e2505ae250a51
.sqs-html-content
> p.sqsrte-large[data-rte-preserve-empty="true"]:empty {
display: none !important;
margin: 0 !important;
}
/* Real estate — property photos beside cards */
#collection-686c55b26a6e2505ae250a51 .fluid-engine .sqs-block-image .sqs-image-content,
#collection-686c55b26a6e2505ae250a51 .fluid-engine .fluid-image-component-root {
border-radius: var(--fortezza-radius-lg);
overflow: hidden;
box-shadow: var(--fortezza-shadow-sm);
}
/* Service-page centered hero titles — consistent display scale */
.page-section.has-background:has(.fortezza-hero-bg)
.sqs-html-content
> h1[style*="text-align:center"],
.page-section.has-background:has(.fortezza-hero-bg)
.sqs-html-content
> h1[style*="text-align: center"] {
font-size: clamp(2.15rem, 4.8vw, 3.1rem);
margin: 0;
}
/* Homepage mid-hero h3-only block — long copy needs a panel, not just shadow */
.page-section.has-background:has(.fortezza-hero-bg)
.sqs-block-html:not(.sqs-background-enabled):has(.sqs-html-content > h3:only-child)
.sqs-text-block-container {
max-width: 52rem;
margin-inline: auto;
background-color: rgba(10, 10, 10, 0.58) !important;
padding: clamp(1.1rem, 2.5vw, 1.65rem) clamp(1.25rem, 3vw, 2rem) !important;
border-radius: var(--fortezza-radius-lg) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28) !important;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.page-section.has-background:has(.fortezza-hero-bg)
.sqs-block-html:not(.sqs-background-enabled):has(.sqs-html-content > h3:only-child)
.sqs-html-content
> h3 {
font-size: clamp(1.05rem, 1.55vw, 1.28rem);
line-height: 1.55;
font-weight: 400;
margin: 0;
}
/* Site-wide — hide empty Squarespace spacer paragraphs in main content */
#sections .sqs-html-content > p:empty,
#sections .sqs-html-content > p[data-rte-preserve-empty="true"]:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
/* =========================================================================
21. Mobile interaction polish — tap feedback, text scaling, selection
-------------------------------------------------------------------------
Phones have no :hover, so every refined hover state defined above is dead
weight on mobile — a tap currently produces no intentional feedback, only
the browser's default gray flash. This section: (a) locks iOS text-size so
the clamp() type scale survives a landscape rotation, (b) brands the tap
highlight + text selection, and (c) adds a tiny, snappy "press" reaction on
the elements people actually touch.
========================================================================= */
/* Keep the responsive type scale exact — stop Safari inflating text in
landscape — and give the whole page a subtle warm brand tap tint instead of
the default heavy gray rectangle. */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: hsla(38, 28%, 52%, 0.16);
}
/* Shaped / rounded controls have their own :active states below, so suppress
the rectangular highlight on them (it never matches their geometry). */
.sqs-block-button-element,
.fortezza-contact-form button[type="submit"],
.fortezza-modal button[type="submit"],
.fortezza-gallery-expand,
.fortezza-gallery-tile,
.fortezza-lightbox__btn,
.fortezza-lightbox__close,
.header-actions-action--social .header-icon {
-webkit-tap-highlight-color: transparent;
}
/* Branded text selection (desktop drag + mobile long-press) */
::selection {
background: hsla(38, 28%, 52%, 0.28);
color: var(--fortezza-ink);
}
::-moz-selection {
background: hsla(38, 28%, 52%, 0.28);
color: var(--fortezza-ink);
}
/* Tactile press feedback on touch devices only. Tiny + fast so it reads as a
press, not a bounce. Scoped to (hover: none) so it never competes with the
desktop hover lifts. */
@media (hover: none) {
.sqs-block-button-element:active,
.fortezza-contact-form button[type="submit"]:not(:disabled):active,
.fortezza-modal button[type="submit"]:not(:disabled):active,
.fortezza-gallery-expand:active {
transform: translateY(0) scale(0.97);
transition-duration: 0.06s;
}
.header-nav-item > a:active,
.header-menu-nav-item a:active,
#block-yui_3_17_2_1_1750622440757_7483 .sqs-html-content > p.sqsrte-large a:active {
opacity: 0.55;
transition: opacity 0.05s var(--fortezza-ease);
}
.gallery-masonry-item.fortezza-gallery-tile:active,
.gallery-grid-item.fortezza-gallery-tile:active {
transform: scale(0.985);
transition: transform 0.08s var(--fortezza-ease);
}
}
/* Homepage hero service directory — these five links are the site's primary
entry points. On phones the tap targets were ~33px tall and crowded, and the
gold underline (a hover affordance) never fires, so they read as plain text
rather than the tappable directory they are. Enlarge + space the targets and
give a subtle resting underline on touch so they clearly invite a tap. */
@media (max-width: 767px) {
/* The long homepage headline ("Middle Tennessee's Trusted Source for Custom
Homes, Commercial Construction & Estate Services") sits at the shared hero
clamp FLOOR of 2.15rem (~34px) on phones — too big for the ~290px text
column in Marcellus, so lines overflowed the panel and clipped on the right
("…Tennessee'", "Construction & Esta…"). Scale it to fit and wrap cleanly.
Scoped to this block so the SHORT service-page hero titles keep their size. */
#block-yui_3_17_2_1_1750622440757_7483 .sqs-html-content > h1 {
font-size: clamp(1.5rem, 6.2vw, 2rem) !important;
line-height: 1.24 !important;
white-space: normal !important;
/* Override the global h1 text-wrap:balance — on this narrow column it kept
"Commercial Construction" on one over-wide line (balancing line lengths
instead of fitting), clipping it. Normal wrapping breaks at the space. */
text-wrap: wrap !important;
}
#block-yui_3_17_2_1_1750622440757_7483 .sqs-html-content > p.sqsrte-large {
margin: 0.42rem 0;
}
#block-yui_3_17_2_1_1750622440757_7483 .sqs-html-content > p.sqsrte-large a {
padding: 0.5em 0.7em 0.55em !important;
font-size: 1.25rem !important;
}
}
@media (hover: none) {
#block-yui_3_17_2_1_1750622440757_7483
.sqs-html-content > p.sqsrte-large a::after {
left: 1.05em;
right: 1.05em;
opacity: 0.45;
}
}
/* =========================================================================
22. Cookie consent banner — brand-aligned (VISUAL ONLY; behavior untouched)
-------------------------------------------------------------------------
Squarespace injects a generic cookie banner (`.cookie-banner-mount-point`)
on every page — the first thing a mobile visitor sees. Its plain buttons /
typography clash with the refined Marcellus + charcoal/gold brand. These
rules restyle it to match. We only change appearance; the accept/decline/
manage buttons keep their JS handlers and behavior.
========================================================================= */
.cookie-banner-mount-point .gdpr-cookie-banner,
.cookie-banner-mount-point .sqs-cookie-banner-v2 {
background: var(--fortezza-white) !important;
border-top: 2px solid var(--fortezza-gold) !important;
box-shadow: 0 -8px 24px rgba(28, 24, 18, 0.10) !important;
}
/* The 3 CTAs ship in a nowrap flex row; the Marcellus-uppercase labels are
wider than the SQS defaults, so on phones "Manage cookies" overflowed off the
right edge. Let the button group wrap and center on mobile only. */
@media (max-width: 767px) {
.cookie-banner-mount-point .sqs-cookie-banner-v2-cta-container,
.cookie-banner-mount-point .button-group {
flex-wrap: wrap !important;
gap: 0.55rem !important;
justify-content: center !important;
}
}
@media (min-width: 768px) {
.cookie-banner-mount-point .sqs-cookie-banner-v2-cta-container,
.cookie-banner-mount-point .button-group {
flex-wrap: nowrap !important;
gap: 0.65rem !important;
justify-content: flex-end !important;
}
}
.cookie-banner-mount-point .sqs-cookie-banner-v2-text,
.cookie-banner-mount-point .disclaimer-text {
font-family: "PT Serif", Georgia, serif !important;
color: hsla(0, 6%, 26%, 1) !important;
line-height: 1.55 !important;
}
/* Buttons — shared Marcellus treatment */
.cookie-banner-mount-point .sqs-cookie-banner-v2-accept,
.cookie-banner-mount-point .sqs-cookie-banner-v2-deny,
.cookie-banner-mount-point .manage {
font-family: "Marcellus", Georgia, serif !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-size: 0.78rem !important;
border-radius: var(--fortezza-radius) !important;
transition: background 0.2s var(--fortezza-ease), color 0.2s var(--fortezza-ease),
border-color 0.2s var(--fortezza-ease), transform 0.18s var(--fortezza-ease) !important;
}
/* Accept all (primary) — charcoal, gold hover lift */
.cookie-banner-mount-point .sqs-cookie-banner-v2-accept {
background: var(--fortezza-charcoal) !important;
color: var(--fortezza-white) !important;
border: 1px solid var(--fortezza-charcoal) !important;
}
.cookie-banner-mount-point .sqs-cookie-banner-v2-accept:hover {
background: var(--fortezza-gold) !important;
border-color: var(--fortezza-gold) !important;
color: var(--fortezza-white) !important;
transform: translateY(-1px);
}
/* Decline all (secondary) — outline that fills on hover */
.cookie-banner-mount-point .sqs-cookie-banner-v2-deny {
background: transparent !important;
color: var(--fortezza-charcoal) !important;
border: 1.5px solid var(--fortezza-charcoal) !important;
}
.cookie-banner-mount-point .sqs-cookie-banner-v2-deny:hover {
background: var(--fortezza-charcoal) !important;
color: var(--fortezza-white) !important;
}
/* Manage cookies (tertiary) — quiet underlined text link */
.cookie-banner-mount-point .manage {
background: transparent !important;
color: hsla(0, 6%, 40%, 1) !important;
border: none !important;
text-decoration: underline;
text-underline-offset: 3px;
}
.cookie-banner-mount-point .manage:hover {
color: var(--fortezza-gold) !important;
}
/* =========================================================================
24. Homepage content sections — services showcase, why-Fortezza, CTA
-------------------------------------------------------------------------
Injected into index.html by apply_ui_fixes.inject_homepage_content() to fill
the sparse homepage with productive, business-showcasing content. Mobile-first.
========================================================================= */
.fortezza-home-section {
padding: clamp(2.75rem, 6vw, 5rem) clamp(1.15rem, 4vw, 2.25rem);
background: var(--fortezza-stone);
}
.fortezza-home-inner {
max-width: 1140px;
margin-inline: auto;
}
.fortezza-home-eyebrow {
font-family: "Marcellus", Georgia, serif;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fortezza-gold);
text-align: center;
margin: 0 0 0.7rem;
}
.fortezza-home-heading {
font-family: "Marcellus", Georgia, serif;
font-size: clamp(1.62rem, 4.2vw, 2.4rem);
line-height: 1.18;
color: var(--fortezza-charcoal);
text-align: center;
margin: 0 auto;
max-width: 22ch;
text-wrap: balance;
}
.fortezza-home-lead {
font-family: "PT Serif", Georgia, serif;
font-size: clamp(1rem, 1.5vw, 1.12rem);
line-height: 1.62;
color: var(--fortezza-ink);
text-align: center;
max-width: 60ch;
margin: 1.05rem auto 0;
}
/* --- Services grid + cards --- */
.fortezza-services-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(1rem, 2.2vw, 1.6rem);
margin-top: clamp(1.85rem, 3.6vw, 2.85rem);
}
.fortezza-service-card {
flex: 0 1 340px;
display: flex;
flex-direction: column;
background: var(--fortezza-white);
border: 1px solid var(--fortezza-line);
border-radius: var(--fortezza-radius-lg);
overflow: hidden;
text-decoration: none;
box-shadow: var(--fortezza-shadow-sm);
transition:
transform 0.4s var(--fortezza-ease),
box-shadow 0.4s var(--fortezza-ease),
border-color 0.3s ease;
}
.fortezza-service-card__media {
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--fortezza-sand);
}
.fortezza-service-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s var(--fortezza-ease);
}
.fortezza-service-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: clamp(1.15rem, 2vw, 1.5rem);
}
.fortezza-service-card__title {
font-family: "Marcellus", Georgia, serif;
font-size: 1.2rem;
font-weight: 400;
color: var(--fortezza-charcoal);
margin: 0 0 0.5rem;
}
.fortezza-service-card__desc {
font-family: "PT Serif", Georgia, serif;
font-size: 0.95rem;
line-height: 1.55;
color: var(--fortezza-ink);
margin: 0 0 1.1rem;
flex: 1;
}
.fortezza-service-card__cta {
font-family: "Marcellus", Georgia, serif;
font-size: 0.74rem;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--fortezza-gold);
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: auto;
transition: gap 0.3s var(--fortezza-ease);
}
@media (hover: hover) {
.fortezza-service-card:hover {
transform: translateY(-5px);
box-shadow: var(--fortezza-shadow-md);
border-color: hsla(38, 24%, 60%, 0.5);
}
.fortezza-service-card:hover .fortezza-service-card__media img {
transform: scale(1.05);
}
.fortezza-service-card:hover .fortezza-service-card__cta {
gap: 0.75rem;
}
}
.fortezza-service-card:focus-visible {
outline: 2px solid var(--fortezza-gold);
outline-offset: 3px;
}
/* --- Why Fortezza band --- */
.fortezza-home-why {
background: var(--fortezza-white);
}
.fortezza-why-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.85rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3.5rem);
max-width: 880px;
margin: clamp(2rem, 4vw, 3rem) auto 0;
}
@media (max-width: 600px) {
.fortezza-why-grid {
grid-template-columns: 1fr;
}
}
.fortezza-why-item {
text-align: center;
}
.fortezza-why-item__title {
font-family: "Marcellus", Georgia, serif;
font-size: 1.2rem;
font-weight: 400;
color: var(--fortezza-charcoal);
margin: 0 0 0.6rem;
padding-top: 1rem;
position: relative;
}
.fortezza-why-item__title::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 38px;
height: 2px;
background: var(--fortezza-gold);
}
.fortezza-why-item__desc {
font-family: "PT Serif", Georgia, serif;
font-size: 0.96rem;
line-height: 1.6;
color: var(--fortezza-ink);
margin: 0 auto;
max-width: 38ch;
}
/* --- Closing CTA band --- */
.fortezza-home-cta {
background: var(--fortezza-charcoal);
text-align: center;
}
.fortezza-home-cta .fortezza-home-heading {
color: var(--fortezza-white);
}
.fortezza-home-cta .fortezza-home-lead {
color: hsla(0, 0%, 100%, 0.84);
}
.fortezza-home-cta__btn {
display: inline-block;
margin-top: 1.6rem;
font-family: "Marcellus", Georgia, serif;
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fortezza-charcoal);
background: var(--fortezza-gold);
padding: 0.95rem 2.3rem;
border-radius: var(--fortezza-radius);
text-decoration: none;
transition:
background 0.3s ease,
transform 0.3s var(--fortezza-ease),
box-shadow 0.3s var(--fortezza-ease);
}
@media (hover: hover) {
.fortezza-home-cta__btn:hover {
background: hsl(40, 38%, 62%);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
}
.fortezza-home-cta__btn:focus-visible {
outline: 2px solid var(--fortezza-white);
outline-offset: 3px;
}
/* --- Homepage: full-bleed hero + intro banners -----------------------------
The SQS banner photos were inset by the site gutter on every side, which (a)
showed the page background as gray bars down the left/right of the page and
(b) left ~137px of empty section-padding below each photo. Make the homepage
hero + intro photos edge-to-edge (inset:0) so they fill their sections — no
gray frame, no dead bottom gap — and trim the section bottom padding so the
injected content sits tight. Homepage-scoped via the two specific section ids. */
[data-section-id="67c7c3445e03545e66104fdd"],
[data-section-id="685876db180d410a81ab3c4b"] {
padding-bottom: clamp(1.4rem, 3vw, 2.4rem) !important;
}
[data-section-id="67c7c3445e03545e66104fdd"] .fortezza-hero-bg,
[data-section-id="685876db180d410a81ab3c4b"] .fortezza-hero-bg {
inset: 0 !important;
border-radius: 0 !important;
}
/* The services section follows the hero directly; trim its top breathing room a
touch so the pairing reads as one flow rather than two far-apart blocks. */
.fortezza-home-services {
padding-top: clamp(2.25rem, 4.5vw, 3.5rem);
}
/* --- Kill the gray corner boxes in the header --------------------------------
The page background was gray (rgb(232,232,232)) and showed as boxes in the top
corners beside the centered max-width header bar (the header's white bg only
spans the inner 1400px at the top). The page background is fully covered by
sections everywhere else, so match it to the header white — the header now
reads as a clean full-width white bar with no gray corners. */
html,
body.tweak-blog-alternating-side-by-side-width-full,
body {
background-color: var(--fortezza-white) !important;
}
/* The homepage hero is now full-bleed and sits BEHIND the header, so the header's
single 90%-opacity frosted layer showed the hero through it as gray at the
corners (the centre has two layers, so it read white). Make the header bar a
clean opaque white so it reads as one solid bar over the hero — no gray boxes. */
.header-announcement-bar-wrapper,
#header .header-background,
#header .header-background-solid {
background-color: var(--fortezza-white) !important;
}
/* --- Homepage animation polish ----------------------------------------------
Layered on the fortezza-reveal system to give the injected sections a more
choreographed, premium entrance. All transform/opacity (GPU-composited) and
gated to (prefers-reduced-motion: no-preference). */
@media (prefers-reduced-motion: no-preference) {
/* Service cards rise AND subtly grow as they settle, instead of a flat slide */
html.fortezza-animations-active .fortezza-service-card.fortezza-reveal--up {
transform: translateY(34px) scale(0.965);
}
/* Section header cascade: eyebrow (0s) -> heading -> lead */
.fortezza-home-heading { --fortezza-reveal-delay: 0.09s; }
.fortezza-home-lead { --fortezza-reveal-delay: 0.18s; }
/* Why-grid items stagger in */
.fortezza-why-item:nth-child(1) { --fortezza-reveal-delay: 0.02s; }
.fortezza-why-item:nth-child(2) { --fortezza-reveal-delay: 0.11s; }
.fortezza-why-item:nth-child(3) { --fortezza-reveal-delay: 0.20s; }
.fortezza-why-item:nth-child(4) { --fortezza-reveal-delay: 0.29s; }
/* Each why-item's gold rule draws in alongside the item */
html.fortezza-animations-active
.fortezza-why-item.fortezza-reveal:not(.is-inview)
.fortezza-why-item__title::before {
width: 0;
}
html.fortezza-animations-active .fortezza-why-item__title::before {
transition: width 0.75s var(--fortezza-motion-ease-out);
transition-delay: var(--fortezza-reveal-delay, 0s);
}
}
/* CTA button: a shine sweep on hover, consistent with the site's primary buttons */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.fortezza-home-cta__btn {
position: relative;
overflow: hidden;
isolation: isolate;
}
.fortezza-home-cta__btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 42%, hsla(0, 0%, 100%, 0.28) 50%, transparent 58%);
transform: translateX(-120%);
transition: transform 0.6s var(--fortezza-ease);
pointer-events: none;
}
.fortezza-home-cta__btn:hover::after {
transform: translateX(120%);
}
}
/* =========================================================================
25. Visual bug fixes — audit 2026-06-29
========================================================================= */
/* Blog post body must never stay hidden waiting for scroll-reveal */
.collection-type-blog-side-by-side .blog-item-content-wrapper,
.collection-type-blog-side-by-side .blog-item-content-wrapper.fortezza-reveal {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
/* Blog posts — prevent horizontal scroll from off-canvas mobile menu width */
html:has(.collection-type-blog-side-by-side),
body:has(.collection-type-blog-side-by-side) {
overflow-x: clip;
}
/* Blog post prev/next pagination — stack on narrow screens */
@media (max-width: 767px) {
.collection-type-blog-side-by-side .item-pagination {
flex-direction: column !important;
align-items: stretch !important;
gap: 0.65rem !important;
}
.collection-type-blog-side-by-side .item-pagination-link {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
white-space: normal !important;
font-size: 0.92rem !important;
line-height: 1.35 !important;
}
}
/* Testimonials — collapse dead vertical space in the fluid-engine grid */
#collection-685e34beddf4302d026ea7f7 .fluid-engine {
grid-template-rows: auto !important;
align-content: start !important;
}
#collection-685e34beddf4302d026ea7f7 .page-section {
min-height: auto !important;
}
/* Real Estate — tighten section spacing between case-study bands */
#collection-686c55b26a6e2505ae250a51 .page-section.section-height--medium {
min-height: auto !important;
padding-top: clamp(2rem, 4vw, 3rem) !important;
padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}
#collection-686c55b26a6e2505ae250a51 .fluid-engine {
grid-template-rows: auto !important;
align-content: start !important;
}
/* Homepage footer — align three columns to the same top row */
@media (min-width: 768px) {
.fe-685eefaef905e476a5956453 {
grid-template-rows: repeat(4, minmax(auto, auto)) !important;
align-items: start !important;
}
.fe-685eefaef905e476a5956453 .fe-block-3faca554a256f0dfd2f4 {
grid-area: 1/11/4/17 !important;
}
}
/* Gallery nav dropdown — center under the folder trigger */
.header-nav-item--folder {
position: relative;
}
.header-nav-item--folder .header-nav-folder-content {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
}
/* Mobile menu must stack above the cookie banner */
body.header--menu-open #header,
body.header--menu-open .header {
z-index: 500002 !important;
}
body.header--menu-open .cookie-banner-mount-point {
z-index: 400000 !important;
}
.header--menu-open .header-menu,
.header-menu.is-active {
z-index: 500001 !important;
}
.header-menu-nav {
padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
}
body:has(.cookie-banner-mount-point .gdpr-cookie-banner) .header-menu-nav,
body:has(.cookie-banner-mount-point .sqs-cookie-banner-v2) .header-menu-nav {
/* Cookie bar + social icon row need ~15rem clearance on phones */
padding-bottom: calc(15rem + env(safe-area-inset-bottom, 0px));
}
body:has(.cookie-banner-mount-point .gdpr-cookie-banner) .header-menu-actions.social-accounts,
body:has(.cookie-banner-mount-point .sqs-cookie-banner-v2) .header-menu-actions.social-accounts {
margin-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
/* Mobile menu Gallery folder — match sibling link styling */
.header-menu-nav-folder-title {
font-size: inherit !important;
text-transform: none !important;
}
.header-menu-nav-folder-title-text,
.header-menu .header-menu-nav-item a .header-nav-folder-title-text,
.header-menu-nav-item-content-folder .header-nav-folder-title-text {
font-size: inherit !important;
font-family: "Marcellus", Georgia, serif !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
}
body:has(.cookie-banner-mount-point .gdpr-cookie-banner) .fortezza-totop,
body:has(.cookie-banner-mount-point .sqs-cookie-banner-v2) .fortezza-totop {
bottom: calc(11rem + env(safe-area-inset-bottom, 0px));
}
/* Homepage hero service links — compress on phones so more fit above cookie banner */
@media (max-width: 767px) {
#block-yui_3_17_2_1_1750622440757_7483 .sqs-html-content > p.sqsrte-large {
margin: 0.22rem 0;
}
#block-yui_3_17_2_1_1750622440757_7483 .sqs-html-content > p.sqsrte-large a {
padding: 0.38em 0.55em 0.42em !important;
font-size: 1.08rem !important;
line-height: 1.3 !important;
}
}
/* Homepage hero — compress service directory on desktop when cookie banner is
visible so the bottom links (Real Estate, Turnkey) stay above the bar. */
@media (min-width: 768px) {
body:has(.cookie-banner-mount-point .gdpr-cookie-banner)
#block-yui_3_17_2_1_1750622440757_7483 .sqs-html-content > h1,
body:has(.cookie-banner-mount-point .sqs-cookie-banner-v2)
#block-yui_3_17_2_1_1750622440757_7483 .sqs-html-content > h1 {
margin-bottom: 0.22em !important;
font-size: clamp(1.55rem, 2.4vw, 2.15rem) !important;
line-height: 1.2 !important;
}
body:has(.cookie-banner-mount-point .gdpr-cookie-banner)
#block-yui_3_17_2_1_1750622440757_7483 .sqs-html-content > p.sqsrte-large,
body:has(.cookie-banner-mount-point .sqs-cookie-banner-v2)
#block-yui_3_17_2_1_1750622440757_7483 .sqs-html-content > p.sqsrte-large {
margin: 0.06em 0 !important;
line-height: 1.32 !important;
}
body:has(.cookie-banner-mount-point .gdpr-cookie-banner)
#block-yui_3_17_2_1_1750622440757_7483 .sqs-html-content > p.sqsrte-large a,
body:has(.cookie-banner-mount-point .sqs-cookie-banner-v2)
#block-yui_3_17_2_1_1750622440757_7483 .sqs-html-content > p.sqsrte-large a {
font-size: clamp(1rem, 1.45vw, 1.28rem) !important;
padding: 0.1em 0.36em 0.14em !important;
line-height: 1.28 !important;
}
body:has(.cookie-banner-mount-point .gdpr-cookie-banner)
[data-section-id="67c7c3445e03545e66104fdd"],
body:has(.cookie-banner-mount-point .sqs-cookie-banner-v2)
[data-section-id="67c7c3445e03545e66104fdd"] {
padding-bottom: 0.65rem !important;
}
}
/* Contact page — sensible mobile block order: title → intro → form → image */
@media (max-width: 767px) {
#collection-67c7c3445e03545e66104f9e .fe-67c7c3445e03545e66104fb3 {
display: flex !important;
flex-direction: column !important;
gap: clamp(1rem, 3vw, 1.5rem) !important;
}
#collection-67c7c3445e03545e66104f9e .fe-block-31c3d9a5056e77c738d2 {
order: 0 !important;
grid-area: auto !important;
width: 100% !important;
}
#collection-67c7c3445e03545e66104f9e .fe-block-c06a2271b9870d1e6955 {
order: 1 !important;
grid-area: auto !important;
width: 100% !important;
}
#collection-67c7c3445e03545e66104f9e .fe-block-6cd003ccf7f1bc72e7ae {
order: 2 !important;
grid-area: auto !important;
width: 100% !important;
}
#collection-67c7c3445e03545e66104f9e .fe-block-82f1772e7ffa0981729e {
order: 3 !important;
max-height: 280px !important;
overflow: hidden !important;
}
#collection-67c7c3445e03545e66104f9e .page-section {
min-height: auto !important;
}
}
/* About — stack founder bio blocks on mobile (fluid-engine overlap) */
@media (max-width: 767px) {
#collection-67c7c3445e03545e66104fa1 .fe-68585287a84c594c1b5ca340 {
display: flex !important;
flex-direction: column !important;
gap: clamp(1rem, 3vw, 1.5rem) !important;
}
#collection-67c7c3445e03545e66104fa1 .fe-68585287a84c594c1b5ca340 .fe-block {
grid-area: auto !important;
width: 100% !important;
position: relative !important;
}
}
/* Real Estate hero — stack title above intro on mobile (fluid-engine overlap) */
@media (max-width: 767px) {
#collection-686c55b26a6e2505ae250a51 .fe-686ca25013ac120cfc579e5a {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
}
#collection-686c55b26a6e2505ae250a51 .fe-block-1742e8a14982dcfb5d43,
#collection-686c55b26a6e2505ae250a51 .fe-block-yui_3_17_2_1_1752356486830_18620 {
grid-area: auto !important;
width: 100% !important;
position: relative !important;
}
#collection-686c55b26a6e2505ae250a51 #block-1742e8a14982dcfb5d43 .sqs-text-block-container,
#collection-686c55b26a6e2505ae250a51 #block-yui_3_17_2_1_1752356486830_18620 .sqs-text-block-container {
margin-top: 0 !important;
}
}
/* Gallery eyebrow — prevent top clip when section scrolls in */
@media (max-width: 767px) {
.fortezza-gallery-header {
padding-top: 1.25rem;
margin-top: 0.5rem;
}
.page-section:has(.fortezza-gallery-header) .content-wrapper {
overflow: visible !important;
}
}
/* About — stack founder bio blocks on mobile (fluid-engine overlap) */
@media (max-width: 767px) {
#collection-67c7c3445e03545e66104fa1 .fe-68585287a84c594c1b5ca340 {
display: flex !important;
flex-direction: column !important;
gap: clamp(1rem, 3vw, 1.5rem) !important;
}
#collection-67c7c3445e03545e66104fa1 .fe-68585287a84c594c1b5ca340 .fe-block {
grid-area: auto !important;
width: 100% !important;
position: relative !important;
}
}
/* Gallery subpage nav — highlight the current folder child, not the parent */
.header-nav-folder-item--active a {
color: var(--fortezza-gold) !important;
font-weight: 600;
}
.header-nav-item--folder.header-nav-item--active > .header-nav-folder-title {
color: inherit;
}
.header-nav-item--folder.fortezza-folder-child-active > .header-nav-folder-title {
color: var(--fortezza-charcoal) !important;
}
.header-nav-item--folder.fortezza-folder-child-active > .header-nav-folder-title::after {
width: 0 !important;
}
.header-menu-nav-folder-content a.fortezza-mobile-nav-active {
color: var(--fortezza-gold) !important;
font-weight: 600;
}