/* Collectanea V4.0.9 ยท profile-level shelf orientation + carved Gothic joinery */ /* Object file: explicit persistent library presentation controls. */ .ct409-library-display{ background:linear-gradient(180deg,rgba(249,247,241,.92),rgba(244,241,234,.76)); border:1px solid rgba(63,52,41,.12); } .ct409-display-head h3{margin-bottom:.25rem} .ct409-display-head p{margin:.1rem 0 1rem;max-width:760px;color:#686057;font-size:.9rem} .ct409-display-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid rgba(63,52,41,.10)} .ct409-display-row>span{font-size:.82rem;color:#5f574e;min-width:150px} .ct409-display-switch{display:inline-flex;gap:2px;padding:2px;border-radius:7px;background:rgba(62,49,37,.065);border:1px solid rgba(62,49,37,.11)} .ct409-display-switch button{appearance:none;border:0;background:transparent;padding:7px 10px;border-radius:5px;font:600 .76rem/1.1 system-ui,sans-serif;color:#5f584f;cursor:pointer} .ct409-display-switch button.active{background:#fffdf8;color:#26221d;box-shadow:0 1px 4px rgba(33,26,19,.12),inset 0 0 0 1px rgba(72,56,41,.12)} .ct409-unit-display-list{margin-top:4px} /* Retire the earlier line-art/repeating Gothic overlays. */ #libraryRoom .ct406-tracery-band, #libraryRoom .ct406-pilaster-detail, #libraryRoom .ct406-gothic-base, #libraryRoom .ct404-gothic-base, #libraryRoom .ct404-lancet, #libraryRoom .ct406-bay-body:before, #libraryRoom .ct404-bay-body:before{display:none!important} /* V4.0.9 uses a few large pieces of recessed joinery. Each motif is made from the same walnut material, then darkened and inset-shadowed so it reads as cut wood, not as a painted line. Light is assumed to come from upper-left. */ #libraryRoom .ct409-carving-crown, #libraryRoom .ct409-carving-pilaster, #libraryRoom .ct409-carving-plinth{ position:absolute; z-index:8; display:flex; pointer-events:none; } #libraryRoom .ct409-carving-crown i, #libraryRoom .ct409-carving-pilaster i, #libraryRoom .ct409-carving-plinth i{ display:block; position:relative; background: linear-gradient(145deg,rgba(255,255,255,.018),rgba(20,10,5,.22) 38%,rgba(5,2,1,.30)), url('assets/v404/walnut-horizontal.jpg') center/420px 170px repeat; border:1px solid rgba(20,10,5,.38); box-shadow: inset 3px 3px 7px rgba(8,4,2,.56), inset -1px -1px 2px rgba(232,192,143,.10), -1px -1px 0 rgba(225,183,133,.055), 1px 2px 2px rgba(7,3,2,.24); filter:saturate(.82) brightness(.78) contrast(1.08); } /* Three broad pointed-arch recesses integrated into the crown. */ #libraryRoom .ct409-carving-crown{ left:17%;right:17%;top:7px;height:43px; align-items:flex-end;justify-content:center;gap:0; } #libraryRoom .ct409-carving-crown i{ width:58%;height:40px; -webkit-mask:url('assets/v409/gothic-niche-solid.svg') center/100% 100% no-repeat; mask:url('assets/v409/gothic-niche-solid.svg') center/100% 100% no-repeat; } /* One tall lancet recess in each side stile. */ #libraryRoom .ct409-carving-pilaster{ top:88px;bottom:84px;width:24px;align-items:flex-start;justify-content:center; } #libraryRoom .ct409-carving-pilaster.left{left:5px} #libraryRoom .ct409-carving-pilaster.right{right:5px} #libraryRoom .ct409-carving-pilaster i{ width:15px;height:min(230px,64%); background: linear-gradient(145deg,rgba(255,255,255,.014),rgba(17,8,4,.25) 42%,rgba(4,2,1,.34)), url('assets/v404/walnut-vertical.jpg') center/125px 520px repeat-y; -webkit-mask:url('assets/v409/gothic-lancet-solid.svg') center/100% 100% no-repeat; mask:url('assets/v409/gothic-lancet-solid.svg') center/100% 100% no-repeat; } /* Three large blind lancets recessed into the lower plinth. */ #libraryRoom .ct409-carving-plinth{ left:12%;right:12%;top:5px;bottom:4px; align-items:flex-end;justify-content:center;gap:0; } #libraryRoom .ct409-carving-plinth i{ width:56%;height:40px; -webkit-mask:url('assets/v409/gothic-niche-solid.svg') center/100% 100% no-repeat; mask:url('assets/v409/gothic-niche-solid.svg') center/100% 100% no-repeat; } /* Timber around carvings gets enough section/depth for the recesses to make physical sense. */ #libraryRoom .ct406-cornice{ box-shadow: 0 8px 13px rgba(24,14,8,.34), inset 0 2px 1px rgba(236,198,150,.07), inset 0 -7px 9px rgba(12,6,3,.30)!important; } #libraryRoom .ct406-plinth{ box-shadow: 0 12px 15px rgba(24,14,8,.29), inset 0 3px 2px rgba(235,195,145,.045), inset 0 -6px 8px rgba(11,6,3,.31)!important; } #libraryRoom .ct406-bookcase-bay:before, #libraryRoom .ct406-bookcase-bay:after{ box-shadow: inset 2px 0 1px rgba(233,193,143,.045), inset -5px 0 8px rgba(10,5,3,.30), 4px 0 8px rgba(0,0,0,.15)!important; } @media(max-width:760px){ .ct409-display-row{align-items:flex-start;flex-direction:column;gap:7px} .ct409-display-switch{width:100%} .ct409-display-switch button{flex:1} #libraryRoom .ct409-carving-crown{left:12%;right:12%;gap:0} #libraryRoom .ct409-carving-pilaster{opacity:.82} #libraryRoom .ct409-carving-plinth{left:8%;right:8%;gap:0} } /* Final carving pass: turn the dark silhouettes into recessed pointed-arch panels. */ #libraryRoom .ct409-carving-crown i:after, #libraryRoom .ct409-carving-pilaster i:after, #libraryRoom .ct409-carving-plinth i:after{ content:""; position:absolute; inset:4px 5px 3px; -webkit-mask:url('assets/v409/gothic-niche-solid.svg') center/100% 100% no-repeat; mask:url('assets/v409/gothic-niche-solid.svg') center/100% 100% no-repeat; background: linear-gradient(145deg,rgba(255,255,255,.025),rgba(0,0,0,.04) 46%,rgba(0,0,0,.10)), url('assets/v404/walnut-horizontal.jpg') center/420px 170px repeat; box-shadow: inset -2px -2px 4px rgba(235,194,143,.055), inset 2px 2px 5px rgba(7,3,1,.34); filter:brightness(.94) saturate(.92); } #libraryRoom .ct409-carving-pilaster i:after{ inset:5px 4px 4px; -webkit-mask:url('assets/v409/gothic-lancet-solid.svg') center/100% 100% no-repeat; mask:url('assets/v409/gothic-lancet-solid.svg') center/100% 100% no-repeat; background: linear-gradient(145deg,rgba(255,255,255,.018),rgba(0,0,0,.05) 48%,rgba(0,0,0,.12)), url('assets/v404/walnut-vertical.jpg') center/125px 520px repeat-y; } /* A restrained quatrefoil-like central sink in the middle upper panel. */ #libraryRoom .ct409-carving-crown i:before{ content:""; position:absolute; z-index:2; left:50%;top:55%; width:18px;height:18px; transform:translate(-50%,-50%) rotate(45deg); border-radius:7px; background: radial-gradient(circle at 23% 23%,rgba(10,5,2,.46) 0 34%,transparent 37%), radial-gradient(circle at 77% 23%,rgba(10,5,2,.46) 0 34%,transparent 37%), radial-gradient(circle at 23% 77%,rgba(10,5,2,.46) 0 34%,transparent 37%), radial-gradient(circle at 77% 77%,rgba(10,5,2,.46) 0 34%,transparent 37%); filter:drop-shadow(-1px -1px 0 rgba(229,188,137,.08)) drop-shadow(1px 1px 0 rgba(5,2,1,.35)); opacity:.72; }