/* ============ Andy for Dogs — marketing site ============ Warm storybook: the booking app's cream + terracotta palette (Fredoka & Karla) as a small multi-page website. Every CTA funnels to the booking app at https://andy.tutobot.com/. */ :root { --cream: #FDF3E3; --cream-deep: #F6E7CE; --ink: #3B2E25; --ink-soft: #7A6A5C; --terra: #E8743B; --terra-deep: #C95A26; --sage: #7FA678; --holiday: #D98A1F; --card: #FFFBF4; --radius: 22px; --shadow: 0 6px 24px rgba(75, 50, 25, 0.10); --shadow-lift: 0 14px 40px rgba(75, 50, 25, 0.16); } * { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x on too: iOS Safari ignores it on alone, which let rotated hero polaroids/stickers open a horizontal scroll on mobile. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { font-family: 'Karla', sans-serif; color: var(--ink); background: radial-gradient(circle at 85% -5%, #FAE3C0 0%, transparent 45%), radial-gradient(circle at -10% 30%, #FBEAD3 0%, transparent 40%), var(--cream); overflow-x: clip; line-height: 1.55; } img { max-width: 100%; display: block; } a { color: var(--terra-deep); } /* Giant ambient paw, same wink as the booking app */ .paw-bg { position: fixed; font-size: 340px; opacity: 0.045; top: -70px; right: -80px; transform: rotate(18deg); pointer-events: none; z-index: 0; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; position: relative; z-index: 1; } /* ---------- header & nav ---------- */ .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; /* vertical only — the shorthand would clobber .wrap's horizontal padding */ padding-top: 18px; padding-bottom: 6px; } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex-shrink: 0; } .logo-badge { width: 46px; height: 46px; background: var(--terra); border-radius: 15px; display: grid; place-items: center; font-size: 24px; box-shadow: var(--shadow); transform: rotate(-6deg); } .logo-name { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.05; } .nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; } .nav > a { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 15.5px; color: var(--ink); text-decoration: none; transition: color .15s; } .nav > a:hover { color: var(--terra-deep); } .nav > a.insta, .nav > a.music { display: inline-flex; align-items: center; } .nav > a.insta svg, .nav > a.music svg { display: block; } .nav > a.active { color: var(--terra-deep); border-bottom: 2.5px solid var(--terra); padding-bottom: 2px; } .top-cta { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 15px; text-decoration: none; color: var(--terra-deep); border: 2px solid var(--terra); border-radius: 999px; padding: 8px 18px; transition: background .18s, color .18s; white-space: nowrap; } .nav > a.top-cta { color: var(--terra-deep); } .top-cta:hover { background: var(--terra); color: #fff !important; } /* ---------- hero (home) ---------- */ .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; /* vertical only — the shorthand would clobber .wrap's horizontal padding */ padding-top: 48px; padding-bottom: 72px; } .hero h1 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.08; letter-spacing: -0.5px; } .hero h1 em { font-style: normal; color: var(--terra-deep); position: relative; white-space: nowrap; } /* hand-drawn underline squiggle */ .hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 Q 20 2, 40 6 T 78 5 T 118 6' fill='none' stroke='%23E8743B' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } .hero-sub { margin: 20px 0 28px; font-size: 19px; color: var(--ink-soft); max-width: 46ch; } .hero-sub strong { color: var(--ink); } .big-cta { display: inline-flex; align-items: center; gap: 10px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 20px; color: #fff; text-decoration: none; background: linear-gradient(180deg, var(--terra), var(--terra-deep)); border-radius: 999px; padding: 17px 34px; box-shadow: 0 10px 26px rgba(201, 90, 38, 0.35); transition: transform .18s, box-shadow .18s; } .big-cta .paw { transition: transform .3s; } .big-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(201, 90, 38, 0.42); } .big-cta:hover .paw { transform: rotate(-14deg) scale(1.15); } .big-cta:active { transform: translateY(0); } .hero-hint { margin-top: 12px; font-size: 14px; color: var(--ink-soft); } .trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .chip { background: var(--card); border: 1.5px solid var(--cream-deep); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 700; box-shadow: 0 3px 10px rgba(75, 50, 25, 0.06); /* A chip long enough to outgrow its column has to wrap inside the pill. It used to be nowrap, which made the hero grid track size to the widest chip instead — on a phone that pushed the whole column past the viewport, and body.home's overflow-x: clip swallowed the evidence rather than showing a scrollbar. flex-shrink: 0 keeps the short chips on one line (they never need to shrink), and max-width caps the long one at the row so it breaks over two lines instead of blowing the layout out. */ white-space: normal; flex: 0 0 auto; max-width: 100%; } .chip .star { color: var(--terra); } /* polaroid cluster */ .hero-photos { position: relative; height: 480px; } .polaroid { position: absolute; background: #fff; padding: 10px 10px 14px; border-radius: 14px; box-shadow: var(--shadow-lift); transition: transform .25s; } .polaroid img { border-radius: 8px; object-fit: cover; } /* A clip in a polaroid: same frame, same rounded print, the video filling the wrap the way the marquee's clips fill their tiles. The play button is the marquee's own (.marquee-play), so the two read as one control. */ .polaroid .hero-clip { position: relative; overflow: hidden; border-radius: 8px; background: #000; } .polaroid .hero-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .polaroid .hero-clip.playing .marquee-play { inset: auto 8px 8px auto; width: 34px; height: 34px; padding: 0; font-size: 12px; } .polaroid figcaption { font-family: 'Fredoka', sans-serif; font-size: 14px; color: var(--ink-soft); text-align: center; padding-top: 8px; } .polaroid:hover { transform: scale(1.04) rotate(0deg) !important; z-index: 5; } .p1 { width: 240px; top: 4%; left: 4%; transform: rotate(-7deg); z-index: 2; } .p1 img, .p1 .hero-clip { height: 270px; width: 220px; } .p2 { width: 210px; top: 34%; right: 2%; transform: rotate(5deg); z-index: 3; } .p2 img, .p2 .hero-clip { height: 230px; width: 190px; } .p3 { width: 190px; bottom: 0; left: 18%; transform: rotate(3deg); z-index: 1; } .p3 img, .p3 .hero-clip { height: 200px; width: 170px; } .hero-sticker { position: absolute; top: -6px; right: 12%; z-index: 4; background: var(--sage); color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 15px; line-height: 1.25; text-align: center; border-radius: 50%; width: 118px; height: 118px; display: grid; place-items: center; padding: 10px; transform: rotate(9deg); box-shadow: var(--shadow); } /* ---------- wavy divider ---------- */ .wave { display: block; width: 100%; height: 44px; } /* ---------- sections ---------- */ section { position: relative; } .band { background: var(--cream-deep); } .sec-head { text-align: center; max-width: 640px; margin: 0 auto 42px; } .sec-kicker { font-family: 'Fredoka', sans-serif; font-weight: 500; color: var(--terra-deep); text-transform: uppercase; letter-spacing: 2.5px; font-size: 13px; } .sec-head h2 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; margin-top: 8px; } .sec-head p { margin-top: 12px; color: var(--ink-soft); font-size: 17px; } /* services */ .services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; padding-bottom: 64px; max-width: 780px; margin: 0 auto; } .service { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 28px; border-top: 6px solid var(--terra); } .service.walks { border-top-color: var(--sage); } .service.hikes { border-top-color: var(--holiday); } .service-emoji { font-size: 40px; } .service h3 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 26px; margin: 10px 0 4px; } .service .lead { color: var(--terra-deep); font-weight: 700; } .service.walks .lead { color: var(--sage); } .service.hikes .lead { color: var(--holiday); } .service p { margin-top: 10px; color: var(--ink-soft); } .service .more { display: inline-block; margin-top: 14px; font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 15px; } .addons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .addons span { background: var(--cream); border-radius: 999px; font-size: 13.5px; font-weight: 700; padding: 6px 12px; } /* steps (home how-it-works) */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding-bottom: 26px; } .step { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 26px; text-align: center; } .step-num { font-family: 'Fredoka', sans-serif; font-weight: 600; width: 44px; height: 44px; border-radius: 50%; background: var(--terra); color: #fff; display: inline-grid; place-items: center; font-size: 20px; margin-bottom: 14px; } .step h3 { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 20px; margin-bottom: 8px; } .step p { color: var(--ink-soft); font-size: 15.5px; } .steps-hint { text-align: center; color: var(--ink-soft); font-size: 15px; padding-bottom: 60px; } /* about */ .about { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; padding: 64px 0; } /* Kit shot inside an .acard — the Garmin explainer's photo. Floats beside the opening paragraph where the card is wide enough to carry text next to it, and drops to a plain stacked block on a phone, where a 44% float would leave a column three words wide. */ .gear-shot { margin: 0 0 16px; float: right; width: 44%; max-width: 320px; margin-left: 22px; } .gear-shot img { width: 100%; /* Fixed frame so the card keeps its shape whatever crop arrives, but contain rather than cover: the shot is a product render on white, and cover would slice the antenna off the top and the collar cable off the side. The white backdrop makes the letterboxing invisible. */ aspect-ratio: 4 / 3; height: auto; object-fit: contain; background: #fff; border-radius: 14px; border: 5px solid #fff; box-shadow: var(--shadow); display: block; } .gear-shot figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); text-align: center; } @media (max-width: 620px) { .gear-shot { float: none; width: 100%; max-width: none; margin-left: 0; margin-bottom: 18px; } } /* ---------- What's included in every hike ---------- The four tiles in partials/hike-included.html. On the home page they run four across under the hero as their own section; inside an .acard on /group-hikes/ (.included-card) the column is too narrow for four, so the grid goes two-by-two and the tiles drop their shadow — a card inside a card reads better as a flat cream tile. The booking app has its own copy of these rules, at its own scale, in book/styles.css. */ .included-sec { padding-bottom: 64px; } .included-sec .sec-head { margin-bottom: 30px; } .incl-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .incl-item { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 22px; display: flex; flex-direction: column; gap: 6px; } .incl-emoji { font-size: 32px; line-height: 1; margin-bottom: 8px; } .incl-item strong { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 18.5px; line-height: 1.25; } .incl-item span:last-child { color: var(--ink-soft); font-size: 15px; line-height: 1.5; } .included-card h2 { margin-bottom: 16px; } .included-card .incl-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .included-card .incl-item { background: var(--cream); box-shadow: none; border: 1.5px solid var(--cream-deep); border-radius: 16px; padding: 18px 16px; } .included-card .incl-emoji { font-size: 28px; margin-bottom: 4px; } .included-card .incl-item strong { font-size: 17px; } .included-card .incl-item span:last-child { font-size: 14.5px; } @media (max-width: 860px) { .incl-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .incl-item { padding: 20px 18px; } } @media (max-width: 520px) { .incl-grid, .included-card .incl-grid { grid-template-columns: 1fr; } } /* ---------- Pricing infographic ---------- partials/pricing-hikes.html and pricing-walks.html — three rate tiles (one day a week, two or more, the extra-dog surcharge), a "your week, priced" ladder with a mini-week of dots per rung, and three footnotes. Every number in them is a {{$…}} token the server fills from config/pricing.json. On the home page the block runs full width as its own section (.pricing-sec); inside an .acard on the service pages (.pricing-card) the tiles go flat cream, the same card-inside-a-card treatment the included tiles get. */ .pricing-sec { padding-bottom: 72px; } .pricing-sec .sec-head { margin-bottom: 30px; } .price-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } .price-tier { position: relative; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 6px; text-align: center; } .price-tier.is-best { background: var(--terra); color: #fff; box-shadow: var(--shadow-lift); } .price-tier.is-best .price-tier-sub, .price-tier.is-best .price-tier-sub strong { color: #fff; } .price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; background: var(--holiday); color: #fff; border-radius: 999px; padding: 4px 12px; } .price-tier-label { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 17px; line-height: 1.25; } .price-amount { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 52px; line-height: 1; letter-spacing: -1px; margin: 6px 0 4px; } .price-amount sup { font-size: 22px; vertical-align: top; position: relative; top: 8px; margin-right: 2px; letter-spacing: 0; } .price-amount small { font-size: 17px; font-weight: 500; letter-spacing: 0; margin-left: 2px; opacity: 0.85; } .price-tier-sub { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; } .price-tier-sub strong { color: var(--ink); } .price-week { margin-top: 26px; } .price-week-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 18px; text-align: center; margin-bottom: 14px; } .price-week-title span { display: inline-block; margin-left: 8px; font-family: 'Karla', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--ink-soft); background: var(--cream-deep); border-radius: 999px; padding: 3px 10px; vertical-align: middle; } .price-ladder { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .price-ladder li { flex: 1 1 120px; max-width: 190px; background: var(--card); border: 1.5px solid var(--cream-deep); border-radius: 16px; padding: 14px 10px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; } .price-ladder li:last-child { border-color: var(--sage); } .price-days { display: flex; gap: 4px; margin-bottom: 4px; } .price-days i { width: 11px; height: 11px; border-radius: 50%; background: var(--cream-deep); border: 1.5px solid #E8D9BD; } .price-days i.on { background: var(--terra); border-color: var(--terra); } /* weekend dots: a softer ring while empty, sage once picked — the walking group's weekend days read as their own thing without needing a legend */ .price-days i.we { border-style: dashed; border-color: var(--sage); background: transparent; } .price-days i.we.on { background: var(--sage); border-style: solid; } .price-ladder strong { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 14.5px; color: var(--ink-soft); } .price-ladder em { font-style: normal; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--ink); } .price-ladder em small { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); margin-left: 1px; } .price-week-note { text-align: center; color: var(--ink-soft); font-size: 14px; margin-top: 12px; } .price-notes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; color: var(--ink-soft); font-size: 14.5px; font-weight: 500; } /* the block's own booking button, deep-linked to its service */ .price-cta { text-align: center; margin-top: 26px; } .price-cta-hint { display: block; margin-top: 10px; color: var(--ink-soft); font-size: 13.5px; } /* inside an article card: flat cream tiles, tighter scale */ .pricing-card h2 { margin-bottom: 18px; } /* room for the "most popular" badge, which hangs above its tile */ .pricing-card .price-tiers { gap: 12px; margin-top: 22px; } .pricing-card .price-tier { background: var(--cream); box-shadow: none; border: 1.5px solid var(--cream-deep); border-radius: 16px; padding: 22px 14px 18px; } .pricing-card .price-tier.is-best { background: var(--terra); border-color: var(--terra); } .pricing-card .price-amount { font-size: 42px; } .pricing-card .price-amount sup { font-size: 18px; top: 6px; } .pricing-card .price-tier-label { font-size: 15.5px; } .pricing-card .price-tier-sub { font-size: 13.5px; } /* one row of equal rungs at the article width — seven for walks, five for hikes — with smaller dots so a seven-day mini-week still fits a rung */ .pricing-card .price-ladder { gap: 8px; } .pricing-card .price-ladder li { flex: 1 1 0; min-width: 0; max-width: none; padding: 12px 4px 10px; } .pricing-card .price-days { gap: 3px; } .pricing-card .price-days i { width: 9px; height: 9px; } .pricing-card .price-ladder em { font-size: 19px; } .pricing-card .price-notes { font-size: 13.5px; gap: 6px 16px; } /* .acard p is soft ink; the week title inside the card is a heading, not body */ .pricing-card .price-week-title { color: var(--ink); margin-top: 0; } .pricing-card .price-week-note { margin-top: 10px; } .pricing-card .price-cta { margin-top: 22px; } .pricing-card .price-cta .big-cta { font-size: 18px; padding: 14px 28px; } /* .acard a paints links terracotta — the button stays white-on-terracotta */ .pricing-card .price-cta .big-cta { color: #fff; } /* .acard p would otherwise soften and push this block like body copy */ .pricing-card .price-cta { color: inherit; } @media (max-width: 860px) { /* stacked: the gap has to clear the badge hanging off the middle tile */ .price-tiers, .pricing-card .price-tiers { grid-template-columns: 1fr; gap: 22px; } .price-amount { font-size: 46px; } } @media (max-width: 520px) { .price-ladder li, .pricing-card .price-ladder li { flex: 1 1 92px; max-width: 190px; padding: 10px 6px 8px; } .price-ladder em { font-size: 19px; } .price-week-title span { display: block; width: fit-content; margin: 8px auto 0; } } .about-photo { position: relative; justify-self: center; } .about-photo img { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; border: 8px solid #fff; box-shadow: var(--shadow-lift); } .about-photo::after { content: "🐾"; position: absolute; bottom: 4px; right: 4px; background: var(--terra); border-radius: 50%; width: 58px; height: 58px; display: grid; place-items: center; font-size: 26px; box-shadow: var(--shadow); } .about h2 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 16px; } .about p { color: var(--ink-soft); margin-bottom: 12px; max-width: 62ch; } .about p strong { color: var(--ink); } .about .signoff { font-family: 'Fredoka', sans-serif; color: var(--ink); font-size: 18px; } /* photo marquee */ .marquee-sec { padding: 56px 0 64px; overflow: hidden; } .marquee { display: flex; gap: 18px; width: max-content; animation: drift 55s linear infinite; padding-block: 8px; } .marquee:hover { animation-play-state: paused; } /* Held still while a clip plays — the strip must not carry a playing video off screen. site.js toggles the class. */ .marquee.paused { animation-play-state: paused; } /* The strip ships empty — site.js fills it with report covers (and preset photos only where reports run short), so nothing ever paints underneath the real content. Until it's filled (slow fetch, no JS, ancient browser) the whole section stays out of the page rather than showing a heading over a blank band. Browsers without :has() show that heading briefly — harmless, and they're rare. */ .marquee-sec:has(.marquee:empty) { display: none; } /* Direct children only (> img, not img): a clip tile wraps its poster and video in .marquee-clip, and the frame styling belongs to the tile, never to the media nested inside it. */ .marquee > img, .marquee-clip { width: 190px; height: 250px; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow); border: 5px solid #fff; } .marquee > img:nth-child(odd), .marquee-clip:nth-child(odd) { transform: rotate(-2deg); } .marquee > img:nth-child(even), .marquee-clip:nth-child(even) { transform: rotate(2deg); } /* A report clip in the strip: poster at rest, chromeless playback on tap — no native controls ever, the one round button is the whole UI. */ .marquee-clip { position: relative; overflow: hidden; background: #000; flex: none; } .marquee-clip video, .marquee-clip > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .marquee-play { position: absolute; inset: 0; margin: auto; z-index: 1; width: 54px; height: 54px; padding: 0 0 0 4px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(38,36,31,.55); color: #fff; cursor: pointer; } .marquee-play:hover { background: rgba(38,36,31,.8); } /* While playing, the button steps out of the picture into the corner and turns into the stop control — the only chrome on the clip either way. */ .marquee-clip.playing .marquee-play { inset: auto 8px 8px auto; width: 34px; height: 34px; padding: 0; font-size: 12px; } @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* reviews */ .reviews-sec { padding: 64px 0 30px; } .reviews { columns: 3; column-gap: 24px; } .review { break-inside: avoid; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 24px 20px; margin-bottom: 24px; } .review .stars { color: var(--terra); letter-spacing: 2px; font-size: 15px; } .review blockquote { margin: 10px 0 14px; font-size: 15.5px; color: var(--ink); } .review figcaption { font-size: 13.5px; color: var(--ink-soft); font-weight: 700; } .reviews-more { text-align: center; color: var(--ink-soft); font-size: 15px; padding: 6px 0 60px; } .reviews-more a { font-weight: 700; } /* area */ .area-sec { padding: 64px 0; } .towns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; margin: 0 auto; } .towns span { background: var(--card); border: 1.5px solid var(--cream-deep); border-radius: 999px; padding: 8px 16px; font-size: 14.5px; font-weight: 700; } .area-note { text-align: center; color: var(--ink-soft); font-size: 15px; margin-top: 20px; } /* final CTA */ .cta-panel { background: linear-gradient(160deg, var(--terra), var(--terra-deep)); border-radius: 28px; color: #fff; text-align: center; padding: 60px 30px; margin: 10px 0 70px; position: relative; overflow: hidden; box-shadow: 0 18px 50px rgba(201, 90, 38, 0.35); } .cta-panel::before, .cta-panel::after { content: "🐾"; position: absolute; font-size: 150px; opacity: 0.14; } .cta-panel::before { top: -34px; left: -14px; transform: rotate(-20deg); } .cta-panel::after { bottom: -40px; right: -10px; transform: rotate(16deg); } .cta-panel h2 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: clamp(28px, 3.8vw, 42px); line-height: 1.15; } .cta-panel p { margin: 12px auto 28px; max-width: 46ch; opacity: 0.92; font-size: 17px; } .cta-panel .big-cta { background: #fff; color: var(--terra-deep); box-shadow: 0 10px 26px rgba(60, 25, 5, 0.28); } /* ---------- subpages ---------- */ .page-head { text-align: center; max-width: 760px; margin: 0 auto; padding: 38px 22px 30px; position: relative; z-index: 1; } .page-head .page-emoji { font-size: 46px; } .page-head h1 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.12; margin-top: 8px; } .page-head p { color: var(--ink-soft); font-size: 18px; margin-top: 12px; } /* the hero's trust chips reused under a page head, which is centered */ .page-head .trust-row { justify-content: center; margin-top: 18px; } .article-col { max-width: 740px; margin: 0 auto; padding: 6px 22px 30px; position: relative; z-index: 1; } .acard { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px; margin-bottom: 22px; } .acard h2 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 21px; margin-bottom: 8px; } .acard p { color: var(--ink-soft); margin-top: 8px; } .acard p strong, .acard li strong { color: var(--ink); } .acard a { color: var(--terra-deep); font-weight: 700; } .tips { margin: 6px 0 0; padding-left: 1.25rem; } .tips li { margin-bottom: 10px; } .tips li::marker { content: "🐾 "; } .steps-ol { margin: 6px 0 0; padding-left: 1.4rem; } .steps-ol li { margin-bottom: 10px; } .steps-ol li strong { font-family: 'Fredoka', sans-serif; font-weight: 600; } .faq dt { font-family: 'Fredoka', sans-serif; font-weight: 600; margin-top: 16px; } .faq dt:first-child { margin-top: 0; } .faq dd { margin: 4px 0 0; color: var(--ink-soft); } /* ---------- hikes vs daycare comparison ---------- */ /* The section is a cream-deep band with its own waves (both live in the partial), so it reads as a stop on the page instead of two loose cards. vertical only — the shorthand would clobber .wrap's horizontal padding */ .compare .wrap { padding-top: 58px; padding-bottom: 62px; } .compare .sec-head { max-width: 700px; margin-bottom: 38px; } /* the headline is long enough that the default break lands lopsided */ .compare .sec-head h2 { text-wrap: balance; } .compare-table-wrap { max-width: 980px; margin: 0 auto; } .compare-table { width: 100%; border-collapse: separate; /* separate: .col-win needs its own rounded corners */ border-spacing: 0; /* fixed: auto layout hands the wordier column extra width, which reads as a thumb on the scale — the two options should get identical room */ table-layout: fixed; text-align: left; } /* the caption is for screen readers — the visible

already says it / .compare-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .compare-table th, .compare-table td { vertical-align: top; } .compare-corner { width: 20%; } .compare-table thead th { width: 40%; font-weight: 400; / .compare-title carries the weight / padding: 20px 22px 16px; } / row labels: the dimension being compared / .compare-table tbody th { padding: 17px 20px 17px 0; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 16.5px; color: var(--ink); border-top: 1px solid rgba(122, 106, 92, 0.22); } .compare-table tbody td { padding: 17px 22px; font-size: 15.5px; color: var(--ink-soft); border-top: 1px solid rgba(122, 106, 92, 0.22); } / the hikes column reads as one lit panel running the height of the table / .compare-table .col-win { background: rgba(217, 138, 31, 0.11); color: var(--ink); border-top-color: rgba(217, 138, 31, 0.3); } .compare-table thead .col-win { position: relative; overflow: hidden; / clips the rail to the rounded top corners / border-radius: 18px 18px 0 0; } / gold-to-terracotta rail capping the hikes column / .compare-table thead .col-win::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--holiday), var(--terra)); } .compare-table tbody tr:last-child .col-win { border-radius: 0 0 18px 18px; } / the daycare column sits back so the eye lands on hikes first / .compare-table thead th:not(.col-win) .compare-title { color: var(--ink-soft); } .compare-foot { text-align: center; max-width: 780px; margin: 30px auto 0; color: var(--ink-soft); font-size: 16px; } .compare-foot a { font-weight: 700; white-space: nowrap; } .compare-badge { display: inline-block; font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 13px; border-radius: 999px; padding: 5px 13px; / deeper than --cream-deep so the pill still reads against the band / background: #EEDCBC; color: var(--ink-soft); } .col-win .compare-badge { background: var(--holiday); color: #fff; } .compare-title { display: flex; align-items: center; gap: 9px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 21px; color: var(--ink); margin: 12px 0 2px; } .compare-title .emoji { font-size: 23px; } .article-updated { font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; } / guides grid / .guides { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin: 0 auto; } .guide-link { display: flex; align-items: flex-start; gap: 14px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; } .guide-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .guide-emoji { font-size: 26px; line-height: 1.2; } .guide-text { display: flex; flex-direction: column; gap: 3px; } .guide-text strong { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 16.5px; } .guide-text small { color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; } / footer / .footer { text-align: center; color: var(--ink-soft); font-size: 13.5px; padding: 0 22px 46px; line-height: 1.8; position: relative; z-index: 1; } .footer a { color: inherit; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-bottom: 14px; } .footer-nav a { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 14.5px; color: var(--ink); text-decoration: none; } .footer-nav a:hover { color: var(--terra-deep); } .footer .bone { margin-top: 10px; } .footer .footer-insta { margin-top: 8px; } .footer .footer-insta a { font-family: 'Fredoka', sans-serif; font-weight: 500; color: var(--ink); text-decoration: none; } .footer .footer-insta a:hover { color: var(--terra-deep); } / sticky mobile CTA (home only) / .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(253, 243, 227, 0.92); backdrop-filter: blur(8px); border-top: 1.5px solid var(--cream-deep); z-index: 50; display: none; transform: translateY(110%); transition: transform .3s; } .sticky-cta.show { transform: translateY(0); } .sticky-cta .big-cta { width: 100%; justify-content: center; font-size: 18px; padding: 14px 20px; } / scroll reveal (JS adds .in when visible; no-JS = visible) / .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.in { opacity: 1; transform: none; } / the comparison table lands first, then its closing line a beat later / .js .compare-foot.reveal { transition-delay: .16s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .js .reveal { opacity: 1; transform: none; transition: none; } .big-cta, .polaroid { transition: none; } } / ---------- mobile ---------- / @media (max-width: 860px) { .top { flex-direction: column; gap: 12px; padding-bottom: 4px; } / width: 100% so the row wraps inside the page padding — the column container's centered items otherwise size to max-content and overflow. / .nav { justify-content: center; gap: 8px 16px; width: 100%; } .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 30px; padding-bottom: 54px; text-align: center; } .hero-sub { margin-inline: auto; } .trust-row { justify-content: center; } .hero-photos { height: 400px; max-width: 440px; margin: 0 auto; width: 100%; } .p1 { width: 196px; left: 0; } .p1 img, .p1 .hero-clip { height: 210px; width: 176px; } .p2 { width: 176px; right: 0; } .p2 img, .p2 .hero-clip { height: 186px; width: 156px; } .p3 { width: 160px; left: 24%; } .p3 img, .p3 .hero-clip { height: 160px; width: 140px; } .hero-sticker { width: 100px; height: 100px; font-size: 13px; right: 6%; } .services, .steps { grid-template-columns: 1fr; } .compare .wrap { padding-top: 44px; padding-bottom: 48px; } / three columns never fit: each row becomes its own card, with the header row dropped and each cell labelled from its data-label instead / .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: auto; } .compare-table thead { display: none; } .compare-table tbody tr { background: var(--card); border: 2px solid #EDDCBE; border-radius: var(--radius); padding: 16px 18px 18px; margin-bottom: 14px; } .compare-table tbody th { border-top: 0; padding: 0 0 4px; font-size: 18px; } .compare-table tbody td { border-top: 0; margin-top: 10px; padding: 11px 14px 13px; border-radius: 14px; background: #FAF2E4; } / the data-label stands in for the hidden column header, styled as the same pill the header row uses on desktop / .compare-table tbody td::before { content: attr(data-label); / block + fit-content: the pill owns its line, the cell text starts below / display: block; width: fit-content; margin-bottom: 7px; font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 12.5px; border-radius: 999px; padding: 3px 11px; background: var(--cream-deep); color: var(--ink-soft); } .compare-table tbody tr:last-child .col-win, .compare-table tbody td.col-win { border-radius: 14px; } .compare-table tbody td.col-win::before { background: var(--holiday); color: #fff; } .about { grid-template-columns: 1fr; gap: 28px; text-align: center; } .about p { margin-inline: auto; } .reviews { columns: 1; } .guides { grid-template-columns: 1fr; } .sticky-cta { display: block; } / the home page has the sticky bar, so its header pill is redundant there */ .home .nav .top-cta { display: none; } } @media (min-width: 861px) and (max-width: 1024px) { .reviews { columns: 2; } }