/* ========================================================================== Jamon — Design System Ported from zevkev.de's "torn paper craft" system (paper cut-outs + washi tape, pinned to a cutting mat) -- same component mechanics (.rip cards, buttons, nav, cart drawer, modal chrome), reskinned in Jamon's own green instead of ZevKev's blue. Page-specific additions live in their own file (shop.css, home.css, legal.css, youtube.css) and load alongside this one. --blue-mat/--blue-mat-dark keep their ZevKev-era NAMES on purpose even though the value is green here -- every page-specific CSS file (and style.css itself) references var(--blue-mat) throughout, and renaming the token everywhere would be a much larger, purely-cosmetic diff for zero visual difference. Treat "--blue-mat" as "the cutting-mat token", not literally "blue", in this repo. */ :root { /* cutting mat + paper -- mat greens are Jamon's own reference palette (#4E9F3D family); paper/tape/text stay identical to zevkev.de's values on purpose (same shared "Medienspeicher" paper look, only the mat differs). */ --blue-mat: #4E9F3D; --blue-mat-dark: #357029; --grid: rgba(255, 255, 255, 0.1); --grid-strong: rgba(255, 255, 255, 0.2); --paper: #fcfbf5; --paper-accent: #fdf2b3; --paper-pink: #f7d9d0; --tape: rgba(230, 220, 170, 0.6); --text-dark: #1a1a1a; --text-muted: #4a4a40; /* Different tone from zevkev.de's cork-brown on purpose (explicit ask: Jamon's shop should read as its own material, not a reused cork board) -- same feTurbulence grain recipe below, just a warmer khaki/ canvas base color instead of cork's orange-brown. */ --photo-mat: #b3a077; --photo-mat-dark: #7d6e4c; --accent-red: #c0392b; --accent-green: #3c7a4b; --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.3); --shadow-hover: 0 14px 30px rgba(0, 0, 0, 0.38); --header-h: 72px; /* section "zones" on the homepage, and this site's own secondary accent (form focus rings etc.) -- zevkev.de uses --twitch-purple for this same generic-accent role in a few spots; this site has no Twitch content at all, so a warm gold (matching --paper-accent's family) takes that job instead of porting a Twitch-branded color for a non-Twitch purpose. */ --zone-hero: #2f6b23; --zone-discord: #1f3a1a; --accent-2: #c9922e; --accent-2-dark: #8f6316; --discord-blurple: #5865f2; --discord-blurple-dark: #2f3590; /* irregular torn-edge silhouettes — three variants so cards don't all read as one stamped-out repeated shape */ --tear-a: polygon(0% 2%, 6% 0%, 13% 1.6%, 22% 0.2%, 31% 1.8%, 40% 0%, 50% 1.4%, 60% 0.3%, 70% 1.7%, 80% 0%, 90% 1.5%, 100% 0.4%, 100% 98%, 90% 100%, 80% 98.3%, 70% 99.8%, 60% 98.1%, 50% 100%, 40% 98.4%, 31% 99.7%, 22% 98%, 13% 100%, 6% 98.2%, 0% 99.9%); --tear-b: polygon(0% 0.5%, 8% 1.8%, 17% 0.2%, 26% 1.6%, 35% 0%, 45% 1.9%, 55% 0.3%, 65% 1.5%, 75% 0.1%, 85% 1.7%, 93% 0%, 100% 1.3%, 100% 99.5%, 92% 98.2%, 83% 99.8%, 74% 98.4%, 65% 100%, 55% 98.1%, 45% 99.7%, 35% 98.3%, 25% 100%, 17% 98.5%, 9% 99.9%, 0% 98.7%); --tear-c: polygon(0% 1.5%, 5% 0%, 12% 2%, 20% 0.4%, 29% 1.9%, 38% 0.2%, 48% 1.6%, 58% 0%, 68% 1.8%, 78% 0.3%, 88% 1.5%, 100% 0%, 100% 98.5%, 89% 100%, 79% 98.2%, 69% 99.7%, 59% 98%, 49% 100%, 39% 98.4%, 30% 99.8%, 21% 98.1%, 13% 100%, 6% 98.3%, 0% 99.6%); } /* Dark mode: same component CSS everywhere, just a different palette. Cool neutral slate for regular cards, a richer warm bronze (not a darkened version of the light-mode gold, which just reads muddy) for accent cards, so there's real contrast between the two instead of everything sliding toward brown. Toggled by js/theme.js via data-theme on . */ :root[data-theme="dark"] { /* Dark green-black mat, not zevkev.de's navy -- same darkening ratio applied to Jamon's own green instead of ZevKev's blue. */ --blue-mat: #0a140a; --blue-mat-dark: #050a05; --grid: rgba(255, 255, 255, 0.035); --grid-strong: rgba(255, 255, 255, 0.08); --paper: #1e2128; --paper-accent: #2d3a54; --paper-pink: #352c3d; --tape: rgba(150, 165, 195, 0.45); --text-dark: #f0f1f5; --text-muted: #9d9fa8; --photo-mat: #5c5236; --photo-mat-dark: #3d3624; --accent-red: #e0564a; --accent-green: #5fb377; /* Brighter for dark-mode text/border legibility -- same "*-dark token stays as-is, base token gets a dark override" pattern as the above. */ --accent-2: #e0ad4f; --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.65); --shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.7); } :root[data-theme="dark"] .site-header, :root[data-theme="dark"] .site-footer, :root[data-theme="dark"] .site-nav { background-color: var(--paper); } :root[data-theme="dark"] .site-logo, :root[data-theme="dark"] .site-nav a, :root[data-theme="dark"] .nav-toggle span, :root[data-theme="dark"] .nav-toggle span::before, :root[data-theme="dark"] .nav-toggle span::after, :root[data-theme="dark"] .footer-links a, :root[data-theme="dark"] .footer-note, :root[data-theme="dark"] .theme-toggle, :root[data-theme="dark"] .cart-button { color: var(--text-dark) !important; } :root[data-theme="dark"] .site-nav a:hover { background: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .cart-button { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); } :root[data-theme="dark"] .theme-toggle { border-color: rgba(255, 255, 255, 0.16); } :root[data-theme="dark"] .footer-socials a { background: rgba(255, 255, 255, 0.08); color: var(--text-dark) !important; } :root[data-theme="dark"] .footer-socials a:hover { background: rgba(255, 255, 255, 0.16); } /* Cart drawer: the light-mode rgba(0,0,0,..) washes used for the tray, close button and remove button read as almost nothing against the dark paper tone, so dark mode gets its own lighter set (same pattern as .footer-socials above). The receipt-tear perforation flips from a black to a white wash for the same reason. */ :root[data-theme="dark"] .cart-items { background: rgba(0, 0, 0, 0.22); } :root[data-theme="dark"] .cart-drawer .cart-close { background: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .cart-drawer .cart-close:hover { background: rgba(255, 255, 255, 0.16); } :root[data-theme="dark"] .cart-item-remove { background: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .cart-drawer-header { border-bottom-color: rgba(255, 255, 255, 0.16); } :root[data-theme="dark"] .receipt-tear { background: linear-gradient(-45deg, transparent 8px, rgba(255, 255, 255, 0.14) 8px) 0 0/16px 16px repeat-x, linear-gradient(45deg, transparent 8px, rgba(255, 255, 255, 0.14) 8px) 0 0/16px 16px repeat-x; background-position: bottom; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body { background-color: var(--blue-mat); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 160px), repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 160px), linear-gradient(var(--grid-strong) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--grid-strong) 1.5px, transparent 1.5px), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), url("/assets/img/mat-texture.jpg"); background-size: auto, auto, 225px 225px, 225px 225px, 45px 45px, 45px 45px, 160px 160px; background-blend-mode: normal, normal, normal, normal, normal, normal, multiply; background-position: top left; background-repeat: repeat; font-family: "Futura", "Trebuchet MS", Arial, sans-serif; color: var(--text-dark); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } h1, h2, .display-font { font-family: "Bebas Neue", "Futura", "Trebuchet MS", Arial, sans-serif; letter-spacing: 0.5px; font-weight: 400; line-height: 1.05; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .page-body { padding-top: calc(var(--header-h) + 30px); padding-bottom: 60px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 100%; } @keyframes float1 { 0%, 100% { transform: translateY(0) rotate(0.5deg); } 50% { transform: translateY(-12px) rotate(-0.5deg); } } @keyframes float2 { 0%, 100% { transform: translateY(-5px) rotate(-1deg); } 50% { transform: translateY(8px) rotate(1deg); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== Paper-craft component kit ========================================================================== */ .rip { position: relative; isolation: isolate; } /* No grain image here (solid --paper color only) -- paper-grain.jpg tiled at 160px and multiply-blended produced a visible grid-like moire pattern at some sizes/zoom levels/device pixel ratios (reported on both small buttons and the large homepage hero card, so it's not a size-dependent fluke -- a tiled fine-noise texture is just generally moire-prone). .rip--photo below uses a completely different, already-proven procedural noise recipe (SVG feTurbulence, not a tiled JPEG) for the cork material look and is unaffected by this. */ .rip::before { content: ""; position: absolute; inset: 0; background-color: var(--paper); clip-path: var(--tear-a); filter: drop-shadow(var(--shadow-soft)); z-index: -1; } .rip--b::before { clip-path: var(--tear-b); } .rip--c::before { clip-path: var(--tear-c); } .rip--accent::before { background-color: var(--paper-accent); } .rip--pink::before { background-color: var(--paper-pink); } /* Cork-board mat: an SVG feTurbulence noise filter for the grain (not stacked gradients — those tile in an obviously regular grid at this scale). stitchTiles="stitch" needs the filter region pinned to exactly the tile size (x/y/width/height + userSpaceOnUse) to actually wrap seamlessly — left at SVG's default expanded region, the noise didn't align at the tile edge, showing up as a visible seam down the middle of every photo. Kept deliberately low-contrast and fine-grained (high baseFrequency, low numOctaves, a gentle linear contrast curve, soft-light not overlay) — an earlier, punchier version read as blobby ("melted cheese") or harshly rough rather than the smooth, even, understated grain real cork actually has. Built from --photo-mat/ --photo-mat-dark plus neutral gray/black — no new hue. Kept in sync with .product-photo-frame in shop.css, which uses the same recipe. */ .rip--photo::before { background-color: var(--photo-mat); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22220%22%20height%3D%22220%22%20filterUnits%3D%22userSpaceOnUse%22%20primitiveUnits%3D%22userSpaceOnUse%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.22%200.26%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22220%22%20height%3D%22220%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200%200%200%200%201%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%22linear%22%20slope%3D%220.9%22%20intercept%3D%220.05%22%2F%3E%3CfeFuncG%20type%3D%22linear%22%20slope%3D%220.9%22%20intercept%3D%220.05%22%2F%3E%3CfeFuncB%20type%3D%22linear%22%20slope%3D%220.9%22%20intercept%3D%220.05%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22220%22%20height%3D%22220%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E"), radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,.1) 100%); background-size: 220px 220px, 100% 100%; background-blend-mode: soft-light, multiply; box-shadow: inset 0 0 8px rgba(0,0,0,.12); } .tape { position: absolute; width: 108px; height: 30px; background: var(--tape); top: -6px; left: 24px; transform: rotate(-12deg); z-index: 5; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); pointer-events: none; } .paper-sheet { padding: 40px; margin: 20px auto; max-width: 900px; width: 95%; display: flex; align-items: center; gap: 35px; animation: float1 6s ease-in-out infinite; box-sizing: border-box; } .paper-sheet h1, .paper-sheet h2, .paper-sheet p, .paper-sheet b, .paper-sheet a { color: var(--text-dark) !important; text-align: left; } .p-btn { padding: 12px 24px; text-decoration: none; color: var(--text-dark) !important; font-weight: bold; display: inline-flex; align-items: center; gap: 11px; font-size: 1.02rem; border: none; background: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .p-btn:hover { transform: scale(1.05) rotate(0deg) !important; color: var(--blue-mat) !important; } .p-btn:hover::before { filter: drop-shadow(var(--shadow-hover)); } .p-btn:active { transform: scale(0.98) !important; } .p-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .p-btn svg { width: 19px; height: 19px; flex-shrink: 0; } .btn-accent::before { background-color: var(--paper-accent); } .btn-accent:hover { transform: scale(1.04) translateY(-3px) !important; } .btn-accent:disabled, .btn-accent[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none !important; } .scissor-line { width: 100%; max-width: 1100px; margin: 60px auto; border-top: 3px dashed rgba(255, 255, 255, 0.4); position: relative; } .c-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 36px; width: 100%; max-width: 1100px; } .c-card { padding: 32px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text-dark) !important; } .c-card h3 { color: var(--text-dark) !important; margin: 15px 0 5px 0; text-transform: uppercase; letter-spacing: 1px; font-family: "Bebas Neue", sans-serif; font-size: 1.3rem; } .c-card p { color: var(--text-dark) !important; margin: 5px 0 15px 0; line-height: 1.45; } .c-avatar { width: 112px; height: 112px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); object-fit: cover; margin: 0 auto; } .tilt-a { transform: rotate(-1.2deg); } .tilt-b { transform: rotate(1deg); } .tilt-c { transform: rotate(-0.5deg); } /* Had no hover feedback at all before -- same lift-on-hover language as .note/.product-card elsewhere on the site, preserving each card's own static tilt instead of snapping flat like those do (there's no "active selection" state here to justify un-tilting, so keeping the scattered angle even on hover reads more consistently "pinned in place"). */ .c-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .tilt-a:hover { transform: rotate(-1.2deg) translateY(-6px) scale(1.02); } .tilt-b:hover { transform: rotate(1deg) translateY(-6px) scale(1.02); } .tilt-c:hover { transform: rotate(-0.5deg) translateY(-6px) scale(1.02); } .c-card:hover::before { box-shadow: var(--shadow-hover); } /* Was an `animation` interpolating opacity 0->1 alongside the slide-up — meaning every card spent ~0.6s at partial opacity while scrolling into view, which let the body's own grid/dot mat texture show through blended with the card's paper color the whole time. Looked exactly like "texture bleeding through," reproducibly, on every page load and every scroll, which a post-animation screenshot (taken after waiting) would never catch. Fix: opacity isn't in `transition-property`, so it snaps instantly the moment `.is-visible` is added (card is always either fully invisible or fully opaque, never partial) while the slide-up still animates smoothly via transform alone. */ .reveal { opacity: 0; transform: translateY(18px); } .reveal.is-visible { opacity: 1; transform: translateY(0); transition: transform 0.5s ease; } @media (max-width: 768px) { .paper-sheet { flex-direction: column; text-align: center; align-items: center; } .paper-sheet h1, .paper-sheet h2, .paper-sheet p { text-align: center; } .tape { left: 50%; transform: translateX(-50%) rotate(-5deg); } .p-btn { width: 85%; justify-content: center; } } /* ========================================================================== Chrome: header, nav, footer — deliberately flat and crisp, not torn. Content gets the scrapbook treatment; navigation stays calm and legible. ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 100; display: flex; align-items: center; background-color: var(--paper-accent); background-image: url("/assets/img/paper-grain.jpg"); background-size: 160px 160px; background-blend-mode: multiply; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 100%; } .site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-dark) !important; font-family: "Bebas Neue", "Futura", sans-serif; font-size: 1.7rem; letter-spacing: 1.5px; text-transform: uppercase; } .site-logo img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--text-dark); } /* Tab-like pills instead of bare underlined text, matching the filter-pill / size-swatch chip treatment used elsewhere, so the active page reads as a clearly "pressed" tab rather than a thin line easy to miss. */ .site-nav { display: flex; align-items: center; gap: 4px; } .site-nav a { color: var(--text-dark) !important; text-decoration: none; font-weight: bold; font-size: 0.95rem; letter-spacing: 0.2px; position: relative; padding: 8px 16px; border-radius: 20px; transition: background-color 0.2s ease; } .site-nav a:hover { background: rgba(0, 0, 0, 0.06); } .site-nav a.is-active { background: var(--paper-accent); } /* Hidden on desktop by default -- the persistent #account-slot chip in .header-actions already covers login-state visibility there (on the pages it's shown on at all, see js/layout.js's showAccount comment). This is specifically the "show it in the hamburger menu too" ask, which only exists as a menu below the mobile breakpoint -- see the @media (max-width: 700px) block further down for the visible styling. */ .nav-account-slot { display: none; } .header-actions { display: flex; align-items: center; gap: 14px; } .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(0,0,0,.12); background: linear-gradient(to bottom, #bfe0f5 0%, #eaf3d8 100%); display: flex; align-items: center; justify-content: center; color: var(--text-dark); overflow: hidden; position: relative; transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background .5s ease; } .theme-toggle:hover { transform: scale(1.08); } .theme-toggle.is-dark { background: linear-gradient(to bottom, #182035 0%, #2a1f30 100%); } .theme-toggle-scene { position: relative; width: 100%; height: 100%; } .theme-icon { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease; } .theme-icon-sun { transform: translate(-50%, -50%) translateY(0); opacity: 1; color: #d98a2b; } .theme-icon-moon { transform: translate(-50%, -50%) translateY(-170%); opacity: 0; color: #dfe3ef; } .theme-toggle.is-dark .theme-icon-sun { transform: translate(-50%, -50%) translateY(170%); opacity: 0; } .theme-toggle.is-dark .theme-icon-moon { transform: translate(-50%, -50%) translateY(0); opacity: 1; } @media (prefers-reduced-motion: reduce) { .theme-icon { transition: opacity 0.3s ease; } .theme-icon-sun, .theme-icon-moon { transform: translate(-50%, -50%) !important; } } .cart-button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(0,0,0,.12); background: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background .2s; position: relative; } .cart-button:hover { transform: scale(1.08); background: #fff; } .cart-button:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 3px; } .cart-button svg { width: 20px; height: 20px; } .cart-badge { position: absolute; top: -6px; right: -6px; background: var(--accent-red); color: #fff; font-size: 0.68rem; font-weight: bold; min-width: 19px; height: 19px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid var(--paper-accent); transform: scale(0); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .cart-badge.is-visible { transform: scale(1); } /* ---------- Account: header login state + auth modal ---------- */ .account-button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(0,0,0,.12); background: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; color: var(--text-dark); transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background .2s; flex-shrink: 0; } .account-button:hover { transform: scale(1.08); background: #fff; } .account-button:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 3px; } :root[data-theme="dark"] .account-button { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: var(--text-dark); } /* Header's logged-in state: a small colored initial-letter avatar (see auth.js's avatarColorFor -- deterministic per account, no stored/fetched color needed) linking straight to /account/, replacing the old "Willkommen, X" text chip + separate logout button. Fixed white text regardless of theme: the background is one of avatarColorFor's own palette colors, not a theme token, so it needs to stay legible against itself in both themes the same way .watchlist-toggle's icon color does. */ .account-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff !important; font-family: "Bebas Neue", sans-serif; font-size: 1.1rem; letter-spacing: 0.5px; text-decoration: none; border: 2px solid rgba(255,255,255,.4); box-shadow: 0 2px 6px rgba(0,0,0,.25); flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .account-avatar:hover { transform: scale(1.08); } .account-avatar:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 3px; } /* Reused on the account page for its own logout button -- a small circular icon action, same visual language as .account-button but neutral (not avatar-colored) since logging out isn't an identity-branded action. */ .account-logout { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(0,0,0,.12); background: rgba(255,255,255,.5); color: var(--text-dark); flex-shrink: 0; transition: background .2s, transform 0.2s ease; } .account-logout:hover { background: #fff; transform: scale(1.05); } :root[data-theme="dark"] .account-logout { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); } .auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; } .auth-tab { flex: 1; padding: 10px; border-radius: 999px; font-weight: bold; background: transparent; color: var(--text-muted); border: 2px solid transparent; transition: background .2s, color .2s; } .auth-tab.is-active { background: var(--paper-accent); color: var(--text-dark); } .auth-field { margin-bottom: 14px; } .auth-field label { display: block; font-size: 0.8rem; font-weight: bold; color: var(--text-muted); margin-bottom: 4px; } .auth-field input { width: 100%; padding: 10px 12px; box-sizing: border-box; background: var(--paper); color: var(--text-dark); border: 2px solid var(--text-muted); border-radius: 4px; font-family: inherit; font-size: 0.95rem; transition: border-color 0.2s ease; } .auth-field input:focus-visible { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(201,146,46,.25); } .auth-error { color: var(--accent-red); font-size: 0.85rem; margin: -4px 0 14px; min-height: 1em; } .auth-submit { width: 100%; justify-content: center; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-muted); font-size: 0.8rem; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,.15); } :root[data-theme="dark"] .auth-divider::before, :root[data-theme="dark"] .auth-divider::after { background: rgba(255,255,255,.15); } .auth-google { width: 100%; justify-content: center; gap: 10px; } /* ---------- Comments (js/comments.js) ---------- */ .comments-section { width: 100%; max-width: 900px; } .comment-form { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 24px; } .comment-form textarea { width: 100%; min-height: 70px; padding: 10px 12px; box-sizing: border-box; background: var(--paper); color: var(--text-dark); border: 2px solid var(--text-muted); border-radius: 4px; font-family: inherit; font-size: 0.92rem; resize: vertical; transition: border-color 0.2s ease; } .comment-form textarea:focus-visible { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(201,146,46,.25); } .comment-form-row { display: flex; align-items: center; gap: 12px; } .comment-cancel-reply { color: var(--text-muted); font-size: 0.85rem; text-decoration: underline; background: none; border: none; } .comment-form-error { color: var(--accent-red); font-size: 0.82rem; margin: 0; min-height: 1em; } .comment-form--reply { margin: 12px 0 4px; } .comments-login-prompt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text-muted); margin: 14px 0 24px; } .comments-empty { color: var(--text-muted); padding: 20px 0; } .comment-list { display: flex; flex-direction: column; gap: 4px; } .comment { padding: 14px 4px; border-bottom: 2px dashed rgba(0, 0, 0, 0.12); } :root[data-theme="dark"] .comment { border-bottom-color: rgba(255, 255, 255, 0.12); } .comment:last-child { border-bottom: none; } .comment-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } /* Fixed white text (not a theme token) -- the background is one of auth.js's own avatarColorFor/custom-picked palette colors, not a theme surface, so it needs to stay legible against itself in both themes the same reason .account-avatar/.watchlist-toggle's icon already do. */ .comment-avatar { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: "Bebas Neue", sans-serif; font-size: 0.8rem; } .comment--reply .comment-avatar { width: 20px; height: 20px; font-size: 0.7rem; } .comment-author { font-weight: bold; font-size: 0.92rem; color: var(--text-dark); text-decoration: none; } a.comment-author:hover { text-decoration: underline; } /* Pulled tight against .comment-author via negative margin -- .comment-head's 10px gap (meant for avatar/name/time spacing) would otherwise float this badge away from the name it's identifying. Gold, not a theme token: it's a fixed "official" signal, not a themed surface. */ .comment-verified { margin-left: -6px; color: #d9a520; flex-shrink: 0; } :root[data-theme="dark"] .comment-verified { color: #e6b93a; } .comment-time { font-size: 0.76rem; color: var(--text-muted); } .comment-text { margin: 0 0 8px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .comment-actions { display: flex; gap: 16px; } .comment-reply-btn, .comment-delete-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; font-size: 0.78rem; font-weight: bold; color: var(--text-muted); } .comment-reply-btn:hover, .comment-delete-btn:hover { color: var(--text-dark); } .comment-delete-btn { color: var(--accent-red); opacity: 0.75; } .comment-delete-btn:hover { color: var(--accent-red); opacity: 1; } .comment-replies { margin: 10px 0 0 20px; padding-left: 16px; border-left: 2px solid rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 10px; } :root[data-theme="dark"] .comment-replies { border-left-color: rgba(255, 255, 255, 0.12); } .comment--reply { padding: 4px 0; border-bottom: none; } /* .cart-close's own `background: none` (further down this file) has equal specificity to .qv-close's and is declared later, so it wins over plain .qv-close on a button carrying both classes -- same reason the YouTube/ Twitch video modals scope their own .qv-close background instead of relying on the bare class. */ .auth-panel .qv-close { background: rgba(0, 0, 0, 0.08); } .nav-toggle { display: none; width: 40px; height: 40px; background: none; border: none; color: var(--text-dark); position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 9px; width: 22px; height: 2.5px; background: var(--text-dark); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .nav-toggle span { top: 19px; } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); } /* ---------- Cookie consent banner ---------- */ .consent-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 400; max-width: 560px; margin: 0 auto; padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 14px; animation: fadeUp 0.4s ease; } /* Same tape-accent + torn-edge treatment as the legal pages' .legal-sheet and the homepage's cards, so the banner reads as a deliberately designed piece of the site instead of a bolted-on utility bar. */ .consent-banner .tape { left: 50%; transform: translateX(-50%) rotate(-3deg); } .consent-head { display: flex; align-items: center; gap: 10px; } .consent-head h2 { margin: 0; font-size: 1.25rem; color: var(--text-dark); } .consent-icon { flex-shrink: 0; color: var(--text-dark); opacity: 0.75; } .consent-banner p { margin: 0; line-height: 1.65; color: var(--text-dark); } .consent-banner a { color: #0f4c81; font-weight: bold; } :root[data-theme="dark"] .consent-banner a { color: #7fb2e5; } .consent-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 2px; } .consent-actions .p-btn { padding: 10px 22px; font-size: 0.92rem; } @media (max-width: 500px) { .consent-banner { left: 12px; right: 12px; bottom: 12px; padding: 24px 20px 20px; } .consent-actions { justify-content: stretch; } .consent-actions .p-btn { flex: 1; justify-content: center; } } /* ---------- Cart drawer + toast ---------- */ /* Shared by the cart drawer and the shop quick-view modal (js/catalog.js reuses this class, on a different element id -- #quick-view below scopes to just that one). */ .cart-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .cart-backdrop.is-open { opacity: 1; pointer-events: auto; } /* Quick-view: no dimming overlay at all -- the paper panel itself, sitting on top of the ordinary, undimmed page, is meant to read like a physical note stuck on the desk rather than a dialog that darkens everything behind it. Click-outside-to-close still works; there's just nothing visible to click on. */ #quick-view.cart-backdrop { background: transparent; } /* Generic floating-panel modal chrome -- originated as the shop's quick-view modal (see the comment above .rip::before for its history), now shared by the YouTube/Twitch video modals and the account login modal too. Lives here (not shop.css) so it works on every page, not just ones that happen to load shop.css. */ .qv-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92%; max-width: 1000px; max-height: 88vh; overflow-y: auto; padding: 20px; box-sizing: border-box; z-index: 250; } .qv-close { position: absolute; top: 12px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, 0.08); font-size: 1.4rem; line-height: 1; z-index: 2; } .qv-divider { border-top: 2px dashed rgba(0, 0, 0, 0.15); margin: 18px 0; } .auth-panel { max-width: 420px; } /* Chrome, not content: flat rectangle with the same paper-grain texture as the header/footer (see the "Chrome" comment above) rather than a .rip torn edge — the panel is flush with the viewport's top and bottom, so a horizontal tear (the only kind --tear-* draws) would just run offscreen. Line items below get the actual torn-card treatment instead. */ .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 201; background-color: var(--paper); background-image: url("/assets/img/paper-grain.jpg"); background-size: 160px 160px; background-blend-mode: multiply; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; padding: 26px 24px; } .cart-drawer.is-open { transform: translateX(0); } .cart-drawer-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 3px dashed rgba(0, 0, 0, 0.2); padding-bottom: 16px; margin-bottom: 10px; } .cart-drawer-header h2 { margin: 0; font-size: 1.5rem; } /* .cart-close is shared with the shop quick-view modal's close button (js/catalog.js) via the same class name — the bare rule must keep working unmodified there, so the icon-button treatment below is scoped to .cart-drawer only and never touches the quick-view modal. color: buttons don't inherit text color from ancestors by default (an easy-to-miss CSS quirk — form controls use the UA's own default, not the cascade), so without this the "x" rendered black regardless of theme, nearly invisible on the dark-mode panel it sits on. */ .cart-close { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--text-dark); } .cart-drawer .cart-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, 0.06); font-size: 1.6rem; line-height: 1; color: var(--text-dark); transition: background 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .cart-drawer .cart-close:hover { background: rgba(0, 0, 0, 0.12); transform: scale(1.08) rotate(90deg); } .cart-drawer .cart-close:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 2px; } /* Line items sit in a faintly recessed tray so the paper-toned .rip cards read as distinct pieces resting in the drawer, instead of blending into the drawer's own paper background. */ .cart-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; margin-top: 4px; background: rgba(0, 0, 0, 0.035); border-radius: 6px; } .cart-item { display: flex; gap: 12px; align-items: center; padding: 12px 14px; } .cart-item.rip:nth-child(even)::before { clip-path: var(--tear-b); } .cart-item.rip:nth-child(odd)::before { clip-path: var(--tear-c); } .cart-item img { width: 58px; height: 58px; object-fit: cover; flex-shrink: 0; background: var(--photo-mat); padding: 3px; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.25); } .cart-item-info { flex: 1; min-width: 0; } .cart-item-name { font-weight: bold; font-size: 0.92rem; } .cart-item-attrs { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } .cart-item-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .cart-item-stepper { display: flex; align-items: center; gap: 6px; } .cart-qty-btn { width: 22px; height: 22px; border-radius: 50%; border: none; flex-shrink: 0; background: rgba(0, 0, 0, 0.08); color: var(--text-dark); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; line-height: 1; font-weight: bold; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } :root[data-theme="dark"] .cart-qty-btn { background: rgba(255, 255, 255, 0.12); } .cart-qty-btn:hover:not(:disabled) { background: var(--accent-2); color: #fff; transform: scale(1.1); } .cart-qty-btn:disabled { opacity: 0.35; cursor: default; } .cart-item-qty { font-weight: bold; font-size: 0.85rem; min-width: 14px; text-align: center; } .cart-item-unit { font-size: 0.76rem; color: var(--text-muted); } .cart-item-total { font-weight: bold; font-size: 0.95rem; color: var(--text-dark); margin-left: auto; white-space: nowrap; } .cart-item-remove { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: rgba(0, 0, 0, 0.06); color: var(--text-muted); border: none; transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .cart-item-remove svg { width: 16px; height: 16px; } .cart-item-remove:hover { background: var(--accent-red); color: #fff; transform: scale(1.08); } .cart-item-remove:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 2px; } .receipt-tear { height: 16px; margin: 0 -24px; flex-shrink: 0; background: linear-gradient(-45deg, transparent 8px, rgba(0, 0, 0, 0.18) 8px) 0 0/16px 16px repeat-x, linear-gradient(45deg, transparent 8px, rgba(0, 0, 0, 0.18) 8px) 0 0/16px 16px repeat-x; background-position: bottom; } .cart-footer { padding-top: 16px; } .cart-subtotal { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .cart-subtotal-label { font-size: 0.78rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .cart-subtotal-value { font-size: 1.25rem; font-weight: bold; color: var(--text-dark); background: var(--paper-accent); padding: 4px 12px; border-radius: 3px; transform: rotate(-2deg); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15); } .cart-shipping-note { font-size: 0.78rem; color: var(--text-muted); text-align: right; margin: -8px 0 16px; } .cart-empty { text-align: center; color: var(--text-muted); margin: 50px auto 0; max-width: 260px; } .cart-empty-icon { width: 52px; height: 52px; margin: 0 auto 14px; color: var(--text-muted); opacity: 0.5; transform: rotate(-6deg); } .cart-empty-title { color: var(--text-dark); font-weight: bold; font-size: 1.05rem; margin: 0 0 6px; } .cart-empty-text { margin: 0 0 20px; font-size: 0.9rem; line-height: 1.4; } .cart-empty-cta { margin: 0 auto; } @media (max-width: 480px) { .cart-drawer { padding: 22px 16px; } .receipt-tear { margin: 0 -16px; } } .toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(30px); background: var(--paper-accent); color: var(--text-dark); padding: 14px 22px; border-radius: 4px; box-shadow: var(--shadow-soft); font-weight: bold; z-index: 300; opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; text-align: center; max-width: 90vw; } .toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .skeleton-card { height: 320px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 25%, rgba(255, 255, 255, 0.85) 37%, rgba(255, 255, 255, 0.55) 63%); background-size: 400px 100%; animation: shimmer 1.4s infinite linear; } .skeleton-line { height: 14px; border-radius: 3px; margin: 0 auto 10px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 25%, rgba(255, 255, 255, 0.75) 37%, rgba(255, 255, 255, 0.4) 63%); background-size: 400px 100%; animation: shimmer 1.4s infinite linear; } .empty-state, .error-state { text-align: center; padding: 60px 30px; max-width: 500px; margin: 0 auto; color: #fff; } .empty-state h2, .error-state h2 { font-size: 1.6rem; } /* ---------- Video card component ---------- Shared base for every video card on the site (YouTube grid, Watchlist, Account's saved/history lists) -- kept here rather than in a page-specific file since three separate pages depend on it. Ported from zevkev.de's vods.css, trimmed to just the generic card shape (the Twitch-only parts of that file -- chat, player, VOD-archive rows -- have no equivalent here). */ .vod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; width: 100%; max-width: 1200px; } .vod-grid > .empty-state { grid-column: 1 / -1; } .vod-card { padding: 14px 14px 18px; display: flex; flex-direction: column; text-decoration: none; animation: fadeUp 0.5s ease both; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .vod-card:nth-child(3n + 2) { margin-top: 20px; } .vod-card:nth-child(3n + 3) { margin-top: -8px; } .vod-card:hover, .vod-card:focus-visible { transform: rotate(0deg) scale(1.02) translateY(-4px) !important; } .vod-card:hover::before, .vod-card:focus-visible::before { box-shadow: var(--shadow-hover); } .vod-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .vod-card h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.35; color: var(--text-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; } .vod-card:hover h3, .vod-card:focus-visible h3 { color: var(--accent-red); } .vod-card .vod-date { font-size: 0.8rem; color: var(--text-muted); margin-top: auto; } .vod-thumb { position: relative; margin-bottom: 12px; overflow: hidden; } .vod-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform 0.5s ease; } .vod-card:hover .vod-thumb img, .vod-card:focus-visible .vod-thumb img { transform: scale(1.08); } .watchlist-toggle { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .watchlist-toggle:hover { transform: scale(1.12); } .watchlist-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Fixed gold rather than var(--paper-accent): this button's own background stays a dark translucent circle in both themes, but --paper-accent turns into a dark slate in dark mode and would nearly disappear against it. */ .watchlist-toggle.is-saved { color: #ffd35e; } /* Same fixed-color reasoning as .watchlist-toggle just above. */ .vod-duration-badge { position: absolute; bottom: 8px; right: 8px; z-index: 2; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.3px; padding: 3px 7px; border-radius: 4px; pointer-events: none; } /* ---------- 404 page ---------- Reuses .empty-state as its base (same white-on-mat treatment already used for every other "nothing here" state site-wide), adding just the icon badge + big numeral. Icon badge matches the circular "hero icon" language already established on the watchlist page (.wl-hero-icon). */ .notfound-state { padding-top: 40px; } .notfound-icon { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; background: var(--paper); border: 4px solid #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; color: #ffd35e; transform: rotate(-6deg); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .notfound-icon svg { width: 38px; height: 38px; } .notfound-state:hover .notfound-icon { transform: rotate(6deg) scale(1.05); } .notfound-number { font-family: "Bebas Neue", "Futura", sans-serif; font-size: clamp(4rem, 16vw, 6.5rem); line-height: 1; letter-spacing: 2px; color: #fff; opacity: 0.9; margin: 0 0 2px; } .notfound-state h2 { margin-top: 0; } .site-footer { width: 100%; margin-top: 0; padding: 36px 24px 30px; text-align: center; background-color: var(--paper-accent); background-image: url("/assets/img/paper-grain.jpg"); background-size: 160px 160px; background-blend-mode: multiply; color: var(--text-dark); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25); } .footer-inner { max-width: 1100px; margin: 0 auto; } .footer-links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; } .footer-links a { color: var(--text-dark) !important; text-decoration: none; font-weight: bold; font-size: 0.85rem; opacity: 0.85; } .footer-links a:hover { opacity: 1; text-decoration: underline; } /* A real