/* ===================================================================== AIDA Labs Toolbox -- five card components in AIDA Labs branding. Needs: shared/aidalabs.css (brand tokens) loaded first. Credits (all MIT, via freefrontend.com/css-cards) are in toolbox/CREDITS.md. .al-pop 3D Depth Parallax Pop-Out Cards (after mubangadv) .al-glow Dynamic Image Drop Shadow Cards (after Kriss Steindals) .al-ribbon Ribbon Hover Leaderboard (after supah / Fabio Ottaviani) .al-holo Holographic Project Cards (adapted from Mandy Nicole) .al-notch Notched Accordion Gallery (adapted from Chris Bolson) ===================================================================== */ /* ---------- shared "art" fills (stand-ins for photos) ---------- */ .al-art-gold{background: radial-gradient(120% 80% at 80% 10%, rgba(215,175,89,.55), transparent 60%), radial-gradient(90% 70% at 10% 90%, rgba(184,146,62,.45), transparent 60%), linear-gradient(135deg,#2A2117,#3A2E1C 55%,#1A1512)} .al-art-blue{background: radial-gradient(120% 80% at 85% 15%, rgba(127,163,201,.55), transparent 60%), radial-gradient(90% 70% at 10% 90%, rgba(73,105,140,.55), transparent 60%), linear-gradient(135deg,#141C25,#1F2A36 55%,#121014)} .al-art-teal{background: radial-gradient(120% 80% at 80% 10%, rgba(164,203,217,.45), transparent 60%), radial-gradient(90% 70% at 15% 85%, rgba(111,207,151,.30), transparent 60%), linear-gradient(135deg,#15201F,#1F2A36 60%,#121014)} .al-art-ember{background: radial-gradient(120% 80% at 80% 10%, rgba(224,122,106,.50), transparent 60%), radial-gradient(90% 70% at 10% 90%, rgba(215,175,89,.35), transparent 60%), linear-gradient(135deg,#2A1A17,#382E2A 55%,#141110)} .al-art-stone{background: radial-gradient(120% 80% at 80% 10%, rgba(201,189,178,.35), transparent 60%), radial-gradient(90% 70% at 10% 90%, rgba(94,80,74,.6), transparent 60%), linear-gradient(135deg,#2F2724,#382E2A 55%,#1A1512)} /* fine grid texture laid over any art fill */ .al-art-grid{position:relative} .al-art-grid::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background-image: linear-gradient(rgba(243,236,228,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(243,236,228,.06) 1px,transparent 1px); background-size:28px 28px; } /* ===================================================================== 1. .al-pop -- 3D Depth Parallax Pop-Out card Markup:
SVG emblem

Title

Text

 JS (toolbox.js) adds the cursor-follow tilt with requestAnimationFrame. ===================================================================== */ .al-pop-row{display:grid;gap:36px 28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))} .al-pop{ --rx:0deg;--ry:0deg; min-width:0;display:block;text-decoration:none;color:var(--al-text); perspective:900px; } .al-pop-stage{ position:relative;aspect-ratio:4/5;max-height:380px;width:100%;border-radius:12px; transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .12s linear; } .al-pop-stage > *{position:absolute;inset:0;border-radius:12px} .al-pop-scene{ transform:translateZ(0); box-shadow:0 30px 50px -18px rgba(0,0,0,.85); overflow:hidden; } .al-pop-frame{ inset:18px;border:3px solid var(--al-gold);border-radius:6px; box-shadow:0 0 16px var(--al-gold-glow), inset 0 0 16px var(--al-gold-glow); transform:translateZ(40px);transition:border-color .35s,box-shadow .35s; } .al-pop-cutout{ display:grid;place-items:center;transform:translateZ(80px);pointer-events:none; } .al-pop-cutout svg{width:46%;height:auto;filter:drop-shadow(0 18px 18px rgba(0,0,0,.6))} .al-pop-shadow{ /* blurred floor shadow */ inset:auto 10% -26px 10% !important;height:30px;border-radius:50% !important; background:rgba(0,0,0,.7);filter:blur(14px);transform:translateZ(-40px); } .al-pop-body{padding:22px 4px 0} .al-pop-body h3{font-size:24px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em} .al-pop-body p{font-size:17px;color:var(--al-sub);margin:0} .al-pop-body .al-tag{margin-top:12px} .al-pop:hover .al-pop-frame,.al-pop:focus-visible .al-pop-frame{ border-color:var(--al-text); box-shadow:0 0 22px rgba(255,255,255,.55), inset 0 0 22px rgba(255,255,255,.4); } .al-pop:hover .al-pop-body h3{color:var(--al-gold)} .al-pop:focus-visible{outline:3px solid var(--al-gold);outline-offset:8px;border-radius:12px} /* ===================================================================== 2. .al-glow -- Dynamic Image Drop Shadow card The card's art is duplicated underneath, pushed down and blurred, so the glow always matches the card's colours. Markup:
LabelNote

Title

Text

===================================================================== */ .al-glow-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:44px 28px} .al-glow-grid > .al-glow{flex:1 1 320px;max-width:380px} .al-glow{position:relative;isolation:isolate} .al-glow-shadow{ position:absolute;inset:14% 6% -6% 6%;border-radius:16px;z-index:-1; filter:blur(26px) saturate(1.6);opacity:.75;transition:opacity .35s,transform .35s; } .al-glow-card{ position:relative;border-radius:16px;min-height:270px;padding:26px; display:flex;flex-direction:column;overflow:hidden; border:1px solid rgba(243,236,228,.12);transition:transform .35s; } .al-glow-meta{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:rgba(243,236,228,.85);position:relative;z-index:1} .al-glow-card h3{margin-top:auto;font-size:27px;position:relative;z-index:1} .al-glow-card p{font-size:17px;color:rgba(243,236,228,.85);margin:0;position:relative;z-index:1} .al-glow-icon{position:absolute;right:22px;bottom:22px;width:38px;height:38px;border-radius:50%; border:1.5px solid rgba(243,236,228,.6);display:grid;place-items:center;z-index:1} .al-glow:hover .al-glow-card{transform:translateY(-6px) scale(1.02)} .al-glow:hover .al-glow-shadow{opacity:1;transform:translateY(10px)} /* ===================================================================== 3. .al-ribbon -- Ribbon Hover Leaderboard CSS counters number the rows; hovering a row pulls it forward and the folded ribbon ends appear at each side. Markup:
Title
  1. Row titleDetail
    2. ...
===================================================================== */ .al-ribbon{max-width:880px;margin-inline:auto;border-radius:12px;background:var(--al-bg); box-shadow:0 30px 60px -20px rgba(0,0,0,.8)} .al-ribbon-head{display:flex;align-items:center;gap:14px;padding:22px 28px; background:var(--al-ink);border-radius:12px 12px 0 0;border-bottom:1px solid var(--al-line); font-family:var(--al-serif);font-size:24px;font-weight:700} .al-ribbon-head svg{color:var(--al-gold);flex:0 0 auto} .al-ribbon ol{list-style:none;margin:0;padding:0;counter-reset:al-rank} .al-ribbon li{ counter-increment:al-rank;position:relative; display:grid;grid-template-columns:52px 1fr;column-gap:16px;align-items:start; padding:18px 28px;background:var(--al-surface); border-bottom:1px solid var(--al-line); transition:transform .25s ease,background .25s ease,box-shadow .25s ease; } .al-ribbon li:nth-child(even){background:var(--al-surface2)} .al-ribbon li:last-child{border-radius:0 0 12px 12px;border-bottom:0} .al-ribbon li::before{ content:counter(al-rank);grid-row:1 / span 2; width:40px;height:40px;border-radius:50%;display:grid;place-items:center; background:var(--al-gold);color:var(--al-ink);font-weight:800;font-size:18px; } .al-ribbon li b{font-size:19px;color:var(--al-text)} .al-ribbon li span{font-size:17px;color:var(--al-sub)} /* fold triangles */ .al-ribbon li::after{ content:"";position:absolute;left:-12px;right:-12px;top:100%;height:0;pointer-events:none; border-top:8px solid transparent;opacity:0;transition:opacity .25s; background: linear-gradient(to bottom left, var(--al-gold-d) 50%, transparent 50%) left top/12px 8px no-repeat, linear-gradient(to bottom right, var(--al-gold-d) 50%, transparent 50%) right top/12px 8px no-repeat; } .al-ribbon li:hover{ z-index:2;transform:scale(1.035);background:var(--al-gold-bg); box-shadow:0 10px 26px rgba(0,0,0,.6);border-radius:4px; } .al-ribbon li:hover b{color:var(--al-gold)} .al-ribbon li:hover::after{opacity:1;height:8px} @media (max-width:600px){.al-ribbon li{padding:16px 18px;grid-template-columns:44px 1fr}} /* ===================================================================== 4. .al-holo -- Holographic Project Card Three stacked previews fan out on hover; a slow holographic sheen moves across the card. Full-width card: add .al-holo--wide. Markup:
label

Title

Text

===================================================================== */ @property --al-holo-a{syntax:"";inherits:false;initial-value:0deg} .al-holo-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))} .al-holo{ position:relative;border-radius:16px;overflow:hidden;isolation:isolate; background:linear-gradient(180deg,var(--al-surface2),var(--al-bg)); border:1px solid var(--al-line);display:grid;grid-template-rows:auto 1fr; text-decoration:none;color:var(--al-text); } .al-holo--wide{grid-column:1 / -1} .al-holo::before{ /* holographic sheen */ content:"";position:absolute;inset:-40%;z-index:-1;opacity:.22; background:conic-gradient(from var(--al-holo-a), rgba(215,175,89,.0),rgba(215,175,89,.9),rgba(127,163,201,.9), rgba(164,203,217,.8),rgba(224,122,106,.7),rgba(215,175,89,.0)); filter:blur(60px);animation:al-holo-spin 14s linear infinite; } @keyframes al-holo-spin{to{--al-holo-a:360deg}} .al-holo-stack{ position:relative;height:230px;margin:22px 22px 0;border-radius:10px; background:rgba(20,17,16,.55);border-bottom:1px solid var(--al-line2); display:flex;align-items:center;justify-content:center;overflow:hidden; } .al-holo--wide .al-holo-stack{height:280px} .al-holo-pic{ position:absolute;width:42%;aspect-ratio:4/3;border-radius:8px; box-shadow:0 14px 30px rgba(0,0,0,.65);border:1px solid rgba(243,236,228,.15); display:grid;place-items:center;font-family:var(--al-serif);font-size:20px;font-weight:700; color:var(--al-text);text-align:center;padding:10px; transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s; } .al-holo-pic:nth-child(1){transform:translateX(-34%) rotate(-5deg) scale(.88);filter:grayscale(.85) brightness(.7)} .al-holo-pic:nth-child(2){z-index:2;transform:translateY(-4%)} .al-holo-pic:nth-child(3){transform:translateX(34%) rotate(5deg) scale(.88);filter:grayscale(.85) brightness(.7)} .al-holo:hover .al-holo-pic:nth-child(1){transform:translateX(-62%) rotate(-7deg) scale(.92);filter:none} .al-holo:hover .al-holo-pic:nth-child(3){transform:translateX(62%) rotate(7deg) scale(.92);filter:none} .al-holo:hover .al-holo-pic:nth-child(2){transform:translateY(-8%) scale(1.06)} .al-holo-body{padding:22px 26px 26px} .al-holo-body h3{font-size:26px;margin-bottom:8px} .al-holo:hover .al-holo-body h3{color:var(--al-gold)} .al-holo-body p{color:var(--al-sub);font-size:17px} .al-holo-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .al-holo-tags li{font-size:14px;font-weight:700;padding:4px 10px;border-radius:999px; background:var(--al-gold-bg);color:var(--al-gold);border:1px solid rgba(215,175,89,.35)} .al-holo-tags li.b{background:var(--al-blue-bg);color:var(--al-blue-l);border-color:rgba(127,163,201,.35)} /* ===================================================================== 5. .al-notch -- Notched Accordion Gallery (4 panels) Panels overlap by one grid column; the hovered (or focused) panel widens and its number and caption appear. Notched corners where supported. Markup:
TitleText
... x4
===================================================================== */ .al-notch{ --cols:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; display:grid;grid-template-columns:var(--cols);width:100%;aspect-ratio:3/1;min-height:320px; transition:grid-template-columns .35s ease-in-out;counter-reset:al-notch; } .al-notch:has(> :nth-child(1):is(:hover,:focus-visible)){--cols:6fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr} .al-notch:has(> :nth-child(2):is(:hover,:focus-visible)){--cols:1fr 1fr 1fr 6fr 1fr 1fr 1fr 1fr 1fr} .al-notch:has(> :nth-child(3):is(:hover,:focus-visible)){--cols:1fr 1fr 1fr 1fr 1fr 6fr 1fr 1fr 1fr} .al-notch:has(> :nth-child(4):is(:hover,:focus-visible)){--cols:1fr 1fr 1fr 1fr 1fr 1fr 1fr 6fr 1fr} .al-notch > *{ position:relative;overflow:hidden;grid-row:1;outline:none; border:5px solid var(--al-ink);border-radius:0 0 0 30%/0 0 0 50%;corner-shape:notch; transition:border-radius .35s ease-in-out,border-color .35s;counter-increment:al-notch; } .al-notch > :nth-child(1){grid-column:1 / span 3;border-radius:0 0 0 0/0 0 0 200px} .al-notch > :nth-child(2){grid-column:3 / span 3} .al-notch > :nth-child(3){grid-column:5 / span 3} .al-notch > :nth-child(4){grid-column:7 / span 3} .al-notch > :is(:hover,:focus-visible), .al-notch > :is(:hover,:focus-visible) + *{border-radius:0} .al-notch > :is(:hover,:focus-visible){border-color:var(--al-gold)} .al-notch > *::before{ content:counter(al-notch) ".";position:absolute;top:12px;left:18px;z-index:1; font-family:var(--al-serif);font-size:40px;font-weight:700;color:var(--al-gold); transform:scale(.7);transform-origin:left top;opacity:.75;transition:transform .2s ease-in-out,opacity .2s; } .al-notch > :is(:hover,:focus-visible)::before{transform:scale(1);opacity:1} .al-notch-cap{ position:absolute;left:18px;right:36%;top:66px;z-index:1; text-shadow:0 2px 10px rgba(0,0,0,.8);transition:right .3s; } /* the hovered panel sits on top of its neighbour, so its caption can use the full width */ .al-notch > :is(:hover,:focus-visible){z-index:2} .al-notch > :is(:hover,:focus-visible) .al-notch-cap{right:18px} .al-notch-cap b{display:block;font-family:var(--al-serif);font-size:22px;line-height:1.2} .al-notch-cap span{display:block;font-size:17px;color:var(--al-text);max-height:0;opacity:0;overflow:hidden; transition:max-height .3s .1s,opacity .25s .15s} .al-notch > :is(:hover,:focus-visible) .al-notch-cap span{max-height:120px;opacity:1;margin-top:6px} /* small screens: stack the panels and show every caption */ /* phones (standard: iPhone 12 mini, 375px wide) */ @media (max-width:600px){ .al-pop-row{gap:28px} .al-pop-stage{aspect-ratio:auto;height:200px} .al-pop-cutout svg{width:30%} .al-pop-frame{inset:14px} } @media (max-width:760px){ .al-notch{display:grid;grid-template-columns:1fr;aspect-ratio:auto;gap:10px} .al-notch > *{grid-column:1 !important;grid-row:auto;min-height:0;border-radius:12px !important;border-width:2px; padding:64px 18px 18px} .al-notch-cap{position:static} .al-notch > *::before{transform:scale(1);opacity:1} .al-notch-cap{right:18px} .al-notch-cap span{max-height:none;opacity:1;margin-top:6px} }