/* ------------------------------------------------------------------ THEME 5 — "galeria-atelie" A gallery hanging warm paper works. Galeria's white-cube calm — generous margins, the matted hung artwork, slow eased dissolves, quiet caption typography — but the wall is warm ivory instead of clinical white, the matte carries handmade-paper grain and fiber, and the chrome is atelier warm glass at galeria discretion. Scope: everything under body[data-theme="galeria-atelie"]. Content of each slide untouched; only the frame and chrome change. ------------------------------------------------------------------ */ body[data-theme="galeria-atelie"] { background: #f4efe3; } /* --- the warm wall ------------------------------------------------- */ body[data-theme="galeria-atelie"] .card { background: radial-gradient(120% 90% at 50% 0%, #fbf7ec 0%, #f4efe3 55%, #ece4d2 100%); transition: opacity 0.75s cubic-bezier(0.33, 1, 0.68, 1), visibility 0s linear 0.75s; } body[data-theme="galeria-atelie"] .card.on { transition: opacity 0.75s cubic-bezier(0.33, 1, 0.68, 1); } /* wall texture: atelier's fiber weave and grain speckle, laid over the wall only (z below the hung artwork), so the whitespace itself reads as handmade paper rather than painted drywall */ body[data-theme="galeria-atelie"] .card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: multiply; background: repeating-linear-gradient(93deg, rgba(120, 96, 62, 0.026) 0px, rgba(120, 96, 62, 0) 2px, rgba(120, 96, 62, 0) 5px, rgba(120, 96, 62, 0.018) 7px, rgba(120, 96, 62, 0) 9px), repeating-linear-gradient(2deg, rgba(140, 112, 76, 0.02) 0px, rgba(140, 112, 76, 0) 3px, rgba(140, 112, 76, 0) 8px, rgba(140, 112, 76, 0.014) 10px, rgba(140, 112, 76, 0) 13px), repeating-radial-gradient(circle at 17% 31%, rgba(105, 84, 56, 0.032) 0px, rgba(105, 84, 56, 0) 1.5px, rgba(105, 84, 56, 0) 4px), repeating-radial-gradient(circle at 73% 64%, rgba(105, 84, 56, 0.028) 0px, rgba(105, 84, 56, 0) 1px, rgba(105, 84, 56, 0) 3px), radial-gradient(ellipse 125% 110% at 50% 40%, rgba(255, 255, 255, 0) 60%, rgba(163, 133, 92, 0.06) 92%, rgba(140, 110, 72, 0.1) 100%); } /* --- the hung artwork ---------------------------------------------- */ body[data-theme="galeria-atelie"] .card-inner { transform: scale(0.855) translateY(-1.9%); transform-origin: 50% 50%; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 2px rgba(74, 56, 34, 0.06), 0 12px 44px -18px rgba(92, 68, 36, 0.22), 0 34px 80px -46px rgba(92, 68, 36, 0.18); transition: box-shadow 0.8s ease; } /* inside the frame: atelier's paper — grain, fiber, and a warm ivory cast that turns the artwork's flat whites into handmade sheet */ body[data-theme="galeria-atelie"] .card-inner::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 9; border-radius: inherit; mix-blend-mode: multiply; background: repeating-linear-gradient(93deg, rgba(120, 96, 62, 0.028) 0px, rgba(120, 96, 62, 0) 2px, rgba(120, 96, 62, 0) 5px, rgba(120, 96, 62, 0.02) 7px, rgba(120, 96, 62, 0) 9px), repeating-linear-gradient(2deg, rgba(140, 112, 76, 0.022) 0px, rgba(140, 112, 76, 0) 3px, rgba(140, 112, 76, 0) 8px, rgba(140, 112, 76, 0.016) 10px, rgba(140, 112, 76, 0) 13px), repeating-radial-gradient(circle at 17% 31%, rgba(105, 84, 56, 0.035) 0px, rgba(105, 84, 56, 0) 1.5px, rgba(105, 84, 56, 0) 4px), repeating-radial-gradient(circle at 73% 64%, rgba(105, 84, 56, 0.03) 0px, rgba(105, 84, 56, 0) 1px, rgba(105, 84, 56, 0) 3px), linear-gradient(160deg, rgba(252, 248, 240, 1) 0%, rgba(250, 245, 234, 1) 55%, rgba(248, 241, 228, 1) 100%); } /* the saturated pigment sheets (blue cover, blue/teal/pink fields, red back) keep only grain and fiber — texture without a color tax */ body[data-theme="galeria-atelie"] .card:has(.c02) .card-inner::after, body[data-theme="galeria-atelie"] .card:has(.c03) .card-inner::after, body[data-theme="galeria-atelie"] .card:has(.c04) .card-inner::after, body[data-theme="galeria-atelie"] .card:has(.c05) .card-inner::after, body[data-theme="galeria-atelie"] .card:has(.c14) .card-inner::after, body[data-theme="galeria-atelie"] .card:has(.c24) .card-inner::after { background: repeating-linear-gradient(93deg, rgba(120, 96, 62, 0.028) 0px, rgba(120, 96, 62, 0) 2px, rgba(120, 96, 62, 0) 5px, rgba(120, 96, 62, 0.02) 7px, rgba(120, 96, 62, 0) 9px), repeating-linear-gradient(2deg, rgba(140, 112, 76, 0.022) 0px, rgba(140, 112, 76, 0) 3px, rgba(140, 112, 76, 0) 8px, rgba(140, 112, 76, 0.016) 10px, rgba(140, 112, 76, 0) 13px), repeating-radial-gradient(circle at 17% 31%, rgba(105, 84, 56, 0.035) 0px, rgba(105, 84, 56, 0) 1.5px, rgba(105, 84, 56, 0) 4px), repeating-radial-gradient(circle at 73% 64%, rgba(105, 84, 56, 0.03) 0px, rgba(105, 84, 56, 0) 1px, rgba(105, 84, 56, 0) 3px); } /* --- typographic rhythm: relaxed, editorial ------------------------ */ body[data-theme="galeria-atelie"] .card-inner p { line-height: 1.6; letter-spacing: 0.01em; } body[data-theme="galeria-atelie"] .card-inner li { line-height: 1.56; letter-spacing: 0.008em; } /* --- outline capsule: a wall label in warm glass -------------------- */ /* galeria's geometry and quiet caption type; atelier's warm-glass material — ghosted ivory, warm hairline, warm shadow */ body[data-theme="galeria-atelie"] #outline { height: 138px; bottom: clamp(14px, 3vh, 34px); padding: 0.4rem 1.1rem; background: linear-gradient(135deg, rgba(253, 249, 240, 0.62), rgba(251, 246, 234, 0.4) 45%, rgba(253, 249, 240, 0.5)); -webkit-backdrop-filter: blur(15px) saturate(0.95) brightness(1.06); backdrop-filter: blur(15px) saturate(0.95) brightness(1.06); border: 1px solid rgba(214, 196, 162, 0.5); border-radius: 5px; box-shadow: 0 1px 2px rgba(92, 68, 36, 0.06), 0 12px 34px -16px rgba(92, 68, 36, 0.28), inset 0 1px 1px rgba(255, 252, 244, 0.7); letter-spacing: 0.02em; transition: box-shadow 0.6s ease; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%); } body[data-theme="galeria-atelie"] #outline:hover { box-shadow: 0 1px 2px rgba(92, 68, 36, 0.07), 0 16px 44px -16px rgba(92, 68, 36, 0.34), inset 0 1px 1px rgba(255, 252, 244, 0.75); } body[data-theme="galeria-atelie"] #outline .sec { letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; color: #4d3e2a; } body[data-theme="galeria-atelie"] #outline a { color: #33291d; opacity: 0.55; transition: opacity 0.4s ease; text-shadow: 0 1px 2px rgba(255, 252, 244, 0.4); } body[data-theme="galeria-atelie"] #outline a:hover { opacity: 0.92; } body[data-theme="galeria-atelie"] #outline a.here { opacity: 1; font-weight: 600; color: #2b2114; } body[data-theme="galeria-atelie"] #outline .list { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } /* --- mute: a matching small warm-glass capsule ---------------------- */ body[data-theme="galeria-atelie"] #mute, body[data-theme="galeria-atelie"] #vmute { bottom: clamp(14px, 3vh, 34px); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; background: linear-gradient(135deg, rgba(253, 249, 240, 0.6), rgba(250, 245, 232, 0.36)); -webkit-backdrop-filter: blur(14px) saturate(0.95) brightness(1.06); backdrop-filter: blur(14px) saturate(0.95) brightness(1.06); border: 1px solid rgba(214, 196, 162, 0.5); border-radius: 5px; box-shadow: 0 1px 2px rgba(92, 68, 36, 0.06), 0 12px 34px -16px rgba(92, 68, 36, 0.24), inset 0 1px 1px rgba(255, 252, 244, 0.7); color: #4d3e2a; opacity: 0.85; transition: opacity 0.5s ease, box-shadow 0.6s ease; } body[data-theme="galeria-atelie"] #mute:hover, body[data-theme="galeria-atelie"] #vmute:hover { opacity: 1; color: #2b2114; box-shadow: 0 1px 2px rgba(92, 68, 36, 0.07), 0 16px 44px -16px rgba(92, 68, 36, 0.32), inset 0 1px 1px rgba(255, 252, 244, 0.75); } /* --- theme tag pill, warmed to match -------------------------------- */ body[data-theme="galeria-atelie"] #themetag { background: rgba(250, 245, 234, 0.9); color: #5c4a32; }