/* Green Thumb Cleaning — Component primitives */ /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; border: none; cursor: pointer; border-radius: var(--radius-pill); padding: 14px 26px; text-decoration: none; transition: background-color 140ms, color 140ms, transform 140ms, box-shadow 140ms; line-height: 1; white-space: nowrap; min-height: 44px; /* WCAG touch-target floor — applies to .btn-sm too */ } /* Forest text on orange passes WCAG AA (~5:1); white-on-orange was 2.33:1 (fail). Hover keeps the orange (no darken) so contrast holds; lift + shadow give feedback. */ .btn-primary { background: var(--gt-orange); color: var(--gt-forest); box-shadow: var(--shadow-md); } .btn-primary:hover { background: var(--gt-orange); transform: translateY(-1px); box-shadow: var(--shadow-lg); } .btn-secondary { background: var(--gt-forest); color: #fff; } .btn-secondary:hover { background: var(--gt-forest-700); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--gt-forest); border: 1.5px solid var(--gt-forest); } .btn-ghost:hover { background: var(--gt-forest); color: #fff; } .btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.6); } .btn-ghost-light:hover { background: #fff; color: var(--gt-forest); border-color: #fff; } .btn-sm { padding: 10px 18px; font-size: 13.5px; } .btn-lg { padding: 18px 32px; font-size: 17px; } /* ---------- Tag / Badge ---------- */ .tag { display: inline-block; background: var(--gt-sage-100); color: var(--gt-forest); padding: 5px 12px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* On light surfaces use the AA-safe deep-amber text (5.5:1); base orange text was 2.3:1. */ .tag-orange { background: rgba(255,140,0,0.15); color: var(--gt-orange-text); } .tag-forest { background: var(--gt-forest); color: #fff; } /* On the forest hero, the light-orange fill barely separates — use a brighter warm text on a translucent fill with a thin border so the chip reads on dark. */ .page-hero .tag-orange, .hero .tag-orange { background: rgba(255,176,87,0.16); color: var(--gt-orange-on-dark); border: 1px solid rgba(255,176,87,0.45); } /* ---------- Inline stars ---------- */ .stars-inline { color: var(--gt-orange); font-size: 14px; letter-spacing: 0.08em; } /* ---------- Generic card ---------- */ .card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 24px; } /* Clickable cards lift on hover/focus (the inline transition had no trigger). */ a.card { transition: transform 180ms ease, box-shadow 180ms ease; } a.card:hover, a.card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* ---------- Inline icon helper ---------- */ .icon { width: 20px; height: 20px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; display: inline-block; vertical-align: -4px; } /* Scroll reveal — true progressive enhancement. Content is visible by default; it only starts hidden when JS has added `.js` to . So if JS fails, nothing ever disappears. Reduced-motion users skip the animation entirely. */ /* `html.js .reveal.in` is needed alongside `.reveal.in`: the hidden rule below has higher specificity (0,2,1) than `.reveal.in` (0,2,0) and would win forever. */ .reveal.in, html.js .reveal.in { opacity: 1; transform: translateY(0); } html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }