.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; } @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; gap: 24px; } } /* --- Beside the form: two plain buttons sitting on the paper ------------- Messenger and Google reviews. No cards: a bordered card holding a bordered pill was a frame inside a frame (Shadie's call, July 2026), so the pill is the only drawn object and the whole row — stars, pill and small print — is the link. Both rows are conditional on Rescue Settings, so nothing here depends on sibling order. */ .contact-alt .ca-head { font-family: 'Caveat', cursive; font-weight: 700; font-size: 30px; color: var(--blue); display: block; margin-bottom: 14px; transform: rotate(-1.5deg); } .contact-alt .ca-row { display: block; text-decoration: none; color: var(--ink); } /* Generous, because there's no frame to separate one row from the next */ .contact-alt .ca-row + .ca-row { margin-top: 36px; } .contact-alt .ca-pill { display: inline-flex; align-items: center; gap: 11px; font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 800; border: 3px solid var(--ink); border-radius: 999px; padding: 11px 22px 11px 12px; box-shadow: 5px 5px 0 var(--ink); transition: transform .15s, box-shadow .15s, background .15s; } .contact-alt .ca-pill.p-blue { background: var(--blue); color: var(--paper); } /* Paper button, like Google's own white one, but with our ink and shadow */ .contact-alt .ca-pill.p-paper { background: #fff; color: var(--ink); } .contact-alt .ca-pill svg { width: 30px; height: 30px; display: block; flex: none; } .contact-alt .ca-arrow { transition: transform .15s; } .contact-alt .ca-row:hover .ca-pill { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); } .contact-alt .ca-row:hover .ca-pill.p-blue { background: var(--blue-dark); } .contact-alt .ca-row:hover .ca-arrow { transform: translateX(3px); } .contact-alt .ca-row:active .ca-pill { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); } /* The focus ring has to wrap the whole row, since the whole row is the link */ .contact-alt .ca-row:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: 18px; } .contact-alt .ca-cap { display: block; font-size: 14px; line-height: 1.5; color: rgba(26,20,16,0.72); margin-top: 12px; max-width: 42ch; } .contact-alt .ca-score { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; } .contact-alt .ca-score .rev-stars { width: 104px; height: auto; display: block; flex: none; } .contact-alt .ca-score strong { font-size: 19px; line-height: 1; } .contact-alt .rev-count { font-size: 13px; color: rgba(26,20,16,0.7); } /* Two copies of the block exist (see parts/contact-alt.php) and CSS decides what shows where; every button appears exactly once at any width. Desktop: both beside the form, and the after-map band is gone entirely. Phones: the pair splits. Messenger stays under the form (it answers the form, and a quick question shouldn't need a scroll past the whole shop section), the review goes after the shop details and the map, where asking for a good word doesn't interrupt someone trying to get in touch. No border-bottom on the phone-only band: the shop section above already ends in one, and the footer follows. */ .contact-alt.ca-below-map { display: none; } .alt-below-map { display: none; padding: 44px 0 56px; } .contact-alt .ca-head-alt { display: none; } @media (max-width: 760px) { /* Under the form: Messenger only. If Rescue Settings has no Facebook link there's nothing left in this copy, so its heading goes too. */ .contact-alt.ca-column .ca-review { display: none; } .contact-alt.ca-column:not(.has-msg) { display: none; } /* After the map: the review only, under its own handwritten line. */ .alt-below-map { display: block; } .contact-alt.ca-below-map { display: block; } .contact-alt.ca-below-map .ca-messenger { display: none; } .contact-alt.ca-below-map .ca-head { display: none; } .contact-alt.ca-below-map .ca-head-alt { display: block; } /* The hidden Messenger row is still the review's previous sibling, so the 36px gap meant for stacked rows would push the lone review down. */ .contact-alt.ca-below-map .ca-row + .ca-row { margin-top: 0; } } /* Give the form-card's drop shadow room to breathe before the divider */ .page-hero + .section { padding-bottom: 96px; } /* Charity shop feature block — single 3px divider (section already has border-bottom) */ .shop-feature { padding: 80px 0; background: var(--soft-red); border-bottom: 3px solid var(--ink); } .shop-grid { max-width: 1280px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: stretch; } .shop-words .eyebrow { font-family: 'Caveat', cursive; font-weight: 700; font-size: 30px; color: var(--blue); transform: rotate(-2deg); display: inline-block; } .shop-words h2 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); margin-top: 8px; } .shop-words h2 .u { color: var(--red); position: relative; display: inline-block; } .shop-words h2 .u::after { content:''; position:absolute; left: -2%; bottom: -8px; width: 104%; height: 8px; background: var(--yellow); border-radius: 8px; z-index: -1; } .shop-words p { font-size: 17px; margin: 20px 0 0; color: rgba(26,20,16,0.82); max-width: 48ch; } .shop-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 0; } .shop-info { background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; padding: 18px 20px; box-shadow: 4px 4px 0 var(--ink); } .shop-info .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: rgba(26,20,16,0.6); } .shop-info .val { font-family: 'Caprasimo', serif; font-size: 18px; line-height: 1.25; margin-top: 4px; } .shop-info .val a { color: var(--ink); text-decoration: none; } /* The address deep-links to Google Maps directions — hint that it's clickable */ .shop-info .val a[target="_blank"] { text-decoration: underline dashed rgba(26,20,16,0.4); text-decoration-thickness: 2px; text-underline-offset: 4px; } .shop-info .val a[target="_blank"]:hover { color: var(--red); text-decoration-color: var(--red); } /* Hours table */ .shop-hours { padding: 4px 0; margin-top: 14px; } .shop-hours dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; font-size: 14px; margin: 0; } .shop-hours dt { font-weight: 800; } .shop-hours dd { margin: 0; color: rgba(26,20,16,0.75); } .shop-hours dd.closed { color: var(--red); font-weight: 700; } .shop-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } /* Map card — a real Google Maps embed inside the crayon frame. The tiles are Google's own (keyless iframe embed, no API key or billing account), so the crayon look lives in the frame: ink border, hard shadow, compass, footer bar. The tiles are left unstyled on purpose — truly custom tile colours need the paid Maps JavaScript API, CSS filters on the cross-origin iframe proved unreliable in Chrome (stale washed-out paints), and mix-blend-mode overlays are security-isolated from iframe content. */ .shop-map { background: var(--paper); border: 3px solid var(--ink); border-radius: 24px; box-shadow: 8px 8px 0 var(--ink); position: relative; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; } .shop-map .map-embed { flex: 1; position: relative; background: var(--paper-2); /* shows while the iframe lazy-loads */ border-bottom: 3px solid var(--ink); overflow: hidden; } .shop-map .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .shop-map .compass { pointer-events: none; /* decorative, over the live map */ z-index: 2; position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); display: grid; place-items: center; font-family: 'Caprasimo', serif; font-size: 14px; color: var(--red); box-shadow: 3px 3px 0 var(--ink); } .shop-map .map-foot { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .shop-map .map-foot .who { font-family: 'Caveat', cursive; font-weight: 700; font-size: 22px; color: var(--red); transform: rotate(-2deg); display: inline-block; } .shop-map .map-foot .where { font-size: 13px; color: rgba(26,20,16,0.7); } @media (max-width: 980px) { .shop-grid { grid-template-columns: 1fr; } .shop-info-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .shop-info-grid { grid-template-columns: 1fr; } } /* Baked-in mood: sketchbook + blue shop accent + friendly voice (the prototype carried this as a second