:root { --ink: #3d2a1d; --muted: #7a6552; --paper: #fbf4e8; --accent: #b7651d; --danger: #a43b25; }
.brand { display: inline-flex; align-items: center; flex: 0 1 32%; min-width: 0; height: 125px; } .brand img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: left center; } .desktop-memories-banner { display: block; flex: 1 1 0; min-width: 0; height: 100%; width: 100%; object-fit: contain; object-position: right center; } .mobile-memories-banner { display: none; } @media (max-width:600px) { .brand { flex: none; height: 50px; } .brand img { height: 50px; width: auto; max-width: 52vw; } .desktop-memories-banner { display: none; } .mobile-memories-banner { display: block; height: 50px; width: auto; max-width: 42vw; margin-left: auto; object-fit: contain; object-position: right center; } }
* { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 system-ui, sans-serif; }
header { height: 130px; background: white; display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 2vw, 32px); padding: 0 max(24px, calc((100% - 1120px)/2)); border-bottom: 1px solid #e7e9ef; } .brand { color: var(--ink); text-decoration: none; font-size: 1.25rem; font-weight: 800; } nav form { display: inline; } nav button { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; }
.menu-bar { min-height: 48px; display: flex; align-items: center; padding: 0 max(24px, calc((100% - 1120px)/2)); background: white; border-bottom: 1px solid #e7e9ef; } .menu-bar > a { color: var(--ink); font-weight: 650; text-decoration: none; } .account-menu { position: relative; margin-left: auto; } .account-menu summary { cursor: pointer; color: var(--ink); font-weight: 650; list-style: none; } .account-menu summary::-webkit-details-marker { display: none; } .account-menu summary::after { content: "▾"; margin-left: 7px; color: var(--muted); } .account-menu[open] summary::after { content: "▴"; } .account-menu form { position: absolute; z-index: 2; top: calc(100% + 10px); right: 0; min-width: 130px; padding: 6px; background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 20px #17203320; } .account-menu button { width: 100%; padding: 8px 10px; text-align: left; border-radius: 5px; } .account-menu button:hover { background: #f3f4f6; }
main { max-width: 1120px; margin: 0 auto; padding: 44px 24px; } h1,h2,h3,p { margin-top: 0; } .intro { margin-bottom: 28px; } .intro p,.hint,.eyebrow { color: var(--muted); } .upload-panel,.book-card,.auth { background: white; border: 1px solid #e5e7eb; border-radius: 14px; padding: 24px; box-shadow: 0 2px 5px #17203309; } .upload-panel { margin-bottom: 42px; } label { display: block; font-weight: 650; margin-bottom: 5px; } input[type=text], input[type=password], input[type=file] { width: 100%; max-width: 500px; padding: 9px; border: 1px solid #cbd2df; border-radius: 7px; font: inherit; } button,.book-card a,.reader-head a { cursor: pointer; border-radius: 7px; padding: 9px 13px; font: inherit; } .primary { background: var(--accent); border: 1px solid var(--accent); color: white; } .danger { background: white; color: var(--danger); border: 1px solid #f5c2c0; margin-left: 10px; } .error { display: block; color: var(--danger); margin-top: 4px; } .book-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 18px; } .book-card { padding: 0; overflow: hidden; } .book-card img { display:block; width:100%; height: 210px; object-fit: cover; background: #dce1ec; } .book-card > div { padding: 18px; } .book-card h3 { margin-bottom: 2px; } .book-card p { color:var(--muted); font-size:.9rem; } .book-card a { display:inline-block; background:#eef0ff; color:#3830b3; text-decoration:none; } .auth { max-width: 430px; margin: 60px auto; } .reader-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; } .reader-head a { background:white; border:1px solid #d8dce5; color:var(--ink); text-decoration:none; }.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; margin-bottom:4px; }.reader { overflow:hidden; }.flipbook { margin:0 auto; box-shadow: 0 12px 35px #17203335; }.page { background:white; overflow:hidden; }.page img { width:100%; height:100%; object-fit:contain; display:block; }.reader-controls { display:flex; gap:16px; justify-content:center; align-items:center; padding:22px; }.reader-controls button { background:white; border:1px solid #cbd2df; } @media (max-width:600px) { main { padding: 28px 16px; }.reader-head { align-items:flex-start; }.reader-controls { gap:8px; font-size:.9rem; } }