/* Theme Name: Wehwan Template: twentyseventeen Version: 1.0.9 */ @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,700;1,400&family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap'); :root { /* --- Admin bar + topbar offsets ---------------------------- --wehwan-admin-h : set by CSS via .admin-bar + @media (no JS needed) --wehwan-topbar-h : set by JS (measured actual topbar height) */ --wehwan-admin-h: 0px; /* default: no admin bar (logged out) */ --wehwan-topbar-h: 28px; /* JS updates on load + resize */ /* --- Accent: guldfamilj --------------------------------- */ --color-accent: #c8a96e; --color-accent-hover: #e8c98e; --color-accent-muted: #8a7048; --color-accent-dim: #6a5535; /* --- Text: varm neutral skala --------------------------- */ --color-text-body: #d4c5a8; --color-text-secondary: #b89a78; --color-text-tertiary: #a89880; --color-text-subtle: #7a6b54; --color-text-faded: #5a4a30; /* --- Bakgrund: djupskala -------------------------------- */ --color-bg-base: #0e0b06; --color-bg-surface: #1a1208; --color-bg-raised: #2a1a0a; --color-bg-bio: #15100a; /* --- Kanter --------------------------------------------- */ --color-border: #3a2a18; --color-border-bio: #2a1f12; } /* WordPress sätter .admin-bar på och CSS-variabeln ärvs av alla barn. Dessa regler speglar exakt de px-värden WP:s admin-bar CSS använder, vilket innebär att --wehwan-admin-h alltid är korrekt utan JS-polling. */ .admin-bar { --wehwan-admin-h: 32px; } @media screen and (max-width: 782px) { .admin-bar { --wehwan-admin-h: 46px; } } /* Under 600px döljer WP admin-baren helt via display:none — offsetten ska vara 0 */ @media screen and (max-width: 600px) { .admin-bar { --wehwan-admin-h: 0px; } } /* * STYLE.CSS — TABLE OF CONTENTS * * 01. NAVIGATION ........................... line 70 * 02. PANELS ............................... line 242 * 03. CHARACTERS PANEL ..................... line 369 * 04. WATCH SECTION ........................ line 683 * 05. POPUP & TOPBAR ....................... line 914 * 06. CHARACTER BIO PAGE ................... line 1129 * 07. CHARACTER GALLERY .................... line 1493 * 08. LIGHTBOX ............................. line 1722 * 09. FADE BRIDGE .......................... line 1874 * 10. UTILITIES & MISC ..................... line 1900 * 11. EPISODES PANEL ....................... line 3740 */ /* ═══════════════════════════════════════════════════════════ * 01. NAVIGATION * ═══════════════════════════════════════════════════════════ */ .navigation-top { background: var(--color-bg-base) !important; border-bottom: none !important; border-top: none !important; } /* Suppress focus ring on hamburger for mouse users — parent theme sets outline:thin solid on :focus which inherits the gold currentColor. Color change on :focus-visible still provides keyboard feedback. */ .menu-toggle:focus { outline: none !important; box-shadow: none !important; background-color: transparent !important; } /* Aktivt menyval */ .navigation-top .wehwan-active > a, .navigation-top a.wehwan-active { border-bottom: 1px solid var(--color-accent); } .main-navigation ul { background: var(--color-bg-base) !important; } .main-navigation > div > ul { border-top: none !important; padding: 0 !important; } .main-navigation li { border-bottom: none !important; } .main-navigation a { font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent) !important; } .main-navigation a:hover { color: var(--color-accent-hover) !important; } /* ── NAV TEEPEE-IKON (home) ── */ .menu-item-home > a { display: inline-flex !important; align-items: center !important; border-bottom: none !important; } .wehwan-nav-teepee { display: block; overflow: visible; opacity: 0.85; transition: opacity 0.25s ease, filter 0.25s ease; } .menu-item-home > a:hover .wehwan-nav-teepee, .wehwan-active.menu-item-home > a .wehwan-nav-teepee { opacity: 1; filter: drop-shadow(0 0 4px rgba(200, 169, 110, 0.45)); } .navigation-top .wehwan-active.menu-item-home > a { border-bottom: none !important; } /* ── HAMBURGER OVERFLOW (Priority+) ── */ /* Used by JS to reliably hide items — [hidden] is overridden by .main-navigation li { display: inline-block } */ .wehwan-nav-hidden { display: none !important; } @media (min-width: 768px) { #top-menu { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; } } .wehwan-burger-item { margin-left: auto; flex-shrink: 0; position: relative; /* containing block for .wehwan-burger-dropdown */ list-style: none !important; border-bottom: none !important; } .wehwan-burger-btn { background: none !important; border: none !important; padding: 0 1em !important; cursor: pointer; color: var(--color-accent) !important; display: flex !important; align-items: center !important; line-height: 1 !important; } .wehwan-burger-btn:hover { color: var(--color-accent-hover) !important; } /* Dropdownens synlighet styrs av JS via .wehwan-is-open — inte [hidden] — för att vinna mot .js .main-navigation ul { display:none } */ .wehwan-burger-dropdown { display: none !important; position: absolute; left: 0 !important; /* override .main-navigation ul ul { left: -999em } and hover { left: 0.5em } */ top: 100%; background: var(--color-bg-surface); border: 1px solid var(--color-border); list-style: none !important; margin: 0 !important; padding: 0.4em 0 !important; min-width: 160px; z-index: 9999; } .wehwan-burger-dropdown.wehwan-is-open { display: block !important; } .wehwan-burger-dropdown li { border-bottom: none !important; } .wehwan-burger-dropdown li a { display: block !important; padding: 0.45em 1.4em !important; color: var(--color-accent) !important; border-bottom: none !important; } .wehwan-burger-dropdown li a:hover { color: var(--color-accent-hover) !important; } /* ── MOBILE NAV: overlay header + sticky ── */ @media (max-width: 47.9375em) { /* Front page with header image: nav overlays bottom of the 75vh header */ .has-header-image.twentyseventeen-front-page .navigation-top { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 3 !important; } /* Sticky on scroll — must be more specific than the absolute rule above so position: fixed wins when both selectors match on the front page. z-index here uses specificity 0-4-0 to beat the overlay rule's 0-3-0; both have !important so higher specificity wins. */ .has-header-image.twentyseventeen-front-page .site-navigation-fixed.navigation-top, .site-navigation-fixed.navigation-top { position: fixed !important; bottom: auto !important; z-index: 10000 !important; } /* Gold toggle button — centered. width:fit-content shrinks the block to content width so margin:auto works without relying on inherited text-align (which parent theme can break). */ .menu-toggle { color: var(--color-accent) !important; font-family: 'Libre Baskerville', serif !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; display: block !important; width: fit-content !important; margin: 0 auto !important; text-align: center !important; } .menu-toggle:hover, .menu-toggle:focus-visible { color: var(--color-accent-hover) !important; } .menu-toggle:focus { outline: none !important; } /* Center li so inline-flex children (teepee home link) align centrally, and center text inside block-level links via inheritance */ .main-navigation li { text-align: center !important; } .main-navigation a { text-align: center !important; } } /* ═══════════════════════════════════════════════════════════ * 02. PANELS * ═══════════════════════════════════════════════════════════ */ /* Twenty Seventeen only applies the full-height cinematic panel effect at min-width: 48em. These rules extend it to all viewport widths so the scroll-over-image effect is preserved on mobile too. */ .panel-image { height: 100vh; max-height: 1200px; } .background-fixed .panel-image { background-attachment: fixed; } @supports (-webkit-touch-callout: none) { /* iOS Safari: fixed backgrounds jitter/break — fall back to scroll */ .background-fixed .panel-image { background-attachment: scroll; } } .twentyseventeen-panel .panel-content { background-color: var(--color-bg-surface); } .twentyseventeen-panel .entry-title { font-family: 'Libre Baskerville', serif; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent) !important; } .panel-content .entry-content, .panel-content .entry-content p { font-family: 'Lora', serif; font-size: 16px; line-height: 1.8; color: var(--color-text-secondary); } .panel-content blockquote, .panel-content blockquote p { font-family: 'Lora', serif; font-style: italic; font-size: 20px; line-height: 1.6; color: var(--color-accent); } /* Video placeholder */ .wehwan-video-wrap { width: 300px; max-width: 100%; margin-top: 2rem; } .wehwan-video-placeholder { position: relative; width: 100%; height: 169px; background-color: #000; cursor: pointer; } .wehwan-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -65%); width: 40px; height: 40px; transition: opacity 0.3s ease; } .wehwan-video-placeholder:hover .wehwan-play-icon { opacity: 0.7; } .wehwan-video-label { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); font-family: 'Libre Baskerville', serif; font-size: 10px; letter-spacing: 0.2em; color: var(--color-accent); text-transform: uppercase; white-space: nowrap; } .wehwan-video-wrap video { pointer-events: none; } /* Footer */ .site-footer { background-color: var(--color-bg-base); border-top: none !important; } .site-footer .wrap { background-color: var(--color-bg-base) !important; display: flex !important; align-items: center !important; } .site-content-contain { background-color: var(--color-bg-base) !important; } .site-footer .site-info { flex: 1 !important; float: none !important; margin-top: auto !important; margin-bottom: auto !important; display: flex; justify-content: space-between; align-items: center; padding-top: 0 !important; font-family: 'Libre Baskerville', serif; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent-dim); } .site-info-privacy-link { color: var(--color-accent-muted) !important; text-decoration: none !important; } .site-info-privacy-link:hover { color: var(--color-accent) !important; text-decoration: none !important; box-shadow: none !important; } .site-footer .social-navigation, .site-footer .social-navigation ul, .site-footer .social-navigation li { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important; line-height: 1 !important; } .site-footer .social-navigation a { background: none !important; border: none !important; border-radius: 0 !important; width: auto !important; height: auto !important; padding: 0 !important; line-height: 1 !important; display: flex !important; align-items: center !important; margin-top: auto !important; margin-bottom: auto !important; } .site-footer .social-navigation a:hover { background: none !important; } .site-footer .social-navigation a:hover .icon, .site-footer .social-navigation a:hover::after { fill: var(--color-accent) !important; color: var(--color-accent) !important; transition: color 0.2s ease, fill 0.2s ease; } .site-footer .social-navigation a::after { content: 'CONTACT'; font-family: 'Libre Baskerville', serif; font-size: 10px; line-height: 1 !important; letter-spacing: 0.15em; color: var(--color-accent-dim); margin-left: 0.5em; } .site-footer .social-navigation .icon { fill: var(--color-accent-dim) !important; width: 10px !important; height: 10px !important; position: static !important; top: auto !important; display: block !important; } /* ── LEGAL / MAHTANTU PAGE ───────────────────────────────────────────────── Renderas via page-legal.php (F.3). Käll-regler: .wehwan-character-page, .wc-section-label, .wc-section-hint, .wc-section p, .wc-divider. ─────────────────────────────────────────────────────────────────────────── */ /* Layout: en kolumn, dölj sidebar — matchar bio-sidorna */ body.mahtantu-page .content-area { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; float: none !important; } body.mahtantu-page #content { padding: 0 !important; } body.mahtantu-page .wrap { max-width: 100% !important; padding: 0 !important; } body.mahtantu-page #secondary { display: none !important; } /* Base — matchar .wehwan-character-page */ .mahtantu-page { background: var(--color-bg-bio); } /* Fallback entry-header (om page-legal.php saknas faller parent page.php in) */ body.mahtantu-page .entry-header { text-align: center; padding: 80px 24px 60px; background: radial-gradient(ellipse at center top, rgba(200, 169, 110, 0.08) 0%, transparent 60%), var(--color-bg-bio); border-bottom: 1px solid var(--color-border-bio); } body.mahtantu-page .entry-title { font-family: 'Libre Baskerville', serif !important; font-size: 42px !important; font-weight: 400 !important; letter-spacing: 0.4em !important; color: var(--color-accent) !important; text-transform: uppercase !important; margin: 0 !important; } /* ── Hero (page-legal.php) ─────────────────────────────────────────── */ .legal-hero { text-align: center; padding: 100px 24px 80px; background: radial-gradient(ellipse at center top, rgba(200, 169, 110, 0.08) 0%, transparent 60%), var(--color-bg-bio); border-bottom: 1px solid var(--color-border-bio); } .legal-title { font-family: 'Libre Baskerville', serif; font-size: 42px; font-weight: 400; letter-spacing: 0.4em; color: var(--color-accent); text-transform: uppercase; margin: 0 0 20px; } .legal-subtitle { font-family: 'Libre Baskerville', serif; font-size: 14px; letter-spacing: 0.3em; color: var(--color-accent-muted); text-transform: uppercase; margin-bottom: 14px; } .legal-date { font-family: 'Libre Baskerville', serif; font-size: 11px; letter-spacing: 0.2em; color: var(--color-text-subtle); text-transform: uppercase; } /* ◆ divider between hero and first section */ .legal-hero-divider { text-align: center; color: var(--color-accent-muted); font-size: 10px; letter-spacing: 0.5em; text-indent: 0.5em; padding: 32px 0 0; background: var(--color-bg-bio); } /* ── Content ────────────────────────────────────────────────────────── */ .mahtantu-page .entry-content { font-family: 'Lora', Georgia, serif; font-size: 17px; line-height: 1.75; color: var(--color-text-body); max-width: 720px; margin: 0 auto; padding: 40px 24px 80px; float: none !important; width: auto !important; } /* Brödtext — matchar .wc-section p */ .mahtantu-page .entry-content p, .mahtantu-page .entry-content li { color: var(--color-text-body) !important; margin-bottom: 1.5em; } /* Draft notice — utkastsvarning */ .mahtantu-page .entry-content p.legal-draft-notice { border-left: 3px solid var(--color-accent-muted); background: rgba(138, 112, 72, 0.06); padding: 16px 20px; font-style: italic; font-size: 15px; color: var(--color-text-secondary) !important; margin-bottom: 40px; line-height: 1.7; } .mahtantu-page .entry-content p.legal-draft-notice strong { font-style: normal; font-family: 'Libre Baskerville', serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; color: var(--color-accent-muted); } /* H2 — matchar .wc-section-label med ◆ prefix */ .mahtantu-page .entry-content h2 { font-family: 'Libre Baskerville', serif; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-accent) !important; font-weight: 400; margin-top: 48px; margin-bottom: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border-bio); display: flex; align-items: center; gap: 14px; } .mahtantu-page .entry-content h2::before { content: '◆'; font-size: 8px; color: var(--color-accent-muted); background: none; width: auto; height: auto; flex-shrink: 0; line-height: 1; letter-spacing: normal; } /* H3 — matchar .wc-section-hint */ .mahtantu-page .entry-content h3 { font-family: 'Lora', serif; font-style: italic; font-size: 14px; font-weight: 400; color: var(--color-text-subtle) !important; letter-spacing: normal; text-transform: none; margin-bottom: 28px; padding-left: 22px; } /* Länkar — accent med underline */ .mahtantu-page .entry-content a { color: var(--color-accent) !important; text-decoration: underline; } .mahtantu-page .entry-content a:hover { color: var(--color-accent-hover) !important; } /* Tabell — bibehålls, ingen direkt bio-ekvivalent */ .mahtantu-page .entry-content table { width: 100%; border-collapse: collapse; } .mahtantu-page .entry-content table th, .mahtantu-page .entry-content table td { border: 1px solid var(--color-border-bio); padding: 0.5rem 0.75rem; color: var(--color-text-body); font-size: 15px; } .mahtantu-page .entry-content table th { color: var(--color-accent); font-family: 'Libre Baskerville', serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; } /* HR → ◆ sektionsdelare */ .mahtantu-page .entry-content hr { border: none !important; border-bottom: none !important; height: 0; background: none !important; width: auto; margin: 48px auto; text-align: center; overflow: visible; opacity: 1 !important; } .mahtantu-page .entry-content hr::before { content: '◆'; display: block; color: var(--color-accent-muted); font-size: 10px; letter-spacing: 0.5em; text-indent: 0.5em; } @media screen and (max-width: 600px) { .legal-hero { padding: 72px 24px 56px; } .legal-title { font-size: 32px; letter-spacing: 0.25em; } } /* ═══════════════════════════════════════════════════════════ * 03. HOME HERO * ═══════════════════════════════════════════════════════════ */ /* Two background layers — both fixed to viewport so they wipe together. Layer 1 (top): title PNG, centered, 90vw wide, transparent surround. Layer 2 (bottom): leather texture, cover-sized. background-image URL for layer 1 is injected via inline style in header-image.php. */ .wehwan-home-hero { background-size: 90vw auto, cover; background-position: center center, center center; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; position: relative !important; height: 100vh !important; max-height: 1200px !important; } @supports (-webkit-touch-callout: none) { /* iOS Safari: fixed backgrounds jitter — same fallback as .background-fixed panels */ .wehwan-home-hero { background-attachment: scroll, scroll; } } /* Parent sets .custom-header { display:table; height:75vh } at mobile. The nav is position:absolute; bottom:0 inside #masthead whose height equals .custom-header, so the container must also be 100vh for nav to reach viewport bottom. */ .has-header-image.twentyseventeen-front-page .custom-header { display: block; height: 100vh !important; max-height: 1200px !important; } /* Admin-bar compensation (32px ≥601px, 46px <601px) — admin-bar sits above the viewport, reducing visible height. Matches parent theme's own calc rule. */ .admin-bar .wehwan-home-hero, .admin-bar.has-header-image.twentyseventeen-front-page .custom-header { height: calc(100vh - 32px) !important; } @media screen and (max-width: 600px) { .admin-bar .wehwan-home-hero, .admin-bar.has-header-image.twentyseventeen-front-page .custom-header { height: calc(100vh - 46px) !important; } } /* ═══════════════════════════════════════════════════════════ * 04. CHARACTERS PANEL * ═══════════════════════════════════════════════════════════ */ /* Scroll-target: topbar + nav ≈ topbar-h + 54px */ #wehwan-characters { scroll-margin-top: calc(var(--wehwan-admin-h, 0px) + var(--wehwan-topbar-h, 28px) + 54px); } /* Minimal wrap-padding så rubriken syns nära sektionstoppen */ .wehwan-characters-panel .panel-content .wrap { padding-top: 0.5rem !important; } .wehwan-characters-gallery { width: 100%; min-height: 320px; background-size: cover; background-position: center; background-attachment: fixed; } .wehwan-chars-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; } .wehwan-char-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } /* Ovaler */ .wehwan-oval { position: relative; overflow: hidden; border: 2.5px solid rgba(200, 169, 110, 0.5); background: radial-gradient(ellipse at 50% 30%, var(--color-bg-raised), #0a0704); box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 0 25px rgba(0,0,0,0.4); cursor: pointer; transition: border-color 0.3s; } .wehwan-oval:hover { border: 2.5px solid var(--color-accent); } .wehwan-oval-lg { width: 110px; height: 140px; border-radius: 55px / 70px; } .wehwan-oval-sm { width: 80px; height: 100px; border-radius: 40px / 50px; } .wehwan-oval-still, .wehwan-oval-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; } .wehwan-oval-video { opacity: 0; } .wehwan-oval:hover .wehwan-oval-video { opacity: 1; } .wehwan-oval:hover .wehwan-oval-still { opacity: 0; } .wehwan-oval-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 35%; height: 35%; opacity: 0.15; } /* Namn */ .wehwan-char-name { font-family: 'Libre Baskerville', serif; font-size: 9px; letter-spacing: 0.15em; color: var(--color-accent); text-transform: uppercase; text-align: center; } .wehwan-char-name-sm { font-size: 8px; } /* Ikoner */ .wehwan-char-icons { display: flex; gap: 0.5rem; } .wehwan-char-icon { width: 28px; height: 28px; border-radius: 50%; border: 0.5px solid var(--color-border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.3s; } .wehwan-char-icon svg { width: 13px; height: 13px; } .wehwan-icon-stats { color: var(--color-accent); border-color: var(--color-accent); } .wehwan-icon-bio { color: var(--color-accent-dim); border-color: var(--color-border); } .wehwan-char-icon:hover { border-color: var(--color-accent); color: var(--color-accent); } /* Characters gallery — full skärmhöjd som övriga paneler */ .wehwan-characters-gallery { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } /* Mer luft mellan huvudkaraktärerna */ .wehwan-chars-main .wehwan-chars-row, .wehwan-chars-row:not(.wehwan-chars-historical) { gap: 3rem; } /* Avgränsare */ .wehwan-chars-divider { width: 60%; height: 0.5px; background: rgba(200, 169, 110, 0.2); margin: 1.5rem auto; } /* Ta bort placeholder-ikon */ .wehwan-oval-placeholder { display: none; } /* Kopieringsskydd */ .wehwan-characters-gallery { user-select: none; -webkit-user-select: none; } .wehwan-oval-still, .wehwan-oval-video { pointer-events: none; -webkit-user-drag: none; } /* Watermark */ .wehwan-watermark { position: absolute; top: 50% !important; bottom: auto !important; left: 0 !important; right: 0 !important; transform: translateY(-50%) !important; font-family: 'Libre Baskerville', serif; font-size: 8px !important; letter-spacing: 0.2em !important; color: rgba(200, 169, 110, 1) !important; text-transform: uppercase; text-align: center; white-space: nowrap !important; pointer-events: none; transition: opacity 0.3s ease !important; opacity: 1; text-shadow: none !important; padding: 5px 8px 4px !important; overflow: hidden !important; text-overflow: ellipsis !important; background: rgba(20, 10, 4, 0.82) !important; width: 100% !important; } .wehwan-oval:hover .wehwan-watermark { opacity: 0 !important; } /* Stats overlay */ .wehwan-stats-overlay { display: none; position: fixed; inset: 0; z-index: 1000; pointer-events: none; } .wehwan-stats-overlay.active { display: block; pointer-events: all; } .wehwan-stats-card { position: absolute; background: var(--color-bg-base); border: 0.5px solid var(--color-border); padding: 1.25rem 1.5rem; width: 220px; pointer-events: all; } .wehwan-stats-name { font-family: 'Libre Baskerville', serif; font-size: 11px; letter-spacing: 0.2em; color: var(--color-accent); text-transform: uppercase; margin: 0 0 0.25rem; } .wehwan-stats-role { font-family: 'Lora', serif; font-size: 11px; font-style: italic; color: var(--color-accent-dim); margin: 0 0 0.75rem; } .wehwan-stats-divider { height: 0.5px; background: var(--color-border); margin-bottom: 0.75rem; } .wehwan-stats-bio { font-family: 'Lora', serif; font-size: 11px; line-height: 1.6; color: var(--color-text-secondary); margin: 0; } /* Ta bort namn under oval */ .wehwan-char-name, .wehwan-char-name-sm { display: none; } /* Större ovaler +20% */ .wehwan-oval-lg { width: 132px !important; height: 168px !important; border-radius: 66px / 84px !important; } .wehwan-oval-sm { width: 96px !important; height: 120px !important; border-radius: 48px / 60px !important; } /* ── OVAL NAME ── */ .wehwan-oval-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;transition:opacity 0.3s} .wehwan-oval:hover .wehwan-oval-name{opacity:0} .wehwan-oval-name span{background:rgba(15,8,2,0.82);padding:4px 12px;width:100%;text-align:center;font-family:'Libre Baskerville',serif;font-size:7px;letter-spacing:0.2em;color:rgba(200,169,110,0.95);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ── I-PRICK ── */ .wehwan-info-trigger{width:30px;height:30px;border-radius:50%;background:var(--color-bg-base);border:0.5px solid var(--color-accent);margin-top:-15px;position:relative;z-index:3;cursor:pointer;transition:background 0.2s,border-color 0.2s;background-image:none !important;background-size:19px;background-repeat:no-repeat;background-position:center;font-family:'Libre Baskerville',serif;font-style:normal !important;font-size:11px;color:var(--color-accent);display:flex;align-items:center;justify-content:center;line-height:1;font-weight:700 !important} .wehwan-info-trigger:hover{border-color:var(--color-accent-hover);background-color:var(--color-bg-surface)} .wehwan-info-trigger::before { content: 'i'; } .wehwan-guest .wehwan-info-trigger { border-color: #6a5535; color: #6a5535; } /* Öppet lås — ta bort stroke-dasharray */ .wehwan-lock-open path { stroke-dasharray: none !important; stroke: var(--color-accent) !important; } /* ── WATCH CELL HEADER ── */ .wehwan-watch-cell-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .wehwan-watch-cell-label { font-family: 'Libre Baskerville', serif; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); } .wehwan-watch-cell-count { font-size: 9px; letter-spacing: 0.1em; color: var(--color-accent-dim); } .wehwan-watch-cell-count.is-hidden { display: none; } /* ── WATCH CAROUSEL SLIDES ── */ .wehwan-watch-slide { position: absolute; inset: 0; display: none; } .wehwan-watch-slide.is-active { display: block; } .wehwan-watch-slide .wehwan-watch-still-img, .wehwan-watch-slide .wehwan-watch-motion-video { position: absolute; inset: 0; width: 100%; height: 100%; } /* ── WATCH LOCKS ── */ .wehwan-watch-lock { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; } .wehwan-watch-lock > svg { width: 14px; height: 14px; flex-shrink: 0; } /* Prev/next arrows in lock row */ .wehwan-watch-prev, .wehwan-watch-next { background: none !important; border: none !important; box-shadow: none !important; padding: 2px 4px !important; color: var(--color-accent-muted) !important; cursor: pointer; display: flex; align-items: center; line-height: 1; } .wehwan-watch-prev:hover, .wehwan-watch-next:hover { color: var(--color-accent) !important; } .wehwan-watch-prev:focus, .wehwan-watch-next:focus { outline: none !important; background: none !important; } /* Slide-level play state */ .wehwan-watch-slide.is-playing .wehwan-watch-play-btn { opacity: 0; pointer-events: none; } /* Watch box overlays — READ / COMING SOON / ACCESS DENIED */ .wehwan-watch-read, .wehwan-coming-soon { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); font-family: 'Libre Baskerville', serif; font-size: 9px; letter-spacing: 0.3em; color: var(--color-accent); text-transform: uppercase; white-space: nowrap; pointer-events: none; z-index: 1; } .wehwan-coming-soon { opacity: 1; transition: opacity 0.6s ease; } /* ═══════════════════════════════════════════════════════════ * 04. WATCH SECTION * ═══════════════════════════════════════════════════════════ */ .wehwan-watch-section { width: 100%; margin-top: 3rem; padding-top: 2rem; border-top: 0.5px solid var(--color-border); } .wehwan-watch-header { text-align: center; margin-bottom: 1.5rem; } .wehwan-watch-label { font-family: 'Libre Baskerville', serif; font-size: 10px; letter-spacing: 0.4em; color: var(--color-accent-dim); text-transform: uppercase; } .wehwan-watch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .wehwan-watch-item { display: flex; flex-direction: column; } .wehwan-watch-box { position: relative; padding-top: 56.25%; background: var(--color-bg-base); border: 0.5px solid var(--color-border); cursor: pointer; overflow: hidden; transition: border-color 0.3s ease; } .wehwan-watch-box:hover { border-color: var(--color-accent); } .wehwan-watch-still-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; } .wehwan-watch-script-canvas { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; } .wehwan-watch-motion-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; } .wehwan-watch-play-btn { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 48px !important; height: 48px !important; box-sizing: border-box !important; padding: 0 !important; background: rgba(14, 11, 6, 0.7) !important; border: 1px solid var(--color-accent) !important; border-radius: 50% !important; box-shadow: none !important; cursor: pointer; transition: opacity 0.3s ease; z-index: 2; } .wehwan-watch-play-btn::after { content: ''; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%); border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--color-accent); } .wehwan-watch-box.is-playing .wehwan-watch-play-btn { opacity: 0; pointer-events: none; } /* Watch expand button */ .wehwan-watch-expand { position: absolute !important; top: 5px !important; right: 5px !important; width: 22px !important; height: 22px !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; color: var(--color-accent-muted) !important; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; transition: color 0.2s; outline: none; } .wehwan-watch-expand:hover, .wehwan-watch-expand:focus { color: var(--color-accent) !important; background: none !important; outline: none; } .wehwan-watch-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; color: var(--color-border); transition: color 0.3s ease, opacity 0.3s ease; z-index: 1; } .wehwan-watch-item.is-accessible .wehwan-watch-icon { color: var(--color-accent); } .wehwan-watch-item[data-watch-type="still"] .wehwan-watch-icon, .wehwan-watch-item[data-watch-type="motion"] .wehwan-watch-icon { z-index: 3; } .wehwan-watch-item[data-watch-type="still"].is-icon-hidden .wehwan-watch-icon, .wehwan-watch-item[data-watch-type="motion"].is-icon-hidden .wehwan-watch-icon { opacity: 0; pointer-events: none; } .wehwan-watch-item[data-watch-type="motion"] .wehwan-watch-play-btn { display: none; } /* Script document thumbnail */ .wehwan-watch-script-thumb { display: none; position: absolute; inset: 0; background: linear-gradient(to bottom, #2a2118, #1a1410); border: 1px solid #4a3a2a; padding: 18px 16px; box-sizing: border-box; overflow: hidden; z-index: 0; } .wehwan-watch-item.is-accessible .wehwan-watch-script-thumb.is-active { display: block; } .wehwan-watch-script-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7) 100%); pointer-events: none; } .wehwan-script-thumb-title { font-family: 'Courier New', Courier, monospace !important; font-size: 10px !important; letter-spacing: 0.12em; font-weight: bold !important; color: rgba(201, 167, 107, 0.85) !important; margin-bottom: 8px !important; line-height: 1.3; } .wehwan-script-thumb-body { font-family: 'Courier New', Courier, monospace !important; font-size: 7px !important; line-height: 1.5 !important; color: rgba(201, 167, 107, 0.5) !important; } .wehwan-watch-type { position: absolute; bottom: 0.6rem; left: 50%; transform: translateX(-50%); font-family: 'Libre Baskerville', serif; font-size: 8px; letter-spacing: 0.15em; color: var(--color-accent); text-transform: uppercase; white-space: nowrap; } .wehwan-watch-access { font-family: 'Libre Baskerville', serif; font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; margin: 0.5rem 0 0; } .wehwan-access-public { color: #4a3828; } .wehwan-access-fan { color: var(--color-accent); } .wehwan-access-industry { color: var(--color-text-secondary); } /* Watch-sektion bryter ur two-column grid */ .wehwan-watch-section { grid-column: 1 / -1 !important; width: 100% !important; } .wehwan-watch-grid { max-width: 600px; margin: 0 auto; } /* Clearfix - watch-sektionen ska sitta under floatade kolumner */ .wehwan-watch-section { clear: both !important; } /* Access-nivåer — hierarki och lyser upp */ .wehwan-access-public { color: var(--color-accent-hover); font-weight: 700; } .wehwan-access-fan { color: var(--color-accent); } .wehwan-access-industry { color: var(--color-accent-dim); } .wehwan-coming-soon-fade { opacity: 0; } /* ═══════════════════════════════════════════════════════════ * 05. POPUP & TOPBAR * ═══════════════════════════════════════════════════════════ */ /* ── POPUP ── */ .wehwan-char-popup{position:fixed;width:240px;background:var(--color-bg-base);border:0.5px solid var(--color-border);padding:1.2rem 1.4rem;display:none;z-index:1000} .wehwan-char-popup.visible{display:block} .wehwan-popup-arrow{position:absolute;top:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:var(--color-bg-base);border-left:0.5px solid var(--color-border);border-top:0.5px solid var(--color-border)} .wehwan-popup-name{font-family:'Libre Baskerville',serif;font-size:13px;letter-spacing:0.15em;color:var(--color-accent);text-transform:uppercase;margin-bottom:4px} .wehwan-popup-role{font-family:'Lora',serif;font-size:12px;font-style:italic;color:var(--color-accent-dim);margin-bottom:10px} .wehwan-popup-divider{height:0.5px;background:var(--color-bg-surface);margin-bottom:10px} .wehwan-popup-text{font-family:'Lora',serif;font-size:13px;line-height:1.6;color:var(--color-text-secondary);margin-bottom:12px} .wehwan-popup-footer{display:flex;justify-content:flex-end} .wehwan-popup-bio-btn{display:inline-flex;align-items:center;gap:5px;border:0.5px solid var(--color-bg-raised);border-radius:20px;padding:4px 12px;cursor:pointer;color:var(--color-bg-raised)} .wehwan-popup-bio-btn svg{width:12px;height:12px} .wehwan-popup-bio-btn span{font-family:'Libre Baskerville',serif;font-size:9px;letter-spacing:0.15em;text-transform:uppercase} .wehwan-popup-signin-title{font-family:'Libre Baskerville',serif;font-size:12px;letter-spacing:0.15em;color:var(--color-accent);text-transform:uppercase;text-align:center;margin-bottom:5px} .wehwan-popup-signin-sub{font-family:'Lora',serif;font-size:13px;font-style:italic;line-height:1.5;color:var(--color-accent-dim);text-align:center;margin-bottom:12px} .wehwan-popup-signin-btns{display:flex;flex-direction:column;gap:8px} .wehwan-popup-signin-btn{padding:7px;text-align:center;cursor:pointer;font-family:'Libre Baskerville',serif;font-size:10px;letter-spacing:0.15em;text-transform:uppercase} .wehwan-popup-signin-primary{background:var(--color-bg-surface);border:0.5px solid var(--color-accent);color:var(--color-accent)} .wehwan-popup-emoji{filter:sepia(1) saturate(4) brightness(1.1)} .wehwan-char-popup.wehwan-popup--watch{display:flex;flex-direction:column;min-height:172px} .wehwan-popup-watch-footer{margin-top:auto} .wehwan-popup-watch-cta{font-style:normal} /* Bio-länken ska se ut som befintlig bio-knapp */ .wehwan-popup-bio-link { text-decoration: none !important; cursor: pointer; } .wehwan-popup-bio-link:hover { text-decoration: none !important; } /* ── NAV ACCESS INDICATOR ── */ .wehwan-nav-access{display:flex;align-items:center;gap:0.4rem;cursor:pointer;padding:4px 10px;border:0.5px solid transparent;border-radius:2px;transition:border-color 0.3s;margin-left:auto} .wehwan-nav-access:hover{border-color:var(--color-border)} .wehwan-nav-dot{width:5px;height:5px;border-radius:50%;background:var(--color-bg-raised)} .wehwan-nav-label{font-family:'Libre Baskerville',serif;font-size:7px;letter-spacing:0.15em;text-transform:uppercase;color:var(--color-bg-raised)} /* Access indicator — absolut positionerad i navbaren */ .wehwan-nav-access { position: absolute !important; right: 0; top: 50%; transform: translateY(-50%); } .navigation-top .wrap { position: relative; } /* Access indicator — fix position */ #wehwanAccessIndicator { position: absolute !important; right: 1.5rem !important; top: 50% !important; transform: translateY(-50%) !important; margin-left: 0 !important; } /* Separator mellan meny och access-indikator */ #wehwanAccessIndicator::before { content: ''; display: inline-block; width: 0.5px; height: 14px; background: var(--color-border); margin-right: 1rem; vertical-align: middle; } /* Access indicator — vänster om länkarna, med ram */ #wehwanAccessIndicator { position: static !important; transform: none !important; order: -1; border: 0.5px solid var(--color-border) !important; padding: 4px 12px !important; margin-right: 3rem !important; border-radius: 2px; } #wehwanAccessIndicator::before { display: none; } /* flex layout for the desktop nav — at mobile the wrap is a plain block so margin:auto centering on .menu-toggle works without interference */ @media (min-width: 48em) { .navigation-top .wrap { display: flex !important; align-items: center !important; } } /* ── TOPBAR ── */ .wehwan-topbar { position: fixed; top: var(--wehwan-admin-h, 0px); /* CSS-controlled via .admin-bar + @media rules above */ left: 0; right: 0; z-index: 100; background: var(--color-bg-base); padding: 5px 1.5rem; display: flex; align-items: center; justify-content: space-between; } /* Vänsterzon: pil eller back-länk */ .wehwan-topbar > .menu-scroll-down, .wehwan-topbar > .wehwan-topbar-back, .wehwan-topbar > .wehwan-topbar-spacer { flex: 0 0 auto; } /* Twenty Seventeens pil får inte position/transform-spöken */ .wehwan-topbar .menu-scroll-down { position: static; transform: none; margin: 0; padding: 6px 14px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .wehwan-topbar-nav-label { font-family: 'Libre Baskerville', serif; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; } .wehwan-topbar .menu-scroll-down .icon { transform: rotate(90deg); width: 18px; height: 18px; display: block; fill: var(--color-accent) !important; } .wehwan-topbar .menu-scroll-down .icon path, .wehwan-topbar .menu-scroll-down .icon polygon, .wehwan-topbar .menu-scroll-down svg path, .wehwan-topbar .menu-scroll-down svg polygon { fill: var(--color-accent) !important; } /* Centerzon: access-indikator — fast bredd så pilen alltid hamnar på samma ställe */ .wehwan-topbar #wehwanAccessIndicator { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; right: auto !important; top: auto !important; min-width: 7.5rem; justify-content: center; } /* Pilen absolut-positionerad så att dot+label kan centreras fritt */ .wehwan-topbar .wehwan-nav-cycle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-left: 0; } /* Höger spacer som balanserar layouten visuellt */ .wehwan-topbar-spacer { width: 50px; height: 1px; } /* Flytta scroll-ned-pilen till topbaren */ .navigation-top .nav-previous { display: none; } /* Nav — skjuts ned under topbaren när den blir fixed. Använder CSS-variablerna direkt: admin-h (CSS-styrd) + topbar-h (JS-mätt). z-index 10000 sätter fixed nav ovanför allt page content (.wehwan-char-popup är 1000, parent-temats fixed nav är 1000 vid desktop). */ .site-navigation-fixed.navigation-top { top: calc(var(--wehwan-admin-h, 0px) + var(--wehwan-topbar-h, 28px)) !important; z-index: 10000 !important; } /* Access indicator */ .wehwan-nav-label { color: var(--color-accent) !important; font-size: 10px !important; } .wehwan-nav-dot { width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; font-size: 13px; line-height: 1; filter: sepia(1) saturate(4) brightness(1.1); } #wehwanAccessIndicator, #wehwanAccessIndicator:hover { border: none !important; padding: 0 !important; } /* Admin preview-cykel-pil */ .wehwan-nav-cycle { display: inline-flex; align-items: center; margin-left: 5px; color: var(--color-accent) !important; cursor: pointer; padding: 2px 3px; transition: color 0.2s; vertical-align: middle; } .wehwan-nav-cycle:hover { color: var(--color-accent-hover) !important; } /* WP admin bar kompensation hanteras via CSS-variabler — se :root + .admin-bar-regler längst upp i filen. Inga hårdkodade px-värden behövs här. */ /* ═══════════════════════════════════════════════════════════ * 06. CHARACTER BIO PAGE * ═══════════════════════════════════════════════════════════ */ .wehwan-character-page { background: var(--color-bg-bio); color: var(--color-text-body); font-family: 'Lora', Georgia, serif; font-size: 17px; line-height: 1.75; } .wc-hero { padding: 100px 24px 80px; text-align: center; background: radial-gradient(ellipse at center top, rgba(200, 169, 110, 0.08) 0%, transparent 60%), var(--color-bg-bio); border-bottom: 1px solid var(--color-border-bio); } .wc-portrait-wrap { margin: 0 auto 48px; width: 280px; height: 360px; position: relative; } .wc-portrait-oval { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 1px solid var(--color-accent-muted); box-shadow: 0 0 60px rgba(200, 169, 110, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.4); background: linear-gradient(180deg, #2a1f15 0%, var(--color-bg-base) 100%); display: flex; align-items: center; justify-content: center; } .wc-portrait-oval .wc-portrait-still, .wc-portrait-oval .wc-portrait-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; pointer-events: none; user-select: none; -webkit-user-drag: none; } .wc-portrait-oval .wc-portrait-video { opacity: 0; } .wc-portrait-oval:hover .wc-portrait-video { opacity: 1; } .wc-portrait-oval { position: relative; cursor: pointer; } .wc-name { font-family: 'Libre Baskerville', serif; font-size: 42px; font-weight: 400; letter-spacing: 0.4em; color: var(--color-accent); margin: 0 0 12px; } .wc-name-sub { font-family: 'Libre Baskerville', serif; font-size: 22px; letter-spacing: 0.5em; color: var(--color-accent-muted); margin-bottom: 36px; } .wc-meta { color: var(--color-text-tertiary); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 56px; font-family: 'Libre Baskerville', serif; } .wc-meta .wc-sep { color: var(--color-accent-muted); margin: 0 12px; } .wc-divider { width: 80px; height: 1px; background: var(--color-accent-muted); margin: 0 auto 56px; } .wc-quote { max-width: 640px; margin: 0 auto; font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 22px; line-height: 1.6; color: var(--color-text-body); } .wc-quote-mark { display: block; font-family: 'Libre Baskerville', serif; font-size: 64px; color: var(--color-accent-muted); line-height: 0.5; margin-bottom: 24px; font-style: normal; } .wc-quote-attr { display: block; margin-top: 28px; font-style: normal; font-size: 12px; letter-spacing: 0.2em; color: var(--color-text-subtle); text-transform: uppercase; } .wc-content { max-width: 720px; margin: 0 auto; padding: 100px 24px 80px; } .wc-section { margin-bottom: 80px; } .wc-section:last-child { margin-bottom: 0; } .wc-section-label { font-family: 'Libre Baskerville', serif; font-size: 12px; letter-spacing: 0.3em; color: var(--color-accent); text-transform: uppercase; margin-bottom: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border-bio); display: flex; align-items: center; gap: 16px; } .wc-section-label::before { content: ''; width: 24px; height: 1px; background: var(--color-accent-muted); } .wc-section-hint { font-family: 'Lora', serif; font-style: italic; font-size: 14px; color: var(--color-text-subtle); margin-bottom: 28px; padding-left: 40px; } .wc-section p { margin-bottom: 1.5em; color: var(--color-text-body); } .wc-section p:last-child { margin-bottom: 0; } .wc-section-intro { font-family: 'Libre Baskerville', serif; font-size: 19px; line-height: 1.6; color: var(--color-accent-hover) !important; margin-bottom: 32px !important; font-weight: 400; } .wc-relations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .wc-relation-card { border: 1px solid var(--color-border-bio); padding: 20px; background: rgba(26, 18, 8, 0.3); transition: border-color 0.3s, background 0.3s; } .wc-relation-card:hover { border-color: var(--color-accent-muted); background: rgba(26, 18, 8, 0.6); } .wc-rel-name { font-family: 'Libre Baskerville', serif; font-size: 13px; letter-spacing: 0.2em; color: var(--color-accent); text-transform: uppercase; margin-bottom: 8px; } .wc-rel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .wc-rel-header .wc-rel-name { margin-bottom: 0; flex: 1; } .wc-rel-bio-link { color: var(--color-accent-muted) !important; display: inline-flex; align-items: center; justify-content: center; padding: 4px; text-decoration: none !important; transition: color 0.2s; flex-shrink: 0; } .wc-rel-bio-link:hover { color: var(--color-accent) !important; } .wc-rel-bio-link svg { display: block; } .wc-rel-tag { font-size: 11px; letter-spacing: 0.15em; color: var(--color-text-subtle); text-transform: uppercase; margin-bottom: 12px; } .wc-rel-desc { font-size: 14px; line-height: 1.6; color: var(--color-text-body); font-style: italic; } .wc-specs { display: grid; grid-template-columns: 140px 1fr; gap: 16px 32px; font-size: 15px; } .wc-specs dt { font-family: 'Libre Baskerville', serif; font-size: 11px; letter-spacing: 0.2em; color: var(--color-accent-muted); text-transform: uppercase; padding-top: 4px; } .wc-specs dd { color: var(--color-text-body); line-height: 1.7; margin: 0; } .wc-back-section { text-align: center; padding: 60px 24px 100px; border-top: 1px solid var(--color-border-bio); } .wc-back-link { color: var(--color-accent-muted) !important; font-family: 'Libre Baskerville', serif; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; text-decoration: none !important; transition: color 0.2s; } .wc-back-link:hover { color: var(--color-accent) !important; } .wc-back-link::before { content: '←'; margin-right: 12px; font-size: 16px; } /* Override Twenty Seventeens text-transform på h1 */ .wehwan-character-page .wc-name { text-transform: uppercase !important; color: var(--color-accent) !important; } .wehwan-character-page .wc-name-sub { text-transform: uppercase !important; } /* Mindre padding i hero, ta hänsyn till topbar + navbar ovanför */ .wehwan-character-page .wc-hero { padding: 60px 24px 60px; } /* Fixa Twenty Seventeens default-bakgrund som lyser igenom */ body.single-wehwan_character, body.single-wehwan_character #page, body.single-wehwan_character .site-content-contain, body.single-wehwan_character #content, body.single-wehwan_character #primary, body.single-wehwan_character #main { background: var(--color-bg-bio) !important; } /* Ta bort eventuella margin/padding på content-area som krockar */ body.single-wehwan_character .content-area { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; } /* Ta bort default Twenty Seventeen-padding på #content */ body.single-wehwan_character #content { padding: 0 !important; } /* Dölj huvudmeny på Legal-sidan */ body.mahtantu-page .navigation-top { display: none !important; } /* Dölj huvudmeny på BIO-sidor */ body.single-wehwan_character .navigation-top { display: none !important; } /* Dölj header-bild + masthead på BIO-sidor och Legal-sidan */ body.single-wehwan_character .custom-header, body.single-wehwan_character .site-header, body.single-wehwan_character #masthead, body.single-wehwan_character .has-header-image .custom-header-media, body.mahtantu-page .custom-header, body.mahtantu-page .site-header, body.mahtantu-page #masthead, body.mahtantu-page .has-header-image .custom-header-media { display: none !important; } /* ← BACK i topbaren */ .wehwan-topbar-back { display: inline-flex; align-items: center; gap: 10px; color: var(--color-accent) !important; font-family: 'Libre Baskerville', serif; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none !important; padding: 6px 14px; transition: color 0.2s; } .wehwan-topbar-back:hover { color: var(--color-accent-hover) !important; text-decoration: none !important; } .wehwan-topbar-back-arrow, .wehwan-topbar-back-label { color: inherit !important; } .wehwan-topbar-back .wehwan-back-icon { transform: rotate(180deg); width: 18px; height: 18px; display: block; fill: var(--color-accent) !important; flex-shrink: 0; } .wehwan-topbar-back .wehwan-back-icon path, .wehwan-topbar-back .wehwan-back-icon polygon { fill: var(--color-accent) !important; } /* Spacer när topbaren INTE har back-länk – håller layouten konsekvent */ .wehwan-topbar-spacer { flex: 0 0 auto; width: 50px; } /* ═══════════════════════════════════════════════════════════ * 07. CHARACTER GALLERY * ═══════════════════════════════════════════════════════════ */ .wc-gallery-section { margin-top: 60px; } .wc-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 600px) { .wc-gallery-grid { grid-template-columns: 1fr; } } .wc-gallery-cell { display: flex; flex-direction: column; gap: 10px; } .wc-gallery-cell-header { display: flex; align-items: baseline; justify-content: space-between; } .wc-gallery-label { font-family: 'Libre Baskerville', serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); } .wc-gallery-counter { font-size: 10px; letter-spacing: 0.1em; color: var(--color-text-subtle); } .wc-gallery-viewport { position: relative; background: var(--color-bg-base); aspect-ratio: 4/3; overflow: hidden; border: 1px solid #2a2218; } .wc-gallery-item { display: none; width: 100%; height: 100%; } .wc-gallery-item.is-active { display: block; } .wc-gallery-item img, .wc-gallery-item video { width: 100%; height: 100%; object-fit: contain; display: block; } .wc-gallery-caption { font-size: 11px; color: var(--color-text-subtle); font-style: italic; min-height: 1.4em; line-height: 1.4; } .wc-gallery-controls { display: flex; gap: 32px; align-items: center; justify-content: center; margin-top: 16px; } .wc-gallery-section .wc-gallery-prev, .wc-gallery-section .wc-gallery-next, .wc-gallery-section .wc-gallery-expand { background: none !important; border: none !important; color: var(--color-accent-muted) !important; padding: 4px 8px !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; transition: color 0.2s !important; box-shadow: none !important; text-shadow: none !important; margin-left: 0 !important; } .wc-gallery-section .wc-gallery-prev:hover, .wc-gallery-section .wc-gallery-next:hover, .wc-gallery-section .wc-gallery-expand:hover { color: var(--color-accent) !important; background: none !important; } .wc-gallery-section .wc-gallery-prev:focus, .wc-gallery-section .wc-gallery-next:focus, .wc-gallery-section .wc-gallery-expand:focus { background: none !important; outline: none; } .wc-gallery-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 4/3; background: rgba(14, 11, 6, 0.6); border: 1px solid var(--color-border-bio); color: var(--color-accent-muted); } .wc-gallery-empty svg { width: 32px; height: 32px; } .wc-gallery-empty-label { font-family: 'Libre Baskerville', serif; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-accent); } .wc-gallery-empty-coming { font-family: 'Libre Baskerville', serif; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-text-faded); } .wc-gallery-section .wc-gallery-play { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 64px !important; height: 64px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.3) !important; border: 1.5px solid var(--color-accent) !important; cursor: pointer !important; transition: all 0.2s !important; display: flex !important; align-items: center; justify-content: center; z-index: 2 !important; padding: 0 !important; box-shadow: none !important; backdrop-filter: blur(2px); } .wc-gallery-section .wc-gallery-play:hover { background: rgba(200, 169, 110, 0.2) !important; transform: translate(-50%, -50%) scale(1.05) !important; } .wc-gallery-section .wc-gallery-play::after { content: '' !important; width: 0; height: 0; border-left: 14px solid var(--color-accent); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; display: block !important; } .wc-gallery-section .wc-gallery-play:focus { outline: none !important; background: rgba(0, 0, 0, 0.3) !important; } .wc-gallery-item.is-active video { pointer-events: none; } .wc-gallery-item.is-active.is-playing video { pointer-events: auto; } .wc-gallery-item.is-active.is-playing .wc-gallery-play { opacity: 0 !important; pointer-events: none !important; } .wc-gallery-section .wc-gallery-pause { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 64px !important; height: 64px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.3) !important; border: 1.5px solid var(--color-accent) !important; cursor: pointer !important; display: flex !important; align-items: center; justify-content: center; z-index: 3 !important; padding: 0 !important; box-shadow: none !important; backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.2s !important; } .wc-gallery-section .wc-gallery-pause::before, .wc-gallery-section .wc-gallery-pause::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; background: var(--color-accent); border-radius: 2px; } .wc-gallery-section .wc-gallery-pause::before { left: calc(50% - 7px); } .wc-gallery-section .wc-gallery-pause::after { left: calc(50% + 3px); } .wc-gallery-section .wc-gallery-pause:focus { outline: none !important; background: rgba(0, 0, 0, 0.3) !important; } @media (hover: hover) { .wc-gallery-item.is-active.is-playing:hover .wc-gallery-pause { opacity: 1 !important; pointer-events: auto !important; } } /* ═══════════════════════════════════════════════════════════ * 08. LIGHTBOX * ═══════════════════════════════════════════════════════════ */ .wc-gallery-lightbox { display: none; position: fixed; inset: 0; background: rgba(5, 3, 1, 0.96); z-index: 99998; align-items: center; justify-content: center; flex-direction: column; } .wc-gallery-lightbox.is-open { display: flex; } .wc-lightbox-close { position: absolute; top: 20px; right: 24px; background: none !important; border: none !important; box-shadow: none !important; color: var(--color-accent) !important; font-size: 20px; font-family: 'Libre Baskerville', serif; cursor: pointer; line-height: 1; z-index: 1; padding: 8px; transition: color 0.2s; outline: none; } .wc-lightbox-close:hover, .wc-lightbox-close:focus { background: none !important; border: none !important; color: var(--color-accent-hover) !important; outline: none; } .wc-lightbox-prev, .wc-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: none !important; border: none !important; box-shadow: none !important; color: var(--color-accent) !important; cursor: pointer; padding: 16px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; outline: none; } .wc-lightbox-prev:hover, .wc-lightbox-prev:focus, .wc-lightbox-next:hover, .wc-lightbox-next:focus { background: none !important; border: none !important; color: var(--color-accent-hover) !important; outline: none; } .wc-lightbox-prev { left: 8px; } .wc-lightbox-next { right: 8px; } .wc-lightbox-media { max-width: 90vw; max-height: 80vh; display: flex; align-items: center; justify-content: center; } .wc-lightbox-media img, .wc-lightbox-media video { max-width: 90vw; max-height: 80vh; object-fit: contain; display: block; } .wc-lightbox-caption { margin-top: 20px; font-size: 15px; color: #a89060; font-style: italic; text-align: center; max-width: 600px; padding: 0 80px; line-height: 1.5; } /* Watch lightbox */ .wehwan-watch-lb { display: none; position: fixed; inset: 0; background: rgba(5, 3, 1, 0.96); z-index: 99998; align-items: center; justify-content: center; flex-direction: column; } .wehwan-watch-lb.is-open { display: flex; } .wehwan-wlb-close { position: absolute; top: 20px; right: 24px; background: none !important; border: none !important; box-shadow: none !important; color: var(--color-accent) !important; font-size: 20px; font-family: 'Libre Baskerville', serif; cursor: pointer; line-height: 1; z-index: 1; padding: 8px; transition: color 0.2s; outline: none; } .wehwan-wlb-close:hover, .wehwan-wlb-close:focus { background: none !important; border: none !important; color: var(--color-accent-hover) !important; outline: none; } .wehwan-wlb-media { max-width: 90vw; max-height: 80vh; display: flex; align-items: center; justify-content: center; } .wehwan-wlb-media img, .wehwan-wlb-media video { max-width: 90vw; max-height: 80vh; object-fit: contain; display: block; } .wehwan-wlb-media iframe { width: 85vw; height: 85vh; border: none; display: block; } /* ═══════════════════════════════════════════════════════════ * 09. FADE BRIDGE * ═══════════════════════════════════════════════════════════ */ .wehwan-fade-bridge { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-bg-base); opacity: 0; z-index: 99999; pointer-events: none; transition: opacity 600ms ease-in; } .wehwan-fade-bridge.active { opacity: 1; pointer-events: auto; } /* Fade IN på BIO-sidor */ body.single-wehwan_character { animation: wehwan-fade-in 600ms ease-out; } @keyframes wehwan-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ═══════════════════════════════════════════════════════════ * 10. UTILITIES & MISC * ═══════════════════════════════════════════════════════════ */ /* === MAIN AUTH MODAL === */ /* Estetik matchar .wehwan-char-popup / showWatchPopup — mörk bakgrund, muted border, gold text */ .wehwan-auth-overlay { display: none; position: fixed; inset: 0; background: transparent; z-index: 20000; } .wehwan-auth-overlay.is-open { display: block; } .wehwan-auth-modal { --modal-width: 368px; --modal-min-h: 500px; --modal-pad-x: 1.4rem; --modal-pad-y: 1.2rem; --modal-shadow: 0 -6px 24px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.4); --row-h-element: 38px; --row-h-input: var(--row-h-element); --row-h-meta: 17px; --row-h-btn: var(--row-h-element); --row-gap: 8px; --slot-input-v: stretch; --slot-input-h: stretch; --slot-meta-v: center; --slot-meta-h: stretch; --slot-btn-v: stretch; --slot-btn-h: stretch; all: initial; display: block; box-sizing: border-box; position: fixed; z-index: 20001; font-family: 'Lora', Georgia, serif; font-size: 14px; line-height: 1.5; color: var(--color-text-body); background: var(--color-bg-base); border: 1px solid var(--color-accent-muted); width: var(--modal-width); max-width: calc(100vw - 2rem); min-height: var(--modal-min-h); box-shadow: var(--modal-shadow); } .wehwan-auth-modal * { box-sizing: border-box; } .wehwan-auth-arrow { position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--color-bg-base); border-left: 1px solid var(--color-accent-muted); border-top: 1px solid var(--color-accent-muted); z-index: 1; } .wehwan-auth-close { background-color: transparent !important; border: none; color: var(--color-accent) !important; font-size: 12px !important; cursor: pointer; padding: 2px 5px; line-height: 1; box-shadow: none !important; transition: color 0.2s; } .wehwan-auth-close:hover { color: var(--color-accent-hover) !important; } /* ── PANEL LAYOUT ─────────────────────────────────────────────────────── */ .wehwan-auth-panel { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .is-state-login .wehwan-auth-login-front, .is-state-industry .wehwan-auth-login-front, .is-state-fan-confirm .wehwan-auth-fan-confirmation, .is-state-industry-confirm .wehwan-auth-industry-confirmation, .is-state-change-password .wehwan-auth-change-password, .is-state-change-email .wehwan-auth-change-email, .is-state-password-set .wehwan-auth-password-set, .is-state-delete-account .wehwan-auth-delete-account { opacity: 1; pointer-events: auto; } .is-state-delete-account .wehwan-auth-back-btn { display: flex; } /* ── LOGIN-FRONT 2px BASELINE GRID ──────────────────────────────────────── */ .wehwan-auth-login-front { display: grid; grid-template-rows: repeat(250, 2px); grid-template-columns: 1fr; padding: 0 var(--modal-pad-x); overflow: hidden; /* ── Radkarta — ändra värden här för att flytta element ── */ --r-close: 3 / 13; /* ← back-pil + × close */ --r-h2: 11 / 26; --r-subtitle: 26 / 36; --r-logged-info: 26 / 60; --r-logged-email: 60 / 69; --r-form: 44 / 134; --r-divider: 146 / 154; --r-join: 172 / 214; --r-icon: 209 / 227; --r-terms: 229 / 251; } .wehwan-auth-login-front > .wehwan-panel-header { display: contents; } .wehwan-auth-login-front > .wehwan-panel-body { display: contents; } .wehwan-auth-login-front > .wehwan-panel-footer { display: contents; } .wehwan-auth-login-front .wehwan-logged-icon-area { grid-row: var(--r-icon); grid-column: 1; align-self: center; } .wehwan-auth-login-front .wehwan-login-terms, .wehwan-auth-login-front .wehwan-logged-terms { grid-row: var(--r-terms); grid-column: 1; align-self: end; padding-bottom: var(--modal-pad-y); margin: 0 !important; } /* ── Grid-placering per element ──────────────────────────────────────────── */ .wehwan-auth-login-front .wehwan-auth-back-btn { grid-row: var(--r-close); grid-column: 1; align-self: center; justify-self: start; margin-left: calc(-1 * var(--modal-pad-x) + 0.4rem); } .wehwan-auth-login-front .wehwan-auth-close { position: static; top: auto; right: auto; grid-row: var(--r-close); grid-column: 1; align-self: center; justify-self: end; margin-right: calc(-1 * var(--modal-pad-x) + 0.4rem); } .wehwan-auth-login-front h2 { grid-row: var(--r-h2); grid-column: 1; align-self: end; margin: 0 !important; } .wehwan-auth-login-front .wehwan-login-tagline, .wehwan-auth-login-front .wehwan-industry-tagline { grid-row: var(--r-subtitle); grid-column: 1; align-self: start; margin: 0 !important; } .wehwan-auth-login-front .wehwan-logged-info { grid-row: var(--r-logged-info); grid-column: 1; align-self: start; margin: 0 !important; } .wehwan-auth-login-front .wehwan-logged-email-text { grid-row: var(--r-logged-email); grid-column: 1; align-self: center; margin: 0 !important; } .wehwan-auth-login-front .wehwan-login-form { grid-row: var(--r-form); grid-column: 1; align-self: start; } .wehwan-auth-login-front .wehwan-login-divider { grid-row: var(--r-divider); grid-column: 1; align-self: center; margin: 0; } .wehwan-auth-login-front .wehwan-login-join-btns { grid-row: var(--r-join); grid-column: 1; align-self: start; } /* ── IA-state: utöka formen till att fylla panelen ───────────────────────── */ .is-state-industry .wehwan-login-form { grid-row: 44 / 214; overflow-y: auto; } /* ── INDUSTRY STATE — show/hide within login-front ─────────────────────── */ .is-state-industry .wehwan-login-title { display: none; } .wehwan-industry-panel-title { display: none; } .is-state-industry .wehwan-industry-panel-title { display: block; } .wehwan-industry-tagline { display: none; font-family: 'Lora', serif !important; font-size: 11px !important; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: 0 !important; padding: 0; } .wehwan-industry-tagline.is-error { color: #d9533a !important; font-weight: bold !important; } .is-state-industry .wehwan-industry-tagline { display: block; } .is-state-industry .wehwan-login-tagline { display: none; } /* Meta-row, Forgot, Account-links: gone entirely in industry state */ .is-state-industry .wehwan-login-meta-row, .is-state-industry .wehwan-login-forgot, .is-state-industry .wehwan-logged-account-links { display: none !important; } /* Email + password: hidden — values stay in DOM, sent on submit */ .is-state-industry #wehwanLoginEmail, .is-state-industry .wehwan-login-pw-row { display: none; } /* Sign in, Log out + below-form elements: gone, industry-fields fills the space */ .is-state-industry #wehwanLoginSubmit, .is-state-industry .wehwan-logout-btn, .is-state-industry .wehwan-logged-email-text { display: none !important; } .is-state-industry .wehwan-login-divider, .is-state-industry .wehwan-login-join-btns, .is-state-industry .wehwan-login-terms { display: none; } /* Form: 2px baseline grid — samma styrsystem som yttre panelen */ .is-state-industry #wehwanLoginForm { display: grid; grid-template-rows: repeat(170, 2px); grid-template-columns: 1fr; row-gap: 0; overflow-y: auto; /* ── Radkarta IA Application — ändra värden här ── */ --r-ia-name: 1 / 20; /* 38px */ --r-ia-company: 24 / 43; /* 38px */ --r-ia-title: 47 / 66; /* 38px */ --r-ia-phone: 70 / 89; /* 38px */ --r-ia-motivation: 93 / 123; /* 60px */ --r-ia-terms: 127 / 138; /* 22px */ --r-ia-error: 139 / 151; /* 24px */ --r-ia-apply: 152 / 171; /* 38px — same outer position as GET IA btn */ } /* Industry fields: display:contents — fälten blir direkta grid-items */ .wehwan-industry-fields { display: none; } .is-state-industry .wehwan-industry-fields { display: contents; } /* Grid-placering per IA-fält */ .is-state-industry #wehwanIndustryName { grid-row: var(--r-ia-name); grid-column: 1; align-self: stretch; } .is-state-industry #wehwanIndustryCompany { grid-row: var(--r-ia-company); grid-column: 1; align-self: stretch; } .is-state-industry #wehwanIndustryTitle { grid-row: var(--r-ia-title); grid-column: 1; align-self: stretch; } .is-state-industry .wehwan-phone-wrapper { grid-row: var(--r-ia-phone); grid-column: 1; align-self: stretch; } .is-state-industry .wehwan-industry-motivation { grid-row: var(--r-ia-motivation); grid-column: 1; align-self: stretch; } .is-state-industry .wehwan-industry-terms-label { grid-row: var(--r-ia-terms); grid-column: 1; align-self: center; } .is-state-industry .wehwan-industry-form-error { grid-row: var(--r-ia-error); grid-column: 1; align-self: center; } .is-state-industry #wehwanIndustrySubmit { grid-row: var(--r-ia-apply); grid-column: 1; align-self: stretch; margin-bottom: 0 !important; } .wehwan-auth-modal.is-transitioning .wehwan-auth-panel { pointer-events: none !important; } /* ── LOGIN FRONT ──────────────────────────────────────────────────────── */ .wehwan-auth-modal h2 { padding: 0; } .wehwan-auth-overlay .wehwan-auth-modal h2.wehwan-login-title, .wehwan-auth-overlay .wehwan-auth-modal h2.wehwan-industry-panel-title { font-family: 'Libre Baskerville', serif; font-size: 13px; letter-spacing: 0.15em; color: var(--color-accent) !important; text-transform: uppercase; text-align: center; margin: 10px 0 0.2rem !important; } .wehwan-login-tagline { text-align: center; } .wehwan-login-form { display: grid; grid-template-rows: var(--row-h-input) var(--row-h-input) var(--row-h-meta) var(--row-h-btn) var(--row-h-meta); row-gap: var(--row-gap); margin-bottom: 0; } /* ── FORM SLOT SYSTEM ─────────────────────────────────────────────────── */ .form-slot-input { align-self: var(--slot-input-v); justify-self: var(--slot-input-h); height: var(--row-h-element); } .form-slot-meta { align-self: var(--slot-meta-v); justify-self: var(--slot-meta-h); } .form-slot-btn { grid-row: 4; align-self: var(--slot-btn-v); justify-self: var(--slot-btn-h); } .form-slot-forgot { grid-row: 5; align-self: center; justify-self: end; } .wehwan-login-subtitle.is-error { color: #d9533a !important; font-weight: bold !important; } .wehwan-login-subtitle { font-family: 'Lora', serif !important; font-size: 11px !important; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: 0 !important; padding: 0; line-height: 1.4; } .wehwan-auth-modal .wehwan-login-input { width: 100%; background: var(--color-bg-surface) !important; border: 0.5px solid var(--color-accent-muted) !important; color: var(--color-accent); font-family: 'Lora', serif !important; font-size: 14px !important; font-style: italic !important; padding: 8px 10px; box-sizing: border-box; height: var(--row-h-element); outline: none; border-radius: 6px !important; -webkit-appearance: none; -webkit-box-shadow: 0 0 0 30px #1a1208 inset; -webkit-text-fill-color: var(--color-accent); transition: border-color 0.2s; } .wehwan-auth-modal .wehwan-login-input:hover { border-color: var(--color-accent); } .wehwan-auth-modal .wehwan-login-input:focus { background-color: var(--color-bg-raised) !important; -webkit-box-shadow: 0 0 0 30px #2a1a0a inset !important; border-color: var(--color-accent) !important; outline: none !important; } .wehwan-auth-modal .wehwan-login-input:-webkit-autofill, .wehwan-auth-modal .wehwan-login-input:-webkit-autofill:hover, .wehwan-auth-modal .wehwan-login-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--color-accent) !important; -webkit-box-shadow: 0 0 0 30px #1a1208 inset !important; transition: background-color 5000s ease-in-out 0s; } .wehwan-auth-modal .wehwan-login-input::placeholder { font-family: 'Lora', serif !important; font-size: 14px !important; font-style: italic !important; color: var(--color-accent-muted) !important; -webkit-text-fill-color: var(--color-accent-muted) !important; opacity: 1; } .wehwan-login-pw-row { position: relative; } .wehwan-login-pw-input { padding-right: 44px; } .wehwan-login-pw-toggle { position: absolute; right: 0; top: 0; bottom: 0; width: 36px; display: flex; align-items: center; justify-content: center; background-color: transparent !important; border: none !important; box-shadow: none !important; cursor: pointer; padding: 0; color: var(--color-accent-dim) !important; transition: color 0.2s; } .wehwan-login-pw-toggle:hover, .wehwan-login-pw-toggle:focus { color: var(--color-accent); outline: none; } .wehwan-login-pw-toggle .wehwan-eye-strike { display: block; } .wehwan-login-pw-toggle.is-visible .wehwan-eye-strike { display: none; } .wehwan-auth-modal .wehwan-login-meta-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; } .wehwan-auth-modal .wehwan-login-remember { display: flex; align-items: center; gap: 6px; cursor: pointer; margin: 0 !important; line-height: 1.5; } .wehwan-auth-modal .wehwan-login-remember input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; width: 11px; height: 11px; min-width: 11px; cursor: pointer; margin: 0; background-color: var(--color-bg-surface) !important; border: 0.5px solid var(--color-accent-muted) !important; box-shadow: none !important; } .wehwan-auth-modal .wehwan-login-remember input[type="checkbox"]:checked { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; } .wehwan-auth-modal .wehwan-login-remember input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color-bg-base); font-size: 8px; line-height: 1; font-style: normal; } .wehwan-auth-modal .wehwan-login-remember span, .wehwan-auth-modal a.wehwan-login-forgot { font-family: 'Lora', serif !important; font-size: 11px !important; font-weight: normal !important; font-style: italic !important; letter-spacing: normal !important; color: var(--color-accent) !important; text-decoration: none !important; } .wehwan-auth-modal a.wehwan-login-forgot { display: inline-flex !important; align-items: center; height: 16.5px; line-height: 1; margin: 0; padding: 0; } .wehwan-auth-modal a.wehwan-login-forgot:hover { color: var(--color-accent-hover) !important; } .wehwan-auth-modal .wehwan-login-remember:hover span { color: var(--color-accent-hover) !important; } .wehwan-login-signin-btn { width: 100%; padding: 12px 10px !important; background-color: transparent !important; border: 0.5px solid var(--color-accent-muted) !important; border-radius: 6px !important; color: var(--color-accent) !important; font-family: 'Libre Baskerville', serif !important; font-size: 11px !important; font-weight: bold !important; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; height: var(--row-h-element); box-shadow: none !important; transition: border-color 0.2s, color 0.2s; } .wehwan-login-signin-btn:hover { border-color: var(--color-accent-hover) !important; color: var(--color-accent-hover) !important; } .wehwan-login-signin-btn:disabled:hover { border-color: var(--color-accent) !important; } .wehwan-login-signin-btn:disabled { border-color: var(--color-accent-dim) !important; color: var(--color-accent-dim) !important; pointer-events: auto !important; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' stroke='%23c8a96e' stroke-width='1.5' fill='none'/%3E%3Cline x1='4' y1='4' x2='16' y2='16' stroke='%23c8a96e' stroke-width='1.5'/%3E%3C/svg%3E") 10 10, not-allowed !important; } /* ── IA APPLICATION — overrides after specificity conflicts ─────────────── */ /* Forgot: beats .wehwan-auth-modal a.wehwan-login-forgot { display:inline-flex } */ .wehwan-auth-modal.is-state-industry a.wehwan-login-forgot { display: none !important; } /* Apply button: join-btn stil — placed after .wehwan-login-signin-btn */ .wehwan-auth-modal.is-state-industry #wehwanIndustrySubmit { position: relative !important; border: 0.5px solid var(--color-accent-dim) !important; font-family: 'Libre Baskerville', serif !important; font-size: 11px !important; font-style: normal !important; font-weight: normal !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; } .wehwan-auth-modal.is-state-industry #wehwanIndustrySubmit:not(:disabled):hover { border-color: var(--color-accent) !important; color: var(--color-accent-hover) !important; } .wehwan-auth-modal.is-state-industry #wehwanIndustrySubmit span[aria-hidden] { position: absolute; left: 10px; font-size: 13px; line-height: 1; filter: sepia(1) saturate(4) brightness(1.1); } /* h2 margin: placed after .wehwan-auth-modal h2 { margin-top:10px } */ .wehwan-auth-overlay .wehwan-auth-login-front h2 { margin: 0; } .wehwan-login-divider { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--color-accent-muted); font-family: 'Lora', serif; font-size: 11px; font-style: italic; } .wehwan-login-divider::before { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--color-accent-muted)); } .wehwan-login-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to left, transparent, var(--color-accent-muted)); } .wehwan-login-join-btns { display: flex; flex-direction: column; gap: 8px; } .wehwan-login-join-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 11px 10px; background-color: transparent !important; border: 0.5px solid var(--color-accent-dim); border-radius: 6px; color: var(--color-accent) !important; cursor: pointer; font-family: 'Libre Baskerville', serif; font-size: 11px; height: var(--row-h-element); letter-spacing: 0.15em; text-transform: uppercase; text-align: center; transition: border-color 0.2s, color 0.2s; box-shadow: none !important; } .wehwan-login-join-btn:hover { border-color: var(--color-accent) !important; color: var(--color-accent-hover) !important; } .wehwan-login-join-btn:disabled { color: var(--color-accent-dim) !important; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' stroke='%23c8a96e' stroke-width='1.5' fill='none'/%3E%3Cline x1='4' y1='4' x2='16' y2='16' stroke='%23c8a96e' stroke-width='1.5'/%3E%3C/svg%3E") 10 10, not-allowed !important; } .wehwan-login-join-btn span[aria-hidden] { position: absolute; left: 10px; font-size: 13px; line-height: 1; filter: sepia(1) saturate(4) brightness(1.1); } .wehwan-login-terms { font-family: 'Lora', serif; font-size: 10px; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: auto 0 0; line-height: 1.4; } .wehwan-login-terms a { color: var(--color-accent-muted) !important; text-decoration: underline !important; text-underline-offset: 2px; } .wehwan-login-terms a:hover { color: var(--color-accent) !important; } /* ── LOGGED-IN VIEWS (data-access satt av openAuthModal) ─────────────── */ /* Titlar och logged-info: dolda per default */ .wehwan-auth-overlay .wehwan-auth-modal h2.wehwan-fan-logged-title, .wehwan-auth-overlay .wehwan-auth-modal h2.wehwan-industry-logged-title, .wehwan-auth-overlay .wehwan-auth-modal h2.wehwan-admin-logged-title { display: none; font-family: 'Libre Baskerville', serif; font-size: 13px; letter-spacing: 0.15em; color: var(--color-accent) !important; text-transform: uppercase; text-align: center; margin: 0 !important; } .wehwan-logged-info { display: none; text-align: center; } .wehwan-logged-sub-fan, .wehwan-logged-sub-industry, .wehwan-logged-sub-admin { display: none; font-family: 'Lora', serif !important; font-size: 11px !important; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: 0 !important; padding: 0; line-height: 1.4; } .wehwan-logged-email-text { font-family: 'Libre Baskerville', serif; font-size: 11px; font-style: normal; color: var(--color-accent); text-align: center; margin: 0; padding: 0; letter-spacing: 0.05em; } .wehwan-logged-changepw { font-family: 'Lora', serif !important; font-size: 11px !important; font-style: italic !important; color: var(--color-accent-dim) !important; text-decoration: none !important; text-align: center; } .wehwan-logged-changepw:hover { color: var(--color-accent) !important; } .wehwan-logged-account-links { display: none; flex-direction: row; justify-content: space-between; justify-self: stretch; } .wehwan-logged-changeemail { font-family: 'Lora', serif !important; font-size: 11px !important; font-style: italic !important; color: var(--color-accent-dim) !important; text-decoration: none !important; cursor: pointer; } .wehwan-logged-changeemail:hover { color: var(--color-accent) !important; } a.wehwan-logout-btn { display: none; text-decoration: none !important; text-align: center; } .wehwan-logged-icon-area { display: none; justify-content: center; align-items: center; } .wehwan-logged-icon-fan, .wehwan-logged-icon-industry { display: none; font-size: 20px; filter: sepia(1) saturate(4) brightness(1.1); } .wehwan-logged-terms { display: none; font-family: 'Lora', serif; font-size: 10px; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: auto 0 0 !important; line-height: 1.4; } .wehwan-logged-terms a { color: var(--color-accent-muted) !important; text-decoration: underline !important; text-underline-offset: 2px; } .wehwan-logged-terms a:hover { color: var(--color-accent) !important; } /* Gemensamt: dölj guest-element i logged-in states */ .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-login-title, .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-login-title, .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-login-title { display: none; } .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-login-tagline, .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-login-tagline, .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-login-tagline { display: none; } .wehwan-auth-modal[data-access="fan"].is-state-login #wehwanLoginEmail, .wehwan-auth-modal[data-access="industry"].is-state-login #wehwanLoginEmail, .wehwan-auth-modal[data-access="admin"].is-state-login #wehwanLoginEmail { visibility: hidden; pointer-events: none; } .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-login-pw-row, .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-login-pw-row, .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-login-pw-row { visibility: hidden; pointer-events: none; } .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-login-meta-row, .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-login-meta-row, .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-login-meta-row { visibility: hidden; pointer-events: none; } .wehwan-auth-modal[data-access="fan"].is-state-login #wehwanLoginSubmit, .wehwan-auth-modal[data-access="industry"].is-state-login #wehwanLoginSubmit, .wehwan-auth-modal[data-access="admin"].is-state-login #wehwanLoginSubmit { display: none; } .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-login-terms, .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-login-terms, .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-login-terms { display: none !important; } .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-login-forgot, .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-login-forgot, .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-login-forgot { display: none !important; } .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-logged-account-links, .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-logged-account-links, .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-logged-account-links { display: flex; } /* Gemensamt: visa logged-in element */ .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-logged-info, .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-logged-info, .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-logged-info { display: block; } .wehwan-auth-modal[data-access="fan"].is-state-login a.wehwan-logout-btn, .wehwan-auth-modal[data-access="industry"].is-state-login a.wehwan-logout-btn, .wehwan-auth-modal[data-access="admin"].is-state-login a.wehwan-logout-btn { display: block !important; } .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-logged-terms, .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-logged-terms, .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-logged-terms { display: block; } /* Icon area: fan och industry — admin visar tom yta */ .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-logged-icon-area, .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-logged-icon-area { display: flex; } .divider-fan-logged { display: none; } .wehwan-auth-modal[data-access="fan"].is-state-login .divider-guest { display: none; } .wehwan-auth-modal[data-access="fan"].is-state-login .divider-fan-logged { display: inline; } /* Fan-vy: visa fan-titel och ikon, dölj Become a Fan */ .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-fan-logged-title { display: block; } .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-logged-sub-fan { display: block; } .wehwan-auth-modal[data-access="fan"].is-state-login .wehwan-logged-icon-fan { display: inline-block; } .wehwan-auth-modal[data-access="fan"].is-state-login #wehwanBecomeAFan { display: none; } /* Industry-vy: visa industry-titel och ikon, dölj divider + join-btns */ .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-industry-logged-title { display: block; } .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-logged-sub-industry { display: block; } .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-logged-icon-industry { display: inline-block; } .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-login-divider, .wehwan-auth-modal[data-access="industry"].is-state-login .wehwan-login-join-btns { display: none !important; } /* Admin-vy: visa admin-titel och sub, dölj divider + join-btns */ .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-admin-logged-title { display: block; } .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-logged-sub-admin { display: block; } .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-login-divider, .wehwan-auth-modal[data-access="admin"].is-state-login .wehwan-login-join-btns { display: none !important; } /* ── FAN CONFIRMATION ─────────────────────────────────────────────────── */ .wehwan-auth-fan-confirmation { display: grid; grid-template-rows: repeat(250, 2px); grid-template-columns: 1fr; padding: 0 var(--modal-pad-x); overflow: hidden; --r-close: 3 / 13; --r-h2: 11 / 26; --r-subtitle: 41 / 50; --r-logged-email: 60 / 69; --r-confirm-sub: 79 / 88; --r-icon: 209 / 227; --r-terms: 229 / 251; } .wehwan-auth-fan-confirmation .wehwan-fan-confirm-header, .wehwan-auth-fan-confirmation .wehwan-fan-confirm-body, .wehwan-auth-fan-confirmation .wehwan-fan-confirm-footer { display: contents; } .wehwan-auth-fan-confirmation .wehwan-auth-close { position: static; top: auto; right: auto; grid-row: var(--r-close); grid-column: 1; align-self: center; justify-self: end; margin-right: calc(-1 * var(--modal-pad-x) + 0.4rem); } .wehwan-auth-fan-confirmation .wehwan-fan-confirm-title { grid-row: var(--r-h2); grid-column: 1; align-self: end; margin: 0 !important; } .wehwan-auth-fan-confirmation .wehwan-fan-confirm-body > p:first-child { grid-row: var(--r-subtitle); grid-column: 1; align-self: center; } .wehwan-auth-fan-confirmation .wehwan-fan-confirm-email { grid-row: var(--r-logged-email); grid-column: 1; align-self: center; } .wehwan-auth-fan-confirmation .wehwan-fan-confirm-body > p:last-child { grid-row: var(--r-confirm-sub); grid-column: 1; align-self: center; } .wehwan-auth-fan-confirmation .wehwan-fan-confirm-heart { grid-row: var(--r-icon); grid-column: 1; align-self: center; justify-self: center; } .wehwan-auth-fan-confirmation .wehwan-fan-confirm-resend { grid-row: var(--r-terms); grid-column: 1; align-self: end; padding-bottom: var(--modal-pad-y); } .wehwan-fan-confirm-header { text-align: center; } .wehwan-fan-confirm-heart { display: block; font-size: 22px; margin-bottom: 0.6rem; filter: sepia(1) saturate(4) brightness(1.1); } .wehwan-fan-confirm-title { font-family: 'Libre Baskerville', serif; font-size: 13px; letter-spacing: 0.15em; color: var(--color-accent) !important; text-transform: uppercase; margin: 0 !important; line-height: 1.5; } .wehwan-fan-confirm-body { text-align: center; } .wehwan-fan-confirm-text { font-family: 'Lora', serif; font-size: 11px !important; font-style: italic; color: var(--color-accent-muted); text-align: center; line-height: 1.4; margin: 0 !important; } .wehwan-fan-confirm-email { font-family: 'Libre Baskerville', serif; font-size: 11px !important; font-style: normal; font-weight: normal; color: var(--color-accent) !important; letter-spacing: 0.05em; text-align: center; margin: 0 !important; } .wehwan-fan-confirm-resend { font-family: 'Lora', serif; font-size: 10px !important; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: 0 !important; } .wehwan-fan-resend-link { color: var(--color-accent) !important; text-decoration: underline !important; text-underline-offset: 2px; } .wehwan-fan-resend-link:hover { color: var(--color-accent-hover) !important; } /* ── IA CONFIRMATION ──────────────────────────────────────────────────────── */ .wehwan-auth-industry-confirmation { display: grid; grid-template-rows: repeat(250, 2px); grid-template-columns: 1fr; padding: 0 var(--modal-pad-x); overflow: hidden; --r-close: 3 / 13; --r-h2: 11 / 26; --r-subtitle: 41 / 50; --r-icon: 209 / 227; } .wehwan-auth-industry-confirmation .wehwan-fan-confirm-header, .wehwan-auth-industry-confirmation .wehwan-fan-confirm-body { display: contents; } .wehwan-auth-industry-confirmation .wehwan-auth-close { position: static; top: auto; right: auto; grid-row: var(--r-close); grid-column: 1; align-self: center; justify-self: end; margin-right: calc(-1 * var(--modal-pad-x) + 0.4rem); } .wehwan-auth-industry-confirmation .wehwan-fan-confirm-title { grid-row: var(--r-h2); grid-column: 1; align-self: end; margin: 0 !important; } .wehwan-auth-industry-confirmation .wehwan-fan-confirm-body > p { grid-row: var(--r-subtitle); grid-column: 1; align-self: center; } .wehwan-auth-industry-confirmation .wehwan-fan-confirm-heart { grid-row: var(--r-icon); grid-column: 1; align-self: center; justify-self: center; } /* ── CHANGE PASSWORD ────────────────────────────────────────────────────── */ .wehwan-auth-change-password { display: grid; grid-template-rows: repeat(250, 2px); grid-template-columns: 1fr; padding: 0 var(--modal-pad-x); overflow: hidden; --r-close: 3 / 13; --r-h2: 11 / 26; --r-subtitle: 26 / 36; --r-email: 60 / 69; --r-error: 78 / 88; --r-btn: 103 / 122; --r-terms: 229 / 251; } .wehwan-auth-change-password .wehwan-panel-header, .wehwan-auth-change-password .wehwan-panel-body { display: contents; } .wehwan-auth-change-password .wehwan-auth-back-btn { grid-row: var(--r-close); grid-column: 1; align-self: center; justify-self: start; margin-left: calc(-1 * var(--modal-pad-x) + 0.4rem); } .wehwan-auth-change-password .wehwan-auth-close { position: static; top: auto; right: auto; grid-row: var(--r-close); grid-column: 1; align-self: center; justify-self: end; margin-right: calc(-1 * var(--modal-pad-x) + 0.4rem); } .wehwan-auth-change-password .wehwan-changepw-title { grid-row: var(--r-h2); grid-column: 1; align-self: end; margin: 0 !important; } .wehwan-auth-change-password .wehwan-changepw-subtitle { grid-row: var(--r-subtitle); grid-column: 1; align-self: center; } .wehwan-auth-change-password .wehwan-changepw-email { grid-row: var(--r-email); grid-column: 1; align-self: center; } .wehwan-auth-change-password .wehwan-changepw-error { grid-row: var(--r-error); grid-column: 1; align-self: center; display: none; } .wehwan-auth-change-password #wehwanSendResetLink { grid-row: var(--r-btn); grid-column: 1; align-self: stretch; } .wehwan-auth-change-password .wehwan-changepw-warning { grid-row: var(--r-terms); grid-column: 1; align-self: end; padding-bottom: var(--modal-pad-y); } .wehwan-changepw-title { font-family: 'Libre Baskerville', serif; font-size: 13px; letter-spacing: 0.15em; color: var(--color-accent) !important; text-transform: uppercase; text-align: center; margin: 0 !important; line-height: 1.5; } .wehwan-changepw-subtitle { font-family: 'Lora', serif; font-size: 11px; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: 0; line-height: 1.4; } .wehwan-changepw-email { font-family: 'Libre Baskerville', serif; font-size: 11px; color: var(--color-accent); text-align: center; margin: 0; letter-spacing: 0.05em; } .wehwan-changepw-error { font-size: 11px; color: #c8856e; text-align: center; margin: 0; } .wehwan-changepw-warning { font-family: 'Lora', serif; font-size: 10px; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: 0; line-height: 1.4; } /* ── CHANGE EMAIL ───────────────────────────────────────────────────────── */ .wehwan-auth-change-email { display: grid; grid-template-rows: repeat(250, 2px); grid-template-columns: 1fr; padding: 0 var(--modal-pad-x); overflow: hidden; --r-close: 3 / 13; --r-h2: 11 / 26; --r-subtitle: 26 / 36; --r-input: 44 / 63; --r-error: 78 / 88; --r-btn: 103 / 122; --r-terms: 229 / 251; } .wehwan-auth-change-email .wehwan-panel-header, .wehwan-auth-change-email .wehwan-panel-body { display: contents; } .wehwan-auth-change-email .wehwan-auth-back-btn { grid-row: var(--r-close); grid-column: 1; align-self: center; justify-self: start; margin-left: calc(-1 * var(--modal-pad-x) + 0.4rem); } .wehwan-auth-change-email .wehwan-auth-close { position: static; top: auto; right: auto; grid-row: var(--r-close); grid-column: 1; align-self: center; justify-self: end; margin-right: calc(-1 * var(--modal-pad-x) + 0.4rem); } .wehwan-auth-change-email .wehwan-changeemail-title { grid-row: var(--r-h2); grid-column: 1; align-self: end; margin: 0 !important; } .wehwan-auth-change-email .wehwan-changeemail-subtitle { grid-row: var(--r-subtitle); grid-column: 1; align-self: center; } .wehwan-auth-change-email .wehwan-changeemail-input { grid-row: var(--r-input); grid-column: 1; align-self: stretch; } .wehwan-auth-change-email .wehwan-changeemail-error { grid-row: var(--r-error); grid-column: 1; align-self: center; display: none; } .wehwan-auth-change-email #wehwanSubmitEmailChange { grid-row: var(--r-btn); grid-column: 1; align-self: stretch; } .wehwan-auth-change-email .wehwan-changeemail-terms { grid-row: var(--r-terms); grid-column: 1; align-self: end; padding-bottom: var(--modal-pad-y); } .wehwan-changeemail-title { font-family: 'Libre Baskerville', serif; font-size: 13px; letter-spacing: 0.15em; color: var(--color-accent) !important; text-transform: uppercase; text-align: center; margin: 0 !important; line-height: 1.5; } .wehwan-changeemail-subtitle { font-family: 'Lora', serif; font-size: 11px; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: 0; line-height: 1.4; } .wehwan-changeemail-error { font-size: 11px; color: #c8856e; text-align: center; margin: 0; } .wehwan-changeemail-terms { font-family: 'Lora', serif; font-size: 10px; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: 0; line-height: 1.4; } /* ── PASSWORD SET ───────────────────────────────────────────────────────── */ .wehwan-auth-password-set { display: grid; grid-template-rows: repeat(250, 2px); grid-template-columns: 1fr; padding: 0 var(--modal-pad-x); overflow: hidden; --r-close: 3 / 13; --r-h2: 11 / 26; --r-subtitle: 26 / 36; --r-email: 44 / 54; --r-input: 67 / 86; --r-strength: 90 / 98; --r-error: 91 / 101; --r-btn: 103 / 122; --r-terms: 229 / 251; } .wehwan-auth-password-set .wehwan-panel-header, .wehwan-auth-password-set .wehwan-panel-body { display: contents; } .wehwan-auth-password-set .wehwan-auth-back-btn { grid-row: var(--r-close); grid-column: 1; align-self: center; justify-self: start; margin-left: calc(-1 * var(--modal-pad-x) + 0.4rem); } .wehwan-auth-password-set .wehwan-auth-close { position: static; top: auto; right: auto; grid-row: var(--r-close); grid-column: 1; align-self: center; justify-self: end; margin-right: calc(-1 * var(--modal-pad-x) + 0.4rem); } .wehwan-auth-password-set .wehwan-pwset-title { grid-row: var(--r-h2); grid-column: 1; align-self: end; margin: 0 !important; } .wehwan-auth-password-set .wehwan-pwset-subtitle { grid-row: var(--r-subtitle); grid-column: 1; align-self: center; } .wehwan-auth-password-set .wehwan-pwset-email { grid-row: var(--r-email); grid-column: 1; align-self: center; } .wehwan-auth-password-set .wehwan-login-pw-row { grid-row: var(--r-input); grid-column: 1; align-self: stretch; } .wehwan-auth-password-set .wehwan-pwset-strength { grid-row: var(--r-strength); grid-column: 1; align-self: center; } .wehwan-auth-password-set .wehwan-pwset-error { grid-row: var(--r-error); grid-column: 1; align-self: center; display: none; } .wehwan-auth-password-set #wehwanPasswordSetSubmit { grid-row: var(--r-btn); grid-column: 1; align-self: stretch; } .wehwan-auth-password-set .wehwan-pwset-terms { grid-row: var(--r-terms); grid-column: 1; align-self: end; padding-bottom: var(--modal-pad-y); } .wehwan-pwset-title { font-family: 'Libre Baskerville', serif; font-size: 13px; letter-spacing: 0.15em; color: var(--color-accent) !important; text-transform: uppercase; text-align: center; margin: 0 !important; line-height: 1.5; } .wehwan-pwset-subtitle.is-error { color: #d9533a !important; font-style: normal !important; } .wehwan-pwset-subtitle { font-family: 'Lora', serif; font-size: 11px; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: 0; line-height: 1.4; } .wehwan-pwset-email { font-family: 'Libre Baskerville', serif; font-size: 11px; color: var(--color-accent); text-align: center; margin: 0; letter-spacing: 0.05em; } .wehwan-pwset-error { font-size: 11px; color: #c8856e; text-align: center; margin: 0; } .wehwan-pwset-terms { font-family: 'Lora', serif; font-size: 10px; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: 0; line-height: 1.4; } .wehwan-pwset-strength { height: 4px; background: rgba(200, 169, 110, 0.15); border-radius: 2px; overflow: hidden; } .wehwan-pwset-strength-bar { height: 100%; width: 0; border-radius: 2px; transition: width 0.2s, background-color 0.2s; } .wehwan-pwset-strength.is-weak .wehwan-pwset-strength-bar { width: 33.3%; background: #c8856e; } .wehwan-pwset-strength.is-medium .wehwan-pwset-strength-bar { width: 66.6%; background: #c8a96e; } .wehwan-pwset-strength.is-strong .wehwan-pwset-strength-bar { width: 100%; background: #6ec88a; } /* ── DELETE ACCOUNT ─────────────────────────────────────────────────────── */ .wehwan-auth-delete-account { display: grid; grid-template-rows: repeat(250, 2px); grid-template-columns: 1fr; padding: 0 var(--modal-pad-x); overflow: hidden; --r-close: 3 / 13; --r-h2: 14 / 26; --r-subtitle: 26 / 36; --r-input: 44 / 63; --r-error: 78 / 88; --r-btn: 103 / 122; --r-sent: 78 / 220; --r-warning: 229 / 251; } .wehwan-auth-delete-account .wehwan-panel-header, .wehwan-auth-delete-account .wehwan-panel-body { display: contents; } .wehwan-auth-delete-account .wehwan-auth-back-btn { grid-row: var(--r-close); grid-column: 1; align-self: center; justify-self: start; margin-left: calc(-1 * var(--modal-pad-x) + 0.4rem); } .wehwan-auth-delete-account .wehwan-auth-close { position: static; top: auto; right: auto; grid-row: var(--r-close); grid-column: 1; align-self: center; justify-self: end; margin-right: calc(-1 * var(--modal-pad-x) + 0.4rem); } .wehwan-auth-delete-account .wehwan-deleteaccount-title { grid-row: var(--r-h2); grid-column: 1; align-self: end; margin: 0 !important; } .wehwan-auth-delete-account .wehwan-deleteaccount-subtitle { grid-row: var(--r-subtitle); grid-column: 1; align-self: center; } .wehwan-auth-delete-account .wehwan-deleteaccount-pw-row { grid-row: var(--r-input); grid-column: 1; align-self: stretch; } .wehwan-auth-delete-account .wehwan-deleteaccount-error { grid-row: var(--r-error); grid-column: 1; align-self: center; display: none; font-size: 12px; color: #e05858; margin: 0; text-align: center; } .wehwan-auth-delete-account #wehwanDeleteAccountSubmit { grid-row: var(--r-btn); grid-column: 1; align-self: stretch; } .wehwan-auth-delete-account .wehwan-deleteaccount-sent { grid-row: var(--r-sent); grid-column: 1; align-self: start; display: none; font-family: 'Lora', serif; font-size: 13px; color: var(--color-accent-muted); line-height: 1.5; text-align: center; margin: 0; } .wehwan-auth-delete-account .wehwan-deleteaccount-warning { grid-row: var(--r-warning); grid-column: 1; align-self: end; padding-bottom: var(--modal-pad-y); } .wehwan-deleteaccount-title { font-family: 'Libre Baskerville', serif; font-size: 13px; letter-spacing: 0.15em; color: var(--color-accent) !important; text-transform: uppercase; text-align: center; margin: 0 !important; line-height: 1.5; } .wehwan-deleteaccount-subtitle { font-family: 'Lora', serif; font-size: 11px; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: 0; line-height: 1.4; } .wehwan-deleteaccount-warning { font-family: 'Lora', serif; font-size: 10px; font-style: italic; color: var(--color-accent-muted); text-align: center; margin: 0; line-height: 1.4; } /* ── LOGGED-TERMS FOOTER LINKS ──────────────────────────────────────────── */ .wehwan-terms-sep { color: var(--color-accent); margin: 0 4px; opacity: 0.5; } .wehwan-delete-account-link { text-decoration: none !important; } .wehwan-delete-account-link svg { display: inline-block; } /* ── HONEYPOT ────────────────────────────────────────────────────────────── */ .wehwan-hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ── INDUSTRY FORM ───────────────────────────────────────────────────────── */ .wehwan-auth-back-btn { display: none; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: none !important; background-color: transparent !important; border: none !important; box-shadow: none !important; color: var(--color-accent) !important; cursor: pointer; transition: color 0.2s; } .is-state-industry .wehwan-auth-back-btn, .is-state-change-password .wehwan-auth-back-btn, .is-state-change-email .wehwan-auth-back-btn, .is-state-password-set .wehwan-auth-back-btn { display: flex; } .wehwan-auth-back-btn:hover { color: var(--color-accent-hover) !important; } .wehwan-industry-motivation { resize: none; min-height: 60px; font-family: 'Lora', serif !important; font-size: 14px !important; font-style: italic; line-height: 1.5 !important; padding: 10px 12px !important; } .wehwan-phone-wrapper { display: flex; gap: 6px; align-items: stretch; } .wehwan-phone-prefix { flex-shrink: 0; width: 86px; height: var(--row-h-element); font-family: 'Lora', serif !important; font-size: 14px !important; font-style: italic !important; color: var(--color-accent) !important; background-color: var(--color-bg-surface) !important; border: 0.5px solid var(--color-accent-muted) !important; border-radius: 6px !important; padding: 8px 10px !important; box-shadow: none !important; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; } .wehwan-phone-prefix:focus { border-color: var(--color-accent) !important; outline: none; } .wehwan-phone-wrapper .wehwan-login-input { flex: 1; min-width: 0; } .wehwan-industry-terms-label { display: flex; align-items: center; gap: 8px; font-family: 'Lora', serif; font-size: 11px; font-style: italic; cursor: pointer; margin: 0 !important; } .wehwan-industry-cb { appearance: none; -webkit-appearance: none; -moz-appearance: none; position: absolute; opacity: 0; width: 11px; height: 11px; margin: 0; cursor: pointer; } .wehwan-industry-cb-custom { position: relative; display: inline-block; width: 11px; height: 11px; min-width: 11px; background-color: var(--color-bg-surface) !important; border: 0.5px solid var(--color-accent-muted) !important; box-shadow: none !important; flex-shrink: 0; cursor: pointer; } .wehwan-industry-cb:checked + .wehwan-industry-cb-custom { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; } .wehwan-industry-cb:checked + .wehwan-industry-cb-custom::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color-bg-base); font-size: 8px; line-height: 1; font-style: normal; } .wehwan-industry-terms-text { color: var(--color-accent) !important; } .wehwan-industry-terms-link { color: var(--color-accent) !important; text-decoration: underline !important; text-underline-offset: 2px; } .wehwan-industry-terms-link:hover { color: var(--color-accent-hover) !important; } .wehwan-industry-form-error { font-family: 'Lora', serif; font-size: 12px; font-style: italic; color: var(--color-error, #c0392b); margin: 0 !important; display: none; } /* ── TOAST ─────────────────────────────────────────────────────────────── */ .wehwan-toast { position: fixed !important; top: 1.5rem !important; right: 1.5rem !important; z-index: 100002; display: flex !important; align-items: center !important; gap: 0.8rem; padding: 0.9rem 1rem 0.9rem 1.25rem; background: var(--color-bg-surface) !important; border: 0.5px solid var(--color-border) !important; border-left-width: 3px !important; max-width: 340px; font-family: 'Lora', serif; font-size: 13px !important; line-height: 1.45 !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateX(calc(100% + 2rem)); transition: opacity 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .wehwan-toast.is-visible { opacity: 1 !important; transform: translateX(0) !important; pointer-events: auto; } .wehwan-toast.is-leaving { opacity: 0 !important; transform: translateX(calc(100% + 2rem)) !important; transition: opacity 0.3s ease-in, transform 0.3s ease-in !important; } .wehwan-toast-success { border-left-color: var(--color-accent) !important; } .wehwan-toast-info { border-left-color: var(--color-accent-muted) !important; } .wehwan-toast-error { border-left-color: #8b3a2a !important; } .wehwan-toast-text { flex: 1; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; } .wehwan-toast-success .wehwan-toast-text { color: var(--color-accent) !important; } .wehwan-toast-info .wehwan-toast-text { color: var(--color-text-secondary) !important; } .wehwan-toast-error .wehwan-toast-text { color: #c06050 !important; } .wehwan-toast-close { flex-shrink: 0; background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; font-size: 10px !important; line-height: 1 !important; color: var(--color-text-faded) !important; transition: color 0.2s; } /* ═══════════════════════════════════════════════════════════ * 11. EPISODES PANEL * ═══════════════════════════════════════════════════════════ */ /* ── Panel container ── */ .wehwan-episodes-panel .wehwan-ep-panel-content { background-color: var(--color-bg-surface) !important; padding: 60px 0 80px; } /* Remove Twenty Seventeen's .panel-content default padding that could bleed in via cascade if the browser matches sibling rules */ .wehwan-episodes-panel .panel-content { display: none !important; /* safety — we don't use .panel-content here */ } .wehwan-ep-wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; } /* ── Season navigation ── */ .wehwan-season-nav { display: flex; justify-content: center; align-items: center; gap: 40px; margin-bottom: 52px; } .wehwan-season-tab { background: none !important; border: none !important; border-bottom: 1px solid transparent !important; padding: 4px 0 6px !important; margin: 0 !important; cursor: pointer !important; font-family: 'Libre Baskerville', serif !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 0.15em !important; color: var(--color-text-faded) !important; transition: color 0.2s, border-color 0.2s !important; box-shadow: none !important; outline: none !important; } .wehwan-season-tab:hover { color: var(--color-accent-muted) !important; } .wehwan-season-tab.is-active { color: var(--color-accent) !important; border-bottom-color: var(--color-accent) !important; } .wehwan-season-tab.is-coming-soon { color: var(--color-text-faded) !important; opacity: 0.45; } .wehwan-season-tab.is-coming-soon:hover { color: var(--color-text-subtle) !important; opacity: 0.65; } /* ── Season block ── */ .wehwan-season-block { animation: wehwan-ep-fade-in 0.3s ease; } @keyframes wehwan-ep-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── Season header ── */ .wehwan-season-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 44px; } .wehwan-season-info { flex: 1; min-width: 0; } .wehwan-season-title { font-family: 'Libre Baskerville', serif !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--color-accent) !important; margin: 0 0 12px !important; padding: 0 !important; border: none !important; } .wehwan-season-text { font-family: 'Lora', serif; font-size: 15px; line-height: 1.75; color: var(--color-text-secondary); margin: 0; max-width: 640px; } .wehwan-chars-body { margin-top: 0 !important; margin-bottom: 2rem !important; float: none !important; width: auto !important; } .wehwan-chars-body p { font-family: 'Lora', serif !important; font-size: 15px !important; line-height: 1.75 !important; color: var(--color-text-secondary) !important; max-width: calc(4 * 132px + 3 * 3rem) !important; margin: 0 auto 1em !important; } /* ── Show/Hide clips button ── */ .wehwan-show-clips-btn { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: none !important; border: none !important; padding: 6px 0 !important; margin: 4px 0 0 !important; cursor: pointer !important; font-family: 'Libre Baskerville', serif !important; font-size: 10px !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--color-text-subtle) !important; white-space: nowrap; flex-shrink: 0; transition: color 0.2s !important; box-shadow: none !important; outline: none !important; opacity: 0.75; } .wehwan-show-clips-btn:hover { color: var(--color-accent) !important; opacity: 1; } .wehwan-show-clips-btn svg { flex-shrink: 0; opacity: 0.7; } /* ── Flip grid ── */ .wehwan-flip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 900px) { .wehwan-flip-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 500px) { .wehwan-flip-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .wehwan-ep-wrap { padding: 0 16px; } } /* ── Flip card — CSS 3D ── */ .wehwan-flip-card { aspect-ratio: 2 / 3; perspective: 1100px; cursor: pointer; transform: rotate(var(--ep-rotation, 0deg)); /* Subtle shadow to lift cards off the background */ filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45)); transition: filter 0.2s; } .wehwan-flip-card:hover { filter: drop-shadow(0 6px 20px rgba(0,0,0,0.65)); } .wehwan-flip-card.is-coming-soon-card { cursor: default; } .wehwan-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1); } .wehwan-flip-card.is-flipped .wehwan-card-inner { transform: rotateY(180deg); } .wehwan-card-back, .wehwan-card-front { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 3px; overflow: hidden; } /* ── Card back face ── */ .wehwan-card-back { background: var(--color-bg-raised); border: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 14px; text-align: center; } .wehwan-card-diamond { font-size: 14px; color: var(--color-accent); line-height: 1; } .wehwan-card-diamond-bot { margin-top: auto; } .wehwan-card-roman { font-family: 'Libre Baskerville', serif; font-size: 26px; font-weight: 700; color: var(--color-accent); letter-spacing: 0.08em; line-height: 1; } .wehwan-card-ep-title { font-family: 'Libre Baskerville', serif; font-size: 10px; font-weight: 700; margin-top: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-body); line-height: 1.3; word-break: break-word; } .wehwan-card-tagline { font-family: 'Lora', serif; font-style: italic; font-size: 10px; color: var(--color-text-secondary); line-height: 1.4; word-break: break-word; } /* ── Card front face ── */ .wehwan-card-front { background: var(--color-bg-base); border: 1px solid var(--color-border); transform: rotateY(180deg); } /* ── Coming soon state (front face) ── */ .wehwan-front-coming-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 20px; } .wehwan-cs-diamond { font-size: 14px; color: var(--color-text-faded); line-height: 1; } .wehwan-cs-label { font-family: 'Libre Baskerville', serif; font-size: 9px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-text-faded); } /* ── Guest locked state (front face) ── */ .wehwan-front-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; padding: 20px; } .wehwan-front-play-locked { display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; background: transparent !important; border: 1.5px solid var(--color-accent-dim) !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; transition: border-color 0.2s, background 0.2s !important; flex-shrink: 0; color: var(--color-accent-dim) !important; } .wehwan-front-play-locked svg { width: 16px; height: 16px; margin-left: 3px; } .wehwan-front-play-locked:hover { border-color: var(--color-accent) !important; background: rgba(200, 169, 110, 0.08) !important; color: var(--color-accent) !important; } .wehwan-front-locked-label { font-family: 'Libre Baskerville', serif; font-size: 8px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-text-faded); } /* ── Clip carousel ── */ .wehwan-clip-carousel { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: #000; } .wehwan-clip-counter { font-size: 10px; letter-spacing: 0.05em; color: rgba(200,169,110,0.65); font-family: 'Libre Baskerville', serif; white-space: nowrap; flex-shrink: 0; line-height: 1; } .wehwan-clip-viewport { flex: 1; position: relative; overflow: hidden; background: #000; } .wehwan-clip-slide { position: absolute; inset: 0; display: none; } .wehwan-clip-slide.is-active { display: block; } .wehwan-clip-video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Play button over clip */ .wehwan-clip-play-btn { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; background: rgba(0,0,0,0.35) !important; border: 1.5px solid var(--color-accent) !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; transition: background 0.2s, transform 0.2s !important; backdrop-filter: blur(2px); color: var(--color-accent) !important; } .wehwan-clip-play-btn svg { width: 14px; height: 14px; margin-left: 3px; } .wehwan-clip-play-btn:hover { background: rgba(200,169,110,0.2) !important; transform: translate(-50%, -50%) scale(1.06) !important; } .wehwan-clip-play-btn:focus { outline: none !important; background: rgba(0,0,0,0.35) !important; } .wehwan-clip-slide.is-playing .wehwan-clip-play-btn { opacity: 0 !important; pointer-events: none !important; } /* TRAILER badge */ .wehwan-trailer-tag { position: absolute; top: 8px; left: 8px; font-family: 'Libre Baskerville', serif; font-size: 7px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-bg-base); background: var(--color-accent); padding: 2px 6px; border-radius: 1px; z-index: 4; pointer-events: none; line-height: 1.6; } /* Clip info strip — clickable to flip card back */ .wehwan-clip-info { padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 3px; background: rgba(14,11,6,0.92); flex-shrink: 0; min-height: 62px; cursor: pointer; } .wehwan-clip-title-line { display: flex; align-items: baseline; gap: 4px; overflow: hidden; } .wehwan-clip-title-txt { font-family: 'Libre Baskerville', serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .wehwan-clip-epname { font-family: 'Lora', serif; font-style: italic; font-size: 10px; color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } /* Carousel prev/next nav */ .wehwan-clip-nav { position: absolute; bottom: 34px; /* above the info strip */ left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; z-index: 4; padding: 0 6px; } .wehwan-clip-prev, .wehwan-clip-next { display: flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; background: rgba(14,11,6,0.55) !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; pointer-events: auto; color: var(--color-accent-muted) !important; transition: background 0.15s, color 0.15s !important; backdrop-filter: blur(2px); } .wehwan-clip-prev:hover, .wehwan-clip-next:hover { background: rgba(14,11,6,0.85) !important; color: var(--color-accent) !important; } .wehwan-clip-prev:focus, .wehwan-clip-next:focus { outline: none !important; } /* Clip expand (fullscreen) button */ .wehwan-clip-expand-btn { position: absolute !important; top: 6px !important; right: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; padding: 0 !important; border: none !important; border-radius: 3px !important; background: rgba(14,11,6,0.6) !important; color: rgba(255,255,255,0.75) !important; cursor: pointer !important; backdrop-filter: blur(2px); z-index: 4 !important; transition: background 0.15s, color 0.15s !important; box-shadow: none !important; outline: none !important; } .wehwan-clip-expand-btn:hover { background: rgba(14,11,6,0.9) !important; color: var(--color-accent) !important; } .wehwan-clip-expand-btn:focus { outline: none !important; } /* Episodes panel heading */ .wehwan-ep-heading { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: clamp(1.1rem, 2vw, 1.45rem) !important; font-weight: 400 !important; letter-spacing: 0.25em !important; text-transform: uppercase !important; color: var(--color-accent) !important; text-align: center !important; margin: 0 0 32px !important; padding: 0 !important; border: none !important; line-height: 1.2 !important; } .wehwan-toast-close:hover { color: var(--color-accent) !important; }