/* Wish Me A Dream — mobile-first dream feed. Light is the default token set; .dark on swaps to the dark palette. */ :root { --bg: radial-gradient(ellipse 80% 60% at 50% 0%, #FBEFF4 0%, #F3E9F5 35%, #EDE7EF 65%, #F7EFEA 100%); --header-fade: linear-gradient(180deg, rgba(247,239,234,0.96) 0%, rgba(247,239,234,0.85) 70%, rgba(247,239,234,0) 100%); --text-primary: #4A3B52; --text-secondary: #7C6B84; --text-muted: #A897AE; --text-faint: #B7A6BE; --card-bg: linear-gradient(135deg, #F0DCE4, #E4D9EE, #ECE3D6); --card-shadow: 0 18px 40px -18px rgba(122,92,130,0.35), 0 2px 10px rgba(122,92,130,0.12); --card-border: rgba(255,255,255,0.25); --toggle-bg: rgba(74,59,82,0.07); --toggle-border: rgba(74,59,82,0.18); --modal-bg: #F7EFEA; --modal-scrim: rgba(38,26,43,0.5); --input-bg: rgba(255,255,255,0.6); --input-border: rgba(74,59,82,0.2); --accent: #9A85B8; } html.dark { --bg: radial-gradient(ellipse 80% 60% at 50% 0%, #2C2438 0%, #201A2B 35%, #17131F 65%, #100E17 100%); --header-fade: linear-gradient(180deg, rgba(16,14,23,0.97) 0%, rgba(16,14,23,0.88) 70%, rgba(16,14,23,0) 100%); --text-primary: #F1E6EE; --text-secondary: #C4B3CC; --text-muted: #9A88A6; --text-faint: #8B7B96; --card-bg: linear-gradient(135deg, #3A2E42, #2E2A40, #332C38); --card-shadow: 0 18px 40px -18px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.4); --card-border: rgba(255,255,255,0.08); --toggle-bg: rgba(255,255,255,0.08); --toggle-border: rgba(255,255,255,0.2); --modal-bg: #1B1626; --modal-scrim: rgba(10,7,15,0.72); --input-bg: rgba(255,255,255,0.06); --input-border: rgba(255,255,255,0.18); --accent: #B98CA6; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; background: var(--bg); background-attachment: fixed; color: var(--text-primary); font-family: "Jost", system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background 0.4s ease, color 0.3s ease; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--modal-bg); color: var(--text-primary); padding: 10px 16px; border-radius: 0 0 12px 0; z-index: 100; } .skip-link:focus { left: 0; } /* --- header ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 20; width: 100%; max-width: 600px; padding: 44px 24px 22px; text-align: center; background: var(--header-fade); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .wordmark { margin: 0; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 34px; line-height: 1.1; background: linear-gradient(90deg, #B98CA6, #9A85B8, #C79A78); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .tagline { margin: 6px 0 0; font-size: 12px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); } .theme-toggle { position: absolute; top: 40px; right: 20px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--toggle-border); background: var(--toggle-bg); color: var(--text-secondary); font-size: 16px; cursor: pointer; display: grid; place-items: center; transition: background 0.3s ease, transform 0.2s ease; } .theme-toggle:hover { transform: scale(1.08); } .auth-link { margin-top: 16px; border: none; background: none; color: var(--text-faint); font-family: "Jost", sans-serif; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; padding: 4px 2px; border-bottom: 1px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; } .auth-link:hover { color: var(--accent); border-color: var(--accent); } /* --- feed -------------------------------------------------------------- */ .feed { width: 100%; max-width: 470px; padding: 8px 14px 90px; display: flex; flex-direction: column; gap: 34px; } .feed-status { text-align: center; color: var(--text-muted); font-style: italic; font-family: "Cormorant Garamond", serif; font-size: 18px; padding: 40px 0; } .post { animation: riseIn 0.5s ease backwards; } .post-image { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--card-bg); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--card-border); cursor: zoom-in; } .post-image img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.5s ease; } .post-image img.loaded { opacity: 1; } .post-badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: rgba(38,26,43,0.55); backdrop-filter: blur(4px); } .post-body { padding: 14px 4px 0; display: flex; flex-direction: column; gap: 6px; } .post-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .post-title { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--text-primary); } .post-time { font-size: 11px; letter-spacing: 1px; color: var(--text-faint); white-space: nowrap; } .post-caption { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--text-secondary); } /* --- footer sentinel --------------------------------------------------- */ .sentinel { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 60px; opacity: 0.55; } .sparkle { font-size: 22px; color: var(--accent); animation: floatSoft 3.5s ease-in-out infinite; } .sentinel-text { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 15px; color: var(--text-muted); } /* --- lightbox ---------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: var(--modal-scrim); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: riseIn 0.35s ease; } .lightbox[hidden] { display: none; } .lightbox-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 94vw; } .lightbox-frame { width: 94vw; height: 78vh; max-width: 1100px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; } .lightbox-frame img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 16px; } .lightbox-title { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 24px; color: #F3E9F0; text-align: center; } .lightbox-caption { margin: 0; font-weight: 300; font-size: 14px; color: rgba(243,233,240,0.75); text-align: center; max-width: 600px; } .lightbox-close { margin-top: 4px; padding: 8px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); color: #F3E9F0; font-size: 13px; letter-spacing: 2px; cursor: pointer; } /* --- auth modal -------------------------------------------------------- */ .auth-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: var(--modal-scrim); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: riseIn 0.3s ease; } .auth-modal[hidden] { display: none; } .auth-card { position: relative; width: 100%; max-width: 360px; padding: 34px 28px 30px; border-radius: 22px; background: var(--modal-bg); box-shadow: var(--card-shadow); text-align: center; } .auth-close { position: absolute; top: 12px; right: 16px; border: none; background: none; color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; } .auth-title { margin: 0 0 6px; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 26px; color: var(--text-primary); } .auth-sub { margin: 0 0 22px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .auth-form { display: flex; flex-direction: column; gap: 12px; } .auth-form[hidden] { display: none; } .auth-label { text-align: left; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); } .auth-input { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); font-family: "Jost", sans-serif; font-size: 16px; text-align: center; letter-spacing: 1px; } .auth-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .auth-btn { margin-top: 4px; padding: 13px; border: none; border-radius: 12px; background: linear-gradient(90deg, #B98CA6, #9A85B8, #C79A78); color: #fff; font-family: "Jost", sans-serif; font-size: 14px; letter-spacing: 1px; cursor: pointer; transition: opacity 0.2s ease, transform 0.1s ease; } .auth-btn:hover { opacity: 0.92; } .auth-btn:active { transform: translateY(1px); } .auth-btn:disabled { opacity: 0.5; cursor: default; } .auth-link-btn { border: none; background: none; color: var(--text-faint); font-size: 12px; cursor: pointer; text-decoration: underline; } .auth-msg { margin: 16px 0 0; min-height: 18px; font-size: 13px; color: var(--text-secondary); } .auth-msg.error { color: #C97A93; } .auth-msg.ok { color: #7FA87F; } /* --- keyframes --------------------------------------------------------- */ @keyframes riseIn { from { opacity: 0; transform: translateY(28px) scale(0.98); filter: blur(6px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes floatSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { *, .post, .lightbox, .auth-modal, .sparkle { animation: none !important; } .post-image img { transition: none; } } @media (min-width: 520px) { .wordmark { font-size: 40px; } }