/* ============================================================================ Osseus — per-vertical use-case pages (/use-cases//). Minimal page chrome + one new loop graphic (`.lg--standards`) that shows the standards check happening instead of listing standards as body copy. Follows the home page's system: pure white page, grain only on tinted panels, 1400px rail, Instrument Sans, per-vertical accent set as --acc on . Companion to /assets/loop-graphics.css (which owns .lg chrome). ========================================================================= */ /* ---------- page-level ---------- */ .uc-v{--acc:#A9542C} .ucv-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,5vw,72px) 0 clamp(44px,5.4vw,72px)} .ucv-hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--tick32),var(--tick128); background-size:32px 32px,128px 128px;background-position:0 0,64px 64px; -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 55%,transparent 100%); } .ucv-hero>.shell{position:relative;z-index:1;animation:ossRise .9s cubic-bezier(.22,.61,.36,1) .04s both} .ucv-eyebrow{ display:inline-flex;align-items:center;gap:9px;margin:0 0 20px; font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc); } .ucv-eyebrow .ucv-eyebrow-ic{ width:26px;height:26px;border-radius:8px;display:grid;place-items:center; border:1px solid color-mix(in srgb,var(--acc) 28%,transparent); background:color-mix(in srgb,var(--acc) 10%,#fff); } .ucv-eyebrow svg{width:15px;height:15px;display:block} .ucv-hero h1{ font-family:var(--font-display);font-weight:400; font-size:clamp(40px,5.6vw,74px);line-height:1.01;letter-spacing:-.045em; margin:0 0 22px;max-width:14em;text-wrap:balance; } .ucv-hero h1 em{font-style:normal;color:var(--acc)} .ucv-sub{font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:var(--ink-2);max-width:33em;margin:0 0 30px;text-wrap:pretty} .ucv-ctas{display:flex;flex-wrap:wrap;gap:12px} /* ---------- moment rows: short line + big graphic in a tinted grain box --- */ .ucv-moments{padding:clamp(42px,5vw,68px) 0 clamp(56px,7vw,96px)} .ucv-moment{ position:relative;overflow:hidden; border:1px solid color-mix(in srgb,var(--acc) 22%,rgba(43,38,32,.14)); border-radius:24px; background: radial-gradient(120% 90% at 8% 0%,color-mix(in srgb,var(--acc) 11%,transparent) 0%,transparent 62%), linear-gradient(150deg,#FBF8F3 0%,#F6F1E9 100%); padding:clamp(22px,2.8vw,36px); } .ucv-moment + .ucv-moment{margin-top:clamp(16px,2.2vw,26px)} /* grain sits over the colour wash, under the content */ .ucv-moment::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.22;mix-blend-mode:multiply; background-image:var(--noise),var(--noise); background-size:160px 160px,340px 340px;background-position:0 0,71px 53px; } .ucv-moment>*{position:relative;z-index:1} .ucv-moment::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--acc);z-index:2} .ucv-moment-grid{ display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:center;gap:clamp(24px,3.6vw,54px); } .ucv-moment--flip .ucv-moment-grid{direction:rtl} .ucv-moment--flip .ucv-moment-grid>*{direction:ltr} .ucv-moment-copy{min-width:0} .ucv-step{ display:inline-flex;align-items:center;gap:7px;margin:0 0 16px; font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc); } .ucv-step::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)} .ucv-moment h2{ font-family:var(--font-display);font-weight:500; font-size:clamp(25px,2.9vw,38px);line-height:1.09;letter-spacing:-.032em; margin:0 0 14px;max-width:13em;text-wrap:balance; } .ucv-moment p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0;max-width:34em;text-wrap:pretty} .ucv-moment-media{min-width:0} /* ---------- closing strip ---------- */ .ucv-next{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px; margin:clamp(18px,2.2vw,26px) 0 0;padding:clamp(18px,2.2vw,24px) clamp(20px,2.6vw,30px); border:1px dashed rgba(43,38,32,.22);border-radius:18px;background:rgba(245,240,233,.5); } .ucv-next p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-3);max-width:44em} .ucv-next b{color:var(--ink)} .ucv-next-links{display:flex;flex-wrap:wrap;gap:8px} .ucv-next-links a{ display:inline-flex;align-items:center;gap:7px; font-size:13px;font-weight:650;text-decoration:none;color:var(--ink); padding:8px 14px;border-radius:100px;border:1px solid rgba(43,38,32,.16);background:rgba(255,255,255,.66); transition:border-color .18s ease,background .18s ease,transform .18s ease; } .ucv-next-links a:hover{transform:translateY(-2px);border-color:rgba(43,38,32,.3);background:#fff;color:var(--ink)} .ucv-next-links a i{width:6px;height:6px;border-radius:50%;background:var(--dot,#A9542C);flex:none} @media (max-width:900px){ .ucv-moment-grid{grid-template-columns:1fr;gap:24px} .ucv-moment--flip .ucv-moment-grid{direction:ltr} } /* ========================================================================== loopStandards — "the change is checked against every standard that binds this programme". Shows the check running, one clause failing, and a "+N more" row so breadth reads without a wall of chips. Timeline is percentage-choreographed on the shared --lg-dur, matching the rest of the loop-graphics system. Base (non-animated) styles are the payoff state for prefers-reduced-motion. ========================================================================= */ .lg--standards .lg-stage{aspect-ratio:auto} .lg--standards .lg-scene{position:relative;inset:auto;padding:15px 16px 17px;display:flex;flex-direction:column;gap:10px} /* submitted change */ .lgst-change{ display:flex;align-items:center;gap:10px; padding:9px 12px;border-radius:11px; border:1px solid color-mix(in srgb,var(--lg-accent) 30%,transparent); background:color-mix(in srgb,var(--lg-accent) 8%,#FFFDF9); animation:lgstChange var(--lg-dur) var(--lg-ease) infinite; } .lgst-change-ic{ flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center; background:color-mix(in srgb,var(--lg-accent) 16%,transparent);color:var(--lg-accent); font-size:12px;font-weight:800; } .lgst-change small{display:block;font-size:10.5px;font-weight:600;color:rgba(43,38,32,.5);margin-bottom:1px} .lgst-change b{display:block;font-size:12.5px;font-weight:700;line-height:1.3} @keyframes lgstChange{ 0%{opacity:0;transform:translateY(-6px)} 6%,100%{opacity:1;transform:none} } /* the checking list */ .lgst-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;position:relative} .lgst-row{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:8px 11px;border-radius:9px; border:1px solid rgba(43,38,32,.11);background:#FFFDF9; font-size:12.5px; } .lgst-name{font-weight:650;color:rgba(43,38,32,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lgst-state{position:relative;flex:none;display:inline-grid;min-width:74px;justify-items:end} .lgst-state>span{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;white-space:nowrap} .lgst-wait{color:rgba(43,38,32,.4)} .lgst-wait::before{ content:"";width:9px;height:9px;border-radius:50%; border:1.6px solid rgba(43,38,32,.2);border-top-color:rgba(43,38,32,.45); animation:lgstSpin .9s linear infinite; } @keyframes lgstSpin{to{transform:rotate(360deg)}} .lgst-pass{color:#4E6849} .lgst-pass svg{width:13px;height:13px} .lgst-flag{color:var(--lg-accent)} .lgst-flag::before{content:"\2691";font-size:12px;line-height:1} /* base = payoff: resolved state visible, spinner hidden */ .lgst-row .lgst-wait{opacity:0} .lgst-row .lgst-pass,.lgst-row .lgst-flag{opacity:1} .lgst-row.is-flagged{border-color:color-mix(in srgb,var(--lg-accent) 40%,transparent);background:color-mix(in srgb,var(--lg-accent) 7%,#FFFDF9)} /* per-row choreography: appear, spin, resolve */ .lgst-row{animation:lgstRow var(--lg-dur) var(--lg-ease) infinite} .lgst-row .lgst-wait{animation:lgstWait var(--lg-dur) linear infinite} .lgst-row .lgst-pass,.lgst-row .lgst-flag{animation:lgstDone var(--lg-dur) var(--lg-ease) infinite} .lgst-row.is-flagged{animation:lgstRowFlag var(--lg-dur) var(--lg-ease) infinite} .lgst-row.r1,.lgst-row.r1 .lgst-wait,.lgst-row.r1 .lgst-pass,.lgst-row.r1 .lgst-flag{animation-delay:calc(var(--lg-dur) * .02)} .lgst-row.r2,.lgst-row.r2 .lgst-wait,.lgst-row.r2 .lgst-pass,.lgst-row.r2 .lgst-flag{animation-delay:calc(var(--lg-dur) * .07)} .lgst-row.r3,.lgst-row.r3 .lgst-wait,.lgst-row.r3 .lgst-pass,.lgst-row.r3 .lgst-flag{animation-delay:calc(var(--lg-dur) * .12)} .lgst-row.r4,.lgst-row.r4 .lgst-wait,.lgst-row.r4 .lgst-pass,.lgst-row.r4 .lgst-flag{animation-delay:calc(var(--lg-dur) * .17)} @keyframes lgstRow{ 0%{opacity:0;transform:translateY(5px)} 5%,100%{opacity:1;transform:none} } @keyframes lgstRowFlag{ 0%{opacity:0;transform:translateY(5px);border-color:rgba(43,38,32,.11);background:#FFFDF9} 5%,20%{opacity:1;transform:none;border-color:rgba(43,38,32,.11);background:#FFFDF9} 26%,100%{opacity:1;transform:none;border-color:color-mix(in srgb,var(--lg-accent) 40%,transparent);background:color-mix(in srgb,var(--lg-accent) 7%,#FFFDF9)} } @keyframes lgstWait{ 0%,6%{opacity:0} 8%,20%{opacity:1} 24%,100%{opacity:0} } @keyframes lgstDone{ 0%,22%{opacity:0;transform:translateX(4px)} 27%,100%{opacity:1;transform:none} } /* the "+N more" row — breadth without a chip wall */ .lgst-more{ display:flex;align-items:center;gap:9px; padding:7px 11px;border-radius:9px; border:1px dashed rgba(43,38,32,.2); font-size:11.5px;font-weight:650;color:rgba(43,38,32,.5); animation:lgstMore var(--lg-dur) var(--lg-ease) infinite; } .lgst-dots{display:inline-flex;gap:3px;flex:none} .lgst-dots i{width:3px;height:3px;border-radius:50%;background:rgba(43,38,32,.34);animation:lgstBlink 1.4s ease-in-out infinite} .lgst-dots i:nth-child(2){animation-delay:.18s} .lgst-dots i:nth-child(3){animation-delay:.36s} @keyframes lgstBlink{0%,100%{opacity:.3}50%{opacity:1}} @keyframes lgstMore{ 0%,26%{opacity:0} 34%,100%{opacity:1} } /* the finding */ .lgst-finding{ position:relative;margin-top:1px; display:flex;flex-direction:column;gap:7px; padding:11px 13px;border-radius:11px; border:1px solid color-mix(in srgb,var(--lg-accent) 34%,transparent); background:#FFFDF9; box-shadow:0 14px 32px rgba(43,38,32,.1); animation:lgstFinding var(--lg-dur) var(--lg-ease) infinite; } .lgst-finding-text{font-size:12.5px;line-height:1.45;font-weight:500;color:rgba(43,38,32,.86)} .lgst-finding-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px} .lgst-btn{ display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:100px; background:var(--lg-accent);color:#FFF;font-size:11px;font-weight:700;white-space:nowrap; } .lgst-owner{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:rgba(43,38,32,.55)} @keyframes lgstFinding{ 0%,40%{opacity:0;transform:translateY(8px)} 47%,100%{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){ .lgst-change,.lgst-row,.lgst-row .lgst-wait,.lgst-row .lgst-pass,.lgst-row .lgst-flag, .lgst-more,.lgst-dots i,.lgst-finding{animation:none!important;opacity:1!important;transform:none!important} .lgst-row .lgst-wait{opacity:0!important} }