/* FILE: public_html/assets/css/style.css
*
* Design system for the awsroof.com rebuild, matching the site's existing
* brand: navy/blue/gold, Open Sans + Montserrat, the same 1170px container
* and 960px/600px breakpoints the original Neve/Otter-based site used
* (confirmed by inspecting the live site's own CSS custom properties).
* No framework, no icon-font dependency — plain CSS, small hand-drawn SVG
* icons inlined in the templates.
*/
:root {
--navy: #070731;
--blue: #3c39d9;
--blue-dark: #2c29ad;
--gold: #fdb72b;
--bg: #f8f8f8;
--white: #ffffff;
--text: #070731;
--font-body: "Open Sans", Arial, Helvetica, sans-serif;
--font-heading: "Montserrat", Arial, Helvetica, sans-serif;
--container: 1170px;
--radius-card: 20px;
--radius-button: 3px;
}
/* ---- Reset / base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--text);
background: var(--white);
line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 800;
line-height: 1.2;
margin: 0 0 0.5em;
}
p { margin: 0 0 1em; }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 20px;
}
/* ---- Buttons ----------------------------------------------------------- */
.button {
display: inline-block;
background: var(--blue);
color: var(--white);
font-family: var(--font-body);
font-weight: 700;
text-decoration: none;
border-radius: var(--radius-button);
padding: 14px 30px;
border: 0;
cursor: pointer;
transition: background-color 0.15s linear;
}
.button:hover, .button:focus { background: var(--blue-dark); color: var(--white); }
.button--gold { background: var(--gold); color: var(--navy); }
.button--gold:hover, .button--gold:focus { background: #e6a324; color: var(--navy); }
/* ---- Site header / nav -------------------------------------------------- */
.site-header-bar {
background: var(--white);
border-bottom: 1px solid rgba(7, 7, 49, 0.1);
}
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px 20px;
max-width: var(--container);
margin: 0 auto;
}
.site-header__logo {
display: flex;
align-items: center;
flex-shrink: 0;
}
.site-header__logo img {
display: block;
height: 72px;
width: auto;
max-width: 100%;
}
@media (max-width: 960px) {
.site-header__logo img { height: 46px; }
}
.nav-toggle {
display: none;
background: none;
border: 0;
cursor: pointer;
padding: 8px;
margin-left: auto;
}
.nav-toggle__bar {
display: block;
width: 26px;
height: 3px;
background: var(--navy);
margin: 5px 0;
border-radius: 2px;
}
.main-nav__list {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.main-nav__list a {
display: block;
padding: 10px 12px;
color: var(--navy);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
border-radius: var(--radius-button);
}
.main-nav__list > li > a:hover,
.main-nav__list > li > a:focus {
background: var(--bg);
}
.main-nav__item--has-children { position: relative; }
.main-nav__submenu {
list-style: none;
margin: 0;
padding: 6px;
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
background: var(--white);
box-shadow: 0 8px 24px rgba(7, 7, 49, 0.12);
border-radius: var(--radius-button);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.main-nav__item--has-children:hover .main-nav__submenu,
.main-nav__item--has-children:focus-within .main-nav__submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-nav__submenu a { white-space: nowrap; }
.site-header__cta { flex-shrink: 0; }
@media (max-width: 960px) {
.nav-toggle { display: block; }
.site-header__cta { display: none; }
.main-nav {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: min(300px, 85vw);
background: var(--navy);
padding: 80px 24px 24px;
transform: translateX(100%);
transition: transform 0.25s ease;
overflow-y: auto;
z-index: 100;
}
.main-nav.is-open { transform: translateX(0); }
.main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.main-nav__list a { color: var(--white); padding: 12px 4px; }
.main-nav__list > li > a:hover, .main-nav__list > li > a:focus { background: rgba(255,255,255,0.08); }
.main-nav__submenu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background: rgba(255,255,255,0.05);
display: none;
}
.main-nav__item--has-children.is-expanded .main-nav__submenu { display: block; }
.main-nav__submenu a { color: var(--white); }
.main-nav__cta-mobile { display: block; margin-top: 20px; }
}
@media (min-width: 961px) {
.main-nav__cta-mobile { display: none; }
}
/* ---- Hero ---------------------------------------------------------- */
.hero {
background: radial-gradient(ellipse at top right, #14124f 0%, var(--navy) 60%);
color: var(--white);
padding: 100px 20px;
}
.hero__inner { max-width: var(--container); margin: 0 auto; }
.hero__eyebrow {
color: var(--gold);
font-family: var(--font-heading);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.9rem;
margin-bottom: 0.75em;
}
.hero h1 {
color: var(--white);
font-size: clamp(2rem, 4.5vw, 3.4rem);
max-width: 780px;
margin-bottom: 0.5em;
}
.hero p {
max-width: 640px;
font-size: 1.05rem;
}
.hero .button { margin-top: 10px; }
/* ---- Generic section spacing ---------------------------------------- */
.section { padding: 60px 20px; }
.section--tight { padding: 40px 20px; }
.section--center { text-align: center; }
.section__intro { max-width: 760px; margin: 0 auto 2.5em; }
.section__intro h2 { margin-bottom: 0.5em; }
/* ---- Stats ------------------------------------------------------------ */
.stats {
background: var(--navy);
color: var(--white);
}
.stats__grid {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
padding: 25px 15px;
}
.stat__number {
font-family: var(--font-heading);
font-weight: 800;
font-size: 2.4rem;
color: var(--gold);
line-height: 1;
margin-bottom: 0.3em;
}
.stat__label {
font-size: 0.8rem;
letter-spacing: 0.03em;
text-transform: uppercase;
opacity: 0.9;
}
@media (max-width: 960px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .stats__grid { grid-template-columns: 1fr; gap: 24px; } }
/* ---- Services grid ---------------------------------------------------- */
.services__grid {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.service-card {
background: var(--bg);
border-radius: var(--radius-card);
padding: 32px 24px;
text-align: center;
}
.service-card__icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--navy);
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.service-card__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.service-card h3 { font-size: 1.05rem; margin-bottom: 0.5em; }
.service-card p { font-size: 0.92rem; color: #2c2c4a; margin-bottom: 0; }
@media (max-width: 960px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services__grid { grid-template-columns: 1fr; } }
/* ---- Testimonials / reviews intro -------------------------------------- */
.reviews { background: var(--bg); }
.testimonials__grid {
max-width: var(--container);
margin: 0 auto 2.5em;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
text-align: left;
}
.testimonial {
background: var(--white);
border-radius: var(--radius-card);
padding: 28px 26px;
}
.testimonial__stars {
color: var(--gold);
letter-spacing: 0.1em;
font-size: 1.1rem;
margin-bottom: 12px;
}
.testimonial__quote {
font-style: italic;
color: var(--text);
margin-bottom: 14px;
}
.testimonial__author {
font-weight: 800;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 0;
}
@media (max-width: 700px) { .testimonials__grid { grid-template-columns: 1fr; } }
/* ---- Screen-reader-only utility ----------------------------------------- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---- Blog / news preview ------------------------------------------------ */
.post-cards {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.post-card {
border: 1px solid #e5e5ee;
border-radius: var(--radius-button);
padding: 20px;
text-decoration: none;
color: var(--text);
display: block;
overflow: hidden; /* clips post-card__image's bleed below to the rounded corners */
}
.post-card:hover { border-color: var(--blue); }
.post-card__image {
aspect-ratio: 16 / 10;
background-color: var(--bg);
background-size: cover;
background-position: center;
margin: -20px -20px 16px;
/* Pull out to the card's edges (undoing .post-card's own padding) so the
image reaches the card border, same "photo bleeds to the edge" look
as .page-hero elsewhere on the site. .post-card's own overflow:hidden
(above) clips this to match the card's rounded corners. */
}
.post-card h3 { font-size: 1rem; margin-bottom: 0.4em; }
.post-card__date { font-size: 0.8rem; color: #6a6a80; }
.post-card__excerpt { font-size: 0.9rem; color: #2c2c4a; margin: 0.6em 0 0; }
@media (max-width: 960px) { .post-cards { grid-template-columns: 1fr; } }
/* Blog index specifically (blog-index.php) — wider 2-up grid than the
homepage's 3-card preview above, since the index page has the room for
bigger cards. The 960px collapse-to-1-column rule above still applies
(it targets .post-cards, which this element also carries). */
.post-cards--blog { grid-template-columns: repeat(2, 1fr); }
/* ---- Blog pagination (blog-index.php only) ------------------------------ */
.blog-pagination {
max-width: var(--container);
margin: 40px auto 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 6px;
}
.blog-pagination__pages { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-pagination__link,
.blog-pagination__current {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border-radius: var(--radius-button);
font-size: 0.9rem;
}
.blog-pagination__link {
border: 1px solid #e5e5ee;
color: var(--text);
text-decoration: none;
}
.blog-pagination__link:hover { border-color: var(--blue); color: var(--blue); }
.blog-pagination__current { background: var(--navy); color: var(--white); font-weight: 600; }
/* ---- Footer ------------------------------------------------------------ */
.site-footer {
background: var(--navy);
color: var(--white);
padding: 50px 20px 24px;
}
.site-footer__inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.site-footer h2 {
font-size: 1rem;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 0.75em;
}
.site-footer a { color: var(--white); }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: 0.5em; }
.site-footer__bottom {
max-width: var(--container);
margin: 30px auto 0;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.15);
font-size: 0.82rem;
opacity: 0.8;
}
@media (max-width: 960px) {
.site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.site-footer__inner { grid-template-columns: 1fr; }
}
/* ---- Page hero (photo-backed banner for content pages) ----------------- */
.page-hero {
color: var(--white);
text-align: center;
padding: 90px 20px;
background-color: var(--navy);
background-size: cover;
background-position: center;
}
.page-hero__inner { max-width: 780px; margin: 0 auto; }
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0; }
/* ---- Post hero (2026-09-11 restructure: title bar + uncropped photo) --
Replaces the photo-behind-text banner for blog posts specifically —
the old .page-hero above forced every photo into a fixed-height box
via background-size: cover, cropping whatever didn't fit. Here the
title sits in its own solid-color bar (post.php always renders this,
with or without a featured image) and the photo, when there is one,
follows as a plain block-level image at its natural aspect ratio, so
nothing about the photo gets cut off or covered by text. page.php
still uses .page-hero above; not touched in this pass. */
.post-hero {
color: var(--white);
text-align: center;
padding: 50px 20px;
background-color: var(--navy);
}
.post-hero__inner { max-width: 780px; margin: 0 auto; }
.post-hero h1 { color: var(--white); font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0; }
.post-hero-image { max-width: var(--container); margin: 0 auto; }
.post-hero-image img { display: block; width: 100%; height: auto; }
/* ---- Article / generic page content ------------------------------------ */
.page-content { max-width: 780px; margin: 0 auto; padding: 60px 20px; }
.page-content h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page-content h2 {
font-size: clamp(1.35rem, 3vw, 1.9rem);
color: var(--navy);
margin-top: 1.7em;
}
.page-content h1 + h2,
.page-content h2:first-child {
margin-top: 0;
}
.page-content h3 {
font-size: 1.15rem;
color: var(--blue-dark);
margin-top: 1.3em;
}
.page-content p { line-height: 1.75; }
/* ---- Post byline + back-link (see templates/post.php) ------------------ */
.post-byline { color: #6a6a80; font-size: 0.9rem; margin-top: -0.5em; }
.post-back { margin-top: 2.5em; font-weight: 600; }
/* A markdown block of consecutive images with no surrounding text (e.g.
five "" lines back to back) lands as one full of ![]()
and
tags — see Markdown::renderBlock(). Treat that shape as a photo
grid — but ONLY when there are two or more images back to back
(`img + img`); a lone standalone image in its own paragraph is a single
photo, diagram, or chart/table graphic, not a gallery, and forcing it
into a 4:3 box with `object-fit: cover` center-crops it — fine for a
photo, but it silently cuts off the right (and left) side of anything
wider, like a data table. Caught when a blog post's chart image
(`cost-of-a-new-roof-what-to-consider-before-deciding`) rendered with
its right-hand column sliced off. `auto-fit` + a `minmax` basis (not a
fixed column count) means the grid sits in one row on desktop
regardless of how many photos a given page has, and reflows to fewer,
still-multi-column rows as the viewport narrows — deliberately not the
fixed `flex-basis: 240px` this used to be, which forced a single
full-width column on phones. */
.page-content p:has(img + img) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 12px;
margin: 2em 0;
}
.page-content p:has(img + img) br { display: none; }
.page-content p:has(img + img) img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 12px 30px rgba(7, 7, 49, 0.15);
}
/* A single standalone image gets shown in full at its natural aspect
ratio — no forced cropping — so a chart or table graphic stays
readable. Still gets the same rounded corners and shadow treatment as
the gallery photos above for visual consistency. */
.page-content p:has(img):not(:has(img + img)) { margin: 2em 0; }
.page-content p:has(img):not(:has(img + img)) img {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 12px 30px rgba(7, 7, 49, 0.15);
}
.page-content p:not(:has(img)) img { border-radius: 10px; }
/* ---- Content columns (see Markdown.php's ":::columns" syntax) ---------- */
/* Same auto-fit approach as the photo grid above: sits side by side on
desktop, reflows to one column on narrow screens, and doesn't care how
many cards a given page passes in. */
.content-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
margin: 2.5em 0;
}
.content-column {
background: var(--bg);
border-radius: var(--radius-card);
padding: 28px 24px;
}
.content-column h3 { margin-top: 0; color: var(--navy); }
.content-column p { margin: 0; color: #2c2c4a; }
/* Per-block opt-in modifier (":::columns stacked") — a single vertical
column instead of the default side-by-side row, for a page that wants
its cards stacked regardless of viewport width. Other ":::columns"
blocks (e.g. the Safety page's trio) are untouched by this. */
.content-columns--stacked {
grid-template-columns: 1fr;
max-width: 640px;
}
/* ---- Brand/certification logo beside its heading (see Markdown.php's
":::brand" syntax) — a fixed-width logo column next to the heading and
body text, matching the live site's "badge next to the section it backs
up" layout. Flexbox rather than a float: no clearfix needed, and it
stacks cleanly on narrow screens via the media query below instead of
text awkwardly wrapping around a shrinking float. */
.content-brand {
display: flex;
align-items: flex-start;
gap: 28px;
margin: 2.5em 0;
}
.content-brand__logo {
flex: 0 0 140px;
max-width: 140px;
}
.content-brand__logo img {
width: 100%;
height: auto;
/* Logos aren't photos — undo the general .page-content img treatment
(drop shadow, zoom cursor) so this reads as a badge, not a gallery
photo, and isn't offered up to the lightbox (see main.js). */
border-radius: 0;
box-shadow: none;
cursor: default;
}
.content-brand__body { flex: 1 1 auto; min-width: 240px; }
.content-brand__body h2,
.content-brand__body h3 { margin-top: 0; }
@media (max-width: 560px) {
.content-brand { flex-direction: column; }
.content-brand__logo { flex: 0 0 auto; max-width: 120px; }
}
/* ---- Service row: photo left, heading+text right (see Markdown.php's
":::service" syntax) — same flex-row shape as .content-brand above, but
styled as a real photo (crop/shadow, wider column) rather than a badge,
and left clickable in the lightbox (it's content, not a logo). */
.content-service {
display: flex;
align-items: flex-start;
gap: 28px;
margin: 2.5em 0;
}
.content-service__photo {
flex: 0 0 260px;
max-width: 260px;
}
.content-service__photo img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 12px 30px rgba(7, 7, 49, 0.15);
}
.content-service__body { flex: 1 1 auto; min-width: 240px; }
.content-service__body h3 { margin-top: 0; }
@media (max-width: 640px) {
.content-service { flex-direction: column; }
.content-service__photo { flex: 0 0 auto; max-width: 100%; }
}
/* ---- Full-width colored badge band (see Markdown.php's ":::badge"
syntax) — for a certification badge whose own artwork needs a dark
backdrop to read (e.g. light/white text baked into the image). "Full
width" here means the full width of .page-content's 780px column (like
every other block on the page), not edge-to-edge of the browser
viewport — flagged to James to confirm which one he actually wants;
true edge-to-edge would need a negative-margin breakout since
.page-content is a centered, padded column. */
.content-badge {
background: var(--navy);
border-radius: var(--radius-card);
padding: 40px 24px;
margin: 2.5em 0;
text-align: center;
}
.content-badge img {
display: inline-block;
max-width: 340px;
width: 100%;
border-radius: 0;
box-shadow: none;
}
.content-badge__caption {
color: var(--white);
font-size: 0.85rem;
opacity: 0.85;
margin: 0.75em 0 0;
}
/* ---- Video embed (":::video" — see Markdown::renderVideo()) ------------ */
.content-video {
display: block;
width: 100%;
aspect-ratio: 3840 / 1600;
height: auto;
border-radius: var(--radius-card);
background: var(--navy);
margin: 2em 0;
}
/* ---- Project gallery grid (see Markdown.php's ":::projects" syntax) ----
A dense photo grid for a portfolio page with dozens of short-captioned
entries — matches the live Past Projects page's own treatment: a tight
grid of photos with the caption overlaid on the photo itself (a dark
gradient scrim + white text) rather than a separate caption line below
it, so a long list of projects stays scannable instead of turning into
a very tall page of stacked rows. */
.content-projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 4px;
margin: 1.5em 0;
}
.content-project {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--navy);
}
.content-project img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.content-project__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 10px 12px;
background: rgba(7, 7, 49, 0.72);
color: var(--white);
font-size: 0.82rem;
font-weight: 700;
line-height: 1.3;
text-align: center;
}
/* ---- Bottom CTA band (every generic content page ends with this) ------- */
.page-cta { background: var(--bg); text-align: center; padding: 60px 20px; }
.page-cta h2 { margin-bottom: 0.4em; }
.page-cta p { max-width: 520px; margin: 0 auto 1.5em; color: #2c2c4a; }
/* ---- Image lightbox (see main.js — built once, reused for every click) - */
.page-content img { cursor: zoom-in; }
.lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
background: rgba(7, 7, 49, 0.92);
cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
max-width: 100%;
max-height: 100%;
border-radius: 6px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.lightbox__close {
position: absolute;
top: 20px;
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.15);
color: var(--white);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
}
.lightbox__close:hover, .lightbox__close:focus { background: rgba(255, 255, 255, 0.28); }
/* ---- Contact / estimate form (templates/contact-form.php) --------------- */
.contact-form {
display: flex;
flex-direction: column;
gap: 18px;
max-width: 560px;
margin-top: 1.5em;
}
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 560px) { .form-row-group { grid-template-columns: 1fr; } }
.form-row label {
font-family: var(--font-heading);
font-weight: 800;
font-size: 0.85rem;
color: var(--navy);
}
.form-row input,
.form-row select,
.form-row textarea {
font-family: var(--font-body);
font-size: 1rem;
color: var(--text);
border: 1px solid #d5d5e0;
border-radius: var(--radius-button);
padding: 10px 12px;
background: var(--white);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
outline: 2px solid var(--blue);
outline-offset: 1px;
}
.form-row textarea { resize: vertical; min-height: 100px; }
.form-field-error { color: #b3261e; font-size: 0.82rem; }
.contact-form .button {
align-self: flex-start;
border: 0;
cursor: pointer;
}
/* Hidden from sighted visitors (not display:none — some bots specifically
skip display:none/visibility:hidden fields, so this is an off-screen
position instead) and from screen readers via aria-hidden on the wrapper
in the template. Real visitors never see or fill this in; a bot that
fills every input on the page will. */
.form-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-notice {
border-radius: var(--radius-button);
padding: 16px 18px;
margin: 1em 0;
}
.form-notice--success { background: #e8f6ec; border: 1px solid #b6e2c1; }
.form-notice--error { background: #fbeceb; border: 1px solid #f0bcb8; color: #7a231d; }
/* ---- 404 ---------------------------------------------------------------- */
.not-found { max-width: 600px; margin: 0 auto; padding: 100px 20px; text-align: center; }
/* ---- Scroll-to-top button ------------------------------------------------ */
.scroll-top-btn {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 40;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: var(--navy);
color: var(--white);
cursor: pointer;
box-shadow: 0 6px 16px rgba(7, 7, 49, 0.25);
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s linear;
}
.scroll-top-btn:hover, .scroll-top-btn:focus { background: var(--blue-dark); }
.scroll-top-btn.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* [hidden] is the no-JS fallback only — main.js removes the attribute on
load and controls actual visibility via .is-visible above, so the fade
transition can animate instead of snapping with display:none. */
.scroll-top-btn[hidden] { display: none; }
@media (max-width: 600px) {
.scroll-top-btn { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}