/* ========================================================= NOVELLOW ENTRANCE (index.html) A dark, candle-lit reading room on the left, the Novellow title in the middle and a bookplate sign-in panel on the right. ========================================================= */ body.entrance { min-height: 100vh; overflow-x: hidden; background: radial-gradient( ellipse at 22% 30%, rgba(236, 160, 96, 0.22), transparent 42% ), radial-gradient( ellipse at 80% 90%, rgba(236, 160, 96, 0.18), transparent 40% ), repeating-linear-gradient( 90deg, rgba(10, 6, 4, 0.14) 0 2px, transparent 2px 84px ), linear-gradient( 90deg, #2d261e 0%, #3b3024 40%, #33291f 70%, #2a2019 100% ); } /* ========================================================= SCENE A calm, lamp-lit reading room in the same drawings as the library: the arched window with the autumn oak at dusk (the room's own window, set by the data-* on ), a velvet drape, a hanging plant and a portrait; the reading corner (rug, lamp, armchair, side table and the cat); the bookcase on the right wall, and the floor they all stand on. ========================================================= */ .entrance-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .entrance-scene svg { position: absolute; overflow: visible; height: auto; } .entrance-glow { position: absolute; left: -8vw; bottom: -6vh; width: 52vw; height: 60vh; border-radius: 50%; background: radial-gradient(ellipse at 40% 55%, rgba(255, 190, 110, 0.24), transparent 65%); } .entrance-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 17vh; border-top: 6px solid #2a1810; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 40%), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 110px), linear-gradient(180deg, #5a3a26, #3e2718); box-shadow: 0 -2px 0 rgba(255, 220, 170, 0.08); } .entrance-window-wrap { position: absolute; left: 3vw; top: 6vh; width: min(21vw, 360px); aspect-ratio: 440 / 330; } .entrance-window { left: 0; top: 0; width: 100%; filter: drop-shadow(0 12px 18px rgba(10, 4, 2, 0.5)); } .entrance-curtains { left: calc(-20 / 440 * 100%); top: calc(-40 / 330 * 100%); width: calc(480 / 440 * 100%); filter: drop-shadow(0 8px 10px rgba(20, 8, 4, 0.35)); --curtain: #6a3a70; --curtain-fold: #40204a; --curtain-light: #8e5a94; } .entrance-sill { left: calc(-20 / 440 * 100%); top: 100%; width: calc(480 / 440 * 100%); margin-top: -6px; } .entrance-plant { left: 50vw; top: -1vh; width: min(5.5vw, 90px); filter: drop-shadow(0 8px 8px rgba(10, 4, 2, 0.4)); } .entrance-portrait { left: 32vw; top: 4vh; width: min(6vw, 96px); filter: drop-shadow(0 8px 10px rgba(10, 4, 2, 0.5)); } .entrance-rug { left: -4vw; bottom: 1vh; width: 40vw; height: 12vh; } .entrance-lamp { left: 0.5vw; bottom: 7vh; width: min(7vw, 120px); } .entrance-armchair { position: absolute; left: 3vw; bottom: 5vh; width: min(18vw, 300px); aspect-ratio: 220 / 224; filter: drop-shadow(0 10px 14px rgba(10, 4, 2, 0.45)); } .entrance-armchair svg { position: absolute; } .entrance-armchair__chair { left: 0; top: 0; width: 100%; } /* The cat, curled up asleep on the cushion. */ .entrance-cat { left: 21%; top: 36%; width: 54%; } .entrance-table { left: 20vw; bottom: 6vh; width: min(6.5vw, 108px); } .entrance-bookcase { right: 1vw; bottom: 6vh; width: min(12.5vw, 210px); filter: drop-shadow(-6px 10px 14px rgba(10, 4, 2, 0.45)); } /* ========================================================= LAYOUT ========================================================= */ .entrance-main { position: relative; z-index: 2; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); align-items: center; gap: clamp(20px, 4vw, 70px); padding: clamp(24px, 5vh, 56px) clamp(20px, 16vw, 240px) clamp(24px, 12vh, 120px) clamp(20px, 25vw, 380px); } /* ========================================================= BRAND ========================================================= */ .entrance-brand { display: grid; justify-items: center; gap: 12px; color: #f6e6cf; text-align: center; } .entrance-logo { display: block; /* The glow and shadow are drawn into the picture itself: iPhones can paint a CSS-filtered image as a white box. */ width: min(400px, 100%); height: auto; margin-block: -20px; } .entrance-wordmark { margin: 0; color: #f7e7cf; font-family: var(--font-logo); font-size: clamp(48px, 5vw, 80px); font-weight: 400; line-height: 0.95; text-shadow: 0 3px 0 #24121b, 0 8px 20px rgba(10, 4, 2, 0.6); } .entrance-divider, .bookplate-rule { display: flex; align-items: center; justify-content: center; gap: 10px; } .entrance-divider span, .bookplate-rule span { width: 56px; height: 1.5px; background: currentColor; opacity: 0.6; } .entrance-divider svg { width: 16px; height: 16px; color: var(--color-gold-light); } .entrance-tagline { color: #eab46a; font-family: var(--font-heading); font-size: clamp(26px, 2.4vw, 40px); font-weight: 600; line-height: 1.08; white-space: nowrap; text-shadow: 0 3px 10px rgba(10, 4, 2, 0.6); } .entrance-phases { display: flex; align-items: center; gap: 10px; color: var(--color-gold-light); } .entrance-phases svg { width: 14px; height: 14px; } .entrance-phases .is-flipped { transform: scaleX(-1); } .entrance-description { max-width: 34ch; color: #eadcc6; font-size: 18px; font-weight: 500; line-height: 1.5; text-shadow: 0 2px 6px rgba(10, 4, 2, 0.7); } /* ========================================================= BOOKPLATE ========================================================= */ .bookplate { position: relative; width: 100%; } .bookplate-ivy { position: absolute; z-index: 3; overflow: visible; pointer-events: none; } .bookplate-ivy--left { left: -46px; top: -26px; width: 120px; height: 260px; } .bookplate-ivy--right { right: -52px; top: -20px; width: 120px; height: 300px; } .bookplate-frame { position: relative; padding: 14px; border: 2px solid #2c180f; border-radius: 48% 48% 26px 26px / 70px 70px 26px 26px; background: linear-gradient( 180deg, #8a5636 0%, #6e4029 40%, #4a2a1c 100% ); box-shadow: inset 0 0 0 3px rgba(216, 170, 102, 0.35), inset 0 0 0 7px #5a3322, 0 30px 60px rgba(10, 4, 2, 0.6); } .bookplate-frame::before { content: ""; position: absolute; left: 50%; top: -16px; width: 70px; height: 34px; border: 2px solid #2c180f; border-bottom: 0; border-radius: 50% 50% 0 0; transform: translateX(-50%); background: radial-gradient( circle at 50% 80%, #f3cb79 0 5px, transparent 6px ), linear-gradient( 180deg, #8a5636, #6e4029 ); } .bookplate-paper { position: relative; display: grid; gap: 14px; padding: 40px 34px 20px; border-radius: 46% 46% 18px 18px / 60px 60px 18px 18px; background: radial-gradient( ellipse at 50% 0%, rgba(255, 255, 255, 0.6), transparent 55% ), linear-gradient( 180deg, #faf3e4, #f1e3c9 ); box-shadow: inset 0 0 0 1px rgba(120, 80, 50, 0.3), inset 0 0 30px rgba(160, 110, 70, 0.18); } .bookplate-paper::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(160, 110, 70, 0.3); border-radius: 44% 44% 12px 12px / 54px 54px 12px 12px; pointer-events: none; } .bookplate-eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; color: #6b4a44; font-family: var(--font-engraved); font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; } .bookplate-eyebrow span { color: var(--color-brass); } .bookplate-title { color: #4a2240; font-family: var(--font-heading); font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; line-height: 0.95; text-align: center; } .bookplate-rule { color: #a17a4d; } .bookplate-rule svg { width: 12px; height: 16px; } .bookplate-subtitle { color: #5e4a44; font-size: 19px; font-weight: 600; text-align: center; } /* Sign In / Create Account switch */ .auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid #cdb392; border-radius: 12px; background: rgba(233, 214, 186, 0.6); } .auth-switch__tab { min-height: 42px; border: 0; border-radius: 9px; color: #5a3f45; background: transparent; font-family: var(--font-ui); font-size: 16px; font-weight: 700; transition: background 0.2s ease, color 0.2s ease; } .auth-switch__tab.is-active { color: #fff3e2; background: linear-gradient( 180deg, #74485c, #5a3448 ); box-shadow: 0 4px 10px rgba(40, 16, 24, 0.3); } .auth-form { display: grid; gap: 14px; } .auth-form .field__input { background: #fff8e0; } .button--enter { min-height: 52px; margin-top: 4px; border-radius: 12px; font-size: 19px; } .button--enter svg { width: 18px; height: 18px; } .auth-link { justify-self: center; } .bookplate-footer { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 4px; color: #a17a4d; } .bookplate-sprig { width: 18px; height: 36px; color: #86a058; } .bookplate-sprig--left { transform: rotate(-70deg); } .bookplate-sprig--right { transform: rotate(70deg) scaleX(-1); } .bookplate-moon { width: 20px; height: 20px; color: var(--color-brass); } .noscript-note { position: fixed; left: 50%; bottom: 20px; z-index: 10; padding: 12px 18px; border-radius: 10px; background: var(--color-paper); transform: translateX(-50%); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .entrance-main { grid-template-columns: 1fr; justify-items: center; gap: 30px; padding: 60px 24px 80px; } .bookplate { max-width: 480px; } .entrance-brand { max-width: 560px; } .entrance-tagline { max-width: none; } .entrance-portrait, .entrance-plant, .entrance-table, .entrance-lamp { display: none; } .entrance-window-wrap { width: 30vw; } .entrance-armchair { width: 24vw; } .entrance-bookcase { width: 16vw; } } /* ========================================================= PHONE The room becomes a framed doorway above the bookplate. ========================================================= */ @media (max-width: 640px) { .entrance-scene { position: absolute; height: 100%; } .entrance-main { padding: 34px 14px 60px; gap: 22px; } .entrance-window-wrap { left: 50%; top: 2vh; width: 76vw; opacity: 0.4; transform: translateX(-50%); } .entrance-armchair, .entrance-bookcase, .entrance-table, .entrance-lamp, .entrance-portrait, .entrance-plant, .entrance-rug, .entrance-cat, .entrance-floor { display: none; } .entrance-logo { width: min(355px, 95vw); margin-block: -4.75vw; } .entrance-tagline { font-size: 28px; } .entrance-description { font-size: 17px; } .bookplate-paper { padding: 34px 20px 16px; } .bookplate-frame { padding: 10px; } .bookplate-ivy--left { left: -20px; } .bookplate-ivy--right { right: -24px; } } /* --------------------------------------------------------- AGREEING TO THE TERMS, AND THE LEGAL LINKS --------------------------------------------------------- */ .auth-agree { align-items: flex-start; min-height: 0; margin: 2px 0 4px; font-size: 13.5px; line-height: 1.4; } .auth-agree input { flex: none; margin-top: 2px; } .auth-agree a, .entrance-legal a { color: var(--color-plum); text-decoration: underline; text-underline-offset: 2px; } .entrance-legal { display: flex; justify-content: center; gap: 8px; margin: 4px 0 0; font-size: 13px; color: var(--color-ink-soft); } /* ========================================================= MOTION The room lights up as you arrive; the title, the words and the bookplate settle into place; dust drifts through the lamplight, frames and ivy sway, a star falls past the window now and then. Readers who ask their device for less motion get the room still (see the end of this section). ========================================================= */ /* Arriving: the lamps come up. */ .entrance-scene::after { content: ""; position: absolute; inset: 0; background: #0e0806; opacity: 0; animation: lightsUp 1.6s ease-out both; pointer-events: none; } @keyframes lightsUp { from { opacity: 0.92; } to { opacity: 0; } } .entrance-logo { animation: inkIn 1.1s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes inkIn { from { opacity: 0; transform: translateY(-12px) scale(0.97); } to { opacity: 1; transform: none; } } .entrance-divider, .entrance-tagline, .entrance-phases, .entrance-description { animation: riseIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .entrance-divider { animation-delay: 0.8s; } .entrance-tagline { animation-delay: 0.95s; } .entrance-phases { animation-delay: 1.15s; } .entrance-description { animation-delay: 1.3s; } @keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .bookplate { animation: plateIn 1.1s 0.45s cubic-bezier(0.18, 0.8, 0.25, 1.05) both; } @keyframes plateIn { from { opacity: 0; transform: translateY(46px) rotate(1.4deg); } to { opacity: 1; transform: none; } } /* The little moon at the top of the bookplate glows. */ .bookplate-moon { animation: moonGlow 4.5s ease-in-out infinite; } @keyframes moonGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(240, 200, 120, 0)); } 50% { filter: drop-shadow(0 0 6px rgba(240, 200, 120, 0.9)); } } /* Lamplight breathing. */ .entrance-glow { animation: glowBreathe 7s ease-in-out infinite; } @keyframes glowBreathe { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } /* The portrait sways a little on its nail, the hanging plant stirs, and the cat breathes. */ .entrance-portrait { transform-origin: 50% 0; animation: frameSway 7s ease-in-out infinite; } @keyframes frameSway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } } .entrance-plant { transform-origin: 50% 0; animation: plantSway 8s ease-in-out infinite; } @keyframes plantSway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } } .entrance-cat { transform-origin: 50% 100%; animation: catBreathe 3.6s ease-in-out infinite; } @keyframes catBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 1.035); } } /* A glow about the logo, like lamplight on gilt. */ .entrance-wordmark { isolation: isolate; } .entrance-wordmark::before { content: ""; position: absolute; left: -12%; right: -12%; top: -45%; bottom: -45%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(255, 214, 140, 0.42), rgba(255, 186, 110, 0.16) 45%, transparent 70%); animation: logoGlow 5s ease-in-out infinite; } @keyframes logoGlow { 0%, 100% { opacity: 0.75; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.04); } } /* Dust in the lamplight (added by entrance.js). */ .entrance-motes { position: absolute; inset: 0; overflow: hidden; } .entrance-motes span { position: absolute; left: var(--x); bottom: -10px; width: var(--size); height: var(--size); border-radius: 50%; background: #ffe2a8; box-shadow: 0 0 6px 2px rgba(255, 210, 140, 0.55); opacity: 0; animation: moteRise var(--rise) var(--delay) linear infinite; } @keyframes moteRise { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: 0.8; } 50% { transform: translate(var(--sway), -50vh); } 85% { opacity: 0.6; } 100% { opacity: 0; transform: translate(0, -100vh); } } /* A falling star past the window. */ .entrance-shooting-star { position: absolute; left: 22vw; top: 6vh; width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 244, 210, 0), #fff6dc 70%, #ffffff); opacity: 0; transform: rotate(-24deg); animation: fallingStar 11s 3s ease-in infinite; } @keyframes fallingStar { 0%, 88% { opacity: 0; transform: translate(0, 0) rotate(-24deg); } 90% { opacity: 1; } 97% { opacity: 1; } 100% { opacity: 0; transform: translate(-16vw, 7vh) rotate(-24deg); } } /* Sparkles around the logo (added by entrance.js). */ .entrance-wordmark { position: relative; } .entrance-sparkle { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #ffe6a8; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; pointer-events: none; animation: sparkle 5s ease-in-out infinite; } @keyframes sparkle { 0%, 70%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } 90% { opacity: 0; transform: scale(0.4) rotate(90deg); } } /* The Enter Library button catches the light now and then. */ .button--enter { position: relative; overflow: hidden; } .button--enter::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 236, 190, 0.45), transparent); transform: skewX(-18deg); animation: sheen 6s 2.5s ease-in-out infinite; pointer-events: none; } @keyframes sheen { 0%, 80% { left: -60%; } 100% { left: 130%; } } /* Switching between Sign In and Create Account: a page turns. */ .auth-form.is-turning { transform-origin: 0 50%; animation: pageTurn 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes pageTurn { from { opacity: 0; transform: perspective(900px) rotateY(-28deg) translateX(18px); } to { opacity: 1; transform: none; } } /* Entering the library: the room draws you in. */ body.is-entering-library .entrance-scene { transform: scale(1.06); transition: transform 0.55s ease-in; } body.is-entering-library .entrance-main { opacity: 0; transform: translateY(-10px); transition: opacity 0.45s ease-in, transform 0.45s ease-in; } body.is-entering-library .entrance-scene::after { animation: lightsDown 0.55s ease-in both; } @keyframes lightsDown { from { opacity: 0; } to { opacity: 1; } } /* Less motion, please: everything simply appears and rests. */ @media (prefers-reduced-motion: reduce) { .entrance-scene::after, .entrance-logo, .entrance-divider, .entrance-tagline, .entrance-phases, .entrance-description, .bookplate, .bookplate-moon, .entrance-glow, .entrance-portrait, .entrance-plant, .entrance-cat, .entrance-wordmark::before, .button--enter::after { animation: none; } } /* ========================================================= PHONE HELD SIDEWAYS A clean two-column page: the logo and words on the left, the bookplate on the right, the room quietly behind. ========================================================= */ @media (orientation: landscape) and (max-height: 540px) and (max-width: 1180px) { .entrance-scene { position: fixed; } .entrance-armchair, .entrance-table, .entrance-rug, .entrance-plant, .entrance-portrait, .entrance-lamp, .entrance-cat { display: none; } .entrance-window-wrap { left: 2vw; top: 4vh; width: 24vw; opacity: 0.55; } .entrance-bookcase { opacity: 0.45; } .entrance-floor { height: 12vh; } .entrance-main { min-height: 100dvh; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); justify-items: stretch; align-items: start; gap: 24px; padding: max(14px, env(safe-area-inset-top, 0px)) max(20px, calc(env(safe-area-inset-right, 0px) + 12px)) 24px max(20px, calc(env(safe-area-inset-left, 0px) + 12px)); } .entrance-brand { position: sticky; top: 20px; align-self: start; gap: 8px; margin-top: 12vh; } .entrance-logo { width: min(300px, 100%); } .entrance-tagline { font-size: 24px; white-space: normal; } .entrance-tagline br { display: none; } .entrance-description { max-width: 34ch; font-size: 15px; } .bookplate { max-width: none; } .bookplate-paper { padding: 26px 22px 14px; gap: 10px; } .bookplate-title { font-size: 30px; } }