/* -------------------------------------------------------- */ /* HOME PAGE ONLY */ /* -------------------------------------------------------- */ /* Needs on index.html - this is for the "Strange Room Lobby" with no "structured" layout */ body.home { /* Override normal page padding/layout */ padding: 0; margin: 0; /* Temporary background — need to change this later */ background: #000; } /* Hide the normal page layout on home */ body.home .page-shell { display: none; } .home-room{ /* BACKGROUND LAYERS FOR THE STRANGE HOME ROOM */ background: url("img/bg/harkesmuseum-bkg.png") center / cover no-repeat, /* STAR DIMMER */ linear-gradient( to bottom, rgba(0,0,0,1), rgba(0,0,0,0.75), rgba(0,0,0,0.35) ), url("img/bg/stars5.gif") top left / 200px 200px repeat; } /* The room container for museum lobby */ .home-room { position: relative; width: 100%; min-height: 100vh; /* Center the scene */ display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Inner stage so things don’t go edge-to-edge */ .home-stage { position: relative; width: min(1400px, 100%); height: min(900px, 100vh); /* Visual aid when needed */ /* border: 1px dashed rgba(255,255,255,0.2); */ } /* -------------------------------------------------------- */ /* HOME ROLL TOP CREDENZA (base) */ /* -------------------------------------------------------- */ .home-desk-stage{ position: absolute; /* Scene placement */ left: 50%; bottom: 3vh; transform: translateX(-50%); /* For resizing */ width: clamp(340px, 40vw, 600px); /* Foreground depth */ z-index: 20; pointer-events: auto; /* Debug while tuning */ /* outline: 1px dashed rgba(255,255,255,0.25); */ } .home-desk-base{ display: block; width: 100%; height: auto; /* desk itself is not clickable */ pointer-events: none; /* prevent selection/drag */ user-select: none; -webkit-user-drag: none; } /* --------------------------------------------------- */ /* CREDENZA DRAWERS (hover = open overlay + label) */ /* --------------------------------------------------- */ .home-desk-stage{ position: absolute; /* ensure this is the containing block for absolute children */ } .home-drawer{ position: absolute; display: block; text-decoration: none; /* override desk-item defaults with bottom anchoring */ bottom: auto; right: auto; transform: none; /* scaling behavior */ container-type: inline-size; /* drawers should be above the base */ z-index: 30; } /* Make the drawer overlay invisible until hover/focus */ .home-drawer .drawer-open{ display: block; width: 100%; height: auto; opacity: 0; transition: opacity 140ms ease; } /* Show the "open" drawer on hover/focus */ .home-drawer:hover .drawer-open, .home-drawer:focus-visible .drawer-open{ opacity: 1; } /* Ensure it does NOT rotate/scale drawer overlay on hover */ .home-drawer:hover img{ transform: none; } /* Place the hover text above the drawer */ .home-drawer .item-text{ top: 50%; } /* Make drawer hover labels smaller (override global 35cqw) */ .home-drawer .item-text::before{ font-size: 18cqw; /* try 14–22 */ } /* Left drawer: 675×370 at x=69 y=842 on 2400×1959 */ .home-drawer-left{ left: 2.875%; top: 42.98%; width: 28.125%; } /* Right drawer: 666×628 at x=1651 y=1102 on 2400×1959 */ .home-drawer-right{ left: 68.79%; top: 56.25%; width: 27.75%; } /* -------------------------------------------------------- */ /* Close the hutch (manual “site is closed” overlay) Note: It will block clicks to anything beneath it! */ /* -------------------------------------------------------- */ /* Jiggly keyframe for roll top base */ @keyframes credenza-jiggle { 0% { transform: rotate(0deg) translateX(0); } 20% { transform: rotate(-0.7deg) translateX(-2px); } 40% { transform: rotate(0.7deg) translateX(2px); } 60% { transform: rotate(-0.5deg) translateX(-1px); } 80% { transform: rotate(0.5deg) translateX(1px); } 100% { transform: rotate(0deg) translateX(0); } } .home-credenza-closed{ position: absolute; /* Credenza CLOSED overlay: 2203×684 at x=88 y=68 */ left: 3.67%; top: 3.47%; width: 91.79%; z-index: 999; /* above drawers/items */ pointer-events: auto; /* blocks clicks */ /* Allows cqw font sizing on the locked text */ container-type: inline-size; } .home-credenza-closed img{ display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; } /* One-shot jiggly jiggle when cursor enters */ .home-credenza-closed:hover img { animation: credenza-jiggle 360ms ease; } /* "The Desk is Locked" text */ .home-credenza-closed .item-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; text-align: center; font-family: var(--font-heading); font-weight: normal; color: transparent; /* hide real element text */ pointer-events: none; user-select: none; } .home-credenza-closed .item-text::before { content: attr(data-default); display: inline-block; /* ~6cqw keeps it visually similar to the 18cqw drawers because based on element size */ font-size: 6cqw; line-height: 1; letter-spacing: 2px; color: #ffffff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 6px rgba(0,0,0,.45); opacity: 0; transform: translateY(10%); transition: opacity 140ms ease, transform 140ms ease; } .home-credenza-closed:hover .item-text::before { opacity: 1; transform: translateY(0); } /* Home instruction text */ .home-instructions { position: absolute; top: 20px; left: 20px; font-family: var(--font-heading); font-size: 1.2rem; color: var(--text-color); z-index: 50; } /* Map / sitemap link */ .home-map-link { position: absolute; top: 20px; right: 20px; font-size: 0.9rem; text-decoration: underline; z-index: 50; }