site/assets/css/style.css

@@ -480,6 +480,7 @@ section[id] {
   z-index: -1;
   border: var(--ring) solid transparent;
   background:
+    var(--noise) 0 0 / 140px padding-box,
     linear-gradient(var(--btn-face), var(--btn-face)) padding-box,
     conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), 0) 0deg, rgba(var(--fitme-accent-rgb), 0) 150deg,
         var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
@@ -4615,3 +4616,19 @@ a:where(:not(.site-btn, .gym-switch-btn, .gal-link, .skip-link, .splide__arrow,
 @media (prefers-reduced-motion: reduce) {
   a { transition: none !important; }
 }
+
+/* ── Noise texture ─────────────────────────────────────────────────────────────
+   Buttons: a tiled grey fractal-noise image laid over the face colour (!important
+   so the hover rules, which reset `background`, don't drop it; the hover face in
+   ::before carries the same layer). Headings: the #pt-noise SVG filter (defined
+   in site/includes/include.php) multiplies grain into the lettering only. */
+:root {
+  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
+}
+.site-btn,
+.gym-switch-btn,
+.crossfit-nav-link {
+  background-image: var(--noise) !important;
+  background-size: 140px 140px !important;
+}
+h1, h2 { filter: url(#pt-noise); }

site/includes/include.php

@@ -89,4 +89,20 @@ $canonical = $GLOBALS['_canonical_override'] ?? match ($page) {
 <?php include dirname(__DIR__, 2) . '/includes/env_ribbon.php';   // moldura de aviso fora de produção ?>
 </head>
 <body>
+<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
+  <!-- Grain for the h1/h2 lettering (style.css, "Noise texture"): fractal noise -> grey ->
+       squeezed to 72-100% brightness, multiplied into the glyphs and clipped to their shape. -->
+  <filter id="pt-noise" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
+    <feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" seed="4" result="n"/>
+    <feColorMatrix in="n" type="saturate" values="0" result="g"/>
+    <feComponentTransfer in="g" result="grain">
+      <feFuncR type="linear" slope=".3" intercept=".72"/>
+      <feFuncG type="linear" slope=".3" intercept=".72"/>
+      <feFuncB type="linear" slope=".3" intercept=".72"/>
+      <feFuncA type="linear" slope="0" intercept="1"/>
+    </feComponentTransfer>
+    <feBlend in="SourceGraphic" in2="grain" mode="multiply" result="mix"/>
+    <feComposite in="mix" in2="SourceGraphic" operator="in"/>
+  </filter>
+</svg>
 <a href="#conteudo" class="skip-link">Saltar para o conteúdo</a>