/* Theme Name: Fancy Moissanite Theme URI: https://fancymoissanite.local/ Author: Fancy Moissanite Description: Custom WooCommerce-ready theme for Fancy Moissanite. Currently ships the premium site header and the video hero section; further sections are added as template parts. Version: 0.1.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: fancy-moissanite Tags: e-commerce, custom-header, full-width-template */ /* ========================================================= BASE Component styles live in assets/css/*.css and are enqueued per section (assets/css/base/tokens.css defines every color, font, radius, shadow, spacing and duration used site-wide see BRAND-IDENTITY.md). Keep this file for document-level defaults only nothing that belongs to a single component. ========================================================= */ html { /* Safety net against page-wide horizontal scroll: something in one section (a fixed-width flex/grid item that refuses to shrink below a hardcoded px value, most likely) is occasionally a few pixels wider than the viewport at some width. Clipping that sliver is strictly better than a scrollbar appearing on the whole page for it nothing here is meant to scroll sideways except .posts-track's own carousel (assets/css/latest-posts.css), which scopes its own overflow-x:auto and is unaffected by this. `clip`, not `hidden`: setting overflow-x to hidden/auto/scroll (on EITHER axis) without also setting overflow-y forces overflow-y to compute to auto, turning / into a scroll container of their own which silently breaks position:sticky for the header's main row + subnav (.ph-sticky-wrap), the one thing on this page that actually needs to stick through the full page scroll. `clip` is exempt from that pairing rule specifically so it doesn't have this side effect, while still clipping the same sliver of overflow. */ overflow-x: clip; } body { margin: 0; font-family: var(--fm-font-sans); background: var(--fm-surface-page); color: var(--fm-ink); overflow-x: clip; } img, video { max-width: 100%; } .fm-container { max-width: 1180px; margin: 0 auto; padding: 56px 24px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; } /* ========================================================= SECTION HEADINGS one shared look for every homepage section title: its own full-width white block, a centered Playfair heading and a short gold rule underneath (see the .fm-heading-block markup in template-parts/sections/*.php). ========================================================= */ .fm-heading-block { background: #ffffff; text-align: center; padding: 40px 24px 26px; } .fm-heading { position: relative; display: inline-block; margin: 0 auto; padding-bottom: 14px; max-width: 640px; font-family: 'Playfair Display', 'Georgia', serif; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.28; letter-spacing: 0.2px; text-transform: none; text-shadow: none; color: #000000; } .fm-heading::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 64px; height: 1px; background: #C9A236; transform: translateX(-50%); } .fm-heading .accent { color: inherit; font-style: normal; } .fm-heading .accent::after { content: none; } @media (max-width: 620px) { .fm-heading-block { padding: 32px 20px 20px; } } /* The heading block already supplies the space above a section's content, so the section's own top padding is trimmed right after it. */ .fm-heading-block + section { padding-top: 24px; } /* Smooth scrolling for anchor links and scroll-to actions sitewide (a few pages already set this themselves). Off for visitors who ask their OS to reduce motion. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Lenis (buttery wheel scrolling, assets/js/smooth-scroll.js): its own easing replaces the native smooth-scroll rule above, otherwise the two would stack. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } /* ========================================================= HEADINGS one heading style sitewide (client spec): Caslon, regular weight, airy line-height and tracking, near-black. 'Caslon' is used if the visitor's device has it; otherwise Libre Caslon Text (loaded from Google Fonts in inc/enqueue.php), then Georgia. font-family / weight / line-height / letter-spacing are !important so they win over the many per-section heading rules written earlier (Playfair Display, bold). Colour is deliberately NOT !important: sections that set their own heading colour (white over the hero photo, gold accents) keep it. ========================================================= */ h1, h2, h3, h4, h5, h6 { font-family: 'Caslon', 'Libre Caslon Text', Georgia, serif !important; font-weight: 400 !important; line-height: 1.5em !important; color: #111; letter-spacing: 0.08rem !important; } /* Headings that wrap their text in a link (e.g. product card titles). */ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-family: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; }