/* ============================================================= 710 GVNG — global.css Design tokens, page frame, shared primitives, sections, footer. Scoped under body.sg-site. Classes (sg-*) are the contract between the PHP templates and CSS/JS. ============================================================= */ :root { /* color */ --sg-black: #000000; --sg-white: #ffffff; --sg-gray-100: #f5f5f5; --sg-gray-300: #d9d9d9; --sg-gray-600: #666666; --sg-red: #ff1f1f; /* 710 accent (VISUAL-REFERENCE §3) */ --sg-red-dim: #8f1414; /* inactive accent, ≈45% darkened */ --sg-border: rgba(0, 0, 0, 0.16); --sg-border-inverse: rgba(255, 255, 255, 0.18); /* space */ --sg-space-xs: 0.5rem; --sg-space-sm: 1rem; --sg-space-md: 2rem; --sg-space-lg: 4rem; --sg-space-xl: 8rem; /* chrome — measured on the reference (VISUAL-REFERENCE §1–2) */ --sg-header-height: 60px; --sg-header-offset: 20px; --sg-frame: 10px; /* black inset around the canvas */ --sg-radius: 20px; /* canvas corner rounding */ --sg-radius-sm: 8px; /* type */ --sg-font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; /* motion */ --sg-ease: cubic-bezier(0.22, 1, 0.36, 1); --sg-fade: 450ms; /* layers */ --sg-z-base: 1; --sg-z-header: 100; --sg-z-menu: 900; --sg-z-modal: 1000; } /* ---------------------------------------------------- page frame -- */ body.sg-site { margin: 0; background: var(--sg-black); padding: var(--sg-frame); font-family: var(--sg-font); -webkit-font-smoothing: antialiased; } /* The rounded canvas between header chrome and footer. */ body.sg-site main { display: block; border-radius: var(--sg-radius); overflow: clip; background: var(--sg-black); } body.sg-site.sg-menu-open { /* JS also locks ; belt-and-braces for iOS. */ overflow: hidden; } /* WP admin bar: keep fixed chrome below it. The bar is 32px on desktop and 46px at ≤782px, where it also overlays the menu's CLOSE button. */ body.sg-site.admin-bar .sg-header { top: 32px; } @media screen and (max-width: 782px) { body.sg-site.admin-bar .sg-header { top: 46px; } body.sg-site.admin-bar .sg-menu { top: 46px; } } /* ---------------------------------------------------- primitives -- */ /* Zero-specificity default so any sg-* class rule can restyle a link. */ a:where(.sg-site *) { color: inherit; } /* Red block CTA — the reference's VIEW SHOP grammar (no radius). */ .sg-site a.sg-btn-red, .sg-site .sg-btn-red { display: inline-block; background: var(--sg-red); color: var(--sg-white); font-family: var(--sg-font); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; line-height: 1; padding: 13px 18px; border: 0; border-radius: 0; transition: filter 0.2s var(--sg-ease); } .sg-site a.sg-btn-red:hover, .sg-site .sg-btn-red:hover { filter: brightness(0.85); color: var(--sg-white); } .sg-site :is(a, button):focus-visible { outline: 2px solid var(--sg-red); outline-offset: 3px; } /* Utility: hidden below tablet. */ @media (max-width: 767px) { .sg-site .sg-hide-mobile { display: none !important; } } /* Screen readers only — the hero carries the page h1 invisibly. .screen-reader-text is the WordPress-standard class (core and WooCommerce markup assume the theme defines it). */ .screen-reader-text, .sg-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------- sections -- */ .sg-section { padding: 72px 28px; } .sg-section--footer { padding: 72px 28px 28px; } /* ------------------------------------------------- generic pages -- */ .sg-page { background: var(--sg-white); color: var(--sg-black); min-height: 60vh; } .sg-page__title { font-family: var(--sg-font); font-size: clamp(28px, 4vw, 44px); font-weight: 900; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 28px; } .sg-page__content { font: 400 16px/1.65 var(--sg-font); max-width: 720px; } /* ---------------------------------------------------------- footer -- */ .sg-footer { background: var(--sg-black); color: var(--sg-white); } .sg-footer__brand { font-family: var(--sg-font); font-size: 26px; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; color: var(--sg-white); margin: 0; } .sg-footer__tag, .sg-footer__tag p { font-family: var(--sg-font); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin: 0; } .sg-footer__cols { display: flex; flex-wrap: wrap; gap: 40px 48px; margin-top: 48px; } .sg-footer__col { width: 200px; } .sg-footer__col--newsletter { width: 320px; } .sg-footer__head { font-family: var(--sg-font); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin: 0 0 14px; } .sg-footer__nav ul { list-style: none; margin: 0; padding: 0; } .sg-footer__nav li { margin: 0; padding: 0 0 10px; } .sg-footer__nav a { font-family: var(--sg-font); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sg-white); text-decoration: none; transition: opacity 0.2s var(--sg-ease); } .sg-footer__nav a:hover { opacity: 0.55; } /* Newsletter */ .sg-footer__form input[type="email"], .sg-footer__form input[type="text"]:not(.sg-visually-hidden) { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px solid var(--sg-border-inverse); border-radius: 0; color: var(--sg-white); font: 500 14px/1 var(--sg-font); padding: 12px 0; } .sg-footer__form input::placeholder { color: rgba(255, 255, 255, 0.35); text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; } .sg-footer__form button { background: var(--sg-red); color: var(--sg-white); border: 0; border-radius: 0; font: 700 13px/1 var(--sg-font); letter-spacing: 0.04em; text-transform: uppercase; padding: 13px 20px; margin-top: 14px; cursor: pointer; transition: filter 0.2s var(--sg-ease); } .sg-footer__form button:hover { filter: brightness(0.85); } .sg-footer__form-msg { font: 700 12px/1.4 var(--sg-font); letter-spacing: 0.03em; text-transform: uppercase; color: var(--sg-red); margin: 12px 0 0; } .sg-footer__legal, .sg-footer__legal p { font-family: var(--sg-font); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin: 0; } .sg-footer__legal { margin-top: 64px; } .sg-footer__legal a { color: rgba(255, 255, 255, 0.6); text-decoration: none; } .sg-footer__legal a:hover { color: var(--sg-white); }