/* Theme Name: 76DS Sales Theme URI: https://76designsolutions.com/ Author: 76 Design Solutions Description: The sales storefront for 76 Design Solutions. Classic PHP templates, no page builder, no Elementor. Design tokens taken from the flagship at 76designsolutions.com so the two read as one brand. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 License: Proprietary Text Domain: 76ds-sales */ /* ═══════════════════════════════════════════════════════════════════════════ DESIGN TOKENS — lifted from the flagship stylesheet, not eyeballed. Space Grotesk display face, navy/blue/red palette. ═══════════════════════════════════════════════════════════════════════════ */ :root { --navy-900: #071e3c; --navy-700: #0b2f5c; --navy-600: #133f75; --blue-500: #00a3e0; --blue-300: #66c6ff; --red-600: #d62828; --ink-900: #1a1f24; --ink-600: #4b5563; --ink-400: #6b7280; --line: #e8ecf1; --line-2: #e5e7eb; --surface: #f4f6f9; --white: #ffffff; --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(7,30,60,.06), 0 8px 24px rgba(7,30,60,.08); --shadow-lg: 0 2px 4px rgba(7,30,60,.08), 0 18px 48px rgba(7,30,60,.14); --wrap: 1180px; --gutter: clamp(16px, 4vw, 32px); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--ink-900); background: var(--white); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -0.02em; color: var(--navy-900); margin: 0 0 .5em; font-weight: 700; } h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); } h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); } p { margin: 0 0 1.1em; } a { color: var(--navy-700); text-underline-offset: .18em; } a:hover { color: var(--blue-500); } img, svg, video { max-width: 100%; height: auto; display: block; } /* Focus that is actually visible — this store takes payment and must be keyboard-usable. */ :focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; border-radius: 4px; } .wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--gutter); } .stack > * + * { margin-top: 1rem; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 12px; top: 12px; z-index: 200; background: var(--navy-900); color: #fff; padding: 12px 18px; border-radius: 8px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn, .button, button, input[type=submit], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1; padding: .95em 1.6em; border-radius: 999px; border: 1.5px solid transparent; background: var(--navy-900); color: #fff; text-decoration: none; cursor: pointer; transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease; min-height: 44px; /* a real touch target */ } .btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--navy-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); } .btn--accent, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--blue-500); color: #06233f; } .btn--accent:hover { background: var(--blue-300); color: #06233f; } .btn--ghost { background: transparent; color: var(--navy-900); border-color: var(--line); } .btn--ghost:hover { background: var(--surface); color: var(--navy-900); border-color: var(--navy-700); } .btn--lg { font-size: 1.05rem; padding: 1.05em 1.9em; } /* ── Header ──────────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 72px; } .brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; } /* The lockup carries a tagline, so it needs real height to stay legible. Capped by width too, or a 4.27:1 image eats the header on a narrow phone. */ .brand__logo { height: clamp(34px, 4.4vw, 52px); width: auto; max-width: min(58vw, 300px); object-fit: contain; display: block; } @media (max-width: 480px) { .brand__logo { height: 32px; max-width: 54vw; } } .nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; list-style: none; } /* wp_nav_menu emits bare
  • with no