/* Hollerpost product skin (VITE_BRAND=hollerpost only). Linked from by the brandHtml() plugin in vite.config.js, which also sets . Every rule is scoped to that attribute, so the agency build never loads this file and could not be affected by it. Tokens mirror the Hollerpost design system (hollarpost/design-system/tokens). Rules: burnt orange #C2410C is the ONLY action color (white text 5.18:1); buttons go solid ink on hover; 2px ink rules instead of shadows; Nugget gold #D9963F is illustration-only and never appears here. */ html[data-brand="hollerpost"] { --hp-cream-50: #FFFBF5; --hp-cream-100: #FFF6EC; --hp-cream-200: #FBE8D3; --hp-line: #E9D8C4; --hp-ink: #2B211B; --hp-ink-500: #6B5A4E; --hp-orange-50: #FFF1E7; --hp-orange-100: #FCE3D3; --hp-orange-500: #C2410C; --hp-orange-600: #9A3412; --hp-green-700: #177A53; --hp-font-display: "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; --hp-font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--hp-cream-100); } /* Type: Nunito Sans body/UI (plain zero; Atkinson Hyperlegible's slashed zero read like a glitch in prices and dates), Nunito for headings and figures. */ html[data-brand="hollerpost"] body { font-family: var(--hp-font-body); color: var(--hp-ink); background: var(--hp-cream-100); -webkit-font-smoothing: antialiased; } html[data-brand="hollerpost"] h1, html[data-brand="hollerpost"] h2, html[data-brand="hollerpost"] h3, html[data-brand="hollerpost"] .hp-display { font-family: var(--hp-font-display); letter-spacing: -0.02em; } html[data-brand="hollerpost"] h1 { font-weight: 900; } html[data-brand="hollerpost"] h2, html[data-brand="hollerpost"] h3 { font-weight: 800; } html[data-brand="hollerpost"] .hp-figure { font-family: var(--hp-font-display); font-weight: 800; font-variant-numeric: tabular-nums; } /* Warm neutrals in place of cool grays. */ html[data-brand="hollerpost"] .bg-gray-50 { background-color: var(--hp-cream-100); } html[data-brand="hollerpost"] .text-gray-900, html[data-brand="hollerpost"] .text-gray-800 { color: var(--hp-ink); } html[data-brand="hollerpost"] .text-gray-700, html[data-brand="hollerpost"] .text-gray-600, html[data-brand="hollerpost"] .text-gray-500 { color: var(--hp-ink-500); } html[data-brand="hollerpost"] .border-gray-100, html[data-brand="hollerpost"] .border-gray-150, html[data-brand="hollerpost"] .border-gray-200 { border-color: var(--hp-line); } /* Purple (the agency accent) becomes Hollerpost orange; hover goes to ink. */ html[data-brand="hollerpost"] .bg-purple-500, html[data-brand="hollerpost"] .bg-purple-600, html[data-brand="hollerpost"] .bg-purple-700 { background-color: var(--hp-orange-500); } html[data-brand="hollerpost"] .hover\:bg-purple-500:hover, html[data-brand="hollerpost"] .hover\:bg-purple-600:hover, html[data-brand="hollerpost"] .hover\:bg-purple-700:hover, html[data-brand="hollerpost"] .hover\:bg-purple-800:hover { background-color: var(--hp-ink); color: var(--hp-cream-100); } html[data-brand="hollerpost"] .bg-purple-50 { background-color: var(--hp-orange-50); } html[data-brand="hollerpost"] .bg-purple-100, html[data-brand="hollerpost"] .bg-purple-200 { background-color: var(--hp-orange-100); } html[data-brand="hollerpost"] .text-purple-400, html[data-brand="hollerpost"] .text-purple-500, html[data-brand="hollerpost"] .text-purple-600, html[data-brand="hollerpost"] .text-purple-700, html[data-brand="hollerpost"] .text-purple-800, html[data-brand="hollerpost"] .text-purple-900 { color: var(--hp-orange-500); } html[data-brand="hollerpost"] .hover\:text-purple-600:hover, html[data-brand="hollerpost"] .hover\:text-purple-700:hover { color: var(--hp-ink); } html[data-brand="hollerpost"] .border-purple-200, html[data-brand="hollerpost"] .border-purple-300, html[data-brand="hollerpost"] .border-purple-400, html[data-brand="hollerpost"] .border-purple-500, html[data-brand="hollerpost"] .border-purple-600, html[data-brand="hollerpost"] .hover\:border-purple-300:hover { border-color: var(--hp-orange-500); } /* Focus: ink ring (design system: 3px ink outline). */ html[data-brand="hollerpost"] [class*="ring-purple-"] { --tw-ring-color: var(--hp-ink); } /* Primary product buttons: pills in Nunito 800. */ html[data-brand="hollerpost"] .hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--hp-font-display); font-weight: 800; line-height: 1.2; border: 2px solid var(--hp-orange-500); border-radius: 999px; background: var(--hp-orange-500); color: #fff; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } html[data-brand="hollerpost"] .hp-btn:hover:not(:disabled) { background: var(--hp-ink); border-color: var(--hp-ink); color: var(--hp-cream-100); } html[data-brand="hollerpost"] .hp-btn:active:not(:disabled) { transform: translateY(1px); } html[data-brand="hollerpost"] .hp-btn:disabled { opacity: .45; cursor: not-allowed; } html[data-brand="hollerpost"] .hp-btn-line { background: transparent; color: var(--hp-ink); border-color: var(--hp-ink); } /* Cards: white, 2px ink border, 22px corners, no shadow. */ html[data-brand="hollerpost"] .hp-card { background: #fff; border: 2px solid var(--hp-ink); border-radius: 22px; box-shadow: none; } /* The sticker: one per view, for the most important card. */ html[data-brand="hollerpost"] .hp-sticker { box-shadow: 8px 8px 0 var(--hp-orange-500); } @media (max-width: 480px) { html[data-brand="hollerpost"] .hp-sticker { box-shadow: 5px 5px 0 var(--hp-orange-500); } } /* Inputs: 12px corners, 4px orange-100 focus halo. */ html[data-brand="hollerpost"] .hp-input { border: 2px solid var(--hp-line); border-radius: 12px; background: #fff; color: var(--hp-ink); } html[data-brand="hollerpost"] .hp-input:focus { outline: none; border-color: var(--hp-ink); box-shadow: 0 0 0 4px var(--hp-orange-100); } /* Portal chrome: 2px ink rule under the header, active nav item as an ink pill. */ html[data-brand="hollerpost"] .hp-rule-b { border-bottom: 2px solid var(--hp-ink); } html[data-brand="hollerpost"] .hp-nav-active, html[data-brand="hollerpost"] .hp-nav-active:hover { background: var(--hp-ink); color: var(--hp-cream-100); font-weight: 700; } html[data-brand="hollerpost"] .hp-nav-active svg { color: var(--hp-cream-100); } @media (prefers-reduced-motion: reduce) { html[data-brand="hollerpost"] .hp-btn { transition: none; } }