/* ============================================================
brand-motif.css — repeated visual motif (Forge / S022 / 2026-06-05)
C3: a subtle repeated visual element used on >=3 routes.
Substrate: a low-contrast ember-red whorl SVG (inlined as data URI)
repeated across the page background. The same whorl is the visual
signature in /assets/brand/brand_mark_master.png and the
thumbprint-portrait-loop.svg hero motion. We use it here as a
page-level texture so the site has a recognizable brand mark on
every page that opts in via the .brand-motif class.
Application:
OR
Honors prefers-reduced-motion: reduce (we keep the mark static).
Tinted at 4% opacity over the cream paper, so the visual texture
is felt, not seen. The print/editorial pattern that ties the
council/FAQ/Coaches/About pages together.
============================================================ */
.brand-motif {
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23b04a2f' stroke-width='0.5' opacity='0.45'%3E%3Cpath d='M40 40 m-18 0 a18 18 0 1 0 36 0 a18 18 0 1 0 -36 0 M40 40 m-12 0 a12 12 0 1 0 24 0 a12 12 0 1 0 -24 0 M40 40 m-6 0 a6 6 0 1 0 12 0 a6 6 0 1 0 -12 0'/%3E%3Cpath d='M40 22 L40 58 M22 40 L58 40 M28 28 L52 52 M28 52 L52 28' stroke-width='0.3'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 240px 240px;
background-position: 0 0;
background-attachment: fixed;
}
/* Section-scoped variant — higher contrast for emphasis panels */
.brand-motif--section {
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23b04a2f' stroke-width='0.7' opacity='0.18'%3E%3Cpath d='M40 40 m-22 0 a22 22 0 1 0 44 0 a22 22 0 1 0 -44 0 M40 40 m-15 0 a15 15 0 1 0 30 0 a15 15 0 1 0 -30 0 M40 40 m-8 0 a8 8 0 1 0 16 0 a8 8 0 1 0 -16 0'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 320px 320px;
background-position: 0 0;
background-color: var(--paper, #faf7f2);
}
/* Divider rule using the brand mark — drawn inline as a centered whorl
with a hairline rule on either side. Use as
. */
.brand-rule {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
border: none;
margin: 3rem auto;
max-width: 60%;
text-align: center;
}
.brand-rule::before,
.brand-rule::after {
content: '';
flex: 1;
height: 0.5px;
background: var(--ink-4, #b5b5b0);
}
.brand-rule::before {
background: linear-gradient(to right, transparent, var(--ink-4, #b5b5b0));
}
.brand-rule::after {
background: linear-gradient(to left, transparent, var(--ink-4, #b5b5b0));
}
.brand-rule-mark {
display: inline-block;
width: 18px;
height: 18px;
flex: 0 0 18px;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b04a2f' stroke-width='1.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23b04a2f'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
/* Reduced-motion and small-viewport friendliness: keep the mark static,
no shimmer or rotation. Background-size drops on small screens. */
@media (prefers-reduced-motion: reduce) {
.brand-motif { background-attachment: scroll; }
}
@media (max-width: 480px) {
.brand-motif { background-size: 180px 180px; }
}