/* Design tokens and global primitives shared by templates and blocks. */ :root { --ss-cream: #f0e9e3; --ss-cream-light: #fffdfa; --ss-ink: #1c1d1d; --ss-muted: #6c635b; --ss-gold: #af8431; --ss-gold-hover: #d09749; --ss-cream-warm: #f7f2ec; --ss-sand: #e4cfb9; --ss-sage: #9cb6ae; --ss-slate: #8e9cab; --ss-ink-soft: #3d3936; --ss-body: #5b544d; --ss-hairline: #d8c9b8; --ss-hairline-strong: #cbb9a4; --ss-gold-gradient: linear-gradient(100deg, #8f6c28 0%, #c39a44 10%, #f0d79a 22%, #b98d36 36%, #9a7429 50%, #c9a34d 64%, #f3dca6 76%, #b78a34 90%, #8a6725 100%); --ss-font-display: "Mirage", Georgia, serif; --ss-font-body: "Avenir", "Avenir Next", system-ui, sans-serif; --ss-gutter: clamp(20px, 3vw, 56px); --ss-ease: cubic-bezier(0.2, 0.7, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--ss-cream); } body { font-family: var(--ss-font-body); color: var(--ss-ink); overflow-x: clip; } a { color: var(--ss-ink); text-decoration: none; transition: color 160ms ease; } a:hover { color: var(--ss-gold-hover); } img, svg, video { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--ss-gold); outline-offset: 3px; } /* Gold pill button — used by the header CTA and blocks. */ .ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px clamp(22px, 2.4vw, 32px); border: 0; border-radius: 999px; background: var(--ss-gold-gradient); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(28, 29, 29, 0.22); color: #fff; font-family: var(--ss-font-body); font-size: clamp(12px, 1.05vw, 14px); font-weight: 600; letter-spacing: 0.11em; line-height: 1.2; text-transform: uppercase; text-shadow: 0 1px 1px rgba(96, 70, 20, 0.45); white-space: nowrap; cursor: pointer; transition: filter 160ms ease; } .ss-btn:hover, .ss-btn:focus-visible { color: #fff; filter: brightness(1.07); } .ss-btn--small { padding: 10px 20px; font-size: 11px; letter-spacing: 0.12em; } /* Small gold label above section headings. */ .ss-eyebrow { margin: 0; color: var(--ss-gold); font-family: var(--ss-font-body); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: 0.32em; text-transform: uppercase; } /* Hairline — diamond — hairline ornament (output by sunsweat_divider()). */ .ss-divider { display: flex; align-items: center; gap: 12px; } .ss-divider::before, .ss-divider::after { content: ""; width: clamp(48px, 5vw, 74px); height: 1px; background: #c9a86f; } .ss-divider img { display: block; width: 10px; height: 10px; } /* Centred eyebrow + serif heading (output by sunsweat_section_head()). */ .ss-section-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .ss-section-heading { margin: 0; color: var(--ss-ink); font-family: var(--ss-font-display); font-size: clamp(30px, 3.4vw, 48px); font-weight: 200; line-height: 1.2; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed !important; top: 12px; left: 12px; z-index: 1000; width: auto; height: auto; margin: 0; padding: 12px 20px; clip: auto; background: var(--ss-ink); color: #fff; font-size: 14px; } @keyframes ss-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* * Scroll reveal. Add data-reveal="rise" or data-reveal="open" to any element; * assets/js/reveal.js adds .ss-reveal-ready to (never in the editor, * never with reduced motion) and .is-revealed as elements scroll into view. */ .ss-reveal-ready [data-reveal] { opacity: 0; transition: transform 1150ms cubic-bezier(0.16, 0.84, 0.28, 1) var(--ss-reveal-delay, 0ms), opacity 900ms ease var(--ss-reveal-delay, 0ms), clip-path 1250ms cubic-bezier(0.16, 0.84, 0.28, 1) var(--ss-reveal-delay, 0ms); } .ss-reveal-ready [data-reveal="rise"] { transform: translateY(26px) scale(0.97); } .ss-reveal-ready [data-reveal="open"] { transform: scale(0.9); clip-path: circle(26% at 50% 62%); } .ss-reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; clip-path: circle(90% at 50% 50%); } .ss-reveal-ready [data-reveal].is-revealed-done { clip-path: none; }