AR Sculptures — Interactive Works

Augmented-reality sculptures blending science, light and metamodern beauty.

:root{ --bg:#0B0B0F; --card:#111219; --border:#1E2030; --txt:#C9CBD3; --head:#fff; --acc:#7A00FF; --acc2:#9C3CFF; } .ap-cases{max-width:1200px;margin:0 auto;padding:48px 16px;color:var(--txt)} .ap-hero h1{color:var(--head);font:700 48px/1.1 "Space Grotesk",system-ui,sans-serif;margin:0 0 8px} .ap-hero p{max-width:720px;margin:0 0 16px} .ap-hero-cta{display:flex;gap:12px;margin:10px 0 24px} .ap-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--acc);color:#0B0B0F;padding:12px 18px;border-radius:12px;text-decoration:none;font:700 15px Manrope,sans-serif} .ap-btn:hover{background:var(--acc2)} .ap-ghost{background:transparent;color:var(--head);border:1px solid var(--acc)} .ap-ghost:hover{background:var(--acc);color:#0B0B0F} .ap-filters{position:sticky;top:0;z-index:5;display:flex;gap:8px;flex-wrap:wrap;padding:12px 0 16px;background:linear-gradient(#0B0B0F,rgba(11,11,15,.6))} .ap-filters input, .ap-filters select{background:#0E1018;border:1px solid var(--border);color:var(--txt);border-radius:10px;padding:10px 12px} .ap-toggle{display:inline-flex;align-items:center;gap:8px;color:var(--txt)} .ap-grid{display:grid;grid-template-columns:1fr;gap:18px} @media (min-width:980px){ .ap-grid{gap:26px} } .ap-card{ display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center; background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden; transition:transform .25s, box-shadow .25s; } .ap-card:nth-child(2n){ grid-template-columns:.8fr 1.2fr; } /* чередование лево/право */ @media (max-width:980px){ .ap-card, .ap-card:nth-child(2n){ grid-template-columns:1fr; } } .ap-media{position:relative;aspect-ratio:16/9;overflow:hidden} .ap-media img, .ap-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .ap-media video{opacity:0;transition:opacity .25s} .ap-card:hover .ap-media video{opacity:1} .ap-meta{padding:12px 16px 16px} .ap-meta h3{color:var(--head);font:700 28px/1.2 "Space Grotesk",system-ui,sans-serif;margin:0 0 6px} .ap-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px} .ap-tag{font:600 12px/1 Manrope;background:transparent;border:1px solid var(--border);color:#AEB3C2;padding:6px 8px;border-radius:999px} .ap-excerpt{margin:0 0 12px;color:var(--txt)} .ap-ctas{display:flex;gap:10px;flex-wrap:wrap} .ap-ctas a{border:1px solid var(--acc);border-radius:10px;padding:10px 12px;color:#fff;text-decoration:none} .ap-ctas a:hover{background:var(--acc);color:#0B0B0F} .ap-card:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(122,0,255,.15)} .ap-more{display:flex;justify-content:center;margin:24px 0 8px}