/** * Sky Orphan Sponsorship — single-orphan profile stylesheet. * * Adapted from the Claude Design handoff (orphan-design/project/orphan-profile.html). * Everything is scoped under .skd-orphan-page so the design tokens don't leak. */ /* Typography intentionally inherits from the host theme — no Google Fonts enqueue and no Fraunces / Source Sans overrides. Headings use the theme's --wd-entities-title-font (or --wd-text-font fallback), body text uses --wd-text-font. Only IDs / mono date strings get a system-monospace override so they read correctly. Sizing, colour and weight are still pinned per the design brief. */ /* Page-wide cream background. Targets both AND Woodmart's .wd-page-content wrapper so the design fills the viewport regardless of how the theme paints its content area. */ body.single-sky_orphan, body.post-type-archive-sky_orphan, body.tax-skd_country, body.single-sky_orphan .wd-page-content, body.post-type-archive-sky_orphan .wd-page-content, body.tax-skd_country .wd-page-content, body.single-sky_orphan .main-page-wrapper, body.post-type-archive-sky_orphan .main-page-wrapper, body.tax-skd_country .main-page-wrapper, body.single-sky_orphan .site-content, body.post-type-archive-sky_orphan .site-content, body.tax-skd_country .site-content { background-color: #faf7f2 !important; min-height: 50vh; } .skd-orphan-page { --bg: #faf7f2; --card: #ffffff; --ink: #1c2620; --ink-soft: #4a5750; --muted: #8a948e; --line: #e7e2d8; --brand: #1f6b54; --brand-ink: #11402f; --brand-soft: #e8f1ec; --accent: #c8682b; --gold: #b88a2e; --green: #2e7d32; --green-soft: #e8f5e9; --radius: 14px; --shadow: 0 1px 2px rgba(20,30,25,0.04), 0 8px 24px -12px rgba(20,30,25,0.10); background: var(--bg); color: var(--ink); /* Inherit the theme's body font; no override imposed. */ font-size: 15px; line-height: 1.55; } .skd-orphan-page * { box-sizing: border-box; } /* Pin the orphan-name h1 SIZE / WEIGHT / COLOR — Woodmart's page-title module gets aggressive with these, so we lock them explicitly. The font-family is intentionally NOT set, so the theme's heading font flows through. */ html body.single-sky_orphan .skd-orphan-page .name-block h1 { font-size: 56px !important; line-height: 1 !important; font-weight: 600 !important; color: var(--ink) !important; letter-spacing: -0.01em !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; text-align: left !important; } @media (max-width: 700px) { html body.single-sky_orphan .skd-orphan-page .name-block h1 { font-size: 40px !important; } } /* Hide Woodmart's auto page-title module on the orphan single so the orphan name only appears once — inside our hero column. */ body.single-sky_orphan .wd-page-title, body.single-sky_orphan .page-title, body.single-sky_orphan .wd-title-banner, body.single-sky_orphan .entry-header, body.single-sky_orphan .wd-page-meta { display: none !important; } /* Mono only for IDs and mono date strings — uses system monospace, no web font dependency. Everything else inherits the theme's typography. */ body.single-sky_orphan .skd-orphan-page .id, body.single-sky_orphan .skd-orphan-page .v.mono, body.single-sky_orphan .skd-orphan-page section.story h2 small, body.single-sky_orphan .skd-orphan-page .photo-main .ph { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; } .skd-orphan-page a { color: inherit; text-decoration: none; } /* === Hero === */ .skd-orphan-page .profile-hero { max-width: 1280px; margin: 0 auto; padding: 32px 32px 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: stretch; } @media (max-width: 900px) { .skd-orphan-page .profile-hero { grid-template-columns: 1fr; } } /* Tighten Woodmart's `.wd-content-layout` vertical padding on the orphan profile only — defaults to 40px which leaves a wide gap above the hero. */ body.single-sky_orphan .wd-content-layout { padding-block: 15px !important; } /* Quick-facts visibility — desktop + tablet show the photo-column copy under the slider; mobile shows the in-info copy under the name + age/location. Doubled-class selector (`.quick-facts.quick-facts--*`) beats the base `.quick-facts` rule lower in the file regardless of source order. !important guards against any inline / Woodmart override too. */ .skd-orphan-page .quick-facts.quick-facts--photo { display: grid !important; } .skd-orphan-page .quick-facts.quick-facts--info { display: none !important; } @media (max-width: 900px) { .skd-orphan-page .quick-facts.quick-facts--photo { display: none !important; } .skd-orphan-page .quick-facts.quick-facts--info { display: grid !important; } } /* Photo column wraps the slider + the desktop-only quick-facts panel. On desktop we switch to a CSS Grid with a `1fr auto` track set, so the slider row stretches to fill whatever vertical space the right-side info column claims and the quick-facts panel sits at its natural height beneath it. Both columns end at the same baseline. */ .skd-orphan-page .hero-photo-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; } @media (min-width: 901px) { .skd-orphan-page .hero-photo-col { display: grid; grid-template-rows: 1fr auto; height: 100%; } .skd-orphan-page .hero-photo-col .skd-orphan-gallery-slider { height: 100%; min-height: 360px; display: flex; flex-direction: column; } .skd-orphan-page .hero-photo-col .skd-orphan-slider-main { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; } } .skd-orphan-page .photo-stack { display: grid; grid-template-columns: 1fr 88px; gap: 10px; } .skd-orphan-page .photo-main { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; background: repeating-linear-gradient(135deg, #ded5c4 0 14px, #d3cab8 14px 28px); } .skd-orphan-page .photo-main img.photo-main-img { width: 100%; height: 100%; object-fit: cover; display: block; } .skd-orphan-page .photo-main .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #6b6453; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: .04em; padding: 20px; text-align: center; } .skd-orphan-page .photo-main .badge, .skd-orphan-page .skd-orphan-slider-main .badge { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; z-index: 5; } .skd-orphan-page .photo-main .badge span, .skd-orphan-page .skd-orphan-slider-main .badge span { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--accent); color: #fff; box-shadow: 0 2px 8px -2px rgba(0,0,0,0.30); } .skd-orphan-page .photo-main .badge .badge--sponsored, .skd-orphan-page .skd-orphan-slider-main .badge .badge--sponsored { background: var(--green); color: #fff; display: inline-flex; align-items: center; gap: 6px; } .skd-orphan-page .photo-main .badge .badge--sponsored::before, .skd-orphan-page .skd-orphan-slider-main .badge .badge--sponsored::before { content: ""; display: inline-block; width: 12px; height: 12px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: contain; } .skd-orphan-page .photo-main .badge .badge--new, .skd-orphan-page .photo-main .badge .badge--awaiting, .skd-orphan-page .skd-orphan-slider-main .badge .badge--new, .skd-orphan-page .skd-orphan-slider-main .badge .badge--awaiting { background: var(--gold); color: #1c1408; } .skd-orphan-page .photo-main .badge .badge--urgent, .skd-orphan-page .skd-orphan-slider-main .badge .badge--urgent { background: #b32d2e; color: #fff; } .skd-orphan-page .thumbs { display: flex; flex-direction: column; gap: 10px; } .skd-orphan-page .thumb { aspect-ratio: 1/1; border-radius: 10px; background: repeating-linear-gradient(135deg, #ded5c4 0 8px, #d3cab8 8px 16px); position: relative; cursor: pointer; overflow: hidden; } .skd-orphan-page .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .skd-orphan-page .thumb.active { outline: 2px solid var(--brand); outline-offset: 2px; } .skd-orphan-page .thumb--empty { cursor: default; } .skd-orphan-page .thumb .more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(28,38,32,.55); color: #fff; font-weight: 600; font-size: 14px; border-radius: inherit; } .skd-orphan-page .profile-info { display: flex; flex-direction: column; gap: 22px; } .skd-orphan-page .name-block { display: flex; flex-direction: column; gap: 8px; } .skd-orphan-page .name-block h1 { font-size: 56px; line-height: 1; } .skd-orphan-page .name-block .age-loc { font-size: 16px; color: var(--ink-soft); } /* === Quick facts === */ .skd-orphan-page .quick-facts { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); } .skd-orphan-page .fact { padding: 14px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .skd-orphan-page .fact:nth-child(2n) { border-right: 0; } .skd-orphan-page .fact:last-child { border-bottom: 0; } .skd-orphan-page .fact--full { grid-column: 1 / -1; border-right: 0; } .skd-orphan-page .fact .l { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; } .skd-orphan-page .fact .v { font-size: 15px; font-weight: 500; color: var(--ink); } .skd-orphan-page .fact .v.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; } /* Quick-fact chips: status pill, situation tags, internal ref code. */ .skd-orphan-page .fact-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; } .skd-orphan-page .fact-chip { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; } .skd-orphan-page .fact-chip--awaiting { background: #fff4e0; color: #8a5400; border-color: #f5d28a; } .skd-orphan-page .fact-chip--success { background: var(--brand-soft, #e6f4ec); color: var(--brand, #1f6e44); border-color: rgba(31, 110, 68, .25); } .skd-orphan-page .fact-chip--situation { background: #f1efe7; color: #4b463a; border-color: #e0dccb; font-weight: 500; } .skd-orphan-page .fact-chip--ref { background: var(--brand-soft, #e6f4ec); color: var(--brand, #1f6e44); border-color: rgba(31, 110, 68, .25); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; } /* === Sponsor card === */ .skd-orphan-page .support-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .skd-orphan-page .support-progress { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .skd-orphan-page .support-progress .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .skd-orphan-page .support-progress .top b { font-family: var(--wd-entities-title-font, inherit); font-size: 18px; font-weight: 600; } .skd-orphan-page .support-progress .top span { color: var(--muted); font-size: 13px; text-align: right; } .skd-orphan-page .progress { height: 8px; background: #ece5d6; border-radius: 999px; overflow: hidden; } .skd-orphan-page .progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #2c8a6c); border-radius: inherit; } .skd-orphan-page .freq-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; font-weight: 600; } /* Frequency picker — single-column stack at all sizes. Each tile is a horizontal row: label on the left, amount + unit grouped on the right. */ .skd-orphan-page .price-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 4px 0 14px; } .skd-orphan-page .price-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 18px; text-align: left; cursor: pointer; transition: .15s; background: #fff; font: inherit; color: inherit; } .skd-orphan-page .price-opt:hover { border-color: #c4baa6; } .skd-orphan-page .price-opt.selected { border-color: var(--brand); background: var(--brand-soft); } .skd-orphan-page .price-opt .label { flex: 0 0 auto; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #000; font-weight: bold; } .skd-orphan-page .price-opt .amt { margin-left: auto; font-family: var(--wd-entities-title-font, inherit); font-size: 22px; font-weight: 600; } .skd-orphan-page .price-opt.selected .label { color: var(--brand); } .skd-orphan-page .per-day-line { font-size: 12.5px; color: var(--muted); margin: 10px 0 14px; text-align: center; } .skd-orphan-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer; transition: .15s; font-family: inherit; line-height: 1.2; } /* Pin colour + bg + decoration with !important so the parent theme (Woodmart and others style `a:hover` aggressively) can't change the text colour or add an underline that makes the label unreadable against the dark-green hover background. */ .skd-orphan-page .btn-primary, .skd-orphan-page a.btn-primary { background: var(--brand) !important; color: #fff !important; text-decoration: none !important; border-color: var(--brand) !important; } .skd-orphan-page .btn-primary:hover, .skd-orphan-page .btn-primary:focus, .skd-orphan-page a.btn-primary:hover, .skd-orphan-page a.btn-primary:focus { background: var(--brand-ink) !important; color: #fff !important; border-color: var(--brand-ink) !important; text-decoration: none !important; } .skd-orphan-page .btn-block { width: 100%; padding: 14px; font-size: 15px; } /* === Main Sponsor CTA — wide gradient pill with name | amount | chevron. Fluid sizing via clamp() so the text never wraps or overflows from small mobile (~320px) up to wide desktop. === */ .skd-orphan-page .skd-orphan-cta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: clamp(8px, 2vw, 16px); padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px); border: 0; border-radius: 14px; color: #fff; cursor: pointer; font-family: inherit; line-height: 1.2; /* Gradient runs from a slightly lighter brand on the top-left to the darker brand-ink on the bottom-right. Both stops resolve from the Layout settings via --brand / --brand-ink. */ background: linear-gradient( 135deg, color-mix(in srgb, var(--brand) 88%, #fff) 0%, var(--brand) 50%, var(--brand-ink) 100% ); box-shadow: 0 6px 16px -8px rgba(0,0,0,0.30); transition: filter 0.15s ease, transform 0.15s ease; /* Allow flex children to shrink without overflow on tiny viewports. */ min-width: 0; } /* Hover / active / disabled — high specificity (`html body.single-sky_orphan`) so Woodmart's button hover (which dims with opacity) can't override us. */ html body.single-sky_orphan .skd-orphan-page .skd-orphan-cta, html body.single-sky_orphan .skd-orphan-page .skd-orphan-cta:visited { color: #fff !important; } html body.single-sky_orphan .skd-orphan-page .skd-orphan-cta:hover, html body.single-sky_orphan .skd-orphan-page .skd-orphan-cta:focus { color: #fff !important; opacity: 1 !important; background: linear-gradient( 135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 80%, #000) 100% ) !important; filter: brightness(1.06); box-shadow: 0 8px 22px -8px rgba(0,0,0,0.40); } html body.single-sky_orphan .skd-orphan-page .skd-orphan-cta:active { transform: translateY(1px); filter: brightness(0.98); } html body.single-sky_orphan .skd-orphan-page .skd-orphan-cta:disabled, html body.single-sky_orphan .skd-orphan-page .skd-orphan-cta.is-loading, html body.single-sky_orphan .skd-orphan-page .skd-orphan-profile__sponsor-btn.is-loading { opacity: 0.7 !important; cursor: progress; pointer-events: none; } html body.single-sky_orphan .skd-orphan-page .skd-orphan-cta__amt, html body.single-sky_orphan .skd-orphan-page .skd-orphan-cta__lbl, html body.single-sky_orphan .skd-orphan-page .skd-orphan-cta__unit, html body.single-sky_orphan .skd-orphan-page .skd-orphan-cta__arrow { color: #fff !important; } html body.single-sky_orphan .skd-orphan-page .skd-orphan-cta__unit { color: rgba(255, 255, 255, 0.78) !important; } /* Sticky CTA button — same hover lock, brand colour stays put. */ html body.single-sky_orphan .skd-orphan-page .sticky-cta .btn, html body.single-sky_orphan .skd-orphan-page .sticky-cta .btn:visited { background: var(--brand) !important; color: #fff !important; } html body.single-sky_orphan .skd-orphan-page .sticky-cta .btn:hover, html body.single-sky_orphan .skd-orphan-page .sticky-cta .btn:focus { background: var(--brand-ink) !important; color: #fff !important; opacity: 1 !important; } .skd-orphan-page .skd-orphan-cta__lbl { /* 14px on a 320px viewport → 18px on 1100px+, fluid in between. */ font-size: clamp(14px, 1.4vw + 10px, 18px); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .skd-orphan-page .skd-orphan-cta__price { margin-left: auto; display: inline-flex; align-items: baseline; gap: clamp(3px, 0.5vw, 6px); white-space: nowrap; flex-shrink: 0; } .skd-orphan-page .skd-orphan-cta__amt { font-size: clamp(18px, 1.7vw + 12px, 24px); font-weight: 700; } .skd-orphan-page .skd-orphan-cta__unit { font-size: clamp(11px, 0.7vw + 8px, 13px); color: rgba(255, 255, 255, 0.78); font-weight: 500; } .skd-orphan-page .skd-orphan-cta__arrow { display: inline-flex; align-items: center; color: #fff; margin-left: 4px; flex-shrink: 0; } .skd-orphan-page .skd-orphan-cta__arrow svg { width: clamp(16px, 1.4vw + 10px, 20px); height: clamp(16px, 1.4vw + 10px, 20px); } .skd-orphan-page .cta-note { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 14px 0; } /* === Body grid === */ .skd-orphan-page .body-wrap { max-width: 1280px; margin: 0 auto; padding: 48px 32px 80px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; } @media (max-width: 900px) { .skd-orphan-page .body-wrap { grid-template-columns: 1fr; } } .skd-orphan-page section.story { display: flex; flex-direction: column; gap: 36px; } .skd-orphan-page section.story h2 { font-size: 30px; } .skd-orphan-page section.story h2 small { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 400; margin-bottom: 6px; } .skd-orphan-page .story-body { color: var(--ink-soft); font-size: 16px; } .skd-orphan-page .story-body p { margin: 0 0 14px 0; } .skd-orphan-page .lead-note { margin-top: 10px; /* Override Woodmart's `p { margin-bottom: var(--wd-tags-mb, 20px) }` so the next breakdown row sits flush against this lead paragraph. */ margin-bottom: 0 !important; color: var(--ink-soft); font-size: 16px; } /* === Sponsorship FAQs === */ .skd-orphan-page .skd-orphan-faqs { margin-top: 36px; } .skd-orphan-page .skd-orphan-faqs__head { margin-bottom: 20px; } .skd-orphan-page .skd-orphan-faqs__kicker { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; margin-bottom: 14px; } .skd-orphan-page .skd-orphan-faqs__heading { font-family: var(--wd-entities-title-font, inherit); font-size: 44px; line-height: 1.08; font-weight: 700; color: var(--ink); margin: 0 0 14px; letter-spacing: -0.01em; } .skd-orphan-page .skd-orphan-faqs__intro { color: var(--ink-soft); font-size: 17px; line-height: 1.55; margin: 0 0 24px; max-width: 60ch; } .skd-orphan-page .skd-orphan-faqs__intro a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .skd-orphan-page .skd-orphan-faqs__list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .skd-orphan-page .skd-orphan-faq { border-top: 1px solid var(--line); } .skd-orphan-page .skd-orphan-faq:first-child { border-top: 0; } .skd-orphan-page .skd-orphan-faq__summary { display: grid; grid-template-columns: 1fr 44px; align-items: start; gap: 16px; padding: 22px 26px; cursor: pointer; list-style: none; } .skd-orphan-page .skd-orphan-faq__summary::-webkit-details-marker { display: none; } .skd-orphan-page .skd-orphan-faq__summary::marker { content: ''; } .skd-orphan-page .skd-orphan-faq__q { font-family: var(--wd-entities-title-font, inherit); font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.4; } .skd-orphan-page .skd-orphan-faq__icon { justify-self: end; width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); color: var(--muted); background: transparent; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; } .skd-orphan-page .skd-orphan-faq__icon-cross { display: none; } .skd-orphan-page .skd-orphan-faq[open] .skd-orphan-faq__icon { background: var(--brand); border-color: var(--brand); color: #fff; } .skd-orphan-page .skd-orphan-faq[open] .skd-orphan-faq__icon-plus { display: none; } .skd-orphan-page .skd-orphan-faq[open] .skd-orphan-faq__icon-cross { display: inline-flex; } .skd-orphan-page .skd-orphan-faq__a { padding: 0 86px 24px 26px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; } .skd-orphan-page .skd-orphan-faq__a p { margin: 0 0 12px; } .skd-orphan-page .skd-orphan-faq__a p:last-child { margin-bottom: 0; } .skd-orphan-page .skd-orphan-faq__a a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 600px) { .skd-orphan-page .skd-orphan-faqs__heading { font-size: 30px; } .skd-orphan-page .skd-orphan-faq__summary { grid-template-columns: 1fr 32px; gap: 12px; padding: 18px 18px; } .skd-orphan-page .skd-orphan-faq__q { font-size: 17px; } .skd-orphan-page .skd-orphan-faq__icon { width: 30px; height: 30px; } .skd-orphan-page .skd-orphan-faq__a { padding: 0 62px 20px 18px; } } /* === Cost breakdown === */ .skd-orphan-page .covers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .skd-orphan-page .covers .covers-head { grid-column: 1 / -1; margin: 0 0 4px; padding: 0 4px; } .skd-orphan-page .covers .covers-head h2 { margin: 0; } .skd-orphan-page .covers .covers-head .lead-note { margin-top: 6px !important; } @media (max-width: 700px) { .skd-orphan-page .covers { grid-template-columns: 1fr; } } .skd-orphan-page .cover-item { display: flex; gap: 14px; align-items: center; padding: 8px; } .skd-orphan-page .cover-item .ico { width: 38px; height: 38px; border-radius: 9px; background: var(--brand-soft); display: grid; place-items: center; color: var(--brand); flex-shrink: 0; } .skd-orphan-page .cover-item .lbl-wrap { flex: 1; min-width: 0; } .skd-orphan-page .cover-item .lbl { font-weight: 600; font-size: 14.5px; } .skd-orphan-page .cover-item .sub { font-size: 13px; color: var(--muted); margin-top: 2px; } .skd-orphan-page .cover-item .amt { font-family: var(--wd-entities-title-font, inherit); font-size: 18px; font-weight: 600; color: var(--brand); padding-left: 10px; } .skd-orphan-page .cover-total { background: var(--brand-soft); border-radius: 10px; padding: 12px 22px 12px 12px; } .skd-orphan-page .cover-total .ico-filled { background: var(--brand); color: #fff; } .skd-orphan-page .cover-total .amt { color: var(--brand-ink); } /* === Sidebar === */ .skd-orphan-page aside.side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 24px; align-self: start; } .skd-orphan-page .actions-card, .skd-orphan-page .similar-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .skd-orphan-page .actions-card h4, .skd-orphan-page .similar-card h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: inherit; font-weight: 600; margin-bottom: 14px; } .skd-orphan-page .action { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--ink-soft); background: transparent; border: 0; width: 100%; text-align: left; font-family: inherit; } .skd-orphan-page .action:hover { background: var(--bg); color: var(--ink); } .skd-orphan-page .action svg { color: var(--brand); flex-shrink: 0; } .skd-orphan-page .action--copied { background: var(--brand-soft); color: var(--brand-ink); } .skd-orphan-page .action--copied::after { content: " — link copied"; color: var(--brand); font-size: 12px; } .skd-orphan-page .sim-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .skd-orphan-page .sim-row:first-of-type { border-top: 0; } /* Similar-orphan thumbnail — 1536 × 863 frame at a tiny scale so the sidebar list previews the same image crop as everywhere else. */ .skd-orphan-page .sim-row .av { width: 80px; aspect-ratio: 1536 / 863; border-radius: 9px; background: repeating-linear-gradient(135deg, #ded5c4 0 8px, #d3cab8 8px 16px); overflow: hidden; flex-shrink: 0; } .skd-orphan-page .sim-row .av img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .skd-orphan-page .sim-row .info { flex: 1; min-width: 0; } .skd-orphan-page .sim-row .info b { font-size: 14.5px; } .skd-orphan-page .sim-row .info .age-suffix { display: inline; font-weight: 400; color: var(--muted); margin-left: 2px; } .skd-orphan-page .sim-row .info span { font-size: 12.5px; color: var(--muted); display: block; } .skd-orphan-page .sim-row .price { font-family: var(--wd-entities-title-font, inherit); font-weight: 600; color: var(--brand); font-size: 15px; } /* === Sticky bottom CTA — mobile only === Hidden by default; shown only at the mobile breakpoint below. Desktop has the full Sponsor card in the hero, so the pill is redundant on wide viewports. */ .skd-orphan-page .sticky-cta { display: none; position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(92%, 1100px); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 10px 10px 10px 28px; box-shadow: 0 12px 32px -10px rgba(20,30,25,0.25); align-items: center; justify-content: space-between; gap: 18px; z-index: 30; } .skd-orphan-page .sticky-cta .t { display: flex; align-items: baseline; gap: 12px; min-width: 0; } .skd-orphan-page .sticky-cta .t b { font-family: var(--wd-entities-title-font, inherit); /* 14px on a 320px viewport → 18px on 1100px+, fluid in between. */ font-size: clamp(13px, 1.4vw + 9px, 18px); font-weight: 600; color: var(--ink); line-height: 1.2; } .skd-orphan-page .sticky-cta .t span { font-size: clamp(11px, 0.7vw + 8.5px, 13.5px); color: var(--muted); margin-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .skd-orphan-page .sticky-cta .btn { flex-shrink: 0; padding: clamp(9px, 0.7vw + 7px, 12px) clamp(14px, 1.4vw + 10px, 22px); font-size: clamp(13px, 0.5vw + 11.5px, 14.5px); font-weight: 600; } .skd-orphan-page .sticky-cta .lbl-short { display: none; } /* === v1.0.17 — comprehensive mobile responsiveness === */ @media (max-width: 768px) { .skd-orphan-page .profile-hero { padding: 16px 16px 0; gap: 20px; grid-template-columns: 1fr; } /* Photo stack: photo on top, thumbs horizontal scroll below */ .skd-orphan-page .photo-stack { grid-template-columns: 1fr; gap: 10px; } .skd-orphan-page .photo-main { aspect-ratio: 4/3; max-height: 60vh; } .skd-orphan-page .thumbs { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .skd-orphan-page .thumbs::-webkit-scrollbar { height: 4px; } .skd-orphan-page .thumbs::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; } .skd-orphan-page .thumb { flex: 0 0 72px; width: 72px; height: 72px; aspect-ratio: auto; } .skd-orphan-page .thumb--empty { display: none; } /* Quick-facts: single column on mobile */ .skd-orphan-page .quick-facts { grid-template-columns: 1fr; } .skd-orphan-page .fact { border-right: 0 !important; border-bottom: 1px solid var(--line); padding: 12px 16px; } .skd-orphan-page .fact:last-child { border-bottom: 0; } /* Sponsor card: tighter padding on mobile (price-opt layout already single-column horizontal at all sizes from the base rule). */ .skd-orphan-page .support-card { padding: 18px; } .skd-orphan-page .price-opt { padding: 12px 14px; gap: 10px; } .skd-orphan-page .price-opt .amt { font-size: 20px; } /* Body grid: single column */ .skd-orphan-page .body-wrap { padding: 28px 16px 96px; gap: 28px; grid-template-columns: 1fr; } /* Headlines scale down */ html body.single-sky_orphan .skd-orphan-page .name-block h1 { font-size: 36px !important; } .skd-orphan-page .name-block .age-loc { font-size: 16px; } .skd-orphan-page section.story h2 { font-size: 24px; } .skd-orphan-page .support-progress .top { flex-direction: column; align-items: flex-start; gap: 4px; } .skd-orphan-page .support-progress .top span { text-align: left; } /* Covers grid: already breaks at 700px — reinforce here */ .skd-orphan-page .covers { grid-template-columns: 1fr; padding: 16px; gap: 8px; } .skd-orphan-page .cover-item { padding: 6px; } /* Sidebar cards: tighter padding */ .skd-orphan-page .actions-card, .skd-orphan-page .similar-card { padding: 18px; } .skd-orphan-page aside.side { position: static; gap: 16px; } /* Sticky CTA: full-width pill at bottom — name + meta stack on the left, button stays on the right (matches the design's mobile split). Display flips from `none` (desktop default) to `flex` here. */ .skd-orphan-page .sticky-cta { display: flex; left: 12px; right: 12px; bottom: 12px; width: auto; transform: none; flex-direction: row; align-items: center; justify-content: space-between; border-radius: 999px; padding: 8px 8px 8px 18px; gap: 12px; } .skd-orphan-page .sticky-cta .t { flex-direction: column; align-items: flex-start; gap: 0; } .skd-orphan-page .sticky-cta .t b { font-size: 15px; line-height: 1.2; } .skd-orphan-page .sticky-cta .t span { font-size: 12.5px; line-height: 1.3; margin-top: 2px; } .skd-orphan-page .sticky-cta .btn { flex-shrink: 0; padding: 11px 18px; font-size: 14px; border-radius: 100px; } .skd-orphan-page .sticky-cta .lbl-long { display: none; } .skd-orphan-page .sticky-cta .lbl-short { display: inline; } } @media (max-width: 480px) { html body.single-sky_orphan .skd-orphan-page .name-block h1 { font-size: 30px !important; } .skd-orphan-page .price-opt .amt { font-size: 18px; } } /* === Hero gallery slider — ported from skydonate-fundraising's .skydonate-gallery-slider (public.css lines 5147-5347). Class prefix renamed to .skd-orphan-* and accent colour swapped from the fundraising indigo to var(--brand). === */ .skd-orphan-page .skd-orphan-gallery-slider { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08); position: relative; } .skd-orphan-page .skd-orphan-slider-main { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #1f2937; overflow: hidden; } .skd-orphan-page .skd-orphan-slider-slides { position: relative; width: 100%; height: 100%; } .skd-orphan-page .skd-orphan-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; } .skd-orphan-page .skd-orphan-slide.active { opacity: 1; z-index: 1; } .skd-orphan-page .skd-orphan-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .skd-orphan-page .skd-orphan-slide .ph { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255,255,255,0.7); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; background: linear-gradient(135deg, #1f2937 0%, #111827 100%); } /* Controls — bottom bar with gradient overlay */ .skd-orphan-page .skd-orphan-slider-controls { position: absolute; left: 0; bottom: 0; width: 100%; padding: 80px 24px 16px; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); display: flex; justify-content: space-between; align-items: flex-end; z-index: 10; pointer-events: none; } .skd-orphan-page .skd-orphan-slider-dots { display: flex; gap: 10px; pointer-events: auto; } .skd-orphan-page .skd-orphan-slider-dot { width: 6px; height: 6px; min-height: inherit; border: none; border-radius: 50px; background: rgba(255, 255, 255, 0.5); cursor: pointer; padding: 0; transition: all 0.3s ease; } .skd-orphan-page .skd-orphan-slider-dot:hover { background: rgba(255, 255, 255, 0.8); } .skd-orphan-page .skd-orphan-slider-dot.active { background: #fff; width: 14px; transform: scale(1.2); } .skd-orphan-page .skd-orphan-slider-nav-group { display: flex; gap: 8px; pointer-events: auto; } .skd-orphan-page .skd-orphan-slider-nav { width: 36px; height: 36px; min-height: inherit; border: none; border-radius: 50%; background: #fff; color: var(--brand); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; padding: 0; } .skd-orphan-page .skd-orphan-slider-nav:hover { background: var(--brand); color: #fff; } .skd-orphan-page .skd-orphan-slider-nav svg { fill: currentColor; width: 20px; height: 20px; } /* Reposition the existing badge inside the new slider */ .skd-orphan-page .skd-orphan-slider-main .badge { position: absolute; top: 14px; left: 14px; z-index: 5; } /* === Share-this-profile card — adapted from skydonate-fundraising's "Share this fundraiser" component === */ .skd-orphan-page .skd-orphan-share-card h4 { margin: 0 0 14px; font-weight: 600; color: var(--ink); } .skd-orphan-page .skd-orphan-share-social { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-bottom: 14px; } .skd-orphan-page .skd-orphan-share-btn { display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 50%; background: #f4f1ea; color: var(--ink); text-decoration: none; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .skd-orphan-page .skd-orphan-share-btn:hover { transform: translateY(-1px); color: #fff; } .skd-orphan-page .skd-orphan-share-btn--facebook:hover { background: #1877f2; } .skd-orphan-page .skd-orphan-share-btn--whatsapp:hover { background: #25d366; } .skd-orphan-page .skd-orphan-share-btn--telegram:hover { background: #229ed9; } .skd-orphan-page .skd-orphan-share-btn--x:hover { background: #000; } .skd-orphan-page .skd-orphan-share-btn--linkedin:hover { background: #0a66c2; } .skd-orphan-page .skd-orphan-share-btn--email:hover { background: var(--brand); } .skd-orphan-page .skd-orphan-share-link-box { display: flex; align-items: stretch; gap: 0; background: #f4f1ea; border-radius: 8px; overflow: hidden; } .skd-orphan-page .skd-orphan-share-link-input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 12px; font-size: 12.5px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .skd-orphan-page .skd-orphan-share-link-input:focus { outline: none; } .skd-orphan-page .skd-orphan-share-copy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--brand); color: #fff; border: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; transition: background 0.15s ease; } /* Hover lock — high specificity + !important so Woodmart's button hover (opacity dim) can't dim the brand colour. */ html body.single-sky_orphan .skd-orphan-page .skd-orphan-share-copy-btn, html body.single-sky_orphan .skd-orphan-page .skd-orphan-share-copy-btn:visited { background: var(--brand) !important; color: #fff !important; opacity: 1 !important; } html body.single-sky_orphan .skd-orphan-page .skd-orphan-share-copy-btn:hover, html body.single-sky_orphan .skd-orphan-page .skd-orphan-share-copy-btn:focus, html body.single-sky_orphan .skd-orphan-page .skd-orphan-share-copy-btn.is-copied { background: var(--brand-ink) !important; color: #fff !important; opacity: 1 !important; } /* === v1.0.20 — sticky CTA polish + hide theme back-to-top === */ /* Hide Woodmart / theme back-to-top on the orphan profile + archive — it overlaps the sticky "Sponsor Now" pill and breaks the layout. */ body.single-sky_orphan .wd-scroll-top, body.single-sky_orphan #site-scroll-top, body.single-sky_orphan .scroll-top, body.single-sky_orphan #back-to-top, body.post-type-archive-sky_orphan .wd-scroll-top, body.post-type-archive-sky_orphan #site-scroll-top, body.post-type-archive-sky_orphan .scroll-top, body.post-type-archive-sky_orphan #back-to-top { display: none !important; } /* Lift the sticky CTA above any theme floating widgets that might still try to share its lane (chat bubbles, cookie banners, etc.). */ .skd-orphan-page .sticky-cta { z-index: 9990; background: #fff; backdrop-filter: none; } /* Hide the sticky CTA whenever Woodmart's mini-cart drawer is open — otherwise the pill floats over the drawer's View Basket / Checkout buttons. Uses :has() (modern browsers) plus a JS-set body class for safety. */ body:has(.cart-widget-side.wd-opened) .skd-orphan-page .sticky-cta, body:has(.wd-cart-side.wd-opened) .skd-orphan-page .sticky-cta, body.skd-orphan-cart-open .skd-orphan-page .sticky-cta { display: none !important; }