/* ------------------------------------------------------------------ 有光的日子 — Edwin 的故事書 — styles A hardcover album on a sunlit table. Pages turn in 3D (CSS), flashbacks wash the screen during a turn, the room's light moves through the day as the reader goes on. ------------------------------------------------------------------ */ /* Full typefaces: used offline, and for any character a later edit adds. */ @font-face { font-family: "LXGW WenKai TC"; src: local("LXGW WenKai TC"), local("LXGWWenKaiTC-Regular"), url("../assets/fonts/LXGWWenKaiTC-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "LXGW WenKai TC"; src: local("LXGW WenKai TC Light"), local("LXGWWenKaiTC-Light"), url("../assets/fonts/LXGWWenKaiTC-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; } /* SUBSET-FONTS */ @font-face { font-family: "LXGW WenKai TC"; src: url("../assets/fonts/wenkai-regular-sub.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-007E, U+00B7, U+00D7, U+2013-2014, U+2026, U+2192, U+21BB, U+25B6, U+3001-3002, U+3008-300F, U+30FB, U+4E00, U+4E09-4E0B, U+4E0D, U+4E2D, U+4E45, U+4E4B, U+4E5F, U+4E86, U+4E8B, U+4E9B, U+4EAB, U+4EAE, U+4EBA, U+4ECA-4ECB, U+4ECD, U+4ED6, U+4EE5, U+4EFD, U+4F34, U+4F4D, U+4F4F, U+4F55, U+4F5C, U+4F60, U+4F7F, U+4F86, U+4F9D, U+4FBF, U+4FDD, U+4FE1, U+500B, U+5011-5012, U+5019, U+505A, U+505C, U+50CF, U+50F5, U+5145, U+5148-5149, U+514D, U+5165, U+5167-5169, U+5171, U+5176, U+5178, U+518D, U+51AC, U+51B7, U+51CD, U+51E1, U+51FA, U+5206, U+521D, U+5225, U+5230, U+523B, U+524D, U+52A0, U+52C9, U+52D5, U+52E2, U+5341, U+5348, U+5373, U+537B, U+539F, U+53BB, U+53C8, U+53CA-53CB, U+53D7, U+53E6, U+53EA, U+53EF, U+5403-5404, U+5408, U+540C, U+5411, U+5439, U+547C-547D, U+54EA, U+555F, U+558A, U+559C-559D, U+56DB, U+56DE, U+56E0, U+56FA, U+5708, U+570B, U+570D, U+5712-5713, U+571F, U+5728, U+5730, U+5750, U+5802, U+5805, U+5834, U+58C1, U+590F, U+5916, U+591A, U+591C, U+5927, U+5929-592A, U+592E, U+597D, U+5982, U+59CB, U+5B50, U+5B57, U+5B69, U+5B78, U+5B83, U+5B89, U+5B8C, U+5B9A, U+5BB6, U+5BB9, U+5BEB-5BEC, U+5C01, U+5C07, U+5C31, U+5C40, U+5C4B, U+5C71, U+5DF2, U+5E02, U+5E33, U+5E36, U+5E38, U+5E73-5E74, U+5E78, U+5E7E, U+5E8A, U+5E8F, U+5E97, U+5EA7, U+5EE3, U+5EF3, U+5EFA, U+5F35, U+5F37, U+5F48, U+5F62, U+5F71, U+5F77, U+5F7F, U+5F88, U+5F8C, U+5F97, U+5F9E, U+5FAE, U+5FB9, U+5FC3, U+5FEB, U+5FF5, U+5FFD, U+6025, U+6089, U+60F3, U+610F, U+611B, U+6162-6163, U+61B6, U+61F7, U+6210-6211, U+6216, U+6234, U+623F, U+624B, U+624D, U+6253, U+627E, U+628A, U+62C9, U+62CD, U+62F1, U+6301, U+6307, U+6309, U+6368, U+6392, U+639B, U+63A2, U+63A5, U+63D2, U+63DB, U+641E, U+642C, U+649E, U+64AD, U+64C7, U+64E0, U+6536, U+653E, U+6545, U+6559, U+6563, U+6574, U+6599, U+65AF-65B0, U+65B9, U+65BC, U+65C1, U+65C5, U+65E5, U+65E9, U+662F, U+6642, U+665A, U+665D, U+6668, U+666F, U+6696, U+66AB, U+66F2, U+66F4, U+66F8, U+66FC, U+66FF-6700, U+6703, U+6708-6709, U+670B, U+670D, U+671B, U+672A, U+672C, U+6771, U+677E, U+6821, U+6848, U+684C, U+689D, U+696D, U+6A02, U+6A13, U+6A21, U+6A23, U+6A5F, U+6A94, U+6AA2, U+6B21, U+6B61, U+6B63-6B65, U+6BB5, U+6BCD, U+6BCF, U+6BD4, U+6C23, U+6C92, U+6C99, U+6CB3, U+6CBE, U+6CD5, U+6CE5, U+6D3B, U+6D6E, U+6DDA, U+6DFA, U+6E05, U+6EAB, U+6ED1, U+6EFE-6EFF, U+6F02, U+6FD5, U+6FFE, U+7121, U+7136, U+7167, U+719F, U+71B1, U+71C8, U+71ED, U+7236, U+7246-7247, U+7279, U+7368, U+737B, U+73A9, U+7403, U+74B0, U+74F6, U+751F, U+7528, U+7531, U+7559, U+7562, U+7565, U+756B, U+7576, U+75BC, U+767B-767D, U+7684, U+76EE, U+76F4, U+76F8, U+770B, U+771F-7720, U+773C, U+775B, U+7761, U+7787, U+77E5, U+78B0, U+78DA, U+79AE, U+79D2, U+7A7A, U+7A7F, U+7A97, U+7ACB, U+7AD9, U+7B11, U+7B2C, U+7B46, U+7B49, U+7B97, U+7BC0, U+7BC9, U+7C73, U+7CCA, U+7D04-7D05, U+7D22, U+7D2F, U+7D42, U+7D66, U+7DA0, U+7DF4, U+7E3D, U+7E7C, U+7E8C, U+7FA4, U+7FD2, U+7FFB, U+8001, U+8033, U+8046, U+804A, U+8056, U+8072, U+807D, U+8096, U+809A, U+80FD, U+8173, U+81C9, U+81EA, U+8207, U+8209, U+8212, U+8272, U+82F1, U+8349, U+83DC, U+843D, U+8457, U+8584, U+85CF, U+862D, U+8655, U+881F, U+884C, U+8857, U+888D, U+88AB, U+88E1, U+88FD, U+897F, U+8981, U+898B, U+8996, U+89AA, U+89BA, U+89D2, U+8A18, U+8A31, U+8A71, U+8A8D, U+8A95, U+8AAA, U+8AB0, U+8AB2, U+8ACB, U+8B1D, U+8B58, U+8B80, U+8B8A, U+8B93, U+8CB7, U+8CF4, U+8D0F, U+8D70, U+8D77, U+8D85, U+8D95, U+8DD1, U+8DDF, U+8DEF, U+8E8D, U+8EAB, U+8F09, U+8F38, U+8F49, U+8FCE, U+8FD1, U+8FD4, U+9019, U+901B, U+9023, U+9032, U+904A-904B, U+904D-904E, U+9053, U+9060, U+9078, U+9084, U+908A, U+90A3, U+90FD, U+914D, U+9192, U+91CD, U+9215, U+93E1, U+9577, U+9580, U+9589, U+958B, U+9593, U+95B1, U+95CA, U+95DC, U+9644, U+966A, U+967D, U+9694, U+96BB, U+96D6, U+96D9, U+96E2-96E3, U+96E8, U+96F2, U+9700, U+9732, U+975C, U+9762, U+978B, U+97F3, U+97FF, U+9801-9802, U+9813, U+982D, U+9858, U+98A8, U+98EF, U+98F2, U+9905, U+9910, U+9996, U+99AC, U+9AD4, U+9AEE, U+9B27, U+9EBB-9EBC, U+9ED1, U+9EDE, U+9F61, U+FF01, U+FF08-FF09, U+FF0C, U+FF1A-FF1B, U+FF1F; } @font-face { font-family: "LXGW WenKai TC"; src: url("../assets/fonts/wenkai-light-sub.woff2") format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0020-007E, U+00B7, U+00D7, U+2013-2014, U+2026, U+2192, U+21BB, U+25B6, U+3001-3002, U+3008-300F, U+30FB, U+4E00, U+4E09-4E0B, U+4E0D, U+4E2D, U+4E45, U+4E4B, U+4E5F, U+4E86, U+4E8B, U+4E9B, U+4EAB, U+4EAE, U+4EBA, U+4ECA-4ECB, U+4ECD, U+4ED6, U+4EE5, U+4EFD, U+4F34, U+4F4D, U+4F4F, U+4F55, U+4F5C, U+4F60, U+4F7F, U+4F86, U+4F9D, U+4FBF, U+4FDD, U+4FE1, U+500B, U+5011-5012, U+5019, U+505A, U+505C, U+50CF, U+50F5, U+5145, U+5148-5149, U+514D, U+5165, U+5167-5169, U+5171, U+5176, U+5178, U+518D, U+51AC, U+51B7, U+51CD, U+51E1, U+51FA, U+5206, U+521D, U+5225, U+5230, U+523B, U+524D, U+52A0, U+52C9, U+52D5, U+52E2, U+5341, U+5348, U+5373, U+537B, U+539F, U+53BB, U+53C8, U+53CA-53CB, U+53D7, U+53E6, U+53EA, U+53EF, U+5403-5404, U+5408, U+540C, U+5411, U+5439, U+547C-547D, U+54EA, U+555F, U+558A, U+559C-559D, U+56DB, U+56DE, U+56E0, U+56FA, U+5708, U+570B, U+570D, U+5712-5713, U+571F, U+5728, U+5730, U+5750, U+5802, U+5805, U+5834, U+58C1, U+590F, U+5916, U+591A, U+591C, U+5927, U+5929-592A, U+592E, U+597D, U+5982, U+59CB, U+5B50, U+5B57, U+5B69, U+5B78, U+5B83, U+5B89, U+5B8C, U+5B9A, U+5BB6, U+5BB9, U+5BEB-5BEC, U+5C01, U+5C07, U+5C31, U+5C40, U+5C4B, U+5C71, U+5DF2, U+5E02, U+5E33, U+5E36, U+5E38, U+5E73-5E74, U+5E78, U+5E7E, U+5E8A, U+5E8F, U+5E97, U+5EA7, U+5EE3, U+5EF3, U+5EFA, U+5F35, U+5F37, U+5F48, U+5F62, U+5F71, U+5F77, U+5F7F, U+5F88, U+5F8C, U+5F97, U+5F9E, U+5FAE, U+5FB9, U+5FC3, U+5FEB, U+5FF5, U+5FFD, U+6025, U+6089, U+60F3, U+610F, U+611B, U+6162-6163, U+61B6, U+61F7, U+6210-6211, U+6216, U+6234, U+623F, U+624B, U+624D, U+6253, U+627E, U+628A, U+62C9, U+62CD, U+62F1, U+6301, U+6307, U+6309, U+6368, U+6392, U+639B, U+63A2, U+63A5, U+63D2, U+63DB, U+641E, U+642C, U+649E, U+64AD, U+64C7, U+64E0, U+6536, U+653E, U+6545, U+6559, U+6563, U+6574, U+6599, U+65AF-65B0, U+65B9, U+65BC, U+65C1, U+65C5, U+65E5, U+65E9, U+662F, U+6642, U+665A, U+665D, U+6668, U+666F, U+6696, U+66AB, U+66F2, U+66F4, U+66F8, U+66FC, U+66FF-6700, U+6703, U+6708-6709, U+670B, U+670D, U+671B, U+672A, U+672C, U+6771, U+677E, U+6821, U+6848, U+684C, U+689D, U+696D, U+6A02, U+6A13, U+6A21, U+6A23, U+6A5F, U+6A94, U+6AA2, U+6B21, U+6B61, U+6B63-6B65, U+6BB5, U+6BCD, U+6BCF, U+6BD4, U+6C23, U+6C92, U+6C99, U+6CB3, U+6CBE, U+6CD5, U+6CE5, U+6D3B, U+6D6E, U+6DDA, U+6DFA, U+6E05, U+6EAB, U+6ED1, U+6EFE-6EFF, U+6F02, U+6FD5, U+6FFE, U+7121, U+7136, U+7167, U+719F, U+71B1, U+71C8, U+71ED, U+7236, U+7246-7247, U+7279, U+7368, U+737B, U+73A9, U+7403, U+74B0, U+74F6, U+751F, U+7528, U+7531, U+7559, U+7562, U+7565, U+756B, U+7576, U+75BC, U+767B-767D, U+7684, U+76EE, U+76F4, U+76F8, U+770B, U+771F-7720, U+773C, U+775B, U+7761, U+7787, U+77E5, U+78B0, U+78DA, U+79AE, U+79D2, U+7A7A, U+7A7F, U+7A97, U+7ACB, U+7AD9, U+7B11, U+7B2C, U+7B46, U+7B49, U+7B97, U+7BC0, U+7BC9, U+7C73, U+7CCA, U+7D04-7D05, U+7D22, U+7D2F, U+7D42, U+7D66, U+7DA0, U+7DF4, U+7E3D, U+7E7C, U+7E8C, U+7FA4, U+7FD2, U+7FFB, U+8001, U+8033, U+8046, U+804A, U+8056, U+8072, U+807D, U+8096, U+809A, U+80FD, U+8173, U+81C9, U+81EA, U+8207, U+8209, U+8212, U+8272, U+82F1, U+8349, U+83DC, U+843D, U+8457, U+8584, U+85CF, U+862D, U+8655, U+881F, U+884C, U+8857, U+888D, U+88AB, U+88E1, U+88FD, U+897F, U+8981, U+898B, U+8996, U+89AA, U+89BA, U+89D2, U+8A18, U+8A31, U+8A71, U+8A8D, U+8A95, U+8AAA, U+8AB0, U+8AB2, U+8ACB, U+8B1D, U+8B58, U+8B80, U+8B8A, U+8B93, U+8CB7, U+8CF4, U+8D0F, U+8D70, U+8D77, U+8D85, U+8D95, U+8DD1, U+8DDF, U+8DEF, U+8E8D, U+8EAB, U+8F09, U+8F38, U+8F49, U+8FCE, U+8FD1, U+8FD4, U+9019, U+901B, U+9023, U+9032, U+904A-904B, U+904D-904E, U+9053, U+9060, U+9078, U+9084, U+908A, U+90A3, U+90FD, U+914D, U+9192, U+91CD, U+9215, U+93E1, U+9577, U+9580, U+9589, U+958B, U+9593, U+95B1, U+95CA, U+95DC, U+9644, U+966A, U+967D, U+9694, U+96BB, U+96D6, U+96D9, U+96E2-96E3, U+96E8, U+96F2, U+9700, U+9732, U+975C, U+9762, U+978B, U+97F3, U+97FF, U+9801-9802, U+9813, U+982D, U+9858, U+98A8, U+98EF, U+98F2, U+9905, U+9910, U+9996, U+99AC, U+9AD4, U+9AEE, U+9B27, U+9EBB-9EBC, U+9ED1, U+9EDE, U+9F61, U+FF01, U+FF08-FF09, U+FF0C, U+FF1A-FF1B, U+FF1F; } /* /SUBSET-FONTS */ :root { --paper-lit: #FFF7E6; --paper: #F6E9CF; --paper-deep: #E4CFA6; --paper-dusk: #F1E1D0; --ink: #4A3222; --ink-soft: #7A5C42; --ink-faint: #A8917A; --sun: #F0B03B; --sun-deep: #D9901F; --cloth: #D19A3A; --cloth-deep: #B77F26; --spine: #8E5E16; --dusk: #6E8AA6; --pw: 560px; --ph: 746px; --fs: 19px; --turn: 2000ms; --font-zh: "LXGW WenKai TC", "LXGW WenKai", "PingFang HK", "Noto Sans HK", "Microsoft JhengHei", sans-serif; --font-latin: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: #C99A5D; color: var(--ink); font-family: var(--font-zh); overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--paper-lit); } button { font-family: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Full-bleed layers: longhands first for older engines, `inset` after. */ .room, .sky, #dust, .stage, .sheets, .face, .paper, .grain, .edge, .shade, .ui, .flashback, .fb-vignette, .lightbox { top: 0; right: 0; bottom: 0; left: 0; } /* ------------------------------------------------------------------ The room: sky layers cross-fade by theme, a sun glow top-left, soft rays, dust motes (canvas), a table at the bottom. ------------------------------------------------------------------ */ .room { position: fixed; inset: 0; z-index: 0; overflow: hidden; transition: opacity 2.2s ease; } .sky { position: absolute; inset: 0; opacity: 0; transition: opacity 2.6s ease; } .sky-morning { background: linear-gradient(160deg, #FBE9C5 0%, #F0CF97 45%, #C89660 100%); } .sky-noon { background: linear-gradient(160deg, #FFF1CF 0%, #F3C97C 42%, #C68A46 100%); } .sky-golden { background: linear-gradient(160deg, #FFE4B2 0%, #EFB265 45%, #A8663A 100%); } .sky-dusk { background: linear-gradient(160deg, #F4DAB6 0%, #DDAE8E 42%, #6E8AA6 100%); } .sky-evening { background: linear-gradient(160deg, #F9E3BE 0%, #E4B378 45%, #9A6A45 100%); } body[data-theme="morning"] .sky-morning, body[data-theme="noon"] .sky-noon, body[data-theme="golden"] .sky-golden, body[data-theme="dusk"] .sky-dusk, body[data-theme="evening"] .sky-evening { opacity: 1; } .sunglow { position: absolute; left: -22vmax; top: -28vmax; width: 84vmax; height: 84vmax; background: radial-gradient(circle at center, rgba(255,248,222,.95) 0%, rgba(255,228,165,.55) 22%, rgba(255,210,120,0) 62%); transition: opacity 2.6s ease; } body[data-theme="dusk"] .sunglow { opacity: .55; } .rays { position: absolute; left: -20%; top: -60%; width: 140%; height: 220%; transform: rotate(-26deg); opacity: .55; pointer-events: none; } .rays i { position: absolute; top: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255,250,232,0) 0%, rgba(255,250,232,.55) 28%, rgba(255,250,232,.18) 55%, rgba(255,250,232,0) 80%); filter: blur(16px); animation: ray 16s ease-in-out infinite alternate; } .rays i:nth-child(1) { left: 18%; width: 9%; animation-delay: -2s; } .rays i:nth-child(2) { left: 31%; width: 4%; animation-delay: -7s; opacity: .8; } .rays i:nth-child(3) { left: 40%; width: 13%; animation-delay: -11s; opacity: .7; } @keyframes ray { from { transform: translateX(-3%); opacity: .45; } to { transform: translateX(3%); opacity: .9; } } #dust { position: absolute; inset: 0; width: 100%; height: 100%; } .table { position: absolute; left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(to top, rgba(70,40,15,.42), rgba(70,40,15,0)); } /* ------------------------------------------------------------------ Stage and book ------------------------------------------------------------------ */ .stage { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; padding-bottom: 7vh; } .scene { perspective: 2600px; perspective-origin: 50% 40%; transition: opacity 1.8s ease .5s, transform 1.8s ease .5s; } .tilt { transform-style: preserve-3d; transform: rotateX(7deg); transition: transform .9s ease-out; } .book { position: relative; width: calc(var(--pw) * 2); height: var(--ph); font-size: var(--fs); transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(.4, .1, .2, 1); } .book.single { width: var(--pw); } .book.at-start { transform: translateX(calc(var(--pw) * -.5)); } .book.at-end { transform: translateX(calc(var(--pw) * .5)); } .book.single.at-start, .book.single.at-end { transform: none; } .book-shadow { position: absolute; left: 3%; right: 3%; top: 8%; bottom: -4%; background: radial-gradient(ellipse at 50% 60%, rgba(60,30,5,.55), rgba(60,30,5,.28) 55%, rgba(60,30,5,0) 78%); filter: blur(22px); transform: translateZ(-14px); pointer-events: none; } .sheets { position: absolute; inset: 0; transform-style: preserve-3d; } .sheet { position: absolute; top: 0; left: 50%; width: var(--pw); height: var(--ph); transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; } .book.single .sheet { left: 0; } /* On one-page layouts the turned sheets would pile up off the left edge; hide them once they have landed. */ .book.single .sheet.flipped:not(.turning) { visibility: hidden; } .sheet.is-cover, .sheet.is-back { width: calc(var(--pw) * 1.018); height: calc(var(--ph) * 1.024); top: calc(var(--ph) * -0.012); } .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; isolation: isolate; border-radius: 2px 7px 7px 2px; box-shadow: 0 0 0 1px rgba(90,60,20,.08); } .face.back { transform: rotateY(180deg); border-radius: 7px 2px 2px 7px; } .sheet.is-cover .face, .sheet.is-back .face { border-radius: 3px 11px 11px 3px; } .sheet.is-cover .face.back, .sheet.is-back .face.back { border-radius: 11px 3px 3px 11px; } .shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(to right, rgba(50,28,8,.62), rgba(50,28,8,.18) 38%, rgba(50,28,8,0) 74%); } .face.back .shade { background: linear-gradient(to left, rgba(50,28,8,.62), rgba(50,28,8,.18) 38%, rgba(50,28,8,0) 74%); } .cast { position: absolute; top: 0; bottom: 0; width: var(--pw); opacity: 0; pointer-events: none; transform: translateZ(1px); } .cast.right { left: 50%; background: linear-gradient(to right, rgba(40,20,5,.55), rgba(40,20,5,.22) 30%, rgba(40,20,5,0) 72%); } .cast.left { left: 0; background: linear-gradient(to left, rgba(40,20,5,.55), rgba(40,20,5,.22) 30%, rgba(40,20,5,0) 72%); } .book.single .cast.right { left: 0; } .book.single .cast.left { display: none; } .gutter { position: absolute; top: 0; bottom: 0; left: 50%; width: 9%; transform: translateX(-50%) translateZ(.6px); background: linear-gradient(to right, rgba(60,35,10,0), rgba(60,35,10,.20) 44%, rgba(60,35,10,.30) 50%, rgba(60,35,10,.20) 56%, rgba(60,35,10,0)); pointer-events: none; opacity: 0; transition: opacity .9s; } .book.open .gutter { opacity: 1; } .book.single .gutter { display: none; } .stack { position: absolute; top: 0; width: var(--pw); height: var(--ph); transform: translateZ(-3px); pointer-events: none; border-radius: 2px 7px 7px 2px; } .stack.right { left: 50%; } .stack.left { left: 0; border-radius: 7px 2px 2px 7px; } .book.single .stack.right { left: 0; } .book.single .stack.left { display: none; } /* ------------------------------------------------------------------ Paper and page content ------------------------------------------------------------------ */ .paper { position: absolute; inset: 0; background: linear-gradient(135deg, var(--paper-lit) 0%, var(--paper) 55%, #F1E1C3 100%); color: var(--ink); padding: calc(var(--ph) * .075) calc(var(--pw) * .085) calc(var(--ph) * .06); display: flex; flex-direction: column; line-height: 1.9; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .paper::-webkit-scrollbar { display: none; } /* Grain and spine shading live beside the paper, so they stay put when a page scrolls. */ .grain { position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: .11; } .t-cover ~ .grain, .t-back ~ .grain { opacity: .2; } .edge { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(90,60,20,.20), rgba(90,60,20,.06) 6%, rgba(90,60,20,0) 15%); } .face.back .edge { background: linear-gradient(to left, rgba(90,60,20,.20), rgba(90,60,20,.06) 6%, rgba(90,60,20,0) 15%); } .book.single .face.front .edge { background: linear-gradient(to right, rgba(90,60,20,.14), rgba(90,60,20,0) 10%); } .face.scrolly::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(to top, var(--paper), rgba(246,233,207,0)); pointer-events: none; } .paper > * { position: relative; flex-shrink: 0; } .kicker { margin: 0 0 .35em; font-size: .86em; letter-spacing: .08em; color: var(--ink-soft); } .title { margin: 0 0 .55em; font-weight: 400; font-size: 2em; line-height: 1.35; letter-spacing: .04em; } .body p { margin: 0 0 .85em; text-align: justify; text-justify: inter-ideograph; } .body p:last-child { margin-bottom: 0; } .sign { margin-top: auto; padding-top: 1em; text-align: right; color: var(--ink-soft); font-size: .95em; } /* Prints: pasted photographs with translucent tape */ .prints { display: flex; gap: 4%; justify-content: center; align-items: flex-start; margin-top: 1.1em; } .print { position: relative; margin: 0; width: 64%; padding: 5px 5px 7px; background: #FFFDF6; box-shadow: 0 1px 2px rgba(60,30,5,.18), 0 10px 20px -10px rgba(60,30,5,.45); transform: rotate(-1.6deg); cursor: zoom-in; } .print.r { transform: rotate(1.4deg); } .print .ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #E8DCC4; filter: saturate(1.02) contrast(.98); } .print.portrait .ph { aspect-ratio: 3 / 4; } .print figcaption { font-size: .78em; color: var(--ink-soft); text-align: center; margin-top: .4em; line-height: 1.5; letter-spacing: .02em; } .print::before, .print::after { content: ""; position: absolute; top: -9px; left: 10%; width: 22%; min-width: 44px; height: 18px; background: rgba(240,176,59,.36); box-shadow: 0 1px 1px rgba(60,30,5,.12); transform: rotate(-7deg); } .print::after { left: auto; right: 10%; transform: rotate(6deg); } .prints.two .print { width: 47%; } .prints.two .print .ph { aspect-ratio: 4 / 3; } .prints.two .print.portrait { width: 34%; } .prints.two .print.portrait .ph { aspect-ratio: 3 / 4; } .prints.strip { gap: 3%; margin-top: 1.2em; } .prints.strip .print { width: 23%; padding: 3px 3px 5px; } .prints.strip .print .ph { aspect-ratio: 4 / 5; } .prints.strip .print::before, .prints.strip .print::after { min-width: 0; width: 42%; height: 12px; top: -6px; } .prints.strip .print figcaption { font-size: max(.66em, 11px); margin-top: .3em; } .prints.strip .print:nth-child(1) { transform: rotate(-3deg); } .prints.strip .print:nth-child(2) { transform: rotate(2deg) translateY(4px); } .prints.strip .print:nth-child(3) { transform: rotate(-1.5deg); } .prints.strip .print:nth-child(4) { transform: rotate(3deg) translateY(3px); } .print.video::after { display: none; } .print.video::before { left: 50%; transform: translateX(-50%) rotate(-2deg); } .print .play { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(255,247,230,.78); pointer-events: none; display: grid; place-items: center; color: var(--ink); box-shadow: 0 2px 8px rgba(60,30,5,.25); opacity: 0; transition: opacity .3s; } .print.video:hover .play, .print.video:focus-visible .play { opacity: 1; } @media (hover: none) { .print.video .play { opacity: .85; } } /* Cover */ .paper.t-cover { background: radial-gradient(120% 90% at 30% 15%, #E4B654 0%, var(--cloth) 45%, var(--cloth-deep) 100%); padding: calc(var(--ph) * .10) calc(var(--pw) * .1) calc(var(--ph) * .08); align-items: center; text-align: center; overflow: hidden; } .paper.t-cover::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5%; background: linear-gradient(to right, rgba(0,0,0,.30), rgba(0,0,0,.06) 55%, rgba(255,255,255,.10)); } .sun { width: 24%; aspect-ratio: 1; border-radius: 50%; margin: 6% auto 8%; background: radial-gradient(circle at 40% 35%, #FFEBB0, var(--sun) 55%, var(--sun-deep) 100%); box-shadow: inset 0 -6px 14px rgba(120,70,0,.25), 0 0 0 6px rgba(255,236,190,.35), 0 0 46px rgba(255,214,120,.6); } .sun.small { width: 14%; margin: 30% auto 6%; } .sun.tiny { width: 9%; margin: 1.4em auto 0; box-shadow: inset 0 -3px 8px rgba(120,70,0,.2), 0 0 24px rgba(255,214,120,.5); } .sun.faint { width: 12%; margin: auto; opacity: .35; box-shadow: none; } .cover-title { margin: 0; font-weight: 400; font-size: 2.55em; line-height: 1.3; letter-spacing: .12em; text-shadow: 0 1px 0 rgba(255,240,200,.55), 0 -1px 0 rgba(90,50,0,.18); } .cover-sub { margin: .7em 0 0; font-size: 1.05em; letter-spacing: .14em; color: #4A3010; } .cover-foot { margin-top: auto; } .cover-name { margin: 0; font-family: var(--font-latin); font-style: italic; font-size: 1.55em; color: #4A3010; letter-spacing: .02em; } .cover-years { margin: .15em 0 0; font-family: var(--font-latin); font-size: 1.05em; letter-spacing: .3em; color: #4A3010; } /* Back cover */ .paper.t-back { background: radial-gradient(120% 90% at 70% 15%, #E4B654 0%, var(--cloth) 45%, var(--cloth-deep) 100%); align-items: center; text-align: center; overflow: hidden; } .paper.t-back::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 5%; background: linear-gradient(to left, rgba(0,0,0,.30), rgba(0,0,0,.06) 55%, rgba(255,255,255,.10)); } .paper.t-back .cover-name { font-size: 1.2em; } /* Blank inside pages */ .paper.t-blank { justify-content: center; align-items: center; overflow: hidden; } /* Dedication, closing */ .paper.t-dedication { justify-content: center; } .paper.t-dedication .body p { text-align: left; font-size: 1.08em; margin-bottom: 1.1em; } .paper.t-dedication .body p:first-child { font-size: 1.2em; } /* Quote page */ .paper.t-quote { justify-content: center; align-items: center; text-align: center; background: linear-gradient(135deg, #FBF1E3 0%, var(--paper-dusk) 60%, #E9D6C4 100%); } .paper.t-quote .quote { margin: 0; font-weight: 300; font-size: 1.42em; line-height: 2.1; letter-spacing: .06em; max-width: 100%; } .paper.t-quote .quote-title { margin: 0 0 1.2em; font-size: .9em; letter-spacing: .3em; color: var(--ink-soft); } /* The "light" page: the mirror selfie as sunlight through a window */ .paper.t-page.light { background: linear-gradient(160deg, #FFF3DD 0%, #F6E3C6 55%, #EFD8BA 100%); } .paper.t-page.light .wash { position: absolute; left: 0; right: 0; top: 0; height: 46%; background-position: center 30%; background-size: cover; opacity: .62; filter: sepia(.35) saturate(1.05) brightness(1.06) blur(.6px); -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); } .paper.t-page.light .wash-cap { position: absolute; right: calc(var(--pw) * .085); top: calc(var(--ph) * .04); font-size: .78em; color: rgba(74,50,34,.9); letter-spacing: .04em; text-shadow: 0 0 6px rgba(255,247,230,1), 0 0 12px rgba(255,247,230,.9); } .paper.t-page.light .kicker { margin-top: calc(var(--ph) * .28); } .book.single .paper.t-page.light .wash { height: 38%; } .book.single .paper.t-page.light .kicker { margin-top: calc(var(--ph) * .22); } /* ------------------------------------------------------------------ UI ------------------------------------------------------------------ */ .ui { position: fixed; inset: 0; z-index: 5; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); transition: opacity 1s ease 1.6s; } .ui > * { pointer-events: auto; } .btn-open { position: absolute; left: 50%; bottom: calc(6.4vh + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: .65em 2.3em; border-radius: 999px; border: 1px solid rgba(74,50,34,.35); background: rgba(255,247,230,.88); color: var(--ink); font-size: 1.15rem; letter-spacing: .28em; text-indent: .28em; cursor: pointer; box-shadow: 0 8px 24px -10px rgba(60,30,5,.55); transition: transform .3s, background .3s, opacity .6s, visibility 0s 0s; } .btn-open:hover { background: #FFF7E6; transform: translateX(-50%) translateY(-1px); } .hint { position: absolute; left: 50%; bottom: calc(2.4vh + env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; font-size: .9rem; color: var(--ink); letter-spacing: .06em; white-space: nowrap; text-shadow: 0 0 6px rgba(255,247,230,1), 0 0 12px rgba(255,247,230,.9); transition: opacity .6s, visibility 0s 0s; } body.open .btn-open, body.open .hint { opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; } .pager { position: absolute; left: 50%; bottom: calc(3.4vh + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 1.1rem; width: max-content; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .9s, visibility 0s .9s; } body.open .pager { opacity: 1; visibility: visible; transition: opacity .9s, visibility 0s 0s; } .pager button { display: inline-flex; align-items: center; gap: .45em; flex-shrink: 0; padding: .45em .95em .45em .8em; border-radius: 999px; border: 1px solid rgba(74,50,34,.28); background: rgba(255,247,230,.82); color: var(--ink); font-size: .95rem; letter-spacing: .1em; cursor: pointer; box-shadow: 0 6px 18px -10px rgba(60,30,5,.5); transition: background .25s, opacity .3s, transform .2s; } .pager button svg { width: 1em; height: 1em; } .pager button:hover { background: #FFF7E6; } .pager button:disabled { opacity: .35; cursor: default; } .pager #btnNext { padding: .45em .8em .45em .95em; } .progress { width: min(34vw, 240px); height: 2px; background: rgba(74,50,34,.18); position: relative; border-radius: 2px; } .progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--sun); border-radius: 2px; transition: width 1s ease; } .music { position: absolute; top: calc(1.3rem + env(safe-area-inset-top)); right: calc(1.3rem + env(safe-area-inset-right)); display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-width: 44px; min-height: 44px; padding: .45em .9em .45em .7em; border-radius: 999px; border: 1px solid rgba(74,50,34,.28); background: rgba(255,247,230,.82); color: var(--ink); font-size: .9rem; letter-spacing: .08em; cursor: pointer; box-shadow: 0 6px 18px -10px rgba(60,30,5,.5); } .music .bars { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 14px; } .music .bars i { width: 2px; background: var(--sun-deep); height: 30%; border-radius: 1px; transition: height .3s; } .music[aria-pressed="true"] .bars i { animation: bar 1s ease-in-out infinite alternate; } .music .bars i:nth-child(2) { animation-delay: -.3s; } .music .bars i:nth-child(3) { animation-delay: -.6s; } @keyframes bar { from { height: 25%; } to { height: 100%; } } .music .lbl-on, .music .lbl-off { display: none; } .music[aria-pressed="true"] .lbl-on { display: inline; } .music[aria-pressed="false"] .lbl-off { display: inline; } .btn-again { position: absolute; left: 50%; bottom: calc(10.5vh + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: .55em 1.8em; border-radius: 999px; border: 1px solid rgba(74,50,34,.3); background: rgba(255,247,230,.88); color: var(--ink); font-size: 1rem; letter-spacing: .2em; text-indent: .2em; cursor: pointer; box-shadow: 0 8px 24px -10px rgba(60,30,5,.55); opacity: 0; visibility: hidden; transition: opacity .8s, visibility 0s .8s; } body.ended .btn-again { opacity: 1; visibility: visible; transition: opacity .8s, visibility 0s 0s; } body.ended .pager { opacity: 0; visibility: hidden; transition: opacity .8s, visibility 0s .8s; } /* ------------------------------------------------------------------ Flashback: a memory washes over the room while a page turns ------------------------------------------------------------------ */ .flashback { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .8s ease; background: #2A1808; } .flashback.on { opacity: .92; transition: opacity .5s ease; } .flashback.light-only { background: transparent; } .flashback.light-only.on { opacity: .7; } .fb-media { position: absolute; top: -4%; right: -4%; bottom: -4%; left: -4%; inset: -4%; } .fb-media img, .fb-media video { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.32) saturate(1.12) contrast(.94) brightness(1.03); transform: scale(1.03); transition: transform 3.4s ease-out; } .flashback.on .fb-media img, .flashback.on .fb-media video { transform: scale(1.13); } .fb-leak { position: absolute; top: -25%; right: -25%; bottom: -25%; left: -25%; inset: -25%; background: radial-gradient(55% 75% at 22% 30%, rgba(255,222,140,.95), rgba(255,178,70,.45) 32%, rgba(255,130,40,0) 68%); mix-blend-mode: screen; opacity: 0; } .flashback.on .fb-leak { animation: leak 3s ease-in-out forwards; } @keyframes leak { 0% { opacity: 0; transform: translate(-22%, -10%); } 35% { opacity: 1; } 100% { opacity: .25; transform: translate(34%, 14%); } } .fb-grain { position: absolute; top: -10%; right: -10%; bottom: -10%; left: -10%; inset: -10%; background-image: url("data:image/svg+xml;utf8,"); opacity: .2; mix-blend-mode: overlay; } .flashback.on .fb-grain { animation: grain .5s steps(4) infinite; } @keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -1%); } 100% { transform: translate(3%, 1%); } } .fb-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(40,20,0,0) 48%, rgba(40,20,0,.6) 100%); } /* ------------------------------------------------------------------ Lightbox ------------------------------------------------------------------ */ .lightbox { position: fixed; inset: 0; z-index: 8; background: rgba(40,22,6,.84); display: grid; place-items: center; padding: 4vh 4vw; animation: fadein .35s ease; } .lightbox[hidden] { display: none; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .lb-inner { display: flex; flex-direction: column; align-items: center; gap: .7rem; max-width: 100%; } .lb-inner img, .lb-inner video { max-width: 92vw; max-height: 74vh; object-fit: contain; border: 10px solid #FFFDF6; border-bottom-width: 16px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); background: #000; } .lb-cap { color: #F6E9CF; font-size: 1.05rem; letter-spacing: .04em; margin: 0; text-align: center; } .lb-close { position: absolute; top: calc(1rem + env(safe-area-inset-top)); right: calc(1.2rem + env(safe-area-inset-right)); width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(246,233,207,.4); background: rgba(255,247,230,.12); color: #F6E9CF; font-size: 1.4rem; line-height: 1; cursor: pointer; } /* ------------------------------------------------------------------ Loading reveal: the room brightens, the book rises, then the UI ------------------------------------------------------------------ */ body.loading .room { opacity: 0; } body.loading .scene { opacity: 0; transform: translateY(26px); } body.loading .ui { opacity: 0; } .nojs { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; padding: 1.2em 1.6em; background: rgba(255,247,230,.92); color: var(--ink); border-radius: 12px; font-size: 1rem; text-align: center; max-width: 80vw; } /* ------------------------------------------------------------------ Small screens ------------------------------------------------------------------ */ @media (max-width: 720px) { .music { top: calc(.8rem + env(safe-area-inset-top)); right: calc(.8rem + env(safe-area-inset-right)); padding: .4em .7em .4em .6em; font-size: .82rem; } .music .lbl-on, .music .lbl-off { display: none !important; } .pager { gap: .7rem; bottom: calc(2.6vh + env(safe-area-inset-bottom)); } .pager button { font-size: .85rem; padding: .5em .8em; min-height: 40px; } .pager button span { display: none; } .progress { width: 30vw; } .btn-open { bottom: calc(7vh + env(safe-area-inset-bottom)); } .hint { bottom: calc(2.6vh + env(safe-area-inset-bottom)); font-size: .82rem; } .tilt { transform: rotateX(3deg); } .stage { padding-bottom: 5vh; } .title { font-size: 1.7em; } .paper.t-quote .quote { font-size: 1.22em; } .prints.strip { flex-wrap: wrap; row-gap: 1.1em; } .prints.strip .print { width: 44%; } } @media (prefers-reduced-motion: reduce) { :root { --turn: 700ms; } .rays i, .fb-grain, .music[aria-pressed="true"] .bars i { animation: none; } .fb-media img, .fb-media video { transition: none; transform: none; } .flashback.on .fb-media img, .flashback.on .fb-media video { transform: none; } .flashback.on .fb-leak { animation: none; opacity: .5; } .flashback.on .fb-grain { animation: none; } .tilt { transition: none; } } /* Very short viewports (landscape phones): keep the open button clear of the book. */ @media (max-height: 560px) { .btn-open { bottom: calc(1.8vh + env(safe-area-inset-bottom)); font-size: 1rem; padding: .5em 1.8em; } .hint { display: none; } .btn-again { bottom: calc(1.8vh + env(safe-area-inset-bottom)); } }