/* ============================================================ PUREWYN ONE-PAGER — shared styles Recreated from Claude Design handoff (desktop.html / mobile.html). ============================================================ */ /* ---- Fonts (self-hosted; Druk files are TRIAL — confirm license) ---- */ @font-face { font-family: 'Druk Condensed'; src: url('../fonts/DrukCond-Super-Trial.otf') format('opentype'); font-weight: 900; font-style: normal; /* block: brief invisible text instead of a fallback-font flash — with the preload in the font is ready before first paint, so no snap. */ font-display: block; } @font-face { font-family: 'Druk Condensed'; src: url('../fonts/DrukCond-SuperItalic-Trial.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: block; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } /* ---- Base ---- */ html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: #F7F3E4; color: #0A0A0A; font-family: 'DM Sans', 'Helvetica Neue', sans-serif; } a { color: #245131; text-decoration: none; } a:hover { opacity: 0.6; } img { max-width: 100%; } /* ---- Shared components ---- */ .site-header { position: sticky; top: 0; z-index: 50; background: #F7F3E4; border-bottom: 1px solid #DDD8C5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; } .site-header .wordmark-link { display: flex; align-items: center; min-height: 44px; } .btn-wholesale { background: #245131; color: #F7F3E4; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; padding: 13px 20px; white-space: nowrap; } .btn-wholesale:hover { background: #1A3D24; opacity: 1; } .eyebrow { font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: 0.14em; color: #245131; } .display { margin: 0; font-family: 'Druk Condensed', 'Arial Black', sans-serif; font-weight: 900; letter-spacing: 0.02em; word-spacing: 0.05em; text-transform: uppercase; } .feed { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .feed::-webkit-scrollbar { display: none; } .feed img { flex: none; width: min(62vw, 340px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; scroll-snap-align: center; box-shadow: 0 16px 32px rgba(10,10,10,0.22); } .trust-row { display: flex; flex-wrap: wrap; gap: 8px 24px; border-top: 1px solid rgba(247,243,228,0.25); padding-top: 14px; font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: #C8DBC9; } .trust-row span { white-space: nowrap; } /* ---- Form section: retune wholesale form palette to one-pager greens ---- */ .purewyn-wholesale { --pw-green: #245131 !important; --pw-green-deep: #1A3D24 !important; --pw-cream: #F7F3E4 !important; } .purewyn-wholesale .pw-form-shell { max-width: 640px; margin: 0 auto; } /* Desktop-reference phone tweaks (from design file @media) */ @media (max-width: 640px) { #hero-tin { object-position: 62% 22% !important; } }