/* ── Font heading variable (overridden per-user in ) ── */ :root { --font-heading: 'Nunito'; } /* ── Light Theme (default) ───────────────────────────── */ :root { --rose: #8B2252; --rose-dark: #6a1a3e; --rose-soft: #f2d9e6; --gold: #C9956A; --gold-soft: #f5e8dc; --cream: #FDF6EF; --warm: #F5EDE4; --card-bg: #ffffff; --dark: #2C1A1A; --muted: #8a7070; --border: #e8ddd5; --input-bg: #ffffff; --nav-bg: #ffffff; --overlay: rgba(0,0,0,.5); --shadow: 0 4px 24px rgba(44,26,26,.10); --shadow-lg: 0 8px 40px rgba(44,26,26,.15); --radius: 16px; --radius-sm: 10px; --nav-h: 64px; --bot-h: 60px; --trans: .2s ease; } /* ── Dark Theme ──────────────────────────────────────── */ [data-theme="dark"] { --rose: #228dc3; --rose-dark: #1a72a0; --rose-soft: #0c1e30; --gold: #e8c96e; --gold-soft: #1e1a08; --cream: #0e1117; --warm: #161c28; --card-bg: #1b2130; --dark: #f2f6ff; --muted: #b8cce4; --border: #283048; --input-bg: #161c28; --nav-bg: #0c1020; --overlay: rgba(0,0,0,.75); --shadow: 0 4px 24px rgba(0,0,0,.5); --shadow-lg: 0 8px 40px rgba(0,0,0,.7); } /* ── Reset / Base ────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--cream); color: var(--dark); min-height: 100vh; padding-top: var(--nav-h); padding-bottom: calc(var(--bot-h) + env(safe-area-inset-bottom) + 10px); -webkit-font-smoothing: antialiased; transition: background .25s, color .25s; } a { color: var(--rose); text-decoration: none; } img, video { max-width: 100%; display: block; } textarea, input, select, button { font-family: inherit; font-size: 1rem; box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } /* ── Top Nav ─────────────────────────────────────────── */ .fwy-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: var(--nav-bg); box-shadow: 0 1px 12px rgba(0,0,0,.12); height: var(--nav-h); transition: background .25s; } .nav-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 16px; } .nav-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading), serif; font-size: 1.2rem; font-weight: 700; color: var(--rose); text-transform: uppercase; letter-spacing: .04em; } .brand-icon { font-size: 1.4rem; line-height: 1; } .nav-actions { display: flex; align-items: center; gap: 10px; } /* Lang dropdown */ .lang-dropdown { position: relative; } .lang-btn { padding: 4px 10px; border-radius: 20px; font-size: .8rem; font-weight: 600; color: var(--muted); transition: var(--trans); background: transparent; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px; } .lang-btn:hover { background: var(--rose-soft); color: var(--rose); } .lang-btn .fa-chevron-down { font-size: .65rem; transition: transform .2s; } .lang-dropdown.open .lang-btn .fa-chevron-down { transform: rotate(180deg); } .lang-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; min-width: 120px; z-index: 300; } .lang-dropdown.open .lang-menu { display: block; } .lang-option { display: flex; align-items: center; gap: 8px; padding: 9px 16px; color: var(--dark); text-decoration: none; font-size: .85rem; font-weight: 500; transition: background var(--trans); } .lang-option:hover { background: var(--warm); } .lang-option.active { color: var(--rose); font-weight: 700; } /* Theme toggle */ .theme-toggle { width: 36px; height: 36px; border-radius: 50%; background: var(--warm); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1rem; transition: var(--trans); } .theme-toggle:hover { background: var(--rose-soft); color: var(--rose); } /* User avatar / dropdown */ .nav-user-menu { position: relative; cursor: pointer; } .nav-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--rose); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; box-shadow: 0 2px 8px rgba(139,34,82,.3); transition: var(--trans); } .nav-avatar:hover { background: var(--rose-dark); } .user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: var(--card-bg); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); min-width: 180px; overflow: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: var(--trans); z-index: 999; border: 1px solid var(--border); } .user-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: all; } .dropdown-header { padding: 12px 16px; font-weight: 600; font-size: .9rem; color: var(--muted); border-bottom: 1px solid var(--border); } .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--dark); font-size: .9rem; transition: var(--trans); } .dropdown-item:hover { background: var(--warm); } .dropdown-item.text-danger { color: #e05c5c; } .dropdown-item i { width: 16px; text-align: center; } /* ── Bottom Nav ──────────────────────────────────────── */ .fwy-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: var(--nav-bg); box-shadow: 0 -1px 12px rgba(0,0,0,.12); height: calc(var(--bot-h) + env(safe-area-inset-bottom)); display: flex; align-items: flex-start; justify-content: center; transition: background .25s; } .bottom-nav-inner { width: 100%; max-width: 720px; height: var(--bot-h); display: flex; align-items: center; justify-content: space-around; } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: .72rem; font-weight: 500; padding: 8px 16px; transition: var(--trans); min-width: 60px; } .bottom-nav-item i { font-size: 1.3rem; } .bottom-nav-item.active { color: var(--rose); } .bottom-nav-add { width: 56px; height: 56px; border-radius: 50%; background: var(--rose); color: #fff !important; box-shadow: 0 4px 16px rgba(139,34,82,.4); min-width: 0; padding: 0; display: flex; align-items: center; justify-content: center; } .bottom-nav-add i { font-size: 1.5rem; } .bottom-nav-add:hover { background: var(--rose-dark); } .bottom-nav-sep { width: 1px; height: 32px; flex-shrink: 0; background: var(--border); } .fwy-bottom-nav.is-admin .bottom-nav-item { min-width: 0; padding: 8px 5px; font-size: .62rem; } .fwy-bottom-nav.is-admin .bottom-nav-item i { font-size: 1.1rem; } /* ── Main Container ──────────────────────────────────── */ .fwy-main { max-width: 720px; margin: 0 auto; padding: 24px 16px 0; } @media (max-width: 430px) { .fwy-main { padding-top: 18px; } } /* ── Cards ───────────────────────────────────────────── */ .card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 10px; border: 1px solid var(--border); transition: background .25s, border-color .25s; } .card-body { padding: 20px; } .card-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--warm); display: block; } .card-thumb-wrap { position: relative; } .card-thumb-play { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: .75rem; pointer-events: none; } .card-thumb-placeholder { width: 100%; aspect-ratio: 16/9; background: var(--warm); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 2rem; } .card-thumb-placeholder-svg { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; background-repeat: no-repeat; } /* Light theme placeholders */ [data-ph="text"] { background-image: url('/assets/img/placeholder-text.svg'); } [data-ph="audio"] { background-image: url('/assets/img/placeholder-audio.svg'); } [data-ph="photo"] { background-image: url('/assets/img/placeholder-photo.svg'); } /* Dark theme placeholders */ [data-theme="dark"] [data-ph="text"] { background-image: url('/assets/img/placeholder-text-dark.svg'); } [data-theme="dark"] [data-ph="audio"] { background-image: url('/assets/img/placeholder-audio-dark.svg'); } [data-theme="dark"] [data-ph="photo"] { background-image: url('/assets/img/placeholder-photo-dark.svg'); } .entry-card { cursor: pointer; transition: transform var(--trans), box-shadow var(--trans); } .entry-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .entry-meta { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); margin-bottom: 8px; } .entry-author-chip { background: var(--rose-soft); color: var(--rose); padding: 2px 10px; border-radius: 20px; font-weight: 600; } .entry-title { font-family: var(--font-heading), serif; font-size: 1.15rem; font-weight: 600; color: var(--dark); margin-bottom: 8px; line-height: 1.4; } .entry-excerpt { font-size: .9rem; color: var(--muted); line-height: 1.5; } .entry-media-icons { display: flex; gap: 8px; margin-top: 12px; font-size: .8rem; color: var(--muted); } .entry-media-icons span { display: flex; align-items: center; gap: 4px; } /* ── Dashboard view cycle button ─────────────────────────────────────────── */ .view-cycle-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--rose-soft); border: 1px solid var(--rose); color: var(--rose); font-size: .95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--trans); } .view-cycle-btn:hover { background: var(--rose); color: #fff; } /* ── Dashboard card view (default) ──────────────────────────────────────── */ .dash-list { display: flex; flex-direction: column; gap: 16px; } /* ── Dashboard compact grid view ────────────────────────────────────────── */ .dash-list.view-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .view-grid .entry-card { overflow: hidden; } .view-grid .card-thumb { aspect-ratio: 4/3; } .view-grid .card-thumb-placeholder { aspect-ratio: 4/3; height: auto; } .view-grid .card-body { padding: 10px; display: grid; grid-template-areas: "title title" "excerpt excerpt" "icons meta"; grid-template-columns: 1fr auto; align-items: end; } .view-grid .entry-meta { grid-area: meta; font-size: .68rem; gap: 4px; margin-bottom: 0; margin-top: 6px; flex-wrap: nowrap; justify-content: flex-end; align-items: center; } .view-grid .entry-author-chip { padding: 1px 7px; font-size: .66rem; } .view-grid .entry-title { grid-area: title; font-size: .88rem; margin-bottom: 5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .view-grid .entry-excerpt { grid-area: excerpt; font-size: .75rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; } .view-grid .entry-media-icons { grid-area: icons; margin-top: 6px; font-size: .72rem; gap: 6px; align-self: center; } .view-grid .list-row { display: none; } @media (min-width: 560px) { .dash-list.view-grid { grid-template-columns: repeat(3, 1fr); } } /* ── Dashboard list (explorer) view ─────────────────────────────────────── */ .list-row { display: none; } .dash-list.view-list { gap: 1px; } .view-list .card-thumb, .view-list .card-thumb-wrap, .view-list .card-thumb-placeholder, .view-list [data-ph], .view-list .card-body { display: none; } .view-list .list-row { display: flex; align-items: center; padding: 10px 15px; gap: 10px; min-width: 0; width: 100%; } .list-row-icon { color: var(--rose); font-size: .9rem; flex-shrink: 0; width: 18px; text-align: center; } .list-row-title { flex: 1; font-size: .88rem; font-weight: 400; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } @media (max-width: 479px) { .list-row-title { font-size: .8rem; letter-spacing: -.01em; } } .list-row-icons { display: none; gap: 8px; flex-shrink: 0; font-size: .75rem; color: var(--muted); } .list-row-icons span { display: flex; align-items: center; gap: 3px; } .list-row-icons-sm { display: flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: .78rem; color: var(--muted); } @media (min-width: 480px) { .list-row-icons { display: flex; } .list-row-icons-sm { display: none; } } .list-row-size { flex-shrink: 0; font-size: .72rem; color: var(--muted); min-width: 52px; text-align: right; } .list-row-date { flex-shrink: 0; font-size: .75rem; color: var(--muted); white-space: nowrap; } .list-row-type-badge { flex-shrink: 0; font-size: .7rem; color: var(--rose); background: var(--rose-soft); padding: 1px 7px; border-radius: 10px; } /* ── List view sort bar ──────────────────────────────────────────────────── */ .list-sort-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 2px 8px; font-size: .8rem; color: var(--muted); } .list-sort-label { display: flex; align-items: center; gap: 5px; flex-shrink: 0; white-space: nowrap; } .list-sort-select { font-size: .8rem; font-family: inherit; color: var(--dark); background: var(--warm); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; cursor: pointer; outline: none; } .list-sort-select:focus { border-color: var(--rose); } /* ── Settings view preference picker ────────────────────────────────────── */ .view-pref-grid { display: flex; gap: 12px; margin-top: 16px; } .view-pref-btn { flex: 1; padding: 16px 8px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--dark); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; font-family: inherit; transition: var(--trans); } .view-pref-btn:hover { border-color: var(--rose); color: var(--rose); } .view-pref-btn.selected { border-color: var(--rose); background: var(--rose-soft); color: var(--rose); } .view-pref-icon { font-size: 1.5rem; } /* ── Buttons ─────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem; border: none; cursor: pointer; transition: var(--trans); white-space: nowrap; } .btn-primary { background: var(--rose); color: #fff; box-shadow: 0 4px 12px rgba(139,34,82,.3); } .btn-primary:hover { background: var(--rose-dark); } .btn-secondary { background: var(--warm); color: var(--dark); } .btn-secondary:hover { filter: brightness(.93); } .btn-danger { background: #c0392b; color: #fff; } .btn-danger:hover { background: #a93226; } .btn-ghost { background: transparent; color: var(--rose); border: 2px solid var(--rose); } .btn-ghost:hover { background: var(--rose-soft); } .btn-sm { padding: 8px 16px; font-size: .85rem; } .btn-block { width: 100%; justify-content: center; } .btn:disabled { opacity: .6; cursor: not-allowed; } /* Record button */ .btn-record { background: var(--rose-soft); color: var(--rose); border: 2px solid var(--rose); } .btn-record:hover { background: var(--rose); color: #fff; } .btn-record.recording { background: #c0392b; color: #fff; border-color: #c0392b; animation: pulse-record 1.2s ease-in-out infinite; } @keyframes pulse-record { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.5); } 50% { box-shadow: 0 0 0 10px rgba(192,57,43,0); } } /* ── Forms ───────────────────────────────────────────── */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; color: var(--dark); } .form-control { width: 100%; padding: 14px 16px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem; color: var(--dark); background: var(--input-bg); transition: var(--trans); outline: none; } .form-control:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(139,34,82,.12); } textarea.form-control { resize: vertical; min-height: 140px; } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238a7070' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 40px; } .form-hint { font-size: .8rem; color: var(--muted); margin-top: 6px; } .form-error { font-size: .85rem; color: #e05c5c; margin-top: 6px; } /* ── Upload Zones ────────────────────────────────────── */ .upload-zone { border: 2px dashed var(--border); border-radius: var(--radius-sm); padding: 24px; text-align: center; cursor: pointer; transition: var(--trans); position: relative; overflow: hidden; } .upload-zone:hover, .upload-zone.dragover { border-color: var(--rose); background: var(--rose-soft); } .upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .upload-zone-icon { font-size: 2rem; color: var(--muted); margin-bottom: 8px; } .upload-zone-text { font-size: .9rem; color: var(--muted); } .upload-zone-text strong { color: var(--rose); } .upload-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .preview-item { position: relative; width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; background: var(--warm); } .preview-item img, .preview-item video { width: 100%; height: 100%; object-fit: cover; } .preview-remove { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.6); color: white; border: none; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: .7rem; display: flex; align-items: center; justify-content: center; } /* ── Audio recorder UI ───────────────────────────────── */ .recorder-tabs { display: flex; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--border); margin-bottom: 16px; } .recorder-tab { flex: 1; padding: 10px; text-align: center; font-size: .88rem; font-weight: 600; cursor: pointer; color: var(--muted); background: var(--warm); border: none; transition: var(--trans); } .recorder-tab.active { background: var(--rose); color: #fff; } .recorder-live { text-align: center; padding: 8px 0; } .record-controls { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .record-timer { font-size: 1.8rem; font-weight: 700; color: var(--dark); font-variant-numeric: tabular-nums; min-width: 70px; text-align: center; } .record-dot { display: inline-block; width: 12px; height: 12px; background: #c0392b; border-radius: 50%; animation: blink 1s ease-in-out infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.15} } .recorder-preview { background: var(--warm); border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 12px; display: flex; align-items: center; gap: 12px; } .recorder-preview audio { flex: 1; height: 40px; } /* ── Page Sections ───────────────────────────────────── */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .page-title { font-family: var(--font-heading), serif; font-size: 1.28rem; font-weight: 700; color: var(--dark); } .section-title { font-family: var(--font-heading), serif; font-size: 1.1rem; font-weight: 600; color: var(--dark); margin-bottom: 16px; } /* ── Entry View ──────────────────────────────────────── */ .entry-view-header { padding: 24px 20px 16px; border-bottom: 1px solid var(--border); } .entry-view-title { font-family: var(--font-heading), serif; font-size: 1.6rem; font-weight: 700; line-height: 1.3; } .entry-view-body { padding: 20px; font-size: 1rem; line-height: 1.8; color: var(--dark); white-space: pre-wrap; } .entry-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border); } /* ── Media Grid ──────────────────────────────────────── */ .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 16px 0; } .media-grid-item { aspect-ratio: 1; overflow: hidden; cursor: pointer; background: var(--warm); position: relative; } .media-grid-item img, .media-grid-item video { width: 100%; height: 100%; object-fit: cover; transition: var(--trans); } .media-grid-item:hover img, .media-grid-item:hover video { transform: scale(1.04); } .media-grid-item .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); color: white; font-size: 1.8rem; } .media-grid-full { grid-column: 1/-1; aspect-ratio: 16/9; } .audio-list { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } .audio-entry { background: var(--warm); border-radius: var(--radius-sm); padding: 14px 16px; } .audio-entry-label { font-size: .85rem; color: var(--muted); margin-bottom: 8px; } .audio-entry audio { width: 100%; height: 40px; } /* ── Gallery ─────────────────────────────────────────── */ .gallery-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .gallery-filter-btn { padding: 6px 12px; border-radius: 20px; border: 2px solid var(--border); background: var(--card-bg); color: var(--muted); font-weight: 600; font-size: .82rem; cursor: pointer; white-space: nowrap; transition: var(--trans); } .gallery-filter-btn.active { background: var(--rose); color: #fff; border-color: var(--rose); } /* ── Favourite button ────────────────────────────────────────────────────── */ .btn-fav-active { color: var(--rose) !important; } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .gallery-item { aspect-ratio: 1; overflow: hidden; cursor: pointer; background: var(--warm); position: relative; border-radius: 4px; } .gallery-item img, .gallery-item video { width: 100%; height: 100%; object-fit: cover; transition: var(--trans); } .gallery-item:hover img, .gallery-item:hover video { transform: scale(1.06); } .gallery-item .play-badge { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.6); color: white; border-radius: 4px; padding: 2px 6px; font-size: .75rem; } .gallery-audio-item { aspect-ratio: 1; background: var(--rose-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border-radius: 4px; color: var(--rose); } .gallery-audio-item i { font-size: 1.8rem; } .gallery-audio-item span { font-size: .75rem; font-weight: 600; } /* ── Search ──────────────────────────────────────────── */ .search-bar { display: flex; gap: 10px; margin-bottom: 20px; } .search-bar .form-control { flex: 1; } .search-filters { background: var(--card-bg); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 20px; box-shadow: var(--shadow); border: 1px solid var(--border); display: none; overflow: hidden; } .search-filters.open { display: block; } .filter-row { display: flex; flex-direction: column; gap: 12px; } .filter-row .form-group { margin-bottom: 0 !important; } .filter-row .form-control { width: 100%; box-sizing: border-box; } @media (min-width: 480px) { .filter-row { flex-direction: row; flex-wrap: wrap; } .filter-row .form-group { flex: 1 1 180px; } } /* ── Landing / Login Page ────────────────────────────── */ body.landing { padding-top: 0; padding-bottom: 0; background-color: #f0efed; background-image: url('/assets/img/doodles.svg'); background-size: 300px 300px; background-repeat: repeat; display: flex; flex-direction: column; min-height: 100vh; } [data-theme="dark"] body.landing { background-color: #0e1117; background-image: url('/assets/img/doodles-dark.svg'); } .landing-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; } .landing-logo { font-family: var(--font-heading), serif; font-size: 2rem; font-weight: 700; color: #1a1a1a; text-align: center; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; } [data-theme="dark"] .landing-logo { color: var(--dark); } .landing-logo .heart { color: var(--rose); } .landing-tagline { color: rgba(20,10,10,.50); text-align: center; font-size: .95rem; margin-bottom: 6px; } .landing-subtitle { color: rgba(20,10,10,.35); text-align: center; font-size: .85rem; margin-bottom: 36px; } [data-theme="dark"] .landing-tagline { color: rgba(228,236,248,.65); } [data-theme="dark"] .landing-subtitle { color: rgba(228,236,248,.45); } .landing-card { background: #fff; border-radius: var(--radius); box-shadow: 0 8px 48px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06); padding: 36px 32px; width: 100%; max-width: 380px; border: 1px solid rgba(0,0,0,.06); } [data-theme="dark"] .landing-card { background: var(--card-bg); border-color: var(--border); } .landing-card h2 { font-family: var(--font-heading), serif; font-size: 1.4rem; margin-bottom: 24px; text-align: center; color: var(--dark); } .landing-top-bar { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 36px; flex-wrap: wrap; } .landing-lang-btn { padding: 6px 12px; border-radius: 20px; font-size: .82rem; font-weight: 600; color: #555; background: rgba(0,0,0,.07); border: none; cursor: pointer; transition: var(--trans); text-decoration: none; display: flex; align-items: center; gap: 5px; } .landing-lang-btn:hover { background: rgba(0,0,0,.13); } .landing-lang-btn .fa-chevron-down { font-size: .65rem; transition: transform .2s; } .lang-dropdown.open .landing-lang-btn .fa-chevron-down { transform: rotate(180deg); } [data-theme="dark"] .landing-lang-btn { color: rgba(228,236,248,.8); background: rgba(255,255,255,.08); } [data-theme="dark"] .landing-lang-btn:hover { background: rgba(255,255,255,.14); } .landing-lang-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; min-width: 120px; z-index: 300; } .lang-dropdown.open .landing-lang-menu { display: block; } .landing-theme-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.07); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #555; font-size: .9rem; transition: var(--trans); } .landing-theme-btn:hover { background: var(--rose); color: #fff; } [data-theme="dark"] .landing-theme-btn { background: rgba(255,255,255,.1); color: rgba(228,236,248,.8); } .alert-error { background: #fde8e8; color: #c0392b; border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px; font-size: .9rem; } [data-theme="dark"] .alert-error { background: #3d1010; color: #e07070; } /* ── Share modal ─────────────────────────────────────── */ .share-modal-wrap { position: fixed; inset: 0; z-index: 8000; display: flex; align-items: flex-end; justify-content: center; background: var(--overlay); padding: 0; } .share-modal-wrap.hidden { display: none; } .share-modal { background: var(--card-bg); border-radius: var(--radius) var(--radius) 0 0; width: 100%; max-width: 540px; box-shadow: var(--shadow-lg); overflow: hidden; animation: slideUp .22s ease; } @keyframes slideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .share-modal-header { display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; border-bottom: 1px solid var(--border); } .share-modal-title { font-weight: 700; font-size: 1rem; flex: 1; color: var(--dark); } .share-modal-close, .share-back-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--warm); border: none; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; transition: var(--trans); } .share-modal-close:hover, .share-back-btn:hover { background: var(--rose-soft); color: var(--rose); } .share-modal-body { padding: 10px 10px 20px; } .share-option-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 12px; border-radius: var(--radius-sm); background: transparent; border: none; cursor: pointer; color: var(--dark); font-family: inherit; text-decoration: none; transition: background var(--trans); text-align: left; } .share-option-btn:hover { background: var(--warm); } .share-opt-icon { font-size: 1.4rem; width: 32px; text-align: center; flex-shrink: 0; } .share-opt-label { font-size: .95rem; font-weight: 600; margin-bottom: 2px; } .share-opt-sub { font-size: .78rem; color: var(--muted); } .share-email-note { font-size: .82rem; color: var(--muted); line-height: 1.5; background: var(--warm); border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 4px; display: flex; gap: 8px; align-items: flex-start; } .share-email-note .fa-circle-info { margin-top: 2px; flex-shrink: 0; color: var(--rose); } /* ── Lightbox ────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } .lightbox.hidden { display: none; } .lightbox-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.92); } .lightbox-content { position: relative; z-index: 1; max-width: 96vw; max-height: 96vh; display: flex; align-items: center; gap: 12px; } .lightbox-media { display: flex; align-items: center; justify-content: center; } .lightbox-media img, .lightbox-media video { max-width: 90vw; max-height: 88vh; border-radius: 8px; } .lightbox-close, .lightbox-prev, .lightbox-next { background: rgba(255,255,255,.15); color: white; border: none; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: var(--trans); flex-shrink: 0; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.3); } .lightbox-close { position: absolute; top: -48px; right: 0; } /* ── Toast ───────────────────────────────────────────── */ .toast { position: fixed; bottom: calc(var(--bot-h) + env(safe-area-inset-bottom) + 8px); left: 50%; transform: translateX(-50%); background: var(--dark); color: var(--cream); padding: 12px 24px; border-radius: 24px; font-size: .9rem; font-weight: 500; z-index: 9998; box-shadow: var(--shadow-lg); transition: opacity .3s; white-space: nowrap; } .toast.hidden { display: none; } .toast.success { background: #27ae60; color: #fff; } .toast.error { background: #c0392b; color: #fff; } /* ── Admin ───────────────────────────────────────────── */ .admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--card-bg); border-radius: var(--radius-sm); padding: 20px 16px; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--border); } .stat-value { font-size: 2rem; font-weight: 700; color: var(--rose); line-height: 1; } .stat-label { font-size: .8rem; color: var(--muted); margin-top: 6px; } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .admin-table th { text-align: left; padding: 10px 14px; background: var(--warm); color: var(--dark); font-weight: 600; border-bottom: 2px solid var(--border); } .admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--dark); } .admin-table tr:hover td { background: var(--warm); } .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; } .badge-admin { background: var(--rose-soft); color: var(--rose); } .badge-user { background: var(--gold-soft); color: var(--gold); } .badge-active { background: #e8f5e9; color: #2e7d32; } .badge-inactive { background: #fde8e8; color: #c0392b; } [data-theme="dark"] .badge-active { background: #1a3d25; color: #5ecc80; } [data-theme="dark"] .badge-inactive { background: #3d1010; color: #e07070; } /* ── Storage Bar ─────────────────────────────────────── */ .storage-bar { background: var(--warm); border-radius: 8px; overflow: hidden; height: 8px; margin: 8px 0; } .storage-bar-fill { height: 100%; background: var(--rose); border-radius: 8px; transition: width .5s ease; } /* ── Helpers ─────────────────────────────────────────── */ .text-center { text-align: center; } .text-muted { color: var(--muted); } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .flex { display: flex; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .hidden { display: none !important; } .divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; } .empty-state { text-align: center; padding: 48px 24px; color: var(--muted); font-size: 1rem; } .empty-state i { font-size: 3rem; margin-bottom: 16px; opacity: .4; display: block; } /* ── Notes ───────────────────────────────────────────── */ .gallery-notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .gallery-notes .card-thumb-placeholder { display: none; } .gallery-notes .card-body { padding: 12px; } .gallery-notes .entry-meta { font-size: .72rem; gap: 4px; margin-bottom: 5px; flex-wrap: wrap; } .gallery-notes .entry-author-chip { padding: 1px 7px; font-size: .68rem; } .gallery-notes .entry-title { font-size: .9rem; margin-bottom: 4px; line-height: 1.3; } .gallery-notes .entry-excerpt { font-size: .78rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .note-card { cursor: pointer; border-left: 4px solid var(--rose); transition: transform var(--trans), box-shadow var(--trans); } .note-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .note-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--rose-soft); color: var(--rose); padding: 2px 8px; border-radius: 12px; font-size: .68rem; font-weight: 600; } /* ── Settings cards (shared) ─────────────────────────── */ .settings-card { padding: 24px; margin-bottom: 16px; } .settings-card .section-title { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .settings-desc { color: var(--muted); font-size: .9rem; margin-bottom: 18px; line-height: 1.5; } .settings-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .settings-divider::before, .settings-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .bday-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--warm); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px; } .bday-age { font-weight: 700; color: var(--dark); font-size: 1rem; } .bday-today { font-size: .88rem; color: var(--rose); font-weight: 600; } .bday-soon { font-size: .85rem; color: var(--muted); } /* ── Settings stats card ─────────────────────────────── */ .settings-stats-card { padding: 24px; margin-bottom: 16px; } .settings-stats-card .section-title { margin-bottom: 20px; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } @media (max-width: 480px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } .stat-tile { background: var(--warm); border-radius: var(--radius-sm); padding: 18px 12px; text-align: center; border: 1px solid var(--border); } .stat-icon { font-size: 1.1rem; color: var(--rose); opacity: .7; margin-bottom: 8px; display: block; } .stat-value { font-size: 2rem; font-weight: 700; color: var(--rose); font-family: var(--font-heading), serif; line-height: 1; } .stat-label { font-size: .75rem; color: var(--muted); margin-top: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .sysinfo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; } @media (min-width: 560px) { .sysinfo-grid { grid-template-columns: repeat(4, 1fr); } } .sysinfo-item { background: var(--warm); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 12px; } .sysinfo-label { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; } .sysinfo-label i { margin-right: 4px; } .sysinfo-value { font-size: 1rem; font-weight: 700; color: var(--dark); } .sysinfo-sub { font-size: .75rem; font-weight: 400; color: var(--muted); margin-left: 2px; } .login-history-wrap { border-top: 1px solid var(--border); padding-top: 20px; } .login-history-table-wrap { overflow-x: auto; } .login-history-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .login-history-table th { text-align: left; padding: 8px 12px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border); } .login-history-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--dark); } .login-history-table tr:last-child td { border-bottom: none; } .login-history-table tr:hover td { background: var(--warm); } /* ── Font picker ─────────────────────────────────────── */ .font-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 400px) { .font-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 560px) { .font-grid { grid-template-columns: repeat(5, 1fr); } } .font-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--warm); cursor: pointer; transition: var(--trans); text-align: center; } .font-card:hover { border-color: var(--rose); background: var(--rose-soft); } .font-card.selected { border-color: var(--rose); background: var(--rose-soft); color: var(--rose); } .font-preview { font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--dark); } .font-card.selected .font-preview { color: var(--rose); } .font-name { font-size: .7rem; font-weight: 600; color: var(--muted); line-height: 1.2; } .font-card.selected .font-name { color: var(--rose); } .alert-success { background: #e8f5e9; color: #2e7d32; border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px; font-size: .9rem; } [data-theme="dark"] .alert-success { background: #0d2e12; color: #6fcf7a; } .spinner { width: 28px; height: 28px; border: 3px solid var(--rose-soft); border-top-color: var(--rose); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Modal ───────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 8000; display: flex; align-items: flex-end; justify-content: center; } .modal-overlay.hidden { display: none; } .modal-box { background: var(--card-bg); border-radius: var(--radius) var(--radius) 0 0; width: 100%; max-width: 500px; padding: 28px 24px 32px; max-height: 90vh; overflow-y: auto; border-top: 1px solid var(--border); } .modal-title { font-family: var(--font-heading), serif; font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; color: var(--dark); } .modal-actions { display: flex; gap: 10px; margin-top: 20px; } /* ── Tags ────────────────────────────────────────────── */ /* Input wrapper */ .tag-input-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--input-bg); padding: 7px 10px; cursor: text; position: relative; min-height: 42px; } .tag-input-wrap:focus-within { border-color: var(--rose); } .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .tag-text-input { border: none; outline: none; background: transparent; color: var(--dark); font-size: .9rem; min-width: 100px; flex: 1; padding: 2px 2px; } .tag-text-input::placeholder { color: var(--muted); } /* Suggestions dropdown */ .tag-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 250; overflow: hidden; max-height: 180px; overflow-y: auto; } .tag-suggestion-item { padding: 9px 14px; cursor: pointer; font-size: .85rem; color: var(--dark); display: flex; align-items: center; gap: 6px; } .tag-suggestion-item::before { content: '#'; color: var(--rose); font-weight: 700; } .tag-suggestion-item:hover { background: var(--warm); color: var(--rose); } /* Chips (editable) */ .tag-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--rose-soft); color: var(--rose); border-radius: 20px; padding: 3px 8px 3px 10px; font-size: .78rem; font-weight: 700; line-height: 1; white-space: nowrap; } .tag-chip-remove { background: none; border: none; cursor: pointer; color: var(--rose); padding: 0; line-height: 1; font-size: .95rem; opacity: .6; display: flex; align-items: center; } .tag-chip-remove:hover { opacity: 1; } /* ── Memory Unique ID ────────────────────────────────── */ .memory-uid-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .memory-uid-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .memory-uid-badge { font-family: 'Courier New', Courier, monospace; font-size: .88rem; font-weight: 700; color: var(--rose); background: var(--rose-soft); padding: 3px 12px; border-radius: 6px; letter-spacing: .08em; } /* Read-only tag pills */ .entry-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; } .entry-tag { display: inline-flex; align-items: center; gap: 3px; background: var(--rose-soft); color: var(--rose); border-radius: 20px; padding: 3px 12px; font-size: .78rem; font-weight: 700; text-decoration: none; transition: background var(--trans), color var(--trans); } .entry-tag::before { content: '#'; } .entry-tag:hover { background: var(--rose); color: #fff; } /* Tag cloud (search page) */ .tag-cloud-wrap { margin: 20px 0 4px; } .tag-cloud-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: baseline; } .tag-cloud-item { color: var(--rose); background: var(--rose-soft); border-radius: 20px; padding: 4px 13px; font-weight: 700; text-decoration: none; transition: background var(--trans), color var(--trans); line-height: 1.4; cursor: pointer; } .tag-cloud-item:hover, .tag-cloud-item.active { background: var(--rose); color: #fff; } /* ── Responsive ──────────────────────────────────────── */ @media (min-width: 600px) { .media-grid { grid-template-columns: repeat(4, 1fr); } .gallery-grid { grid-template-columns: repeat(4, 1fr); } .gallery-notes { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 430px) { :root { --nav-h: 52px; } .nav-brand { font-size: 1rem; letter-spacing: .02em; gap: 5px; } .brand-icon { font-size: 1.2rem; } .nav-actions { gap: 6px; } .page-title { font-size: 1.1rem; } }