/* ============================================================ TitanTables.com theme Four selectable palettes via . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap'); :root { --radius: 14px; --radius-sm: 9px; --maxw: 1180px; --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --display: 'Playfair Display', Georgia, serif; --shadow: 0 10px 30px rgba(0, 0, 0, .28); --shadow-sm: 0 4px 14px rgba(0, 0, 0, .18); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); --header-h: 68px; } /* ---------- Palettes ---------- */ /* Red & black — site default (also on :root so it renders even before the theme script runs) */ :root, html[data-theme='crimson'] { --bg: #121417; --surface: #1b1f24; --surface-2: #242a31; --surface-3: #2e353d; --text: #eceff2; --muted: #98a3af; --line: #2e353d; --accent: #c1272d; --accent-2: #5b6875; --accent-contrast: #ffffff; --header-bg: rgba(18, 20, 23, .72); --overlay: rgba(6, 7, 8, .88); color-scheme: dark; } /* Purple & gold — matches the crest */ html[data-theme='royal'] { --bg: #160f1e; --surface: #1e1629; --surface-2: #281d37; --surface-3: #33274a; --text: #f1ecf7; --muted: #ac9fbf; --line: #362b4b; --accent: #c9a24e; --accent-2: #9866e0; --accent-contrast: #1a1024; --header-bg: rgba(22, 15, 30, .74); --overlay: rgba(9, 5, 14, .88); color-scheme: dark; } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--accent-2); } h1, h2, h3 { line-height: 1.2; letter-spacing: .2px; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .display { font-family: var(--display); font-weight: 700; } .muted { color: var(--muted); } .center { text-align: center; } .section { padding: 56px 0; } .section-head { text-align: center; max-width: 720px; margin: 0 auto 34px; } .section-head h2 { font-family: var(--display); font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0 0 8px; } .section-head p { color: var(--muted); margin: 0; font-size: 1.05rem; } .eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; font-weight: 700; color: var(--accent); margin: 0 0 10px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: .96rem; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform .08s ease, background .2s ease, border-color .2s ease, color .2s ease; } .btn:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text); } .btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); color: var(--accent-contrast); } .btn-ghost { background: transparent; } .btn:focus-visible, a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--ring); } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; color: var(--text); } .brand img { width: 26px; height: 26px; } .brand:hover { color: var(--text); } .nav { display: flex; align-items: center; gap: 4px; } .nav a { color: var(--text); font-weight: 600; padding: 9px 14px; border-radius: 999px; font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; transition: background .18s ease, color .18s ease; } .nav a:hover { background: var(--surface-2); color: var(--accent); } .nav a.active { color: var(--accent); } @media (min-width: 821px) { .nav a { position: relative; background: none; } .nav a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; } .nav a:hover { background: none; } .nav a:hover::after, .nav a.active::after { transform: scaleX(1); } } .header-tools { display: flex; align-items: center; gap: 12px; } .hamburger { display: none; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; padding: 6px; } @media (max-width: 820px) { .hamburger { display: block; } .nav { position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 16px; gap: 4px; display: none; } .nav.open { display: flex; } .nav a { width: 100%; } } /* ---------- Theme switcher ---------- */ .theme-switcher { display: inline-flex; gap: 6px; align-items: center; } .theme-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; position: relative; transition: transform .1s ease, border-color .15s ease; } .theme-dot:hover { transform: scale(1.12); } .theme-dot[aria-pressed='true'] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } .theme-dot.crimson { background: linear-gradient(135deg, #1b1f24 50%, #c1272d 50%); } .theme-dot.royal { background: linear-gradient(135deg, #6b3fa0 50%, #c9a24e 50%); } @media (max-width: 480px) { .theme-switcher .label { display: none; } } /* ---------- Split hero (editorial, asymmetric, full-bleed) ---------- */ .hero-split { display: grid; grid-template-columns: 1.02fr 1fr; align-items: stretch; min-height: min(80vh, 700px); border-bottom: 1px solid var(--line); } .hero-media { position: relative; overflow: hidden; background: var(--surface-2); } .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 55%, color-mix(in srgb, var(--bg) 70%, transparent)); } .hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 6vw, 92px) clamp(26px, 5vw, 76px); position: relative; background: var(--bg); } .hero-copy::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); } .hero-copy > * { position: relative; z-index: 1; } .hero-title { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4.1rem); margin: 6px 0 18px; } .hero-lead { max-width: 46ch; margin: 0 0 30px; font-size: 1.12rem; color: var(--muted); } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; min-height: 0; } .hero-media { aspect-ratio: 16 / 10; } .hero-media::after { background: none; } .hero-copy { padding: 40px 22px 46px; text-align: left; } } /* ---------- Editorial section head (left-aligned, ruled) ---------- */ .ed-head { max-width: 760px; margin: 0 0 clamp(34px, 5vw, 60px); } .ed-head h2 { font-family: var(--display); font-size: clamp(1.9rem, 4.2vw, 3rem); margin: 0; } .ed-head p { color: var(--muted); margin: 14px 0 0; font-size: 1.08rem; } .ed-head::after { content: ''; display: block; width: 58px; height: 3px; border-radius: 2px; background: var(--accent); margin-top: 24px; } /* Alternating band background for rhythm */ .band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* ---------- Showcase (alternating editorial rows) ---------- */ .card { position: relative; } /* base kept only for card-tools anchoring */ body.editing .card[data-href] { cursor: default; } .card[data-href] { cursor: pointer; } .showcase { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 84px); counter-reset: showcase; } .showcase[data-collection='customizables'] { gap: 22px; } .showcase-row { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(26px, 4vw, 60px); align-items: center; counter-increment: showcase; } .showcase-row:nth-child(even) .showcase-media { order: 2; } .showcase-media { position: relative; border-radius: var(--radius); overflow: hidden; line-height: 0; background: var(--surface-2); box-shadow: var(--shadow); border: 1px solid var(--line); } .showcase-media img { width: 100%; height: auto; display: block; transition: transform .5s ease; } .showcase-row:hover .showcase-media img { transform: scale(1.045); } .showcase-media.empty { aspect-ratio: 4 / 3; line-height: 1.6; display: flex; align-items: center; justify-content: center; color: var(--muted); font-style: italic; } .media-count { position: absolute; bottom: 12px; right: 12px; z-index: 2; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--text); backdrop-filter: blur(4px); border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); } .showcase-body { position: relative; padding: 4px 0; } .showcase-num { display: block; font-family: var(--display); font-weight: 700; line-height: 1; font-size: clamp(2.4rem, 5vw, 3.6rem); color: color-mix(in srgb, var(--accent) 26%, transparent); margin-bottom: 10px; } .showcase-num::before { content: counter(showcase, decimal-leading-zero); } .showcase-title { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0 0 4px; color: var(--text); } .showcase-body .card-eyebrow { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; display: block; margin-bottom: 6px; } .showcase-text { color: var(--muted); font-size: 1.02rem; margin: 10px 0 0; max-width: 52ch; } .showcase-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 700; color: var(--accent); font-size: .95rem; } .showcase-link span { transition: transform .18s ease; } .showcase-row:hover .showcase-link span { transform: translateX(5px); } @media (max-width: 780px) { .showcase-row { grid-template-columns: 1fr; gap: 20px; } .showcase-row:nth-child(even) .showcase-media { order: 0; } .showcase-num { font-size: 2.2rem; } } /* ---------- Customizables (editorial, gallery on one side) ---------- */ .custom-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 48px); align-items: center; counter-increment: showcase; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 38px); box-shadow: var(--shadow-sm); transition: border-color .18s ease, box-shadow .18s ease; } .custom-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); } .custom-row:nth-child(even) .custom-row-media { order: 2; } .custom-row .showcase-body { padding-top: 0; } .custom-row-media { min-width: 0; } .image-gallery { display: flex; flex-wrap: wrap; gap: 10px; } .image-gallery img { width: 122px; height: 84px; object-fit: cover; border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: zoom-in; transition: transform .15s ease, border-color .15s ease; } .image-gallery img:hover { transform: scale(1.06); border-color: var(--accent); } /* ---------- Info panel (home CTA band, pull-quote style) ---------- */ .info-panel-copy { max-width: 680px; border-left: 3px solid var(--accent); padding-left: clamp(20px, 3vw, 36px); } .info-panel-copy .eyebrow { margin-bottom: 14px; } .info-panel-text { font-family: var(--display); font-weight: 600; line-height: 1.42; color: var(--text); font-size: clamp(1.3rem, 2.7vw, 1.95rem); margin: 0 0 28px; } /* ---------- Overview (image stage + thumbnails) ---------- */ .overview { padding: 40px 0 60px; } .overview-head { text-align: center; margin-bottom: 26px; } .overview-head h1 { font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 6px; } .overview-head p { color: var(--muted); margin: 0 auto; max-width: 680px; } .stage { position: relative; margin: 0 auto 18px; width: 900px; max-width: 100%; aspect-ratio: 16 / 10; background: #000; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; } .stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; } .stage .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; z-index: 2; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 90%, #000); color: var(--accent-contrast); box-shadow: var(--shadow-sm); transition: transform .08s ease, background .2s ease; } .stage .arrow:hover { background: var(--accent); transform: translateY(-50%) scale(1.07); } .stage .arrow svg { width: 22px; height: 22px; } .stage .arrow.left { left: 14px; } .stage .arrow.right { right: 14px; } .thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 960px; margin: 0 auto; } .thumbs img { width: 104px; height: 66px; object-fit: cover; border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: transform .15s ease, border-color .15s ease; opacity: .82; } .thumbs img:hover { transform: scale(1.08); opacity: 1; } .thumbs img.active { border-color: var(--accent); opacity: 1; } @media (max-width: 768px) { .stage .arrow { display: none; } .thumbs img { width: 84px; height: 54px; } } /* ============================================================ Lightbox viewer — titled header, framed image, thumbnail strip. All chrome is fixed to the viewport; nothing shifts with image size. ============================================================ */ .lb { display: none; position: fixed; inset: 0; z-index: 1000; box-sizing: border-box; background: var(--bg); align-items: center; justify-content: center; padding: 84px clamp(74px, 10vw, 132px) 108px; opacity: 0; transition: opacity .22s ease; } .lb.show { display: flex; opacity: 1; } /* Blurred copy of the current image — fills the empty space with the photo's own colors */ .lb-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; filter: blur(48px) saturate(1.5) brightness(.6); transform: scale(1.18); opacity: .95; } /* Themed color wash over the blur — adds accent color and keeps the chrome readable */ .lb-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(90% 70% at 50% -8%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 58%), radial-gradient(80% 70% at 100% 108%, color-mix(in srgb, var(--accent-2) 34%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--bg) 42%, transparent), color-mix(in srgb, var(--bg) 68%, transparent)); } /* Framed image */ .lb-frame { position: relative; z-index: 2; margin: 0; display: flex; align-items: center; justify-content: center; max-width: 100%; } .lb-image { max-width: 100%; max-height: calc(100vh - 200px); object-fit: contain; border-radius: 12px; border: 1px solid color-mix(in srgb, #fff 12%, transparent); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); background: #0a0a0c; transition: opacity .2s ease; user-select: none; } /* Header bar */ .lb-head { position: fixed; top: 0; left: 0; right: 0; z-index: 1002; display: flex; align-items: center; gap: 18px; padding: 16px clamp(16px, 3vw, 30px); background: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); } .lb-titles { display: flex; flex-direction: column; min-width: 0; } .lb-eyebrow { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent); } .lb-eyebrow:empty { display: none; } .lb-title { font-family: var(--display); font-size: 1.25rem; color: #fff; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-count { margin-left: auto; flex: 0 0 auto; color: rgba(255, 255, 255, .82); font-weight: 600; font-size: .9rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .lb-count:empty { display: none; } .lb-close { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: color-mix(in srgb, #fff 13%, transparent); color: #fff; display: grid; place-items: center; transition: background .2s ease, color .2s ease, transform .1s ease; } .lb-close svg { width: 22px; height: 22px; } .lb-close:hover { background: var(--accent); color: var(--accent-contrast); transform: rotate(90deg); } /* Navigation arrows — pinned to the screen edges, mid-height */ .lb-arrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 1002; width: 54px; height: 54px; border-radius: 50%; border: 1px solid color-mix(in srgb, #fff 14%, transparent); cursor: pointer; color: #fff; background: color-mix(in srgb, #000 42%, transparent); backdrop-filter: blur(6px); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: background .2s ease, color .2s ease, transform .12s ease, border-color .2s ease; } .lb-arrow:hover { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); transform: translateY(-50%) scale(1.08); } .lb-arrow:active { transform: translateY(-50%) scale(.95); } .lb-arrow svg { width: 26px; height: 26px; } .lb-prev { left: clamp(10px, 3vw, 34px); } .lb-next { right: clamp(10px, 3vw, 34px); } /* Thumbnail filmstrip */ .lb-strip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002; padding: 14px clamp(16px, 3vw, 30px); overflow-x: auto; overflow-y: hidden; background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, 0)); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; } .lb-strip::-webkit-scrollbar { height: 6px; } .lb-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 3px; } .lb-strip-inner { display: flex; gap: 8px; width: max-content; margin: 0 auto; } .lb-strip img { height: 54px; width: 76px; object-fit: cover; border-radius: 6px; cursor: pointer; flex: 0 0 auto; border: 2px solid transparent; opacity: .5; transition: opacity .15s ease, border-color .15s ease, transform .1s ease; } .lb-strip img:hover { opacity: .85; transform: translateY(-2px); } .lb-strip img.active { opacity: 1; border-color: var(--accent); } /* Single image: hide nav chrome */ .lb.single .lb-arrow, .lb.single .lb-strip, .lb.single .lb-count { display: none; } .lb.single { padding-bottom: 84px; } .lb.single .lb-image { max-height: calc(100vh - 168px); } @media (max-width: 640px) { .lb { padding: 70px 8px 92px; } .lb-image { max-height: calc(100vh - 172px); } .lb-title { font-size: 1.05rem; } .lb-arrow { width: 44px; height: 44px; } .lb-arrow svg { width: 22px; height: 22px; } .lb-prev { left: 6px; } .lb-next { right: 6px; } .lb-strip img { height: 46px; width: 64px; } } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 40px; } .footer-inner { padding: 34px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .footer-inner .contact { font-size: 1.02rem; } .footer-copy { color: var(--muted); font-size: .88rem; margin-top: 6px; } .footer-signin { color: var(--muted); } .footer-signin:hover { color: var(--accent); } /* ---------- Placeholder for photo-less options ---------- */ .photos-coming-soon { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 150px; padding: 20px; color: var(--muted); font-style: italic; background: var(--surface-2); border: 2px dashed var(--line); } /* ============================================================ Admin edit mode ============================================================ */ .admin-bar { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: 14px; padding: 8px 18px; background: var(--accent); color: var(--accent-contrast); font-weight: 600; font-size: .92rem; } .admin-bar .spacer { flex: 1; } .admin-bar a, .admin-bar button { color: var(--accent-contrast); } .admin-bar .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; background: color-mix(in srgb, var(--accent-contrast) 15%, transparent); padding: 5px 12px; border-radius: 999px; } .admin-bar .switch input { accent-color: var(--accent-contrast); } .admin-bar .btn-mini { background: color-mix(in srgb, var(--accent-contrast) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent-contrast) 40%, transparent); color: var(--accent-contrast); padding: 5px 12px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .85rem; } .admin-bar .btn-mini:hover { background: color-mix(in srgb, var(--accent-contrast) 28%, transparent); } .admin-status { font-size: .82rem; opacity: .85; } /* editable text targets */ body.editing [data-edit] { outline: 1px dashed color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 3px; border-radius: 4px; cursor: text; transition: background .15s ease; } body.editing [data-edit]:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } body.editing [data-edit]:focus { outline: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* edit-only controls hidden unless editing */ .edit-only { display: none !important; } body.editing .edit-only { display: revert !important; } body.editing .edit-only.flex { display: flex !important; } body.editing .edit-only.grid { display: grid !important; } /* card controls */ .card .card-tools { position: absolute; top: 10px; right: 10px; z-index: 5; gap: 6px; } .card-tools button { width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; font-size: .95rem; } .card-tools button:hover { background: var(--accent); color: var(--accent-contrast); } .card.dragging { opacity: .5; } .card.drag-over { border-color: var(--accent); box-shadow: var(--ring); } body.editing .card .drag-handle { cursor: grab; } /* add-card tile */ .add-card { border: 2px dashed var(--line); border-radius: var(--radius); background: transparent; color: var(--muted); min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-weight: 600; transition: border-color .15s ease, color .15s ease; } .add-card:hover { border-color: var(--accent); color: var(--accent); } .add-card .plus { font-size: 2rem; line-height: 1; } /* photo manager (overview + feature cards) */ .photo-manager { margin: 16px auto 0; max-width: 960px; } .dropzone { border: 2px dashed var(--line); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--muted); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .dropzone:hover, .dropzone.hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .manage-thumbs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; } .manage-thumb { position: relative; } .manage-thumb img { width: 104px; height: 66px; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid var(--line); } .manage-thumb .del { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--accent); color: var(--accent-contrast); cursor: pointer; font-size: .8rem; display: grid; place-items: center; } .manage-thumb.cover::after { content: 'cover'; position: absolute; bottom: 4px; left: 4px; font-size: .6rem; background: var(--accent); color: var(--accent-contrast); padding: 1px 5px; border-radius: 4px; font-weight: 700; } /* toast */ .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--surface-3); color: var(--text); border: 1px solid var(--line); padding: 11px 20px; border-radius: 999px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 3000; font-size: .9rem; font-weight: 600; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.error { border-color: var(--accent); } /* login */ .auth-wrap { min-height: 70vh; display: grid; place-items: center; padding: 40px 20px; } .auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); } .auth-card h1 { font-family: var(--display); font-size: 1.6rem; margin: 0 0 6px; text-align: center; } .auth-card p.sub { color: var(--muted); text-align: center; margin: 0 0 22px; font-size: .95rem; } .field { margin-bottom: 16px; } .field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; } .field input { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 1rem; font-family: var(--font); } .field input:focus { outline: none; box-shadow: var(--ring); border-color: var(--accent); } .auth-error { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); border: 1px solid var(--accent); padding: 10px 14px; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 16px; } /* role badges + select */ .role-badge { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); } .role-badge.admin { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); border-color: var(--accent); } .role-badge.editor { background: var(--surface-2); color: var(--muted); } .select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 1rem; font-family: var(--font); cursor: pointer; } .select:focus { outline: none; box-shadow: var(--ring); border-color: var(--accent); } /* admin dashboard */ .dash-section { margin-bottom: 40px; } .dash-section h2 { font-family: var(--display); border-bottom: 1px solid var(--line); padding-bottom: 10px; } .dash-list { display: flex; flex-direction: column; gap: 10px; } .dash-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; } .dash-row img { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); } .dash-row .meta { flex: 1; } .dash-row .meta strong { display: block; } .dash-row .meta span { color: var(--muted); font-size: .85rem; }