/* ========================================================================== Shaper's Gym — main.css Custom layer on top of Tailwind. Tailwind handles layout/spacing utilities; this file owns theme tokens, the ring motif, motion and a few components. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Theme tokens Dark is the default (matches the brand mark: amber on near-black). Light theme is applied by adding class="light" to . -------------------------------------------------------------------------- */ :root { --bg: 11 11 12; --surface: 22 23 26; --surface-2: 30 32 36; --line: 42 45 51; --ink: 242 240 236; --muted: 154 154 160; --amber: 245 166 35; --amber-ink: 245 166 35; --amber-deep: 226 118 27; --on-amber: 11 11 12; --shadow-lift: 0 18px 40px -18px rgb(0 0 0 / 0.75); --grain-opacity: 0.05; } html.light { --bg: 233 232 228; --surface: 255 255 255; --surface-2: 245 244 241; --line: 213 210 203; --ink: 16 17 20; --muted: 92 94 99; --amber: 245 166 35; --amber-ink: 163 92 5; --amber-deep: 199 120 8; --on-amber: 11 11 12; --shadow-lift: 0 18px 38px -20px rgb(24 20 12 / 0.35); --grain-opacity: 0.035; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; } body { background-color: rgb(var(--bg)); color: rgb(var(--ink)); font-family: "Barlow", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background-color 0.35s ease, color 0.35s ease; } ::selection { background: rgb(var(--amber)); color: rgb(var(--on-amber)); } /* Visible keyboard focus everywhere, without showing rings on mouse clicks. */ :focus-visible { outline: 2px solid rgb(var(--amber)); outline-offset: 3px; border-radius: 2px; } /* Scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: rgb(var(--bg)); } ::-webkit-scrollbar-thumb { background: rgb(var(--line)); border-radius: 99px; border: 3px solid rgb(var(--bg)); } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--amber) / 0.6); } /* -------------------------------------------------------------------------- 3. Typography helpers Display : Anton — condensed poster face, athletic at large sizes Body : Barlow — athletic, humanist, highly readable Utility : Barlow Condensed — labels, eyebrows, scoreboard numerals -------------------------------------------------------------------------- */ .sg-display { font-family: "Anton", Impact, "Barlow Condensed", sans-serif; font-weight: 400; /* Anton ships a single, already-heavy weight */ letter-spacing: 0.005em; line-height: 0.9; text-transform: uppercase; } /* Jersey slant. Used once, on the hero headline, and nowhere else. */ .sg-slant { transform: skewX(-7deg); transform-origin: left bottom; } .sg-label { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; } .sg-num { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Outlined display type — used once, in the hero, for the second line. */ .sg-outline { color: transparent; -webkit-text-stroke: 1.5px rgb(var(--ink) / 0.55); } @media (min-width: 768px) { .sg-outline { -webkit-text-stroke-width: 2px; } } /* -------------------------------------------------------------------------- 4. Signature — the ring The mark is a broken circle cut by a diagonal strike, with a barbell across it. That becomes the page's structural device: a rotating segmented ring behind the hero, and the mark's own tapered slash rule between sections. -------------------------------------------------------------------------- */ /* 4a. Section rule — the tapered slash that flanks STOP and GYM in the mark */ .sg-rule { height: 14px; width: 100%; opacity: 0.75; background-repeat: repeat-x; background-position: center; background-size: auto 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='14' viewBox='0 0 74 14'%3E%3Cg fill='%23F5A623'%3E%3Cpolygon points='0,7.6 46,4.2 46,7.1'/%3E%3Cpolygon points='52,6.9 52,9.8 74,6.4'/%3E%3C/g%3E%3C/svg%3E"); } /* 4b. Rotating broken ring — built by main.js, parked behind the hero. The mark's circle is cut into arcs; this rebuilds that at scale. */ .sg-ring { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 0; } .sg-ring svg { width: min(128vw, 1180px); height: auto; color: rgb(var(--amber)); opacity: 0.16; animation: sg-spin 150s linear infinite; transform-origin: 50% 50%; } html.light .sg-ring svg { opacity: 0.22; } @keyframes sg-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 5. Surfaces and texture -------------------------------------------------------------------------- */ /* Fine grain over the hero so the flat dark field doesn't read as empty. */ .sg-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Diagonal safety-stripe texture — used on image placeholders and accents. */ .sg-hatch { background-image: repeating-linear-gradient( -45deg, rgb(var(--amber) / 0.09) 0 10px, transparent 10px 22px ); } .sg-card { background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line)); transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .sg-card:hover { border-color: rgb(var(--amber) / 0.55); transform: translateY(-4px); box-shadow: var(--shadow-lift); } /* Numbered corner tab used on the service cards */ .sg-card .sg-corner { transition: color 0.3s ease; } .sg-card:hover .sg-corner { color: rgb(var(--amber)); } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ .sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.95rem 1.9rem; font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease; } .sg-btn:active { transform: translateY(1px); } .sg-btn-primary { background-color: rgb(var(--amber)); color: rgb(var(--on-amber)); } .sg-btn-primary:hover { background-color: rgb(var(--amber-deep)); } .sg-btn-ghost { border-color: rgb(var(--ink) / 0.35); color: rgb(var(--ink)); background-color: transparent; } .sg-btn-ghost:hover { border-color: rgb(var(--amber)); color: rgb(var(--amber-ink)); } /* -------------------------------------------------------------------------- 7. Marquee ticker -------------------------------------------------------------------------- */ .sg-marquee { display: flex; overflow: hidden; user-select: none; gap: 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .sg-marquee__track { flex-shrink: 0; display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; min-width: 100%; animation: sg-scroll 38s linear infinite; } @keyframes sg-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* -------------------------------------------------------------------------- 8. Scroll reveal (driven by IntersectionObserver in main.js) -------------------------------------------------------------------------- */ .sg-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .sg-reveal.is-visible { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 9. Image placeholders Every slot below is waiting for a real photograph. Swap the markup for an and delete the placeholder classes. Sizes are noted in README.md. -------------------------------------------------------------------------- */ .sg-photo { position: relative; overflow: hidden; background-color: rgb(var(--surface-2)); border: 1px solid rgb(var(--line)); display: grid; place-items: center; text-align: center; } .sg-photo::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, rgb(var(--amber) / 0.07) 0 12px, transparent 12px 26px ); } .sg-photo > * { position: relative; } /* -------------------------------------------------------------------------- 10. Header -------------------------------------------------------------------------- */ .sg-header { transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease; border-bottom: 1px solid transparent; } .sg-header.is-stuck { background-color: rgb(var(--bg) / 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgb(var(--line)); } .sg-navlink { position: relative; padding-block: 0.35rem; color: rgb(var(--ink) / 0.72); transition: color 0.25s ease; } .sg-navlink::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: rgb(var(--amber)); transition: width 0.28s ease; } .sg-navlink:hover, .sg-navlink.is-active { color: rgb(var(--ink)); } .sg-navlink:hover::after, .sg-navlink.is-active::after { width: 100%; } /* Mobile drawer */ .sg-drawer { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .sg-drawer.is-open { transform: translateX(0); } /* -------------------------------------------------------------------------- 11. Accordion (FAQ) -------------------------------------------------------------------------- */ .sg-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.38s cubic-bezier(0.16, 1, 0.3, 1); } .sg-acc__panel > div { overflow: hidden; } .sg-acc.is-open .sg-acc__panel { grid-template-rows: 1fr; } .sg-acc.is-open .sg-acc__icon { transform: rotate(45deg); } .sg-acc__icon { transition: transform 0.35s ease, color 0.25s ease; } .sg-acc.is-open .sg-acc__icon { color: rgb(var(--amber)); } /* -------------------------------------------------------------------------- 12. Schedule tabs -------------------------------------------------------------------------- */ .sg-day { border: 1px solid rgb(var(--line)); color: rgb(var(--muted)); transition: all 0.25s ease; } .sg-day:hover { color: rgb(var(--ink)); border-color: rgb(var(--amber) / 0.5); } .sg-day.is-active { background: rgb(var(--amber)); border-color: rgb(var(--amber)); color: rgb(var(--on-amber)); } /* -------------------------------------------------------------------------- 13. Forms -------------------------------------------------------------------------- */ .sg-input { width: 100%; background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line)); color: rgb(var(--ink)); padding: 0.85rem 1rem; border-radius: 2px; font-size: 1rem; transition: border-color 0.25s ease, background-color 0.25s ease; } .sg-input::placeholder { color: rgb(var(--muted)); } .sg-input:focus { border-color: rgb(var(--amber)); outline: none; background-color: rgb(var(--surface-2)); } .sg-input[aria-invalid="true"] { border-color: #ef4444; } /* -------------------------------------------------------------------------- 14. Lightbox -------------------------------------------------------------------------- */ .sg-lightbox { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .sg-lightbox.is-open { opacity: 1; visibility: visible; } /* -------------------------------------------------------------------------- 15. Legal pages — readable long-form defaults -------------------------------------------------------------------------- */ .sg-prose { color: rgb(var(--ink) / 0.82); line-height: 1.75; max-width: 72ch; } .sg-prose h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.35rem; color: rgb(var(--ink)); margin-top: 2.75rem; margin-bottom: 0.85rem; scroll-margin-top: 6rem; } .sg-prose h3 { font-family: "Barlow", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0; color: rgb(var(--ink)); margin-top: 1.75rem; margin-bottom: 0.5rem; } .sg-prose p { margin-bottom: 1rem; } .sg-prose ul, .sg-prose ol { margin: 0 0 1.15rem 1.3rem; } .sg-prose ul { list-style: disc; } .sg-prose ol { list-style: decimal; } .sg-prose li { margin-bottom: 0.5rem; padding-left: 0.25rem; } .sg-prose a { color: rgb(var(--amber-ink)); text-decoration: underline; text-underline-offset: 3px; } .sg-prose a:hover { color: rgb(var(--amber-deep)); } .sg-prose strong { color: rgb(var(--ink)); font-weight: 700; } .sg-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.95rem; } .sg-prose th, .sg-prose td { border: 1px solid rgb(var(--line)); padding: 0.65rem 0.8rem; text-align: left; vertical-align: top; } .sg-prose th { background: rgb(var(--surface)); color: rgb(var(--ink)); font-weight: 700; } /* Fill-in markers left for the business owner. Deliberately loud. */ .sg-fill { background: rgb(var(--amber) / 0.16); border-bottom: 1px dashed rgb(var(--amber)); color: rgb(var(--amber-ink)); padding: 0.05em 0.35em; font-weight: 600; white-space: nowrap; } /* -------------------------------------------------------------------------- 16. Motion preferences and print -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .sg-reveal { opacity: 1; transform: none; } .sg-ring svg { animation: none; } .sg-marquee__track { animation: none; } } @media print { .sg-header, .sg-ring, .sg-marquee, .sg-noprint { display: none !important; } body { background: #fff; color: #000; } .sg-prose { max-width: none; } } /* -------------------------------------------------------------------------- 17. Logo swap The amber mark reads well on the dark field. On the light theme it drops to the ink version, which is how the mark is drawn on white in the brand files. -------------------------------------------------------------------------- */ html .sg-logo--amber { display: block; } html .sg-logo--ink { display: none; } html.light .sg-logo--amber { display: none; } html.light .sg-logo--ink { display: block; } /* -------------------------------------------------------------------------- 18. Photography .sg-shot holds a real image. Unlike .sg-photo (the hatched empty slot) it paints no overlay of its own, so the picture reads cleanly. -------------------------------------------------------------------------- */ .sg-shot { position: relative; overflow: hidden; background-color: rgb(var(--surface-2)); } .sg-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Dark scrim so amber text and captions stay legible over any photo */ .sg-shot--scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / 0.72) 100%); } .sg-tile:hover > img { transform: scale(1.06); } .sg-tile .sg-tile__cap { opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; } .sg-tile:hover .sg-tile__cap, .sg-tile:focus-visible .sg-tile__cap { opacity: 1; transform: none; } /* Photos carry the brand better when they are not fighting the amber. A light desaturation on the dark theme pulls them together. */ html:not(.light) .sg-shot > img { filter: saturate(0.72) contrast(1.06); } html:not(.light) .sg-tile:hover > img { filter: saturate(0.95) contrast(1.06); }