/* ========================================================================= relaxmypup.com — shared design system One stylesheet powers every landing-page variation. Per-variation palette is set with a body class (.theme-*) further down. ========================================================================= */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } button { font: inherit; cursor: pointer; border: 0; background: none; } ul { list-style: none; padding: 0; } /* ---------- Design tokens (defaults = Sage theme) ---------- */ :root { --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Fraunces", Georgia, "Times New Roman", serif; /* Brand palette — calming */ --bg: #faf7f0; /* warm cream */ --surface: #ffffff; --ink: #2b3a33; /* deep forest */ --ink-soft: #55655c; --muted: #7d8b83; --line: #e6e0d4; --brand: #4f7c62; /* sage green */ --brand-dk: #3a5c49; --brand-lt: #eaf1eb; --accent: #e08a5b; /* warm terracotta */ --accent-dk: #c76f42; --gold: #e6b35c; --ok: #3f9d6d; --radius: 18px; --radius-sm: 12px; --radius-lg: 28px; --shadow: 0 10px 30px rgba(43,58,51,.08); --shadow-lg: 0 24px 60px rgba(43,58,51,.16); --maxw: 1120px; } /* ---------- Theme variants (set via ) ---------- */ .theme-warm { --bg:#fbf3ea; --brand:#c9704a; --brand-dk:#a9542f; --brand-lt:#f7e7db; --accent:#5f7d5a; --accent-dk:#4a6446; --ink:#3a2a20; --ink-soft:#6b5748; --line:#ecdccd; --font-display:"Fraunces", Georgia, serif; } .theme-bold { --bg:#141b17; --surface:#1e2822; --ink:#f3efe6; --ink-soft:#c3cdc6; --muted:#8fa096; --line:#2f3d35; --brand:#8fd6a6; --brand-dk:#6fbf88; --brand-lt:#22302a; --accent:#ffb24d; --accent-dk:#f39a1f; --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.5); } /* Bright, airy, high-energy — white ground with a confident blue and a warm CTA. Built for the homepage where we want maximum lightness and contrast. */ .theme-bright { --bg:#f7faff; --surface:#ffffff; --ink:#16233a; --ink-soft:#41526c; /* --muted was #8494a8 = only 2.96:1 on --bg (fails AA). #5b6b7f = 5.2:1. */ --muted:#5b6b7f; --line:#e2e9f4; --brand:#1f62db; --brand-dk:#1550bb; --brand-lt:#e9f0fe; /* Bright orange stays, but white text on it is only 2.27:1 — so in this theme the accent button uses DARK ink instead (6.9:1). Same trick Native Pet uses on their yellow: keep the colour loud, make the text dark. */ --accent:#ff9016; --accent-dk:#b54d09; /* accent-dk = 5.0:1 on --bg for small text */ --gold:#ffc531; --shadow:0 8px 26px rgba(22,35,58,.07); --shadow-lg:0 22px 54px rgba(22,35,58,.13); } /* Dark text on the bright accent — accessible AND keeps the energy. Applies anywhere the accent is used as a fill behind text. */ /* Only tags still using the DEFAULT accent fill get dark text — tags with an inline background (usually var(--brand) blue) must keep their white label. */ .theme-bright .btn-primary, .theme-bright .tag:not(.tag-soft):not([style*="background"]) { color:#16233a; } /* On hover the fill darkens to --accent-dk, so flip the label to white (5.2:1). */ .theme-bright .btn-primary:hover { color:#ffffff; } /* --ok #3f9d6d is only 3.4:1 on white; #2e7d55 is 5.0:1 */ .theme-bright { --ok:#2e7d55; } .theme-bright .announce { background:var(--brand-dk); } /* The bare accent colour is too light for body text on white; use the darker tone for the italic highlight so large display text clears 3:1. */ .theme-bright .serif-accent { color:var(--accent-dk); } .theme-clinical { --bg:#f4f8f5; --surface:#ffffff; --ink:#1f2d27; --ink-soft:#4c5b53; --line:#dde9e1; --brand:#2f7d5b; --brand-dk:#215d43; --brand-lt:#e4f1e9; --accent:#2f6db0; --accent-dk:#245691; --font-display:"Inter", -apple-system, sans-serif; } .theme-playful { --bg:#fff8f0; --brand:#5b8def; --brand-dk:#3f6fce; --brand-lt:#e8f0ff; --accent:#ff8a5b; --accent-dk:#ec6d3c; --gold:#ffc857; --ink:#2b2a3a; --ink-soft:#5a5870; --line:#f0e4d6; } /* ---------- Typography ---------- */ h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.08; font-weight: 600; letter-spacing:-.01em; color: var(--ink); } h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); } h2 { font-size: clamp(1.7rem, 3.8vw, 2.7rem); } h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); } p { color: var(--ink-soft); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-soft); } .eyebrow { font-family: var(--font-body); font-weight: 700; letter-spacing:.14em; text-transform: uppercase; font-size:.78rem; color: var(--brand); } .serif-accent { font-family: var(--font-display); font-style: italic; color: var(--accent-dk); } strong { color: var(--ink); font-weight: 700; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; } .container-narrow { max-width: 760px; } .section { padding: clamp(56px, 8vw, 110px) 0; } .section-sm { padding: clamp(36px, 5vw, 64px) 0; } .center { text-align: center; } .stack > * + * { margin-top: 1rem; } .grid { display: grid; gap: clamp(18px, 3vw, 30px); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .bg-surface { background: var(--surface); } .bg-brand-lt { background: var(--brand-lt); } .bg-ink { background: var(--ink); color: #fff; } .bg-ink h2, .bg-ink h3 { color:#fff; } .bg-ink p { color: rgba(255,255,255,.82); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap:.55em; font-weight: 700; font-size: 1.02rem; line-height: 1; padding: 16px 30px; border-radius: 999px; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent); } .btn-primary:hover { background: var(--accent-dk); transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 55%, transparent); } .btn-brand { background: var(--brand); color:#fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 40%, transparent); } .btn-brand:hover { background: var(--brand-dk); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } .btn-lg { padding: 20px 40px; font-size: 1.12rem; } .btn-block { display: flex; width: 100%; } .btn-sub { display:block; font-size:.82rem; color: var(--muted); margin-top:10px; } /* partner CTA with no tracking link configured yet — inactive, never a dead link */ .btn.is-pending { background: var(--line); color: var(--muted); box-shadow:none; cursor: default; pointer-events: none; border-color: var(--line); } .btn-pulse { animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%,100%{ box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 45%,transparent);} 50%{ box-shadow:0 8px 30px color-mix(in srgb,var(--accent) 70%,transparent);} } /* ---------- Pills / trust badges ---------- */ .pill { display:inline-flex; align-items:center; gap:.5em; padding:8px 15px; border-radius:999px; background: var(--surface); border:1px solid var(--line); font-size:.85rem; font-weight:600; color: var(--ink-soft); } .pill svg { width:16px; height:16px; } .trust-row { display:flex; flex-wrap:wrap; gap:12px; } .trust-strip { display:flex; flex-wrap:wrap; gap: 26px 40px; align-items:center; justify-content:center; } .trust-item { display:flex; align-items:center; gap:10px; font-weight:600; font-size:.92rem; color: var(--ink-soft); } .trust-item svg { width:26px; height:26px; color: var(--brand); flex:none; } /* ---------- Cards ---------- */ .card { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow); } .card-flat { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(22px,3vw,30px); } .icon-badge { width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background: var(--brand-lt); color: var(--brand-dk); margin-bottom:16px; } .icon-badge svg { width:28px; height:28px; } .feature h3 { margin-bottom:8px; } /* ---------- Star rating ---------- */ .stars { display:inline-flex; gap:2px; color: var(--gold); } .stars svg { width:18px; height:18px; } .rating-line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:600; color: var(--ink-soft); } /* ---------- Reviews ---------- */ .review { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:14px; height:100%; } .review p { color: var(--ink); font-size:1.02rem; } .reviewer { display:flex; align-items:center; gap:12px; margin-top:auto; } .avatar { width:44px; height:44px; border-radius:50%; background: var(--brand-lt); display:grid; place-items:center; color:var(--brand-dk); font-weight:800; flex:none; } .reviewer .name { font-weight:700; color: var(--ink); font-size:.95rem; } .reviewer .meta { font-size:.82rem; color: var(--muted); } .verified { display:inline-flex; align-items:center; gap:4px; font-size:.75rem; color: var(--ok); font-weight:700; } /* ---------- Product visual / placeholder frames ---------- */ .media-frame { position:relative; border-radius: var(--radius-lg); overflow:hidden; background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb,var(--brand) 22%, var(--surface)), transparent 55%), linear-gradient(160deg, var(--brand-lt), var(--surface)); border:1px solid var(--line); box-shadow: var(--shadow-lg); display:grid; place-items:center; min-height: 340px; text-align:center; } .media-frame.tall { min-height: 460px; } .media-frame img { width:100%; height:100%; object-fit:cover; } /* Real product images injected by config.js (Native Pet Shopify CDN) */ .media-frame img[data-product-img]{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:26px; opacity:0; transition:opacity .5s ease; } .media-frame.has-img img[data-product-img]{ opacity:1; } .media-frame.has-img .ph-note{ display:none; } /* hide the placeholder note in any frame once its product image has loaded */ .has-img .ph-note{ display:none; } .media-frame.has-img { background: radial-gradient(120% 120% at 50% 15%, color-mix(in srgb,var(--brand) 16%, var(--surface)), var(--surface) 70%); } .ph-note { padding:16px 20px; border:2px dashed color-mix(in srgb, var(--brand) 45%, var(--line)); border-radius: var(--radius-sm); color: var(--brand-dk); font-weight:600; font-size:.9rem; background: color-mix(in srgb, var(--surface) 70%, transparent); max-width:78%; } .ph-note small { display:block; font-weight:500; color: var(--ink-soft); margin-top:4px; } .float-badge { position:absolute; background: var(--surface); border:1px solid var(--line); box-shadow: var(--shadow); border-radius:14px; padding:12px 16px; font-weight:700; font-size:.9rem; color: var(--ink); display:flex; gap:10px; align-items:center; } .float-badge .big { font-family: var(--font-display); font-size:1.4rem; color: var(--brand); } /* ---------- Announcement / offer bar ---------- */ .announce { background: var(--brand-dk); color:#fff; text-align:center; font-weight:600; font-size:.9rem; padding:10px 18px; } .announce a { color:#fff; text-decoration: underline; text-underline-offset:2px; } /* ---------- Nav ---------- */ .nav { position:sticky; top:0; z-index:40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); } .nav .container { display:flex; align-items:center; justify-content:space-between; height:64px; } .brand-logo { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color: var(--ink); text-decoration:none; } .brand-logo .mark { width:34px; height:34px; border-radius:10px; background: var(--brand); display:grid; place-items:center; color:#fff; } .brand-logo .mark svg { width:20px; height:20px; } .nav .btn { padding:11px 22px; font-size:.92rem; } /* grouped nav links (site nav + page CTA) */ .nav-links { display:flex; align-items:center; gap:8px; } .nav-links .btn { padding:11px 20px; font-size:.92rem; white-space:nowrap; } .nav-shop { color:var(--ink); border-color:var(--line); background:transparent; } .nav-shop:hover { border-color:var(--brand); color:var(--brand); } @media (max-width:620px){ /* The page CTA text varies per page and can be long ("Build the routine →"). Let the bar grow instead of overflowing its fixed height. */ .nav .container { height:auto; min-height:60px; padding-block:9px; flex-wrap:wrap; gap:8px; } .nav-links { gap:6px; flex:1; justify-content:flex-end; } .nav-links .btn { padding:10px 14px; font-size:.84rem; } } @media (max-width:400px){ /* Very narrow: keep the primary CTA unmissable, drop the secondary link (the Shop is still reachable from the footer on every page). */ .nav-links .nav-shop { display:none; } } /* ---------- Comparison table ---------- */ .compare { width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); } .compare th, .compare td { padding:16px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:.98rem; } .compare thead th { background: var(--brand-lt); font-family:var(--font-display); font-size:1rem; color: var(--ink); } .compare thead th.hl { background: var(--brand); color:#fff; } .compare td.hl { background: color-mix(in srgb,var(--brand-lt) 60%, var(--surface)); font-weight:600; color:var(--ink); } .compare tr:last-child td { border-bottom:0; } .compare .yes { color: var(--ok); font-weight:800; } .compare .no { color:#c25b4e; font-weight:800; } .compare .feat { font-weight:600; color: var(--ink); } /* ---------- Checklist ---------- */ .checks { display:grid; gap:14px; } .checks li { display:flex; gap:12px; align-items:flex-start; color: var(--ink); font-weight:500; } .checks li svg { width:24px; height:24px; color: var(--brand); flex:none; margin-top:1px; } .checks.cols { grid-template-columns: repeat(2,1fr); } /* ---------- FAQ ---------- */ .faq { max-width: 780px; margin-inline:auto; } .faq details { border-bottom:1px solid var(--line); padding:6px 0; } .faq summary { list-style:none; cursor:pointer; padding:18px 44px 18px 4px; position:relative; font-family: var(--font-display); font-size:1.12rem; font-weight:600; color: var(--ink); } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:1.5rem; color: var(--brand); transition: transform .2s; } .faq details[open] summary::after { content:"–"; } .faq details p { padding:0 44px 20px 4px; } /* ---------- Guarantee band ---------- */ .guarantee { display:flex; gap:24px; align-items:center; flex-wrap:wrap; justify-content:center; text-align:left; } .seal { width:120px; height:120px; border-radius:50%; flex:none; display:grid; place-items:center; text-align:center; background: radial-gradient(circle at 50% 35%, var(--gold), var(--accent-dk)); color:#fff; font-family:var(--font-display); font-weight:700; line-height:1.05; box-shadow: var(--shadow); border:4px solid rgba(255,255,255,.5); } .seal .n { font-size:2.1rem; display:block; } /* ---------- Sticky mobile CTA ---------- */ .sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:50; display:none; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); border-top:1px solid var(--line); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0,0,0,.08); align-items:center; gap:14px; } .sticky-cta .price { font-weight:700; color: var(--ink); line-height:1.1; font-size:.92rem; } .sticky-cta .price s { color: var(--muted); font-weight:500; } .sticky-cta .btn { flex:1; } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: rgba(255,255,255,.75); padding: 54px 0 40px; font-size:.9rem; } /* The global `p { color: var(--ink-soft) }` rule beats inheritance, so footer paragraphs were rendering dark-on-dark (~2:1). Restate the light colour. */ .site-footer p, .site-footer li, .site-footer span { color: rgba(255,255,255,.78); } .site-footer .disclosure p { color: rgba(255,255,255,.62); } /* global `strong { color: var(--ink) }` made these invisible on the dark footer */ .site-footer strong, .site-footer em, .site-footer h4 { color: rgba(255,255,255,.92); } .site-footer h4 { color:#fff; font-family:var(--font-body); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; } .site-footer a { color: rgba(255,255,255,.75); text-decoration:none; } .site-footer a:hover { color:#fff; } .footer-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:34px; } .disclosure { border-top:1px solid rgba(255,255,255,.14); margin-top:34px; padding-top:22px; font-size:.8rem; color: rgba(255,255,255,.55); line-height:1.65; } /* ---------- Discount code chip ---------- */ .promo-code { display:inline-flex; align-items:center; gap:8px; padding:8px 8px 8px 14px; border:1.5px dashed var(--brand); border-radius:12px; background: var(--brand-lt); font-size:.9rem; color: var(--ink); font-weight:600; } .promo-code b { font-family: var(--font-display); letter-spacing:.04em; color: var(--brand-dk); } .promo-code .code { background: var(--surface); border:1px solid var(--line); border-radius:8px; padding:4px 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight:700; color: var(--brand-dk); } .promo-note { font-size:.8rem; color: var(--muted); } /* ---------- Affiliate disclosure inline ---------- */ .aff-note { font-size:.8rem; color: var(--muted); } .aff-inline { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color: var(--muted); } /* ---------- Misc ---------- */ .divider { height:1px; background: var(--line); border:0; } .tag { display:inline-block; background: var(--accent); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px; } .tag-soft { background: var(--brand-lt); color: var(--brand-dk); } .kicker-num { font-family:var(--font-display); font-size:2.4rem; color: var(--brand); line-height:1; } .overline { color: var(--muted); font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px} .mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px} .maxw-sm{max-width:560px}.mx-auto{margin-inline:auto} /* ---------- Entrance animation ---------- */ .reveal { opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } .btn-pulse { animation:none; } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .split { grid-template-columns: 1fr; } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .checks.cols { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .sticky-cta { display:flex; } body { padding-bottom: 78px; } .nav .brand-logo span.full { display:none; } .footer-grid { grid-template-columns: 1fr; } .trust-strip { gap:16px 24px; } .seal { width:96px; height:96px; } }