/* * Tailwise — styles. * * Warm paper, deep pine, a tennis-ball lime and a clay red that is kept for * warnings. Reading comes first: 18px body text, 68-character lines, strong * contrast. Colour carries meaning (safe / in moderation / toxic) and is never * the only signal — every verdict also has an icon and a word. */ @font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("../fonts/figtree-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; } @font-face { font-family: "Young Serif"; src: url("../fonts/young-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; } :root { --paper: #fbf8f2; --cream: #f5efe3; --oat: #ede4d3; --oat-2: #e2d7c3; --pine: #0f3a30; --pine-2: #185043; --moss: #2d6a56; --ball: #d7f05b; --ball-2: #eef8bf; --clay: #e2603a; --blush: #f9e2d8; --ink: #17211d; --ink-2: #4b5652; --ink-3: #6f7a76; --line: rgba(15, 58, 48, .12); --line-2: rgba(15, 58, 48, .2); --safe: #17683b; --safe-bg: #ddf1e3; --safe-tint: #eef8f0; --limited: #875300; --limited-bg: #fcecc9; --limited-tint: #fdf6e6; --toxic: #ad2419; --toxic-bg: #fde2de; --toxic-tint: #fdf1ee; --serif: "Young Serif", Georgia, "Times New Roman", serif; --sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif; --r: 22px; --r-l: 32px; --r-xl: 44px; --sh-1: 0 1px 2px rgba(15, 58, 48, .06), 0 4px 14px -6px rgba(15, 58, 48, .18); --sh-2: 0 2px 4px rgba(15, 58, 48, .05), 0 18px 40px -18px rgba(15, 58, 48, .35); --sh-3: 0 30px 70px -30px rgba(15, 58, 48, .5); --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --gutter: clamp(18px, 4.5vw, 44px); --max: 1240px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } /* Paper grain: a touch of texture under everything. */ body::before { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } img, svg { display: block; max-width: 100%; height: auto; } a { color: var(--moss); text-decoration-thickness: .07em; text-underline-offset: .2em; } a:hover { color: var(--pine); } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: -.015em; margin: 0 0 .5em; color: var(--pine); text-wrap: balance; } p { margin: 0 0 1em; } :focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 8px; } ::selection { background: var(--ball); color: var(--pine); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 99; padding: 10px 16px; border-radius: 10px; background: var(--pine); color: #fff; } .skip:focus { top: 12px; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .icon { width: 1.15em; height: 1.15em; flex: none; } .eyebrow, .kicker { display: inline-flex; align-items: center; gap: .5em; margin: 0 0 .9em; font-size: .9rem; font-weight: 700; color: var(--moss); letter-spacing: .01em; } .kicker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 4px rgba(226, 96, 58, .18); } @media (prefers-reduced-motion: no-preference) { .kicker__dot { animation: pulse 2.4s ease-in-out infinite; } } @keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(226, 96, 58, 0); } } .kicker--light { color: var(--ball); } .section-title { font-size: clamp(1.55rem, 2.6vw, 2rem); margin: 0 0 .7em; } .glass { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, var(--sh-1); } /* ------------------------------------------------------------------ buttons, chips */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .7em 1.35em; border: 2px solid transparent; border-radius: 999px; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .35s var(--spring), background-color .2s, box-shadow .25s, border-color .2s; } .btn:active { transform: scale(.97); } .btn .icon { transition: transform .35s var(--spring); } .btn:hover .icon { transform: translateX(3px); } .btn--pine { background: var(--pine); color: #fff; box-shadow: 0 10px 24px -12px rgba(15, 58, 48, .7); } .btn--pine:hover { background: var(--pine-2); color: #fff; transform: translateY(-2px); } .btn--ball { background: var(--ball); color: var(--pine); } .btn--ball:hover { background: #cbe649; color: var(--pine); transform: translateY(-2px); } .btn--ghost, .btn--line { border-color: var(--line-2); color: var(--pine); background: rgba(255, 255, 255, .5); } .btn--ghost:hover, .btn--line:hover { border-color: var(--pine); background: #fff; color: var(--pine); } .btn--buy { background: var(--clay); color: #fff; } .btn--buy:hover { background: #cd5130; color: #fff; } .chip { display: inline-flex; align-items: center; padding: .34em .9em; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 1px solid var(--line); color: var(--ink); font-size: .92rem; font-weight: 600; text-decoration: none; transition: border-color .2s, transform .35s var(--spring), background-color .2s; } .chip:hover { border-color: var(--moss); transform: translateY(-2px); background: #fff; color: var(--pine); } .link { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--pine); } .link .icon { transition: transform .3s var(--spring); } .link:hover .icon { transform: translateX(3px); } .verdict { display: inline-flex; align-items: center; gap: .35em; padding: .3em .8em .3em .55em; border-radius: 999px; font-size: .92rem; font-weight: 700; white-space: nowrap; line-height: 1.2; } .verdict .icon { width: 1.05em; height: 1.05em; stroke-width: 2.6; } .verdict--safe { background: var(--safe-bg); color: var(--safe); } .verdict--limited { background: var(--limited-bg); color: var(--limited); } .verdict--toxic { background: var(--toxic-bg); color: var(--toxic); } .verdict--severe { background: var(--toxic); color: #fff; } .verdict--sm { font-size: .8rem; padding: .22em .62em .22em .45em; } .verdict--lg { font-size: 1.1rem; padding: .45em 1.05em .45em .75em; } /* ------------------------------------------------------------------ header */ .alertbar { background: var(--pine); color: #dbe9e3; font-size: .86rem; } .alertbar__in { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em 1em; padding-block: 8px; } .alertbar span { display: inline-flex; align-items: center; gap: .4em; } .alertbar a { color: var(--ball); font-weight: 700; } .top { position: sticky; top: 0; z-index: 30; background: rgba(251, 248, 242, .78); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s, background-color .25s; } .top.is-stuck { border-color: var(--line); background: rgba(251, 248, 242, .9); box-shadow: 0 10px 30px -24px rgba(15, 58, 48, .6); } .top__in { display: flex; align-items: center; gap: 18px; min-height: 74px; } .brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; color: var(--pine); } .brand__mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--ball); color: var(--pine); transform: rotate(-8deg); box-shadow: 0 6px 14px -8px rgba(15, 58, 48, .6); transition: transform .5s var(--spring); } .brand:hover .brand__mark { transform: rotate(8deg) scale(1.06); } .brand__mark .icon { width: 24px; height: 24px; fill: var(--pine); stroke: none; } .brand__name { font-family: var(--serif); font-size: 1.6rem; letter-spacing: -.02em; } .brand__logo { max-height: 44px; width: auto; } .brand--light { color: #fff; } .top__nav { display: none; } .nav { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; } .nav a { position: relative; display: block; padding: .5em .85em; border-radius: 999px; color: var(--ink); font-size: .98rem; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s; } .nav a:hover, .nav .current-menu-item > a { background: rgba(15, 58, 48, .07); color: var(--pine); } .top__search { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 1.1em; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-weight: 700; color: var(--pine); cursor: pointer; box-shadow: var(--sh-1); transition: transform .3s var(--spring); } .top__search:hover { transform: translateY(-1px); border-color: var(--moss); } .top__menu { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--cream); color: var(--pine); cursor: pointer; } @media (min-width: 1100px) { .top__nav { display: block; } .top__menu { display: none; } } @media (max-width: 560px) { .top__search span { display: none; } .top__search { padding: 0 .8em; } } .sheet { position: fixed; inset: 0; z-index: 60; background: rgba(15, 30, 26, .4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; justify-content: flex-end; } .sheet[hidden] { display: none; } .sheet__in { position: relative; width: min(100%, 460px); height: 100%; overflow-y: auto; padding: 76px 28px 32px; background: var(--paper); box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .3); animation: sheet-in .4s var(--ease); } .sheet--search { justify-content: center; align-items: flex-start; } .sheet--search .sheet__in { width: min(100% - 24px, 760px); height: auto; margin-top: 76px; border-radius: var(--r-l); padding: 58px 30px 30px; animation-name: drop-in; } @keyframes sheet-in { from { transform: translateX(40px); opacity: 0; } } @keyframes drop-in { from { transform: translateY(-16px); opacity: 0; } } .sheet__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--cream); cursor: pointer; } .sheet__title { font-family: var(--serif); font-size: 1.7rem; color: var(--pine); } .sheet__nav { margin: 0 0 24px; padding: 0; list-style: none; } .sheet__nav a { display: block; padding: .5em 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 1.65rem; color: var(--pine); text-decoration: none; } /* ------------------------------------------------------------------ the ask box */ .ask { position: relative; } .ask__species { display: inline-flex; gap: 4px; margin: 0 0 12px; padding: 4px; border: 0; border-radius: 999px; background: rgba(15, 58, 48, .08); } .ask__species label { position: relative; cursor: pointer; } .ask__species input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .ask__species span { display: block; padding: .38em 1.2em; border-radius: 999px; font-weight: 700; font-size: .95rem; color: var(--pine); transition: background-color .25s, color .25s; } .ask__species input:checked + span { background: var(--pine); color: #fff; } .ask__species input:focus-visible + span { outline: 3px solid var(--clay); outline-offset: 2px; } .ask__field { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border: 2px solid transparent; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-2); transition: box-shadow .25s, border-color .2s; } .ask__field:focus-within { border-color: var(--moss); box-shadow: 0 0 0 5px rgba(215, 240, 91, .55), var(--sh-2); } .ask__icon { color: var(--ink-3); } .ask__input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; font-size: 1.05rem; outline: none; } .ask__input::-webkit-search-cancel-button { display: none; } .ask__go { min-height: 44px; padding: 0 1.3em; border: 0; border-radius: 999px; background: var(--pine); color: #fff; font-weight: 700; cursor: pointer; transition: background-color .2s, transform .3s var(--spring); } .ask__go:hover { background: var(--pine-2); transform: scale(1.03); } .ask--big .ask__field { padding: 8px 8px 8px 24px; } .ask--big .ask__input { font-size: 1.2rem; min-height: 56px; } .ask--big .ask__go { min-height: 56px; padding: 0 1.9em; font-size: 1.05rem; } .ask__list { position: absolute; z-index: 20; left: 0; right: 0; margin: 10px 0 0; padding: 6px; list-style: none; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-3); } .ask__list[hidden] { display: none; } .ask__opt { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; cursor: pointer; } .ask__opt[aria-selected="true"], .ask__opt:hover { background: var(--cream); } .ask__opt-name { flex: 1; font-weight: 600; } .ask__opt-type { font-size: .78rem; color: var(--ink-3); } .ask__answer:empty { display: none; } .ask__answer { margin-top: 14px; } .quick { position: relative; padding: 20px 24px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-2); overflow: hidden; animation: drop-in .4s var(--ease); } .quick::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--line); } .quick--safe::before { background: var(--safe); } .quick--limited::before { background: #d49a24; } .quick--toxic::before { background: var(--toxic); } .quick__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; } .quick__q { font-family: var(--serif); font-size: 1.35rem; color: var(--pine); margin: 0; } .quick__text { margin: 0 0 10px; color: var(--ink-2); font-size: 1rem; } /* ------------------------------------------------------------------ hero */ .hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 80px) 0 clamp(48px, 6vw, 84px); background: radial-gradient(120% 90% at 85% 10%, #f3f7dd 0%, rgba(243, 247, 221, 0) 55%), linear-gradient(180deg, var(--cream), var(--paper)); } .hero__in { position: relative; display: grid; gap: 40px; align-items: center; } @media (min-width: 980px) { .hero__in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } } .hero__title { font-size: clamp(2.9rem, 6.6vw, 5.6rem); line-height: .95; letter-spacing: -.03em; margin-bottom: .35em; max-width: 11ch; } .hero__title em { font-style: normal; background: linear-gradient(transparent 62%, var(--ball) 62%, var(--ball) 90%, transparent 90%); padding: 0 .06em; } .hero__lede { font-size: 1.2rem; color: var(--ink-2); max-width: 34em; margin-bottom: 28px; } .hero__popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; font-size: .92rem; } .hero__popular > span { color: var(--ink-3); margin-right: 4px; font-weight: 600; } .hero__stage { position: relative; } @media (max-width: 979px) { .hero__stage { max-width: 440px; margin-inline: auto; width: 100%; } } .stage { position: relative; aspect-ratio: 1 / 1.02; border-radius: 48% 48% var(--r-xl) var(--r-xl) / 42% 42% var(--r-xl) var(--r-xl); background: radial-gradient(70% 60% at 50% 30%, #fbfdf0, #e9f3c4 60%, #d5eb7a 100%); box-shadow: inset 0 -30px 60px -30px rgba(15, 58, 48, .35), var(--sh-3); overflow: hidden; isolation: isolate; } .stage::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 6%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 58, 48, .28), rgba(15, 58, 48, 0)); z-index: -1; } .stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 30% at 22% 18%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); pointer-events: none; } .stage .mascot { position: absolute; inset: 6% 6% 0; width: auto; aspect-ratio: auto; } .stage__hint { position: absolute; left: 50%; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: .45em; margin: 0; padding: .45em 1em; border-radius: 999px; transform: translateX(-50%); background: rgba(15, 58, 48, .82); color: #fff; font-size: .85rem; font-weight: 700; white-space: nowrap; pointer-events: none; } .stage__hint .icon { fill: var(--ball); stroke: none; } .stage__hint[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { .stage__hint { animation: hint 4.2s var(--ease) 1.2s both; } } @keyframes hint { 0% { opacity: 0; transform: translate(-50%, 8px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } } .stage__facts { position: absolute; left: -28px; bottom: 12%; z-index: 2; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .stage__facts li { display: flex; align-items: baseline; gap: 6px; padding: 10px 16px; border-radius: 18px; } .stage__facts li:nth-child(2) { margin-left: 22px; } .stage__facts b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--pine); line-height: 1; } .stage__facts span { font-size: .85rem; font-weight: 700; color: var(--ink-2); } @media (max-width: 979px) { .stage__facts { left: -6px; top: auto; bottom: 16%; } } @media (prefers-reduced-motion: no-preference) { .stage__facts li { animation: float 6s ease-in-out infinite; } .stage__facts li:nth-child(2) { animation-delay: -2s; } .stage__facts li:nth-child(3) { animation-delay: -4s; } } @keyframes float { 50% { transform: translateY(-6px); } } /* The mascot: SVG fallback, WebGPU canvas on top when available. */ .mascot { position: relative; width: clamp(240px, 26vw, 340px); aspect-ratio: 1; } .mascot svg { width: 100%; height: auto; } .mascot__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity .6s var(--ease); } .mascot--gl .mascot__gl { opacity: 1; } .mascot--gl .mascot__dog, .mascot--gl .mascot__cat { visibility: hidden; } .mascot__cat { display: none; } .mascot[data-pet="cat"] .mascot__dog { display: none; } .mascot[data-pet="cat"] .mascot__cat { display: block; } .mascot svg * { vector-effect: non-scaling-stroke; } .m-shadow { fill: rgba(15, 58, 48, .12); } .m-body, .m-face, .m-ear { fill: #fff; stroke: var(--pine); stroke-width: 3; stroke-linejoin: round; } .m-ear { fill: #efe3cf; } .m-ear--cat { fill: #fff; } .m-chest { fill: #f6efe2; } .m-patch { fill: #efe3cf; } .mascot__cat .m-patch { fill: #f3c9a3; } .m-collar { fill: var(--clay); } .m-tag { fill: var(--ball); stroke: var(--pine); stroke-width: 2; } .m-tail { fill: none; stroke: var(--pine); stroke-width: 10; stroke-linecap: round; } .m-tail--cat { stroke-width: 9; } .m-eye { fill: var(--pine); } .m-happy { fill: none; stroke: var(--pine); stroke-width: 3.5; stroke-linecap: round; opacity: 0; } .m-brow { fill: none; stroke: var(--pine); stroke-width: 3; stroke-linecap: round; opacity: 0; } .m-snout { fill: #f6efe2; } .m-nose { fill: var(--pine); } .m-mouth, .m-frown, .m-whisker { fill: none; stroke: var(--pine); stroke-width: 3; stroke-linecap: round; } .m-whisker { stroke-width: 2; opacity: .6; } .m-frown { opacity: 0; } .m-tongue { fill: #f08a8a; stroke: var(--pine); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: top center; transform: scaleY(.3); } .m-head, .m-tail, .m-ear, .m-eyes, .m-brow, .m-frown, .m-mouth { transform-box: fill-box; transition: transform .6s var(--spring), opacity .3s; } .m-head { transform-origin: 50% 90%; } .m-tail { transform-origin: 0% 100%; } .m-ear--l { transform-origin: 80% 10%; } .m-ear--r { transform-origin: 20% 10%; } .m-eyes, .m-brow { transform-origin: center; } .mascot__bubble { position: absolute; left: 50%; top: 0; z-index: 3; transform: translate(-50%, -6px) scale(.9); padding: .45em 1em; border-radius: 999px; background: var(--pine); color: #fff; font-weight: 700; font-size: .95rem; white-space: nowrap; opacity: 0; box-shadow: var(--sh-2); transition: opacity .25s, transform .45s var(--spring); } .mascot__bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; } .mascot__bubble.is-on { opacity: 1; transform: translate(-50%, 6px) scale(1); } @media (prefers-reduced-motion: no-preference) { .mascot[data-mood="idle"] .m-tail { animation: sway 3.2s ease-in-out infinite; } .mascot[data-mood="idle"] .m-eyes { animation: blink 5s infinite; } .mascot[data-mood="safe"] .m-tail { animation: wag .28s ease-in-out infinite; } } .mascot[data-mood="typing"] .m-head { transform: rotate(-9deg); } .mascot[data-mood="safe"] .m-eye { opacity: 0; } .mascot[data-mood="safe"] .m-happy { opacity: 1; } .mascot[data-mood="safe"] .m-tongue { opacity: 1; transform: scaleY(1); } .mascot[data-mood="limited"] .m-head { transform: rotate(10deg); } .mascot[data-mood="limited"] .m-brow--r { opacity: 1; transform: translateY(-3px); } .mascot[data-mood="toxic"] .m-ear--l { transform: rotate(26deg); } .mascot[data-mood="toxic"] .m-ear--r { transform: rotate(-26deg); } .mascot[data-mood="toxic"] .m-brow { opacity: 1; } .mascot[data-mood="toxic"] .m-brow--l { transform: translateY(-3px) rotate(-20deg); } .mascot[data-mood="toxic"] .m-brow--r { transform: translateY(-3px) rotate(20deg); } .mascot[data-mood="toxic"] .m-mouth { opacity: 0; } .mascot[data-mood="toxic"] .m-frown { opacity: 1; } .mascot[data-mood="toxic"] .m-tail { transform: rotate(58deg); } .mascot[data-mood="toxic"] .mascot__bubble { background: var(--toxic); } @keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } } @keyframes wag { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(18deg); } } @keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } } /* ------------------------------------------------------------------ home blocks */ .block { padding: clamp(56px, 8vw, 104px) 0; } .block--help { padding: 0 0 clamp(40px, 5vw, 64px); } .block__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 30px; margin-bottom: 32px; } .block__head .kicker { margin-bottom: .5em; } .block__title { font-size: clamp(2rem, 4vw, 3rem); margin: 0; max-width: 18ch; } .block__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .block__more { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; } .foods { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 640px) { .foods { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .foods { grid-template-columns: repeat(6, minmax(0, 1fr)); } .foods--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .food-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 10px 10px 14px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-1); transition: transform .45s var(--spring), box-shadow .3s; } .food-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line-2), var(--sh-2); } .food-card__link { display: grid; gap: 10px; color: var(--ink); text-decoration: none; } .food-card__img { position: relative; display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 1; background: var(--cream); } .food-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .food-card:hover .food-card__img img { transform: scale(1.06); } .food-card::after { content: ""; position: absolute; top: 18px; right: 18px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: var(--sh-1); } .food-card--safe::after { background: var(--safe); } .food-card--limited::after { background: #d49a24; } .food-card--toxic::after { background: var(--toxic); } .food-card__name { margin: 0 4px; font-family: var(--sans); font-size: 1.02rem; font-weight: 700; line-height: 1.25; color: var(--ink); } .food-card__v { display: grid; gap: 5px; margin: 0 4px; } .food-card__v div { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .food-card__v dt { font-size: .76rem; font-weight: 700; color: var(--ink-3); } .food-card__v dd { margin: 0; } .food-card__v a { text-decoration: none; } .food-tile { display: grid; place-items: center; width: 100%; height: 100%; min-height: 80px; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%), var(--tile, var(--oat)); } .food-tile span { font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 4rem); color: rgba(15, 58, 48, .55); } .helpline { display: grid; gap: 14px; padding: 24px 26px; border-radius: var(--r-l); background: linear-gradient(120deg, #fbe4da, #fdf0ea); color: #5a2213; box-shadow: inset 0 0 0 1px rgba(226, 96, 58, .25); } @media (min-width: 900px) { .helpline:not(.helpline--compact) { grid-template-columns: auto 1fr; align-items: center; column-gap: 28px; } .helpline:not(.helpline--compact) .helpline__note { grid-column: 1 / -1; } } .helpline__head { display: flex; align-items: center; gap: .5em; margin: 0; color: #8f2b12; font-size: 1.1rem; font-weight: 800; } .helpline__lines { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .helpline__lines a { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 16px; background: #fff; color: #5a2213; text-decoration: none; box-shadow: 0 8px 18px -12px rgba(143, 43, 18, .6); transition: transform .35s var(--spring); } .helpline__lines a:hover { transform: translateY(-2px); color: #5a2213; } .helpline__lines .icon { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--blush); color: var(--clay); } .helpline__lines b { display: block; font-size: 1.1rem; } .helpline__lines small { display: block; font-size: .82rem; } .helpline__note { margin: 0; font-size: .9rem; } .helpline--compact { padding: 16px; background: rgba(255, 255, 255, .06); color: inherit; box-shadow: none; } .helpline--compact .helpline__head { color: inherit; font-size: .98rem; } .block--tools { background: var(--cream); } .bento { display: grid; gap: 18px; } @media (min-width: 760px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bento__card--choc { grid-column: span 3; } } @media (min-width: 1080px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bento__card--choc { grid-column: span 2; grid-row: span 2; } .bento__card--match { grid-column: span 2; } } .bento__card { position: relative; display: grid; align-content: start; gap: 10px; min-height: 220px; padding: 28px; border-radius: var(--r-l); background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line), var(--sh-1); overflow: hidden; transition: transform .5s var(--spring), box-shadow .3s; } .bento__card:hover { transform: translateY(-5px); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), var(--sh-3); } .bento__card--choc { background: radial-gradient(90% 70% at 90% 100%, #1f5a4b, var(--pine)); color: #fff; min-height: 420px; } .bento__card--choc:hover { color: #fff; } .bento__card--choc .bento__name { color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.3rem); } .bento__card--choc .bento__lede { color: #cfe2da; max-width: 28em; } .bento__card--choc .bento__icon { background: var(--ball); color: var(--pine); } .bento__card--choc .bento__go { color: var(--ball); } .bento__card--match { background: linear-gradient(135deg, #fff, var(--ball-2)); } .bento__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--ball-2); color: var(--pine); } .bento__icon .icon { width: 28px; height: 28px; } .bento__name { font-family: var(--serif); font-size: 1.4rem; line-height: 1.15; color: var(--pine); } .bento__lede { font-size: .98rem; color: var(--ink-2); } .bento__go { display: inline-flex; align-items: center; gap: .4em; margin-top: auto; font-weight: 700; color: var(--pine); } .bento__art { display: block; margin: 8px -8px 0 auto; width: min(100%, 360px); } .bento__card--choc .dose-art__glass { fill: rgba(255, 255, 255, .92); } .bento__card--choc .dose-art__line { stroke: var(--ball); } .bento__card--choc .dose-art__eye { fill: var(--ball); } /* Dose drawing (still) */ .dose-art { width: 100%; height: auto; overflow: visible; } .dose-art__glass { fill: #f6f9f4; } .dose-art__choc { fill: #5b331c; } .dose-art__wave { fill: #7a4a2c; } .dose-art__mark { stroke: rgba(15, 58, 48, .45); stroke-width: 1.5; stroke-dasharray: 7 6; } .dose-art__mark--red { stroke: var(--toxic); } .dose-art__line { fill: none; stroke: var(--pine); stroke-width: 4; stroke-linejoin: round; } .dose-art__eye { fill: var(--pine); } @media (prefers-reduced-motion: no-preference) { .bento__card--choc .dose-art__choc, .bento__card--choc .dose-art__wave { animation: fill 5s var(--ease) infinite alternate; } } @keyframes fill { from { transform: translateY(40px); } to { transform: translateY(-34px); } } /* Breeds: a full-bleed strip. */ .block--breeds { overflow: hidden; } .filters { display: flex; flex-wrap: wrap; gap: 6px; } .filter { padding: .42em 1em; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--ink); font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .2s; } .filter:hover { border-color: var(--moss); color: var(--pine); } .filter.is-on { background: var(--pine); border-color: var(--pine); color: #fff; } .filter small { opacity: .7; font-weight: 600; } .strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(74%, 270px); gap: 20px; overflow-x: auto; padding: 6px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 22px; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); scrollbar-width: thin; scrollbar-color: var(--oat-2) transparent; } .strip > * { scroll-snap-align: start; } .breed-grid { grid-auto-flow: row; overflow: visible; padding: 0; } .breed-card[hidden] { display: none; } .breed-card__link { display: grid; gap: 4px; text-decoration: none; color: var(--ink); } .breed-card__img { position: relative; display: block; overflow: hidden; border-radius: 120px 120px var(--r) var(--r); aspect-ratio: 4 / 5; background: var(--cream); margin-bottom: 12px; box-shadow: var(--sh-1); } .breed-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .breed-card__link:hover img { transform: scale(1.06); } .breed-card__meta { font-size: .8rem; font-weight: 700; color: var(--ink-3); } .breed-card__name { margin: 0 0 8px; font-size: 1.4rem; } .breed-card__traits { display: grid; gap: 5px; } .trait { display: grid; grid-template-columns: 7em 1fr; align-items: center; gap: 10px; font-size: .85rem; } .trait__label { color: var(--ink-2); font-weight: 600; } .trait__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; } .trait__bar i { height: 8px; border-radius: 4px; background: var(--oat); } .trait__bar i.on { background: linear-gradient(90deg, var(--moss), var(--pine-2)); } .block--plants { position: relative; background: radial-gradient(80% 60% at 0% 0%, #1d5a4a, var(--pine) 60%); color: #dbe9e3; overflow: hidden; } .plants-band { display: grid; gap: 34px; } @media (min-width: 980px) { .plants-band { grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); align-items: start; } } .plants-band__head .block__title { color: #fff; margin-bottom: 16px; } .plants-band__head p { color: #c9ddd5; } .plants-band__alert { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; margin: 6px 0 24px; padding: 10px 16px 10px 10px; border-radius: var(--r); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #fff; text-decoration: none; transition: background-color .2s; } .plants-band__alert:hover { background: rgba(255, 255, 255, .13); color: #fff; } .plants-band__alert-img { width: 88px; height: 88px; border-radius: 16px; overflow: hidden; } .plants-band__alert-img img { width: 100%; height: 100%; object-fit: cover; } .plants-band__alert b { display: block; margin: 6px 0 2px; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; } .plants-band__alert small { display: block; color: #c9ddd5; font-size: .85rem; line-height: 1.45; } .plant-mosaic { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } @media (min-width: 760px) { .plant-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .plant-tile { position: relative; display: grid; gap: 6px; padding: 8px 8px 12px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; text-decoration: none; transition: transform .45s var(--spring), background-color .2s; } .plant-tile:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .11); color: #fff; } .plant-tile__img { display: block; aspect-ratio: 1; border-radius: 15px; overflow: hidden; background: rgba(255, 255, 255, .06); margin-bottom: 4px; } .plant-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .plant-tile:hover .plant-tile__img img { transform: scale(1.06); } .plant-tile__name { margin: 0 4px 2px; font-weight: 700; } .plant-tile__v { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 4px; } .plant-tile__v small { color: #b7cfc6; font-size: .76rem; font-weight: 700; } .plant-tile .verdict { font-size: .74rem; padding: .18em .55em .18em .4em; } .guides { display: grid; gap: 30px; } @media (min-width: 900px) { .guides { grid-template-columns: 1.4fr 1fr 1fr; } .guides > .story--lead { grid-row: span 2; } } .guides--three { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .guides--three > .story--lead { grid-row: auto; } .guides--index { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } @media (min-width: 900px) { .guides--index > .story--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center; } } .story { display: grid; gap: 14px; align-content: start; } .story__img { display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; background: var(--cream); box-shadow: var(--sh-1); } .story--lead .story__img { aspect-ratio: 16 / 11; border-radius: var(--r-l); } .story__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .story:hover .story__img img { transform: scale(1.04); } .story__cat { display: inline-block; font-size: .82rem; font-weight: 800; text-decoration: none; color: var(--moss); } .story__title { margin: 6px 0 8px; font-size: 1.32rem; } .story--lead .story__title { font-size: clamp(1.7rem, 3vw, 2.4rem); } .story__title a { color: var(--pine); text-decoration: none; background: linear-gradient(var(--ball), var(--ball)) 0 92% / 0 .28em no-repeat; transition: background-size .45s var(--ease); } .story__title a:hover { background-size: 100% .28em; } .story__excerpt { color: var(--ink-2); } .story__meta { margin: 0; font-size: .86rem; color: var(--ink-3); } .thumb-fallback { display: grid; place-items: center; width: 100%; height: 100%; min-height: 120px; color: var(--moss); background: var(--cream); } .thumb-fallback .icon { width: 40%; height: 40%; fill: currentColor; stroke: none; opacity: .35; } .block--trust { background: var(--cream); } .trust { display: grid; gap: 36px; align-items: center; } @media (min-width: 980px) { .trust { grid-template-columns: 1.2fr 1fr; } } .trust__steps { display: grid; gap: 16px; margin: 22px 0 26px; padding: 0; list-style: none; counter-reset: s; } .trust__steps li { position: relative; padding-left: 56px; counter-increment: s; color: var(--ink-2); } .trust__steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pine); color: var(--ball); font-family: var(--serif); } .trust__steps strong { display: block; color: var(--pine); font-size: 1.12rem; } .trust__people { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .trust__people a { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r); background: #fff; text-decoration: none; color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--sh-1); transition: transform .4s var(--spring); } .trust__people a:hover { transform: translateX(4px); } .trust__people img { width: 60px; height: 60px; border-radius: 50%; } .trust__people span { display: grid; } .trust__people strong { color: var(--pine); font-size: 1.05rem; } .trust__people small { color: var(--ink-2); font-weight: 600; } .trust__people em { color: var(--ink-3); font-size: .86rem; font-style: normal; } /* ------------------------------------------------------------------ reference pages */ .crumbs { margin: 0 0 18px; padding-top: 22px; font-size: .86rem; } .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .crumbs li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--ink-3); } .crumbs a { color: var(--ink-2); } .crumbs [aria-current] { color: var(--ink); font-weight: 600; } .ref-hero { position: relative; padding-bottom: clamp(36px, 5vw, 60px); background: linear-gradient(180deg, var(--cream), var(--paper)); overflow: hidden; } .ref-hero--safe { background: radial-gradient(70% 90% at 90% 0%, #d8f0dc, rgba(216, 240, 220, 0) 60%), linear-gradient(180deg, var(--safe-tint), var(--paper)); } .ref-hero--limited { background: radial-gradient(70% 90% at 90% 0%, #fae7bd, rgba(250, 231, 189, 0) 60%), linear-gradient(180deg, var(--limited-tint), var(--paper)); } .ref-hero--toxic { background: radial-gradient(70% 90% at 90% 0%, #fbd6cf, rgba(251, 214, 207, 0) 60%), linear-gradient(180deg, var(--toxic-tint), var(--paper)); } .ref-hero__in { display: grid; gap: 32px; align-items: center; } @media (min-width: 900px) { .ref-hero__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } } .ref__title { font-size: clamp(2.2rem, 4.8vw, 3.8rem); line-height: 1.02; letter-spacing: -.025em; margin-bottom: .4em; } .ref__aka { color: var(--ink-2); margin-top: -.4em; } .stamp { display: inline-flex; align-items: center; gap: 16px; margin: 4px 0 16px; } .stamp__word { font-family: var(--serif); font-size: clamp(3rem, 7vw, 5rem); line-height: .9; letter-spacing: -.03em; } .stamp--safe .stamp__word { color: var(--safe); } .stamp--limited .stamp__word { color: var(--limited); } .stamp--toxic .stamp__word { color: var(--toxic); } .ref-hero__answer { font-size: clamp(1.15rem, 1.8vw, 1.32rem); line-height: 1.55; color: var(--ink); max-width: 36em; } .ref-hero__why { display: inline-flex; flex-wrap: wrap; gap: .5em; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px var(--line); font-size: .95rem; color: var(--ink-2); } .ref-hero__why strong { color: var(--pine); } .ref-hero__media { position: relative; margin: 0; } .ref-hero__img, .ref-hero__media > .food-tile { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% var(--r-l) var(--r-l) / 40% 40% var(--r-l) var(--r-l); box-shadow: var(--sh-3); } .ref-hero__media figcaption { margin-top: 10px; font-size: .78rem; color: var(--ink-3); } .species-tabs { position: absolute; left: 50%; bottom: 16px; display: flex; gap: 4px; padding: 5px; border-radius: 999px; transform: translateX(-50%); background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--sh-2); white-space: nowrap; } .ref-hero__media:has(figcaption) .species-tabs { bottom: 46px; } .species-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: none; } .species-tabs a.is-on { background: #fff; box-shadow: var(--sh-1); } .meters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; max-width: 520px; } .meter { display: grid; gap: 8px; justify-items: start; padding: 16px; border-radius: var(--r); background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px var(--line); } .meter__who { margin: 0; font-family: var(--serif); font-size: 1.3rem; color: var(--pine); } .meter__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; } .meter__bar i { height: 8px; border-radius: 4px; background: var(--oat); } .meter--none .meter__bar i.on { background: var(--safe); } .meter--mild .meter__bar i.on { background: #d49a24; } .meter--moderate .meter__bar i.on { background: var(--clay); } .meter--severe .meter__bar i.on { background: var(--toxic); } .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 14px 0 0; font-size: .9rem; color: var(--ink-2); } .byline__who { display: inline-flex; align-items: center; gap: 8px; } .byline__face { width: 34px; height: 34px; border-radius: 50%; } .byline__who a { color: var(--ink); font-weight: 700; } .byline__who--vet .icon { color: var(--safe); } .ref__grid { display: grid; gap: 44px; padding-top: 10px; padding-bottom: 64px; } @media (min-width: 1060px) { .ref__grid { grid-template-columns: minmax(0, 1fr) 320px; } } .ref__main { min-width: 0; display: grid; gap: 34px; align-content: start; } .ref__main > * { margin: 0; } .ref__rail { display: grid; gap: 18px; align-content: start; } @media (min-width: 1060px) { .ref__rail { position: sticky; top: 100px; } } .rail-box { padding: 22px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-1); } .rail-box__title { font-family: var(--serif); font-size: 1.2rem; color: var(--pine); margin-bottom: 12px; } .rail-box--ask { background: var(--cream); box-shadow: none; } .rail-box--ask .ask__field { box-shadow: 0 0 0 1px var(--line); } .rail-toc { margin: 0; padding: 0; list-style: none; counter-reset: t; display: grid; gap: 2px; } .rail-toc a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 600; counter-increment: t; } .rail-toc a::before { content: counter(t, decimal-leading-zero); color: var(--ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; padding-top: .15em; } .rail-toc a:hover, .rail-toc a.is-on { background: var(--cream); color: var(--pine); } .mini-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .mini-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .98rem; } .mini-list a:hover { background: var(--cream); } .mini-list small { color: var(--ink-3); font-weight: 500; } .mini-list--cols { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 40px; } .mini-breeds { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .mini-breeds a { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 14px; color: var(--ink); text-decoration: none; } .mini-breeds a:hover { background: var(--cream); } .mini-breeds img, .mini-breeds .thumb-fallback { width: 58px; height: 58px; min-height: 0; border-radius: 14px; object-fit: cover; flex: none; } .mini-breeds span { display: grid; font-weight: 700; } .mini-breeds small { font-weight: 500; color: var(--ink-3); font-size: .8rem; } .calc-cta { display: grid; gap: 18px; align-items: center; padding: 22px 26px; border-radius: var(--r-l); background: radial-gradient(90% 90% at 100% 100%, #1f5a4b, var(--pine)); color: #dbe9e3; text-decoration: none; box-shadow: var(--sh-2); transition: transform .45s var(--spring); } @media (min-width: 640px) { .calc-cta { grid-template-columns: 220px 1fr; } } .calc-cta:hover { transform: translateY(-3px); color: #dbe9e3; } .calc-cta b { display: block; margin-bottom: 4px; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; color: #fff; } .calc-cta em { display: inline-flex; align-items: center; gap: .4em; margin-top: 10px; color: var(--ball); font-style: normal; font-weight: 700; } .calc-cta span { display: block; } .calc-cta .dose-art__glass { fill: rgba(255, 255, 255, .92); } .calc-cta .dose-art__line { stroke: var(--ball); } .ref__facts { display: grid; gap: 16px; } @media (min-width: 760px) { .ref__facts { grid-template-columns: 1fr 1fr; } } .fact { padding: 24px 26px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-1); } .fact__title { font-size: 1.35rem; margin-bottom: 14px; } .fact p { margin: 0; } .fact--act { background: linear-gradient(160deg, #fff, var(--toxic-tint)); box-shadow: 0 0 0 1px rgba(173, 36, 25, .18), var(--sh-1); } .fact--amount { background: linear-gradient(160deg, #fff, var(--ball-2)); } .fact__big { font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; color: var(--pine); } .fact__note { margin-top: 12px !important; font-size: .9rem; color: var(--ink-2); } .steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 12px; } .steps li { position: relative; padding-left: 42px; counter-increment: st; line-height: 1.5; } .steps li::before { content: counter(st); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--toxic); color: #fff; font-weight: 800; font-size: .85rem; } .ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .ticks li { position: relative; padding-left: 32px; } .ticks li::before { content: ""; position: absolute; left: 0; top: .28em; width: 21px; height: 21px; border-radius: 50%; background: var(--safe-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317683b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; } .ticks--warn li::before { background: var(--toxic-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ad2419' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 14px no-repeat; } .kv { margin: 0; display: grid; gap: 12px; } .kv dt { font-size: .8rem; font-weight: 800; color: var(--ink-3); } .kv dd { margin: 0; } .compare-sp__grid { display: grid; gap: 14px; } @media (min-width: 700px) { .compare-sp__grid { grid-template-columns: 1fr 1fr; } } .compare-sp__col { display: grid; gap: 10px; align-content: start; padding: 22px 24px; border-radius: var(--r); background: var(--cream); } .compare-sp__col.is-current { background: #fff; box-shadow: 0 0 0 2px var(--pine), var(--sh-1); } .compare-sp__col p { margin: 0; } .compare-sp__who { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--serif); font-size: 1.4rem; color: var(--pine); } .compare-sp__amount { font-size: .95rem; color: var(--ink-2); } .prose--ref { padding: 28px 30px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line); } .prose--ref h2 { margin-top: 0 !important; } .alt-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .alt { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform .4s var(--spring); } a.alt:hover { transform: translateY(-3px); } .alt__img { width: 54px; height: 54px; flex: none; border-radius: 14px; overflow: hidden; } .alt__img img { width: 100%; height: 100%; object-fit: cover; } .alt__img--leaf { display: grid; place-items: center; background: var(--safe-bg); color: var(--safe); } .alt__name { flex: 1; font-weight: 700; } .faq { display: grid; gap: 10px; } .faq .section-title { margin-bottom: .4em; } .faq__item { border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; } .faq__item summary { position: relative; display: block; padding: 18px 60px 18px 22px; font-weight: 700; color: var(--pine); cursor: pointer; list-style: none; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f3a30' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .35s var(--spring); } .faq__item[open] summary::after { transform: rotate(45deg); background-color: var(--ball); } .faq__item p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); } .sources { padding-top: 22px; border-top: 1px solid var(--line); } .sources__title { display: flex; align-items: center; gap: .45em; font-size: 1.2rem; } .sources__list { margin: 0; padding-left: 1.3em; font-size: .95rem; color: var(--ink-2); } .disclaimer { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r); background: var(--cream); font-size: .88rem; color: var(--ink-2); } .disclaimer .icon { color: var(--safe); margin-top: .2em; } .disclaimer p { margin: 0; } .more { padding: clamp(48px, 6vw, 80px) 0; background: var(--cream); } .more .block__title { margin-bottom: 28px; } /* Breed page. */ .breed-hero { padding-bottom: clamp(36px, 5vw, 60px); background: radial-gradient(70% 90% at 100% 0%, #eef6cf, rgba(238, 246, 207, 0) 60%), linear-gradient(180deg, var(--cream), var(--paper)); } .breed-hero__in { display: grid; gap: 34px; align-items: center; } @media (min-width: 900px) { .breed-hero__in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } } .breed-hero__photo { margin: 0; } .breed-hero__photo img, .breed-hero__photo .thumb-fallback { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 50% 50% var(--r-l) var(--r-l) / 38% 38% var(--r-l) var(--r-l); box-shadow: var(--sh-3); } .breed-hero__photo figcaption { margin-top: 10px; font-size: .78rem; color: var(--ink-3); } .breed-hero__temper { font-size: 1.3rem; color: var(--ink-2); } .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 22px 0 8px; } .stats div { padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px var(--line); } .stats dt { font-size: .78rem; font-weight: 800; color: var(--ink-3); } .stats dd { margin: 2px 0 0; font-weight: 700; color: var(--pine); } .breed-duo { display: grid; gap: 16px; } @media (min-width: 760px) { .breed-duo:has(.coat-card:not([hidden])) { grid-template-columns: .9fr 1.1fr; } } .coat-card { display: grid; grid-template-rows: 1fr auto; border-radius: var(--r-l); overflow: hidden; background: radial-gradient(80% 70% at 50% 35%, #fbfdf0, #e3efbd 70%, #cfe673); box-shadow: var(--sh-2); } .coat-card[hidden] { display: none; } .coat-card__stage { position: relative; min-height: 280px; aspect-ratio: 1 / .9; } .coat-card__gl { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; } .coat-card__copy { padding: 16px 20px 18px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .coat-card__title { font-size: 1.3rem; margin: 0 0 2px; } .coat-card__copy p { margin: 0; color: var(--ink-2); font-size: .95rem; } .coat-card__hint { display: inline-flex; align-items: center; gap: .4em; margin-top: 6px !important; font-weight: 700; color: var(--moss) !important; } .coat-card__hint .icon { fill: currentColor; stroke: none; } .traits { padding: 26px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-1); } .traits__grid { display: grid; gap: 14px; } .traits .trait { grid-template-columns: 11em 1fr; font-size: .95rem; } .traits .trait__bar i { height: 11px; } .pc { display: grid; gap: 14px; } @media (min-width: 640px) { .pc { grid-template-columns: 1fr 1fr; } } .pc__col { padding: 22px 24px; border-radius: var(--r); } .pc__col--pro { background: var(--safe-tint); box-shadow: 0 0 0 1px rgba(23, 104, 59, .18); } .pc__col--con { background: var(--limited-tint); box-shadow: 0 0 0 1px rgba(135, 83, 0, .18); } .pc__col h3, .pc__col h4 { font-family: var(--sans); font-weight: 800; font-size: 1rem; margin: 0 0 10px; } .pc__col ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; } .size__box { display: grid; gap: 10px; justify-items: center; padding: 24px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--line); } .size-svg { width: 100%; max-width: 520px; height: auto; overflow: visible; } .size-svg__grid { stroke: var(--line); stroke-width: 1; } .size-svg__tick { fill: var(--ink-3); font: 600 11px var(--sans); } .size-svg__person { fill: var(--oat-2); } .size-svg__pet { fill: var(--pine); } .size-svg__dim { stroke: var(--clay); stroke-width: 2; } .size-svg__label { fill: var(--clay); font: 800 13px var(--sans); } .size-svg__cap { fill: var(--ink-2); font: 700 12px var(--sans); } .size__note { margin: 0; color: var(--ink-2); font-size: .95rem; } .cta-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border-radius: var(--r-l); background: var(--ball); color: var(--pine); text-decoration: none; transition: transform .45s var(--spring); } .cta-band:hover { transform: translateY(-3px); color: var(--pine); } .cta-band b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; } .cta-band .icon { width: 30px; height: 30px; flex: none; } .similar__img { display: block; width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden; } .similar__img img { width: 100%; height: 100%; object-fit: cover; } .similar th a { display: block; text-align: center; font-family: var(--serif); font-weight: 400; color: var(--pine); text-decoration: none; } .similar td, .similar thead th { text-align: center; } .similar thead th.is-current { vertical-align: bottom; font-family: var(--serif); font-weight: 400; } .similar .is-current { background: var(--ball-2); } .dots { display: inline-flex; gap: 3px; } .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--oat); } .dots i.on { background: var(--moss); } /* Indexes. */ .index-head { position: relative; padding: 18px 0 30px; } .index-head__title { font-size: clamp(2.3rem, 5vw, 3.8rem); max-width: 20ch; letter-spacing: -.025em; } .index-head__lede { font-size: 1.15rem; color: var(--ink-2); max-width: 44em; } .index-head__switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--cream); } .index-head__switch a { padding: .45em 1.3em; border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--pine); } .index-head__switch a.is-on { background: var(--pine); color: #fff; } .index-tools { position: sticky; top: 74px; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 calc(-1 * var(--gutter)) 20px; padding: 12px var(--gutter); background: rgba(251, 248, 242, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .index-tools__search { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line-2); flex: 1 1 220px; } .index-tools__search input { flex: 1; min-width: 0; min-height: 44px; border: 0; outline: none; background: transparent; } .index-tools select, .field select, .field input { min-height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; } .filter--safe.is-on { background: var(--safe); border-color: var(--safe); } .filter--limited.is-on { background: var(--limited); border-color: var(--limited); } .filter--toxic.is-on { background: var(--toxic); border-color: var(--toxic); } .az { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 22px; } .az a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--pine); font-weight: 700; text-decoration: none; transition: background-color .2s; } .az a:hover { background: var(--ball); } .az-group { display: grid; gap: 12px; margin-bottom: 30px; } @media (min-width: 760px) { .az-group { grid-template-columns: 80px 1fr; } } .az-group[hidden] { display: none; } .az-group__letter { font-size: 2.6rem; line-height: 1; margin: 0; color: var(--oat-2); } .food-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } @media (min-width: 640px) { .food-list { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .food-list { grid-template-columns: 1fr 1fr 1fr; } } .food-list li[hidden] { display: none; } .food-list a { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; font-weight: 700; transition: box-shadow .2s, transform .35s var(--spring); } .food-list a:hover { box-shadow: 0 0 0 1px var(--moss), var(--sh-1); transform: translateY(-2px); } .food-list__img { width: 46px; height: 46px; flex: none; border-radius: 12px; overflow: hidden; } .food-list__img img, .food-list__img .food-tile { width: 100%; height: 100%; min-height: 0; object-fit: cover; } .food-list__img .food-tile span { font-size: 1.3rem; } .food-list__name { flex: 1; } .index-empty { padding: 30px 0; color: var(--ink-2); } .plant-grid, .breed-grid { margin: 0 0 56px; padding: 0; list-style: none; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .plant-grid li[hidden] { display: none; } .plant-card { display: grid; gap: 5px; padding: 10px 10px 14px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-1); text-decoration: none; color: var(--ink); transition: transform .45s var(--spring); } .plant-card:hover { transform: translateY(-4px); } .plant-card__img { display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 1; background: var(--cream); margin-bottom: 6px; } .plant-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .plant-card:hover img { transform: scale(1.05); } .plant-card__name { margin: 0 4px; font-family: var(--serif); font-size: 1.3rem; color: var(--pine); } .plant-card__sci { margin: 0 4px 4px; font-style: italic; color: var(--ink-3); font-size: .88rem; } .plant-card__v { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 4px; font-size: .82rem; font-weight: 700; color: var(--ink-3); } .plant-card .verdict { font-size: .76rem; padding: .18em .55em .18em .4em; } /* ------------------------------------------------------------------ articles */ .progress { position: fixed; left: 0; right: 0; top: 0; z-index: 40; height: 4px; } .progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--ball), var(--clay)); transform-origin: left; transform: scaleX(var(--p, 0)); } .article__head { padding-bottom: 28px; max-width: 920px; margin-inline: auto; text-align: center; } .article__head .crumbs ol { justify-content: center; } .page__head { padding: 48px var(--gutter) 24px; max-width: 920px; } .article__title { font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.02; letter-spacing: -.025em; } .article__dek { font-size: 1.3rem; line-height: 1.5; color: var(--ink-2); max-width: 36em; margin-inline: auto; } .page__head .article__dek { margin-inline: 0; } .article__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; margin-top: 18px; font-size: .92rem; color: var(--ink-2); } .article__meta .byline { margin: 0; justify-content: center; } .article__time { display: inline-flex; align-items: center; gap: .4em; } .article__hero { margin-bottom: 44px; } .article__hero img { width: 100%; border-radius: var(--r-l); aspect-ratio: 21 / 9; object-fit: cover; box-shadow: var(--sh-2); } .article__hero figcaption { margin-top: 8px; font-size: .82rem; color: var(--ink-3); text-align: center; } .article__grid { display: grid; gap: 36px; padding-bottom: 56px; } @media (min-width: 1100px) { .article__grid { grid-template-columns: 220px minmax(0, 700px) 300px; justify-content: space-between; } } .article__side, .article__rail { min-width: 0; } @media (min-width: 1100px) { .article__side .toc, .article__rail { position: sticky; top: 104px; } } @media (max-width: 1099px) { .article__side { order: -1; } } .toc { padding: 18px 20px; border-radius: var(--r); background: var(--cream); font-size: .95rem; } .toc__title { font-weight: 800; color: var(--pine); margin-bottom: 8px; } .toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; } .toc a { color: var(--ink-2); text-decoration: none; } .toc a:hover, .toc a.is-on { color: var(--pine); font-weight: 700; } .toc--inline { margin-bottom: 26px; } .disclosure { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 26px; padding: 12px 16px; border-radius: 14px; background: var(--ball-2); font-size: .9rem; color: var(--pine); } .prose { font-size: 1.125rem; line-height: 1.78; } .prose > * + * { margin-top: 1.05em; } .prose p { margin: 0; } .prose--article > p:first-child::first-letter { float: left; margin: .06em .1em 0 0; font-family: var(--serif); font-size: 4.4em; line-height: .8; color: var(--pine); } .prose h2 { font-size: clamp(1.65rem, 3vw, 2.2rem); margin: 1.9em 0 .5em; } .prose h3 { font-size: 1.4rem; margin: 1.5em 0 .4em; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: .45em; } .prose li::marker { color: var(--moss); } .prose blockquote { margin: 1.6em 0; padding: 20px 26px; border-left: 5px solid var(--ball); background: var(--cream); border-radius: 0 var(--r) var(--r) 0; font-family: var(--serif); font-size: 1.35rem; color: var(--pine); } .prose blockquote p { margin: 0; } .prose img { border-radius: var(--r); } .prose table { width: 100%; border-collapse: collapse; font-size: 1rem; } .prose th, .prose td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; } .prose thead th { background: var(--cream); } .tags a { display: inline-block; margin: 0 6px 6px 0; padding: 4px 12px; border-radius: 999px; background: var(--cream); color: var(--ink); text-decoration: none; font-size: .9rem; } .people-box { display: grid; gap: 14px; margin: 34px 0 20px; } .person { display: flex; gap: 16px; padding: 20px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line); } .person img { width: 64px; height: 64px; border-radius: 50%; flex: none; } .person__role { margin: 0; font-size: .8rem; font-weight: 800; color: var(--ink-3); } .person__name { margin: 0 0 4px; font-family: var(--serif); font-size: 1.22rem; } .person__name a { text-decoration: none; color: var(--pine); } .person__bio { margin: 0; font-size: .94rem; color: var(--ink-2); } .callout { padding: 20px 24px; border-radius: var(--r); background: var(--ball-2); box-shadow: inset 4px 0 0 var(--moss); } .callout--warn { background: var(--toxic-tint); color: #5a1712; box-shadow: inset 4px 0 0 var(--toxic); } .callout p { margin: 0; } .pick { display: grid; gap: 18px; padding: 24px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-1); } @media (min-width: 640px) { .pick { grid-template-columns: 140px 1fr auto; align-items: center; } .pick:not(:has(.pick__img)) { grid-template-columns: 1fr auto; } } .pick__img img { border-radius: 16px; } .pick__best { display: inline-block; margin: 0 0 6px; padding: 3px 10px; border-radius: 999px; background: var(--ball); font-size: .8rem; font-weight: 800; color: var(--pine); } .pick__name { margin: 0 0 6px; font-size: 1.35rem; } .pick__why p { margin: 6px 0 0; font-size: 1rem; color: var(--ink-2); } .pick__buy { display: grid; gap: 8px; justify-items: center; } .pick__price { margin: 0; font-weight: 800; font-size: 1.2rem; } .stars { display: inline-flex; align-items: center; gap: 2px; } .stars i { width: 16px; height: 16px; background: linear-gradient(90deg, #e9a820 calc(var(--f) * 100%), var(--oat) 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.8 5.8 6.2.9-4.5 4.4 1.1 6.2L12 17.3l-5.6 3 1.1-6.2L3 9.7l6.2-.9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.8 5.8 6.2.9-4.5 4.4 1.1 6.2L12 17.3l-5.6 3 1.1-6.2L3 9.7l6.2-.9z'/%3E%3C/svg%3E") center / contain no-repeat; } .stars b { margin-left: 6px; font-size: .9rem; } .compare { overflow-x: auto; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line); } .compare table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .95rem; } .compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; } .compare thead th { background: var(--cream); font-weight: 800; color: var(--pine); } .compare tbody th { font-weight: 700; color: var(--ink-2); } .compare tr:last-child > * { border-bottom: 0; } /* ------------------------------------------------------------------ tools */ .tool-page { padding-bottom: 64px; max-width: 980px; } .tool-page__head { padding: 8px 0 24px; } .tool-page__icon { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 18px; border-radius: 22px; background: var(--ball); color: var(--pine); box-shadow: var(--sh-1); transform: rotate(-6deg); } .tool-page__icon .icon { width: 34px; height: 34px; } .tool { display: grid; gap: 22px; margin-bottom: 34px; } @media (min-width: 840px) { .tool { grid-template-columns: 1fr 1fr; align-items: start; } .tool > .helpline, .tool > .prose, .tool > .dose { grid-column: 1 / -1; } } .tool__form { display: grid; gap: 18px; padding: 28px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-2); } .tool__form--quiz { grid-column: 1 / -1; } .field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; } .field label, .field legend { font-weight: 700; font-size: .98rem; padding: 0; } .field--pair { grid-template-columns: 1fr auto; column-gap: 8px; } .field--pair label { grid-column: 1 / -1; } .seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--cream); } .seg--wrap { display: flex; flex-wrap: wrap; } .seg label { position: relative; cursor: pointer; } .seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .seg span { display: block; padding: .5em 1.05em; border-radius: 12px; font-weight: 700; font-size: .95rem; transition: background-color .2s, color .2s; } .seg input:checked + span { background: var(--pine); color: #fff; } .seg input:focus-visible + span { outline: 3px solid var(--clay); } .tool__out { min-height: 120px; } .result-card { padding: 28px; border-radius: var(--r-l); background: linear-gradient(160deg, #fff, var(--safe-tint)); box-shadow: 0 0 0 1px rgba(23, 104, 59, .2), var(--sh-1); animation: drop-in .35s var(--ease); } .result-card--mild { background: linear-gradient(160deg, #fff, var(--limited-tint)); box-shadow: 0 0 0 1px rgba(135, 83, 0, .22), var(--sh-1); } .result-card--moderate, .result-card--severe { background: linear-gradient(160deg, #fff, var(--toxic-bg)); box-shadow: 0 0 0 1px rgba(173, 36, 25, .25), var(--sh-1); } .result-card__num { margin: 0; font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: 1; color: var(--pine); } .result-card--severe .result-card__num, .result-card--moderate .result-card__num { color: var(--toxic); } .result-card__num small { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--ink-2); } .result-card__alt { color: var(--ink-2); font-weight: 600; margin: 6px 0 0; } .result-card__head { margin: 14px 0 8px; font-weight: 800; font-size: 1.15rem; } .result-card p:last-child { margin: 0; } .matches { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .tool__out:has(.matches) { grid-column: 1 / -1; } @media (min-width: 840px) { .matches { grid-template-columns: 1fr 1fr; } } .match a { display: grid; grid-template-columns: 72px 1fr auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 10px 18px 10px 10px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); animation: drop-in .45s var(--ease) both; transition: box-shadow .2s; } .match:nth-child(2) a { animation-delay: .05s; } .match:nth-child(3) a { animation-delay: .1s; } .match:nth-child(4) a { animation-delay: .15s; } .match:nth-child(5) a { animation-delay: .2s; } .match:nth-child(6) a { animation-delay: .25s; } .match a:hover { box-shadow: 0 0 0 2px var(--moss); } .match__img { grid-row: span 2; width: 72px; height: 72px; border-radius: 16px; overflow: hidden; background: var(--cream); } .match__img img { width: 100%; height: 100%; object-fit: cover; } .match__name { font-family: var(--serif); font-size: 1.28rem; color: var(--pine); } .match__score { grid-row: span 2; font-family: var(--serif); font-size: 1.6rem; color: var(--moss); } .match__why { font-size: .86rem; color: var(--ink-2); } /* The dose gauge. */ .dose { margin: 0; padding: 22px 24px 18px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-1); } .dose__stage { position: relative; aspect-ratio: 16 / 10; max-width: 760px; margin: 0 auto; } .dose__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s; } .dose--gl .dose__gl { opacity: 1; } .dose__still { position: absolute; inset: 4% 8%; display: grid; place-items: center; } .dose--gl .dose__still { visibility: hidden; } .dose__still .dose-art__choc, .dose__still .dose-art__wave { transform: translateY(calc(74px - 162px * var(--f, 0))); transition: transform 1s var(--ease); } .dose__marks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; } .dose__marks li { position: absolute; right: 0; bottom: calc(var(--y) * 100%); transform: translateY(50%); padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px var(--line); font-size: .78rem; font-weight: 700; color: var(--ink-2); } .dose__marks li:last-child { color: var(--toxic); } .dose__marks b { color: var(--pine); } .dose figcaption { margin-top: 10px; text-align: center; font-size: .88rem; color: var(--ink-3); } @media (max-width: 640px) { .dose__marks li { font-size: .68rem; padding: 2px 7px; } } /* ------------------------------------------------------------------ search, profile, 404 */ .answer-card { margin-bottom: 36px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-2); display: grid; gap: 12px; justify-items: start; } .answer-card__head { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 0; } .answer-card__text { font-size: 1.15rem; margin: 0; } .results { margin: 0 0 40px; padding: 0; list-style: none; display: grid; gap: 10px; } .result a { display: grid; gap: 3px; padding: 18px 20px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); transition: box-shadow .2s; } .result a:hover { box-shadow: 0 0 0 2px var(--moss); } .result__type { font-size: .78rem; font-weight: 800; color: var(--moss); } .result__title { font-family: var(--serif); font-size: 1.28rem; color: var(--pine); } .result__text { font-size: .95rem; color: var(--ink-2); } .search-page .index-head .ask { max-width: 720px; margin-top: 16px; } .profile { display: grid; gap: 24px; align-items: center; padding: 44px 0; } @media (min-width: 720px) { .profile { grid-template-columns: 150px 1fr; } } .profile__face { width: 150px; height: 150px; border-radius: 50%; box-shadow: var(--sh-2); } .profile__name { font-size: clamp(2.1rem, 4vw, 3.1rem); } .profile__bio { font-size: 1.15rem; color: var(--ink-2); max-width: 44em; } .lost { display: grid; gap: 30px; align-items: center; padding: 60px var(--gutter) 90px; } @media (min-width: 900px) { .lost { grid-template-columns: 1.3fr 1fr; } } .nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 30px 0 60px; } .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--pine); text-decoration: none; font-weight: 700; } .page-numbers.current { background: var(--pine); color: #fff; } .page__body { padding-bottom: 64px; max-width: 800px; margin-left: 0; } /* ------------------------------------------------------------------ ads, newsletter, footer */ .ad { display: grid; place-items: center; margin: 22px auto; min-height: 120px; border-radius: 14px; background: rgba(15, 58, 48, .03); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; } .ref__main > .ad, .ref__rail > .ad { margin: 0; } .ad__label { font-size: .7rem; font-weight: 700; color: #8a8f8d; margin: 6px 0 4px; } .ad--top { min-height: 110px; max-width: 980px; } .ad--inline { min-height: 300px; } .ad--side { min-height: 620px; margin: 0; } .ad--bottom { min-height: 280px; max-width: 980px; } @media (max-width: 760px) { .ad--top, .ad--bottom { min-height: 280px; } } .ad__empty { color: #aeb3b1; font-size: .8rem; } .newsband { position: relative; overflow: hidden; background: var(--ball); padding: clamp(46px, 6vw, 76px) 0; } .newsband::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; border: 40px solid rgba(15, 58, 48, .07); pointer-events: none; } .newsband__in { position: relative; display: grid; gap: 22px; align-items: center; } @media (min-width: 900px) { .newsband__in { grid-template-columns: 1fr 1fr; } } .newsband__title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: .3em; } .newsband__text { margin: 0; color: var(--pine); font-size: 1.1rem; } .signup { display: flex; flex-wrap: wrap; gap: 10px; } .signup__input { flex: 1 1 240px; min-height: 56px; padding: 0 22px; border: 2px solid var(--pine); border-radius: 999px; background: #fff; } .signup .btn { min-height: 56px; background: var(--pine); color: #fff; } .signup .btn:hover { background: var(--pine-2); color: #fff; } .signup__msg { flex-basis: 100%; margin: 0; font-weight: 700; color: var(--pine); } .hp { position: absolute; left: -9999px; } .foot { background: var(--pine); color: #c9ddd5; padding: clamp(54px, 7vw, 86px) 0 32px; font-size: .98rem; } .foot__in { display: grid; gap: 34px; } @media (min-width: 900px) { .foot__in { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .foot__base { grid-column: 1 / -1; } } .foot a { color: #fff; text-decoration: none; } .foot a:hover { color: var(--ball); } .foot__brand p { margin: 14px 0 18px; max-width: 30em; } .foot__head { font-family: var(--sans); font-size: .88rem; font-weight: 800; color: var(--ball); margin-bottom: 12px; } .foot__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .foot__base { display: grid; gap: 6px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .84rem; color: #a3bcb3; } .foot__base p { margin: 0; } .foot .helpline--compact .helpline__lines a { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: none; } .foot .helpline--compact .icon { background: rgba(215, 240, 91, .15); color: var(--ball); } /* Blocks from the editor. */ .alignwide { max-width: 1100px; } .wp-block-image img { border-radius: var(--r); } .has-pine-color { color: var(--pine); } .has-pine-background-color { background: var(--pine); } .has-ball-color { color: var(--ball); } .has-ball-background-color { background: var(--ball); } .has-clay-color { color: var(--clay); } .has-clay-background-color { background: var(--clay); } .has-oat-color { color: var(--oat); } .has-oat-background-color { background: var(--oat); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media print { .top, .alertbar, .newsband, .foot, .ref__rail, .article__rail, .ad, .progress, body::before { display: none !important; } } .ref__main .helpline, .tool .helpline { grid-template-columns: 1fr !important; } .tool-page .article__dek, .index-head .article__dek { margin-inline: 0; } .hero__in > *, .ref-hero__in > *, .breed-hero__in > * { min-width: 0; } /* ------------------------------------------------------------------ product picks (affiliate) */ .picks { display: grid; gap: 16px; } .picks__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; } .picks__head .section-title { margin: 0; } .picks__note { margin: 0; font-size: .82rem; color: var(--ink-3); max-width: 34em; } .picks__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .tool > .picks { grid-column: 1 / -1; } .product { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 8px; padding: 12px 12px 16px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-1); transition: transform .45s var(--spring), box-shadow .3s; } .product:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line-2), var(--sh-2); } .product__img { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--cream), var(--ball-2)); } .product__img img { width: 100%; height: 100%; object-fit: cover; } .product__ph .icon { width: 44px; height: 44px; fill: var(--moss); stroke: none; opacity: .4; } .product__best { justify-self: start; margin: 4px 4px 0; padding: 2px 10px; border-radius: 999px; background: var(--ball); color: var(--pine); font-size: .76rem; font-weight: 800; } .product__name { margin: 0 4px; font-family: var(--sans); font-size: 1.02rem; font-weight: 800; line-height: 1.3; color: var(--ink); } .product .stars { margin: 0 4px; } .product__why { margin: 0 4px; font-size: .9rem; color: var(--ink-2); line-height: 1.5; } .product__pros { margin: 0 4px; padding: 0; list-style: none; display: grid; gap: 3px; font-size: .84rem; color: var(--ink-2); } .product__pros li::before { content: "✓ "; color: var(--safe); font-weight: 800; } .product__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 4px 0; } .product__price { font-weight: 800; color: var(--pine); } .product .btn { min-height: 40px; padding: .5em 1em; font-size: .88rem; } /* ------------------------------------------------------------------ lists and comparisons */ .list-hero { padding-bottom: 28px; background: radial-gradient(70% 90% at 100% 0%, #eef6cf, rgba(238, 246, 207, 0) 60%), linear-gradient(180deg, var(--cream), var(--paper)); } .list-how { display: inline-flex; gap: 10px; align-items: flex-start; margin: 6px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px var(--line); font-size: .92rem; color: var(--ink-2); max-width: 46em; } .list-how .icon { color: var(--safe); margin-top: .15em; } .list-body { display: grid; gap: 34px; padding-top: 28px; padding-bottom: 64px; } .list-body > * { margin: 0; } .ranked { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; } .ranked__item { display: grid; gap: 22px; padding: 14px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-1); } @media (min-width: 760px) { .ranked__item { grid-template-columns: 300px 1fr; align-items: center; } } .ranked__img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; } .ranked__img img, .ranked__img .thumb-fallback { width: 100%; height: 100%; object-fit: cover; } .ranked__body { display: grid; gap: 8px; align-content: start; padding: 4px 10px 8px; } .ranked__body > * { margin: 0; } .ranked__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pine); color: var(--ball); font-family: var(--serif); font-size: 1.2rem; } .ranked__name { font-size: clamp(1.5rem, 2.4vw, 1.9rem); } .ranked__name a { color: var(--pine); text-decoration: none; } .ranked__temper { color: var(--ink-2); font-weight: 600; } .ranked__traits { display: grid; gap: 5px; max-width: 420px; } .ranked__traits .trait { grid-template-columns: 11em 1fr; } .ranked__excerpt { color: var(--ink-2); font-size: 1rem; } .foods--list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .chips-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .list-group { margin-bottom: 40px; } .list-tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .list-tile { display: grid; gap: 10px; padding: 16px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-1); color: var(--ink); text-decoration: none; transition: transform .45s var(--spring); } .list-tile:hover { transform: translateY(-4px); color: var(--ink); } .list-tile__imgs { display: flex; } .list-tile__imgs > span { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: var(--sh-1); margin-right: -12px; background: var(--cream); } .list-tile__imgs img, .list-tile__imgs .food-tile, .list-tile__imgs .thumb-fallback { width: 100%; height: 100%; min-height: 0; object-fit: cover; } .list-tile__imgs .food-tile span { font-size: 1.4rem; } .list-tile__title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; color: var(--pine); } .list-tile__count { font-size: .85rem; font-weight: 700; color: var(--ink-3); } .ref__title .vs, .versus__badge { font-family: var(--sans); font-weight: 800; color: var(--clay); } .ref__title .vs { font-size: .5em; vertical-align: middle; margin: 0 .2em; } .versus { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; } .versus__card { display: grid; gap: 6px; text-decoration: none; color: var(--ink); } .versus__img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-2); } .versus__img img, .versus__img .thumb-fallback { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .versus__card:hover img { transform: scale(1.04); } .versus__name { font-family: var(--serif); font-size: 1.5rem; color: var(--pine); } .versus__temper { color: var(--ink-2); font-size: .95rem; } .versus__badge { position: absolute; left: 50%; top: calc(50% - 30px); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--ball); color: var(--pine); font-size: 1.2rem; box-shadow: 0 0 0 6px var(--paper), var(--sh-2); } .compare-page { display: grid; gap: 36px; padding-top: 30px; padding-bottom: 64px; } .compare-page > * { margin: 0; } .coats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .choose h2 { font-family: var(--sans); font-weight: 800; font-size: 1.05rem; margin: 0 0 10px; } .pc__col--alt { background: var(--cream); box-shadow: 0 0 0 1px var(--line); } .compare--vs td { width: 36%; } .compare--vs td.is-more .dots i.on { background: var(--clay); } .similar__vs { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line-2); font-family: var(--sans); font-size: .76rem; font-weight: 800; color: var(--pine); text-decoration: none; } .similar__vs:hover { background: var(--ball); } /* ------------------------------------------------------------------ symptoms and hazards */ .ref__title-sub { display: block; margin-top: .15em; font-size: .52em; line-height: 1.2; color: var(--ink-2); letter-spacing: -.01em; } .urgency { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 6px 0 16px; } .urgency__bar { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; } .urgency__bar i { height: 10px; border-radius: 5px; background: var(--oat); } .urgency--monitor .urgency__bar i.on { background: var(--safe); } .urgency--soon .urgency__bar i.on { background: #d49a24; } .urgency--emergency .urgency__bar i.on { background: var(--toxic); } .signs-card { display: grid; gap: 14px; align-content: start; padding: 26px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 2px rgba(173, 36, 25, .25), var(--sh-2); } .signs-card__title { display: flex; align-items: center; gap: .5em; margin: 0; font-family: var(--serif); font-size: 1.4rem; color: var(--toxic); } .signs-card .btn { justify-self: start; } .bullets { margin: 0; padding-left: 1.1em; display: grid; gap: 7px; } .bullets li::marker { color: var(--moss); } .steps--calm li::before { background: var(--pine); } .calc-cta--light { background: linear-gradient(135deg, #fff, var(--ball-2)); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line), var(--sh-1); } .calc-cta--light:hover { color: var(--ink-2); } .calc-cta--light b { color: var(--pine); } .calc-cta--light em { color: var(--moss); } @media (min-width: 640px) { .calc-cta--light { grid-template-columns: 72px 1fr; } } .calc-cta__icon { display: grid !important; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--pine); color: var(--ball); } .calc-cta__icon .icon { width: 32px; height: 32px; } .udot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .udot--emergency { background: var(--toxic); } .udot--soon { background: #d49a24; } .udot--monitor { background: var(--safe); } .hazard-art { position: relative; display: grid; place-items: center; align-content: center; gap: 16px; aspect-ratio: 1; border-radius: 50% 50% var(--r-l) var(--r-l) / 40% 40% var(--r-l) var(--r-l); background: radial-gradient(70% 60% at 50% 35%, #fff, var(--cream)); box-shadow: var(--sh-3); overflow: hidden; } .hazard-art--toxic { background: radial-gradient(70% 60% at 50% 35%, #fff, #fbd9d2); } .hazard-art--limited { background: radial-gradient(70% 60% at 50% 35%, #fff, #fae6b8); } .hazard-art::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 2px dashed rgba(15, 58, 48, .15); } .hazard-art__icon { display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 30%; background: var(--pine); color: var(--ball); transform: rotate(-8deg); box-shadow: var(--sh-2); } .hazard-art__icon .icon { width: 50%; height: 50%; stroke-width: 1.5; } .hazard-art__label { position: relative; max-width: 80%; padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: var(--sh-1); font-size: .85rem; font-weight: 700; text-align: center; color: var(--ink-2); } .ref-list { margin: 0 0 30px; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .ref-list li[hidden] { display: none; } .ref-card { display: flex; gap: 16px; align-items: flex-start; height: 100%; padding: 18px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-1); color: var(--ink); text-decoration: none; transition: transform .45s var(--spring), box-shadow .2s; } .ref-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--moss), var(--sh-2); color: var(--ink); } .ref-card--emergency { box-shadow: inset 4px 0 0 var(--toxic), 0 0 0 1px var(--line), var(--sh-1); } .ref-card__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 16px; background: var(--cream); color: var(--pine); } .ref-card__icon .icon { width: 24px; height: 24px; } .ref-card__body { display: grid; gap: 6px; } .ref-card__name { font-family: var(--serif); font-size: 1.28rem; line-height: 1.2; color: var(--pine); } .ref-card__text { font-size: .93rem; color: var(--ink-2); line-height: 1.5; } .ref-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .ref-card__meta small { font-size: .76rem; font-weight: 700; color: var(--ink-3); } .spacer { height: 48px; } /* ------------------------------------------------------------------ tools, second set */ .tool-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .tool-grid .bento__card--choc { min-height: 220px; } .checklist { display: grid; gap: 6px; } @media (min-width: 700px) { .checklist { grid-template-columns: 1fr 1fr; } } .checklist label { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--cream); cursor: pointer; font-size: .92rem; line-height: 1.4; transition: background-color .2s, box-shadow .2s; } .checklist input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--toxic); flex: none; } .checklist label:has(input:checked) { background: var(--toxic-tint); box-shadow: 0 0 0 2px var(--toxic); } .seg--stack { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 520px) { .seg--stack { grid-template-columns: 1fr; } } .seg--stack span { text-align: center; } .tool__hint { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: var(--r-l); background: var(--cream); color: var(--ink-2); } .tool__hint .icon { width: 28px; height: 28px; flex: none; color: var(--moss); } .tool__hint p { margin: 0; } .triage .verdict { margin-bottom: 10px; } .triage__head { font-size: clamp(2rem, 4vw, 2.8rem) !important; } .result-card--low { background: linear-gradient(160deg, #fff, var(--safe-tint)); } .bcs-scale { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; margin: 14px 0 4px; } .bcs-scale i { height: 12px; border-radius: 4px; opacity: .3; } .bcs-scale i.on { opacity: 1; transform: scaleY(1.6); } .bcs-scale--u { background: #d49a24; } .bcs-scale--i { background: var(--safe); } .bcs-scale--o { background: #d49a24; } .bcs-scale--x { background: var(--toxic); } .grow { height: 12px; margin: 14px 0 0; border-radius: 6px; background: var(--oat); overflow: hidden; } .grow span { display: block; height: 100%; width: var(--p); border-radius: 6px; background: linear-gradient(90deg, var(--ball), var(--moss)); } .costs { margin: 16px 0; padding: 0; list-style: none; display: grid; gap: 10px; } .costs li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: .92rem; } .costs__label { color: var(--ink-2); } .costs__v { font-weight: 800; color: var(--pine); text-align: right; } .costs__bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--oat); overflow: hidden; } .costs__bar i { display: block; height: 100%; border-radius: 4px; background: var(--moss); } .timeline { margin: 14px 0 18px; padding: 0 0 0 22px; list-style: none; border-left: 2px solid var(--oat-2); display: grid; gap: 18px; } .timeline li { position: relative; display: grid; gap: 2px; } .timeline li::before { content: ""; position: absolute; left: -30px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--ball); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--moss); } .timeline li.is-past { opacity: .55; } .timeline li.is-past::before { background: var(--oat-2); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--oat-2); } .timeline time { font-size: .82rem; font-weight: 800; color: var(--moss); } .timeline strong { color: var(--pine); } .timeline span { font-size: .92rem; color: var(--ink-2); line-height: 1.5; } /* ------------------------------------------------------------------ my pet */ .top__pet { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 1em; border: 0; border-radius: 999px; background: var(--ball-2); color: var(--pine); font-weight: 700; cursor: pointer; transition: background-color .2s, transform .3s var(--spring); } .top__pet:hover { background: var(--ball); transform: translateY(-1px); } .top__pet .icon { fill: currentColor; stroke: none; } .has-pet .top__pet { background: var(--ball); } @media (max-width: 560px) { .top__pet span { display: none; } .top__pet { padding: 0 .8em; } } .petform { display: grid; gap: 16px; } .petform__lede { color: var(--ink-2); font-size: .95rem; } .petform__actions { display: flex; flex-wrap: wrap; gap: 10px; } .petform__msg { margin: 0; font-weight: 700; color: var(--moss); } .petform input[type=text], .petform input[type=date], .petform input[type=number], .petform select { min-height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; } .petnote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 12px 18px; border-radius: 14px; background: var(--ball-2); color: var(--pine); font-weight: 600; font-size: .95rem; } .petnote .icon { color: var(--safe); } .petnote--diff { background: var(--limited-tint); box-shadow: 0 0 0 1px rgba(135, 83, 0, .2); } .signup__pets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; margin: 0; padding: 0; border: 0; font-size: .9rem; color: var(--pine); } .signup__pets legend { float: left; margin-right: 6px; padding: 0; font-weight: 700; } .signup__pets label { position: relative; cursor: pointer; } .signup__pets input { position: absolute; opacity: 0; inset: 0; } .signup__pets span { display: block; padding: .3em .9em; border-radius: 999px; border: 1.5px solid rgba(15, 58, 48, .3); font-weight: 700; } .signup__pets input:checked + span { background: var(--pine); border-color: var(--pine); color: #fff; } .signup__pets input:focus-visible + span { outline: 3px solid var(--clay); } .autolink { text-decoration-style: dotted; text-decoration-thickness: .08em; } .block--worry { padding-top: 0; } .worry { display: grid; gap: 28px; } @media (min-width: 900px) { .worry { grid-template-columns: 1fr 1fr; } } .worry__col { display: grid; gap: 14px; align-content: start; } .worry__title { font-family: var(--sans); font-size: 1rem; font-weight: 800; color: var(--ink-3); margin: 0; } .ref-list--tight { grid-template-columns: 1fr; margin: 0; gap: 10px; } .ref-list--tight .ref-card { padding: 12px 14px; align-items: center; } .tool__form--quiz ~ .tool__out { grid-column: 1 / -1; }