/* ============================================================ STYLE.CSS Light default, dark mode via [data-theme="dark"] on ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display&display=swap'); /* ---------- CSS Variables ---------- */ :root { --bg: #f5f3ef; --bg-card: #ffffff; --bg-nav: #ffffff; --border: #e2ddd8; --text: #1a1714; --text-muted: #7a746e; --accent: #c0392b; --accent-hover:#a93226; --tag-bg: #ede9e4; --tag-text: #4a443e; --shadow: 0 2px 12px rgba(0,0,0,0.07); --shadow-hover:0 6px 24px rgba(0,0,0,0.13); --radius: 10px; --nav-h: 62px; --font-body: 'DM Sans', sans-serif; --font-display:'DM Serif Display', serif; } [data-theme="dark"] { --bg: #111010; --bg-card: #1c1b1b; --bg-nav: #161515; --border: #2e2b2b; --text: #ede9e4; --text-muted: #7a746e; --accent: #e05a4e; --accent-hover:#c94a3f; --tag-bg: #252323; --tag-text: #b0a89e; --shadow: 0 2px 12px rgba(0,0,0,0.35); --shadow-hover:0 6px 24px rgba(0,0,0,0.55); } /* ---------- Reset & Base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); min-height: 100vh; transition: background 0.25s, color 0.25s; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* ---------- Age Gate ---------- */ #age-gate { position: fixed; inset: 0; background: #0d0c0c; display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 1.5rem; } .age-gate-box { background: #1a1818; border: 1px solid #333; border-radius: 14px; max-width: 420px; width: 100%; padding: 2.5rem 2rem; text-align: center; color: #ede9e4; } .age-gate-box .logo-area { margin-bottom: 1.5rem; } .age-gate-box h1 { font-family: var(--font-display); font-size: 1.9rem; margin-bottom: 0.4rem; color: #fff; } .age-gate-box .tagline { font-size: 0.85rem; color: #7a746e; margin-bottom: 1.8rem; line-height: 1.5; } .age-gate-box .warn { font-size: 0.78rem; color: #7a746e; margin-top: 1.2rem; line-height: 1.6; } .btn-enter { display: block; width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 0.85rem 1rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; margin-bottom: 0.75rem; } .btn-enter:hover { background: var(--accent-hover); } .btn-enter:active { transform: scale(0.98); } .btn-leave { display: block; width: 100%; background: transparent; color: #7a746e; border: 1px solid #333; border-radius: 8px; padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 0.9rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .btn-leave:hover { border-color: #555; color: #aaa; } /* ---------- Navbar ---------- */ #navbar { position: sticky; top: 0; z-index: 100; background: var(--bg-nav); border-bottom: 1px solid var(--border); height: var(--nav-h); display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem; transition: background 0.25s, border-color 0.25s; box-shadow: 0 1px 0 var(--border); } .nav-logo { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.4rem; color: var(--text); flex-shrink: 0; } .nav-logo img { height: 36px; width: auto; display: none; /* shown by JS if logo exists */ } .nav-logo img.loaded { display: block; } .nav-search { flex: 1; max-width: 380px; margin: 0 auto; position: relative; } .nav-search input { width: 100%; background: var(--tag-bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 1rem 0.5rem 2.4rem; font-family: var(--font-body); font-size: 0.9rem; color: var(--text); outline: none; transition: border-color 0.2s, background 0.25s; } .nav-search input:focus { border-color: var(--accent); } .nav-search input::placeholder { color: var(--text-muted); } .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 0.9rem; } .nav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .theme-toggle { background: var(--tag-bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.7rem; cursor: pointer; font-size: 1rem; color: var(--text); transition: background 0.2s, border-color 0.2s; line-height: 1; } .theme-toggle:hover { background: var(--border); } /* ---------- Tag Filter Bar ---------- */ #tag-bar { background: var(--bg); border-bottom: 1px solid var(--border); padding: 0.65rem 1.5rem; display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; transition: background 0.25s, border-color 0.25s; } #tag-bar::-webkit-scrollbar { display: none; } .tag-btn { background: var(--tag-bg); color: var(--tag-text); border: 1px solid var(--border); border-radius: 20px; padding: 0.35rem 0.9rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; flex-shrink: 0; } .tag-btn:hover { border-color: var(--accent); color: var(--accent); } .tag-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* ---------- Main Grid ---------- */ #main { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; } #results-count { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1.1rem; } #grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } /* ---------- Video Card ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; display: flex; flex-direction: column; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--accent); } .card-embed { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: #111; overflow: hidden; } .card-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* Play overlay -- shown until user clicks */ .embed-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; z-index: 2; } .embed-overlay:hover { background: rgba(0,0,0,0.15); } .play-btn { width: 52px; height: 52px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; transition: transform 0.2s, background 0.2s; } .embed-overlay:hover .play-btn { transform: scale(1.08); background: #fff; } .embed-overlay.hidden { display: none; } .card-body { padding: 0.8rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .card-title { font-weight: 600; font-size: 0.93rem; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .card-duration { font-size: 0.75rem; color: var(--text-muted); background: var(--tag-bg); padding: 0.18rem 0.5rem; border-radius: 4px; } .card-tag { font-size: 0.72rem; color: var(--tag-text); background: var(--tag-bg); padding: 0.18rem 0.5rem; border-radius: 4px; } .card-cta { display: block; margin-top: auto; background: var(--accent); color: #fff; text-align: center; border-radius: 7px; padding: 0.6rem 0.75rem; font-size: 0.85rem; font-weight: 600; transition: background 0.2s, transform 0.1s; } .card-cta:hover { background: var(--accent-hover); } .card-cta:active { transform: scale(0.98); } /* ---------- Empty State ---------- */ #empty-state { grid-column: 1 / -1; text-align: center; padding: 4rem 1rem; color: var(--text-muted); } #empty-state p { margin-top: 0.5rem; font-size: 0.9rem; } /* ---------- Footer ---------- */ footer { border-top: 1px solid var(--border); text-align: center; padding: 1.5rem 1rem; font-size: 0.78rem; color: var(--text-muted); line-height: 1.8; transition: border-color 0.25s; } footer a { color: var(--text-muted); text-decoration: underline; } footer a:hover { color: var(--text); } /* ---------- Responsive ---------- */ @media (max-width: 600px) { #navbar { padding: 0 1rem; } #main { padding: 1rem 1rem 2.5rem; } #tag-bar { padding: 0.5rem 1rem; } #grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; } } @media (max-width: 400px) { #grid { grid-template-columns: 1fr; } }