/* * Honest & Homemade — Base Styles * Reset, global element styles, typography base, utility classes. * Depends on: tokens.css (loaded first) * * Palette: Lagoon & Rose (light) + Blue Lagoon & Crimson (dark) * Primary light: #002028 lagoon | Primary dark: #F4B3B3 rose quartz */ /* Required tags in every H&H page (before stylesheets): */ /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; hanging-punctuation: first last; scroll-padding-top: var(--space-16); } body { min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-bg); } /* Theme transition only when user has no motion preference */ @media (prefers-reduced-motion: no-preference) { body { transition: background-color var(--transition-slow), color var(--transition-slow); } } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } ul[role="list"], ol[role="list"] { list-style: none; } input, button, textarea, select { font: inherit; color: inherit; } /* ============================================================ TYPOGRAPHY — GLOBAL ELEMENT STYLES ============================================================ */ h1, h2 { font-family: var(--font-display); line-height: var(--leading-tight); text-wrap: balance; /* Lagoon (#002028) in light · Rose Quartz (#F4B3B3) in dark — scheme 6/3 */ color: var(--color-heading); } h3, h4, h5, h6 { font-family: var(--font-body); line-height: var(--leading-snug); text-wrap: balance; color: var(--color-text); } h1 { font-size: var(--text-2xl); font-weight: 700; } h2 { font-size: var(--text-xl); font-weight: 600; } h3 { font-size: var(--text-lg); font-weight: 600; } h4 { font-size: var(--text-base); font-weight: 600; } h5 { font-size: var(--text-sm); font-weight: 600; } h6 { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-widest); } p { line-height: var(--leading-normal); text-wrap: pretty; color: var(--color-text); } p + p { margin-top: var(--space-4); } /* Prose context */ .prose p, .prose li { max-width: 72ch; text-wrap: pretty; } .prose h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); } .prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); } .prose p { margin-bottom: var(--space-4); } .prose ul, .prose ol { padding-left: var(--space-6); margin-bottom: var(--space-4); } .prose li + li { margin-top: var(--space-2); } li { text-wrap: pretty; } a { color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-primary-highlight); text-underline-offset: 0.2em; transition: color var(--transition-interactive), text-decoration-color var(--transition-interactive); } a:hover { color: var(--color-primary-hover); text-decoration-color: var(--color-primary-hover); } a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-xs); text-decoration: none; } strong, b { font-weight: 600; } em, i { font-style: italic; } small { font-size: var(--text-xs); color: var(--color-text-muted); } blockquote { border-left: 3px solid var(--color-primary); padding-left: var(--space-4); margin-left: 0; font-style: italic; color: var(--color-text-muted); } hr { border: none; border-top: 1px solid var(--color-divider); margin-block: var(--space-8); } /* ============================================================ BUTTONS ============================================================ */ button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); font-size: var(--text-sm); font-family: var(--font-body); font-weight: 500; line-height: 1; border-radius: var(--radius-full); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; min-height: 44px; min-width: 44px; transition: background var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive); } @media (prefers-reduced-motion: no-preference) { .btn { transition-property: background, color, border-color, box-shadow, transform; } .btn:active { transform: scale(0.97); } } /* Primary — lagoon in light (#002028), crimson in dark (#6E1313) */ .btn-primary { background: var(--color-primary-btn); color: var(--color-text-inverse); border-color: var(--color-primary-btn); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); box-shadow: var(--shadow-md); } .btn-primary:focus-visible { outline: 2px solid var(--color-primary-btn); outline-offset: 3px; } .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .btn-secondary:hover { background: var(--color-surface-offset); border-color: var(--color-text-muted); } .btn-ghost { background: transparent; color: var(--color-primary); border-color: transparent; padding-inline: var(--space-2); } .btn-ghost:hover { background: var(--color-primary-highlight); } .btn-icon { padding: 0; width: 44px; height: 44px; border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); border-color: transparent; display: inline-flex; align-items: center; justify-content: center; } .btn-icon:hover { background: var(--color-surface-offset); color: var(--color-text); } .btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); min-height: 32px; } /* ============================================================ FORM ELEMENTS ============================================================ */ .form-label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-text); margin-bottom: var(--space-1); } .form-input { display: block; width: 100%; padding: var(--space-2) var(--space-3); font-size: var(--text-base); font-family: var(--font-body); color: var(--color-text); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); min-height: 44px; transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive); } .form-input::placeholder { color: var(--color-text-faint); } .form-input:hover { border-color: var(--color-text-muted); } .form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-highlight); } /* ============================================================ FOCUS & KEYBOARD NAVIGATION ============================================================ */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* ============================================================ SELECTION ============================================================ */ ::selection { background: var(--color-primary-highlight); color: var(--color-text); } /* ============================================================ BADGES & TAGS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-0-5) var(--space-2); font-size: var(--text-xs); font-weight: 500; border-radius: var(--radius-full); white-space: nowrap; line-height: 1.4; } /* Primary badge — lagoon tint in light, teal tint in dark */ .badge-primary { background: var(--color-primary-highlight); color: var(--color-primary-btn); } /* Keep .badge-sage as alias for backward compat */ .badge-sage { background: var(--color-primary-highlight); color: var(--color-primary-btn); } .badge-easy { background: var(--color-easy-bg); color: var(--color-easy); } .badge-medium { background: var(--color-medium-bg); color: var(--color-medium); } .badge-advanced { background: var(--color-advanced-bg); color: var(--color-advanced); } .tag-chip { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: 500; /* Rose Quartz bg + lagoon text in light · Crimson bg + rose text in dark */ background: var(--color-chip-bg); color: var(--color-chip-text); border: 1px solid transparent; border-radius: var(--radius-full); cursor: pointer; min-height: 32px; text-decoration: none; transition: background var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive); } .tag-chip:hover { background: var(--color-accent-highlight); color: var(--color-accent); border-color: var(--color-accent); } .tag-chip.active { background: var(--color-primary-btn); color: var(--color-text-inverse); border-color: var(--color-primary-btn); } /* ============================================================ SKELETON LOADER ============================================================ */ @keyframes hh-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient( 90deg, var(--color-surface-offset) 25%, var(--color-surface-dynamic) 50%, var(--color-surface-offset) 75% ); background-size: 200% 100%; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: no-preference) { .skeleton { animation: hh-shimmer 1.5s ease-in-out infinite; } } .skeleton-text { height: 1em; margin-bottom: var(--space-2); } .skeleton-heading { height: 1.5em; width: 40%; margin-bottom: var(--space-4); } .skeleton-image { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius-lg); } /* ============================================================ LAYOUT UTILITIES ============================================================ */ .container { max-width: var(--content-default); margin-inline: auto; padding-inline: var(--space-4); } .container-wide { max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-4); } .container-narrow { max-width: var(--content-narrow); margin-inline: auto; padding-inline: var(--space-4); } .container-recipe { max-width: var(--content-recipe); margin-inline: auto; padding-inline: var(--space-4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ TABLE BASE ============================================================ */ table { border-collapse: collapse; width: 100%; } th, td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); } th { font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-xs); } /* ============================================================ INTERACTIVE TRANSITION DEFAULTS ============================================================ */ a, button, [role="button"], [role="link"], input, textarea, select { transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive); } /* ============================================================ PRINT RESET ============================================================ */ @media print { body { background: #fff; color: #000; font-size: 12pt; font-family: Georgia, serif; } a { color: #000; text-decoration: underline; } .no-print { display: none !important; } h1, h2, h3 { page-break-after: avoid; } img { max-width: 100%; } }