@import "https://unpkg.com/open-props"; @property --door-number { syntax: ""; initial-value: 0; inherits: true; } @keyframes arrow { 0% { transform: translateX(-0.1em); } 50% { transform: translateX(0.1em); } 100% { transform: translateX(-0.1em); } } :root { interpolate-size: allow-keywords; } @supports (view-transition-name: none) { ::view-transition-group(*) { z-index: 100; animation-duration: 600ms; animation-timing-function: ease-out; } } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { font-family: system-ui, sans-serif; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #002c1d; background-size: 300px 300px; background-blend-mode: color-dodge; background-image: url('data:image/svg+xml,'); } iframe { aspect-ratio: 16/9; width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { font-family: "Itim", cursive; font-weight: 400; font-style: normal; } h1 { text-align: center; font-size: 2em; margin: 0.5em auto; } main { aspect-ratio: 4/6; --container-size-w: min( var(--viewport-width), calc(var(--viewport-height) * 4 / 6) ); --container-size-h: min( var(--viewport-height), calc(var(--viewport-width) * 6 / 4) ); width: var(--container-size-w); height: var(--container-size-h); box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto; --gap: 16px; } .calendar-container { width: calc(100% - 2 * var(--gap)); height: calc(100% - 2 * var(--gap)); --calendar-size-w: calc(var(--container-size-w) - var(--gap) * 2); --calendar-size-h: calc(var(--container-size-h) - var(--gap) * 2); --cell-width: calc(var(--calendar-size-w) / 4); --cell-height: calc(var(--calendar-size-h) / 6); } .day-content { --audio-player-cover-size: 100px; --audio-player-background: transparent; --audio-player-progress-color: rgba(255, 255, 255, 0.7); --audio-player-play-button-background: rgba(255, 255, 255, 0.7); --audio-player-play-button-hover-background: rgba(255, 255, 255, 0.9); --audio-player-play-button-icon-color: #000; position: relative; width: calc(100% - 2 * var(--gap)); height: calc(100% - 2 * var(--gap)); box-sizing: border-box; background: #fffcf0 url("/assets/paper-texture.png"); padding: var(--size-fluid-3); overflow-y: auto; scrollbar-width: thin; /* Subtle shadow to give impression of sheet of paper */ border: 1px solid white; border-bottom-color: #444; border-right-color: #444; box-shadow: 5px 7px 12px 1px rgb(0 0 0 / 65%); font-size: var(--font-size-2); &.locked { overflow: hidden; &::before { content: "🔒"; display: grid; place-items: center; position: absolute; inset: 0; background: white url("/assets/paper-texture.png"); z-index: 2; font-size: 3em; } } hr { margin: 2rem 0; border: none; height: 1px; background: #000; background: repeating-linear-gradient(90deg,#000,#000 4px,transparent 4px,transparent 8px); } .content-header:has(img) { margin: calc(-1 * var(--size-fluid-3)); margin-bottom: 0; img { width: 100%; height: auto; } } table { thead { text-align: left; } } .story-content, .puzzle-content { display: grid; grid-template-columns: 1fr; grid-auto-flow: row; gap: var(--size-fluid-2); & > * { margin: 0; padding: 0; } ul, ol { padding-left: 1.5em; li { margin-bottom: 0.5em; } } } audio, img { width: 100%; } img { height: auto; } .book-left, .book-right { display: grid; grid-template-columns: minmax(25%, 200px) minmax(60%, 1fr); grid-template-areas: "image content"; gap: var(--size-fluid-2); margin-bottom: var(--size-fluid-2); > * { margin: 0; } img { width: 100%; height: auto; grid-area: image; } p { grid-area: content; b { display: block; margin-bottom: 0.3em; } } } .book-right { grid-template-columns: minmax(60%, 1fr) minmax(25%, 200px); grid-template-areas: "content image"; } .back-link { position: relative; display: block; margin-top: 2em; button { background: transparent; width: 100%; border: none; padding: 0.5em 1em; font-size: larger; text-decoration: underline; &::before { content: "←"; font-weight: bold; display: inline-block; margin-right: 0.4em; animation: arrow 2s infinite; } } } .puzzle-content { .puzzle-form { border: 2px solid rgba(0, 0, 0, 0.4); border-radius: 8px; background: white; padding: 2px; box-sizing: border-box; transition: border-color 0.3s ease-out, background 0.3s ease-out; .puzzle-success-message { color: transparent; max-height: 0; transition: max-height 1s ease-out, color 0.25s ease-in, padding 0.25s ease-in; padding: 0 0.5em; box-sizing: border-box; } @supports (interpolate-size: allow-keywords) { .puzzle-success-message { max-height: none; height: 0; transition: height 0.25s ease-in, color 0.25s ease-in, padding 0.25s ease-in; } } &.success { border-color: #237625; background: #d4f3d0; .puzzle-success-message { max-height: 500px; padding: 0.2em 0.5em; color: black; } @supports (interpolate-size: allow-keywords) { .puzzle-success-message { height: auto; } } } input { width: 100%; padding: 0.5em; font-size: larger; box-sizing: border-box; border: none; background: transparent; :focus { outline: none; } } } } } .calendar-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); grid-template-areas: "door1 door2 door3 door4" "door5 door6 door7 door8" "door9 door10 door11 door12" "door13 door14 door15 door16" "door17 door18 door19 door20" "door21 door22 door23 door24"; position: relative; gap: var(--gap); width: 100%; height: 100%; box-sizing: border-box; padding: var(--gap); background-image: url("/assets/adventni-kalendar-main-mensi.jpg"); background-size: var(--calendar-size-w) var(--calendar-size-h); background-position: 0 0; } .door { --col: calc(mod(var(--door-number) - 1, 4)); --row: calc(round(down, (var(--door-number) - 1) / 4)); position: relative; a { text-decoration: none; position: absolute; inset: 0; .door-content { position: absolute; inset: 0; z-index: 1; background: url("/assets/paper-texture.png"); transition: box-shadow 0.3s ease-out; } .door-front { position: absolute; inset: -2px; z-index: 3; width: calc(100% + 4px); height: calc(100% + 4px); display: flex; align-items: center; justify-content: center; transform-origin: left; transform-style: preserve-3d; transition: transform 0.3s ease-out; will-change: transform; backface-visibility: hidden; outline: 2px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.5); cursor: pointer; background-image: url("/assets/adventni-kalendar-main-mensi.jpg"); background-size: var(--calendar-size-w) var(--calendar-size-h); background-repeat: no-repeat; opacity: 1; } .door-number { color: rgba(255, 255, 255, 1); font-size: calc(var(--calendar-size-h) / 20); font-weight: bold; text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.6); } } } /* Only apply hover effect to unlocked doors */ .door.unlocked a:hover .door-front { z-index: 4; transform: perspective(1000px) rotateY(-35deg); } .door.opened a .door-front { transform: perspective(1000px) rotateY(-30deg); } /* When actually opening, use a longer animation */ .door.opening a .door-front { transform: perspective(1000px) rotateY(-105deg) !important; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* Optional: add subtle shadow on hover */ .door.unlocked a:hover .door-content { box-shadow: inset -2px 0px 8px rgba(0, 0, 0, 0.6); } .door.opened a .door-content { box-shadow: inset -2px 0px 8px rgba(0, 0, 0, 0.8); } .door .door-front { background-position-x: calc( (var(--cell-width) * var(--col) * -1) - (var(--gap) * (1 - var(--col) * 0.25)) ); background-position-y: calc( (var(--cell-height) * var(--row) * -1) - (var(--gap) * (1 - var(--row) * 0.25)) ); } /** * Optional: Shake animation when door is locked. */ .door.shake a .door-front { animation: shake 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }