/* ============================================================================ Safe hands — accreditation strip (shared component) ---------------------------------------------------------------------------- The "We don't ask you to take our word for it" band: a pink angled wedge on the page's own ground, left-aligned copy, and the real 3SC accreditation stickers (iso-certified / cyber-essentials) that STAMP in when the band arrives (PinkyPromise spring). Layered like the footer (relative + high z-index, transparent ground) so it slides up over a pinned window. Self-contained and token-independent (hard-coded fallbacks) so it renders on any ground. Pages just link this file and drop in the markup — one source of truth for home (index.html) and the schools pages. Requires: stickers.css (for `.kos-sticker.shadow`, the house cast shadow) and the small IntersectionObserver that arms `.kos-stamp` on / toggles `.is-in` on #safe-hands (both live in each page; a missing observer or reduced motion just leaves the badges plainly visible — artwork never depends on JS). Markup uses `#safe-hands` as the section id, which the stamp selectors key on. ========================================================================== */ .creds { position: relative; z-index: 29; overflow: hidden; /* NO ground of its own — transparent, so the page's own grid continues unbroken behind the angled pink wedge (painting its own grid copy produced a double line 4px out of phase at the seam). */ background-color: transparent; padding: clamp(48px, 7vh, 88px) 0; } /* angled PINK band (3SC's slanted section), dotted like the kit */ .creds-green { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: var(--cube-pink, var(--pink, #f70087)); background-image: radial-gradient(rgba(255,255,255,0.20) 1.4px, transparent 0), radial-gradient(rgba(255,255,255,0.20) 1.4px, transparent 0); background-position: 0 0, 18px 18px; background-size: 36px 36px, 36px 36px; -webkit-clip-path: polygon(0 46px, 100% 0, 100% calc(100% - 46px), 0 100%); clip-path: polygon(0 46px, 100% 0, 100% calc(100% - 46px), 0 100%); } .creds-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: clamp(24px, 3vh, 44px) clamp(24px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; } .creds-head { flex: 1 1 520px; max-width: 62ch; } /* accreditation badges (right) — real 3SC sticker art */ .creds-badges { flex: 0 0 auto; display: flex; align-items: flex-start; gap: clamp(14px, 1.6vw, 20px); } .creds-badge { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } /* the cast shadow is the SHARED sticker treatment (.kos-sticker.shadow in stickers.css); only the SIZE is ours, so the height clamp drives it. */ .creds-badge img { display: block; height: clamp(132px, 15vw, 214px); width: auto; } .creds-over { font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: rgba(255,255,255,0.9); } /* shape from 3SC's GlobeSection (weight 700, line-height 1.25, 0.5 title:sub ratio) but sized as a SUPPORTING band that sits below the hero at every width */ .creds-title { margin-top: var(--sp-over-head, 16px); max-width: 22ch; font-size: var(--t-h2, clamp(26px, 3.2vw, 44px)); font-weight: 700; line-height: var(--lh-head, 1.2); letter-spacing: var(--trk-head, 0); color: #fff; } .creds-sub { margin-top: var(--sp-head-lead, 24px); max-width: 34ch; font-size: var(--t-lead, clamp(17px, 1.5vw, 20px)); font-weight: 500; line-height: var(--lh-lead, 1.5); color: #fff; } .creds-note { margin-top: 14px; max-width: 46ch; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.8); } /* ---- PinkyPromise sticker animation, ported exactly ------------------------ 3SC animates the sticker from { opacity 0, scale 1.5, rotate -30deg } on a framer spring(stiffness 300, damping 15, ratio 0.433 → underdamped): it overshoots (scale dips to 0.891, rotation swings +6.6deg past zero) and settles ~0.706s. No cubic-bezier can do that, so the curve is sampled. */ @keyframes kos-stamp { 0% { opacity: 0.000; transform: scale(1.5000) rotate(-30.00deg); } 5% { opacity: 0.159; transform: scale(1.4207) rotate(-25.24deg); } 10% { opacity: 0.496; transform: scale(1.2521) rotate(-15.13deg); } 15% { opacity: 0.839; transform: scale(1.0805) rotate(-4.83deg); } 20% { opacity: 1.000; transform: scale(0.9571) rotate(2.57deg); } 25% { opacity: 1.000; transform: scale(0.8977) rotate(6.14deg); } 30% { opacity: 1.000; transform: scale(0.8928) rotate(6.43deg); } 35% { opacity: 1.000; transform: scale(0.9211) rotate(4.73deg); } 40% { opacity: 1.000; transform: scale(0.9606) rotate(2.36deg); } 45% { opacity: 1.000; transform: scale(0.9950) rotate(0.30deg); } 50% { opacity: 1.000; transform: scale(1.0166) rotate(-0.99deg); } 55% { opacity: 1.000; transform: scale(1.0243) rotate(-1.46deg); } 60% { opacity: 1.000; transform: scale(1.0217) rotate(-1.30deg); } 65% { opacity: 1.000; transform: scale(1.0139) rotate(-0.83deg); } 70% { opacity: 1.000; transform: scale(1.0053) rotate(-0.32deg); } 75% { opacity: 1.000; transform: scale(0.9988) rotate(0.07deg); } 80% { opacity: 1.000; transform: scale(0.9953) rotate(0.28deg); } 85% { opacity: 1.000; transform: scale(0.9947) rotate(0.32deg); } 90% { opacity: 1.000; transform: scale(0.9958) rotate(0.25deg); } 95% { opacity: 1.000; transform: scale(0.9977) rotate(0.14deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } /* Armed by JS only (.kos-stamp on ) — no observer / reduced motion leaves both badges plainly visible, since they carry the accreditation. */ .kos-stamp .creds-badge img { opacity: 0; } .kos-stamp #safe-hands.is-in .creds-badge img { animation: kos-stamp .72s linear both; animation-delay: calc(.2s + var(--i, 0) * .12s); /* PinkyPromise's 0.2s, then a light stagger for the pair */ } /* the copy rises on the same Fade up 40 as the schools section */ .kos-stamp #safe-hands .creds-over, .kos-stamp #safe-hands .creds-title, .kos-stamp #safe-hands .creds-sub { opacity: 0; transform: translateY(40px); } .kos-stamp #safe-hands.is-in .creds-over, .kos-stamp #safe-hands.is-in .creds-title, .kos-stamp #safe-hands.is-in .creds-sub { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.25,.1,.25,1) var(--d, 0s), transform .5s cubic-bezier(.25,.1,.25,1) var(--d, 0s); } .kos-stamp #safe-hands .creds-title { --d: .08s; } .kos-stamp #safe-hands .creds-sub { --d: .16s; } /* stack the copy over the centered badges on small screens */ @media (max-width: 820px) { .creds-inner { padding: 18px; flex-direction: column; align-items: center; text-align: center; gap: 26px; } .creds-head { flex: none; max-width: none; } .creds-badges { width: 100%; justify-content: center; } } @media (max-width: 720px) { .creds-title { max-width: none; } }