/** Shopify CDN: Minification failed Line 3633:0 Unexpected "}" **/ /* ============================================================ NUTTY & NOSTALGIC — nn-theme.css CSS Custom Property System + Base Components ============================================================ */ /* CSS RESET */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Prevent horizontal overflow from expanding the layout viewport. Without this, themes that cause any horizontal overflow break position:fixed overlays on mobile (they shift right off-screen). */ html, body { overflow-x: hidden; } /* ============================================================ ROOT DEFAULTS — Miami Midnight until profile is applied ============================================================ */ :root { --color-bg: #0A0014; --color-surface: #1A0035; --color-text-primary: #FF2D87; --color-text-secondary: #00F5FF; --color-accent: #FFE500; --color-border: #FF00FF; --color-button-bg: #FF2D87; --color-button-text: #0A0014; --color-marquee-bg: #FF00FF; --color-marquee-text: #FFE500; --color-widget-bg: #1A0035; --color-card-bg: #1A0035; --border-style: 2px solid #FF00FF; --border-glow: 0 0 8px #FF00FF, 0 0 16px #FF00FF40; --font-heading: 'Press Start 2P', monospace; --font-body: 'VT323', monospace; --font-size-base: 18px; --font-size-heading: clamp(14px, 3vw, 24px); --line-height-base: 1.8; --pattern-bg: linear-gradient(transparent 0%, var(--color-bg) 100%), repeating-linear-gradient(0deg, transparent, transparent 40px, var(--color-border) 40px, var(--color-border) 41px), repeating-linear-gradient(90deg, transparent, transparent 40px, var(--color-border) 40px, var(--color-border) 41px); --pattern-size: auto; --pattern-opacity: 0.3; } /* ============================================================ PALETTE DEFINITIONS — Section 4.1 ============================================================ */ /* MIAMI MIDNIGHT */ [data-palette="miami-midnight"] { --color-bg: #0A0014; --color-surface: #1A0035; --color-text-primary: #FF2D87; --color-text-secondary: #00F5FF; --color-accent: #FFE500; --color-border: #FF00FF; --color-button-bg: #FF2D87; --color-button-text: #0A0014; --color-marquee-bg: #FF00FF; --color-marquee-text: #FFE500; --color-widget-bg: #1A0035; --color-card-bg: #1A0035; --border-style: 2px solid #FF00FF; --border-glow: 0 0 8px #FF00FF, 0 0 16px #FF00FF40; } /* STATIC DREAMS */ [data-palette="static-dreams"] { --color-bg: #0D0D1A; --color-surface: #1A1A3A; --color-text-primary: #F0F0FF; --color-text-secondary: #B388FF; --color-accent: #E040FB; --color-border: #5C6BC0; --color-button-bg: #E040FB; --color-button-text: #0D0D1A; --color-marquee-bg: #5C6BC0; --color-marquee-text: #F0F0FF; --color-widget-bg: #1A1A3A; --color-card-bg: #1A1A3A; --border-style: 2px solid #5C6BC0; --border-glow: 0 0 6px #B388FF40; } /* SLIME TIME */ [data-palette="slime-time"] { --color-bg: #FF5500; --color-surface: #FFF8F0; --color-text-primary: #2D0057; --color-text-secondary: #1A1A1A; --color-accent: #39FF14; --color-border: #FFD600; --color-button-bg: #2D0057; --color-button-text: #FFD600; --color-marquee-bg: #39FF14; --color-marquee-text: #2D0057; --color-widget-bg: #FFF8F0; --color-card-bg: #FFF8F0; --border-style: 3px solid #FFD600; --border-glow: none; } /* SATURDAY CARTOON */ [data-palette="saturday-cartoon"] { --color-bg: #1565C0; --color-surface: #FDF6E3; --color-text-primary: #E53935; --color-text-secondary: #0D1B4B; --color-accent: #FDD835; --color-border: #FF6D00; --color-button-bg: #E53935; --color-button-text: #FDD835; --color-marquee-bg: #E53935; --color-marquee-text: #FDD835; --color-widget-bg: #FDF6E3; --color-card-bg: #FDF6E3; --border-style: 3px solid #FF6D00; --border-glow: none; } /* FROSTED Y2K */ [data-palette="frosted-y2k"] { --color-bg: #EAF4FF; --color-surface: #DDEEFF; --color-text-primary: #0A1F5C; --color-text-secondary: #4A5568; --color-accent: #B8FF00; --color-border: #A8C0D6; --color-button-bg: #0A1F5C; --color-button-text: #B8FF00; --color-marquee-bg: #0A1F5C; --color-marquee-text: #B8FF00; --color-widget-bg: #DDEEFF; --color-card-bg: #DDEEFF; --border-style: 2px solid #A8C0D6; --border-glow: none; } /* ============================================================ FONT COMBO DEFINITIONS — Section 4.2 ============================================================ */ [data-font="arcade-cabinet"] { --font-heading: 'Press Start 2P', monospace; --font-body: 'VT323', monospace; --font-size-base: 18px; --font-size-heading: clamp(14px, 3vw, 24px); --line-height-base: 1.8; } [data-font="big-box-energy"] { --font-heading: 'Boogaloo', cursive; --font-body: 'Nunito', sans-serif; --font-size-base: 16px; --font-size-heading: clamp(24px, 4vw, 48px); --line-height-base: 1.6; } [data-font="saved-by-bell"] { --font-heading: 'Fredoka One', cursive; --font-body: 'Varela Round', sans-serif; --font-size-base: 16px; --font-size-heading: clamp(24px, 4vw, 48px); --line-height-base: 1.6; } [data-font="aim-profile"] { --font-heading: 'Black Han Sans', sans-serif; --font-body: 'Trebuchet MS', sans-serif; --font-size-base: 16px; --font-size-heading: clamp(20px, 3.5vw, 42px); --line-height-base: 1.5; } [data-font="y2k-system"] { --font-heading: 'Orbitron', sans-serif; --font-body: 'Exo 2', sans-serif; --font-size-base: 15px; --font-size-heading: clamp(18px, 3vw, 36px); --line-height-base: 1.6; } /* ============================================================ BACKGROUND PATTERN DEFINITIONS — Section 4.3 ============================================================ */ /* SYNTHWAVE GRID */ [data-pattern="synthwave-grid"] { --pattern-bg: linear-gradient(transparent 0%, var(--color-bg) 100%), repeating-linear-gradient( 0deg, transparent, transparent 40px, var(--color-border) 40px, var(--color-border) 41px ), repeating-linear-gradient( 90deg, transparent, transparent 40px, var(--color-border) 40px, var(--color-border) 41px ); --pattern-opacity: 0.3; } /* MEMPHIS SCATTER — SVG data URI */ [data-pattern="memphis-scatter"] { --pattern-bg: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FF2D87' cx='10' cy='10' r='3'/%3E%3Crect fill='%2300F5FF' x='30' y='5' width='8' height='3' rx='1'/%3E%3Cpolygon fill='%23FFE500' points='50,5 55,15 45,15'/%3E%3Cpath stroke='%23FF00FF' stroke-width='2' d='M5,30 Q15,20 25,30 Q35,40 45,30'/%3E%3Ccircle fill='%2339FF14' cx='50' cy='45' r='2'/%3E%3C/g%3E%3C/svg%3E"); --pattern-opacity: 0.15; } /* CHECKER RAVE */ [data-pattern="checker-rave"] { --pattern-bg: repeating-conic-gradient( var(--color-surface) 0% 25%, var(--color-bg) 0% 50% ); --pattern-size: 40px 40px; --pattern-opacity: 0.4; } /* SPLATTER ZONE — SVG data URI */ [data-pattern="splatter-zone"] { --pattern-bg: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse fill='%23FF2D87' opacity='0.3' cx='40' cy='40' rx='25' ry='18' transform='rotate(-20,40,40)'/%3E%3Cellipse fill='%2300F5FF' opacity='0.2' cx='150' cy='80' rx='30' ry='20' transform='rotate(15,150,80)'/%3E%3Cellipse fill='%23FFE500' opacity='0.25' cx='80' cy='150' rx='20' ry='28' transform='rotate(45,80,150)'/%3E%3C/svg%3E"); --pattern-opacity: 0.6; } /* STAR FIELD */ [data-pattern="star-field"] { --pattern-bg: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='white' opacity='0.8' points='20,15 21,19 25,19 22,22 23,26 20,23 17,26 18,22 15,19 19,19'/%3E%3Cpolygon fill='white' opacity='0.5' points='70,60 71,63 74,63 72,65 73,68 70,66 67,68 68,65 66,63 69,63'/%3E%3Ccircle fill='white' opacity='0.6' cx='50' cy='30' r='1.5'/%3E%3Ccircle fill='white' opacity='0.4' cx='85' cy='85' r='1'/%3E%3C/svg%3E"); --pattern-opacity: 0.7; } /* ============================================================ MYSPACE SCENE BACKGROUNDS ============================================================ */ /* MS-ROSES — deep rose bg + pink rose SVG tile */ [data-pattern="ms-roses"] { --color-bg: #14000d; --pattern-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='36' r='10' fill='%23FF1493'/%3E%3Cellipse cx='40' cy='26' rx='6' ry='9' fill='%23FFB6C1'/%3E%3Cellipse cx='31' cy='32' rx='6' ry='8' fill='%23FF69B4' transform='rotate(-45 31 32)'/%3E%3Cellipse cx='49' cy='32' rx='6' ry='8' fill='%23FF69B4' transform='rotate(45 49 32)'/%3E%3Cellipse cx='30' cy='41' rx='5' ry='8' fill='%23FFB6C1' transform='rotate(-70 30 41)'/%3E%3Cellipse cx='50' cy='41' rx='5' ry='8' fill='%23FFB6C1' transform='rotate(70 50 41)'/%3E%3Ccircle cx='40' cy='36' r='5' fill='%23C71585'/%3E%3Crect x='39' y='46' width='2' height='18' fill='%23006400' rx='1'/%3E%3Cellipse cx='35' cy='56' rx='7' ry='3' fill='%23228B22' transform='rotate(-20 35 56)'/%3E%3Cellipse cx='45' cy='62' rx='7' ry='3' fill='%23228B22' transform='rotate(20 45 62)'/%3E%3C/svg%3E"); --pattern-size: 80px 80px; --pattern-opacity: 0.55; } /* MS-HEARTS — deep violet bg + pink/magenta hearts */ [data-pattern="ms-hearts"] { --color-bg: #120018; --pattern-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M7,20 A13,13,0,0,1,30,20 A13,13,0,0,1,53,20 Q53,40,30,57 Q7,40,7,20Z' fill='%23FF1493' opacity='0.85'/%3E%3Cpath d='M2,5 A4,4,0,0,1,10,5 A4,4,0,0,1,18,5 Q18,12,10,18 Q2,12,2,5Z' fill='%23FF69B4' opacity='0.6'/%3E%3Cpath d='M44,43 A3,3,0,0,1,50,43 A3,3,0,0,1,56,43 Q56,49,50,54 Q44,49,44,43Z' fill='%23FFB6C1' opacity='0.5'/%3E%3C/svg%3E"); --pattern-size: 60px 60px; --pattern-opacity: 0.6; } /* MS-STARS — near-black bg + glitter star field with slow drift */ [data-pattern="ms-stars"] { --color-bg: #000311; --pattern-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpolygon points='60,10 64,40 94,40 70,58 79,88 60,70 41,88 50,58 26,40 56,40' fill='white' opacity='0.85'/%3E%3Cpolygon points='20,20 21.5,27 28,27 23,31 25,38 20,33 15,38 17,31 12,27 18.5,27' fill='white' opacity='0.6'/%3E%3Cpolygon points='95,75 96,80 101,80 97,83 98.5,88 95,85 91.5,88 93,83 89,80 94,80' fill='white' opacity='0.5'/%3E%3Ccircle cx='10' cy='60' r='1.5' fill='white' opacity='0.7'/%3E%3Ccircle cx='110' cy='30' r='1' fill='white' opacity='0.6'/%3E%3Ccircle cx='80' cy='100' r='2' fill='white' opacity='0.8'/%3E%3Ccircle cx='40' cy='90' r='1' fill='white' opacity='0.5'/%3E%3Ccircle cx='100' cy='55' r='1.5' fill='white' opacity='0.7'/%3E%3Cline x1='30' y1='55' x2='30' y2='65' stroke='white' stroke-width='1' opacity='0.4'/%3E%3Cline x1='25' y1='60' x2='35' y2='60' stroke='white' stroke-width='1' opacity='0.4'/%3E%3C/svg%3E"); --pattern-size: 120px 120px; --pattern-opacity: 0.8; } [data-pattern="ms-stars"] body { animation: ms-star-drift 20s linear infinite; } @keyframes ms-star-drift { from { background-position: 0 0; } to { background-position: 120px 120px; } } /* MS-SKULLS — near-black bg + bone skull tile */ [data-pattern="ms-skulls"] { --color-bg: #0a0002; --pattern-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='32' r='18' fill='%23E8E8E8' opacity='0.85'/%3E%3Ccircle cx='33' cy='28' r='5' fill='%230a0002'/%3E%3Ccircle cx='47' cy='28' r='5' fill='%230a0002'/%3E%3Cpath d='M38,36 L40,40 L42,36Z' fill='%230a0002'/%3E%3Crect x='28' y='44' width='24' height='10' rx='3' fill='%23E8E8E8' opacity='0.85'/%3E%3Cline x1='34' y1='44' x2='34' y2='54' stroke='%230a0002' stroke-width='2'/%3E%3Cline x1='40' y1='44' x2='40' y2='54' stroke='%230a0002' stroke-width='2'/%3E%3Cline x1='46' y1='44' x2='46' y2='54' stroke='%230a0002' stroke-width='2'/%3E%3C/svg%3E"); --pattern-size: 80px 80px; --pattern-opacity: 0.6; } /* MS-FLAMES — near-black bg + orange/red/yellow flame tile */ [data-pattern="ms-flames"] { --color-bg: #0a0000; --pattern-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='80'%3E%3Cpath d='M30,5 C42,18 50,30 45,45 C42,54 36,60 30,65 C24,60 18,54 15,45 C10,30 18,18 30,5Z' fill='%23FF4500' opacity='0.9'/%3E%3Cpath d='M30,15 C38,24 44,33 40,44 C38,51 34,56 30,60 C26,56 22,51 20,44 C16,33 22,24 30,15Z' fill='%23FF8C00' opacity='0.85'/%3E%3Cpath d='M30,25 C35,31 38,38 35,45 C33,49 32,52 30,56 C28,52 27,49 25,45 C22,38 25,31 30,25Z' fill='%23FFD700' opacity='0.75'/%3E%3Cellipse cx='30' cy='70' rx='12' ry='6' fill='%23FF4500' opacity='0.5'/%3E%3C/svg%3E"); --pattern-size: 60px 80px; --pattern-opacity: 0.65; } /* BODY BACKGROUND APPLICATION */ body { background-color: var(--color-bg); background-image: var(--pattern-bg); background-size: var(--pattern-size, auto); background-repeat: repeat; background-attachment: fixed; font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text-primary); padding-top: 36px; /* fixed marquee height */ } /* ============================================================ PER-THEME BODY BACKGROUNDS + FONTS Overrides palette/pattern defaults so live preview matches each era. ============================================================ */ /* SPACE JAM — deep black starfield */ [data-theme="space-jam"] body { background-color: #000011; background-image: url("data:image/svg+xml,"); background-repeat: repeat; background-size: auto; background-attachment: fixed; color: #ffffff; } /* WINDOWS 98 — classic teal desktop + 16-bit dither texture */ [data-theme="windows-98"] body { background-color: #008080; background-image: url("data:image/svg+xml,"); background-size: 4px 4px; background-repeat: repeat; background-attachment: fixed; color: #000000; } /* NICKELODEON — Nickelodeon orange */ [data-theme="nickelodeon"] body { background-color: #FF6600; background-image: none; background-attachment: fixed; color: #2D0057; } /* LISA FRANK — rainbow cheetah print (matches picker card) */ [data-theme="lisa-frank"] body { background-image: url("data:image/svg+xml,"), linear-gradient(135deg, #ff00ff 0%, #ff0080 12%, #ff6600 25%, #ffee00 38%, #00ff44 50%, #00ccff 63%, #aa00ff 76%, #ff00cc 100%); background-color: #cc00ff; background-repeat: repeat, no-repeat; background-size: 90px 70px, cover; background-attachment: fixed; color: #ffffff; } /* ARCADE — variable overrides (prevent MySpace border bleed) */ [data-theme="arcade"] { --border-style: none; --border-glow: none; --color-button-bg: #FF00FF; --color-button-text: #0A0A1A; } /* ARCADE — black with tiling Pac-Man maze */ [data-theme="arcade"] body { background-color: #000011; background-image: url("data:image/svg+xml,"); background-repeat: repeat; background-size: 200px 180px; background-attachment: fixed; color: #00F5FF; } /* MYSPACE — existing miami-midnight palette handles this */ /* ============================================================ BUTTON SYSTEM — Section 6.8 ============================================================ */ .nn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 10px 20px; font-family: var(--font-heading); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; border: var(--border-style); cursor: pointer; transition: transform 0.1s, opacity 0.1s; text-decoration: none; } .nn-btn:active { transform: scale(0.97); } .nn-btn--primary { background: var(--color-button-bg); color: var(--color-button-text); } .nn-btn--primary:hover { opacity: 0.85; } .nn-btn--secondary { background: transparent; color: var(--color-text-primary); } .nn-btn--secondary:hover { background: var(--color-accent); color: var(--color-bg); } .nn-btn--full { width: 100%; } /* ============================================================ WIDGET BASE STYLES — Section 6.4 ============================================================ */ .nn-widget { background: var(--color-widget-bg); border: var(--border-style); box-shadow: var(--border-glow); padding: 16px; margin-bottom: 16px; font-family: var(--font-body); } .nn-widget__title { font-family: var(--font-heading); font-size: 11px; color: var(--color-accent); text-transform: uppercase; letter-spacing: 2px; border-bottom: var(--border-style); padding-bottom: 8px; margin-bottom: 12px; } /* ============================================================ SECTION HEADER COMPONENT — Section 12 ============================================================ */ .nn-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .nn-section-header__title { font-family: var(--font-heading); color: var(--color-text-primary); font-size: var(--font-size-heading); text-align: center; flex: 1; } .nn-section-header__decoration { color: var(--color-accent); font-size: 20px; } /* ============================================================ BADGE COMPONENT — Section 13 ============================================================ */ .nn-badge { position: absolute; top: 12px; right: 12px; background: var(--color-accent); color: var(--color-bg); font-family: var(--font-heading); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px; border: 2px solid var(--color-text-primary); } .nn-badge--limited { background: var(--color-button-bg); color: var(--color-button-text); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* ============================================================ MARQUEE BAR — Section 6.1 ============================================================ */ .nn-marquee-bar { position: fixed; top: 0; left: 0; right: 0; height: 36px; background: var(--color-marquee-bg); overflow: hidden; z-index: 1000; display: block; } .nn-marquee-link { display: flex; align-items: center; height: 100%; text-decoration: none; } .nn-marquee-inner { display: inline-block; white-space: nowrap; animation: marquee 30s linear infinite; color: var(--color-marquee-text); font-family: var(--font-heading); font-size: 12px; line-height: 36px; padding: 0 20px; } @keyframes marquee { from { transform: translateX(100vw); } to { transform: translateX(-100%); } } .nn-marquee-bar:hover .nn-marquee-inner { animation-play-state: paused; } @media (max-width: 768px) { .nn-marquee-inner { animation-duration: 20s; } } /* ============================================================ NAVIGATION — Section 6.2 ============================================================ */ .nn-nav { position: sticky; top: 36px; z-index: 999; background: var(--color-surface); border-bottom: var(--border-style); box-shadow: var(--border-glow); } .nn-nav__inner { display: flex; align-items: center; min-height: 130px; max-width: 1200px; margin: 0 auto; padding: 8px 20px; gap: 20px; } .nn-nav__logo { flex-shrink: 0; display: flex; align-items: center; padding: 8px 0; text-decoration: none; } .nn-nav__logo img { height: 120px; width: auto; object-fit: contain; } .nn-nav__tabs { display: flex; align-items: center; list-style: none; flex: 1; justify-content: center; } .nn-nav__tab { position: relative; display: flex; align-items: center; height: 130px; padding: 0 16px; font-family: var(--font-heading); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-primary); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; } .nn-nav__tab::before { content: ''; position: absolute; inset: 0; background: var(--color-accent); opacity: 0; transition: opacity 0.15s; pointer-events: none; } .nn-nav__tab:hover::before { opacity: 0.15; } .nn-nav__tab.is-active { border-bottom-color: var(--color-accent); } .nn-nav__cart { flex-shrink: 0; display: flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; justify-content: center; font-size: 20px; color: var(--color-text-primary); text-decoration: none; } .nn-cart-badge { background: var(--color-accent); color: var(--color-button-text); font-family: var(--font-heading); font-size: 10px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } @media (max-width: 768px) { .nn-nav__inner { flex-wrap: wrap; height: auto; padding: 8px 16px 0; gap: 0; } .nn-nav__logo { flex: 1; padding-left: 12px; } .nn-nav__tabs { order: 3; width: 100%; flex: none; justify-content: center; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nn-nav__tabs::-webkit-scrollbar { display: none; } .nn-nav__tab { font-size: 11px; height: 44px; padding: 0 12px; flex-shrink: 0; } .nn-nav__cart { flex-shrink: 0; } } /* ============================================================ HERO / PROFILE BANNER — Section 6.3 ============================================================ */ .nn-hero { background: var(--color-surface); border-bottom: var(--border-style); min-height: 500px; display: flex; flex-direction: column; } /* Two-column layout lives on the body wrapper so Win98 can override independently */ .nn-hero__body { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 60px 40px; flex: 1; } .nn-hero__copy { display: flex; flex-direction: column; justify-content: center; gap: 16px; } .nn-hero__eyebrow { font-family: var(--font-body); font-size: 12px; color: var(--color-accent); letter-spacing: 2px; text-transform: uppercase; } .nn-hero__headline { font-family: var(--font-heading); font-size: var(--font-size-heading); color: var(--color-text-primary); line-height: 1.2; } .nn-mobile-br { display: none; } @media (max-width: 767px) { .nn-mobile-br { display: block; } } .nn-hero__sub { font-family: var(--font-body); font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: var(--line-height-base); } .nn-hero__cta-group { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .nn-hero__image { position: relative; display: flex; align-items: center; justify-content: center; } /* Direct single-image fallback — not used when .nn-hero__products is present */ .nn-hero__image > img { max-width: 100%; max-height: 400px; object-fit: contain; } .nn-hero__badge { position: absolute; top: 12px; right: 12px; background: var(--color-accent); color: var(--color-bg); font-family: var(--font-heading); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px; border: 2px solid var(--color-text-primary); } /* Star rating row */ .nn-hero__stars { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .nn-hero__stars-icons { color: #FFD700; font-size: 16px; letter-spacing: 3px; } .nn-hero__stars-label { font-family: var(--font-body); font-size: 15px; color: var(--color-text-secondary); } /* Two-product composition with arrow */ .nn-hero__products { display: flex; align-items: flex-end; justify-content: center; gap: 0; width: 100%; } .nn-hero__product-before, .nn-hero__product-after { flex: 0 1 auto; max-height: 300px; max-width: 42%; object-fit: contain; } .nn-hero__product-before { margin-right: -24px; } .nn-hero__arrow { flex-shrink: 0; width: 80px; align-self: center; } .nn-hero__arrow svg { width: 100%; height: auto; display: block; } @media (max-width: 600px) { .nn-hero__product-before, .nn-hero__product-after { max-height: 180px; } .nn-hero__arrow { width: 56px; } } @media (max-width: 768px) { .nn-hero { min-height: auto; } .nn-hero__body { grid-template-columns: 1fr; padding: 32px 16px; gap: 24px; } /* copy first, image below — per Jay */ .nn-hero__copy { align-items: center; text-align: center; } .nn-hero__stars { justify-content: center; } .nn-hero__cta-group { justify-content: center; } } /* ============================================================ HOMEPAGE LAYOUT — Universal + MySpace override ============================================================ */ /* Universal: centered container, single-column flow */ .nn-homepage-body { max-width: 1200px; margin: 0 auto; padding: 20px; } /* MySpace: 2-col sidebar + main */ [data-theme="myspace"] .nn-homepage-body { display: grid; grid-template-columns: 280px 1fr; gap: 20px; } /* Sidebar: hidden for all themes by default */ .nn-sidebar { display: none; } /* Sidebar: shown only for MySpace on desktop */ [data-theme="myspace"] .nn-sidebar { display: block; } .nn-homepage-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; } @media (max-width: 768px) { [data-theme="myspace"] .nn-homepage-body { display: block; } } /* ============================================================ MOBILE PROFILE CARD — Section 6.5 ============================================================ */ .nn-profile-card { display: none; /* hidden for all themes — MySpace mobile overrides below */ align-items: center; gap: 16px; background: var(--color-surface); border: var(--border-style); box-shadow: var(--border-glow); padding: 16px; margin: 8px; } @media (max-width: 768px) { [data-theme="myspace"] .nn-profile-card { display: flex; } } .nn-profile-card__avatar img { width: 60px; height: 60px; object-fit: contain; } .nn-profile-card__name { font-family: var(--font-heading); font-size: 14px; color: var(--color-text-primary); margin-bottom: 4px; } .nn-profile-card__mood { font-family: var(--font-body); font-size: var(--font-size-base); color: var(--color-text-secondary); margin-bottom: 4px; } .nn-profile-card__stats { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--font-body); font-size: 11px; color: var(--color-accent); margin-top: 4px; } /* ============================================================ MYSPACE SIDEBAR — Profile Header, Top 8, Chaotic Borders ============================================================ */ .nn-ms-profile-header { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: var(--color-surface); border: 2px solid #FF69B4; box-shadow: 0 0 8px #FF69B440; margin-bottom: 16px; } .nn-ms-avatar-wrap { position: relative; flex-shrink: 0; } .nn-ms-avatar { width: 64px !important; height: 64px !important; object-fit: contain; border: 2px solid #FF69B4; display: block; } .nn-ms-online-dot { position: absolute; bottom: 2px; right: 2px; width: 10px; height: 10px; background: #00FF00; border-radius: 50%; border: 1px solid #000; animation: ms-online-pulse 2s ease-in-out infinite; } @keyframes ms-online-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,0,0.4); } 50% { box-shadow: 0 0 0 5px rgba(0,255,0,0); } } .nn-ms-profile-info { flex: 1; min-width: 0; } .nn-ms-username { font-family: var(--font-heading); font-size: 10px; color: var(--color-accent); margin: 0 0 5px; line-height: 1.4; } .nn-ms-location, .nn-ms-last-login { font-family: var(--font-body); font-size: 12px; color: var(--color-text-secondary); margin: 0 0 3px; line-height: 1.3; } .nn-ms-status { font-family: var(--font-body); font-size: 13px; color: var(--color-text-primary); margin: 0; line-height: 1.3; } /* Mismatched borders per widget — intentionally chaotic, very MySpace */ [data-theme="myspace"] .nn-widget--about { border-color: #FF69B4; box-shadow: 0 0 8px #FF69B440; } [data-theme="myspace"] .nn-ms-top8-widget { border-color: #9400D3; box-shadow: 0 0 8px #9400D340; } [data-theme="myspace"] .nn-widget--stats { border-color: #FF4500; box-shadow: 0 0 8px #FF450040; } [data-theme="myspace"] .nn-widget--connect { border-color: #00FF7F; box-shadow: 0 0 8px #00FF7F40; } /* Widget title bar — gradient mimicking classic MySpace table headers */ [data-theme="myspace"] .nn-widget__title { background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-bg) 100%); margin: -16px -16px 12px -16px; padding: 6px 10px; font-size: 10px; letter-spacing: 1px; } /* Top 8 grid */ .nn-ms-top8__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .nn-ms-top8__friend { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; } .nn-ms-top8__friend img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid #9400D3; display: block; } .nn-ms-top8__name { font-family: var(--font-body); font-size: 10px; color: var(--color-text-secondary); text-align: center; line-height: 1.2; word-break: break-word; max-width: 100%; } .nn-ms-top8__friend:hover img { border-color: var(--color-accent); } .nn-ms-top8__friend:hover .nn-ms-top8__name { color: var(--color-accent); } /* nn-homepage-main defined in HOMEPAGE LAYOUT section above */ /* ============================================================ SECTION SUB-TITLE ============================================================ */ .nn-section-sub { font-family: var(--font-body); color: var(--color-text-secondary); font-size: var(--font-size-base); margin-bottom: 20px; text-align: center; } /* ============================================================ FEATURED PRODUCT — Section 6.6 ============================================================ */ .nn-featured-product { background: var(--color-surface); border: var(--border-style); box-shadow: var(--border-glow); padding: 24px; } .nn-featured-product__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; } .nn-featured-product__image { position: relative; } .nn-featured-product__image img { width: 100%; height: auto; object-fit: cover; display: block; } .nn-featured-product__copy { display: flex; flex-direction: column; justify-content: center; gap: 12px; } .nn-featured-product__name { font-family: var(--font-heading); font-size: clamp(16px, 2.5vw, 24px); color: var(--color-text-primary); } .nn-featured-product__desc { font-family: var(--font-body); color: var(--color-text-secondary); line-height: var(--line-height-base); } .nn-featured-product__price { font-family: var(--font-heading); color: var(--color-accent); font-size: 24px; } @media (max-width: 768px) { .nn-featured-product__inner { grid-template-columns: 1fr; } } /* ============================================================ PRODUCT GRID — Section 6.7 ============================================================ */ .nn-product-grid { background: var(--color-surface); border: var(--border-style); box-shadow: var(--border-glow); padding: 24px; } .nn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 900px) { .nn-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .nn-grid { grid-template-columns: 1fr; } } .nn-product-card { background: var(--color-card-bg); border: var(--border-style); box-shadow: var(--border-glow); transition: transform 0.15s ease, box-shadow 0.15s ease; overflow: hidden; } .nn-product-card:hover { transform: translateY(-4px); box-shadow: var(--border-glow), 0 8px 20px rgba(0,0,0,0.3); } .nn-product-card__image-wrap { aspect-ratio: 1; overflow: hidden; } .nn-product-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; display: block; } .nn-product-card:hover .nn-product-card__image-wrap img { transform: scale(1.05); } .nn-product-card__body { padding: 16px; } .nn-product-card__name { font-family: var(--font-heading); font-size: clamp(13px, 2vw, 18px); color: var(--color-text-primary); margin-bottom: 6px; } .nn-product-card__desc { font-family: var(--font-body); color: var(--color-text-secondary); font-size: 14px; line-height: 1.4; margin-bottom: 8px; } .nn-product-card__price { font-family: var(--font-heading); color: var(--color-accent); font-size: 18px; margin: 8px 0; } /* ============================================================ TRADING CARDS — Space Jam product grid skin Full build: holographic border, 3D tilt, court floor, deal-in ============================================================ */ /* Hidden on all themes by default */ .nn-card-topbar, .nn-card-stats, .nn-card-foil { display: none; } /* ── Section atmosphere: court floor ── */ [data-theme="space-jam"] .nn-product-grid { background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,215,0,0.08) 0%, transparent 70%), repeating-linear-gradient( 90deg, transparent 0px, transparent 58px, rgba(255,215,0,0.06) 58px, rgba(255,215,0,0.06) 60px ), repeating-linear-gradient( 0deg, transparent 0px, transparent 58px, rgba(255,215,0,0.04) 58px, rgba(255,215,0,0.04) 60px ), #07060F; border: none; box-shadow: none; padding: 48px 20px 60px; /* Break out of the constrained homepage column */ width: 100vw; margin-left: calc(-50vw + 50%); } /* ── Section header: card series style ── */ [data-theme="space-jam"] .nn-product-grid .nn-section-header { flex-direction: column; gap: 6px; margin-bottom: 8px; } [data-theme="space-jam"] .nn-product-grid .nn-section-header__decoration { display: none; } [data-theme="space-jam"] .nn-product-grid .nn-section-header__title { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(22px, 4vw, 42px); color: #FFD700; text-shadow: 0 0 30px rgba(255,215,0,0.4), 0 0 60px rgba(255,215,0,0.15); letter-spacing: 4px; text-transform: uppercase; } [data-theme="space-jam"] .nn-product-grid .nn-section-sub { font-family: 'Press Start 2P', monospace; font-size: 8px; color: rgba(255,215,0,0.65); letter-spacing: 3px; text-transform: uppercase; text-align: center; margin-bottom: 36px; } /* ── Card deal-in: hidden until .nn-grid.is-dealt ── */ [data-theme="space-jam"] .nn-grid .nn-product-card { opacity: 0; transform: translateY(40px) scale(0.92); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="space-jam"] .nn-grid.is-dealt .nn-product-card { opacity: 1; transform: none; } [data-theme="space-jam"] .nn-grid.is-dealt .nn-product-card:nth-child(1) { transition-delay: 0s; } [data-theme="space-jam"] .nn-grid.is-dealt .nn-product-card:nth-child(2) { transition-delay: 0.08s; } [data-theme="space-jam"] .nn-grid.is-dealt .nn-product-card:nth-child(3) { transition-delay: 0.16s; } [data-theme="space-jam"] .nn-grid.is-dealt .nn-product-card:nth-child(4) { transition-delay: 0.24s; } [data-theme="space-jam"] .nn-grid.is-dealt .nn-product-card:nth-child(5) { transition-delay: 0.32s; } [data-theme="space-jam"] .nn-grid.is-dealt .nn-product-card:nth-child(6) { transition-delay: 0.40s; } /* ── Card base ── */ [data-theme="space-jam"] .nn-product-card { position: relative; overflow: hidden; border-radius: 10px; background: linear-gradient(160deg, #0C0028 0%, #12003A 55%, #0C0028 100%); border: 2px solid #FFD700; box-shadow: 0 0 14px rgba(255,215,0,0.2), 0 8px 32px rgba(0,0,0,0.6); transform-style: preserve-3d; will-change: transform; animation: nn-holo-border 4s linear infinite; } @keyframes nn-holo-border { 0% { border-color: #FFD700; box-shadow: 0 0 14px rgba(255,215,0,0.25), 0 8px 32px rgba(0,0,0,0.6); } 25% { border-color: #FF6B6B; box-shadow: 0 0 14px rgba(255,107,107,0.25), 0 8px 32px rgba(0,0,0,0.6); } 50% { border-color: #C77DFF; box-shadow: 0 0 14px rgba(199,125,255,0.25), 0 8px 32px rgba(0,0,0,0.6); } 75% { border-color: #4CC9F0; box-shadow: 0 0 14px rgba(76,201,240,0.25), 0 8px 32px rgba(0,0,0,0.6); } 100% { border-color: #FFD700; box-shadow: 0 0 14px rgba(255,215,0,0.25), 0 8px 32px rgba(0,0,0,0.6); } } /* ── Top bar ── */ [data-theme="space-jam"] .nn-card-topbar { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px 7px; border-bottom: 1px solid rgba(255,215,0,0.15); } [data-theme="space-jam"] .nn-card-series { font-family: 'Press Start 2P', monospace; font-size: 5.5px; color: rgba(255,215,0,0.65); letter-spacing: 1px; } [data-theme="space-jam"] .nn-card-num { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: rgba(255,215,0,0.7); } /* ── Image area ── */ [data-theme="space-jam"] .nn-product-card__image-wrap { aspect-ratio: 1; background: linear-gradient(135deg, #0A0025 0%, #1C0055 50%, #0A0025 100%); border-bottom: 1px solid rgba(255,215,0,0.2); overflow: hidden; } /* Glare spot — moves via JS --glare-x / --glare-y */ [data-theme="space-jam"] .nn-card-foil { display: block; position: absolute; inset: 0; z-index: 2; background: radial-gradient( circle at var(--glare-x, 50%) var(--glare-y, -20%), rgba(255,255,255,0.18) 0%, rgba(255,215,0,0.08) 25%, transparent 60% ); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; } [data-theme="space-jam"] .nn-product-card:hover .nn-card-foil { opacity: 1; } /* ── Name ── */ [data-theme="space-jam"] .nn-product-card__body { padding: 0; } [data-theme="space-jam"] .nn-product-card__name { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(10px, 1.2vw, 13px); color: #FFD700; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; padding: 12px 10px 8px; margin: 0; text-shadow: 0 0 10px rgba(255,215,0,0.35); border-bottom: 1px solid rgba(255,215,0,0.12); } /* ── Stat bars ── */ [data-theme="space-jam"] .nn-product-card__desc { display: none; } [data-theme="space-jam"] .nn-card-stats { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 8px; } [data-theme="space-jam"] .nn-card-stat { display: flex; align-items: center; gap: 8px; } [data-theme="space-jam"] .nn-card-stat__label { font-family: 'Press Start 2P', monospace; font-size: 5px; color: rgba(255,255,255,0.65); letter-spacing: 1px; width: 54px; flex-shrink: 0; } [data-theme="space-jam"] .nn-card-stat__track { flex: 1; height: 5px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; } [data-theme="space-jam"] .nn-card-stat__fill { display: block; height: 100%; background: linear-gradient(90deg, #FFD700, #FFA500); border-radius: 3px; box-shadow: 0 0 6px rgba(255,215,0,0.5); width: 0; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); } /* Stat fills animate in when grid is dealt */ [data-theme="space-jam"] .nn-grid.is-dealt .nn-card-stat--flavor .nn-card-stat__fill { width: var(--stat-flavor, 85%); } [data-theme="space-jam"] .nn-grid.is-dealt .nn-card-stat--crunch .nn-card-stat__fill { width: var(--stat-crunch, 72%); } [data-theme="space-jam"] .nn-grid.is-dealt .nn-card-stat--nostalgia .nn-card-stat__fill { width: var(--stat-nostalgia,95%); } /* Per-card stat variations */ [data-theme="space-jam"] .nn-product-card:nth-child(1) { --stat-flavor: 88%; --stat-crunch: 74%; --stat-nostalgia: 96%; } [data-theme="space-jam"] .nn-product-card:nth-child(2) { --stat-flavor: 76%; --stat-crunch: 92%; --stat-nostalgia: 85%; } [data-theme="space-jam"] .nn-product-card:nth-child(3) { --stat-flavor: 95%; --stat-crunch: 64%; --stat-nostalgia: 90%; } [data-theme="space-jam"] .nn-product-card:nth-child(4) { --stat-flavor: 80%; --stat-crunch: 88%; --stat-nostalgia: 74%; } [data-theme="space-jam"] .nn-product-card:nth-child(5) { --stat-flavor: 92%; --stat-crunch: 78%; --stat-nostalgia: 98%; } [data-theme="space-jam"] .nn-product-card:nth-child(6) { --stat-flavor: 72%; --stat-crunch: 96%; --stat-nostalgia: 82%; } /* ── Price + CTA ── */ [data-theme="space-jam"] .nn-product-card__price { font-family: 'Press Start 2P', monospace; font-size: 12px; color: #FFD700; text-align: center; padding: 10px 16px 0; margin: 0; text-shadow: 0 0 10px rgba(255,215,0,0.4); } [data-theme="space-jam"] .nn-product-card__body .nn-btn--add-to-cart { margin: 10px 14px 14px; width: calc(100% - 28px); } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { [data-theme="space-jam"] .nn-product-card::before { animation: none; } [data-theme="space-jam"] .nn-grid .nn-product-card { opacity: 1; transform: none; transition: none; } [data-theme="space-jam"] .nn-card-stat__fill { transition: none; } } /* ============================================================ SPACE JAM — PAST MEETS PRESENT (era feature) ============================================================ */ .nn-pmp { display: none; } [data-theme="space-jam"] .nn-era-feature { background: #070604; padding: 72px 0 80px; overflow: hidden; } [data-theme="space-jam"] .nn-pmp { display: block; } /* ── Header ── */ [data-theme="space-jam"] .nn-pmp__header { text-align: center; margin-bottom: 40px; padding: 0 20px; } [data-theme="space-jam"] .nn-pmp__eyebrow { font-family: 'Press Start 2P', monospace; font-size: 8px; color: rgba(255,215,0,0.65); letter-spacing: 5px; margin: 0 0 14px; } [data-theme="space-jam"] .nn-pmp__title { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(22px, 4vw, 44px); color: #FFD700; letter-spacing: 4px; text-shadow: 0 0 30px rgba(255,215,0,0.3); margin: 0; } /* ── Stage ── */ [data-theme="space-jam"] .nn-pmp__stage { position: relative; overflow: hidden; } /* ── Direction labels ── */ [data-theme="space-jam"] .nn-pmp__dir-labels { display: flex; justify-content: space-between; padding: 0 40px; margin-bottom: 8px; font-family: 'Press Start 2P', monospace; font-size: 7px; color: rgba(255,215,0,0.5); letter-spacing: 3px; } /* ── Portal beam — starts below direction labels, floats above track bottom ── */ [data-theme="space-jam"] .nn-pmp__portal { position: absolute; top: 52px; bottom: 36px; left: 50%; transform: translateX(-50%); width: 4px; z-index: 10; pointer-events: none; } [data-theme="space-jam"] .nn-pmp__portal-beam { position: absolute; inset: 0; background: #FFD700; box-shadow: 0 0 6px #FFD700, 0 0 18px rgba(255,215,0,0.7), 0 0 40px rgba(255,215,0,0.35); } [data-theme="space-jam"] .nn-pmp__portal-shimmer { position: absolute; left: -6px; right: -6px; height: 80px; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%); animation: nn-portal-shimmer 2s linear infinite; top: -80px; } @keyframes nn-portal-shimmer { 0% { top: -80px; } 100% { top: 100%; } } /* ── Scrolling track ── */ [data-theme="space-jam"] .nn-pmp__track { display: flex; gap: 20px; padding: 20px 40px; width: max-content; animation: nn-pmp-scroll-desk 18s linear infinite; } [data-theme="space-jam"] .nn-pmp__stage:hover .nn-pmp__track { animation-play-state: paused; } @keyframes nn-pmp-scroll-desk { 0% { transform: translateX(0); } 100% { transform: translateX(-1200px); } } /* ── Individual card ── */ [data-theme="space-jam"] .nn-pmp-card { position: relative; width: 220px; height: 250px; flex-shrink: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.65); } /* Before layer — dark neutral bg, original snack */ [data-theme="space-jam"] .nn-pmp-card__before { position: absolute; inset: 0; background: #0c0a10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; isolation: isolate; /* contains ::after scanline so it can't bleed above after layer */ } /* CRT/VHS filter — makes the "past" look aged */ [data-theme="space-jam"] .nn-pmp-card__before img { width: 200px; height: 220px; object-fit: contain; filter: grayscale(35%) sepia(25%) contrast(1.05) brightness(0.92); } /* Scanline overlay on the "before" layer */ [data-theme="space-jam"] .nn-pmp-card__before::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 180deg, transparent 0px, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 4px ); pointer-events: none; z-index: 1; } /* After layer — Space Jam dark bg, N&N jar */ [data-theme="space-jam"] .nn-pmp-card__after { position: absolute; inset: 0; background: linear-gradient(160deg, #0d0b1a 0%, #070604 60%, #0a0e1a 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; clip-path: inset(0 var(--pmp-clip, 100%) 0 0); will-change: clip-path; } [data-theme="space-jam"] .nn-pmp-card__after img { width: 200px; height: 220px; object-fit: contain; } /* Labels hidden — images tell the full story */ [data-theme="space-jam"] .nn-pmp-card__label { display: none; } /* ── Mobile ── */ @media (max-width: 700px) { [data-theme="space-jam"] .nn-pmp-card { width: 160px; height: 190px; } [data-theme="space-jam"] .nn-pmp-card__before img, [data-theme="space-jam"] .nn-pmp-card__after img { width: 145px; height: 165px; } [data-theme="space-jam"] .nn-pmp__track { animation-name: nn-pmp-scroll-mob; animation-duration: 14s; } @keyframes nn-pmp-scroll-mob { 0% { transform: translateX(0); } 100% { transform: translateX(-900px); } } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { [data-theme="space-jam"] .nn-pmp__track { animation: none; } [data-theme="space-jam"] .nn-pmp__portal-shimmer { animation: none; } } /* ============================================================ COMMENTS / REVIEWS — Section 6.9 ============================================================ */ .nn-comments { padding: 60px 20px; } .nn-comments__inner { max-width: 1200px; margin: 0 auto; } .nn-comments__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 768px) { .nn-comments__grid { grid-template-columns: 1fr; } } .nn-comment-card { background: var(--color-card-bg); border: var(--border-style); box-shadow: var(--border-glow); padding: 16px; font-family: var(--font-body); } .nn-comment-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .nn-comment-card__avatar { font-size: 24px; } .nn-comment-card__handle { color: var(--color-accent); font-family: var(--font-heading); font-size: 12px; } .nn-comment-card__stars { color: var(--color-accent); margin-left: auto; } .nn-comment-card__text { color: var(--color-text-primary); font-size: 15px; line-height: 1.5; margin: 10px 0; font-style: italic; } .nn-comment-card__date { font-size: 12px; color: var(--color-text-secondary); } /* ============================================================ SPACE JAM REVIEWS — infinite scroll feed ============================================================ */ /* Hide scroll feed by default, hide default grid on Space Jam */ .nn-review-hero, .nn-review-feed { display: none; } [data-theme="space-jam"] .nn-comments__grid { display: none; } [data-theme="space-jam"] .nn-review-hero, [data-theme="space-jam"] .nn-review-feed { display: block; } /* Section bg */ [data-theme="space-jam"] .nn-comments { background: #07060F; padding: 60px 0 70px; position: relative; overflow: hidden; } /* Twinkling bg stars */ .nn-review-stars { display: none; } [data-theme="space-jam"] .nn-review-stars { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 0; } [data-theme="space-jam"] .nn-review-star { position: absolute; border-radius: 50%; animation: nn-twinkle ease-in-out infinite; } [data-theme="space-jam"] .nn-review-star--1 { width: 2px; height: 2px; top: 8%; left: 10%; background: #fff; animation-duration: 3.1s; animation-delay: 0s; } [data-theme="space-jam"] .nn-review-star--2 { width: 3px; height: 3px; top: 20%; left: 45%; background: #FFD700; animation-duration: 2.6s; animation-delay: 0.6s; } [data-theme="space-jam"] .nn-review-star--3 { width: 2px; height: 2px; top: 70%; left: 22%; background: #fff; animation-duration: 3.8s; animation-delay: 1.2s; } [data-theme="space-jam"] .nn-review-star--4 { width: 3px; height: 3px; top: 15%; left: 80%; background: #fff; animation-duration: 2.3s; animation-delay: 0.4s; } [data-theme="space-jam"] .nn-review-star--5 { width: 4px; height: 4px; top: 55%; left: 65%; background: #FFD700; animation-duration: 3.4s; animation-delay: 1.8s; } [data-theme="space-jam"] .nn-review-star--6 { width: 2px; height: 2px; top: 85%; left: 88%; background: #fff; animation-duration: 2.9s; animation-delay: 0.9s; } [data-theme="space-jam"] .nn-review-star--7 { width: 3px; height: 3px; top: 40%; left: 5%; background: #fff; animation-duration: 3.6s; animation-delay: 2.2s; } [data-theme="space-jam"] .nn-review-star--8 { width: 2px; height: 2px; top: 90%; left: 40%; background: #FFD700; animation-duration: 2.7s; animation-delay: 0.3s; } [data-theme="space-jam"] .nn-review-star--9 { width: 3px; height: 3px; top: 30%; left: 92%; background: #fff; animation-duration: 4.1s; animation-delay: 1.5s; } [data-theme="space-jam"] .nn-review-star--10 { width: 2px; height: 2px; top: 60%; left: 50%; background: #fff; animation-duration: 3.2s; animation-delay: 2.7s; } /* Make sure content sits above stars */ [data-theme="space-jam"] .nn-comments__inner { position: relative; z-index: 1; } [data-theme="space-jam"] .nn-comments__inner { max-width: none; } /* Hide default section header on Space Jam */ [data-theme="space-jam"] .nn-comments .nn-section-header { display: none; } /* ── Hero stat ── */ .nn-review-hero { text-align: center; padding: 0 20px 48px; } .nn-review-hero__number { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(56px, 10vw, 110px); color: #FFD700; line-height: 1; text-shadow: 0 0 40px rgba(255,215,0,0.5), 0 0 80px rgba(255,215,0,0.2); letter-spacing: -2px; } .nn-review-hero__stars { font-size: clamp(24px, 4vw, 40px); color: #FFD700; letter-spacing: 6px; margin: 12px 0 10px; text-shadow: 0 0 20px rgba(255,215,0,0.4); } .nn-review-hero__label { font-family: 'Press Start 2P', monospace; font-size: clamp(8px, 1.2vw, 11px); color: rgba(255,215,0,0.7); letter-spacing: 5px; text-transform: uppercase; } /* ── Scroll feed wrapper ── */ .nn-review-feed { display: flex; flex-direction: column; gap: 16px; overflow: hidden; position: relative; } /* Edge fade masks */ .nn-review-feed::before, .nn-review-feed::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none; } .nn-review-feed::before { left: 0; background: linear-gradient(90deg, #07060F 0%, transparent 100%); } .nn-review-feed::after { right: 0; background: linear-gradient(270deg, #07060F 0%, transparent 100%); } /* ── Each row ── */ .nn-review-row { overflow: hidden; } .nn-review-track { display: flex; gap: 16px; width: max-content; } .nn-review-row--left .nn-review-track { animation: nn-scroll-left 35s linear infinite; } .nn-review-row--right .nn-review-track { animation: nn-scroll-right 40s linear infinite; } .nn-review-row--left:hover .nn-review-track, .nn-review-row--right:hover .nn-review-track { animation-play-state: paused; } @keyframes nn-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes nn-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* ── Review cards ── */ .nn-review-card { flex-shrink: 0; width: 280px; background: linear-gradient(145deg, #100028 0%, #180040 100%); border: 1px solid rgba(255,215,0,0.2); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 10px; } .nn-review-card__stars { color: #FFD700; font-size: 14px; letter-spacing: 3px; text-shadow: 0 0 8px rgba(255,215,0,0.4); } .nn-review-card__text { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.88); line-height: 1.55; font-style: italic; flex: 1; } .nn-review-card__handle { font-family: 'Press Start 2P', monospace; font-size: 7px; color: rgba(255,215,0,0.75); letter-spacing: 1px; } @media (prefers-reduced-motion: reduce) { .nn-review-row--left .nn-review-track, .nn-review-row--right .nn-review-track { animation: none; } } /* ============================================================ ORIGIN STORY — Section 6.10 ============================================================ */ .nn-origin { padding: 60px 20px; background: var(--color-surface); border-top: var(--border-style); } .nn-origin__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .nn-origin__image img { width: 100%; height: auto; object-fit: cover; border: var(--border-style); box-shadow: var(--border-glow); display: block; } .nn-origin__copy { display: flex; flex-direction: column; gap: 20px; } .nn-origin__copy h2 { font-family: var(--font-heading); font-size: var(--font-size-heading); color: var(--color-text-primary); line-height: 1.3; } .nn-origin__copy p { font-family: var(--font-body); color: var(--color-text-secondary); font-size: var(--font-size-base); line-height: var(--line-height-base); } @media (max-width: 768px) { .nn-origin__inner { grid-template-columns: 1fr; gap: 32px; } } /* ============================================================ SNACK CENTER — Space Jam origin story skin ============================================================ */ /* All new elements hidden by default */ .nn-sc-header, .nn-sc-label, .nn-sc-image-badge, .nn-sc-chyron { display: none; } /* ── Section ── */ [data-theme="space-jam"] .nn-origin { background: #07060F; border-top: none; padding: 0 0 60px; } /* ── Broadcast header bar ── */ [data-theme="space-jam"] .nn-sc-header { display: flex; align-items: center; justify-content: space-between; background: #FFD700; padding: 10px 32px; margin-bottom: 40px; } [data-theme="space-jam"] .nn-sc-logo { display: flex; align-items: center; gap: 10px; } [data-theme="space-jam"] .nn-sc-logo__sc { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 32px; color: #07060F; line-height: 1; letter-spacing: -2px; } [data-theme="space-jam"] .nn-sc-logo__text { display: flex; flex-direction: column; line-height: 1; border-left: 3px solid #07060F; padding-left: 10px; } [data-theme="space-jam"] .nn-sc-logo__top { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 13px; color: #07060F; letter-spacing: 4px; } [data-theme="space-jam"] .nn-sc-logo__bottom { font-family: 'Orbitron', sans-serif; font-weight: 400; font-size: 9px; color: rgba(0,0,0,0.6); letter-spacing: 5px; } [data-theme="space-jam"] .nn-sc-live { display: flex; align-items: center; gap: 7px; background: #c00; padding: 5px 12px; border-radius: 2px; } [data-theme="space-jam"] .nn-sc-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: nn-live-pulse 1.2s ease-in-out infinite; } [data-theme="space-jam"] .nn-sc-live__label { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 11px; color: #fff; letter-spacing: 2px; } @keyframes nn-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ── Inner layout ── */ [data-theme="space-jam"] .nn-origin__inner { max-width: 1200px; padding: 0 32px; } /* ── Copy side ── */ [data-theme="space-jam"] .nn-sc-label { display: inline-block; font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 3px; color: #07060F; background: #FFD700; padding: 6px 12px; margin-bottom: 4px; } [data-theme="space-jam"] .nn-origin__copy h2 { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(20px, 3vw, 36px); color: #ffffff; line-height: 1.25; text-shadow: 0 0 40px rgba(255,215,0,0.15); } [data-theme="space-jam"] .nn-origin__copy p { color: rgba(255,255,255,0.7); font-size: clamp(14px, 1.5vw, 17px); line-height: 1.7; } /* ── Image side ── */ [data-theme="space-jam"] .nn-origin__image { position: relative; } [data-theme="space-jam"] .nn-origin__image img { border: none; box-shadow: none; display: block; width: 100%; } /* LIVE badge over image */ [data-theme="space-jam"] .nn-sc-image-badge { display: flex; align-items: center; gap: 6px; position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(0,0,0,0.75); border: 1px solid rgba(255,255,255,0.2); padding: 5px 10px; font-family: 'Press Start 2P', monospace; font-size: 8px; color: #fff; letter-spacing: 2px; backdrop-filter: blur(4px); } [data-theme="space-jam"] .nn-sc-image-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: #c00; flex-shrink: 0; animation: nn-live-pulse 1.2s ease-in-out infinite; } /* Chyron ticker at bottom of image */ [data-theme="space-jam"] .nn-sc-chyron { display: flex; align-items: stretch; position: absolute; bottom: 0; left: 0; right: 0; height: 34px; overflow: hidden; z-index: 2; } [data-theme="space-jam"] .nn-sc-chyron__tag { flex-shrink: 0; background: #FFD700; color: #07060F; font-family: 'Press Start 2P', monospace; font-size: 7px; font-weight: 700; letter-spacing: 1px; padding: 0 14px; display: flex; align-items: center; white-space: nowrap; } [data-theme="space-jam"] .nn-sc-chyron__ticker { flex: 1; background: rgba(0,0,17,0.92); display: flex; align-items: center; overflow: hidden; } [data-theme="space-jam"] .nn-sc-chyron__ticker span { display: inline-block; white-space: nowrap; font-family: 'Press Start 2P', monospace; font-size: 7px; color: #FFD700; letter-spacing: 1px; animation: nn-chyron-scroll 22s linear infinite; padding-left: 100%; } @keyframes nn-chyron-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Mobile ── */ @media (max-width: 768px) { [data-theme="space-jam"] .nn-sc-header { padding: 10px 16px; } [data-theme="space-jam"] .nn-sc-logo__sc { font-size: 24px; } [data-theme="space-jam"] .nn-origin__inner { padding: 0 16px; } [data-theme="space-jam"] .nn-sc-chyron__ticker span { font-size: 6px; } } @media (prefers-reduced-motion: reduce) { [data-theme="space-jam"] .nn-sc-chyron__ticker span { animation: none; } [data-theme="space-jam"] .nn-sc-live__dot, [data-theme="space-jam"] .nn-sc-image-badge__dot { animation: none; } } /* ============================================================ TRUST STRIP ============================================================ */ .nn-trust-strip { background: var(--color-surface); border-top: var(--border-style); border-bottom: var(--border-style); padding: 14px 20px; } .nn-trust-strip__inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; } .nn-trust-item { display: flex; align-items: center; gap: 10px; } .nn-trust-item__icon { font-size: 18px; flex-shrink: 0; } .nn-trust-item__label { font-family: var(--font-body); font-size: var(--font-size-base); color: var(--color-text-secondary); white-space: nowrap; } @media (max-width: 600px) { .nn-trust-strip__inner { gap: 16px 32px; justify-content: flex-start; } .nn-trust-item__label { font-size: 14px; white-space: normal; } } /* Space Jam: hide default trust strip, show jumbotron */ .nn-jumbotron { display: none; } [data-theme="space-jam"] .nn-trust-strip { display: none; } [data-theme="space-jam"] .nn-jumbotron { display: block; } /* Jumbotron scoreboard */ .nn-jumbotron { background: #0a0a0a; border-top: 3px solid #FFD700; border-bottom: 3px solid #FFD700; padding: 0 20px; overflow: hidden; position: relative; } /* Scanline overlay */ .nn-jumbotron::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px ); pointer-events: none; z-index: 1; } .nn-jumbotron__label { text-align: center; font-family: 'Press Start 2P', monospace; font-size: 11px; color: rgba(255, 215, 0, 0.5); letter-spacing: 6px; padding: 14px 0 18px; text-transform: uppercase; } .nn-jumbotron__stats { display: flex; align-items: stretch; justify-content: center; max-width: 900px; margin: 0 auto; padding-bottom: 18px; gap: 0; } .nn-jumbotron__stat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 36px; flex: 1; } .nn-jumbotron__stat-value { font-family: 'Press Start 2P', monospace; font-size: clamp(18px, 2.8vw, 28px); color: #FFD700; text-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.25); animation: nn-scoreboard-flicker 6s ease-in-out infinite; line-height: 1; } .nn-jumbotron__stat-label { font-family: 'Press Start 2P', monospace; font-size: clamp(6px, 0.8vw, 8px); color: rgba(255, 255, 255, 0.7); letter-spacing: 2px; text-align: center; line-height: 1.4; } .nn-jumbotron__divider { width: 2px; background: rgba(255, 215, 0, 0.2); align-self: stretch; margin: 4px 0 4px; flex-shrink: 0; } @keyframes nn-scoreboard-flicker { 0%, 92%, 96%, 100% { opacity: 1; } 93%, 95% { opacity: 0.6; } } @media (max-width: 600px) { .nn-jumbotron__stats { flex-wrap: wrap; gap: 16px 0; padding-bottom: 20px; } .nn-jumbotron__stat { flex: 0 0 50%; padding: 0 16px; } .nn-jumbotron__divider { display: none; } .nn-jumbotron__stat-value { font-size: 18px; } } /* NBC lower-third entrance — each stat slides in from the left on scroll */ .nn-jumbotron__stat { position: relative; opacity: 0; transform: translateX(-48px); transition: opacity 0.45s ease, transform 0.45s ease; } .nn-jumbotron__stat::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(255,215,0,0.12) 0%, transparent 70%); border-left: 3px solid rgba(255,215,0,0.5); opacity: 0; transform: scaleX(0); transform-origin: left; transition: opacity 0.3s ease 0.2s, transform 0.35s ease 0.15s; pointer-events: none; } .nn-jumbotron.is-visible .nn-jumbotron__stat { opacity: 1; transform: translateX(0); } .nn-jumbotron.is-visible .nn-jumbotron__stat::before { opacity: 1; transform: scaleX(1); } .nn-jumbotron.is-visible .nn-jumbotron__stat:nth-child(1) { transition-delay: 0s; } .nn-jumbotron.is-visible .nn-jumbotron__stat:nth-child(3) { transition-delay: 0.12s; } .nn-jumbotron.is-visible .nn-jumbotron__stat:nth-child(5) { transition-delay: 0.24s; } .nn-jumbotron.is-visible .nn-jumbotron__stat:nth-child(7) { transition-delay: 0.36s; } @media (prefers-reduced-motion: reduce) { .nn-jumbotron__stat-value { animation: none; } .nn-jumbotron__stat { opacity: 1; transform: none; transition: none; } .nn-jumbotron__stat::before { opacity: 1; transform: scaleX(1); transition: none; } } /* ============================================================ ERA FEATURE PLACEHOLDER — filled per-theme in Parts 4–9 ============================================================ */ .nn-era-feature { /* placeholder — each theme adds content here */ } /* ============================================================ FOOTER — Section 6.11 ============================================================ */ .nn-footer { background: var(--color-surface); border-top: var(--border-style); box-shadow: var(--border-glow); padding: 40px 20px; } .nn-footer__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto auto; gap: 40px; align-items: start; } .nn-footer__logo img { max-height: 48px; width: auto; object-fit: contain; } .nn-footer__nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .nn-footer__nav a { font-family: var(--font-heading); font-size: 12px; color: var(--color-text-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 1px; } .nn-footer__nav a:hover { color: var(--color-accent); } .nn-footer__social { display: flex; flex-direction: column; gap: 10px; } .nn-footer__social a { font-family: var(--font-body); color: var(--color-text-primary); text-decoration: none; font-size: var(--font-size-base); } .nn-footer__social a:hover { color: var(--color-accent); } .nn-footer__newsletter { display: flex; flex-direction: column; gap: 10px; } .nn-footer__newsletter p { font-family: var(--font-heading); font-size: 11px; color: var(--color-accent); text-transform: uppercase; letter-spacing: 1px; } .nn-footer__newsletter form { display: flex; gap: 8px; } .nn-footer__newsletter input[type="email"] { background: var(--color-bg); border: var(--border-style); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--font-size-base); padding: 8px 12px; min-width: 180px; outline: none; } .nn-footer__newsletter input[type="email"]:focus { box-shadow: var(--border-glow); } .nn-footer__copy-row { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; border-top: var(--border-style); padding-top: 24px; margin-top: 8px; } .nn-footer__copy, .nn-footer__copy-sub { font-family: var(--font-body); font-size: 13px; color: var(--color-text-secondary); text-align: center; } .nn-footer__copy-sub a { color: var(--color-accent); text-decoration: none; font-family: var(--font-heading); font-size: 11px; letter-spacing: 2px; } @media (max-width: 900px) { .nn-footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .nn-footer__inner { grid-template-columns: 1fr; gap: 24px; } .nn-footer__newsletter form { flex-direction: column; } .nn-footer__newsletter input[type="email"] { min-width: unset; } } /* ============================================================ SPACE JAM FOOTER — Scoreboard + Retired Banner ============================================================ */ .nn-sj-footer-top { display: none; } [data-theme="space-jam"] .nn-footer { background: #07060F; border-top: none; box-shadow: none; padding: 0 0 40px; } [data-theme="space-jam"] .nn-sj-footer-top { display: block; background: repeating-linear-gradient( 90deg, transparent 0px, transparent 58px, rgba(255,215,0,0.04) 58px, rgba(255,215,0,0.04) 60px ), repeating-linear-gradient( 0deg, transparent 0px, transparent 58px, rgba(255,215,0,0.03) 58px, rgba(255,215,0,0.03) 60px ), #07060F; padding: 60px 20px 0; } /* ── Scoreboard ── */ .nn-sj-scoreboard { max-width: 800px; margin: 0 auto 56px; text-align: center; background: #0a0a14; border: 2px solid rgba(255,215,0,0.25); border-radius: 8px; padding: 28px 32px; box-shadow: 0 0 40px rgba(255,215,0,0.08), inset 0 0 0 1px rgba(255,215,0,0.06); } .nn-sj-scoreboard__label { font-family: 'Press Start 2P', monospace; font-size: 8px; color: rgba(255,215,0,0.65); letter-spacing: 5px; margin-bottom: 20px; } .nn-sj-scoreboard__matchup { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } .nn-sj-scoreboard__team { display: flex; flex-direction: column; align-items: center; gap: 8px; } .nn-sj-scoreboard__name { font-family: 'Press Start 2P', monospace; font-size: clamp(7px, 1vw, 9px); color: rgba(255,255,255,0.8); letter-spacing: 2px; line-height: 1.4; text-align: center; } .nn-sj-scoreboard__score { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(36px, 6vw, 64px); color: #FFD700; text-shadow: 0 0 20px rgba(255,215,0,0.5), 0 0 50px rgba(255,215,0,0.2); line-height: 1; animation: nn-scoreboard-flicker 6s ease-in-out infinite; } .nn-sj-scoreboard__team--lost .nn-sj-scoreboard__score { color: rgba(255,255,255,0.35); text-shadow: none; animation: none; } .nn-sj-scoreboard__vs { font-family: 'Orbitron', sans-serif; font-size: 24px; color: rgba(255,215,0,0.5); align-self: center; margin-top: 24px; } /* ── Retired banner ── */ .nn-sj-banner { display: flex; flex-direction: column; align-items: center; padding-bottom: 56px; position: relative; } .nn-sj-banner__ropes { display: flex; justify-content: center; gap: 120px; width: 100%; max-width: 320px; } .nn-sj-banner__rope { display: block; width: 2px; height: 48px; background: linear-gradient(to bottom, rgba(255,215,0,0.15), rgba(255,215,0,0.4)); } .nn-sj-banner__flag { display: flex; flex-direction: column; align-items: center; gap: 10px; background: linear-gradient(160deg, #0C0028 0%, #1A0050 50%, #0C0028 100%); border: 2px solid rgba(255,215,0,0.35); box-shadow: 0 0 40px rgba(255,215,0,0.12), 0 20px 60px rgba(0,0,0,0.5); padding: 28px 48px 20px; min-width: 280px; text-align: center; } .nn-sj-banner__logo { height: 80px !important; width: auto; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255,215,0,0.3)); } .nn-sj-banner__season { font-family: 'Press Start 2P', monospace; font-size: 7px; color: rgba(255,215,0,0.65); letter-spacing: 3px; } /* ── Footer content overrides ── */ [data-theme="space-jam"] .nn-footer__inner { border-top: 1px solid rgba(255,215,0,0.12); padding-top: 40px; margin-top: 0; } [data-theme="space-jam"] .nn-footer__logo { display: none; } [data-theme="space-jam"] .nn-footer__nav a { color: rgba(255,255,255,0.8); font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 2px; } [data-theme="space-jam"] .nn-footer__nav a:hover { color: #FFD700; } [data-theme="space-jam"] .nn-footer__social a { color: rgba(255,255,255,0.8); } [data-theme="space-jam"] .nn-footer__social a:hover { color: #FFD700; } [data-theme="space-jam"] .nn-footer__newsletter p { color: rgba(255,215,0,0.7); font-family: 'Press Start 2P', monospace; font-size: 8px; } [data-theme="space-jam"] .nn-footer__newsletter input[type="email"] { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,215,0,0.25); color: #fff; } [data-theme="space-jam"] .nn-footer__copy-row { border-top-color: rgba(255,215,0,0.1); } [data-theme="space-jam"] .nn-footer__copy { color: rgba(255,255,255,0.6); font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: 1px; } [data-theme="space-jam"] .nn-footer__copy-sub a { color: rgba(255,215,0,0.75); } /* Mobile */ @media (max-width: 600px) { .nn-sj-scoreboard { padding: 20px 16px; } .nn-sj-scoreboard__matchup { gap: 16px; } .nn-sj-banner__flag { padding: 20px 28px 16px; min-width: 220px; } .nn-sj-banner__ropes { gap: 80px; } [data-theme="space-jam"] .nn-footer__inner { align-items: center; text-align: center; } [data-theme="space-jam"] .nn-footer__nav { justify-content: center; } [data-theme="space-jam"] .nn-footer__social { align-items: center; } [data-theme="space-jam"] .nn-footer__newsletter { align-items: center; } [data-theme="space-jam"] .nn-footer__newsletter form { flex-direction: column; align-items: center; } [data-theme="space-jam"] .nn-sj-footer-top { flex-direction: column; align-items: center; gap: 24px; padding: 24px 16px; } [data-theme="space-jam"] .nn-sj-scoreboard { width: 100%; max-width: 360px; } [data-theme="space-jam"] .nn-sj-scoreboard__matchup { flex-direction: column; align-items: center; gap: 12px; } [data-theme="space-jam"] .nn-sj-scoreboard__team { align-items: center; text-align: center; } [data-theme="space-jam"] .nn-sj-scoreboard__vs { display: none; } } /* ============================================================ CUSTOMIZER POPUP — Section 3 ============================================================ */ .nn-customizer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .nn-customizer-overlay.is-active { opacity: 1; pointer-events: auto; } .nn-customizer-panel { background: var(--color-surface); border: var(--border-style); box-shadow: var(--border-glow); max-width: 620px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 32px; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; } .nn-customizer-progress { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; } .nn-customizer-step-label { font-family: var(--font-heading); font-size: 11px; color: var(--color-accent); text-transform: uppercase; letter-spacing: 2px; } .nn-customizer-dots { display: flex; gap: 8px; } .nn-dot { width: 12px; height: 12px; border: 2px solid var(--color-accent); background: transparent; transition: background 0.2s; } .nn-dot.is-active { background: var(--color-accent); } .nn-step { display: none; } .nn-step.is-active { display: block; } .nn-step__heading { font-family: var(--font-heading); font-size: clamp(14px, 3vw, 22px); color: var(--color-text-primary); text-align: center; margin-bottom: 24px; line-height: 1.3; } .nn-options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; } .nn-options-grid--2col { grid-template-columns: repeat(2, 1fr); max-width: 400px; margin-left: auto; margin-right: auto; } .nn-option-card { background: var(--color-card-bg); border: var(--border-style); padding: 14px; cursor: pointer; transition: transform 0.1s; position: relative; text-align: center; } .nn-option-card:hover { transform: translateY(-2px); } .nn-option-card.is-selected { border: 3px solid #ffffff; outline: 2px solid var(--color-accent); } .nn-option-card__check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; background: var(--color-accent); color: var(--color-bg); font-size: 11px; display: none; align-items: center; justify-content: center; font-family: var(--font-heading); } .nn-option-card.is-selected .nn-option-card__check { display: flex; } .nn-option-card__name { font-family: var(--font-heading); font-size: 10px; color: var(--color-text-primary); margin-bottom: 4px; line-height: 1.4; } .nn-option-card__era { font-family: var(--font-body); font-size: 12px; color: var(--color-text-secondary); margin-bottom: 10px; font-style: italic; } .nn-swatch-strip { display: flex; height: 14px; gap: 2px; } .nn-swatch { flex: 1; height: 100%; } .nn-font-preview { color: var(--color-text-primary); margin-top: 4px; line-height: 1.3; min-height: 44px; display: flex; align-items: center; justify-content: center; word-break: break-word; } .nn-bg-thumb { height: 56px; background-size: auto; background-repeat: repeat; border: 1px solid rgba(255,255,255,0.15); } .nn-logo-option { padding: 20px 12px 14px; } .nn-logo-option img { max-width: 100%; max-height: 72px; object-fit: contain; margin: 0 auto 10px; display: block; } .nn-customizer-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; border-top: var(--border-style); padding-top: 20px; } /* ============================================================ THEME PICKER — Phase 5 Part 2 ============================================================ */ /* Widen panel for 3-col theme grid */ .nn-customizer-panel { max-width: 860px; } /* Per-theme panel backgrounds */ [data-theme="space-jam"] .nn-customizer-panel { background: #000011; border-color: #FFD700; color: #ffffff; } [data-theme="windows-98"] .nn-customizer-panel { background: #c0c0c0; border-color: #ffffff; color: #000000; } [data-theme="nickelodeon"] .nn-customizer-panel { background: #FF6600; border-color: #39FF14; color: #2D0057; } [data-theme="lisa-frank"] .nn-customizer-panel { background: linear-gradient(135deg, #ff00ff 0%, #ff0080 12%, #ff6600 25%, #ffee00 38%, #00ff44 50%, #00ccff 63%, #aa00ff 76%, #ff00cc 100%); border-color: #ff00cc; color: #ffffff; } [data-theme="arcade"] .nn-customizer-panel { background: #000011; border-color: #0044FF; color: #00F5FF; } [data-theme="blockbuster"] .nn-customizer-panel { background-color: #0B1730; background-image: repeating-linear-gradient(45deg, rgba(245,166,35,0.13) 0px, rgba(245,166,35,0.13) 1px, transparent 1px, transparent 14px), repeating-linear-gradient(-45deg, rgba(245,166,35,0.13) 0px, rgba(245,166,35,0.13) 1px, transparent 1px, transparent 14px); border-color: #F5A623; color: #ffffff; } /* Title + subtitle inherit panel color */ [data-theme="space-jam"] .nn-picker-title, [data-theme="space-jam"] .nn-picker-sub { color: #FFD700; } [data-theme="windows-98"] .nn-picker-title, [data-theme="windows-98"] .nn-picker-sub { color: #000080; } [data-theme="nickelodeon"] .nn-picker-title, [data-theme="nickelodeon"] .nn-picker-sub { color: #2D0057; } [data-theme="lisa-frank"] .nn-picker-title, [data-theme="lisa-frank"] .nn-picker-sub { color: #ffffff; text-shadow: 0 2px 6px rgba(0,0,0,0.6); } [data-theme="arcade"] .nn-picker-title, [data-theme="arcade"] .nn-picker-sub { color: #FFE500; } [data-theme="blockbuster"] .nn-picker-title { color: #F5A623; font-family: 'Anton', sans-serif; letter-spacing: 0.04em; } [data-theme="blockbuster"] .nn-picker-sub { color: #c8bfa8; } [data-theme="saturday-morning-cartoons"] .nn-customizer-panel { background-color: #1A4CC8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpolygon points='35,3 38.5,27 60,13 45,31 67,35 45,39 60,57 38.5,43 35,67 31.5,43 10,57 25,39 3,35 25,31 10,13 31.5,27' fill='%23ffffff' opacity='0.07'/%3E%3C/svg%3E"); background-size: 70px 70px; border-color: #FFE033; color: #ffffff; } [data-theme="saturday-morning-cartoons"] .nn-picker-title { color: #FFE033; font-family: 'Bangers', cursive; letter-spacing: 0.06em; text-shadow: 2px 2px 0 #000; } [data-theme="saturday-morning-cartoons"] .nn-picker-sub { color: rgba(255,255,255,0.85); } /* Screen visibility */ .nn-screen { display: none; } .nn-screen.is-active { display: block; } /* Header */ .nn-picker-header { text-align: center; margin-bottom: 28px; } .nn-picker-title { font-family: var(--font-heading); font-size: clamp(14px, 3vw, 22px); color: var(--color-text-primary); margin-bottom: 8px; line-height: 1.3; } .nn-picker-sub { font-family: var(--font-body); font-size: 16px; color: var(--color-text-secondary); opacity: 0.85; } /* 3-col theme grid */ .nn-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; } /* Base theme card */ .nn-theme-card { position: relative; border: 2px solid transparent; padding: 16px 12px 14px; cursor: pointer; text-align: center; border-radius: 4px; transition: transform 0.15s, box-shadow 0.15s; min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .nn-theme-card:hover { transform: translateY(-3px); } .nn-theme-card.is-selected { transform: translateY(-3px) scale(1.03); outline: 3px solid #fff; } /* Check badge */ .nn-theme-card__check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; background: #fff; color: #000; font-size: 12px; display: none; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; } .nn-theme-card.is-selected .nn-theme-card__check { display: flex; } /* Logo image */ .nn-theme-card__logo { width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .nn-theme-card__logo img { max-width: 95%; max-height: 76px; object-fit: contain; } /* Card text */ .nn-theme-card__name { font-family: var(--font-heading); font-size: 10px; line-height: 1.4; position: relative; z-index: 1; } .nn-theme-card__era { font-family: var(--font-body); font-size: 14px; opacity: 0.85; position: relative; z-index: 1; } .nn-theme-card__customize { font-family: var(--font-body); font-size: 12px; margin-top: 2px; position: relative; z-index: 1; } /* ---- Per-theme card styles ---- */ /* SPACE JAM — starfield background */ .nn-theme-card--space-jam { background: url("data:image/svg+xml,") repeat, #000011; border-color: #FFD700; box-shadow: 0 0 10px #FFD70044; } .nn-theme-card--space-jam .nn-theme-card__name { color: #FFD700; } .nn-theme-card--space-jam .nn-theme-card__era { color: #ffffff; } .nn-theme-card--space-jam .nn-theme-card__logo { height: 90px; } .nn-theme-card--space-jam .nn-theme-card__logo img { max-height: 85px; } .nn-theme-card--space-jam.is-selected { box-shadow: 0 0 20px #FFD700aa; } /* WINDOWS 98 */ .nn-theme-card--windows-98 { background: #008080; border-color: #c0c0c0; box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; } .nn-theme-card--windows-98 .nn-theme-card__name { color: #000000; font-family: 'Arial', sans-serif; font-size: 12px; font-weight: bold; } .nn-theme-card--windows-98 .nn-theme-card__era { color: #000080; font-size: 15px; } .nn-theme-card--windows-98 .nn-theme-card__logo { height: 90px; } .nn-theme-card--windows-98 .nn-theme-card__logo img { max-height: 85px; } .nn-theme-card--windows-98.is-selected { outline-color: #000080; } /* BLOCKBUSTER — carpet floor + gold glow */ .nn-theme-card--blockbuster { background-color: #0B1730; background-image: repeating-linear-gradient( 45deg, rgba(245,166,35,0.15) 0px, rgba(245,166,35,0.15) 1px, transparent 1px, transparent 14px ), repeating-linear-gradient( -45deg, rgba(245,166,35,0.15) 0px, rgba(245,166,35,0.15) 1px, transparent 1px, transparent 14px ); border-color: #F5A623; box-shadow: 0 0 10px rgba(245,166,35,0.3); } .nn-theme-card--blockbuster .nn-theme-card__name { font-family: 'Anton', sans-serif; color: #F5A623; font-size: 11px; letter-spacing: 0.06em; } .nn-theme-card--blockbuster .nn-theme-card__era { color: #c8bfa8; font-size: 13px; font-family: 'Oswald', sans-serif; letter-spacing: 0.08em; } .nn-theme-card--blockbuster .nn-theme-card__logo { height: 90px; } .nn-theme-card--blockbuster .nn-theme-card__logo img { max-height: 85px; filter: drop-shadow(0 0 10px rgba(245,166,35,0.6)); } .nn-theme-card--blockbuster.is-selected { box-shadow: 0 0 22px rgba(245,166,35,0.7); } /* NICKELODEON — solid orange, logo elevated with drop shadow */ .nn-theme-card--nickelodeon { background: #FF6600; border-color: #39FF14; box-shadow: 0 0 10px #39FF1444; } .nn-theme-card--nickelodeon .nn-theme-card__name { color: #2D0057; font-size: 11px; text-shadow: 0 1px 2px rgba(255,255,255,0.4); } .nn-theme-card--nickelodeon .nn-theme-card__era { color: #2D0057; font-size: 15px; font-style: italic; text-shadow: 0 1px 2px rgba(255,255,255,0.4); } .nn-theme-card--nickelodeon .nn-theme-card__logo { height: 90px; } .nn-theme-card--nickelodeon .nn-theme-card__logo img { max-height: 85px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55)) drop-shadow(0 2px 4px rgba(0,0,0,0.4)); } .nn-theme-card--nickelodeon.is-selected { box-shadow: 0 0 20px #39FF14aa; } /* LISA FRANK — rainbow cheetah print */ .nn-theme-card--lisa-frank { background: url("data:image/svg+xml,") repeat, linear-gradient(135deg, #ff00ff 0%, #ff0080 12%, #ff6600 25%, #ffee00 38%, #00ff44 50%, #00ccff 63%, #aa00ff 76%, #ff00cc 100%); border-color: #ff00cc; box-shadow: 0 0 10px #ff00cc44; } .nn-theme-card--lisa-frank .nn-theme-card__name { color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.8); font-size: 11px; } .nn-theme-card--lisa-frank .nn-theme-card__era { color: #ffff00; text-shadow: 0 1px 4px rgba(0,0,0,0.8); font-size: 15px; } .nn-theme-card--lisa-frank .nn-theme-card__logo { height: 90px; } .nn-theme-card--lisa-frank .nn-theme-card__logo img { max-height: 85px; } .nn-theme-card--lisa-frank.is-selected { box-shadow: 0 0 20px #ff00ccaa; } /* ARCADE — Pac-Man maze */ .nn-theme-card--arcade { background: url("data:image/svg+xml,") no-repeat center / cover, #000011; border-color: #0044FF; box-shadow: 0 0 12px #0044FFaa; } .nn-theme-card--arcade .nn-theme-card__name { color: #FFE500; font-size: 11px; text-shadow: 0 0 6px #FFE500; } .nn-theme-card--arcade .nn-theme-card__era { color: #00F5FF; font-size: 15px; text-shadow: 0 0 6px #00F5FF; } .nn-theme-card--arcade .nn-theme-card__logo { height: 120px; } .nn-theme-card--arcade .nn-theme-card__logo img { max-height: 115px; } .nn-theme-card--arcade.is-selected { box-shadow: 0 0 24px #0044FFcc; } /* MYSPACE */ .nn-theme-card--saturday-morning-cartoons { background: radial-gradient(ellipse at 60% 30%, #FFE033 0%, #FF9800 55%, #E84B1A 100%); border: 3px solid #000; box-shadow: 3px 3px 0 #000; position: relative; overflow: hidden; } .nn-theme-card--saturday-morning-cartoons::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpolygon points='30,2 33,22 52,10 38,26 58,30 38,34 52,50 33,38 30,58 27,38 8,50 22,34 2,30 22,26 8,10 27,22' fill='%23ffffff' opacity='0.10'/%3E%3C/svg%3E"); background-size: 60px 60px; pointer-events: none; } .nn-theme-card--saturday-morning-cartoons .nn-theme-card__name { font-family: 'Bangers', cursive; color: #000; font-size: 13px; letter-spacing: 0.06em; text-shadow: none; } .nn-theme-card--saturday-morning-cartoons .nn-theme-card__era { color: #000; font-size: 13px; font-weight: 700; } .nn-theme-card--saturday-morning-cartoons .nn-theme-card__logo { height: 110px; } .nn-theme-card--saturday-morning-cartoons .nn-theme-card__logo img { max-height: 105px; filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.3)); } .nn-theme-card--saturday-morning-cartoons.is-selected { box-shadow: 3px 3px 0 #000, 0 0 22px #FF9800cc; } .nn-theme-card--myspace { background: #1a1a2e; border-color: #0070c0; box-shadow: 0 0 10px #0070c044; } .nn-theme-card--myspace .nn-theme-card__name { color: #ffffff; } .nn-theme-card--myspace .nn-theme-card__era { color: #cccccc; } .nn-theme-card--myspace .nn-theme-card__customize { color: #00F5FF; font-size: 13px; opacity: 1; } .nn-theme-card--myspace .nn-theme-card__logo { height: 110px; } .nn-theme-card--myspace .nn-theme-card__logo img { max-height: 105px; } .nn-theme-card--myspace.is-selected { box-shadow: 0 0 20px #0070c0aa; } /* Go button disabled state */ #nn-btn-go:disabled { opacity: 0.4; cursor: not-allowed; } /* Mobile: 2-col grid */ @media (max-width: 600px) { .nn-theme-grid { grid-template-columns: repeat(2, 1fr); } .nn-theme-card { min-height: 150px; } } /* ============================================================ CUSTOM CURSOR SYSTEM — Section 7 Desktop / mouse only. SVG data URIs — no external files needed. Mapping: palette → cursor style ============================================================ */ @media (pointer: fine) { /* Miami Midnight → neon star */ [data-palette="miami-midnight"] * { cursor: url("data:image/svg+xml,") 16 16, auto; } /* Arcade → pixel crosshair (overrides miami-midnight star) */ [data-theme="arcade"] * { cursor: url("data:image/svg+xml,") 15 15, crosshair; } /* Static Dreams → native crosshair (VHS reticle) */ [data-palette="static-dreams"] * { cursor: crosshair; } /* Slime Time → crayon (messy / Nickelodeon) */ [data-palette="slime-time"] * { cursor: url("data:image/svg+xml,") 3 29, auto; } /* Saturday Cartoon → crayon (drawing / cartoon) */ [data-palette="saturday-cartoon"] * { cursor: url("data:image/svg+xml,") 3 29, auto; } /* Frosted Y2K → clean default */ [data-palette="frosted-y2k"] * { cursor: default; } } @media (max-width: 600px) { .nn-customizer-overlay { padding: 12px; align-items: flex-start; padding-top: 60px; } .nn-customizer-panel { padding: 20px 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; box-shadow: none !important; } .nn-options-grid { grid-template-columns: repeat(2, 1fr); } /* Theme picker cards — smaller on mobile */ .nn-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; overflow: hidden; } .nn-theme-card, .nn-theme-card:hover, .nn-theme-card.is-selected { transform: none !important; min-height: 115px; padding: 10px 6px 10px; gap: 3px; min-width: 0; width: 100%; overflow: hidden; } .nn-theme-card__logo { height: 52px; } .nn-theme-card__logo img { max-height: 50px; } /* Reset all per-theme logo overrides to the same size */ .nn-theme-card--space-jam .nn-theme-card__logo, .nn-theme-card--windows-98 .nn-theme-card__logo, .nn-theme-card--nickelodeon .nn-theme-card__logo, .nn-theme-card--lisa-frank .nn-theme-card__logo, .nn-theme-card--arcade .nn-theme-card__logo, .nn-theme-card--myspace .nn-theme-card__logo { height: 52px; } .nn-theme-card--space-jam .nn-theme-card__logo img, .nn-theme-card--windows-98 .nn-theme-card__logo img, .nn-theme-card--nickelodeon .nn-theme-card__logo img, .nn-theme-card--lisa-frank .nn-theme-card__logo img, .nn-theme-card--arcade .nn-theme-card__logo img, .nn-theme-card--myspace .nn-theme-card__logo img { max-height: 50px; } .nn-theme-card__name { font-size: 8px; } .nn-theme-card__era { font-size: 11px; } .nn-theme-card__customize { font-size: 9px; } } /* ============================================================ PAGE CONTENT LAYER — sits above nn-sj-bg meteors ============================================================ */ .nn-page-content { position: relative; z-index: 1; } /* ============================================================ SPACE JAM BACKGROUND — basketball meteors ============================================================ */ .nn-sj-bg { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } [data-theme="space-jam"] .nn-sj-bg { display: block; } /* Twinkling stars — scattered across screen, staggered twinkle */ .nn-sj-star { position: absolute; border-radius: 50%; animation: nn-twinkle ease-in-out infinite; } /* Size, position, timing for each star */ .nn-sj-star--1 { width: 3px; height: 3px; top: 10%; left: 15%; background: #fff; animation-duration: 2.8s; animation-delay: 0s; } .nn-sj-star--2 { width: 4px; height: 4px; top: 28%; left: 72%; background: #FFD700; animation-duration: 3.5s; animation-delay: 0.7s; } .nn-sj-star--3 { width: 2px; height: 2px; top: 55%; left: 30%; background: #fff; animation-duration: 2.2s; animation-delay: 1.4s; } .nn-sj-star--4 { width: 3px; height: 3px; top: 18%; left: 85%; background: #fff; animation-duration: 4s; animation-delay: 0.3s; } .nn-sj-star--5 { width: 5px; height: 5px; top: 42%; left: 55%; background: #FFD700; animation-duration: 3s; animation-delay: 2s; } .nn-sj-star--6 { width: 2px; height: 2px; top: 70%; left: 80%; background: #fff; animation-duration: 2.5s; animation-delay: 1s; } .nn-sj-star--7 { width: 3px; height: 3px; top: 80%; left: 20%; background: #fff; animation-duration: 3.8s; animation-delay: 1.8s; } .nn-sj-star--8 { width: 4px; height: 4px; top: 62%; left: 92%; background: #FFD700; animation-duration: 2.6s; animation-delay: 0.5s; } @keyframes nn-twinkle { 0%, 100% { opacity: 0.1; transform: scale(0.75); } 50% { opacity: 0.95; transform: scale(1.4); } } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { .nn-sj-star { display: none; } } /* ============================================================ SPACE JAM THEME — Phase 5 Part 4 ============================================================ */ /* CSS variable overrides — gold everything */ [data-theme="space-jam"] { --color-button-bg: #FFD700; --color-button-text: #000011; --color-accent: #FFD700; --color-border: #FFD700; --border-style: 2px solid #FFD700; --border-glow: 0 0 8px rgba(255,215,0,0.35), 0 0 20px rgba(255,215,0,0.12); --color-marquee-bg: #FFD700; --color-marquee-text: #000011; --color-text-secondary: rgba(240,240,255,0.75); } /* Marquee track visibility */ .nn-marquee--space-jam { display: none; } [data-theme="space-jam"] .nn-marquee--default { display: none; } [data-theme="space-jam"] .nn-marquee--space-jam { display: inline-block; } /* Nav — semi-transparent dark with gold border */ [data-theme="space-jam"] .nn-nav { background: rgba(0, 0, 17, 0.95); backdrop-filter: blur(8px); } /* Hero — transparent so starfield body bg shows through */ [data-theme="space-jam"] .nn-hero { background: transparent; min-height: 560px; } [data-theme="space-jam"] .nn-hero__headline { color: #ffffff; font-size: clamp(18px, 2.2vw, 30px); line-height: 1.3; } [data-theme="space-jam"] .nn-hero__stars-label { color: rgba(255, 255, 255, 0.75); } [data-theme="space-jam"] .nn-hero__sub { color: rgba(255, 255, 255, 0.8); } /* Primary button hover — slightly brighter gold */ [data-theme="space-jam"] .nn-btn--primary:hover { background: #ffe033; opacity: 1; } /* Secondary button — gold outline */ [data-theme="space-jam"] .nn-btn--secondary { color: #FFD700; border-color: #FFD700; } [data-theme="space-jam"] .nn-btn--secondary:hover { background: #FFD700; color: #000011; } } /* ============================================================ WINDOWS 98 — Phase 5 Part 5 Desktop icon layer + 16-bit dither texture ============================================================ */ /* Desktop layer — hidden by default, Win98 only */ .nn-w98-desktop { display: none; position: fixed; inset: 0; z-index: 0; pointer-events: none; } [data-theme="windows-98"] .nn-w98-desktop { display: block; } /* Icon base — stacked flex column: SVG + label */ .nn-w98-icon { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 76px; } .nn-w98-icon svg { width: 40px; height: 40px; flex-shrink: 0; filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.4)); } /* White label with black outline — authentic Win98 desktop icon text */ .nn-w98-icon__label { font-family: 'Trebuchet MS', Tahoma, sans-serif; font-size: 11px; font-weight: normal; color: #ffffff; text-align: center; line-height: 1.3; text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000; max-width: 76px; word-break: break-word; } /* Left column — anchored to left edge */ .nn-w98-icon--my-computer { top: 56px; left: 10px; } .nn-w98-icon--store { top: 158px; left: 10px; } .nn-w98-icon--aim { top: 260px; left: 10px; } /* Right column — anchored to right edge */ .nn-w98-icon--ie { top: 56px; right: 10px; } .nn-w98-icon--recycle { top: 158px; right: 10px; } .nn-w98-icon--readme { top: 260px; right: 10px; } /* Only show where there's viewport gutter room */ @media (max-width: 1199px) { [data-theme="windows-98"] .nn-w98-desktop { display: none; } } /* ============================================================ WINDOWS 98 — Marquee + Nav + Hero ============================================================ */ /* ── CSS variable overrides ─────────────────────────────── */ [data-theme="windows-98"] { --font-heading: Tahoma, 'MS Sans Serif', Arial, sans-serif; --font-body: Tahoma, 'MS Sans Serif', Arial, sans-serif; --font-size-base: 14px; --font-size-heading: clamp(18px, 2.5vw, 30px); --line-height-base: 1.4; --color-bg: #008080; --color-surface: #C0C0C0; --color-text-primary: #000000; --color-text-secondary: #333333; --color-accent: #000080; --color-border: #808080; --color-button-bg: #C0C0C0; --color-button-text: #000000; --border-style: 2px solid #808080; --border-glow: none; } /* ── Shared Win98 button chrome ─────────────────────────── */ .nn-w98-ctrl-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 14px; background: #C0C0C0; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #808080; border-bottom: 1px solid #808080; font-size: 9px; font-family: Tahoma, Arial, sans-serif; color: #000000; line-height: 1; cursor: default; user-select: none; flex-shrink: 0; } .nn-w98-ctrl-btn--close { font-size: 8px; font-weight: bold; } /* ── MARQUEE — Win98 title bar ───────────────────────────── */ .nn-marquee--windows-98 { display: none; } [data-theme="windows-98"] .nn-marquee--default { display: none; } [data-theme="windows-98"] .nn-marquee--space-jam { display: none; } [data-theme="windows-98"] .nn-marquee--windows-98 { display: inline-block; } [data-theme="windows-98"] .nn-marquee-bar { background: linear-gradient(to right, #000080 0%, #1084d0 100%); border-bottom: 1px solid #000040; /* no position override — keeps the base position:fixed intact */ } [data-theme="windows-98"] .nn-marquee-inner { font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; letter-spacing: 0; padding-right: 60px; /* clear the [_][□][X] buttons */ } /* [_][□][X] decorative title bar buttons */ .nn-w98-title-buttons { display: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); gap: 2px; z-index: 2; pointer-events: none; } /* Desktop only — buttons overlap scroll text on narrow screens */ @media (min-width: 600px) { [data-theme="windows-98"] .nn-w98-title-buttons { display: flex; } } /* ── NAV — Win98 menu bar ────────────────────────────────── */ [data-theme="windows-98"] .nn-nav { background: #C0C0C0; border-bottom: 1px solid #808080; box-shadow: inset 0 -1px 0 #FFFFFF, 0 1px 0 #404040; } [data-theme="windows-98"] .nn-nav__inner { min-height: 90px; padding: 0 12px; gap: 0; } [data-theme="windows-98"] .nn-nav__logo { padding: 4px 16px 4px 4px; } [data-theme="windows-98"] .nn-nav__logo img { height: 110px; } [data-theme="windows-98"] .nn-nav__tabs { gap: 0; } [data-theme="windows-98"] .nn-nav__tab { height: 90px; padding: 0 10px; font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif; font-size: 13px; font-weight: normal; text-transform: none; letter-spacing: 0; color: #000000; border-bottom: none; } [data-theme="windows-98"] .nn-nav__tab::before { display: none; } [data-theme="windows-98"] .nn-nav__tab:hover, [data-theme="windows-98"] .nn-nav__tab.is-active { background: #000080; color: #FFFFFF; border-bottom: none; } [data-theme="windows-98"] .nn-nav__cart { font-size: 16px; color: #000000; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; padding: 2px 10px; min-height: 28px; background: #C0C0C0; } [data-theme="windows-98"] .nn-cart-badge { background: #000080; color: #FFFFFF; font-family: Tahoma, Arial, sans-serif; } @media (max-width: 768px) { [data-theme="windows-98"] .nn-nav__inner { min-height: auto; padding: 4px 8px 0; } [data-theme="windows-98"] .nn-nav__tab { height: 36px; font-size: 12px; padding: 0 10px; } [data-theme="windows-98"] .nn-nav__logo img { height: 90px; } /* Cart: drop the elaborate bevel on mobile — too bulky */ [data-theme="windows-98"] .nn-nav__cart { border: none; background: transparent; padding: 2px 6px; min-height: 44px; } } /* ── HERO — Win98 application window ────────────────────── */ [data-theme="windows-98"] .nn-hero { display: block; max-width: 860px; margin: 20px auto; padding: 0; min-height: auto; background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; box-shadow: 3px 3px 10px rgba(0,0,0,0.45); } /* Title bar — hidden by default */ .nn-w98-titlebar { display: none; } [data-theme="windows-98"] .nn-w98-titlebar { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 3px 3px 3px 4px; background: linear-gradient(to right, #000080 0%, #1084d0 100%); } .nn-w98-titlebar__left { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; } .nn-w98-titlebar__icon { width: 14px; height: 14px; flex-shrink: 0; } .nn-w98-titlebar__text { font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; } .nn-w98-titlebar__controls { display: flex; gap: 2px; flex-shrink: 0; } /* Menu bar — hidden by default */ .nn-w98-menubar { display: none; } [data-theme="windows-98"] .nn-w98-menubar { display: flex; align-items: center; height: 22px; background: #C0C0C0; border-bottom: 1px solid #808080; padding: 0 4px; gap: 0; } .nn-w98-menuitem { font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif; font-size: 13px; color: #000000; padding: 2px 8px; cursor: default; user-select: none; border: 1px solid transparent; } .nn-w98-menuitem u { text-decoration: underline; } .nn-w98-menuitem:hover { background: #000080; color: #FFFFFF; border-color: #808080; } [data-theme="windows-98"] .nn-hero__body { background: #FFFFFF; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #DFDFDF; border-bottom: 2px solid #DFDFDF; margin: 4px; } [data-theme="windows-98"] .nn-hero__copy { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 28px 24px; background: #FFFFFF; } [data-theme="windows-98"] .nn-hero__image { display: flex; align-items: center; justify-content: center; padding: 20px; background: #F0F0F0; border-left: 1px solid #D8D8D8; } [data-theme="windows-98"] .nn-hero__headline { font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif; font-size: clamp(16px, 2vw, 26px); color: #000000; font-weight: bold; line-height: 1.3; } [data-theme="windows-98"] .nn-hero__sub { font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif; font-size: 13px; color: #333333; line-height: 1.5; } [data-theme="windows-98"] .nn-hero__stars-icons { color: #FFD700; font-size: 14px; } [data-theme="windows-98"] .nn-hero__stars-label { font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif; font-size: 12px; color: #444444; } [data-theme="windows-98"] .nn-hero__arrow svg path { stroke: #000080; } /* Win98 raised buttons */ [data-theme="windows-98"] .nn-hero .nn-btn--primary, [data-theme="windows-98"] .nn-hero .nn-btn--secondary { background: #C0C0C0; color: #000000; font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif; font-size: 13px; font-weight: bold; text-transform: none; letter-spacing: 0; border: none; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; padding: 6px 22px; min-height: 28px; } [data-theme="windows-98"] .nn-hero .nn-btn--primary:hover, [data-theme="windows-98"] .nn-hero .nn-btn--secondary:hover { background: #D4D0C8; opacity: 1; color: #000000; } [data-theme="windows-98"] .nn-hero .nn-btn--primary:active, [data-theme="windows-98"] .nn-hero .nn-btn--secondary:active { border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: none; } /* ── Mobile ──────────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="windows-98"] .nn-hero { margin: 10px 8px; } [data-theme="windows-98"] .nn-hero__body { grid-template-columns: 1fr; } [data-theme="windows-98"] .nn-hero__copy { order: 1; padding: 20px 16px; } [data-theme="windows-98"] .nn-hero__image { order: 2; border-left: none; border-top: 1px solid #D8D8D8; padding: 16px; } [data-theme="windows-98"] .nn-hero .nn-btn--primary, [data-theme="windows-98"] .nn-hero .nn-btn--secondary { font-size: 12px; padding: 6px 14px; } } /* ── TRUST STRIP — Win98 System Properties dialog ───────── */ .nn-w98-sysprops { display: none; } [data-theme="windows-98"] .nn-trust-strip { display: none; } [data-theme="windows-98"] .nn-jumbotron { display: none !important; } [data-theme="windows-98"] .nn-w98-sysprops { display: block; max-width: 440px; margin: 24px auto; background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; box-shadow: 2px 2px 8px rgba(0,0,0,0.4); font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #000000; } /* Title bar */ [data-theme="windows-98"] .nn-w98-sysprops__titlebar { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 4px; background: linear-gradient(to right, #000080, #1084d0); color: #FFFFFF; font-weight: bold; font-size: 11px; user-select: none; } [data-theme="windows-98"] .nn-w98-sysprops__titlebar-left { display: flex; align-items: center; gap: 6px; } [data-theme="windows-98"] .nn-w98-sysprops__titlebar .nn-w98-titlebar__icon { width: 14px; height: 14px; flex-shrink: 0; } /* Tabs */ [data-theme="windows-98"] .nn-w98-sysprops__tabs { display: flex; gap: 2px; padding: 4px 6px 0; background: #C0C0C0; } [data-theme="windows-98"] .nn-w98-sysprops__tab { padding: 4px 14px 3px; font-size: 11px; cursor: pointer; background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: none; position: relative; bottom: -1px; } [data-theme="windows-98"] .nn-w98-sysprops__tab--active { background: #C0C0C0; font-weight: bold; z-index: 1; border-bottom: 2px solid #C0C0C0; } /* Body content area */ [data-theme="windows-98"] .nn-w98-sysprops__body { padding: 12px; border-top: 2px solid #808080; background: #C0C0C0; } /* Logo + tagline row */ [data-theme="windows-98"] .nn-w98-sysprops__logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } [data-theme="windows-98"] .nn-w98-sysprops__logo { width: 72px; height: auto; flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-sysprops__tagline { font-size: 11px; line-height: 1.6; color: #000000; } [data-theme="windows-98"] .nn-w98-sysprops__tagline strong { font-size: 12px; } /* Sunken divider */ [data-theme="windows-98"] .nn-w98-sysprops__divider { height: 2px; margin: 10px 0; border-top: 1px solid #808080; border-bottom: 1px solid #FFFFFF; } /* Spec rows */ [data-theme="windows-98"] .nn-w98-sysprops__specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; padding: 4px 0; } [data-theme="windows-98"] .nn-w98-sysprops__label { color: #000000; white-space: nowrap; font-weight: normal; } [data-theme="windows-98"] .nn-w98-sysprops__value { font-weight: bold; color: #000080; } /* OK / Cancel / Apply buttons */ [data-theme="windows-98"] .nn-w98-sysprops__footer-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; } [data-theme="windows-98"] .nn-w98-dialog-btn { font-family: Tahoma, Arial, sans-serif; font-size: 11px; padding: 4px 18px; background: #C0C0C0; color: #000000; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; cursor: pointer; min-width: 70px; } [data-theme="windows-98"] .nn-w98-dialog-btn:active { border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; } [data-theme="windows-98"] .nn-w98-dialog-btn--apply { font-weight: bold; } /* Mobile: full width, smaller padding */ @media (max-width: 768px) { [data-theme="windows-98"] .nn-w98-sysprops { max-width: calc(100% - 24px); margin: 16px auto; } } /* ── PRODUCT GRID — Win98 Windows Explorer ───────────────── */ .nn-w98-explorer { display: none; } .nn-w98-explorer__pane { } .nn-w98-explorer__statusbar { display: none; } [data-theme="windows-98"] .nn-product-grid .nn-section-header { display: none; } [data-theme="windows-98"] .nn-product-grid .nn-section-sub { display: none; } [data-theme="windows-98"] .nn-card-topbar { display: none; } [data-theme="windows-98"] .nn-card-foil { display: none; } [data-theme="windows-98"] .nn-card-stats { display: none; } /* Show Explorer chrome */ [data-theme="windows-98"] .nn-w98-explorer { display: block; background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: none; font-family: Tahoma, Arial, sans-serif; font-size: 12px; } /* Explorer title bar */ [data-theme="windows-98"] .nn-w98-explorer__titlebar { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 4px; background: linear-gradient(to right, #000080, #1084d0); color: #FFFFFF; font-weight: bold; font-size: 11px; user-select: none; } [data-theme="windows-98"] .nn-w98-explorer__titlebar-left { display: flex; align-items: center; gap: 6px; } [data-theme="windows-98"] .nn-w98-explorer__titlebar .nn-w98-titlebar__icon { width: 14px; height: 14px; flex-shrink: 0; } /* Toolbar */ [data-theme="windows-98"] .nn-w98-explorer__toolbar { display: flex; align-items: center; gap: 4px; padding: 3px 4px; background: #C0C0C0; border-bottom: 1px solid #808080; } [data-theme="windows-98"] .nn-w98-toolbar-btn { font-family: Tahoma, Arial, sans-serif; font-size: 11px; padding: 2px 10px; background: #C0C0C0; color: #808080; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; cursor: default; white-space: nowrap; } /* Address bar */ [data-theme="windows-98"] .nn-w98-explorer__address { display: flex; align-items: center; flex: 1; margin-left: 8px; gap: 6px; min-width: 0; } [data-theme="windows-98"] .nn-w98-explorer__address-label { font-size: 11px; color: #000000; white-space: nowrap; } [data-theme="windows-98"] .nn-w98-explorer__address-bar { flex: 1; font-family: Tahoma, Arial, sans-serif; font-size: 11px; padding: 2px 6px; background: #FFFFFF; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme="windows-98"] .nn-w98-explorer__address-arrow { font-size: 9px; color: #000000; } /* Explorer pane — white content area with sunken bevel */ [data-theme="windows-98"] .nn-w98-explorer__pane { background: #FFFFFF; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; padding: 16px; } /* Status bar */ [data-theme="windows-98"] .nn-w98-explorer__statusbar { display: flex; align-items: center; height: 22px; padding: 0 8px; background: #C0C0C0; border-top: 1px solid #808080; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; font-family: Tahoma, Arial, sans-serif; font-size: 11px; color: #000000; } /* Outer section frame */ [data-theme="windows-98"] .nn-product-grid { max-width: 900px; margin: 24px auto; padding: 0; background: transparent; border-radius: 0; } /* Grid: large icon view — 4 col desktop, 2 col mobile */ [data-theme="windows-98"] .nn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: #FFFFFF; } /* Product card: Explorer large icon tile */ [data-theme="windows-98"] .nn-product-card { display: flex; flex-direction: column; align-items: center; padding: 10px 6px 8px; background: transparent; border: 2px solid transparent; border-radius: 0; box-shadow: none; cursor: pointer; text-align: center; } [data-theme="windows-98"] .nn-product-card:hover, [data-theme="windows-98"] .nn-product-card:focus-within { background: #000080; border-color: #000080; } /* Product image — folder icon style */ [data-theme="windows-98"] .nn-product-card__image-wrap { width: 80px; height: 80px; margin-bottom: 6px; background: transparent; border-radius: 0; overflow: hidden; } [data-theme="windows-98"] .nn-product-card__image-wrap img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; transform: none; } [data-theme="windows-98"] .nn-product-card:hover .nn-product-card__image-wrap img { transform: none; filter: none; } /* Name label below icon */ [data-theme="windows-98"] .nn-product-card__body { width: 100%; padding: 0; background: transparent; } [data-theme="windows-98"] .nn-product-card__name { font-family: Tahoma, Arial, sans-serif; font-size: 11px; font-weight: normal; color: #000000; line-height: 1.3; margin: 0 0 6px; } [data-theme="windows-98"] .nn-product-card:hover .nn-product-card__name { color: #FFFFFF; } [data-theme="windows-98"] .nn-product-card__desc { display: none; } [data-theme="windows-98"] .nn-product-card__price { font-family: Tahoma, Arial, sans-serif; font-size: 11px; font-weight: bold; color: #000080; margin: 0 0 6px; } [data-theme="windows-98"] .nn-product-card:hover .nn-product-card__price { color: #FFFFFF; } /* Add to Cart — Win98 dialog button style */ [data-theme="windows-98"] .nn-product-card .nn-btn--add-to-cart { font-family: Tahoma, Arial, sans-serif; font-size: 11px; padding: 3px 8px; background: #C0C0C0; color: #000000; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; border-radius: 0; width: 100%; } [data-theme="windows-98"] .nn-product-card .nn-btn--add-to-cart:active { border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; } /* Mobile: 2 columns */ @media (max-width: 768px) { [data-theme="windows-98"] .nn-grid { grid-template-columns: repeat(2, 1fr); } [data-theme="windows-98"] .nn-w98-toolbar-btn { display: none; } [data-theme="windows-98"] .nn-w98-explorer__address { margin-left: 4px; } } /* ── ERA FEATURE — Win98 AIM Instant Messenger ───────────── */ .nn-w98-aim { display: none; } [data-theme="windows-98"] .nn-pmp { display: none; } [data-theme="windows-98"] .nn-w98-aim { display: flex; flex-direction: column; align-items: center; padding: 32px 16px; } /* "You've Got Reviews!" header */ [data-theme="windows-98"] .nn-w98-aim__you-got { font-family: Tahoma, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #000080; margin-bottom: 16px; text-shadow: 1px 1px 0 #FFFFFF; } /* AIM window frame */ [data-theme="windows-98"] .nn-w98-aim__window { width: 100%; max-width: 500px; background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; box-shadow: 3px 3px 10px rgba(0,0,0,0.4); font-family: Arial, sans-serif; font-size: 12px; } /* Title bar */ [data-theme="windows-98"] .nn-w98-aim__titlebar { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 4px; background: linear-gradient(to right, #000080, #1084d0); color: #FFFFFF; font-weight: bold; font-size: 11px; user-select: none; } [data-theme="windows-98"] .nn-w98-aim__titlebar-left { display: flex; align-items: center; gap: 6px; } [data-theme="windows-98"] .nn-w98-aim__running-man { width: 10px; height: 14px; flex-shrink: 0; } /* Subheader: online indicator + AOL badge */ [data-theme="windows-98"] .nn-w98-aim__subheader { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background: #D4D0C8; border-bottom: 1px solid #808080; } [data-theme="windows-98"] .nn-w98-aim__to-row { display: flex; align-items: center; gap: 6px; } [data-theme="windows-98"] .nn-w98-aim__online-dot { width: 8px; height: 8px; border-radius: 50%; background: #00C000; flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-aim__screenname { font-weight: bold; font-size: 12px; color: #000080; } [data-theme="windows-98"] .nn-w98-aim__status-text { font-size: 11px; color: #444444; } [data-theme="windows-98"] .nn-w98-aim__aol-badge { font-family: Arial Black, Arial, sans-serif; font-size: 13px; font-weight: 900; color: #003380; letter-spacing: -1px; } /* Chat pane */ [data-theme="windows-98"] .nn-w98-aim__chat { background: #FFFFFF; padding: 8px; min-height: 200px; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; margin: 4px; overflow-y: auto; } [data-theme="windows-98"] .nn-w98-aim__system { font-size: 11px; color: #808080; font-style: italic; margin: 0 0 8px; } /* Individual messages — hidden until triggered */ [data-theme="windows-98"] .nn-w98-aim__msg { margin-bottom: 8px; line-height: 1.5; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; } [data-theme="windows-98"] .nn-w98-aim__msg.is-visible { opacity: 1; transform: none; } [data-theme="windows-98"] .nn-w98-aim__msg-name { font-weight: bold; color: #CC0000; font-size: 12px; } [data-theme="windows-98"] .nn-w98-aim__msg-time { color: #808080; font-size: 11px; margin: 0 2px; } [data-theme="windows-98"] .nn-w98-aim__msg-text { color: #000000; font-size: 12px; } /* Input area */ [data-theme="windows-98"] .nn-w98-aim__input-area { margin: 0 4px 2px; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; background: #FFFFFF; } [data-theme="windows-98"] .nn-w98-aim__input-toolbar { display: flex; gap: 2px; padding: 2px 4px; background: #D4D0C8; border-bottom: 1px solid #808080; } [data-theme="windows-98"] .nn-w98-aim__font-btn { font-family: Arial, sans-serif; font-size: 11px; padding: 1px 6px; background: #C0C0C0; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #808080; border-bottom: 1px solid #808080; cursor: default; color: #000000; } [data-theme="windows-98"] .nn-w98-aim__input-box { height: 48px; background: #FFFFFF; } /* Button row */ [data-theme="windows-98"] .nn-w98-aim__btn-row { display: flex; justify-content: flex-end; gap: 6px; padding: 4px 6px 6px; } /* Mobile */ @media (max-width: 768px) { [data-theme="windows-98"] .nn-w98-aim__window { max-width: 100%; } [data-theme="windows-98"] .nn-w98-aim__you-got { font-size: 15px; text-align: center; } } /* ── ORIGIN — Win98 Paint + Notepad windows ──────────────── */ .nn-w98-origin { display: none; } .nn-w98-paint { display: none; } .nn-w98-notepad { display: none; } [data-theme="windows-98"] .nn-origin__inner { display: none; } [data-theme="windows-98"] .nn-sc-header { display: none; } [data-theme="windows-98"] .nn-w98-origin { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; max-width: 900px; margin: 24px auto; padding: 0 16px; } /* Shared window chrome */ [data-theme="windows-98"] .nn-w98-paint, [data-theme="windows-98"] .nn-w98-notepad { display: flex; flex-direction: column; background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; box-shadow: 3px 3px 8px rgba(0,0,0,0.35); font-family: Tahoma, Arial, sans-serif; font-size: 11px; } /* Shared title bar */ [data-theme="windows-98"] .nn-w98-paint__titlebar, [data-theme="windows-98"] .nn-w98-notepad__titlebar { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 4px; background: linear-gradient(to right, #000080, #1084d0); color: #FFFFFF; font-weight: bold; font-size: 11px; user-select: none; flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-paint__titlebar-left, [data-theme="windows-98"] .nn-w98-notepad__titlebar-left { display: flex; align-items: center; gap: 6px; } [data-theme="windows-98"] .nn-w98-paint__titlebar .nn-w98-titlebar__icon, [data-theme="windows-98"] .nn-w98-notepad__titlebar .nn-w98-titlebar__icon { width: 14px; height: 14px; flex-shrink: 0; } /* Shared menu bar */ [data-theme="windows-98"] .nn-w98-paint__menubar, [data-theme="windows-98"] .nn-w98-notepad__menubar { display: flex; gap: 2px; padding: 2px 4px; background: #C0C0C0; border-bottom: 1px solid #808080; flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-paint__menubar .nn-w98-menuitem, [data-theme="windows-98"] .nn-w98-notepad__menubar .nn-w98-menuitem { font-size: 11px; padding: 2px 6px; cursor: default; color: #000000; } [data-theme="windows-98"] .nn-w98-paint__menubar .nn-w98-menuitem:hover, [data-theme="windows-98"] .nn-w98-notepad__menubar .nn-w98-menuitem:hover { background: #000080; color: #FFFFFF; } /* ── PAINT window ── */ [data-theme="windows-98"] .nn-w98-paint__body { display: flex; flex: 1; background: #808080; padding: 4px; gap: 4px; } /* Left toolbar */ [data-theme="windows-98"] .nn-w98-paint__toolbar { display: flex; flex-direction: column; gap: 2px; width: 28px; flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-paint__tool { width: 26px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 13px; background: #C0C0C0; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #808080; border-bottom: 1px solid #808080; cursor: default; color: #000000; } /* Canvas area — the "painted" image */ [data-theme="windows-98"] .nn-w98-paint__canvas { flex: 1; background: #FFFFFF; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; overflow: hidden; position: relative; } [data-theme="windows-98"] .nn-w98-paint__img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.5) contrast(1.15) brightness(0.92) hue-rotate(5deg); image-rendering: pixelated; } /* Canvas texture overlay — painted grain */ [data-theme="windows-98"] .nn-w98-paint__canvas::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='rgba(0,0,0,0.04)'/%3E%3Crect width='1' height='1' x='2' y='2' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E"); pointer-events: none; mix-blend-mode: overlay; } /* Color palette strip */ [data-theme="windows-98"] .nn-w98-paint__palette { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: #C0C0C0; border-top: 1px solid #808080; flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-paint__palette-swatch { width: 14px; height: 14px; border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; cursor: default; } /* ── NOTEPAD window ── */ [data-theme="windows-98"] .nn-w98-notepad__body { background: #FFFFFF; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; margin: 4px; padding: 8px 10px; font-family: 'Courier New', Courier, monospace; font-size: 12px; color: #000000; line-height: 1.6; min-height: 200px; } [data-theme="windows-98"] .nn-w98-notepad__line { margin: 0; white-space: pre-wrap; } [data-theme="windows-98"] .nn-w98-notepad__line--heading { font-weight: bold; text-decoration: underline; } [data-theme="windows-98"] .nn-w98-notepad__line--link a { color: #000080; font-family: 'Courier New', Courier, monospace; font-size: 12px; } /* Blinking cursor */ [data-theme="windows-98"] .nn-w98-notepad__cursor { animation: nn-blink 1s step-end infinite; color: #000000; } @keyframes nn-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Mobile: stack vertically */ @media (max-width: 768px) { [data-theme="windows-98"] .nn-w98-origin { grid-template-columns: 1fr; padding: 0 12px; } } /* ── COMMENTS — Win98 Outlook Express ───────────────────── */ .nn-w98-outlook { display: none; } [data-theme="windows-98"] .nn-review-stars { display: none; } [data-theme="windows-98"] .nn-review-hero { display: none; } [data-theme="windows-98"] .nn-review-feed { display: none; } [data-theme="windows-98"] .nn-comments__grid { display: none; } [data-theme="windows-98"] .nn-comments .nn-section-header { display: none; } [data-theme="windows-98"] .nn-w98-outlook { display: flex; flex-direction: column; align-items: center; padding: 32px 16px; } /* "You've Got Mail" header */ [data-theme="windows-98"] .nn-w98-outlook__you-got { font-family: Tahoma, Arial, sans-serif; font-size: 16px; font-weight: bold; color: #000080; margin-bottom: 16px; text-shadow: 1px 1px 0 #FFFFFF; text-align: center; } /* Window frame */ [data-theme="windows-98"] .nn-w98-outlook__window { width: 100%; max-width: 760px; background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; box-shadow: 3px 3px 10px rgba(0,0,0,0.4); font-family: Tahoma, Arial, sans-serif; font-size: 12px; } /* Title bar */ [data-theme="windows-98"] .nn-w98-outlook__titlebar { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 4px; background: linear-gradient(to right, #000080, #1084d0); color: #FFFFFF; font-weight: bold; font-size: 11px; user-select: none; } [data-theme="windows-98"] .nn-w98-outlook__titlebar-left { display: flex; align-items: center; gap: 6px; } [data-theme="windows-98"] .nn-w98-outlook__titlebar .nn-w98-titlebar__icon { width: 14px; height: 14px; flex-shrink: 0; } /* Menu bar */ [data-theme="windows-98"] .nn-w98-outlook__menubar { display: flex; gap: 2px; padding: 2px 4px; background: #C0C0C0; border-bottom: 1px solid #808080; } [data-theme="windows-98"] .nn-w98-outlook__menubar .nn-w98-menuitem { font-size: 11px; padding: 2px 6px; cursor: default; color: #000000; } [data-theme="windows-98"] .nn-w98-outlook__menubar .nn-w98-menuitem:hover { background: #000080; color: #FFFFFF; } /* Toolbar */ [data-theme="windows-98"] .nn-w98-outlook__toolbar { display: flex; align-items: center; gap: 4px; padding: 3px 4px; background: #C0C0C0; border-bottom: 1px solid #808080; } [data-theme="windows-98"] .nn-w98-outlook__toolbar-sep { width: 1px; height: 20px; background: #808080; margin: 0 4px; } /* Body: folder tree + right pane */ [data-theme="windows-98"] .nn-w98-outlook__body { display: grid; grid-template-columns: 160px 1fr; height: 340px; } /* Folder tree */ [data-theme="windows-98"] .nn-w98-outlook__folders { border-right: 2px solid #808080; background: #FFFFFF; overflow-y: auto; font-size: 11px; } [data-theme="windows-98"] .nn-w98-outlook__folder-header { padding: 4px 8px; font-weight: bold; font-size: 11px; color: #000080; border-bottom: 1px solid #C0C0C0; } [data-theme="windows-98"] .nn-w98-outlook__folder { display: flex; align-items: center; justify-content: space-between; padding: 3px 8px 3px 16px; cursor: default; color: #000000; font-size: 11px; } [data-theme="windows-98"] .nn-w98-outlook__folder--active { background: #000080; color: #FFFFFF; } [data-theme="windows-98"] .nn-w98-outlook__folder-badge { background: #000080; color: #FFFFFF; font-size: 10px; font-weight: bold; padding: 0 4px; border-radius: 2px; } [data-theme="windows-98"] .nn-w98-outlook__folder--active .nn-w98-outlook__folder-badge { background: #FFFFFF; color: #000080; } /* Right pane */ [data-theme="windows-98"] .nn-w98-outlook__right { display: flex; flex-direction: column; overflow: hidden; } /* Column headers */ [data-theme="windows-98"] .nn-w98-outlook__col-headers { display: grid; grid-template-columns: 120px 1fr 80px; background: #C0C0C0; border-bottom: 1px solid #808080; flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-outlook__col { font-size: 11px; font-weight: bold; padding: 3px 8px; border-right: 1px solid #808080; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #808080; cursor: default; } /* Message list */ [data-theme="windows-98"] .nn-w98-outlook__msglist { flex: 1; overflow-y: auto; background: #FFFFFF; border-bottom: 2px solid #808080; max-height: 140px; } [data-theme="windows-98"] .nn-w98-outlook__msg { display: grid; grid-template-columns: 120px 1fr 80px; padding: 3px 0; border-bottom: 1px solid #E0E0E0; cursor: default; font-size: 11px; } [data-theme="windows-98"] .nn-w98-outlook__msg--unread { font-weight: bold; } [data-theme="windows-98"] .nn-w98-outlook__msg--selected { background: #000080; color: #FFFFFF; } [data-theme="windows-98"] .nn-w98-outlook__msg-from, [data-theme="windows-98"] .nn-w98-outlook__msg-subject, [data-theme="windows-98"] .nn-w98-outlook__msg-date { padding: 2px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Preview pane */ [data-theme="windows-98"] .nn-w98-outlook__preview { flex: 1; background: #FFFFFF; overflow-y: auto; border-top: 2px solid #C0C0C0; } [data-theme="windows-98"] .nn-w98-outlook__preview-header { padding: 8px 10px 6px; border-bottom: 1px solid #C0C0C0; background: #F0F0F0; } [data-theme="windows-98"] .nn-w98-outlook__preview-row { font-size: 11px; color: #000000; line-height: 1.6; } [data-theme="windows-98"] .nn-w98-outlook__preview-body { padding: 10px; font-size: 12px; font-family: Arial, sans-serif; color: #000000; line-height: 1.6; } /* Status bar */ [data-theme="windows-98"] .nn-w98-outlook__statusbar { padding: 3px 8px; font-size: 11px; color: #000000; border-top: 1px solid #808080; background: #C0C0C0; } /* Mobile: hide folder tree, stack msg list + preview */ @media (max-width: 768px) { [data-theme="windows-98"] .nn-w98-outlook__body { grid-template-columns: 1fr; height: auto; } [data-theme="windows-98"] .nn-w98-outlook__folders { display: none; } [data-theme="windows-98"] .nn-w98-outlook__msglist { max-height: 160px; } [data-theme="windows-98"] .nn-w98-outlook__col-headers { grid-template-columns: 90px 1fr 60px; } [data-theme="windows-98"] .nn-w98-outlook__msg { grid-template-columns: 90px 1fr 60px; } [data-theme="windows-98"] .nn-w98-outlook__toolbar .nn-w98-toolbar-btn { font-size: 10px; padding: 2px 6px; } } /* ── FOOTER — Win98 Taskbar ──────────────────────────────── */ .nn-w98-footer { display: none; } .nn-w98-taskbar { display: none; } [data-theme="windows-98"] .nn-sj-footer-top { display: none; } [data-theme="windows-98"] .nn-footer__inner { display: none; } [data-theme="windows-98"] .nn-footer { background: #008080; padding: 0; } [data-theme="windows-98"] .nn-w98-footer { display: flex; flex-direction: column; } /* Footer content area */ [data-theme="windows-98"] .nn-w98-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px 24px 24px; background: #008080; font-family: Tahoma, Arial, sans-serif; } [data-theme="windows-98"] .nn-w98-footer__logo-img { height: 80px; width: auto; } [data-theme="windows-98"] .nn-w98-footer__nav, [data-theme="windows-98"] .nn-w98-footer__social { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } /* Nav links as Win98 bevel buttons */ [data-theme="windows-98"] .nn-w98-nav-btn { font-family: Tahoma, Arial, sans-serif; font-size: 11px; padding: 4px 16px; background: #C0C0C0; color: #000000; text-decoration: none; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; cursor: pointer; display: inline-block; } [data-theme="windows-98"] .nn-w98-nav-btn:hover { background: #D4D0C8; } [data-theme="windows-98"] .nn-w98-nav-btn:active { border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; } /* Newsletter */ [data-theme="windows-98"] .nn-w98-footer__newsletter { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 360px; } [data-theme="windows-98"] .nn-w98-footer__newsletter-label { font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #FFFFFF; margin: 0; text-shadow: 1px 1px 0 rgba(0,0,0,0.4); } [data-theme="windows-98"] .nn-w98-footer__newsletter-form { display: flex; gap: 6px; width: 100%; } [data-theme="windows-98"] .nn-w98-input { flex: 1; font-family: Tahoma, Arial, sans-serif; font-size: 11px; padding: 4px 8px; background: #FFFFFF; color: #000000; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; outline: none; min-width: 0; } [data-theme="windows-98"] .nn-w98-footer__copy { font-family: Tahoma, Arial, sans-serif; font-size: 11px; color: rgba(255,255,255,0.75); margin: 0; text-align: center; } /* ── TASKBAR ── */ [data-theme="windows-98"] .nn-w98-taskbar { display: flex; align-items: center; height: 36px; background: #C0C0C0; border-top: 2px solid #FFFFFF; padding: 0 4px; gap: 4px; flex-shrink: 0; } /* Start button */ [data-theme="windows-98"] .nn-w98-start-btn { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; font-family: Tahoma, Arial, sans-serif; font-size: 12px; font-weight: bold; background: #C0C0C0; color: #000000; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; cursor: pointer; flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-start-btn:active { border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; } [data-theme="windows-98"] .nn-w98-start-btn__flag { width: 16px; height: 16px; flex-shrink: 0; } /* Separator */ [data-theme="windows-98"] .nn-w98-taskbar__sep { width: 2px; height: 26px; border-left: 1px solid #808080; border-right: 1px solid #FFFFFF; flex-shrink: 0; } /* Running programs */ [data-theme="windows-98"] .nn-w98-taskbar__programs { display: flex; gap: 4px; flex: 1; overflow: hidden; } [data-theme="windows-98"] .nn-w98-taskbar__program { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; font-family: Tahoma, Arial, sans-serif; font-size: 11px; background: #C0C0C0; color: #000000; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; cursor: default; max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } [data-theme="windows-98"] .nn-w98-taskbar__program--active { background: #D4D0C8; font-weight: bold; } /* System tray */ [data-theme="windows-98"] .nn-w98-taskbar__tray { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-taskbar__tray-icon { font-size: 13px; cursor: default; } [data-theme="windows-98"] .nn-w98-taskbar__clock { font-family: Tahoma, Arial, sans-serif; font-size: 11px; color: #000000; cursor: default; white-space: nowrap; } /* Mobile: hide running programs, keep start + tray */ @media (max-width: 768px) { [data-theme="windows-98"] .nn-w98-taskbar__programs { display: none; } [data-theme="windows-98"] .nn-w98-taskbar { gap: 8px; } } /* ── ERA FEATURE — Win98 MS Paint (interactive) ─────────── */ .nn-w98-mspaint { display: none; } [data-theme="windows-98"] .nn-w98-mspaint { display: flex; flex-direction: column; align-items: center; padding: 32px 16px; } [data-theme="windows-98"] .nn-w98-mspaint__prompt { font-family: Tahoma, Arial, sans-serif; font-size: 16px; font-weight: bold; color: #000080; margin-bottom: 16px; text-shadow: 1px 1px 0 #FFFFFF; text-align: center; } [data-theme="windows-98"] .nn-w98-mspaint__window { width: 100%; max-width: 600px; background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; box-shadow: 3px 3px 10px rgba(0,0,0,0.4); font-family: Tahoma, Arial, sans-serif; font-size: 11px; position: relative; } [data-theme="windows-98"] .nn-w98-mspaint__titlebar { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 4px; background: linear-gradient(to right, #000080, #1084d0); color: #FFFFFF; font-weight: bold; font-size: 11px; user-select: none; } [data-theme="windows-98"] .nn-w98-mspaint__titlebar-left { display: flex; align-items: center; gap: 6px; } [data-theme="windows-98"] .nn-w98-mspaint__titlebar .nn-w98-titlebar__icon { width: 14px; height: 14px; } [data-theme="windows-98"] .nn-w98-mspaint__menubar { display: flex; gap: 2px; padding: 2px 4px; background: #C0C0C0; border-bottom: 1px solid #808080; } [data-theme="windows-98"] .nn-w98-mspaint__menubar .nn-w98-menuitem { font-size: 11px; padding: 2px 6px; cursor: default; color: #000000; } [data-theme="windows-98"] .nn-w98-mspaint__menubar .nn-w98-menuitem:hover { background: #000080; color: #FFFFFF; } /* Workspace: toolbar + canvas */ [data-theme="windows-98"] .nn-w98-mspaint__workspace { display: flex; background: #808080; padding: 4px; gap: 4px; } /* Tool sidebar */ [data-theme="windows-98"] .nn-w98-mspaint__toolbar { display: flex; flex-direction: column; gap: 2px; width: 32px; flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-paint-tool, [data-theme="windows-98"] .nn-w98-paint-size { width: 30px; height: 28px; display: flex; align-items: center; justify-content: center; background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; cursor: pointer; font-size: 14px; color: #000000; padding: 0; } [data-theme="windows-98"] .nn-w98-paint-tool--active, [data-theme="windows-98"] .nn-w98-paint-size--active { border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; background: #D4D0C8; } [data-theme="windows-98"] .nn-w98-paint-size { font-size: 8px; } [data-theme="windows-98"] .nn-w98-paint-size[data-size="6"] { font-size: 12px; } [data-theme="windows-98"] .nn-w98-paint-size[data-size="12"] { font-size: 18px; } [data-theme="windows-98"] .nn-w98-paint-tool__sep { height: 6px; } /* Canvas area */ [data-theme="windows-98"] .nn-w98-mspaint__canvas-wrap { flex: 1; background: #FFFFFF; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; overflow: hidden; cursor: crosshair; } [data-theme="windows-98"] #nn-paint-canvas { display: block; width: 100%; height: 300px; touch-action: none; } /* Color bar */ [data-theme="windows-98"] .nn-w98-mspaint__colorbar { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: #C0C0C0; border-top: 1px solid #808080; } [data-theme="windows-98"] .nn-w98-mspaint__active-colors { position: relative; width: 30px; height: 26px; flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-mspaint__color-fg { position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: #000000; border: 2px solid #808080; z-index: 2; } [data-theme="windows-98"] .nn-w98-mspaint__color-bg { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; background: #FFFFFF; border: 2px solid #808080; z-index: 1; } [data-theme="windows-98"] .nn-w98-mspaint__palette { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; } [data-theme="windows-98"] .nn-w98-paint-color { width: 16px; height: 16px; border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; cursor: pointer; flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-paint-color:hover { outline: 1px solid #000000; } /* Actions row */ [data-theme="windows-98"] .nn-w98-mspaint__actions { display: flex; justify-content: flex-end; gap: 6px; padding: 6px 8px; border-top: 1px solid #808080; } /* Success / error dialog overlay */ [data-theme="windows-98"] .nn-w98-mspaint__dialog { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.3); align-items: center; justify-content: center; z-index: 10; } [data-theme="windows-98"] .nn-w98-mspaint__dialog[aria-hidden="false"] { display: flex; } [data-theme="windows-98"] .nn-w98-mspaint__dialog-window { background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; min-width: 240px; box-shadow: 3px 3px 8px rgba(0,0,0,0.4); } [data-theme="windows-98"] .nn-w98-mspaint__dialog-titlebar { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 6px; background: linear-gradient(to right, #000080, #1084d0); color: #FFFFFF; font-weight: bold; font-size: 11px; } [data-theme="windows-98"] .nn-w98-mspaint__dialog-titlebar--error { background: linear-gradient(to right, #800000, #CC0000); } [data-theme="windows-98"] .nn-w98-mspaint__dialog-body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 24px; font-family: Tahoma, Arial, sans-serif; font-size: 12px; text-align: center; } [data-theme="windows-98"] .nn-w98-mspaint__dialog-icon { font-size: 28px; color: #008000; } [data-theme="windows-98"] .nn-w98-mspaint__dialog-icon--error { color: #CC0000; } [data-theme="windows-98"] .nn-w98-mspaint__dialog-sub { font-size: 11px; color: #444444; margin: 0; } /* Comments: show AIM, hide Outlook */ [data-theme="windows-98"] .nn-w98-outlook { display: none !important; } [data-theme="windows-98"] .nn-comments .nn-w98-aim { display: flex; flex-direction: column; align-items: center; padding: 32px 16px; } /* Mobile paint */ @media (max-width: 768px) { [data-theme="windows-98"] #nn-paint-canvas { height: 220px; } [data-theme="windows-98"] .nn-w98-mspaint__window { max-width: 100%; } } /* ── ERA FEATURE — Win98 Display Properties ──────────────── */ .nn-w98-displayprops { display: none; } [data-theme="windows-98"] .nn-w98-mspaint { display: flex; flex-direction: column; align-items: center; padding: 32px 16px; } [data-theme="windows-98"] .nn-w98-displayprops { display: flex; flex-direction: column; align-items: center; padding: 32px 16px; } [data-theme="windows-98"] .nn-w98-dp__prompt { font-family: Tahoma, Arial, sans-serif; font-size: 16px; font-weight: bold; color: #000080; margin-bottom: 16px; text-shadow: 1px 1px 0 #FFFFFF; } /* Dialog window */ [data-theme="windows-98"] .nn-w98-dp__window { width: 100%; max-width: 100%; background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; box-shadow: 3px 3px 10px rgba(0,0,0,0.4); font-family: Tahoma, Arial, sans-serif; font-size: 11px; } /* Title bar */ [data-theme="windows-98"] .nn-w98-dp__titlebar { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 4px; background: linear-gradient(to right, #000080, #1084d0); color: #FFFFFF; font-weight: bold; font-size: 11px; user-select: none; } [data-theme="windows-98"] .nn-w98-dp__titlebar-left { display: flex; align-items: center; gap: 6px; } [data-theme="windows-98"] .nn-w98-dp__titlebar .nn-w98-titlebar__icon { width: 14px; height: 14px; } /* Tabs */ [data-theme="windows-98"] .nn-w98-dp__tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: #C0C0C0; } [data-theme="windows-98"] .nn-w98-dp__tab { padding: 4px 12px 3px; font-size: 11px; cursor: default; background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; position: relative; bottom: -1px; white-space: nowrap; } [data-theme="windows-98"] .nn-w98-dp__tab--active { font-weight: bold; z-index: 1; border-bottom: 2px solid #C0C0C0; padding-bottom: 5px; } /* Body */ [data-theme="windows-98"] .nn-w98-dp__body { padding: 12px; border-top: 2px solid #808080; display: flex; flex-direction: column; gap: 14px; } /* Monitor */ [data-theme="windows-98"] .nn-w98-dp__monitor-wrap { display: flex; justify-content: center; } [data-theme="windows-98"] .nn-w98-dp__monitor { display: flex; flex-direction: column; align-items: center; } [data-theme="windows-98"] .nn-w98-dp__monitor-screen { width: 200px; height: 150px; background: #000000; border-top: 4px solid #404040; border-left: 4px solid #404040; border-right: 4px solid #C0C0C0; border-bottom: 4px solid #C0C0C0; padding: 6px; box-sizing: border-box; } [data-theme="windows-98"] .nn-w98-dp__monitor-desktop { width: 100%; height: 100%; background: #008080; overflow: hidden; position: relative; } [data-theme="windows-98"] .nn-w98-dp__monitor-wallpaper { position: absolute; inset: 0; background-image: url('https://i.ibb.co/VW9cDZqW/1000015151.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain; transition: background-image 0.2s, background-size 0.2s, background-repeat 0.2s; } [data-theme="windows-98"] .nn-w98-dp__monitor-base { width: 60px; height: 14px; background: #C0C0C0; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; } [data-theme="windows-98"] .nn-w98-dp__monitor-foot { width: 100px; height: 8px; background: #C0C0C0; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; } /* Controls row */ [data-theme="windows-98"] .nn-w98-dp__controls { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; } [data-theme="windows-98"] .nn-w98-dp__field-label { font-size: 11px; font-weight: bold; margin-bottom: 4px; color: #000000; } /* Wallpaper list */ [data-theme="windows-98"] .nn-w98-dp__list { height: 110px; overflow-y: auto; background: #FFFFFF; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; font-size: 11px; } [data-theme="windows-98"] .nn-dp-item { padding: 2px 6px; cursor: default; color: #000000; white-space: nowrap; } [data-theme="windows-98"] .nn-dp-item:hover { background: #000080; color: #FFFFFF; } [data-theme="windows-98"] .nn-dp-item--selected { background: #000080; color: #FFFFFF; } /* Display mode radios */ [data-theme="windows-98"] .nn-w98-dp__mode-col { display: flex; flex-direction: column; gap: 6px; min-width: 90px; } [data-theme="windows-98"] .nn-dp-radio { display: flex; align-items: center; gap: 5px; font-size: 11px; cursor: pointer; color: #000000; } [data-theme="windows-98"] .nn-dp-radio input { cursor: pointer; accent-color: #000080; } /* Footer buttons */ [data-theme="windows-98"] .nn-w98-dp__footer { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 12px 10px; border-top: 1px solid #808080; } /* Mobile */ @media (max-width: 768px) { [data-theme="windows-98"] .nn-w98-dp__window { max-width: 100%; } [data-theme="windows-98"] .nn-w98-dp__tabs { flex-wrap: wrap; } [data-theme="windows-98"] .nn-w98-dp__controls { grid-template-columns: 1fr; } [data-theme="windows-98"] .nn-w98-dp__mode-col { flex-direction: row; gap: 12px; } } /* ── ERA FEATURE — Win98 MS Paint interactive canvas ──────── */ [data-theme="windows-98"] .nn-w98-paint-prompt { font-family: Tahoma, Arial, sans-serif; font-size: 16px; font-weight: bold; color: #000080; margin-bottom: 16px; text-shadow: 1px 1px 0 #FFFFFF; } [data-theme="windows-98"] .nn-w98-paint-window { width: 100%; max-width: 560px; background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; box-shadow: 3px 3px 10px rgba(0,0,0,0.4); font-family: Tahoma, Arial, sans-serif; font-size: 11px; position: relative; } /* Toolbar in era feature paint (reuses __toolbar styles but enforce flex-col) */ [data-theme="windows-98"] .nn-w98-paint-window .nn-w98-paint__toolbar { flex-direction: column; } [data-theme="windows-98"] .nn-w98-paint-tool-sep { height: 6px; } /* Canvas element */ [data-theme="windows-98"] .nn-w98-paint__canvas-el { display: block; flex: 1; width: 100%; height: 300px; background: #FFFFFF; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; touch-action: none; cursor: crosshair; min-width: 0; } /* Palette row */ [data-theme="windows-98"] .nn-w98-paint__palette-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: #C0C0C0; border-top: 1px solid #808080; } [data-theme="windows-98"] .nn-w98-paint-fg-wrap { flex-shrink: 0; } [data-theme="windows-98"] .nn-w98-paint-fg-swatch { width: 22px; height: 22px; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; } [data-theme="windows-98"] .nn-w98-paint-colors { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; } /* Footer row */ [data-theme="windows-98"] .nn-w98-paint__footer-row { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid #808080; } /* Dialog overlay */ [data-theme="windows-98"] .nn-w98-paint-dialog { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.35); align-items: center; justify-content: center; z-index: 20; } [data-theme="windows-98"] .nn-w98-paint-dialog[aria-hidden="false"] { display: flex; } [data-theme="windows-98"] .nn-w98-paint-dialog__titlebar { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 6px; background: linear-gradient(to right, #000080, #1084d0); color: #FFFFFF; font-weight: bold; font-size: 11px; } [data-theme="windows-98"] .nn-w98-paint-dialog--error .nn-w98-paint-dialog__titlebar { background: linear-gradient(to right, #800000, #CC0000); } [data-theme="windows-98"] .nn-w98-paint-dialog > div { background: #C0C0C0; border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #808080; border-bottom: 2px solid #808080; min-width: 220px; box-shadow: 3px 3px 8px rgba(0,0,0,0.4); } [data-theme="windows-98"] .nn-w98-paint-dialog__body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 24px; font-family: Tahoma, Arial, sans-serif; font-size: 12px; } [data-theme="windows-98"] .nn-w98-paint-dialog__icon { font-size: 28px; } @media (max-width: 768px) { [data-theme="windows-98"] .nn-w98-paint-window { max-width: 100%; } [data-theme="windows-98"] .nn-w98-paint__canvas-el { height: 220px; } } /* ── WIN98 SCREENSAVER — teal desktop + bouncing logo ──────── */ .nn-w98-screensaver { display: none; } [data-theme="windows-98"] .nn-w98-screensaver { display: block; position: fixed; inset: 0; z-index: 0; background: #008080; overflow: hidden; pointer-events: none; } [data-theme="windows-98"] .nn-w98-screensaver__logo { position: absolute; left: 0; top: 0; width: 140px; opacity: 0.45; pointer-events: none; will-change: left, top; user-select: none; } /* Page content must sit above the fixed screensaver layer */ [data-theme="windows-98"] .nn-page-content { position: relative; z-index: 1; } @media (max-width: 768px) { [data-theme="windows-98"] .nn-w98-screensaver__logo { width: 90px; opacity: 0.38; } } /* ── WIN98 IDLE SCREENSAVER — full-screen overlay ──────────── */ .nn-w98-saver-overlay { display: none; } [data-theme="windows-98"] .nn-w98-saver-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: #008080; overflow: hidden; cursor: none; } [data-theme="windows-98"] .nn-w98-saver-overlay.is-active { display: block; } [data-theme="windows-98"] .nn-w98-saver-logo { position: absolute; left: 0; top: 0; width: 220px; pointer-events: none; will-change: left, top; user-select: none; filter: drop-shadow(0 0 18px rgba(255,255,255,0.35)); } [data-theme="windows-98"] .nn-w98-saver-hint { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font-family: Tahoma, Arial, sans-serif; font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 3px; pointer-events: none; user-select: none; } @media (max-width: 768px) { [data-theme="windows-98"] .nn-w98-saver-logo { width: 150px; } } /* ============================================================ LISA FRANK — Phase 5 Part 6 ============================================================ */ /* ── MARQUEE — Hot pink + glitter shimmer ─────────────────── */ .nn-marquee--lisa-frank { display: none; } [data-theme="lisa-frank"] .nn-marquee--default { display: none; } [data-theme="lisa-frank"] .nn-marquee--space-jam { display: none; } [data-theme="lisa-frank"] .nn-marquee--windows-98 { display: none; } [data-theme="lisa-frank"] .nn-marquee--lisa-frank { display: inline-block; } [data-theme="lisa-frank"] .nn-marquee-bar { background: #FF1493; border-bottom: 1px solid #cc0074; } /* shimmer beam that sweeps across the bar */ [data-theme="lisa-frank"] .nn-marquee-bar::after { content: ''; position: absolute; top: -10%; left: 0; width: 60%; height: 120%; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.18) 30%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.18) 70%, transparent 100% ); transform: translateX(-110%); animation: nn-lf-shimmer 2.2s ease-in-out infinite; pointer-events: none; } @keyframes nn-lf-shimmer { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } } [data-theme="lisa-frank"] .nn-marquee--lisa-frank { color: #ffffff; font-weight: 700; letter-spacing: 0.05em; text-shadow: 0 1px 4px rgba(120, 0, 60, 0.45); } /* ── NAV SPARKLES ─────────────────────────────────────────── */ .nn-lf-sparkles { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } [data-theme="lisa-frank"] .nn-lf-sparkles { display: block; } .nn-lf-nav-sparkle { position: absolute; border-radius: 50%; animation: nn-lf-twinkle var(--spk-dur, 1.2s) ease-in-out var(--spk-del, 0s) infinite; } @keyframes nn-lf-twinkle { 0%, 100% { opacity: 0.05; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.15); } } @media (prefers-reduced-motion: reduce) { .nn-lf-nav-sparkle { animation: none; opacity: 0.5; } } /* ── NAV — Deep purple + rainbow hover ────────────────────── */ [data-theme="lisa-frank"] .nn-nav { background: rgba(26, 0, 51, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 20, 147, 0.35); box-shadow: 0 2px 24px rgba(255, 20, 147, 0.12); } [data-theme="lisa-frank"] .nn-nav__logo img { height: 120px; } [data-theme="lisa-frank"] .nn-nav__tab { color: rgba(255, 255, 255, 0.9); } /* suppress default accent-color overlay on hover */ [data-theme="lisa-frank"] .nn-nav__tab::before { display: none; } [data-theme="lisa-frank"] .nn-nav__tab:hover { background: linear-gradient(90deg, #ff1493, #ff6600, #ffee00, #00ccff, #aa00ff, #ff1493); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="lisa-frank"] .nn-nav__tab.is-active { background: linear-gradient(90deg, #ff1493, #ff6600, #ffee00, #00ccff, #aa00ff, #ff1493); -webkit-background-clip: text; background-clip: text; color: transparent; border-bottom-color: #FF1493; } [data-theme="lisa-frank"] .nn-nav__cart { color: #FF1493; } [data-theme="lisa-frank"] .nn-cart-badge { background: #FF1493; color: #ffffff; } @media (max-width: 768px) { [data-theme="lisa-frank"] .nn-nav__logo img { height: 90px; } } /* ── HERO — Rainbow Portal ─────────────────────────────────── */ [data-theme="lisa-frank"] .nn-hero { background: transparent; border-bottom: none; min-height: 560px; } /* Dark purple glass panel — layered rainbow outline sticker border */ [data-theme="lisa-frank"] .nn-hero__copy { background: rgba(15, 0, 30, 0.58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 16px; padding: 36px 32px; border: 4px solid #FF1493; box-shadow: 0 0 0 8px #ffee00, 0 0 0 12px #00ccff, 0 0 0 16px #aa00ff; border: 1px solid rgba(255, 20, 147, 0.25); } [data-theme="lisa-frank"] .nn-hero__headline { color: #ffffff; text-shadow: 0 2px 14px rgba(255, 20, 147, 0.6); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.3; } [data-theme="lisa-frank"] .nn-hero__sub { color: rgba(255, 255, 255, 0.85); } [data-theme="lisa-frank"] .nn-hero__stars-icons { color: #ffee00; } [data-theme="lisa-frank"] .nn-hero__stars-label { color: rgba(255, 255, 255, 0.8); } [data-theme="lisa-frank"] .nn-hero .nn-btn--primary { background: #FF1493; color: #ffffff; border-color: #FF1493; text-shadow: none; } [data-theme="lisa-frank"] .nn-hero .nn-btn--primary:hover { background: #e0007a; border-color: #e0007a; opacity: 1; } [data-theme="lisa-frank"] .nn-hero .nn-btn--secondary { color: #FF1493; border-color: #FF1493; background: transparent; } [data-theme="lisa-frank"] .nn-hero .nn-btn--secondary:hover { background: #FF1493; color: #ffffff; } /* Portal magic layer — absolute, fills .nn-hero__image */ .nn-lf-hero-magic { display: none; position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } [data-theme="lisa-frank"] .nn-lf-hero-magic { display: block; } /* Portal — centered 380px circle */ .nn-lf-portal { position: absolute; top: 50%; left: 50%; width: 380px; height: 380px; transform: translate(-50%, -50%); } /* Sunburst rays — slowest layer */ .nn-lf-portal__rays { position: absolute; inset: -60px; border-radius: 50%; background: repeating-conic-gradient( rgba(255, 255, 255, 0.07) 0deg 8deg, transparent 8deg 20deg ); animation: nn-lf-rays-spin 22s linear infinite; } @keyframes nn-lf-rays-spin { to { transform: rotate(360deg); } } /* Blurred rainbow glow aura — outer ring only */ .nn-lf-portal__glow { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#FF1493, #ff6600, #ffee00, #00ff88, #00ccff, #aa00ff, #FF1493); filter: blur(22px); opacity: 0.6; animation: nn-lf-portal-spin 4s linear infinite; -webkit-mask: radial-gradient(circle at center, transparent 50%, black 68%); mask: radial-gradient(circle at center, transparent 50%, black 68%); } [data-theme="lisa-frank"] .nn-lf-portal { display: none; } /* Spinning rainbow ring — radial mask punches center hole */ .nn-lf-portal__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#FF1493, #ff6600, #ffee00, #00ff88, #00ccff, #aa00ff, #FF1493); -webkit-mask: radial-gradient(circle at center, transparent 56%, black 58% 70%, transparent 72%); mask: radial-gradient(circle at center, transparent 56%, black 58% 70%, transparent 72%); animation: nn-lf-portal-spin 4s linear infinite; } @keyframes nn-lf-portal-spin { to { transform: rotate(360deg); } } /* Products: hide before + arrow, center jar above portal */ [data-theme="lisa-frank"] .nn-hero__product-before { display: none; } [data-theme="lisa-frank"] .nn-hero__arrow { display: none; } [data-theme="lisa-frank"] .nn-hero__products { position: relative; z-index: 2; justify-content: center; align-items: center; } /* Jar floats gently within the portal */ [data-theme="lisa-frank"] .nn-hero__product-after { max-height: 280px; max-width: 65%; animation: nn-lf-jar-float 3.2s ease-in-out infinite; } @keyframes nn-lf-jar-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* Puffy cloud under the jar */ .nn-lf-cloud { display: none; } [data-theme="lisa-frank"] .nn-lf-cloud { display: block; position: absolute; bottom: -2%; left: 50%; transform: translateX(-50%); width: 260px; animation: nn-lf-cloud-bob 3.2s ease-in-out infinite; pointer-events: none; z-index: 1; } @media (min-width: 768px) { [data-theme="lisa-frank"] .nn-lf-cloud { width: 340px; } } @keyframes nn-lf-cloud-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } } [data-theme="lisa-frank"] .nn-lf-cloud__img { width: 100%; display: block; filter: drop-shadow(0 8px 20px rgba(255, 140, 190, 0.55)); } /* Jar stays on top of cloud */ [data-theme="lisa-frank"] .nn-hero__product-after { position: relative; z-index: 2; } /* Floating emoji elements */ .nn-lf-floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .nn-lf-float { position: absolute; animation: nn-lf-float-a var(--fl-dur, 3s) ease-in-out var(--fl-del, 0s) infinite; line-height: 1; user-select: none; } .nn-lf-float--b { animation-name: nn-lf-float-b; } @keyframes nn-lf-float-a { 0%, 100% { transform: translateY(0) rotate(0deg); } 35% { transform: translateY(-13px) rotate(6deg); } 70% { transform: translateY(8px) rotate(-4deg); } } @keyframes nn-lf-float-b { 0%, 100% { transform: translateY(0) rotate(0deg); } 40% { transform: translateY(11px) rotate(-7deg); } 75% { transform: translateY(-9px) rotate(5deg); } } @media (prefers-reduced-motion: reduce) { .nn-lf-portal__rays, .nn-lf-portal__glow, .nn-lf-portal__ring, .nn-lf-float { animation: none; } [data-theme="lisa-frank"] .nn-hero__product-after { animation: none; } } @media (max-width: 768px) { [data-theme="lisa-frank"] .nn-hero__copy { padding: 24px 20px; border-width: 2px; box-shadow: 0 0 0 4px #ffee00, 0 0 0 7px #00ccff, 0 0 0 9px #aa00ff; } [data-theme="lisa-frank"] .nn-hero__image { min-height: 300px; } .nn-lf-portal { width: 260px; height: 260px; } .nn-lf-portal__rays { inset: -40px; } [data-theme="lisa-frank"] .nn-hero__product-after { max-height: 190px; } } @media (max-width: 480px) { .nn-lf-portal { width: 210px; height: 210px; } .nn-lf-portal__rays { inset: -28px; } [data-theme="lisa-frank"] .nn-hero__product-after { max-height: 155px; } } /* ── TRUST STRIP — Collector's Sticker Sheet ───────────────── */ .nn-lf-sticker-sheet { display: none; /* graph-paper grid texture + rainbow top & bottom borders via background layers */ background-color: #FFFAF8; background-image: linear-gradient(90deg, #FF1493, #ff6600, #ffee00, #00ccff, #aa00ff, #FF1493), linear-gradient(90deg, #FF1493, #ff6600, #ffee00, #00ccff, #aa00ff, #FF1493), repeating-linear-gradient(rgba(180,170,200,0.18) 0 1px, transparent 1px 100%), repeating-linear-gradient(90deg, rgba(180,170,200,0.18) 0 1px, transparent 1px 100%); background-size: 100% 4px, 100% 4px, 24px 24px, 24px 24px; background-position: 0 0, 0 100%, 0 0, 0 0; background-repeat: no-repeat, no-repeat, repeat, repeat; padding: 28px 40px 44px; border: none; box-shadow: none; } [data-theme="lisa-frank"] .nn-trust-strip { display: none; } [data-theme="lisa-frank"] .nn-lf-sticker-sheet { display: block; } .nn-lf-sticker-sheet__header { text-align: center; margin-bottom: 28px; font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; background: linear-gradient(90deg, #FF1493, #ff6600, #ffee00, #00ccff, #aa00ff, #FF1493); -webkit-background-clip: text; background-clip: text; color: transparent; } .nn-lf-sticker-sheet__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 880px; margin: 0 auto; } /* ── Individual sticker card ── */ .nn-lf-sticker { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px 22px; border-radius: 22px; /* die-cut white border + depth shadow */ box-shadow: 0 0 0 7px #ffffff, 0 10px 32px rgba(0,0,0,0.16), 0 3px 8px rgba(0,0,0,0.1); overflow: hidden; cursor: default; /* collapsed state before animation */ opacity: 0; transform: scale(0.3) rotate(var(--rot, 0deg)); } /* Spring pop-in — triggers when lisa-frank data-theme is active */ [data-theme="lisa-frank"] .nn-lf-sticker { animation: nn-lf-sticker-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: var(--stk-del, 0s); } @keyframes nn-lf-sticker-pop { from { opacity: 0; transform: scale(0.3) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); } } /* Per-sticker gradient backgrounds */ .nn-lf-sticker--1 { background: linear-gradient(145deg, #FF1493 0%, #ff69b4 100%); } .nn-lf-sticker--2 { background: linear-gradient(145deg, #FFD700 0%, #ff9f00 100%); } .nn-lf-sticker--3 { background: linear-gradient(145deg, #00CCFF 0%, #00ffaa 100%); } .nn-lf-sticker--4 { background: linear-gradient(145deg, #aa00ff 0%, #ff00cc 100%); } /* Scratch-n-sniff shimmer — sweeps on hover, snaps back on mouse-out */ .nn-lf-sticker::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 105deg, transparent 30%, rgba(255,255,255,0.42) 47%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.42) 53%, transparent 70% ); transform: translateX(-130%); transition: transform 0s; pointer-events: none; } .nn-lf-sticker:hover::after { transform: translateX(170%); transition: transform 0.55s ease-in-out; } .nn-lf-sticker__char { font-size: 34px; line-height: 1; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18)); } .nn-lf-sticker__num { font-family: var(--font-heading); font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,0.22); line-height: 1; } .nn-lf-sticker__label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.88); text-shadow: 0 1px 3px rgba(0,0,0,0.2); } @media (prefers-reduced-motion: reduce) { [data-theme="lisa-frank"] .nn-lf-sticker { animation: none; opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); } .nn-lf-sticker::after { display: none; } } @media (max-width: 768px) { .nn-lf-sticker-sheet { padding: 20px 16px 32px; } .nn-lf-sticker-sheet__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 400px) { .nn-lf-sticker-sheet__grid { gap: 14px; } .nn-lf-sticker { padding: 20px 12px 16px; } .nn-lf-sticker__char { font-size: 26px; } } /* ============================================================ LISA FRANK — PRODUCT GRID ============================================================ */ [data-theme="lisa-frank"] .nn-product-grid { background: linear-gradient(135deg, #FF1493 0%, #ff6600 22%, #ffee00 44%, #00ccff 66%, #aa00ff 88%, #FF1493 100% ); } [data-theme="lisa-frank"] .nn-product-grid .nn-section-header__title { background: linear-gradient(90deg, #FF1493, #ff6600, #ffee00, #00ccff, #aa00ff, #FF1493); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="lisa-frank"] .nn-product-grid .nn-section-header__decoration { display: none; } [data-theme="lisa-frank"] .nn-product-grid .nn-section-sub { color: rgba(255,255,255,0.9); text-shadow: 0 1px 4px rgba(0,0,0,0.3); } /* Hide Win98 explorer chrome on LF */ [data-theme="lisa-frank"] .nn-w98-explorer, [data-theme="lisa-frank"] .nn-w98-explorer__statusbar { display: none; } [data-theme="lisa-frank"] .nn-w98-explorer__pane { border: none; background: transparent; padding: 0; } /* Sticker edition label — hidden in Polaroid mode */ .nn-lf-sticker-label { display: none; } [data-theme="lisa-frank"] .nn-lf-sticker-label { display: none; font-size: 9px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; background: linear-gradient(90deg, #FF1493, #ff6600, #ffee00, #00ccff, #aa00ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; padding: 10px 0 4px; } /* nn-lf-img-shadow: transparent pass-through by default */ .nn-lf-img-shadow { display: block; } [data-theme="lisa-frank"] .nn-lf-img-shadow { display: block; } /* Image wrap sits above the backing */ [data-theme="lisa-frank"] .nn-product-card__image-wrap { position: relative; z-index: 1; aspect-ratio: 1; overflow: hidden; border-radius: 4px; } /* Holographic foil — auto-cycles hue on hover, overlaid on the square image */ [data-theme="lisa-frank"] .nn-product-card__image-wrap::before { content: ''; position: absolute; inset: 0; z-index: 1; background: conic-gradient(from 0deg, #FF149388, #ff660088, #ffee0088, #00ff8888, #00ccff88, #aa00ff88, #FF149388); mix-blend-mode: overlay; opacity: 0; pointer-events: none; animation: nn-lf-holo-cycle 5s linear infinite; transition: opacity 0.4s; } [data-theme="lisa-frank"] .nn-product-card:hover .nn-product-card__image-wrap::before { opacity: 1; } @keyframes nn-lf-holo-cycle { to { filter: hue-rotate(360deg); } } /* ── Polaroid card ─────────────────────────────────────────── */ [data-theme="lisa-frank"] .nn-product-card { background: #ffffff; border-radius: 3px; border: none; box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.14), 2px 4px 0 rgba(0,0,0,0.06); overflow: visible; position: relative; padding: 8px 8px 76px 8px; } [data-theme="lisa-frank"] .nn-product-card:hover { transform: scale(1.03) rotate(var(--lf-rot, 0deg)); box-shadow: 0 14px 36px rgba(0,0,0,0.3), 0 4px 10px rgba(0,0,0,0.15); } /* Sticker bomb overlay */ .nn-lf-polaroid-stickers { display: none; } [data-theme="lisa-frank"] .nn-lf-polaroid-stickers { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 3; } [data-theme="lisa-frank"] .nn-lf-polaroid-stickers span { position: absolute; line-height: 1; } [data-theme="lisa-frank"] .nn-lf-polaroid-stickers span:nth-child(1) { top:3px; left:4px; font-size:17px; transform:rotate(-22deg); } [data-theme="lisa-frank"] .nn-lf-polaroid-stickers span:nth-child(2) { top:2px; right:5px; font-size:14px; transform:rotate(18deg); } [data-theme="lisa-frank"] .nn-lf-polaroid-stickers span:nth-child(3) { top:36%; left:1px; font-size:11px; transform:rotate(-30deg); } [data-theme="lisa-frank"] .nn-lf-polaroid-stickers span:nth-child(4) { top:38%; right:1px; font-size:11px; transform:rotate(28deg); } [data-theme="lisa-frank"] .nn-lf-polaroid-stickers span:nth-child(5) { bottom:38px; left:6px; font-size:16px; transform:rotate(-14deg); } [data-theme="lisa-frank"] .nn-lf-polaroid-stickers span:nth-child(6) { bottom:36px; right:5px; font-size:13px; transform:rotate(20deg); } [data-theme="lisa-frank"] .nn-lf-polaroid-stickers span:nth-child(7) { bottom:10px; left:5px; font-size:13px; transform:rotate(-8deg); } [data-theme="lisa-frank"] .nn-lf-polaroid-stickers span:nth-child(8) { bottom:8px; right:4px; font-size:12px; transform:rotate(16deg); } /* Entrance — hidden until .nn-grid.is-dealt */ [data-theme="lisa-frank"] .nn-grid .nn-product-card { opacity: 0; transform: scale(0.45) rotate(var(--lf-rot, 0deg)) translateY(30px); } [data-theme="lisa-frank"] .nn-grid.is-dealt .nn-product-card { animation: nn-lf-card-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: var(--lf-card-del, 0s); } @keyframes nn-lf-card-pop { from { opacity: 0; transform: scale(0.45) rotate(var(--lf-rot, 0deg)) translateY(30px); } to { opacity: 1; transform: scale(1) rotate(var(--lf-rot, 0deg)); } } /* Per-card rotation + stagger */ [data-theme="lisa-frank"] .nn-product-card:nth-child(4n+1) { --lf-rot: -3deg; --lf-card-del: 0.05s; } [data-theme="lisa-frank"] .nn-product-card:nth-child(4n+2) { --lf-rot: 2.5deg; --lf-card-del: 0.13s; } [data-theme="lisa-frank"] .nn-product-card:nth-child(4n+3) { --lf-rot: -1.5deg; --lf-card-del: 0.21s; } [data-theme="lisa-frank"] .nn-product-card:nth-child(4n) { --lf-rot: 3.5deg; --lf-card-del: 0.29s; } /* Peel corner on hover */ [data-theme="lisa-frank"] .nn-product-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 0; background: linear-gradient(225deg, rgba(255,255,255,0.96) 0%, rgba(220,180,255,0.72) 40%, rgba(255,20,147,0.28) 70%, transparent 100% ); border-radius: 0 0 3px 0; pointer-events: none; z-index: 2; transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-theme="lisa-frank"] .nn-product-card:hover::after { width: 52px; height: 52px; } /* ── Polaroid bottom strip ─────────────────────────────────── */ /* Body sits in the 76px bottom padding area of the Polaroid card */ [data-theme="lisa-frank"] .nn-product-card__body { position: absolute; bottom: 0; left: 0; right: 0; height: 76px; padding: 8px 10px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } /* Product name — dark handwritten ink caption, no gradient */ [data-theme="lisa-frank"] .nn-product-card__name { font-size: 11px; font-weight: 700; color: #2a0a2e; text-align: center; padding: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; background: none; -webkit-background-clip: unset; background-clip: unset; } /* Short description — hidden in Polaroid mode */ [data-theme="lisa-frank"] .nn-product-card__desc { display: none; } /* Stat bars — hidden in Polaroid mode */ [data-theme="lisa-frank"] .nn-card-stats { display: none; } /* Price — small pink, no gradient */ [data-theme="lisa-frank"] .nn-product-card__price { font-size: 11px; font-weight: 800; color: #FF1493; text-align: center; padding: 0; margin: 0; background: none; -webkit-background-clip: unset; background-clip: unset; } /* Add to cart — compact strip button */ [data-theme="lisa-frank"] .nn-product-card__body .nn-btn--add-to-cart { margin: 0; width: 100%; padding: 0 8px; height: 22px; min-height: unset; font-size: 10px; line-height: 22px; background: linear-gradient(90deg, #FF1493, #aa00ff); border-color: transparent; border-radius: 2px; color: #ffffff; } [data-theme="lisa-frank"] .nn-product-card__body .nn-btn--add-to-cart:hover { background: linear-gradient(90deg, #aa00ff, #FF1493); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { [data-theme="lisa-frank"] .nn-grid .nn-product-card { opacity: 1 !important; transform: rotate(var(--lf-rot, 0deg)) !important; animation: none !important; } [data-theme="lisa-frank"] .nn-product-card__image-wrap::before { animation: none !important; } [data-theme="lisa-frank"] .nn-product-card::after { display: none; } } /* Mobile: remove rotation to avoid layout weirdness */ @media (max-width: 768px) { [data-theme="lisa-frank"] .nn-product-card:nth-child(4n+1), [data-theme="lisa-frank"] .nn-product-card:nth-child(4n+2), [data-theme="lisa-frank"] .nn-product-card:nth-child(4n+3), [data-theme="lisa-frank"] .nn-product-card:nth-child(4n) { --lf-rot: 0deg; } } /* ============================================================ LISA FRANK — ERA FEATURE: SCRATCH-OFF STICKER REVEAL ============================================================ */ /* Hide other era treatments for Lisa Frank */ [data-theme="lisa-frank"] .nn-pmp { display: none; } [data-theme="lisa-frank"] .nn-w98-mspaint { display: none; } /* Section wrapper */ .nn-lf-scratch-section { display: none; } [data-theme="lisa-frank"] .nn-lf-scratch-section { display: block; position: relative; padding: 72px 24px 88px; background: linear-gradient(160deg, #16002e 0%, #08001a 50%, #16002e 100%); text-align: center; width: 100vw; margin-left: calc(-50vw + 50%); } /* Glitter sparkles */ .nn-lf-scratch-sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .nn-lf-scratch-sparkles span { position: absolute; font-style: normal; animation: nn-lf-slam-twinkle var(--tw-dur, 0.7s) ease-in-out var(--tw-del, 0s) infinite; background: linear-gradient(90deg, #FF1493, #ffee00, #00ccff, #aa00ff); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } /* Ensure header + grid sit above sparkles */ .nn-lf-scratch-header, .nn-lf-scratch-grid { position: relative; z-index: 1; } /* Header */ .nn-lf-scratch-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: rgba(255, 215, 0, 0.85); margin: 0 0 10px; } .nn-lf-scratch-title { font-size: clamp(28px, 4vw, 48px); font-weight: 900; background: linear-gradient(90deg, #FF1493, #ff6600, #ffee00, #00ccff, #aa00ff); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 12px; line-height: 1.15; } .nn-lf-scratch-sub { font-size: 15px; color: rgba(255, 255, 255, 0.78); max-width: 480px; margin: 0 auto 48px; line-height: 1.5; } /* Grid */ .nn-lf-scratch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 860px; margin: 0 auto; } /* Sticker frame — rainbow gradient border */ .nn-lf-scratch-sticker { position: relative; border-radius: 14px; padding: 4px; background: linear-gradient(135deg, #FF1493, #ff6600, #ffee00, #00ccff, #aa00ff, #FF1493); cursor: crosshair; transition: transform 0.25s ease, box-shadow 0.25s ease; } .nn-lf-scratch-sticker:hover { transform: translateY(-4px); } .nn-lf-scratch-sticker.is-unlocked { animation: nn-lf-scratch-glow 1.8s ease-in-out infinite alternate; } @keyframes nn-lf-scratch-glow { from { box-shadow: 0 0 18px rgba(255, 20, 147, 0.55), 0 0 36px rgba(170, 0, 255, 0.25); } to { box-shadow: 0 0 32px rgba(255, 20, 147, 0.9), 0 0 64px rgba(170, 0, 255, 0.5); } } /* Inner container */ .nn-lf-scratch-sticker__inner { position: relative; border-radius: 11px; overflow: hidden; background: #ffffff; aspect-ratio: 1; } /* Reveal layer — sits underneath canvas */ .nn-lf-scratch-reveal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 10px 10px; background: #ffffff; } .nn-lf-scratch-reveal img { flex: 1; width: 100%; object-fit: contain; min-height: 0; } .nn-lf-scratch-reveal__name { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: #2a0a2e; text-align: center; margin-top: 6px; flex-shrink: 0; } /* Canvas — the scratch layer */ .nn-lf-scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; } /* Unlocked badge */ .nn-lf-scratch-badge { position: absolute; top: -10px; right: -10px; background: linear-gradient(135deg, #FF1493, #aa00ff); color: #ffffff; font-size: 9px; font-weight: 900; letter-spacing: 0.05em; padding: 4px 9px; border-radius: 20px; opacity: 0; transform: scale(0) rotate(-12deg); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 10; pointer-events: none; white-space: nowrap; } .nn-lf-scratch-badge.is-visible { opacity: 1; transform: scale(1) rotate(-12deg); } /* Confetti dots — 3D burst toward viewer */ .nn-lf-confetti-dot { position: absolute; width: var(--cs-w, 8px); height: var(--cs-h, 8px); border-radius: var(--cs-r, 2px); pointer-events: none; z-index: 20; animation: nn-lf-confetti-burst var(--cd, 0.7s) cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes nn-lf-confetti-burst { 0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; } 25% { opacity: 1; } 100% { transform: translate(var(--cx), var(--cy)) scale(var(--cs, 1.6)) rotate(600deg); opacity: 0; } } /* Mobile */ @media (max-width: 768px) { [data-theme="lisa-frank"] .nn-lf-scratch-section { padding: 52px 16px 64px; } .nn-lf-scratch-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 480px; } .nn-lf-scratch-sub { font-size: 14px; margin-bottom: 36px; } } @media (max-width: 400px) { .nn-lf-scratch-grid { gap: 14px; } .nn-lf-scratch-sticker { border-radius: 10px; padding: 3px; } } /* ============================================================ LISA FRANK — ORIGIN: DIARY PAGE ============================================================ */ /* Hide default origin + other theme treatments */ .nn-lf-diary { display: none; } [data-theme="lisa-frank"] .nn-origin__inner { display: none; } [data-theme="lisa-frank"] .nn-w98-origin { display: none; } [data-theme="lisa-frank"] .nn-sc-header { display: none; } [data-theme="lisa-frank"] .nn-lf-diary { display: flex; align-items: stretch; max-width: 960px; margin: 0 auto; padding: 64px 24px 80px; gap: 0; } /* ── Spiral binding ─────────────────────────────────────────── */ .nn-lf-diary__binding { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 24px 0; width: 36px; flex-shrink: 0; z-index: 2; } .nn-lf-diary__binding span { display: block; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #d0d0d0 0%, #f8f8f8 40%, #b0b0b0 100%); border: 2px solid #999; box-shadow: inset 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.2); flex-shrink: 0; } /* ── Notebook page ──────────────────────────────────────────── */ .nn-lf-diary__page { flex: 1; background: #fffef8; border-radius: 0 8px 8px 0; box-shadow: 4px 4px 0 rgba(0,0,0,0.08), 8px 8px 0 rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.22); position: relative; overflow: hidden; /* Red margin line on the left */ border-left: 3px solid rgba(255, 80, 100, 0.45); } /* Rainbow ruled lines */ .nn-lf-diary__lines { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( to bottom, transparent 0px, transparent 30px, rgba(180, 180, 255, 0.22) 30px, rgba(180, 180, 255, 0.22) 31px ); background-size: 100% 31px; } /* Sticker header */ .nn-lf-diary__sticker-header { text-align: center; font-family: 'Caveat', cursive; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; padding: 14px 20px 10px; background: linear-gradient(90deg, #FF1493, #ff6600, #ffee00, #00ccff, #aa00ff); -webkit-background-clip: text; background-clip: text; color: transparent; border-bottom: 2px dashed rgba(255, 20, 147, 0.25); position: relative; z-index: 1; } /* Content area — sits on top of ruled lines */ .nn-lf-diary__content { display: grid; grid-template-columns: 1fr 220px; gap: 32px; padding: 24px 36px 40px 28px; position: relative; z-index: 1; } /* ── Diary entry ────────────────────────────────────────────── */ .nn-lf-diary__entry { position: relative; font-family: 'Caveat', cursive; } .nn-lf-diary__date { font-size: 13px; color: rgba(100, 60, 120, 0.65); margin: 0 0 4px; font-style: italic; } .nn-lf-diary__salutation { font-size: 22px; font-weight: 700; color: #FF1493; margin: 0 0 16px; } .nn-lf-diary__body { font-size: 19px; line-height: 1.75; color: #2a0a2e; margin: 0 0 14px; } .nn-lf-diary__sign { font-size: 20px; font-weight: 700; color: #aa00ff; margin: 20px 0 28px; } /* Margin doodles */ .nn-lf-diary__doodles { position: absolute; left: -22px; top: 0; bottom: 0; width: 32px; } .nn-lf-diary__doodles span { position: absolute; display: block; line-height: 1; } /* CTA — looks like a puffy sticker peel */ .nn-lf-diary__cta { display: inline-block; font-family: 'Caveat', cursive; font-size: 18px; font-weight: 700; color: #ffffff; background: linear-gradient(135deg, #FF1493, #aa00ff); padding: 10px 24px; border-radius: 40px; text-decoration: none; box-shadow: 0 4px 0 rgba(170, 0, 255, 0.5), 0 6px 18px rgba(255, 20, 147, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; } .nn-lf-diary__cta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(170, 0, 255, 0.5), 0 10px 24px rgba(255, 20, 147, 0.45); } /* ── Polaroid photo ─────────────────────────────────────────── */ .nn-lf-diary__photo-wrap { position: relative; align-self: flex-start; margin-top: 24px; } /* Washi tape strip across the top */ .nn-lf-diary__tape { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 70px; height: 22px; background: rgba(255, 200, 230, 0.72); border-left: 1px solid rgba(255,150,200,0.3); border-right: 1px solid rgba(255,150,200,0.3); z-index: 2; /* Washi tape texture — subtle diagonal lines */ background-image: repeating-linear-gradient( 60deg, transparent, transparent 4px, rgba(255,255,255,0.25) 4px, rgba(255,255,255,0.25) 5px ); background-color: rgba(255, 200, 230, 0.72); } /* Polaroid frame */ .nn-lf-diary__polaroid { background: #ffffff; padding: 8px 8px 40px 8px; box-shadow: 0 3px 8px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.1); transform: rotate(2.5deg); position: relative; z-index: 1; } .nn-lf-diary__polaroid img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; } .nn-lf-diary__polaroid-caption { display: block; font-family: 'Caveat', cursive; font-size: 14px; color: #2a0a2e; text-align: center; padding: 8px 4px 0; } /* ── Mobile ─────────────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="lisa-frank"] .nn-lf-diary { padding: 40px 0 60px; flex-direction: row; align-items: flex-start; } .nn-lf-diary__binding { width: 28px; padding: 16px 0; } .nn-lf-diary__binding span { width: 16px; height: 16px; } .nn-lf-diary__content { grid-template-columns: 1fr; gap: 36px; padding: 16px 20px 32px 16px; } .nn-lf-diary__doodles { display: none; } .nn-lf-diary__photo-wrap { margin-top: 0; max-width: 240px; margin-left: auto; margin-right: auto; } .nn-lf-diary__body { font-size: 17px; } .nn-lf-diary__salutation { font-size: 20px; } } /* ============================================================ LISA FRANK — COMMENTS: SLAM BOOK ============================================================ */ /* Hide all other treatments */ .nn-lf-slam-book { display: none; } [data-theme="lisa-frank"] .nn-lf-slam-book { display: block; } [data-theme="lisa-frank"] .nn-comments__inner { display: none; } [data-theme="lisa-frank"] .nn-w98-aim { display: none; } [data-theme="lisa-frank"] .nn-review-stars { display: none; } /* Section wrapper */ [data-theme="lisa-frank"] .nn-comments { background: linear-gradient(160deg, #16002e 0%, #08001a 50%, #16002e 100%); padding: 72px 24px 88px; width: 100vw; margin-left: calc(-50vw + 50%); } /* Glitter sparkles */ .nn-lf-slam-sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } [data-theme="lisa-frank"] .nn-lf-slam-book { position: relative; } .nn-lf-slam-sparkles span { position: absolute; font-style: normal; animation: nn-lf-slam-twinkle var(--tw-dur, 2s) ease-in-out var(--tw-del, 0s) infinite; background: linear-gradient(90deg, #FF1493, #ffee00, #00ccff, #aa00ff); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } @keyframes nn-lf-slam-twinkle { 0%, 100% { opacity: 0.1; transform: scale(0.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1.5) rotate(30deg); } } /* ── Header ─────────────────────────────────────────────────── */ .nn-lf-slam-book__header { text-align: center; margin-bottom: 52px; } .nn-lf-slam-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: rgba(255, 215, 0, 0.85); margin: 0 0 10px; } .nn-lf-slam-title { font-family: 'Caveat', cursive; font-size: clamp(42px, 7vw, 72px); font-weight: 700; background: linear-gradient(90deg, #FF1493, #ff6600, #ffee00, #00ccff, #aa00ff); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; line-height: 1; } .nn-lf-slam-edition { font-family: 'Caveat', cursive; font-size: 20px; color: rgba(255, 255, 255, 0.75); margin: 6px 0 0; } /* ── Grid ───────────────────────────────────────────────────── */ .nn-lf-slam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 960px; margin: 0 auto; } /* ── Each entry ─────────────────────────────────────────────── */ .nn-lf-slam-entry { position: relative; border-radius: 10px; padding: 20px 18px 24px 20px; transform: rotate(var(--sb-rot, 0deg)); overflow: hidden; /* Entrance — hidden until slam book is in view */ opacity: 0; translate: 0 24px; transition: opacity 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, transform 0.25s ease; transition-delay: var(--sb-del, 0s); } [data-theme="lisa-frank"] .nn-lf-slam-book.is-visible .nn-lf-slam-entry { opacity: 1; translate: 0 0; } .nn-lf-slam-entry:hover { transform: rotate(0deg) scale(1.04); z-index: 2; } /* Per-card pastel backgrounds + colored borders + colored glow */ .nn-lf-slam-entry:nth-child(1) { background: #fff0f8; border: 2px solid #FF1493; box-shadow: 0 6px 24px rgba(255,20,147,0.2), 4px 4px 0 rgba(255,20,147,0.12); } .nn-lf-slam-entry:nth-child(1):hover { box-shadow: 0 14px 36px rgba(255,20,147,0.35), 0 4px 10px rgba(255,20,147,0.2); } .nn-lf-slam-entry:nth-child(2) { background: #f5eeff; border: 2px solid #aa00ff; box-shadow: 0 6px 24px rgba(170,0,255,0.2), 4px 4px 0 rgba(170,0,255,0.12); } .nn-lf-slam-entry:nth-child(2):hover { box-shadow: 0 14px 36px rgba(170,0,255,0.35), 0 4px 10px rgba(170,0,255,0.2); } .nn-lf-slam-entry:nth-child(3) { background: #fff9e0; border: 2px solid #ff9900; box-shadow: 0 6px 24px rgba(255,153,0,0.2), 4px 4px 0 rgba(255,153,0,0.12); } .nn-lf-slam-entry:nth-child(3):hover { box-shadow: 0 14px 36px rgba(255,153,0,0.35), 0 4px 10px rgba(255,153,0,0.2); } .nn-lf-slam-entry:nth-child(4) { background: #e6f9ff; border: 2px solid #00aaff; box-shadow: 0 6px 24px rgba(0,170,255,0.2), 4px 4px 0 rgba(0,170,255,0.12); } .nn-lf-slam-entry:nth-child(4):hover { box-shadow: 0 14px 36px rgba(0,170,255,0.35), 0 4px 10px rgba(0,170,255,0.2); } .nn-lf-slam-entry:nth-child(5) { background: #ffe8fb; border: 2px solid #ff44cc; box-shadow: 0 6px 24px rgba(255,68,204,0.2), 4px 4px 0 rgba(255,68,204,0.12); } .nn-lf-slam-entry:nth-child(5):hover { box-shadow: 0 14px 36px rgba(255,68,204,0.35), 0 4px 10px rgba(255,68,204,0.2); } .nn-lf-slam-entry:nth-child(6) { background: #f0e6ff; border: 2px solid #cc44ff; box-shadow: 0 6px 24px rgba(204,68,255,0.2), 4px 4px 0 rgba(204,68,255,0.12); } .nn-lf-slam-entry:nth-child(6):hover { box-shadow: 0 14px 36px rgba(204,68,255,0.35), 0 4px 10px rgba(204,68,255,0.2); } /* Ruled lines — softer, matches pastel bg */ .nn-lf-slam-entry__lines { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( to bottom, transparent 0px, transparent 27px, rgba(0, 0, 0, 0.06) 27px, rgba(0, 0, 0, 0.06) 28px ); background-size: 100% 28px; border-radius: 10px; } /* Emoji avatar — top right corner */ .nn-lf-slam-entry__emoji { position: absolute; top: 10px; right: 12px; font-size: 28px; line-height: 1; } /* Name */ .nn-lf-slam-entry__name { font-family: 'Caveat', cursive; font-size: 20px; font-weight: 700; background: linear-gradient(90deg, #FF1493, #aa00ff); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 4px; position: relative; z-index: 1; } /* Stars */ .nn-lf-slam-entry__stars { font-size: 13px; background: linear-gradient(90deg, #FF1493, #ff6600, #ffee00); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 10px; position: relative; z-index: 1; letter-spacing: 2px; } /* Review text */ .nn-lf-slam-entry__text { font-family: 'Caveat', cursive; font-size: 17px; line-height: 1.55; color: #2a0a2e; margin: 0; position: relative; z-index: 1; } /* ── Mobile ─────────────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="lisa-frank"] .nn-comments { padding: 52px 16px 64px; } .nn-lf-slam-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .nn-lf-slam-entry { transform: none !important; } .nn-lf-slam-entry:hover { transform: scale(1.02) !important; } } @media (max-width: 480px) { .nn-lf-slam-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; } } /* ============================================================ LISA FRANK — FOOTER: BACK COVER ============================================================ */ .nn-lf-footer { display: none; } [data-theme="lisa-frank"] .nn-lf-footer { display: block; } [data-theme="lisa-frank"] .nn-footer__inner { display: none; } [data-theme="lisa-frank"] .nn-sj-footer-top { display: none; } [data-theme="lisa-frank"] .nn-w98-footer { display: none; } /* Footer wrapper */ [data-theme="lisa-frank"] .nn-footer { background: linear-gradient(160deg, #16002e 0%, #08001a 50%, #16002e 100%); width: 100vw; margin-left: calc(-50vw + 50%); padding: 72px 24px 52px; text-align: center; position: relative; overflow: hidden; } /* Sparkles */ .nn-lf-footer-sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .nn-lf-footer-sparkles span { position: absolute; font-style: normal; animation: nn-lf-slam-twinkle var(--tw-dur, 0.7s) ease-in-out var(--tw-del, 0s) infinite; background: linear-gradient(90deg, #FF1493, #ffee00, #00ccff, #aa00ff); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } /* All content above sparkles */ .nn-lf-footer__logo, .nn-lf-footer__headline, .nn-lf-footer__nav, .nn-lf-footer__social, .nn-lf-footer__yearbook, .nn-lf-footer__signoff, .nn-lf-footer__copy, .nn-lf-footer__customize { position: relative; z-index: 1; } /* Logo — puffy sticker with glow */ .nn-lf-footer__logo { margin-bottom: 20px; } .nn-lf-footer__logo img { height: 120px; width: auto; filter: drop-shadow(0 0 16px rgba(255, 20, 147, 0.55)) drop-shadow(0 0 36px rgba(170, 0, 255, 0.35)); animation: nn-lf-jar-float 3.8s ease-in-out infinite; } /* Headline */ .nn-lf-footer__headline { font-family: 'Caveat', cursive; font-size: clamp(28px, 5vw, 50px); font-weight: 700; background: linear-gradient(90deg, #FF1493, #ff6600, #ffee00, #00ccff, #aa00ff); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 32px; line-height: 1.1; } /* Nav */ .nn-lf-footer__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 28px; margin-bottom: 20px; } .nn-lf-footer__nav-link { font-family: 'Caveat', cursive; font-size: 22px; font-weight: 700; color: var(--lf-nc, #FF1493); text-decoration: none; transition: opacity 0.2s; } .nn-lf-footer__nav-link:hover { opacity: 0.7; text-decoration: underline; } /* Social */ .nn-lf-footer__social { display: flex; justify-content: center; gap: 16px; margin-bottom: 40px; } .nn-lf-footer__social-link { font-family: 'Caveat', cursive; font-size: 18px; color: rgba(255, 255, 255, 0.82); text-decoration: none; background: rgba(255, 255, 255, 0.07); padding: 7px 18px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.14); transition: background 0.2s, border-color 0.2s; } .nn-lf-footer__social-link:hover { background: rgba(255, 20, 147, 0.18); border-color: rgba(255, 20, 147, 0.45); } /* Sign My Yearbook */ .nn-lf-footer__yearbook { max-width: 440px; margin: 0 auto 36px; } .nn-lf-footer__yearbook-label { font-family: 'Caveat', cursive; font-size: 24px; font-weight: 700; color: rgba(255, 215, 0, 0.9); margin: 0 0 14px; } .nn-lf-footer__yearbook-form { display: flex; gap: 10px; align-items: flex-end; } /* Input styled as a handwritten blank line */ .nn-lf-footer__yearbook-input { flex: 1; background: transparent; border: none; border-bottom: 2px solid rgba(255, 255, 255, 0.45); color: #ffffff; font-family: 'Caveat', cursive; font-size: 19px; padding: 4px 2px 8px; outline: none; transition: border-color 0.2s; } .nn-lf-footer__yearbook-input::placeholder { color: rgba(255, 255, 255, 0.38); font-family: 'Caveat', cursive; } .nn-lf-footer__yearbook-input:focus { border-bottom-color: #FF1493; } /* Puffy pill button */ .nn-lf-footer__yearbook-btn { font-family: 'Caveat', cursive; font-size: 17px; font-weight: 700; color: #ffffff; background: linear-gradient(135deg, #FF1493, #aa00ff); border: none; border-radius: 30px; padding: 9px 22px; cursor: pointer; box-shadow: 0 4px 0 rgba(170, 0, 255, 0.5), 0 6px 18px rgba(255, 20, 147, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; flex-shrink: 0; } .nn-lf-footer__yearbook-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(170, 0, 255, 0.5), 0 10px 24px rgba(255, 20, 147, 0.45); } /* Sign-off */ .nn-lf-footer__signoff { font-family: 'Caveat', cursive; font-size: 36px; font-weight: 700; color: #aa00ff; margin: 0 0 20px; } /* Copyright */ .nn-lf-footer__copy { font-family: 'Caveat', cursive; font-size: 14px; color: rgba(255, 255, 255, 0.52); margin: 0 0 6px; } .nn-lf-footer__customize { margin: 0; } .nn-lf-footer__customize a { font-family: 'Caveat', cursive; font-size: 14px; color: rgba(255, 215, 0, 0.72); text-decoration: none; } .nn-lf-footer__customize a:hover { color: rgba(255, 215, 0, 1); } /* Mobile */ @media (max-width: 768px) { [data-theme="lisa-frank"] .nn-footer { padding: 52px 20px 40px; } .nn-lf-footer__logo img { height: 90px; } .nn-lf-footer__yearbook-form { flex-direction: column; align-items: stretch; } .nn-lf-footer__yearbook-btn { border-radius: 30px; } } /* ============================================================ NICKELODEON — Phase 5 Part 7 ============================================================ */ /* ── CSS VARIABLE OVERRIDES ───────────────────────────────── */ [data-theme="nickelodeon"] { --color-button-bg: #3DFF47; --color-button-text: #1a1a1a; --color-accent: #3DFF47; --color-border: #cc4400; } /* ── BODY ─────────────────────────────────────────────────── */ [data-theme="nickelodeon"] body { background: #FF6600; } /* ── SLIME DRIP SYSTEM (hero-contained only) ──────────────── */ @keyframes nn-nick-drip-pulse { 0% { height: 8px; border-radius: 50% 50% 50% 50% / 0 0 100% 100%; } 40% { height: var(--drip-max, 30px); border-radius: 44% 44% 56% 56% / 0 0 100% 100%; } 70% { height: var(--drip-max, 30px); border-radius: 40% 40% 62% 62% / 0 0 100% 100%; } 100% { height: 8px; border-radius: 50% 50% 50% 50% / 0 0 100% 100%; } } /* Base: all drip spans hidden */ .nn-nick-hero-top-row span, .nn-nick-hero-drips span { display: none; position: absolute; background: #3DFF47; border-radius: 50% 50% 50% 50% / 0 0 100% 100%; box-shadow: 0 3px 10px rgba(61, 255, 71, 0.55), inset 0 -3px 5px rgba(0, 170, 20, 0.35); animation: nn-nick-drip-pulse 2.2s ease-in-out var(--drip-del, 0s) infinite; pointer-events: none; top: 0; } [data-theme="nickelodeon"] .nn-nick-hero-top-row span, [data-theme="nickelodeon"] .nn-nick-hero-drips span { display: block; } /* Full-width hero top drip row */ .nn-nick-hero-top-row { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 0; pointer-events: none; z-index: 3; } [data-theme="nickelodeon"] .nn-nick-hero-top-row { display: block; } /* ── MARQUEE ──────────────────────────────────────────────── */ .nn-marquee--nickelodeon { display: none; } [data-theme="nickelodeon"] .nn-marquee--default { display: none; } [data-theme="nickelodeon"] .nn-marquee--space-jam { display: none; } [data-theme="nickelodeon"] .nn-marquee--windows-98 { display: none; } [data-theme="nickelodeon"] .nn-marquee--lisa-frank { display: none; } [data-theme="nickelodeon"] .nn-marquee--nickelodeon { display: inline-block; } [data-theme="nickelodeon"] .nn-marquee-bar { background-color: #FF1493; background-image: repeating-conic-gradient(#FF1493 0% 25%, #FFE600 0% 50%); background-size: 14px 14px; border-bottom: none; box-shadow: none; } [data-theme="nickelodeon"] .nn-marquee--nickelodeon { color: #ffffff; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; } /* ── NAV ──────────────────────────────────────────────────── */ [data-theme="nickelodeon"] .nn-nav { background-color: #FF6600; border-bottom: none; box-shadow: none; position: relative; padding-top: 6px; padding-bottom: 6px; } [data-theme="nickelodeon"] .nn-nav__inner { min-height: 80px; } [data-theme="nickelodeon"] .nn-nav::before, [data-theme="nickelodeon"] .nn-nav::after { display: none; } [data-theme="nickelodeon"] .nn-nav__logo img { height: 80px; } [data-theme="nickelodeon"] .nn-nav__tab { color: #ffffff; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; position: relative; } /* Remove any existing ::before underline decoration */ [data-theme="nickelodeon"] .nn-nav__tab::before { display: none; } /* White organic blob appears on hover/active */ [data-theme="nickelodeon"] .nn-nav__tab::after { content: ''; position: absolute; inset: -5px -10px; background: #ffffff; border-radius: 42% 58% 52% 48% / 48% 42% 58% 52%; opacity: 0; z-index: -1; transition: opacity 0.14s ease; } [data-theme="nickelodeon"] .nn-nav__tab:hover { color: #FF6600; } [data-theme="nickelodeon"] .nn-nav__tab:hover::after { opacity: 1; } [data-theme="nickelodeon"] .nn-nav__tab.is-active { color: #FF6600; } [data-theme="nickelodeon"] .nn-nav__tab.is-active::after { opacity: 1; } [data-theme="nickelodeon"] .nn-nav__cart { color: #ffffff; } [data-theme="nickelodeon"] .nn-cart-badge { background: #3DFF47; color: #1a1a1a; font-weight: 900; } /* ── HERO ─────────────────────────────────────────────────── */ [data-theme="nickelodeon"] .nn-hero { background: #FF6600; border: none; position: relative; /* Subtle diagonal stripe texture = Nick broadcast energy */ background-image: repeating-linear-gradient( -45deg, transparent, transparent 18px, rgba(0,0,0,0.04) 18px, rgba(0,0,0,0.04) 19px ); } /* Buttons */ [data-theme="nickelodeon"] .nn-btn--primary { background: #3DFF47; color: #1a1a1a; border-color: #3DFF47; box-shadow: 4px 4px 0 #00881A; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; } [data-theme="nickelodeon"] .nn-btn--primary:hover { background: #00CC22; border-color: #00CC22; box-shadow: 2px 2px 0 #005510; transform: translate(2px, 2px); } [data-theme="nickelodeon"] .nn-btn--secondary { border-color: rgba(255,255,255,0.7); color: #ffffff; } [data-theme="nickelodeon"] .nn-btn--secondary:hover { background: rgba(255,255,255,0.12); border-color: #ffffff; } /* Text colors */ [data-theme="nickelodeon"] .nn-hero__headline { color: #ffffff; text-shadow: 2px 2px 0 rgba(0,0,0,0.15); } [data-theme="nickelodeon"] .nn-hero__sub { color: rgba(255,255,255,0.9); } [data-theme="nickelodeon"] .nn-hero__stars-icons { color: #3DFF47; } [data-theme="nickelodeon"] .nn-hero__stars-label { color: rgba(255,255,255,0.8); } /* Double Dare eyebrow */ .nn-nick-dd-eyebrow { display: none; align-items: center; gap: 8px; margin-bottom: 14px; } [data-theme="nickelodeon"] .nn-nick-dd-eyebrow { display: flex; } .nn-nick-dd-eyebrow__text { font-family: 'Boogaloo', 'Fredoka One', cursive; font-size: clamp(11px, 1.6vw, 14px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; background: #1a1a1a; padding: 4px 14px 3px 10px; border-radius: 4px; border-left: 5px solid #3DFF47; } .nn-nick-dd-eyebrow__flag { font-size: 14px; line-height: 1; } /* ── HERO IMAGE MAGIC ─────────────────────────────────────── */ [data-theme="nickelodeon"] .nn-hero__image { position: relative; } /* Blob layer — z-index 0, behind everything */ .nn-nick-hero-magic { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 0; } [data-theme="nickelodeon"] .nn-nick-hero-magic { display: block; } /* Product images sit above the blob */ [data-theme="nickelodeon"] .nn-hero__products { position: relative; z-index: 1; } /* Morphing green slime blob behind the jar */ .nn-nick-slime-blob { position: absolute; top: 50%; left: 50%; width: 290px; height: 270px; transform: translate(-50%, -50%); background: radial-gradient(ellipse at 38% 32%, #90FF30 0%, #3DFF47 38%, #00CC22 75%, #009918 100%); border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; animation: nn-nick-blob-morph 5s ease-in-out infinite; opacity: 0.92; box-shadow: 0 0 50px rgba(61, 255, 71, 0.45), 0 0 100px rgba(61, 255, 71, 0.2), inset 0 -24px 44px rgba(0, 130, 15, 0.35); } @keyframes nn-nick-blob-morph { 0% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; transform: translate(-50%,-50%) scale(1); } 20% { border-radius: 40% 60% 30% 70% / 60% 40% 70% 50%; transform: translate(-50%,-50%) scale(1.04); } 40% { border-radius: 70% 30% 55% 45% / 45% 65% 35% 65%; transform: translate(-50%,-50%) scale(0.96); } 60% { border-radius: 35% 65% 40% 60% / 70% 40% 60% 30%; transform: translate(-50%,-50%) scale(1.05); } 80% { border-radius: 55% 45% 65% 35% / 38% 62% 45% 55%; transform: translate(-50%,-50%) scale(0.97); } 100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; transform: translate(-50%,-50%) scale(1); } } /* Slime drips from top of hero image area */ .nn-nick-hero-drips { position: absolute; top: 0; left: 0; width: 100%; height: 0; pointer-events: none; z-index: 1; } /* Floating Nick emojis */ .nn-nick-floaters { position: absolute; inset: 0; pointer-events: none; } .nn-nick-float { position: absolute; animation: nn-nick-float-anim var(--nfl-dur, 3s) ease-in-out var(--nfl-del, 0s) infinite; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); } .nn-nick-float--b { position: absolute; animation: nn-nick-float-b-anim var(--nfl-dur, 3s) ease-in-out var(--nfl-del, 0s) infinite; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); } @keyframes nn-nick-float-anim { 0%, 100% { transform: translateY(0px) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } } @keyframes nn-nick-float-b-anim { 0%, 100% { transform: translateY(-10px) rotate(5deg); } 50% { transform: translateY(8px) rotate(-5deg); } } /* YOU'VE BEEN SLIMED badge — direct child of nn-hero__image, above products */ .nn-nick-slimed-badge { display: none; position: absolute; top: 6%; right: 3%; z-index: 2; width: 100px; height: 100px; background: #FF6600; border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #FF6600, 0 0 0 11px #3DFF47, 0 6px 24px rgba(0,0,0,0.3); animation: nn-nick-badge-wobble 3.5s ease-in-out infinite; } [data-theme="nickelodeon"] .nn-nick-slimed-badge { display: flex; } .nn-nick-slimed-badge__text { font-family: 'Boogaloo', 'Fredoka One', cursive; font-size: 11px; font-weight: 700; color: #ffffff; text-align: center; text-transform: uppercase; line-height: 1.2; letter-spacing: 0.03em; pointer-events: none; } @keyframes nn-nick-badge-wobble { 0%, 100% { transform: rotate(-5deg) scale(1); border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%; } 25% { transform: rotate(4deg) scale(1.06); border-radius: 52% 48% 56% 44% / 44% 56% 48% 52%; } 50% { transform: rotate(-3deg) scale(1.02); border-radius: 44% 56% 50% 50% / 56% 44% 52% 48%; } 75% { transform: rotate(5deg) scale(0.96); border-radius: 56% 44% 44% 56% / 48% 52% 44% 56%; } } /* ── MOBILE ───────────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="nickelodeon"] .nn-nav__logo img { height: 90px; } /* Clip the active tab blob so it doesn't overflow the checker strips */ [data-theme="nickelodeon"] .nn-nav__tab::after { inset: -2px -6px; } /* Double Dare eyebrow — prevent cutoff on narrow screens */ [data-theme="nickelodeon"] .nn-nick-dd-eyebrow { gap: 4px; } [data-theme="nickelodeon"] .nn-nick-dd-eyebrow__flag { display: none; } .nn-nick-dd-eyebrow__text { font-size: 10px; letter-spacing: 0.06em; padding: 3px 8px 3px 8px; white-space: nowrap; } .nn-nick-slime-blob { width: 200px; height: 185px; } .nn-nick-slimed-badge { width: 78px; height: 78px; top: 3%; right: 1%; } .nn-nick-slimed-badge__text { font-size: 9px; } } /* ============================================================ BLOCKBUSTER — Phase 5 Part 8 ============================================================ */ /* ── CSS VARIABLE OVERRIDES ───────────────────────────────── */ [data-theme="blockbuster"] { --color-button-bg: #F5A623; --color-button-text: #1a1a1a; --color-accent: #F5A623; --color-border: #F5A623; --border-style: none; --border-glow: none; } /* ── BODY ─────────────────────────────────────────────────── */ [data-theme="blockbuster"] body { background: #1A4FC4; padding-top: 48px; /* taller film strip marquee */ } /* ── MARQUEE — 35mm FILM STRIP ────────────────────────────── */ /* Hidden by default; all others off when Blockbuster is active */ .nn-marquee--blockbuster { display: none; } [data-theme="blockbuster"] .nn-marquee--default { display: none; } [data-theme="blockbuster"] .nn-marquee--space-jam { display: none; } [data-theme="blockbuster"] .nn-marquee--windows-98 { display: none; } [data-theme="blockbuster"] .nn-marquee--lisa-frank { display: none; } [data-theme="blockbuster"] .nn-marquee--nickelodeon { display: none; } [data-theme="blockbuster"] .nn-marquee--blockbuster { display: inline-block; } [data-theme="blockbuster"] .nn-w98-title-buttons { display: none; } [data-theme="blockbuster"] .nn-marquee-bar { height: 48px; background-color: #111111; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 48'%3E%3Crect x='6' y='3' width='8' height='11' rx='2' fill='%23F5A623' opacity='0.75'/%3E%3Crect x='6' y='34' width='8' height='11' rx='2' fill='%23F5A623' opacity='0.75'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 20px 48px; border-bottom: none; box-shadow: none; } [data-theme="blockbuster"] .nn-marquee-link { height: 48px; } [data-theme="blockbuster"] .nn-marquee--blockbuster { font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #FFB829; line-height: 48px; padding: 0 40px; text-shadow: 0 0 12px rgba(245,166,35,0.5); } /* ── NAV ──────────────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-nav { top: 48px; background: #1A4FC4; border-top: 4px solid #F5A623; border-bottom: 4px solid #F5A623; box-shadow: none; } [data-theme="blockbuster"] .nn-nav__inner { min-height: 120px; } [data-theme="blockbuster"] .nn-nav__logo img { display: none !important; } [data-theme="blockbuster"] .nn-nav__logo { background-image: url('https://i.ibb.co/cSwRfnGJ/Blockbuster-logo-NN.png'); background-size: contain; background-repeat: no-repeat; background-position: center left; width: 200px; height: 120px; } /* Tabs — Anton, white, uppercase */ [data-theme="blockbuster"] .nn-nav__tab { font-family: 'Anton', sans-serif; font-size: 15px; letter-spacing: 0.1em; color: #ffffff; height: 120px; padding: 0 20px; border-bottom: none; transition: background 0.1s, color 0.1s; } /* Kill base ::before highlight */ [data-theme="blockbuster"] .nn-nav__tab::before { display: none; } /* Gold NEW RELEASES badge — hover + active */ [data-theme="blockbuster"] .nn-nav__tab:hover, [data-theme="blockbuster"] .nn-nav__tab.is-active { background: #F5A623; color: #111111; border-bottom: none; } /* Cart */ [data-theme="blockbuster"] .nn-nav__cart { color: #ffffff; } [data-theme="blockbuster"] .nn-cart-badge { background: #F5A623; color: #111111; } /* ── MEMBER NUMBER ────────────────────────────────────────── */ .nn-bb-member-no { display: none; } [data-theme="blockbuster"] .nn-bb-member-no { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; margin-right: 8px; flex-shrink: 0; } [data-theme="blockbuster"] .nn-bb-member-no__label { font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 500; color: rgba(245,166,35,0.6); letter-spacing: 0.25em; text-transform: uppercase; } [data-theme="blockbuster"] .nn-bb-member-no__number { font-family: 'Anton', sans-serif; font-size: 20px; color: #F5A623; letter-spacing: 0.06em; } /* ── MOBILE ───────────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="blockbuster"] body { padding-top: 48px; } [data-theme="blockbuster"] .nn-marquee--blockbuster { font-size: 11px; letter-spacing: 0.12em; } [data-theme="blockbuster"] .nn-nav__inner { min-height: 70px; } [data-theme="blockbuster"] .nn-nav__tab { height: auto; padding: 8px 12px; font-size: 13px; } [data-theme="blockbuster"] .nn-nav__logo { width: 110px; height: 62px; align-self: flex-start; margin-top: 0px; } [data-theme="blockbuster"] .nn-bb-member-no { display: none; } } /* ═══════════════════════════════════════════════════════════════ BLOCKBUSTER — HERO ═══════════════════════════════════════════════════════════════ */ /* ── Keyframes ─────────────────────────────────────────────── */ @keyframes nn-bb-vhs-wipe { 0% { transform: scaleX(1); opacity: 1; } 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(0); opacity: 0; } } @keyframes nn-bb-glitch { 0%, 96% { clip-path: none; transform: none; opacity: 1; } 97% { clip-path: inset(30% 0 55% 0); transform: translateX(-4px); opacity: 0.85; } 97.5% { clip-path: inset(60% 0 20% 0); transform: translateX(4px); opacity: 0.85; } 98% { clip-path: inset(10% 0 75% 0); transform: translateX(-2px); opacity: 0.9; } 98.5% { clip-path: none; transform: none; opacity: 1; } 99% { clip-path: inset(45% 0 40% 0); transform: translateX(3px); opacity: 0.8; } 100% { clip-path: none; transform: none; opacity: 1; } } @keyframes nn-bb-reel-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes nn-bb-tracking { 0%, 88% { opacity: 0; } 90% { opacity: 1; transform: translateY(0); } 93% { opacity: 0.7; transform: translateY(2px); } 95% { opacity: 1; transform: translateY(0); } 98% { opacity: 0; } 100% { opacity: 0; } } /* ── Hero section base ─────────────────────────────────────── */ [data-theme="blockbuster"] .nn-hero { position: relative; overflow: hidden; /* Blockbuster carpet: navy base, gold diagonal lattice — the real thing */ background-color: #0B1730; background-image: repeating-linear-gradient( 45deg, transparent 0, transparent 11px, rgba(245,166,35,0.28) 11px, rgba(245,166,35,0.28) 13px, transparent 13px, transparent 24px ), repeating-linear-gradient( -45deg, transparent 0, transparent 11px, rgba(245,166,35,0.28) 11px, rgba(245,166,35,0.28) 13px, transparent 13px, transparent 24px ), repeating-linear-gradient( 45deg, transparent 0, transparent 23px, rgba(26,79,196,0.5) 23px, rgba(26,79,196,0.5) 25px, transparent 25px, transparent 48px ), repeating-linear-gradient( -45deg, transparent 0, transparent 23px, rgba(26,79,196,0.5) 23px, rgba(26,79,196,0.5) 25px, transparent 25px, transparent 48px ); animation: nn-bb-glitch 6s steps(1) infinite; } /* Kill Nick + Win98 + LF hero decorations */ [data-theme="blockbuster"] .nn-nick-hero-top-row, [data-theme="blockbuster"] .nn-w98-titlebar, [data-theme="blockbuster"] .nn-w98-menubar, [data-theme="blockbuster"] .nn-nick-dd-eyebrow, [data-theme="blockbuster"] .nn-nick-hero-magic, [data-theme="blockbuster"] .nn-nick-slimed-badge, [data-theme="blockbuster"] .nn-lf-hero-magic, [data-theme="blockbuster"] .nn-lf-cloud { display: none !important; } /* ── VHS loading entrance bar ──────────────────────────────── */ .nn-bb-vhs-entrance { display: none; } [data-theme="blockbuster"] .nn-bb-vhs-entrance { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #111111; transform-origin: left center; animation: nn-bb-vhs-wipe 1.1s cubic-bezier(0.77,0,0.175,1) forwards; z-index: 10; pointer-events: none; } /* ── Scan lines ────────────────────────────────────────────── */ .nn-bb-scanlines { display: none; } [data-theme="blockbuster"] .nn-bb-scanlines { display: block; position: absolute; inset: 0; background-image: repeating-linear-gradient( to bottom, transparent, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 4px ); pointer-events: none; z-index: 2; } /* ── VHS tape reel watermarks ──────────────────────────────── */ .nn-bb-reels { display: none; } [data-theme="blockbuster"] .nn-bb-reels { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 1; } [data-theme="blockbuster"] .nn-bb-reel { position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 14px solid rgba(245,166,35,0.07); box-shadow: inset 0 0 0 40px rgba(245,166,35,0.04), inset 0 0 0 80px transparent, inset 0 0 0 90px rgba(245,166,35,0.04); animation: nn-bb-reel-spin 12s linear infinite; } [data-theme="blockbuster"] .nn-bb-reel--left { bottom: -60px; left: -60px; animation-direction: normal; } [data-theme="blockbuster"] .nn-bb-reel--right { top: -60px; right: -60px; animation-direction: reverse; } /* ── Staff Pick eyebrow ────────────────────────────────────── */ .nn-bb-staff-pick { display: none; } [data-theme="blockbuster"] .nn-bb-staff-pick { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } [data-theme="blockbuster"] .nn-bb-staff-pick__badge { font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.18em; background: #F5A623; color: #111111; padding: 3px 8px; text-transform: uppercase; } [data-theme="blockbuster"] .nn-bb-staff-pick__dot { color: rgba(245,166,35,0.5); font-size: 8px; } [data-theme="blockbuster"] .nn-bb-staff-pick__text { font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); } /* ── Stars → ▶▶▶▶▶ ─────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-hero__stars-icons { font-size: 0; letter-spacing: 0; } [data-theme="blockbuster"] .nn-hero__stars-icons::after { content: '▶▶▶▶▶'; font-size: 14px; color: #F5A623; letter-spacing: 3px; } [data-theme="blockbuster"] .nn-hero__stars-label { font-family: 'Oswald', sans-serif; font-size: 13px; color: rgba(255,255,255,0.6); } /* ── Headline + sub ────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-hero__headline { font-family: 'Anton', sans-serif; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: 0.02em; color: #ffffff; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0,0,0,0.5); } [data-theme="blockbuster"] .nn-hero__sub { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 400; color: rgba(255,255,255,0.75); } /* ── CTA buttons ───────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-btn--primary { font-family: 'Anton', sans-serif; font-size: 15px; letter-spacing: 0.14em; background: #F5A623; color: #111111; border: none; text-transform: uppercase; } [data-theme="blockbuster"] .nn-btn--primary:hover { background: #FFB829; } [data-theme="blockbuster"] .nn-btn--secondary { font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 0.1em; background: transparent; color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.25); } [data-theme="blockbuster"] .nn-btn--secondary:hover { border-color: #F5A623; color: #F5A623; } /* ── Arrow → ⏪ ─────────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-hero__arrow svg { display: none; } [data-theme="blockbuster"] .nn-hero__arrow::after { content: '⏩'; font-size: 32px; display: block; line-height: 1; filter: drop-shadow(0 0 8px rgba(245,166,35,0.6)); } /* ── PREVIOUSLY DISCONTINUED sticker ──────────────────────── */ /* ── Center product images ─────────────────────────────────── */ [data-theme="blockbuster"] .nn-hero__products { justify-content: center; align-items: center; } /* ── Mobile hero ───────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="blockbuster"] .nn-bb-reel--left { width: 130px; height: 130px; bottom: -40px; left: -40px; } [data-theme="blockbuster"] .nn-bb-reel--right { width: 130px; height: 130px; top: -40px; right: -40px; } [data-theme="blockbuster"] .nn-hero__headline { font-size: clamp(1.8rem, 7vw, 2.4rem); } } /* ═══════════════════════════════════════════════════════════════ BLOCKBUSTER — TRUST / VHS NEW RELEASE WALL ═══════════════════════════════════════════════════════════════ */ /* Hide all other theme trust sections */ [data-theme="blockbuster"] .nn-trust-strip { display: none !important; } [data-theme="blockbuster"] .nn-jumbotron { display: none !important; } [data-theme="blockbuster"] .nn-w98-sysprops { display: none !important; } [data-theme="blockbuster"] .nn-lf-sticker-sheet { display: none !important; } /* ── Section wrapper ───────────────────────────────────────── */ .nn-bb-trust { display: none; } [data-theme="blockbuster"] .nn-bb-trust { display: block; background: #0B1730; padding: 0 32px 0; position: relative; } /* ── Film strip top edge ───────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-trust__filmstrip { height: 24px; background-color: #111111; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Crect x='5' y='2' width='10' height='8' rx='2' fill='%23F5A623' opacity='0.7'/%3E%3Crect x='5' y='14' width='10' height='8' rx='2' fill='%23F5A623' opacity='0.7'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 20px 24px; margin-bottom: 40px; } /* ── NOW ON THE SHELF header ───────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-trust__header { display: flex; align-items: center; gap: 20px; justify-content: center; margin-bottom: 40px; } [data-theme="blockbuster"] .nn-bb-trust__header-line { flex: 1; max-width: 200px; height: 1px; background: linear-gradient(to right, transparent, rgba(245,166,35,0.5)); } [data-theme="blockbuster"] .nn-bb-trust__header-line:last-child { background: linear-gradient(to left, transparent, rgba(245,166,35,0.5)); } [data-theme="blockbuster"] .nn-bb-trust__header-text { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.35em; color: #F5A623; text-transform: uppercase; white-space: nowrap; } /* ── Shelf scroll wrapper ──────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-trust__shelf-wrap { position: relative; } [data-theme="blockbuster"] .nn-bb-trust__shelf { display: flex; gap: 18px; justify-content: center; align-items: flex-end; } /* ── VHS tape case shell ───────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-tape { width: 160px; flex-shrink: 0; display: flex; flex-direction: column; border: 3px solid #111111; border-radius: 2px; overflow: hidden; cursor: default; transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 4px 4px 0 rgba(0,0,0,0.5); } [data-theme="blockbuster"] .nn-bb-tape:hover { transform: translateY(-16px); box-shadow: 6px 28px 40px rgba(0,0,0,0.7); } /* ── White label area (top) ────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-tape__label { background: #f0ece0; padding: 10px 10px 8px; border-bottom: 2px solid #111111; flex-shrink: 0; } [data-theme="blockbuster"] .nn-bb-tape__label-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } [data-theme="blockbuster"] .nn-bb-tape__store-tag { font-family: 'Oswald', sans-serif; font-size: 7px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: #FFE020; color: #111111; padding: 2px 5px; display: inline-block; } [data-theme="blockbuster"] .nn-bb-tape__store-tag--pick { background: #F5A623; } [data-theme="blockbuster"] .nn-bb-tape__genre { font-family: 'Oswald', sans-serif; font-size: 7px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #555555; } /* CSS barcode — alternating thin/thick bars */ [data-theme="blockbuster"] .nn-bb-tape__barcode { height: 28px; background-image: repeating-linear-gradient( to right, #111111 0px, #111111 2px, transparent 2px, transparent 4px, #111111 4px, #111111 5px, transparent 5px, transparent 7px, #111111 7px, #111111 10px, transparent 10px, transparent 12px, #111111 12px, #111111 13px, transparent 13px, transparent 15px, #111111 15px, #111111 18px, transparent 18px, transparent 20px, #111111 20px, #111111 21px, transparent 21px, transparent 23px, #111111 23px, #111111 25px, transparent 25px, transparent 27px, #111111 27px, #111111 29px, transparent 29px, transparent 31px, #111111 31px, #111111 32px, transparent 32px, transparent 34px, #111111 34px, #111111 37px, transparent 37px, transparent 38px ); background-size: 38px 100%; background-repeat: repeat-x; } /* ── Blue body panel ───────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-tape__body { background: #1A4FC4; flex: 1; /* Gold border frame inset */ box-shadow: inset 0 0 0 4px #1A4FC4, inset 0 0 0 6px #F5A623, inset 0 0 0 8px #1A4FC4; display: flex; align-items: center; justify-content: center; padding: 20px 12px; } [data-theme="blockbuster"] .nn-bb-tape__inner { display: flex; flex-direction: column; align-items: center; gap: 4px; } [data-theme="blockbuster"] .nn-bb-tape__stat { font-family: 'Anton', sans-serif; font-size: 2.4rem; line-height: 1; color: #FFE020; letter-spacing: 0.02em; text-align: center; } [data-theme="blockbuster"] .nn-bb-tape__sub { font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.18em; color: rgba(255,255,255,0.85); text-transform: uppercase; text-align: center; } /* ── Tape spool window (bottom of case) ────────────────────── */ [data-theme="blockbuster"] .nn-bb-tape__spool { background: #1a1a1a; height: 36px; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 16px; border-top: 2px solid #111111; flex-shrink: 0; } [data-theme="blockbuster"] .nn-bb-tape__reel { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #444444; background: #2a2a2a; box-shadow: inset 0 0 0 4px #1a1a1a, inset 0 0 0 6px #3a3a3a; } /* ── Wooden shelf plank ────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-trust__plank { height: 24px; background: linear-gradient( to bottom, #9B7230 0%, #7A5520 50%, #5C3E10 100% ); box-shadow: inset 0 2px 0 rgba(255,220,130,0.3), 0 8px 20px rgba(0,0,0,0.6); } [data-theme="blockbuster"] .nn-bb-trust__plank-edge { height: 3px; background: rgba(255,210,120,0.15); } /* ── Mobile: horizontal scroll aisle ──────────────────────── */ @media (max-width: 768px) { [data-theme="blockbuster"] .nn-bb-trust { padding: 0; } [data-theme="blockbuster"] .nn-bb-trust__shelf { justify-content: flex-start; overflow-x: auto; padding: 0 24px; gap: 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } [data-theme="blockbuster"] .nn-bb-trust__shelf::-webkit-scrollbar { display: none; } [data-theme="blockbuster"] .nn-bb-tape { width: 136px; scroll-snap-align: start; } [data-theme="blockbuster"] .nn-bb-tape__stat { font-size: 2rem; } [data-theme="blockbuster"] .nn-bb-trust__header { padding: 0 24px; } } /* ═══════════════════════════════════════════════════════════════ BLOCKBUSTER — PRODUCT GRID / VHS SHELF UNIT ═══════════════════════════════════════════════════════════════ */ /* Hide default grid elements */ [data-theme="blockbuster"] .nn-w98-explorer, [data-theme="blockbuster"] .nn-section-header, [data-theme="blockbuster"] .nn-section-sub, [data-theme="blockbuster"] .nn-w98-explorer__pane, [data-theme="blockbuster"] .nn-w98-explorer__statusbar { display: none !important; } /* ── Section wrapper ───────────────────────────────────────── */ [data-theme="blockbuster"] .nn-product-grid { background: #0B1730; padding: 60px 40px 0; border: none !important; outline: none !important; box-shadow: none !important; } /* ── Shelf unit outer ──────────────────────────────────────── */ .nn-bb-shelf-unit { display: none; } [data-theme="blockbuster"] .nn-bb-shelf-unit { display: block; max-width: 960px; margin: 0 auto; position: relative; } /* ── Store sign ────────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-shelf-sign { display: flex; justify-content: center; margin-bottom: 0; position: relative; z-index: 2; } [data-theme="blockbuster"] .nn-bb-shelf-sign__ticket { background: #1A4FC4; border: 6px solid #F5A623; clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%); padding: 18px 60px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 24px rgba(0,0,0,0.5); } [data-theme="blockbuster"] .nn-bb-shelf-sign__img { height: 90px; width: auto; object-fit: contain; display: block; } /* ── Shelf body (blue sides + dark back) ───────────────────── */ [data-theme="blockbuster"] .nn-bb-shelf-body { background: #0D1B3E; border-left: 22px solid #1A4FC4; border-right: 22px solid #1A4FC4; outline: 4px solid #F5A623; outline-offset: 0; padding: 24px 0 0; } /* ── Shelf row ─────────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-shelf-row { display: flex; justify-content: center; align-items: flex-end; gap: 0; padding: 0 16px; } /* ── Shelf plank ───────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-shelf-plank { margin: 0; } [data-theme="blockbuster"] .nn-bb-shelf-plank__face { height: 18px; background: linear-gradient( to bottom, #F2C84B 0%, #D4A520 55%, #B88C10 100% ); box-shadow: inset 0 2px 0 rgba(255,245,180,0.45); } [data-theme="blockbuster"] .nn-bb-shelf-plank__edge { height: 10px; background: linear-gradient( to bottom, #8B6A10 0%, #5C4208 100% ); box-shadow: 0 6px 16px rgba(0,0,0,0.55); } /* ── Sign glow animation ───────────────────────────────────── */ @keyframes nn-bb-sign-pulse { 0%, 100% { filter: drop-shadow(0 0 8px rgba(245,166,35,0.9)) drop-shadow(0 0 20px rgba(245,166,35,0.5)) drop-shadow(0 0 40px rgba(245,166,35,0.25)); } 50% { filter: drop-shadow(0 0 14px rgba(245,166,35,1)) drop-shadow(0 0 35px rgba(245,166,35,0.75)) drop-shadow(0 0 70px rgba(245,166,35,0.4)); } } [data-theme="blockbuster"] .nn-bb-shelf-sign { animation: nn-bb-sign-pulse 2.8s ease-in-out infinite; } /* ── Jar card — VHS case frame ─────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-jar-card { flex: 1; display: flex; flex-direction: column; padding: 0; position: relative; border: 3px solid #111111; border-radius: 2px; overflow: hidden; box-shadow: 3px 3px 0 rgba(0,0,0,0.5); transition: transform 0.22s ease, box-shadow 0.22s ease; } [data-theme="blockbuster"] .nn-bb-jar-card:hover { transform: translateY(-12px); box-shadow: 6px 22px 32px rgba(0,0,0,0.65); } /* ── Cover art area ────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-jar-card__img-wrap { display: block; width: 100%; background: #1A4FC4; position: relative; overflow: hidden; } [data-theme="blockbuster"] .nn-bb-jar-card__img { width: 100%; height: 200px; object-fit: contain; display: block; padding: 16px 12px 12px; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.55)); } /* ── Rental sticker strip ──────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-jar-card__rental-strip { background: #111111; border-top: 2px solid #F5A623; border-bottom: 2px solid #F5A623; padding: 3px 8px; font-family: 'Oswald', sans-serif; font-size: 7px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #F5A623; text-align: center; white-space: nowrap; overflow: hidden; } /* ── Staff Pick circle ─────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-jar-card__staff-pick { position: absolute; bottom: 10px; right: 8px; width: 44px; height: 44px; border-radius: 50%; background: #FFE020; border: 2px solid #111111; display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-size: 8px; font-weight: 700; color: #111111; text-align: center; text-transform: uppercase; line-height: 1.2; transform: rotate(12deg); z-index: 2; } /* ── White label area ──────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-jar-card__label { background: #f0ece0; border-top: 2px solid #111111; padding: 8px 10px 6px; flex: 1; } /* ── CSS barcode ───────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-jar-card__barcode { height: 20px; margin-bottom: 6px; background-image: repeating-linear-gradient( to right, #111111 0px, #111111 2px, transparent 2px, transparent 4px, #111111 4px, #111111 5px, transparent 5px, transparent 7px, #111111 7px, #111111 10px, transparent 10px, transparent 12px, #111111 12px, #111111 13px, transparent 13px, transparent 15px, #111111 15px, #111111 18px, transparent 18px, transparent 20px, #111111 20px, #111111 21px, transparent 21px, transparent 23px, #111111 23px, #111111 25px, transparent 25px, transparent 27px, #111111 27px, #111111 29px, transparent 29px, transparent 31px, #111111 31px, #111111 32px, transparent 32px, transparent 34px, #111111 34px, #111111 37px, transparent 37px, transparent 38px ); background-size: 38px 100%; background-repeat: repeat-x; } [data-theme="blockbuster"] .nn-bb-jar-card__name { display: block; font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #111111; line-height: 1.3; } [data-theme="blockbuster"] .nn-bb-jar-card__price { display: block; font-family: 'Anton', sans-serif; font-size: 15px; color: #1A4FC4; letter-spacing: 0.04em; margin-top: 2px; } /* ── Add to cart button ────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-jar-card__btn { width: 100%; background: #F5A623; color: #111111; font-family: 'Anton', sans-serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 4px; border: none; cursor: pointer; transition: background 0.15s; flex-shrink: 0; } [data-theme="blockbuster"] .nn-bb-jar-card__btn:hover { background: #FFB829; } /* ── Mobile ────────────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="blockbuster"] .nn-product-grid { padding: 40px 16px 0; } [data-theme="blockbuster"] .nn-bb-shelf-body { border-left-width: 12px; border-right-width: 12px; } [data-theme="blockbuster"] .nn-bb-shelf-sign__ticket { padding: 12px 40px; } [data-theme="blockbuster"] .nn-bb-shelf-sign__img { height: 60px; } /* Stack cards vertically — one jar per shelf */ [data-theme="blockbuster"] .nn-bb-shelf-row { flex-direction: column; padding: 0 8px; gap: 0; } [data-theme="blockbuster"] .nn-bb-jar-card { flex: none; width: 100%; margin-bottom: 18px; box-shadow: 3px 3px 0 rgba(0,0,0,0.4), 0 8px 0 0 #F2C84B, 0 18px 0 0 #7A5010; } /* Hide the group plank — each card has its own shelf now */ [data-theme="blockbuster"] .nn-bb-shelf-plank { display: none !important; } [data-theme="blockbuster"] .nn-bb-jar-card__img { height: 160px; } } /* ═══════════════════════════════════════════════════════════════ BLOCKBUSTER — ERA FEATURE / PREVIOUSLY VIEWED ═══════════════════════════════════════════════════════════════ */ /* Hide other theme decorations, show PMP carousel */ [data-theme="blockbuster"] .nn-lf-scratch-section { display: none !important; } [data-theme="blockbuster"] .nn-w98-mspaint { display: none !important; } [data-theme="blockbuster"] .nn-pmp__portal { display: none !important; } [data-theme="blockbuster"] .nn-pmp__header { display: none !important; } [data-theme="blockbuster"] .nn-pmp { display: none !important; } /* ── Section wrapper ───────────────────────────────────────── */ [data-theme="blockbuster"] .nn-era-feature { background-color: #0B1730; background-image: repeating-linear-gradient( 45deg, transparent 0, transparent 11px, rgba(245,166,35,0.07) 11px, rgba(245,166,35,0.07) 13px, transparent 13px, transparent 24px ), repeating-linear-gradient( -45deg, transparent 0, transparent 11px, rgba(245,166,35,0.07) 11px, rgba(245,166,35,0.07) 13px, transparent 13px, transparent 24px ); padding: 0 0 60px; overflow: hidden; } /* ── BB era header ─────────────────────────────────────────── */ .nn-bb-era-header { display: none; } [data-theme="blockbuster"] .nn-bb-era-header { display: block; text-align: center; padding: 0 24px 48px; } [data-theme="blockbuster"] .nn-bb-era-header__filmstrip { height: 28px; background-color: #111111; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Crect x='5' y='2' width='10' height='10' rx='2' fill='%23F5A623' opacity='0.7'/%3E%3Crect x='5' y='16' width='10' height='10' rx='2' fill='%23F5A623' opacity='0.7'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 20px 28px; margin-bottom: 40px; } [data-theme="blockbuster"] .nn-bb-era-header__eyebrow { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; color: #F5A623; margin-bottom: 12px; } [data-theme="blockbuster"] .nn-bb-era-header__title { font-family: 'Anton', sans-serif; font-size: clamp(2.8rem, 6vw, 4.5rem); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: #ffffff; text-shadow: 3px 3px 0 rgba(0,0,0,0.4); margin-bottom: 16px; } [data-theme="blockbuster"] .nn-bb-era-header__sub { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 400; font-style: italic; color: rgba(255,255,255,0.5); } /* ── PMP stage ─────────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-pmp__stage { position: relative; overflow: hidden; } [data-theme="blockbuster"] .nn-pmp__stage::before { content: 'BE KIND, REWIND'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg); font-family: 'Anton', sans-serif; font-size: clamp(3rem, 9vw, 8rem); letter-spacing: 0.04em; color: rgba(245,166,35,0.055); white-space: nowrap; pointer-events: none; z-index: 0; } /* ── Scrolling track ───────────────────────────────────────── */ [data-theme="blockbuster"] .nn-pmp__track { display: flex; gap: 20px; padding: 24px 40px; width: max-content; animation: nn-pmp-scroll-desk 22s linear infinite; } [data-theme="blockbuster"] .nn-pmp__stage:hover .nn-pmp__track { animation-play-state: paused; } /* ── Direction labels ──────────────────────────────────────── */ [data-theme="blockbuster"] .nn-pmp__dir-labels { font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.2em; color: rgba(245,166,35,0.65); } /* ── Individual card ───────────────────────────────────────── */ [data-theme="blockbuster"] .nn-pmp-card { position: relative; width: 220px; height: 280px; flex-shrink: 0; overflow: hidden; border: 3px solid #111111; box-shadow: 5px 5px 0 rgba(0,0,0,0.6); } /* ── Before layer (original snack) ────────────────────────── */ [data-theme="blockbuster"] .nn-pmp-card__before { position: absolute; inset: 0; background: #1a0808; display: flex; flex-direction: column; align-items: center; justify-content: center; } [data-theme="blockbuster"] .nn-pmp-card__before img { width: 200px; height: 220px; object-fit: contain; filter: grayscale(20%) sepia(15%) contrast(1.05) brightness(0.9); } /* ── After layer (NN jar) ──────────────────────────────────── */ [data-theme="blockbuster"] .nn-pmp-card__after { position: absolute; inset: 0; background: #1A4FC4; display: flex; flex-direction: column; align-items: center; justify-content: center; clip-path: inset(0 var(--pmp-clip, 100%) 0 0); will-change: clip-path; } [data-theme="blockbuster"] .nn-pmp-card__after img { width: 200px; height: 220px; object-fit: contain; } /* ── Card labels — rental stickers ────────────────────────── */ [data-theme="blockbuster"] .nn-pmp-card__label { display: block; position: absolute; bottom: 0; left: 0; right: 0; font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.12em; background: #111111; color: rgba(245,166,35,0.9); padding: 5px 10px; text-align: center; text-transform: uppercase; z-index: 2; } [data-theme="blockbuster"] .nn-pmp-card__label--after { background: #F5A623; color: #111111; } /* ── Mobile ────────────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="blockbuster"] .nn-bb-era-header { padding: 0 16px 36px; } [data-theme="blockbuster"] .nn-bb-era-header__title { font-size: clamp(2rem, 10vw, 2.8rem); } [data-theme="blockbuster"] .nn-pmp-card { width: 160px; height: 210px; } [data-theme="blockbuster"] .nn-pmp-card__before img, [data-theme="blockbuster"] .nn-pmp-card__after img { width: 140px; height: 170px; } [data-theme="blockbuster"] .nn-pmp__track { padding: 16px 24px; gap: 14px; } } /* ═══════════════════════════════════════════════════════════════ BLOCKBUSTER — INTERACTIVE VHS WALL ═══════════════════════════════════════════════════════════════ */ .nn-bb-wall { display: none; } [data-theme="blockbuster"] .nn-bb-wall { display: block; padding: 0 40px 60px; } /* ── Fluorescent shelf light bar ───────────────────── */ [data-theme="blockbuster"] .nn-bb-wall__light { height: 6px; background: linear-gradient( to right, transparent 0%, rgba(255,255,220,0.12) 10%, rgba(255,255,220,0.4) 40%, rgba(255,255,220,0.4) 60%, rgba(255,255,220,0.12) 90%, transparent 100% ); box-shadow: 0 0 24px 6px rgba(255,255,200,0.08); margin-bottom: 36px; } /* ── Scrollable row ────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-wall__row { display: flex; justify-content: center; gap: 20px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } [data-theme="blockbuster"] .nn-bb-wall__row::-webkit-scrollbar { display: none; } /* ── Flip card container ───────────────────────────── */ [data-theme="blockbuster"] .nn-bb-case { flex-shrink: 0; width: 180px; height: 278px; perspective: 1000px; cursor: pointer; } [data-theme="blockbuster"] .nn-bb-case__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); } /* Desktop hover flip */ @media (hover: hover) { [data-theme="blockbuster"] .nn-bb-case:hover .nn-bb-case__inner { transform: rotateY(180deg); } } /* Tap-to-flip (set by JS) */ [data-theme="blockbuster"] .nn-bb-case.is-flipped .nn-bb-case__inner { transform: rotateY(180deg); } /* ── Shared face rules ─────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-case__front, [data-theme="blockbuster"] .nn-bb-case__back { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* ── Front face ─────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-case__front { background: #1A1A1A; border: 3px solid #F5A623; box-shadow: 5px 5px 0 rgba(0,0,0,0.55); } [data-theme="blockbuster"] .nn-bb-case__rental-strip { background: #F5A623; color: #111111; font-family: 'Oswald', sans-serif; font-size: 7px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; padding: 4px 6px; flex-shrink: 0; } [data-theme="blockbuster"] .nn-bb-case__img-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 10px 6px; overflow: hidden; } [data-theme="blockbuster"] .nn-bb-case__img-wrap img { width: 100%; max-height: 185px; object-fit: contain; filter: grayscale(20%) sepia(12%) brightness(0.85); } [data-theme="blockbuster"] .nn-bb-case__bottom { display: flex; align-items: center; justify-content: space-between; background: #111111; padding: 6px 8px; flex-shrink: 0; } [data-theme="blockbuster"] .nn-bb-case__disc { font-family: 'Oswald', sans-serif; font-size: 7px; font-weight: 700; color: rgba(245,166,35,0.75); letter-spacing: 0.15em; text-transform: uppercase; border: 1px solid rgba(245,166,35,0.35); padding: 2px 5px; flex-shrink: 0; } [data-theme="blockbuster"] .nn-bb-case__name { font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 700; color: #ffffff; letter-spacing: 0.08em; text-transform: uppercase; text-align: right; line-height: 1.2; flex: 1; padding-left: 6px; } /* ── Back face ──────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-case__back { background: #1A4FC4; transform: rotateY(180deg); align-items: center; justify-content: center; padding: 14px 12px 12px; gap: 8px; border: 3px solid #F5A623; box-shadow: -5px 5px 0 rgba(0,0,0,0.55); } [data-theme="blockbuster"] .nn-bb-case__back-stamp { font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.18em; color: #111111; background: #F5A623; padding: 4px 12px; text-transform: uppercase; transform: rotate(-2deg); flex-shrink: 0; } [data-theme="blockbuster"] .nn-bb-case__back-img { width: 130px; height: 145px; object-fit: contain; flex-shrink: 0; } [data-theme="blockbuster"] .nn-bb-case__back-name { font-family: 'Anton', sans-serif; font-size: 14px; letter-spacing: 0.04em; color: #ffffff; text-transform: uppercase; text-align: center; line-height: 1.1; text-shadow: 2px 2px 0 rgba(0,0,0,0.4); } [data-theme="blockbuster"] .nn-bb-case__back-btn { display: block; width: 100%; background: #F5A623; color: #111111; font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; text-decoration: none; padding: 8px 10px; border: none; cursor: pointer; flex-shrink: 0; transition: background 0.15s; } [data-theme="blockbuster"] .nn-bb-case__back-btn:hover { background: #FFB829; } /* ── Wooden shelf plank ─────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-wall__plank { margin-top: 0; } [data-theme="blockbuster"] .nn-bb-wall__plank-face { height: 22px; background: linear-gradient(to bottom, #F2C84B 0%, #C8A020 60%, #A07818 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.2); } [data-theme="blockbuster"] .nn-bb-wall__plank-edge { height: 10px; background: #7A5010; } /* ── Mobile ────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="blockbuster"] .nn-bb-wall { padding: 0 0 40px; } [data-theme="blockbuster"] .nn-bb-wall__row { justify-content: flex-start; padding: 0 20px 12px; } [data-theme="blockbuster"] .nn-bb-case { width: 150px; height: 240px; } [data-theme="blockbuster"] .nn-bb-case__img-wrap img { max-height: 148px; } [data-theme="blockbuster"] .nn-bb-case__back-img { width: 110px; height: 120px; } } /* ═══════════════════════════════════════════════════════════════ BLOCKBUSTER — ORIGIN / VHS CASE BACK ═══════════════════════════════════════════════════════════════ */ /* Hide other theme origin elements */ [data-theme="blockbuster"] .nn-sc-header { display: none !important; } [data-theme="blockbuster"] .nn-w98-origin { display: none !important; } [data-theme="blockbuster"] .nn-lf-diary { display: none !important; } [data-theme="blockbuster"] .nn-origin__inner { display: none !important; } /* ── Section wrapper ───────────────────────────────── */ [data-theme="blockbuster"] .nn-origin { background-color: #0B1730; background-image: repeating-linear-gradient( 45deg, transparent 0, transparent 11px, rgba(245,166,35,0.07) 11px, rgba(245,166,35,0.07) 13px, transparent 13px, transparent 24px ), repeating-linear-gradient( -45deg, transparent 0, transparent 11px, rgba(245,166,35,0.07) 11px, rgba(245,166,35,0.07) 13px, transparent 13px, transparent 24px ); padding: 70px 24px; display: flex; align-items: center; justify-content: center; } /* ── VHS back card ─────────────────────────────────── */ .nn-bb-vhs-back { display: none; } [data-theme="blockbuster"] .nn-bb-vhs-back { display: block; max-width: 520px; width: 100%; background: #ffffff; border: 2px solid #111111; box-shadow: 8px 14px 36px rgba(0,0,0,0.75), 3px 3px 0 rgba(0,0,0,0.5); transform: rotate(-0.5deg); font-family: 'Courier New', Courier, monospace; } /* ── Top white strip ───────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-vhs-back__top { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 14px 10px; background: #ffffff; } [data-theme="blockbuster"] .nn-bb-vhs-back__barcode-wrap { display: flex; flex-direction: column; } [data-theme="blockbuster"] .nn-bb-vhs-back__top-barcode { width: 110px; height: 30px; background-image: repeating-linear-gradient( to right, #111111 0px, #111111 2px, transparent 2px, transparent 4px, #111111 4px, #111111 5px, transparent 5px, transparent 7px, #111111 7px, #111111 10px, transparent 10px, transparent 12px, #111111 12px, #111111 13px, transparent 13px, transparent 15px, #111111 15px, #111111 18px, transparent 18px, transparent 20px, #111111 20px, #111111 21px, transparent 21px, transparent 23px, #111111 23px, #111111 25px, transparent 25px, transparent 27px, #111111 27px, #111111 29px, transparent 29px, transparent 31px, #111111 31px, #111111 32px, transparent 32px, transparent 34px, #111111 34px, #111111 37px, transparent 37px, transparent 38px ); background-size: 38px 100%; background-repeat: repeat-x; margin-bottom: 4px; } [data-theme="blockbuster"] .nn-bb-vhs-back__barcode-num { display: block; font-size: 7px; letter-spacing: 0.04em; color: #111111; } [data-theme="blockbuster"] .nn-bb-vhs-back__store-addr { font-size: 7.5px; line-height: 1.55; text-align: right; color: #111111; } /* ── Image panel ────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-vhs-back__img-panel { position: relative; border-top: 3px solid #F5A623; border-bottom: 3px solid #F5A623; overflow: hidden; line-height: 0; } [data-theme="blockbuster"] .nn-bb-vhs-back__img-panel img { width: 100%; height: 260px; object-fit: cover; object-position: center; display: block; } /* Gradient + title overlay */ [data-theme="blockbuster"] .nn-bb-vhs-back__img-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 60%, transparent 100%); padding: 32px 14px 12px; display: flex; flex-direction: column; gap: 3px; } [data-theme="blockbuster"] .nn-bb-vhs-back__img-title { display: block; font-family: 'Anton', sans-serif; font-size: 22px; letter-spacing: 0.04em; color: #F5A623; text-shadow: 2px 2px 0 rgba(0,0,0,0.6); line-height: 1; } [data-theme="blockbuster"] .nn-bb-vhs-back__img-tag { display: block; font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.8); } /* ── Bottom yellow hints strip ─────────────────────── */ [data-theme="blockbuster"] .nn-bb-vhs-back__hints { background: #FFE020; padding: 14px 18px 16px; color: #111111; font-family: 'Courier New', Courier, monospace; } [data-theme="blockbuster"] .nn-bb-vhs-back__hints-title { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 2px; } [data-theme="blockbuster"] .nn-bb-vhs-back__hints-sub { font-size: 9px; font-weight: 700; margin-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.15); padding-bottom: 8px; } [data-theme="blockbuster"] .nn-bb-vhs-back__hint { margin-bottom: 9px; } [data-theme="blockbuster"] .nn-bb-vhs-back__hint-head { font-size: 8.5px; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 3px; } [data-theme="blockbuster"] .nn-bb-vhs-back__hint-body { font-size: 8px; line-height: 1.55; color: #333333; } [data-theme="blockbuster"] .nn-bb-vhs-back__hints-final { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; margin-top: 10px; border-top: 1px solid rgba(0,0,0,0.2); padding-top: 10px; } [data-theme="blockbuster"] .nn-bb-vhs-back__hints-cta { display: inline-block; margin-top: 8px; font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; background: #1A4FC4; padding: 7px 16px; text-decoration: none; transition: background 0.15s; } [data-theme="blockbuster"] .nn-bb-vhs-back__hints-cta:hover { background: #0f3a9e; } /* ── Mobile ────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="blockbuster"] .nn-origin { padding: 40px 16px; } [data-theme="blockbuster"] .nn-bb-vhs-back { transform: none; max-width: 100%; } [data-theme="blockbuster"] .nn-bb-vhs-back__img-panel img { height: 200px; } } /* ═══════════════════════════════════════════════════════════════ BLOCKBUSTER — REVIEWS (Rental Receipts) ─────────────────────────────────────────────────────────────── */ /* Hide other themes' comment UI */ [data-theme="blockbuster"] .nn-lf-slam-book, [data-theme="blockbuster"] .nn-w98-aim, [data-theme="blockbuster"] .nn-review-feed, [data-theme="blockbuster"] .nn-review-stars { display: none !important; } /* Hide stock comments wrapper chrome */ [data-theme="blockbuster"] .nn-comments__inner { display: none !important; } /* Section visibility */ .nn-bb-reviews { display: none; } [data-theme="blockbuster"] .nn-bb-reviews { display: block; } /* ── Section wrapper — carpet floor ──────────────────────────── */ [data-theme="blockbuster"] .nn-comments { background-color: #0B1730; background-image: repeating-linear-gradient( 45deg, rgba(245,166,35,0.13) 0px, rgba(245,166,35,0.13) 1px, transparent 1px, transparent 14px ), repeating-linear-gradient( -45deg, rgba(245,166,35,0.13) 0px, rgba(245,166,35,0.13) 1px, transparent 1px, transparent 14px ); padding: 0 0 64px; } /* ── Filmstrip top strip ─────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-reviews__filmstrip { width: 100%; height: 40px; background: #111111; display: flex; align-items: center; padding: 0 20px; box-sizing: border-box; margin-bottom: 52px; position: relative; overflow: hidden; } [data-theme="blockbuster"] .nn-bb-reviews__filmstrip::before, [data-theme="blockbuster"] .nn-bb-reviews__filmstrip::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); height: 22px; background: repeating-linear-gradient( to right, transparent 0px, transparent 6px, #F5A623 6px, #F5A623 7px, #000 7px, #000 22px, #F5A623 22px, #F5A623 23px, transparent 23px, transparent 30px ); } [data-theme="blockbuster"] .nn-bb-reviews__filmstrip::before { left: 0; width: 45%; } [data-theme="blockbuster"] .nn-bb-reviews__filmstrip::after { right: 0; width: 45%; } /* ── Section header ─────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-reviews__header { text-align: center; margin-bottom: 48px; padding: 0 16px; } [data-theme="blockbuster"] .nn-bb-reviews__eyebrow { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.25em; color: #F5A623; margin: 0 0 10px; text-transform: uppercase; } [data-theme="blockbuster"] .nn-bb-reviews__title { font-family: 'Anton', sans-serif; font-size: clamp(28px, 5vw, 48px); color: #FFFFFF; line-height: 1; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.03em; } [data-theme="blockbuster"] .nn-bb-reviews__stat { font-family: 'Oswald', sans-serif; font-size: 13px; color: #F5A623; letter-spacing: 0.1em; margin: 0; } /* ── Receipts grid ────────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-receipts { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; padding: 0 24px; max-width: 1100px; margin: 0 auto; } /* ── Individual receipt ──────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-receipt { font-family: 'Courier New', Courier, monospace; font-size: 11px; line-height: 1.55; color: #1a1a1a; background: #f5f0e8; width: 210px; padding: 0; transform: rotate(var(--r-rot, 0deg)); box-shadow: 3px 3px 0 rgba(0,0,0,0.35), 6px 6px 0 rgba(0,0,0,0.12); position: relative; flex-shrink: 0; /* subtle fade at top/bottom like worn thermal paper */ background-image: linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, transparent 12px), linear-gradient(to top, rgba(0,0,0,0.04) 0%, transparent 12px); } /* ── Perforation edge ────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-receipt__perf { height: 10px; background: repeating-linear-gradient( to right, #f5f0e8 0px, #f5f0e8 5px, #c8c0b0 5px, #c8c0b0 6px, #f5f0e8 6px, #f5f0e8 11px ); margin: 0 8px; opacity: 0.8; } /* ── Store header ────────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-receipt__store { text-align: center; font-size: 10px; font-weight: bold; letter-spacing: 0.04em; color: #111; padding: 10px 14px 8px; line-height: 1.6; text-transform: uppercase; } /* ── Dashed divider ──────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-receipt__divider { border: none; border-top: 1px dashed #b0a898; margin: 6px 14px; } /* ── Member / date meta row ──────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-receipt__meta { display: flex; flex-direction: column; gap: 2px; padding: 6px 14px; font-size: 9px; color: #444; letter-spacing: 0.02em; text-transform: uppercase; } /* ── Item rented block ───────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-receipt__item { padding: 6px 14px 8px; display: flex; flex-direction: column; gap: 2px; } [data-theme="blockbuster"] .nn-bb-receipt__item-label { font-size: 9px; color: #666; text-transform: uppercase; letter-spacing: 0.04em; } [data-theme="blockbuster"] .nn-bb-receipt__item-name { font-size: 12px; font-weight: bold; color: #111; text-transform: uppercase; letter-spacing: 0.02em; } [data-theme="blockbuster"] .nn-bb-receipt__item-period { font-size: 9px; color: #666; text-transform: uppercase; letter-spacing: 0.03em; } /* ── Review quote ────────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-receipt__review { padding: 8px 14px; font-size: 11px; font-style: italic; color: #222; line-height: 1.5; margin: 0; } /* ── Rubber stamp ────────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-receipt__stamp { font-family: 'Anton', sans-serif; font-size: 10px; letter-spacing: 0.12em; color: #1A4FC4; border: 2px solid #1A4FC4; text-align: center; padding: 5px 10px; margin: 6px 24px; transform: rotate(-3deg); opacity: 0.82; line-height: 1.4; text-transform: uppercase; /* worn ink texture */ box-shadow: inset 0 0 0 1px rgba(26,79,196,0.08); background: rgba(26,79,196,0.03); } /* ── Footer ─────────────────────────────────────────────────── */ [data-theme="blockbuster"] .nn-bb-receipt__footer { text-align: center; font-size: 10px; font-weight: bold; letter-spacing: 0.08em; color: #333; padding: 8px 14px 10px; text-transform: uppercase; line-height: 1.7; } /* ── Mobile ─────────────────────────────────────────────────── */ @media (max-width: 640px) { [data-theme="blockbuster"] .nn-bb-receipts { gap: 24px; padding: 0 16px; } [data-theme="blockbuster"] .nn-bb-receipt { transform: rotate(0deg); /* no rotation on small screens — too cramped */ width: calc(50% - 12px); min-width: 150px; max-width: 210px; } } @media (max-width: 400px) { [data-theme="blockbuster"] .nn-bb-receipt { width: 100%; max-width: 280px; } } /* ═══════════════════════════════════════════════════════════════ BLOCKBUSTER — FOOTER (Closed Storefront + Receipt) ─────────────────────────────────────────────────────────────── */ .nn-bb-footer { display: none; } [data-theme="blockbuster"] .nn-bb-footer { display: block; } [data-theme="blockbuster"] .nn-sj-footer-top { display: none !important; } [data-theme="blockbuster"] .nn-w98-footer { display: none !important; } [data-theme="blockbuster"] .nn-lf-footer { display: none !important; } [data-theme="blockbuster"] .nn-footer__inner { display: none !important; } [data-theme="blockbuster"] .nn-footer { background: #06101e; padding: 0; border-top: none; } [data-theme="blockbuster"] .nn-bb-footer__marquee { background: #1A4FC4; color: #F5A623; font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.3em; text-align: center; padding: 10px 0; text-transform: uppercase; border-bottom: 3px solid #F5A623; } [data-theme="blockbuster"] .nn-bb-footer__window { background: #09152a; border-top: 5px solid #F5A623; border-bottom: 5px solid #F5A623; padding: 48px 24px; text-align: center; box-shadow: inset 0 0 120px rgba(245,166,35,0.05); } [data-theme="blockbuster"] .nn-bb-footer__logo { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 0 28px rgba(245,166,35,0.55)) drop-shadow(0 0 8px rgba(245,166,35,0.3)); } [data-theme="blockbuster"] .nn-bb-footer__window-line { font-family: 'Oswald', sans-serif; font-size: clamp(16px, 3.5vw, 24px); color: #c8c0b0; letter-spacing: 0.06em; margin: 4px 0; text-transform: uppercase; } [data-theme="blockbuster"] .nn-bb-footer__window-line--gold { font-family: 'Anton', sans-serif; font-size: clamp(28px, 6vw, 52px); color: #F5A623; letter-spacing: 0.04em; margin-top: 8px; text-shadow: 0 0 40px rgba(245,166,35,0.4); } [data-theme="blockbuster"] .nn-bb-footer__receipt-wrap { background: #06101e; padding: 48px 20px; display: flex; justify-content: center; } [data-theme="blockbuster"] .nn-bb-footer__receipt { font-family: 'Courier New', Courier, monospace; background: #f5f0e8; width: 100%; max-width: 480px; padding: 0; box-shadow: 4px 4px 0 rgba(0,0,0,0.5), 8px 8px 0 rgba(0,0,0,0.2); background-image: linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, transparent 16px), linear-gradient(to top, rgba(0,0,0,0.04) 0%, transparent 16px); } [data-theme="blockbuster"] .nn-bb-footer__receipt-header { text-align: center; font-size: 13px; font-weight: bold; letter-spacing: 0.05em; text-transform: uppercase; color: #111; padding: 20px 20px 14px; line-height: 1.7; } [data-theme="blockbuster"] .nn-bb-footer__receipt-sub { font-size: 10px; font-weight: normal; color: #555; letter-spacing: 0.03em; } [data-theme="blockbuster"] .nn-bb-footer__perf { height: 10px; background: repeating-linear-gradient( to right, #f5f0e8 0px, #f5f0e8 5px, #c8c0b0 5px, #c8c0b0 6px, #f5f0e8 6px, #f5f0e8 11px ); margin: 0 10px; opacity: 0.7; } [data-theme="blockbuster"] .nn-bb-footer__thankyou { text-align: center; font-size: 10px; letter-spacing: 0.15em; color: #555; padding: 10px 20px; text-transform: uppercase; } [data-theme="blockbuster"] .nn-bb-footer__divider { border-top: 1px dashed #b8b0a0; margin: 10px 20px; } [data-theme="blockbuster"] .nn-bb-footer__nav { padding: 8px 20px; display: flex; flex-direction: column; gap: 4px; } [data-theme="blockbuster"] .nn-bb-footer__nav-link { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: #222; text-decoration: none; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 0; border-bottom: 1px dotted #ccc; transition: color 0.15s; } [data-theme="blockbuster"] .nn-bb-footer__nav-link:hover { color: #1A4FC4; } [data-theme="blockbuster"] .nn-bb-footer__nav-label { font-weight: bold; } [data-theme="blockbuster"] .nn-bb-footer__nav-path { font-size: 9px; color: #999; letter-spacing: 0; } [data-theme="blockbuster"] .nn-bb-footer__social-row { text-align: center; padding: 8px 20px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } [data-theme="blockbuster"] .nn-bb-footer__social-link { color: #333; text-decoration: none; font-weight: bold; } [data-theme="blockbuster"] .nn-bb-footer__social-link:hover { color: #1A4FC4; } [data-theme="blockbuster"] .nn-bb-footer__social-sep { margin: 0 10px; color: #aaa; } [data-theme="blockbuster"] .nn-bb-footer__newsletter { padding: 10px 20px 14px; } [data-theme="blockbuster"] .nn-bb-footer__newsletter-label { font-size: 10px; letter-spacing: 0.1em; color: #555; text-transform: uppercase; text-align: center; margin: 0 0 10px; } [data-theme="blockbuster"] .nn-bb-footer__newsletter-form { display: flex; } [data-theme="blockbuster"] .nn-bb-footer__email-input { flex: 1; font-family: 'Courier New', Courier, monospace; font-size: 11px; padding: 8px 10px; border: 1px solid #bbb; border-right: none; background: #fff; color: #111; outline: none; } [data-theme="blockbuster"] .nn-bb-footer__email-input:focus { border-color: #1A4FC4; } [data-theme="blockbuster"] .nn-bb-footer__email-btn { font-family: 'Anton', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: #1A4FC4; color: #fff; border: none; padding: 8px 14px; cursor: pointer; transition: background 0.15s; white-space: nowrap; } [data-theme="blockbuster"] .nn-bb-footer__email-btn:hover { background: #0f3a9e; } [data-theme="blockbuster"] .nn-bb-footer__stamp { font-family: 'Anton', sans-serif; font-size: 12px; letter-spacing: 0.14em; color: #1A4FC4; border: 2px solid #1A4FC4; text-align: center; padding: 8px 12px; margin: 10px 40px; transform: rotate(-2deg); opacity: 0.78; line-height: 1.5; text-transform: uppercase; background: rgba(26,79,196,0.03); } [data-theme="blockbuster"] .nn-bb-footer__copy { text-align: center; font-size: 9px; color: #777; letter-spacing: 0.06em; padding: 8px 20px 4px; margin: 0; text-transform: uppercase; line-height: 1.6; } [data-theme="blockbuster"] .nn-bb-footer__customize-link { text-align: center; font-size: 9px; letter-spacing: 0.08em; padding: 4px 20px 12px; margin: 0; } [data-theme="blockbuster"] .nn-bb-footer__customize-link a { color: #1A4FC4; text-decoration: none; text-transform: uppercase; } [data-theme="blockbuster"] .nn-bb-footer__customize-link a:hover { text-decoration: underline; } [data-theme="blockbuster"] .nn-bb-footer__rewind { background: #111; border-top: 4px solid #F5A623; text-align: center; font-family: 'Anton', sans-serif; font-size: clamp(36px, 9vw, 96px); letter-spacing: 0.06em; color: #F5A623; padding: 48px 24px 52px; text-transform: uppercase; text-shadow: 0 0 60px rgba(245,166,35,0.25); } @media (max-width: 480px) { [data-theme="blockbuster"] .nn-bb-footer__logo { max-width: 200px; } [data-theme="blockbuster"] .nn-bb-footer__newsletter-form { flex-direction: column; } [data-theme="blockbuster"] .nn-bb-footer__email-input { border-right: 1px solid #bbb; border-bottom: none; } [data-theme="blockbuster"] .nn-bb-footer__email-btn { padding: 10px; width: 100%; } [data-theme="blockbuster"] .nn-bb-footer__stamp { margin: 10px 20px; } } /* ═══════════════════════════════════════════════════════════════ ARCADE — MARQUEE (Pac-Man eat scene) ═══════════════════════════════════════════════════════════════ */ /* Hide all scrolling marquees — eat-scene replaces them */ [data-theme="arcade"] .nn-marquee--default { display: none; } [data-theme="arcade"] .nn-marquee--space-jam { display: none; } [data-theme="arcade"] .nn-marquee--windows-98 { display: none; } [data-theme="arcade"] .nn-marquee--lisa-frank { display: none; } [data-theme="arcade"] .nn-marquee--nickelodeon { display: none; } [data-theme="arcade"] .nn-marquee--blockbuster { display: none; } [data-theme="arcade"] .nn-w98-title-buttons { display: none; } [data-theme="arcade"] .nn-marquee-bar { background: #0A0A1A; border-bottom: 2px solid #FF00FF; box-shadow: 0 2px 16px #FF00FF55; height: 36px; overflow: hidden; } [data-theme="arcade"] .nn-marquee-link { height: 36px; mask-image: none; -webkit-mask-image: none; padding-left: 0; } /* ── Eat scene: absolute overlay covering the full bar ────── */ .nn-arc-eat-scene { display: none; position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; } [data-theme="arcade"] .nn-arc-eat-scene { display: block; } /* ── Static text — centered, eaten left-to-right ──────────── */ .nn-arc-eat-text { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #FFE600; letter-spacing: 0.06em; text-shadow: 0 0 6px #FFE600; white-space: nowrap; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; animation: nn-arc-text-eat 6s linear infinite; } @keyframes nn-arc-text-eat { 0% { clip-path: inset(0 0 0 0%); } 70% { clip-path: inset(0 0 0 100%); } 75% { clip-path: inset(0 0 0 100%); } 75.1% { clip-path: inset(0 0 0 0%); } 100% { clip-path: inset(0 0 0 0%); } } /* ── Pac-Man (moves left to right, no glow) ───────────────── */ .nn-arc-pacman { display: none; width: 0; height: 0; border: 13px solid #FFE600; border-right-color: transparent; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); animation: nn-arc-chomp 0.28s linear infinite, nn-arc-pacman-move 6s linear infinite; } [data-theme="arcade"] .nn-arc-pacman { display: block; } @keyframes nn-arc-chomp { 0%, 100% { border-right-color: transparent; } 50% { border-right-color: #FFE600; } } @keyframes nn-arc-pacman-move { 0% { left: 0%; opacity: 1; } 70% { left: calc(100% - 26px); opacity: 1; } 72% { left: calc(100% - 26px); opacity: 0; } 72.1% { left: 0%; opacity: 0; } 75% { left: 0%; opacity: 1; } 100% { left: 0%; opacity: 1; } } /* ── Ghost (Blinky — 30px behind Pac-Man) ─────────────────── */ .nn-arc-ghost-sprite { display: none; width: 14px; height: 18px; background-color: #FF1111; background-image: radial-gradient(circle at 4px 6px, white 2px, transparent 2px), radial-gradient(circle at 10px 6px, white 2px, transparent 2px); background-repeat: no-repeat; position: absolute; top: 50%; transform: translateY(-50%); clip-path: polygon( 0% 44%, 5% 28%, 14% 13%, 27% 4%, 50% 0%, 73% 4%, 86% 13%, 95% 28%, 100% 44%, 100% 100%, 83% 88%, 67% 100%, 50% 88%, 33% 100%, 17% 88%, 0% 100% ); filter: drop-shadow(0 0 4px #FF1111); animation: nn-arc-ghost-move 6s linear infinite; } [data-theme="arcade"] .nn-arc-ghost-sprite { display: block; } @keyframes nn-arc-ghost-move { 0% { left: -30px; opacity: 0; } 3% { left: -30px; opacity: 1; } 70% { left: calc(100% - 56px); opacity: 1; } 72% { left: calc(100% - 56px); opacity: 0; } 72.1% { left: -30px; opacity: 0; } 75% { left: -30px; opacity: 1; } 100% { left: -30px; opacity: 1; } } /* ── Mobile ────────────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="arcade"] body { padding-top: 36px; } [data-theme="arcade"] .nn-arc-eat-text { font-size: 7px; letter-spacing: 0.03em; } } /* ═══════════════════════════════════════════════════════════════ ARCADE — NAV ═══════════════════════════════════════════════════════════════ */ [data-theme="arcade"] .nn-nav { top: 36px; background: #0A0A1A; border-bottom: 2px solid #FF00FF; box-shadow: 0 3px 18px #FF00FF44; position: sticky; } /* Scanline texture */ [data-theme="arcade"] .nn-nav::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.07) 3px, rgba(0, 0, 0, 0.07) 4px ); pointer-events: none; z-index: 0; } [data-theme="arcade"] .nn-nav__inner { min-height: 80px; position: relative; z-index: 1; } /* ── Logo ──────────────────────────────────────────────────── */ [data-theme="arcade"] .nn-nav__logo img { height: auto; max-height: 48px; width: auto; animation: nn-arc-logo-pulse 3s ease-in-out infinite; } @keyframes nn-arc-logo-pulse { 0%, 100% { filter: drop-shadow(0 0 3px #FFE60088) drop-shadow(0 0 6px #FF00FF44); } 50% { filter: drop-shadow(0 0 7px #FFE600aa) drop-shadow(0 0 14px #FF00FF66) drop-shadow(0 0 20px #00FFFF33); } } /* ── Tabs ──────────────────────────────────────────────────── */ [data-theme="arcade"] .nn-nav__tab { font-family: 'Press Start 2P', monospace; font-size: 10px; color: rgba(255, 255, 255, 0.38); letter-spacing: 0.04em; height: 80px; border-bottom: none; transition: color 0.1s; } /* kill base overlay */ [data-theme="arcade"] .nn-nav__tab::before { display: none; } /* active indicator: blinking neon underline */ [data-theme="arcade"] .nn-nav__tab::after { content: ''; position: absolute; bottom: 0; left: 8px; right: 8px; height: 3px; background: #FFE600; box-shadow: 0 0 8px #FFE600, 0 0 16px #FFE60066; opacity: 0; } [data-theme="arcade"] .nn-nav__tab.is-active { color: #FFE600; text-shadow: 0 0 8px #FFE60088; border-bottom: none; } [data-theme="arcade"] .nn-nav__tab.is-active::after { opacity: 1; animation: nn-arc-blink 0.8s step-end infinite; } @keyframes nn-arc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } [data-theme="arcade"] .nn-nav__tab:hover { color: #00FFFF; text-shadow: 0 0 8px #00FFFF99; } /* ── Cart hidden — credits shown ───────────────────────────── */ [data-theme="arcade"] .nn-nav__cart { display: none; } .nn-arc-credits { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; gap: 5px; min-width: 56px; min-height: 44px; flex-shrink: 0; } [data-theme="arcade"] .nn-arc-credits { display: flex; } .nn-arc-credits__label { font-family: 'Press Start 2P', monospace; font-size: 6px; color: rgba(255, 255, 255, 0.38); letter-spacing: 0.08em; } .nn-arc-credits__count { font-family: 'Press Start 2P', monospace; font-size: 18px; color: #FFE600; text-shadow: 0 0 8px #FFE600, 0 0 20px #FF660055; letter-spacing: 0.12em; line-height: 1; } /* ── Mobile ────────────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="arcade"] .nn-nav__inner { min-height: 60px; padding: 6px 12px 0; } [data-theme="arcade"] .nn-nav__logo img { max-height: 38px; } [data-theme="arcade"] .nn-nav__tab { font-size: 8px; height: 44px; padding: 0 10px; letter-spacing: 0.02em; } [data-theme="arcade"] .nn-nav__tab::after { left: 4px; right: 4px; } .nn-arc-credits__count { font-size: 14px; } .nn-arc-credits__label { font-size: 5px; } } /* ═══════════════════════════════════════════════════════════════ ARCADE — HERO (Galaga) ═══════════════════════════════════════════════════════════════ */ [data-theme="arcade"] #reopen-customizer { display: none !important; } /* ── Arcade: nav tab intercept popup ── */ .nn-arc-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,17,0.82); z-index: 3000; } .nn-arc-nav-backdrop.is-open { display: block; } .nn-arc-nav-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3001; width: min(340px, 88vw); background: #000011; border: 3px solid #FFE500; box-shadow: 0 0 0 1px #000011, 0 0 24px rgba(255,229,0,0.4), 6px 6px 0 #332200; text-align: center; font-family: 'Press Start 2P', monospace; } .nn-arc-nav-popup.is-open { display: block; } .nn-arc-nav-popup__bar { background: #FFE500; color: #000; font-size: 7px; padding: 7px 10px; text-align: left; letter-spacing: 0.06em; } .nn-arc-nav-popup__msg { color: #ffffff; font-size: 9px; line-height: 2; padding: 28px 20px 20px; letter-spacing: 0.04em; margin: 0; } .nn-arc-nav-popup__ok { font-family: 'Press Start 2P', monospace; font-size: 9px; background: #FFE500; color: #000; border: none; padding: 10px 28px; cursor: pointer; margin-bottom: 20px; letter-spacing: 0.06em; display: inline-block; } .nn-arc-nav-popup__ok:hover { background: #fff; } [data-theme="arcade"] .nn-hero { background: #000011; border-bottom: none; position: relative; overflow: hidden; min-height: 520px; } [data-theme="arcade"] .nn-hero__body { position: relative; z-index: 2; padding: 40px 40px 60px; } /* ── Starfield ─────────────────────────────────────────────── */ .nn-arc-starfield { display: none; position: absolute; inset: 0; z-index: 0; pointer-events: none; } [data-theme="arcade"] .nn-arc-starfield { display: block; } .nn-arc-starfield::before { content: ''; position: absolute; width: 1px; height: 1px; background: white; border-radius: 50%; box-shadow: 15px 45px rgba(255,255,255,0.9), 48px 120px rgba(255,255,255,0.6), 78px 28px rgba(255,255,255,0.8), 132px 75px rgba(255,255,255,0.5), 168px 210px rgba(255,255,255,0.7), 225px 55px rgba(255,255,255,0.9), 265px 145px rgba(255,255,255,0.4), 312px 88px rgba(255,255,255,0.8), 358px 225px rgba(255,255,255,0.6), 405px 32px rgba(255,255,255,0.7), 448px 130px rgba(255,255,255,0.5), 498px 68px rgba(255,255,255,0.9), 545px 248px rgba(255,255,255,0.4), 598px 42px rgba(255,255,255,0.8), 642px 182px rgba(255,255,255,0.6), 695px 98px rgba(255,255,255,0.7), 745px 298px rgba(255,255,255,0.5), 30px 300px rgba(255,255,255,0.6), 95px 380px rgba(255,255,255,0.8), 180px 320px rgba(255,255,255,0.4), 280px 410px rgba(255,255,255,0.7), 380px 340px rgba(255,255,255,0.5), 480px 420px rgba(255,255,255,0.9), 580px 360px rgba(255,255,255,0.6), 680px 430px rgba(255,255,255,0.4), 780px 370px rgba(255,255,255,0.8); animation: nn-arc-star-twinkle 4s ease-in-out infinite alternate; } .nn-arc-starfield::after { content: ''; position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%; box-shadow: 62px 62px white, 195px 28px white, 348px 182px white, 502px 98px white, 648px 52px white, 240px 160px white, 560px 320px rgba(255,255,255,0.8), 120px 240px white, 420px 280px rgba(255,255,255,0.7); animation: nn-arc-star-twinkle 2.5s ease-in-out infinite alternate-reverse; } @keyframes nn-arc-star-twinkle { 0% { opacity: 0.4; } 100% { opacity: 1; } } /* ── HUD bar ───────────────────────────────────────────────── */ .nn-arc-hero-hud { display: none; justify-content: space-between; align-items: center; padding: 10px 24px 0; position: relative; z-index: 2; } [data-theme="arcade"] .nn-arc-hero-hud { display: flex; } .nn-arc-hud-block { display: flex; flex-direction: column; align-items: center; gap: 2px; } .nn-arc-hud-block--center { min-width: 120px; } .nn-arc-hud__label { font-family: 'Press Start 2P', monospace; font-size: 7px; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.1em; } .nn-arc-hud__score { font-family: 'Press Start 2P', monospace; font-size: 13px; color: #FFE600; text-shadow: 0 0 8px #FFE600; letter-spacing: 0.08em; } /* ── Stage eyebrow ─────────────────────────────────────────── */ .nn-arc-stage-eyebrow { display: none; font-family: 'Press Start 2P', monospace; font-size: 9px; color: #00FFFF; letter-spacing: 0.06em; text-shadow: 0 0 8px #00FFFF; } [data-theme="arcade"] .nn-arc-stage-eyebrow { display: block; } .nn-arc-blink-cursor { display: inline-block; color: #FFE600; animation: nn-arc-blink 0.8s step-end infinite; } /* ── Hero copy typography ──────────────────────────────────── */ [data-theme="arcade"] .nn-hero__headline { font-family: 'Press Start 2P', monospace; font-size: 16px; line-height: 1.8; color: #ffffff; text-shadow: 0 0 12px rgba(255,255,255,0.2); } [data-theme="arcade"] .nn-hero__sub { font-family: 'VT323', monospace; font-size: 20px; color: rgba(255, 255, 255, 0.72); line-height: 1.5; } [data-theme="arcade"] .nn-hero__stars-icons { color: #FFE600; text-shadow: 0 0 6px #FFE600; } [data-theme="arcade"] .nn-hero__stars-label { font-family: 'VT323', monospace; font-size: 18px; color: rgba(255,255,255,0.6); } /* ── CTAs ──────────────────────────────────────────────────── */ [data-theme="arcade"] .nn-btn--primary { background: #FF00FF; color: #000011; font-family: 'Press Start 2P', monospace; font-size: 10px; border: none; box-shadow: 0 0 12px #FF00FF88, 4px 4px 0 #880088; letter-spacing: 0.04em; } [data-theme="arcade"] .nn-btn--primary:hover { background: #FF44FF; box-shadow: 0 0 20px #FF00FFaa, 4px 4px 0 #880088; } [data-theme="arcade"] .nn-btn--secondary { background: transparent; color: #00FFFF; font-family: 'Press Start 2P', monospace; font-size: 9px; border: 2px solid #00FFFF; box-shadow: 0 0 8px #00FFFF55, 4px 4px 0 #004444; letter-spacing: 0.04em; } [data-theme="arcade"] .nn-btn--secondary:hover { background: #00FFFF22; box-shadow: 0 0 16px #00FFFFaa, 4px 4px 0 #004444; } /* ── Image panel + Galaga formation ───────────────────────── */ [data-theme="arcade"] .nn-hero__image { flex-direction: column; justify-content: flex-end; align-items: center; min-height: 360px; gap: 0; } [data-theme="arcade"] .nn-hero__products { position: relative; z-index: 2; padding-bottom: 16px; } /* Formation: absolute over full image panel, top 70% */ .nn-arc-formation { display: none; position: absolute; top: 0; left: 0; right: 0; height: 72%; pointer-events: none; z-index: 1; animation: nn-arc-sway 3s ease-in-out infinite alternate; } [data-theme="arcade"] .nn-arc-formation { display: block; } @keyframes nn-arc-sway { 0% { transform: translateX(-6px); } 100% { transform: translateX(6px); } } /* Individual aliens */ .nn-arc-alien { position: absolute; animation: nn-arc-alien-bob 2s ease-in-out infinite alternate; animation-delay: var(--al-del, 0s); filter: drop-shadow(0 0 4px currentColor); } .nn-arc-alien--boss { color: #FF00FF; filter: drop-shadow(0 0 6px #FF00FF); } .nn-arc-alien--butterfly { color: #00FFFF; filter: drop-shadow(0 0 5px #00FFFF); } .nn-arc-alien--bee { color: #FFE600; filter: drop-shadow(0 0 4px #FFE600); } @keyframes nn-arc-alien-bob { 0% { transform: translateY(0px); } 100% { transform: translateY(-4px); } } /* Diver bee breaks formation and dive-bombs */ .nn-arc-alien--diver { animation: nn-arc-divebomb 5s ease-in-out infinite; animation-delay: 2s; } @keyframes nn-arc-divebomb { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 15% { transform: translate(12px, 30px) rotate(12deg); } 30% { transform: translate(-10px, 100px) rotate(-8deg); } 45% { transform: translate(8px, 200px) rotate(15deg); opacity: 1; } 50% { transform: translate(0, 280px); opacity: 0; } 51% { transform: translate(0, 0); opacity: 0; } 60% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(0, 0) rotate(0deg); opacity: 1; } } /* Tractor beam from Boss Galaga */ .nn-arc-tractor-beam { position: absolute; width: 56px; height: 55%; top: 12%; left: calc(44% + 18px - 28px); background: linear-gradient( to bottom, rgba(0, 255, 255, 0.55) 0%, rgba(0, 255, 255, 0.18) 55%, transparent 100% ); clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%); animation: nn-arc-beam-pulse 1.8s ease-in-out infinite; } @keyframes nn-arc-beam-pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.35; } } /* ── Mobile ────────────────────────────────────────────────── */ @media (min-width: 769px) { [data-theme="arcade"] .nn-hero__headline { font-size: 24px; } [data-theme="arcade"] .nn-hero__sub { font-size: 28px; } [data-theme="arcade"] .nn-hero__stars-label { font-size: 24px; } [data-theme="arcade"] .nn-btn--primary { font-size: 14px; padding: 16px 28px; } [data-theme="arcade"] .nn-btn--secondary { font-size: 12px; padding: 14px 24px; } } @media (max-width: 768px) { [data-theme="arcade"] .nn-hero__body { padding: 24px 16px 40px; gap: 24px; } [data-theme="arcade"] .nn-hero__headline { font-size: 13px; line-height: 1.9; } [data-theme="arcade"] .nn-hero__sub { font-size: 18px; } [data-theme="arcade"] .nn-hero__image { min-height: 300px; } [data-theme="arcade"] .nn-btn--primary { font-size: 9px; padding: 10px 14px; } [data-theme="arcade"] .nn-btn--secondary { font-size: 8px; padding: 10px 14px; } .nn-arc-hero-hud { padding: 8px 12px 0; } .nn-arc-hud__score { font-size: 11px; } .nn-arc-hud__label { font-size: 6px; } .nn-arc-hud-block--center { min-width: 90px; } .nn-arc-stage-eyebrow { font-size: 7px; } .nn-arc-ship { bottom: 10px; } .nn-arc-bullet { bottom: 56px; } @keyframes nn-arc-ship-patrol { 0% { transform: translateX(calc(-50% - 28px)); } 100% { transform: translateX(calc(-50% + 28px)); } } } /* ── Alien type glows (Build 2) ────────────────────────────── */ .nn-arc-alien--goei { filter: drop-shadow(0 0 5px #FF2222); } .nn-arc-alien--zako { filter: drop-shadow(0 0 4px #4488FF); } /* ── Player ship ───────────────────────────────────────────── */ .nn-arc-ship { display: none; position: absolute; bottom: 16px; left: 50%; z-index: 4; filter: drop-shadow(0 0 8px #00FFFF) drop-shadow(0 0 3px #FF00FF); animation: nn-arc-ship-patrol 3.5s ease-in-out infinite alternate; } [data-theme="arcade"] .nn-arc-ship { display: block; } @keyframes nn-arc-ship-patrol { 0% { transform: translateX(calc(-50% - 48px)); } 100% { transform: translateX(calc(-50% + 48px)); } } /* ── Laser bullets ─────────────────────────────────────────── */ .nn-arc-bullets { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 3; } [data-theme="arcade"] .nn-arc-bullets { display: block; } .nn-arc-bullet { position: absolute; bottom: 62px; width: 3px; height: 20px; background: linear-gradient(to top, #FFE600, #ffffff); box-shadow: 0 0 6px #FFE600, 0 0 14px #FFE600; border-radius: 2px; animation: nn-arc-shoot 1.5s linear infinite; animation-delay: var(--bullet-delay, 0s); } @keyframes nn-arc-shoot { 0% { transform: translateY(0); opacity: 1; } 75% { transform: translateY(-300px); opacity: 1; } 80% { transform: translateY(-320px); opacity: 0; } 81% { transform: translateY(0); opacity: 0; } 90% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* Hide product images on all screen sizes for arcade — game handles this */ [data-theme="arcade"] .nn-hero__products { display: none; } [data-theme="arcade"] .nn-hero__arrow { filter: drop-shadow(0 0 8px #FFE600); } [data-theme="arcade"] .nn-lf-cloud { display: none; } /* ═══════════════════════════════════════════════════════════════ ARCADE — BREAKOUT ARENA ═══════════════════════════════════════════════════════════════ */ /* Override old Galaga elements — Breakout replaces all of them */ [data-theme="arcade"] .nn-arc-formation, [data-theme="arcade"] .nn-arc-bullets, [data-theme="arcade"] .nn-arc-ship { display: none; } /* ── Image panel layout ────────────────────────────────────── */ [data-theme="arcade"] .nn-hero__image { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 0 0 0 0; min-height: unset; gap: 0; } /* ── Arena container ───────────────────────────────────────── */ .nn-arc-breakout { display: none; position: relative; width: 100%; max-width: 640px; margin: 0 auto; height: 460px; border: 2px solid rgba(0, 255, 255, 0.65); box-shadow: 0 0 20px rgba(0, 255, 255, 0.2), inset 0 0 30px rgba(0, 0, 20, 0.6); overflow: hidden; background: #000014; flex-shrink: 0; } [data-theme="arcade"] .nn-arc-breakout { display: block; } /* Subtle internal starfield via box-shadow */ .nn-arc-breakout::before { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 1px; background: transparent; box-shadow: 22px 18px rgba(255,255,255,0.55), 68px 44px rgba(255,255,255,0.35), 112px 12px rgba(255,255,255,0.65), 158px 58px rgba(255,255,255,0.3), 195px 30px rgba(255,255,255,0.5), 238px 82px rgba(255,255,255,0.4), 280px 20px rgba(255,255,255,0.6), 318px 65px rgba(255,255,255,0.35), 355px 10px rgba(255,255,255,0.7), 390px 48px rgba(255,255,255,0.45), 42px 120px rgba(255,255,255,0.3), 130px 140px rgba(255,255,255,0.4), 220px 105px rgba(255,255,255,0.35),320px 130px rgba(255,255,255,0.5), 88px 160px rgba(255,255,255,0.25), 270px 155px rgba(255,255,255,0.3); pointer-events: none; z-index: 0; } /* ── Brick grid ────────────────────────────────────────────── */ .nn-arc-bricks { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 22px 16px 15px 12px; gap: 4px; position: absolute; top: 20px; left: 12px; right: 12px; z-index: 3; } .nn-arc-brick { border-radius: 2px; animation: nn-arc-brick-break 5s linear infinite; animation-delay: var(--bk-del, 0s); will-change: transform, opacity; } .nn-arc-brick--r1 { background: #FF00FF; box-shadow: 0 0 5px rgba(255, 0, 255, 0.5); } .nn-arc-brick--r2 { background: #00FFFF; box-shadow: 0 0 4px rgba(0, 255, 255, 0.45); } .nn-arc-brick--r3 { background: #FFE600; box-shadow: 0 0 4px rgba(255, 230, 0, 0.45); } .nn-arc-brick--r4 { background: rgba(140, 160, 255, 0.32); border: 1px solid rgba(160, 180, 255, 0.45); } @keyframes nn-arc-brick-break { 0% { opacity: 1; transform: none; filter: brightness(1); } 80% { opacity: 1; transform: none; filter: brightness(1); } 84% { opacity: 1; transform: none; filter: brightness(5); } 89% { opacity: 0; transform: translateY(14px) scaleY(0.3); filter: brightness(1); } 95% { opacity: 0; transform: translateY(14px) scaleY(0.3); } 97% { opacity: 0.8; transform: translateY(-4px) scaleY(1.05); } 100% { opacity: 1; transform: none; } } /* ── Ball ──────────────────────────────────────────────────── */ .nn-arc-ball { display: none; position: absolute; width: 11px; height: 11px; background: #ffffff; border-radius: 50%; box-shadow: 0 0 8px #ffffff, 0 0 18px rgba(255, 255, 255, 0.4); z-index: 5; /* Two coprime-duration animations create a non-repeating bounce path */ animation: nn-arc-ball-x 2.3s linear infinite alternate, nn-arc-ball-y 1.7s ease-in-out infinite alternate; } [data-theme="arcade"] .nn-arc-ball { display: block; } @keyframes nn-arc-ball-x { from { left: 8px; } to { left: calc(100% - 19px); } } @keyframes nn-arc-ball-y { from { top: 24px; } to { top: calc(72% - 6px); } } /* ── Paddle — same X timing as ball so it tracks horizontally ─ */ .nn-arc-paddle { display: none; position: absolute; bottom: 20px; height: 9px; width: 68px; background: linear-gradient(90deg, #3344DD 0%, #00FFFF 50%, #3344DD 100%); border-radius: 5px; box-shadow: 0 0 12px rgba(0, 255, 255, 0.55); z-index: 4; animation: nn-arc-paddle-move 2.3s linear infinite alternate; } [data-theme="arcade"] .nn-arc-paddle { display: block; } @keyframes nn-arc-paddle-move { from { left: 8px; } to { left: calc(100% - 76px); } } /* ── Prize jar — floats as the "get this" target ───────────── */ .nn-arc-prize { display: none; position: absolute; bottom: 56px; left: 55%; transform: translateX(-50%); z-index: 2; animation: nn-arc-prize-float 3.4s ease-in-out infinite alternate; } [data-theme="arcade"] .nn-arc-prize { display: block; } .nn-arc-prize img { width: 88px; height: auto; filter: drop-shadow(0 0 10px rgba(255, 230, 0, 0.4)); } /* ── Bag — sits low-left near paddle ───────────────────────── */ .nn-arc-prize-bag { display: none; position: absolute; bottom: 42px; left: 10%; z-index: 2; animation: nn-arc-prize-float 4s ease-in-out infinite alternate-reverse; } [data-theme="arcade"] .nn-arc-prize-bag { display: block; } .nn-arc-prize-bag img { width: 56px; height: auto; filter: drop-shadow(0 0 6px rgba(255, 0, 255, 0.35)); opacity: 0.85; } @keyframes nn-arc-prize-float { from { transform: translateY(0px); } to { transform: translateY(-6px); } } /* ── Headline word-fall ────────────────────────────────────── */ /* Default: invisible wrapper — no layout change for other themes */ .nn-arc-word { display: inline; } [data-theme="arcade"] .nn-arc-word { display: inline-block; vertical-align: baseline; animation: nn-arc-word-fall 14s linear infinite; animation-delay: calc(var(--word-idx) * 1.2s); } @keyframes nn-arc-word-fall { 0% { transform: translateY(0); opacity: 1; color: inherit; text-shadow: none; } 4% { transform: translateY(0); opacity: 1; color: #FFE600; text-shadow: 0 0 14px #FFE600; } 7% { transform: translateY(0); opacity: 1; color: #ffffff; text-shadow: 0 0 6px #fff; } 13% { transform: translateY(52px); opacity: 0; } 86% { transform: translateY(52px); opacity: 0; } 91% { transform: translateY(-6px); opacity: 0; } 95% { transform: translateY(-6px); opacity: 0.75; color: inherit; } 100% { transform: translateY(0); opacity: 1; color: inherit; text-shadow: none; } } /* ── Breakout mobile ───────────────────────────────────────── */ @media (max-width: 768px) { .nn-arc-breakout { height: 390px; } .nn-arc-bricks { grid-template-rows: 17px 13px 12px 10px; gap: 3px; top: 14px; left: 8px; right: 8px; } .nn-arc-ball { width: 9px; height: 9px; } @keyframes nn-arc-ball-x { from { left: 6px; } to { left: calc(100% - 15px); } } @keyframes nn-arc-ball-y { from { top: 18px; } to { top: calc(72% - 5px); } } .nn-arc-paddle { width: 56px; height: 7px; bottom: 16px; } @keyframes nn-arc-paddle-move { from { left: 6px; } to { left: calc(100% - 62px); } } .nn-arc-prize { bottom: 46px; } .nn-arc-prize img { width: 72px; } .nn-arc-prize-bag { bottom: 34px; } .nn-arc-prize-bag img { width: 44px; } } /* ── Arcade Reviews — Pac-Man eats right→left ──────────────── */ /* ── Arcade Reviews — Pac-Man eats right→left ──────────────── */ /* Mirror of .nn-arc-eat-scene in the marquee bar, direction reversed */ .nn-arc-reviews-scene { display: none; } [data-theme="arcade"] .nn-hero__stars { display: none; } [data-theme="arcade"] .nn-arc-reviews-scene { display: block; position: relative; width: 100%; height: 26px; overflow: hidden; margin-top: 8px; } /* ── Reviews text — clips from RIGHT as Pac-Man eats leftward ─ */ .nn-arc-reviews-content { font-family: 'VT323', monospace; font-size: 18px; color: #fff; white-space: nowrap; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); clip-path: inset(0 0% 0 0); animation: nn-arc-reviews-eat 7s linear infinite; } @keyframes nn-arc-reviews-eat { 0% { clip-path: inset(0 0% 0 0); } 70% { clip-path: inset(0 100% 0 0); } 75% { clip-path: inset(0 100% 0 0); } 75.1% { clip-path: inset(0 0% 0 0); } 100% { clip-path: inset(0 0% 0 0); } } .nn-arc-rstars { color: #FFE600; text-shadow: 0 0 6px #FFE600; letter-spacing: 2px; } /* ── Pac-Man — same border trick as marquee, mouth faces LEFT ─ */ .nn-arc-rpac { display: none; width: 0; height: 0; border: 13px solid #FFE600; border-left-color: transparent; /* mouth on left = faces left */ border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); animation: nn-arc-rpac-chow 0.28s linear infinite, nn-arc-rpac-move 7s linear infinite; } [data-theme="arcade"] .nn-arc-rpac { display: block; } @keyframes nn-arc-rpac-chow { 0%, 100% { border-left-color: transparent; } 50% { border-left-color: #FFE600; } } /* Moves right→left. Disappears + instant-resets — never slides back */ @keyframes nn-arc-rpac-move { 0% { left: calc(100% - 26px); opacity: 1; } 70% { left: 0; opacity: 1; } 72% { left: 0; opacity: 0; } 72.1% { left: calc(100% - 26px); opacity: 0; } 75% { left: calc(100% - 26px); opacity: 1; } 100% { left: calc(100% - 26px); opacity: 1; } } /* ── Ghost — same shape as marquee ghost, follows behind (right) */ .nn-arc-rghost { display: none; width: 14px; height: 18px; background-color: #FF00FF; background-image: radial-gradient(circle at 4px 6px, white 2px, transparent 2px), radial-gradient(circle at 10px 6px, white 2px, transparent 2px); background-repeat: no-repeat; position: absolute; top: 50%; transform: translateY(-50%); clip-path: polygon( 0% 44%, 5% 28%, 14% 13%, 27% 4%, 50% 0%, 73% 4%, 86% 13%, 95% 28%, 100% 44%, 100% 100%, 83% 88%, 67% 100%, 50% 88%, 33% 100%, 17% 88%, 0% 100% ); filter: drop-shadow(0 0 4px #FF00FF); animation: nn-arc-rghost-move 7s linear infinite; } [data-theme="arcade"] .nn-arc-rghost { display: block; } /* Ghost is 30px BEHIND Pac-Man = to its RIGHT */ @keyframes nn-arc-rghost-move { 0% { left: calc(100% + 4px); opacity: 0; } 3% { left: calc(100% + 4px); opacity: 1; } 70% { left: 30px; opacity: 1; } 72% { left: 30px; opacity: 0; } 72.1% { left: calc(100% + 4px); opacity: 0; } 75% { left: calc(100% + 4px); opacity: 1; } 100% { left: calc(100% + 4px); opacity: 1; } } /* ═══════════════════════════════════════════════════════════════ ARCADE — TRUST STRIP: Q*bert Pyramid Cube geometry: CW=80px, TH=20px, CH=40px, step=40px Row formula: left = 120 + (2c - r) × 40, top = r × 40 + 40 ═══════════════════════════════════════════════════════════════ */ [data-theme="arcade"] .nn-trust-strip { display: none; } .nn-arc-mario-section { display: none; } [data-theme="arcade"] .nn-arc-mario-section { display: block; overflow: hidden; } .nn-arc-mario-section__inner { max-width: 900px; margin: 0 auto; } #nn-arc-mario { display: block; width: 100%; height: auto; } .nn-arc-mario-footer { background: #000011; text-align: center; padding: 12px 0 18px; font-family: 'Press Start 2P', monospace; font-size: 6px; color: rgba(255, 255, 255, 0.3); animation: nn-arc-blink 1.2s step-end infinite; } /* ══════════════════════════════════════════════════════════════ ARCADE — Donkey Kong Construction Site Product Grid ══════════════════════════════════════════════════════════════ */ /* ── Show / hide ─────────────────────────────────────────────── */ .nn-arc-dk-unit { display: none; } [data-theme="arcade"] .nn-arc-dk-unit { display: block; } [data-theme="arcade"] .nn-product-grid .nn-w98-explorer, [data-theme="arcade"] .nn-product-grid .nn-section-header, [data-theme="arcade"] .nn-product-grid .nn-section-sub, [data-theme="arcade"] .nn-product-grid .nn-w98-explorer__pane, [data-theme="arcade"] .nn-product-grid .nn-w98-explorer__statusbar, [data-theme="arcade"] .nn-product-grid .nn-bb-shelf-unit { display: none; } /* ── Unit wrapper ─────────────────────────────────────────────── */ [data-theme="arcade"] .nn-arc-dk-unit { background: #000814; padding: 0 0 40px; overflow: hidden; } /* ── HUD bar ──────────────────────────────────────────────────── */ .nn-arc-dk-hud { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 20px 10px; font-family: 'Press Start 2P', monospace; font-size: 8px; line-height: 1.6; } .nn-arc-dk-hud__col { text-align: left; } .nn-arc-dk-hud__col--c { text-align: center; } .nn-arc-dk-hud__col--r { text-align: right; } .nn-arc-dk-hud__lbl { color: #FF4400; margin-bottom: 3px; } .nn-arc-dk-hud__val { color: #ffffff; } /* ── Construction site ────────────────────────────────────────── */ .nn-arc-dk-site { position: relative; max-width: 900px; margin: 0 auto; padding: 12px 16px 60px; } /* ── Rolling barrel (JS-driven — no CSS animation) ────────────── */ .nn-arc-dk-barrel { display: none; } [data-theme="arcade"] .nn-arc-dk-barrel { display: block; position: absolute; width: 22px; height: 20px; background: linear-gradient(180deg, #8B4513 0%, #A0522D 50%, #8B4513 100%); border: 2px solid #3d1800; border-radius: 4px; box-shadow: inset 0 4px 0 rgba(0,0,0,0.35), inset 0 -4px 0 rgba(0,0,0,0.35); z-index: 4; opacity: 0; } /* ── Spawn platform + shelf containers ───────────────────────── */ .nn-arc-dk-shelves { padding-top: 0; } .nn-arc-dk-spawn { position: relative; overflow: visible; padding-bottom: 44px; } .nn-arc-dk-shelf { position: relative; overflow: visible; } /* ── Girder beam ──────────────────────────────────────────────── */ .nn-arc-dk-girder { height: 14px; background: repeating-linear-gradient( 90deg, #CC2200 0px, #CC2200 18px, #991500 18px, #991500 20px ); border-top: 3px solid #FF5500; border-bottom: 3px solid #771100; position: relative; z-index: 1; } .nn-arc-dk-spawn .nn-arc-dk-girder { transform: rotate(-1.5deg); } /* ── Blue stairs (fill gap from current girder to next shelf) ─── */ .nn-arc-dk-stair { position: absolute; top: 14px; bottom: 0; width: 22px; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 6px, #0066EE 6px, #0066EE 8px ); border-left: 4px solid #0044BB; border-right: 4px solid #0044BB; z-index: 2; } .nn-arc-dk-stair--r { right: 8px; } .nn-arc-dk-stair--l { left: 8px; } /* ── Jar: column layout — row(img+info) stacked above full-width btn */ .nn-arc-dk-jar { display: flex; flex-direction: column; } /* Default row direction: image LEFT (even nth-child shelves = LEFT stair) */ .nn-arc-dk-jar__row { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px 12px 52px; /* 52 left = stair clearance */ } /* Odd nth-child shelves = RIGHT stair → flip image to RIGHT side */ .nn-arc-dk-shelf:nth-child(odd) .nn-arc-dk-jar__row { flex-direction: row-reverse; padding: 12px 52px 12px 16px; /* 52 right = stair clearance */ } .nn-arc-dk-shelf:nth-child(odd) .nn-arc-dk-jar__info { text-align: right; } .nn-arc-dk-jar__img-wrap { position: relative; flex-shrink: 0; } .nn-arc-dk-jar__img { width: 88px; height: 88px; object-fit: contain; display: block; transition: transform 0.15s ease; } .nn-arc-dk-jar:hover .nn-arc-dk-jar__img { transform: translateY(-4px); } /* +100 float */ .nn-arc-dk-jar__pts { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-family: 'Press Start 2P', monospace; font-size: 7px; color: #FFD700; text-shadow: 0 0 8px #FFD700; white-space: nowrap; pointer-events: none; opacity: 0; } .nn-arc-dk-jar:hover .nn-arc-dk-jar__pts { animation: nn-arc-pts-pop 0.7s ease-out forwards; } @keyframes nn-arc-pts-pop { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-24px); } } .nn-arc-dk-jar__info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .nn-arc-dk-jar__name { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #ffffff; line-height: 1.7; word-break: break-word; } .nn-arc-dk-jar__price { font-family: 'VT323', monospace; font-size: 22px; color: #FFD700; line-height: 1; } /* Full-width ADD TO CART — flush bottom bar of each shelf */ .nn-arc-dk-jar__btn { font-family: 'Press Start 2P', monospace !important; font-size: 6px !important; padding: 10px 0 !important; background: #000814 !important; color: #FFE600 !important; border: none !important; border-top: 2px solid #441100 !important; border-radius: 0 !important; width: 100%; text-align: center; letter-spacing: 1px; cursor: pointer; transition: background 0.12s, color 0.12s; } .nn-arc-dk-jar__btn:hover { background: #CC2200 !important; color: #fff !important; } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 400px) { .nn-arc-dk-site { padding: 12px 12px 60px; } .nn-arc-dk-hud { font-size: 7px; padding: 12px 14px 8px; } .nn-arc-dk-jar__row { gap: 10px; padding: 10px 12px 10px 44px; } .nn-arc-dk-shelf:nth-child(odd) .nn-arc-dk-jar__row { padding: 10px 44px 10px 12px; } .nn-arc-dk-jar__img { width: 70px; height: 70px; } .nn-arc-dk-jar__name { font-size: 6px; } } @media (min-width: 768px) { .nn-arc-dk-site { padding: 20px 32px 80px; } .nn-arc-dk-hud { font-size: 13px; padding: 16px 32px 12px; } .nn-arc-dk-jar__img { width: 140px; height: 140px; } .nn-arc-dk-jar__row { gap: 24px; padding: 20px 28px 20px 72px; } .nn-arc-dk-shelf:nth-child(odd) .nn-arc-dk-jar__row { padding: 20px 72px 20px 28px; } .nn-arc-dk-jar__name { font-size: 11px; } .nn-arc-dk-jar__price { font-size: 32px; } .nn-arc-dk-jar__btn { font-size: 8px !important; padding: 12px 0 !important; } .nn-arc-dk-girder { height: 18px; } .nn-arc-dk-stair { width: 30px; top: 18px; } .nn-arc-dk-stair--r { right: 12px; } .nn-arc-dk-stair--l { left: 12px; } .nn-arc-dk-spawn { padding-bottom: 56px; } } /* ═══════════════════════════════════════════════════════════════ ARCADE — DK: TOP FLAVORS header ═══════════════════════════════════════════════════════════════ */ .nn-arc-dk-header { display: none; } [data-theme="arcade"] .nn-arc-dk-header { display: block; text-align: center; padding: 0 16px 28px; } .nn-arc-dk-header__eyebrow { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #FF00FF; text-shadow: 0 0 12px #FF00FF; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 12px; } .nn-arc-dk-header__title { font-family: 'Press Start 2P', monospace; font-size: 22px; color: #FFE600; text-shadow: 0 0 20px #FFE600, 0 0 40px rgba(255,230,0,0.4); line-height: 1.5; margin: 0; } @media (max-width: 420px) { .nn-arc-dk-header__title { font-size: 14px; } } /* ═══════════════════════════════════════════════════════════════ ARCADE — GALAGA: RESCUE MISSION (era feature) ═══════════════════════════════════════════════════════════════ */ /* Show / hide */ .nn-arc-galaga-section { display: none; } [data-theme="arcade"] .nn-arc-galaga-section { display: block; background: #000011; padding: 60px 0 0; } /* Hide other era feature elements on arcade */ [data-theme="arcade"] .nn-bb-era-header, [data-theme="arcade"] .nn-bb-wall, [data-theme="arcade"] .nn-pmp, [data-theme="arcade"] .nn-w98-mspaint, [data-theme="arcade"] .nn-lf-scratch-section { display: none; } /* Header */ .nn-arc-galaga-header { text-align: center; padding: 0 16px 36px; } .nn-arc-galaga-eyebrow { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #FF00FF; letter-spacing: 2px; margin: 0 0 14px; text-shadow: 0 0 12px #FF00FF; } .nn-arc-galaga-title { font-family: 'Press Start 2P', monospace; font-size: 22px; color: #FFE600; text-shadow: 0 0 20px #FFE600, 0 0 40px rgba(255,230,0,0.4); margin: 0 0 14px; line-height: 1.5; } .nn-arc-galaga-sub { font-family: 'VT323', monospace; font-size: 22px; color: rgba(255,255,255,0.65); margin: 0; } /* Game wrapper */ .nn-arc-galaga-wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; } /* HUD bar */ .nn-arc-galaga-hud { display: flex; justify-content: center; gap: 32px; padding: 10px 16px; background: #000814; border: 1px solid #1a1a3a; border-bottom: none; } .nn-arc-galaga-hud__item { display: flex; flex-direction: column; align-items: center; gap: 2px; } .nn-arc-galaga-hud__lbl { font-family: 'Press Start 2P', monospace; font-size: 6px; color: rgba(255,255,255,0.45); letter-spacing: 1px; } .nn-arc-galaga-hud__val { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #FFE600; text-shadow: 0 0 8px #FFE600; } /* Canvas arena */ .nn-arc-galaga-arena { position: relative; width: 100%; height: 500px; background: #000011; border: 1px solid #1a1a3a; overflow: hidden; } /* Mobile controls */ .nn-arc-galaga-controls { display: flex; justify-content: center; gap: 12px; padding: 12px 0; background: #000814; border: 1px solid #1a1a3a; border-top: none; } .nn-arc-galaga-btn { font-family: 'Press Start 2P', monospace; font-size: 11px; color: #FFE600; background: #0a0a1e; border: 2px solid #2a2a55; padding: 14px 22px; cursor: pointer; user-select: none; -webkit-user-select: none; min-width: 64px; text-align: center; transition: background 0.1s, border-color 0.1s; } .nn-arc-galaga-btn:active, .nn-arc-galaga-btn:focus { background: #1a1a40; border-color: #FFE600; outline: none; } .nn-arc-galaga-btn--fire { color: #FF00FF; border-color: #550055; font-size: 8px; padding: 14px 28px; } .nn-arc-galaga-btn--fire:active { background: #1a001a; border-color: #FF00FF; } /* Victory screen */ .nn-arc-galaga-victory { display: none; } .nn-arc-galaga-victory[aria-hidden="false"] { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; inset: 0; z-index: 10; background: rgba(0, 0, 17, 0.93); border-top: 2px solid #FFE600; text-align: center; padding: 32px 16px; overflow-y: auto; } .nn-arc-galaga-victory__eyebrow { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #00FFFF; letter-spacing: 2px; text-shadow: 0 0 12px #00FFFF; margin: 0 0 18px; animation: nn-galaga-blink 0.9s step-end infinite; } @keyframes nn-galaga-blink { 50% { opacity: 0; } } .nn-arc-galaga-victory__title { font-family: 'Press Start 2P', monospace; font-size: 18px; color: #FFE600; text-shadow: 0 0 24px #FFE600; margin: 0 0 14px; line-height: 1.7; } .nn-arc-galaga-victory__sub { font-family: 'VT323', monospace; font-size: 22px; color: rgba(255,255,255,0.6); margin: 0 0 36px; } .nn-arc-galaga-victory__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 36px; } .nn-arc-galaga-victory__card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border: 1px solid #2a2a55; background: #0a0a1e; text-decoration: none; transition: border-color 0.2s, transform 0.2s; width: 88px; } .nn-arc-galaga-victory__card:hover { border-color: #FFE600; transform: translateY(-3px); } .nn-arc-galaga-victory__card img { width: 60px; height: 60px; object-fit: contain; display: block; } .nn-arc-galaga-victory__card span { font-family: 'Press Start 2P', monospace; font-size: 5px; color: #fff; text-align: center; line-height: 1.7; } .nn-arc-galaga-victory__cta { display: inline-block; font-family: 'Press Start 2P', monospace; font-size: 8px; color: #000; background: #FFE600; padding: 14px 24px; text-decoration: none; letter-spacing: 1px; transition: background 0.15s, color 0.15s; } .nn-arc-galaga-victory__cta:hover { background: #FF00FF; color: #fff; } /* Responsive */ @media (min-width: 769px) { .nn-arc-galaga-arena { height: 680px; } } @media (max-width: 768px) { .nn-arc-galaga-victory[aria-hidden="false"] { justify-content: flex-start; padding: 16px 12px 12px; } .nn-arc-galaga-victory__eyebrow { margin: 0 0 6px; } .nn-arc-galaga-victory__title { margin: 0 0 6px; } .nn-arc-galaga-victory__sub { margin: 0 0 12px; } .nn-arc-galaga-victory__grid { gap: 8px; margin-bottom: 14px; } } @media (max-width: 420px) { .nn-arc-galaga-title { font-size: 14px; } .nn-arc-galaga-arena { height: 420px; } .nn-arc-galaga-victory__card { width: 64px; padding: 8px; } .nn-arc-galaga-victory__card img { width: 40px; height: 40px; } .nn-arc-galaga-victory__title { font-size: 12px; } .nn-arc-galaga-victory__cta { font-size: 7px; padding: 10px 16px; } } /* ═══════════════════════════════════════════════════════════════ ARCADE — INTERMISSION (origin section) ═══════════════════════════════════════════════════════════════ */ .nn-arc-intermission { display: none; } [data-theme="arcade"] .nn-origin { background: transparent; border-top: none; } [data-theme="arcade"] .nn-origin__inner { display: none; } [data-theme="arcade"] .nn-sc-header { display: none; } [data-theme="arcade"] .nn-w98-origin { display: none; } [data-theme="arcade"] .nn-lf-diary { display: none; } [data-theme="arcade"] .nn-bb-vhs-back { display: none !important; } [data-theme="arcade"] .nn-arc-intermission { display: block; padding: 60px 24px 80px; text-align: center; } .nn-arc-intermission__label { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #FF00FF; text-shadow: 0 0 14px #FF00FF; letter-spacing: 3px; margin: 0 0 40px; } .nn-arc-intermission__img-wrap { max-width: 520px; margin: 0 auto 40px; } .nn-arc-intermission__img-wrap img { width: 100%; height: auto; display: block; border: 2px solid #00FFFF; box-shadow: 0 0 24px rgba(0,255,255,0.4), 0 0 60px rgba(0,255,255,0.15); } .nn-arc-intermission__copy { max-width: 600px; margin: 0 auto; } .nn-arc-intermission__headline { font-family: 'Press Start 2P', monospace; font-size: 16px; color: #FFE600; text-shadow: 0 0 16px #FFE600, 0 0 32px rgba(255,230,0,0.3); line-height: 2.2; margin: 0 0 24px; } .nn-arc-intermission__body { font-family: 'VT323', monospace; font-size: 18px; color: rgba(255,255,255,0.65); line-height: 1.6; margin: 0 0 36px; } .nn-arc-intermission__cta { display: inline-block; font-family: 'Press Start 2P', monospace; font-size: 10px; color: #000011; background: #FF00FF; padding: 14px 28px; border: 3px solid #FF00FF; box-shadow: 0 0 20px rgba(255,0,255,0.5), 0 0 40px rgba(255,0,255,0.2); text-decoration: none; letter-spacing: 1px; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .nn-arc-intermission__cta:hover { background: transparent; color: #FF00FF; box-shadow: 0 0 28px rgba(255,0,255,0.7), 0 0 56px rgba(255,0,255,0.3); } @media (max-width: 420px) { .nn-arc-intermission__headline { font-size: 12px; } .nn-arc-intermission__body { font-size: 16px; } .nn-arc-intermission__cta { font-size: 8px; padding: 12px 20px; } } /* ═══════════════════════════════════════════════════════════════ ARCADE — ALL-TIME HIGH SCORES (comments/reviews section) ═══════════════════════════════════════════════════════════════ */ .nn-arc-hiscore { display: none; } [data-theme="arcade"] .nn-comments { background: #000011; padding: 0; } [data-theme="arcade"] .nn-comments__inner { display: none; } [data-theme="arcade"] .nn-w98-aim { display: none; } [data-theme="arcade"] .nn-lf-slam-book { display: none; } [data-theme="arcade"] .nn-bb-reviews { display: none !important; } [data-theme="arcade"] .nn-review-stars { display: none; } [data-theme="arcade"] .nn-review-feed { display: none; } [data-theme="arcade"] .nn-arc-hiscore { display: block; padding: 20px 24px 80px; text-align: center; } /* Header */ .nn-arc-hiscore__eyebrow { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #FF00FF; text-shadow: 0 0 12px #FF00FF; letter-spacing: 2px; margin: 0 0 28px; } .nn-arc-hiscore__stat { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 48px; } .nn-arc-hiscore__num { font-family: 'Press Start 2P', monospace; font-size: 52px; color: #FFE600; text-shadow: 0 0 24px #FFE600, 0 0 56px rgba(255,230,0,0.35); line-height: 1; } .nn-arc-hiscore__stat-label { font-family: 'Press Start 2P', monospace; font-size: 8px; color: rgba(255,255,255,0.55); letter-spacing: 2px; } /* Board */ .nn-arc-hiscore__board { max-width: 660px; margin: 0 auto; border: 2px solid #00FFFF; box-shadow: 0 0 24px rgba(0,255,255,0.3), 0 0 60px rgba(0,255,255,0.1); position: relative; overflow: hidden; } /* Scanlines overlay */ .nn-arc-hiscore__board::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px ); pointer-events: none; z-index: 1; } .nn-arc-hiscore__board-header { display: grid; grid-template-columns: 48px 80px 1fr 90px; gap: 0 12px; padding: 10px 20px; background: rgba(0,255,255,0.08); border-bottom: 1px solid rgba(0,255,255,0.4); font-family: 'Press Start 2P', monospace; font-size: 6px; color: rgba(0,255,255,0.6); letter-spacing: 1px; text-align: left; } .nn-arc-hiscore__entry { padding: 18px 20px; border-bottom: 1px solid rgba(0,255,255,0.15); } .nn-arc-hiscore__entry:last-child { border-bottom: none; } .nn-arc-hiscore__row { display: grid; grid-template-columns: 48px 80px 1fr 90px; gap: 0 12px; align-items: center; margin-bottom: 10px; } .nn-arc-hiscore__rank { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #FF00FF; text-shadow: 0 0 10px #FF00FF; } .nn-arc-hiscore__initials { font-family: 'Press Start 2P', monospace; font-size: 11px; color: #FFE600; text-shadow: 0 0 14px #FFE600; letter-spacing: 3px; } .nn-arc-hiscore__stars { font-size: 14px; color: #FFE600; text-shadow: 0 0 8px rgba(255,230,0,0.6); letter-spacing: 2px; text-align: left; } .nn-arc-hiscore__date { font-family: 'VT323', monospace; font-size: 16px; color: rgba(255,255,255,0.45); text-align: right; } .nn-arc-hiscore__quote { font-family: 'VT323', monospace; font-size: 20px; color: rgba(255,255,255,0.7); line-height: 1.5; margin: 0; padding-left: 60px; text-align: left; } /* Blinking footer */ .nn-arc-hiscore__footer { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #FF00FF; text-shadow: 0 0 10px #FF00FF; letter-spacing: 2px; margin: 32px 0 0; animation: nn-arc-blink 1.1s step-end infinite; } /* Mobile */ @media (max-width: 520px) { .nn-arc-hiscore__num { font-size: 36px; } .nn-arc-hiscore__board-header { display: none; } .nn-arc-hiscore__row { grid-template-columns: 36px 56px 1fr 70px; gap: 0 8px; } .nn-arc-hiscore__initials { font-size: 9px; letter-spacing: 2px; } .nn-arc-hiscore__quote { padding-left: 0; font-size: 18px; } .nn-arc-hiscore__date { font-size: 14px; } } /* ═══════════════════════════════════════════════════════════════ ARCADE — GAME OVER FOOTER (game over + credits + initials) ═══════════════════════════════════════════════════════════════ */ .nn-arc-footer { display: none; } [data-theme="arcade"] .nn-footer { background: #000011; padding: 0; } [data-theme="arcade"] .nn-footer__inner { display: none; } [data-theme="arcade"] .nn-sj-footer-top { display: none; } [data-theme="arcade"] .nn-w98-footer { display: none; } [data-theme="arcade"] .nn-lf-footer { display: none; } [data-theme="arcade"] .nn-bb-footer { display: none !important; } [data-theme="arcade"] .nn-arc-footer { display: block; } /* ── GAME OVER ───────────────────────────────────────────────── */ .nn-arc-footer__gameover { padding: 20px 24px 64px; text-align: center; border-bottom: 1px solid rgba(0,255,255,0.15); } @keyframes nn-arc-go-glitch { 0%, 87%, 100% { color: #FFE600; text-shadow: 0 0 20px #FFE600, 0 0 50px rgba(255,230,0,0.35); transform: none; } 88% { color: #FF00FF; text-shadow: 4px 0 #00FFFF, -4px 0 #FF00FF; transform: translate(-4px, 0); } 89% { color: #00FFFF; text-shadow: -4px 0 #FFE600, 4px 0 #FF00FF; transform: translate(4px, 0); } 90% { color: #FFE600; text-shadow: 0 0 20px #FFE600; transform: none; } 91% { color: #FF00FF; text-shadow: 2px 0 #00FFFF, -2px 0 #FF00FF; transform: translate(-2px, 1px); } 92% { color: #FFE600; text-shadow: 0 0 20px #FFE600, 0 0 50px rgba(255,230,0,0.35); transform: none; } } .nn-arc-footer__go-title { font-family: 'Press Start 2P', monospace; font-size: 48px; color: #FFE600; text-shadow: 0 0 20px #FFE600, 0 0 50px rgba(255,230,0,0.35); letter-spacing: 8px; margin: 0 0 28px; animation: nn-arc-go-glitch 5s ease-in-out infinite; } .nn-arc-footer__go-sub { font-family: 'Press Start 2P', monospace; font-size: 9px; color: rgba(255,255,255,0.55); line-height: 2.5; letter-spacing: 1px; margin: 0 0 44px; } .nn-arc-footer__go-countdown { margin: 0 0 40px; } .nn-arc-footer__go-num { display: block; font-family: 'Press Start 2P', monospace; font-size: 80px; color: #FF00FF; text-shadow: 0 0 30px #FF00FF, 0 0 70px rgba(255,0,255,0.4); line-height: 1; margin-bottom: 18px; animation: nn-arc-blink 0.9s step-end infinite; } .nn-arc-footer__go-insert { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #00FFFF; text-shadow: 0 0 10px #00FFFF; letter-spacing: 2px; animation: nn-arc-blink 1.2s step-end infinite; margin: 0; } .nn-arc-footer__go-cta { display: inline-block; font-family: 'Press Start 2P', monospace; font-size: 11px; color: #000011; background: #FFE600; padding: 16px 36px; border: 3px solid #FFE600; box-shadow: 0 0 24px rgba(255,230,0,0.5), 0 0 50px rgba(255,230,0,0.2); text-decoration: none; letter-spacing: 2px; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .nn-arc-footer__go-cta:hover { background: transparent; color: #FFE600; box-shadow: 0 0 32px rgba(255,230,0,0.7), 0 0 64px rgba(255,230,0,0.3); } /* ── CREDITS ROLL ────────────────────────────────────────────── */ .nn-arc-footer__credits { position: relative; height: 280px; overflow: hidden; border-bottom: 1px solid rgba(0,255,255,0.15); } .nn-arc-footer__credits-fade { position: absolute; left: 0; right: 0; height: 72px; z-index: 2; pointer-events: none; } .nn-arc-footer__credits-fade--top { top: 0; background: linear-gradient(to bottom, #000011, transparent); } .nn-arc-footer__credits-fade--btm { bottom: 0; background: linear-gradient(to top, #000011, transparent); } .nn-arc-footer__credits-roll { position: absolute; inset: 0; display: flex; justify-content: center; overflow: hidden; } @keyframes nn-arc-credits-scroll { from { transform: translateY(300px); } to { transform: translateY(-100%); } } .nn-arc-footer__credits-inner { text-align: center; animation: nn-arc-credits-scroll 14s linear infinite; } .nn-arc-footer__cr-title { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #FF00FF; text-shadow: 0 0 10px #FF00FF; letter-spacing: 3px; margin: 0 0 18px; } .nn-arc-footer__cr-label { font-family: 'Press Start 2P', monospace; font-size: 6px; color: rgba(255,255,255,0.35); letter-spacing: 1px; margin: 0 0 8px; } .nn-arc-footer__cr-value { font-family: 'VT323', monospace; font-size: 24px; color: #FFE600; letter-spacing: 2px; margin: 0 0 4px; } .nn-arc-footer__cr-spacer { display: block; height: 20px; margin: 0; } @media (min-width: 769px) { .nn-arc-footer__credits { height: 420px; } .nn-arc-footer__cr-title { font-size: 13px; margin: 0 0 28px; } .nn-arc-footer__cr-label { font-size: 10px; margin: 0 0 12px; } .nn-arc-footer__cr-value { font-size: 38px; margin: 0 0 8px; } .nn-arc-footer__cr-spacer { height: 36px; } } /* ── ENTER YOUR INITIALS + nav ───────────────────────────────── */ .nn-arc-footer__bottom { padding: 60px 24px 52px; text-align: center; } .nn-arc-footer__thanks { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #00FFFF; text-shadow: 0 0 12px #00FFFF; letter-spacing: 2px; margin: 0 0 40px; } .nn-arc-footer__initials-wrap { margin-bottom: 40px; } .nn-arc-footer__initials-label { font-family: 'Press Start 2P', monospace; font-size: 7px; color: rgba(255,255,255,0.45); letter-spacing: 2px; margin: 0 0 14px; } .nn-arc-footer__form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .nn-arc-footer__input { font-family: 'Press Start 2P', monospace; font-size: 8px; background: #000033; border: 2px solid #00FFFF; color: #FFE600; padding: 12px 16px; width: 260px; outline: none; box-shadow: 0 0 12px rgba(0,255,255,0.15); } .nn-arc-footer__input::placeholder { color: rgba(255,255,255,0.2); } .nn-arc-footer__input:focus { border-color: #FFE600; box-shadow: 0 0 16px rgba(255,230,0,0.3); } .nn-arc-footer__submit { font-family: 'Press Start 2P', monospace; font-size: 8px; background: #FF00FF; color: #000011; border: 2px solid #FF00FF; padding: 12px 20px; cursor: pointer; box-shadow: 0 0 16px rgba(255,0,255,0.4); transition: background 0.15s, color 0.15s; } .nn-arc-footer__submit:hover { background: transparent; color: #FF00FF; } .nn-arc-footer__nav { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; } .nn-arc-footer__nav a { font-family: 'Press Start 2P', monospace; font-size: 7px; color: rgba(255,255,255,0.45); text-decoration: none; letter-spacing: 1px; transition: color 0.15s, text-shadow 0.15s; } .nn-arc-footer__nav a:hover { color: #00FFFF; text-shadow: 0 0 10px #00FFFF; } .nn-arc-footer__social { display: flex; gap: 20px; justify-content: center; margin-bottom: 24px; } .nn-arc-footer__social a { font-family: 'Press Start 2P', monospace; font-size: 7px; color: rgba(255,255,255,0.35); text-decoration: none; letter-spacing: 1px; transition: color 0.15s, text-shadow 0.15s; } .nn-arc-footer__social a:hover { color: #FF00FF; text-shadow: 0 0 10px #FF00FF; } .nn-arc-footer__copy { font-family: 'Press Start 2P', monospace; font-size: 6px; color: rgba(255,255,255,0.25); letter-spacing: 1px; margin: 0 0 12px; } .nn-arc-footer__customizer a { font-family: 'Press Start 2P', monospace; font-size: 6px; color: rgba(255,0,255,0.4); text-decoration: none; letter-spacing: 1px; } .nn-arc-footer__customizer a:hover { color: #FF00FF; } /* Mobile */ @media (max-width: 520px) { .nn-arc-footer__go-title { font-size: 28px; letter-spacing: 4px; } .nn-arc-footer__go-num { font-size: 56px; } .nn-arc-footer__go-sub { font-size: 7px; } .nn-arc-footer__go-cta { font-size: 9px; padding: 14px 24px; } .nn-arc-footer__input { width: 100%; } .nn-arc-footer__nav { gap: 14px; } } /* ============================================================ ████████╗██╗ ██╗███████╗ ███████╗███╗ ███╗██████╗ ██╔══╝██║ ██║██╔════╝ ██╔════╝████╗ ████║██╔══██╗ ██║ ███████║█████╗ █████╗ ██╔████╔██║██████╔╝ ██║ ██╔══██║██╔══╝ ██╔══╝ ██║╚██╔╝██║██╔═══╝ ██║ ██║ ██║███████╗ ███████╗██║ ╚═╝ ██║██║ ╚═╝ ╚═╝ ╚═╝╚══════╝ ╚══════╝╚═╝ ╚═╝╚═╝ SCARFACE — THE EMPIRE ============================================================ */ /* CSS VARIABLES */ [data-theme="scarface"] { --color-bg: #0D0B0B; --color-surface: #1A1210; --color-text-primary: #F2EDE4; --color-text-secondary: #C9A84C; --color-accent: #B80000; --color-border: #B80000; --color-button-bg: #B80000; --color-button-text: #F2EDE4; --color-marquee-bg: #0D0B0B; --color-marquee-text: #F2EDE4; --color-widget-bg: #1A1210; --color-card-bg: #1A1210; --border-style: 1px solid #B80000; --border-glow: 0 0 12px #B8000040; --font-heading: 'Cinzel Decorative', serif; --font-body: 'Cormorant Garamond', serif; --font-size-base: 17px; --font-size-heading: clamp(20px, 4vw, 40px); --line-height-base: 1.7; } /* BODY */ [data-theme="scarface"] body { background-color: #0D0B0B; background-image: radial-gradient(ellipse 180% 80% at 15% 20%, rgba(255,255,255,0.018) 0%, transparent 55%), radial-gradient(ellipse 120% 60% at 85% 75%, rgba(184,0,0,0.025) 0%, transparent 50%), linear-gradient(135deg, rgba(255,255,255,0.008) 0%, transparent 40%, rgba(255,255,255,0.008) 100%); background-attachment: fixed; color: #F2EDE4; font-family: 'Cormorant Garamond', serif; } /* ============================================================ SCARFACE — THEME PICKER CARD ============================================================ */ .nn-theme-card--scarface { background: #0D0B0B; border: 1px solid #B80000; box-shadow: inset 0 0 30px rgba(184,0,0,0.08); } .nn-theme-card--scarface .nn-theme-card__name { color: #F2EDE4; font-family: 'Cinzel Decorative', serif; font-size: 10px; } .nn-theme-card--scarface .nn-theme-card__era { color: #C9A84C; letter-spacing: 0.1em; } .nn-theme-card--scarface .nn-theme-card__logo { height: 130px; } .nn-theme-card--scarface .nn-theme-card__logo img { max-height: 125px; object-fit: contain; } .nn-theme-card--scarface.is-selected { box-shadow: 0 0 24px #B80000aa, inset 0 0 30px rgba(184,0,0,0.12); } @media (max-width: 600px) { .nn-theme-card--scarface .nn-theme-card__logo { height: 56px; } .nn-theme-card--scarface .nn-theme-card__logo img { max-height: 54px; } } /* ============================================================ SCARFACE — MARQUEE: BREAKING MIAMI NEWS 1983 ============================================================ */ .nn-marquee--scarface { display: none; } [data-theme="scarface"] .nn-marquee--default { display: none; } [data-theme="scarface"] .nn-marquee--space-jam { display: none; } [data-theme="scarface"] .nn-marquee--windows-98 { display: none; } [data-theme="scarface"] .nn-marquee--lisa-frank { display: none; } [data-theme="scarface"] .nn-marquee--nickelodeon { display: none; } [data-theme="scarface"] .nn-marquee--blockbuster { display: none; } [data-theme="scarface"] .nn-marquee--scarface { display: none; } [data-theme="scarface"] .nn-arc-eat-scene { display: none; } [data-theme="scarface"] .nn-w98-title-buttons { display: none; } [data-theme="scarface"] .nn-marquee-link { display: none; } /* Bar: dark base, no position override (keeps base position:fixed) */ [data-theme="scarface"] .nn-marquee-bar { background: #0D0B0B; border-bottom: 1px solid rgba(184,0,0,0.5); overflow: hidden; } /* Animated Miami Beach color bands — rolling right to left */ [data-theme="scarface"] .nn-marquee-bar::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, #FF1493 0px, #FF1493 6px, #00F5FF 6px, #00F5FF 12px, #FFD700 12px, #FFD700 19px, #FF6B00 19px, #FF6B00 25px, #39FF14 25px, #39FF14 31px, #BF00FF 31px, #BF00FF 37px, #FF1493 37px, #FF1493 43px ); opacity: 0.26; animation: sf-miami-bands 2.2s linear infinite; pointer-events: none; z-index: 0; } /* CRT scanlines over the bands */ [data-theme="scarface"] .nn-marquee-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( transparent 0px, transparent 3px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px ); pointer-events: none; z-index: 2; } @keyframes sf-miami-bands { from { background-position: 0 0; } to { background-position: -43px 0; } } /* Breaking bar structure */ .nn-sf-breaking-bar { display: none; } [data-theme="scarface"] .nn-sf-breaking-bar { display: flex; align-items: stretch; position: absolute; inset: 0; z-index: 3; overflow: hidden; } .nn-sf-breaking-badge { display: flex; align-items: center; padding: 0 12px; background: #B80000; color: #fff; font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; flex-shrink: 0; white-space: nowrap; border-right: 2px solid rgba(255,255,255,0.15); text-shadow: none; } .nn-sf-ticker-wrap { flex: 1; overflow: hidden; display: flex; align-items: center; padding: 0 10px; } .nn-sf-ticker-text { display: inline-block; white-space: nowrap; font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; color: #F2EDE4; text-transform: uppercase; animation: marquee 55s linear infinite; } @media (max-width: 768px) { .nn-sf-ticker-text { animation-duration: 45s; } } /* ============================================================ SCARFACE — NAV: THE POSTER SPLIT ============================================================ */ [data-theme="scarface"] .nn-nav { background: linear-gradient(to right, #0D0B0B 50%, #EDE8E0 50%); border-bottom: 2px solid #B80000; box-shadow: 0 2px 24px #B8000045; } [data-theme="scarface"] .nn-nav__inner { align-items: center; min-height: 90px; } [data-theme="scarface"] .nn-nav__tab { height: 90px; } [data-theme="scarface"] .nn-nav__logo img { height: 80px; object-fit: contain; filter: none; } /* Tabs: cream text with dark shadow — readable on both black and cream halves */ [data-theme="scarface"] .nn-nav__tab { font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.16em; color: #F2EDE4; text-transform: uppercase; position: relative; transition: color 0.2s, text-shadow 0.2s; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,0.9); border-bottom: 3px solid transparent; } [data-theme="scarface"] .nn-nav__tab:hover, [data-theme="scarface"] .nn-nav__tab.is-active { color: #B80000; text-shadow: 0 0 10px rgba(184,0,0,0.5), 0 1px 3px #000; border-bottom-color: #B80000; } /* Disable the generic ::before hover glow for Scarface — bullet holes handle it */ [data-theme="scarface"] .nn-nav__tab::before { display: none; } /* THE STASH — cocaine baggie on cream half */ [data-theme="scarface"] .nn-nav__cart { display: none; } [data-theme="scarface"] .nn-arc-credits { display: none; } .nn-sf-cart { display: none; } [data-theme="scarface"] .nn-sf-cart { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: #1a1210; font-family: 'Oswald', sans-serif; text-transform: uppercase; padding: 5px 14px 8px; background: rgba(255,255,255,0.55); /* translucent bag body */ border: 1.5px solid rgba(26,18,16,0.2); border-top: 5px solid rgba(26,18,16,0.42); /* heat seal */ border-radius: 0 0 4px 4px; position: relative; transition: color 0.2s, box-shadow 0.2s, background 0.2s; min-width: 64px; } [data-theme="scarface"] .nn-sf-cart:hover { color: #B80000; background: rgba(255,255,255,0.7); box-shadow: 0 0 14px #B8000040; } [data-theme="scarface"] .nn-sf-cart__label { font-size: 7px; letter-spacing: 0.2em; color: #B80000; white-space: nowrap; } [data-theme="scarface"] .nn-sf-cart__count { font-size: 20px; font-weight: 600; line-height: 1; color: inherit; } /* ============================================================ SCARFACE — NAV: AMBIENT BULLET HOLES ============================================================ */ .nn-sf-bullet-holes { display: none; } [data-theme="scarface"] .nn-sf-bullet-holes { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 5; } .nn-sf-bullet { display: block; position: absolute; } [data-theme="scarface"] .nn-sf-bullet::before { content: ''; display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23301a1a' opacity='0.88'/%3E%3Ccircle cx='12' cy='12' r='6.5' fill='%23180d0d'/%3E%3Ccircle cx='12' cy='12' r='4' fill='%23000000'/%3E%3Cline x1='12' y1='3' x2='8' y2='-1' stroke='%23361e1e' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='12' y1='3' x2='16' y2='0' stroke='%23361e1e' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='21' y1='12' x2='25' y2='8' stroke='%23361e1e' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='21' y1='12' x2='25' y2='16' stroke='%23361e1e' stroke-width='0.8' stroke-linecap='round'/%3E%3Cline x1='3' y1='12' x2='-2' y2='9' stroke='%23361e1e' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='12' y1='21' x2='9' y2='25' stroke='%23361e1e' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='16' y1='18' x2='20' y2='22' stroke='%23361e1e' stroke-width='0.8' stroke-linecap='round'/%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 0 2px rgba(255,255,255,0.12)); } /* Smoke wisps rising from each bullet hole */ [data-theme="scarface"] .nn-sf-bullet::after { content: ''; position: absolute; bottom: 90%; left: 50%; width: 5px; height: 0; border-radius: 50%; background: linear-gradient( to top, rgba(215,195,175,0.55) 0%, rgba(205,185,165,0.22) 55%, transparent 100% ); filter: blur(2px); animation: sf-smoke 3s ease-out infinite; pointer-events: none; transform-origin: bottom center; } @keyframes sf-smoke { 0% { height: 0; opacity: 0.8; transform: translateX(-50%) rotate(0deg) scaleX(1); } 20% { height: 8px; opacity: 0.6; transform: translateX(-52%) rotate(-3deg) scaleX(1.4); } 50% { height: 18px; opacity: 0.38; transform: translateX(-48%) rotate(4deg) scaleX(2.0); } 80% { height: 28px; opacity: 0.16; transform: translateX(-51%) rotate(-2deg) scaleX(2.8); } 100% { height: 36px; opacity: 0; transform: translateX(-50%) rotate(2deg) scaleX(3.5); } } /* Stagger — each hole gets a unique start time and duration so they feel organic */ [data-theme="scarface"] .nn-sf-bullet:nth-child(1)::after { animation-delay: 0.0s; animation-duration: 2.8s; } [data-theme="scarface"] .nn-sf-bullet:nth-child(2)::after { animation-delay: 0.7s; animation-duration: 3.3s; } [data-theme="scarface"] .nn-sf-bullet:nth-child(3)::after { animation-delay: 1.4s; animation-duration: 2.6s; } [data-theme="scarface"] .nn-sf-bullet:nth-child(4)::after { animation-delay: 0.3s; animation-duration: 3.1s; } [data-theme="scarface"] .nn-sf-bullet:nth-child(5)::after { animation-delay: 1.9s; animation-duration: 2.9s; } [data-theme="scarface"] .nn-sf-bullet:nth-child(6)::after { animation-delay: 0.9s; animation-duration: 3.4s; } [data-theme="scarface"] .nn-sf-bullet:nth-child(7)::after { animation-delay: 2.2s; animation-duration: 2.7s; } [data-theme="scarface"] .nn-sf-bullet:nth-child(8)::after { animation-delay: 0.5s; animation-duration: 3.0s; } [data-theme="scarface"] .nn-sf-bullet:nth-child(9)::after { animation-delay: 1.6s; animation-duration: 2.5s; } [data-theme="scarface"] .nn-sf-bullet:nth-child(10)::after { animation-delay: 1.1s; animation-duration: 3.2s; } /* Mobile */ @media (max-width: 768px) { [data-theme="scarface"] .nn-nav__logo img { height: 56px; } [data-theme="scarface"] .nn-nav__tab { height: auto; padding: 12px 14px; } [data-theme="scarface"] .nn-sf-cart__label { font-size: 6px; } /* Nudge logo left so it reads centered in the black half */ [data-theme="scarface"] .nn-nav__logo { padding-left: 0; } } /* ============================================================ SCARFACE — HERO: MIAMI SUNSET ============================================================ */ /* Hide default hero body, show Scarface scene */ [data-theme="scarface"] .nn-hero { background: linear-gradient(to bottom, #FF6B1A 0%, #FF4060 18%, #D4165A 35%, #8B0080 55%, #3D0060 72%, #120028 90%, #0D0B0B 100% ); min-height: 100vh; position: relative; overflow: hidden; padding: 0; } [data-theme="scarface"] .nn-hero__body { display: none; } /* ── Hero scene container ── */ .nn-sf-hero-scene { display: none; } [data-theme="scarface"] .nn-sf-hero-scene { display: flex; flex-direction: column; align-items: flex-start; padding: 64px 40px 0; position: relative; z-index: 1; width: 100%; min-height: 100vh; max-width: 860px; margin: 0 auto; } /* ── Palm tree silhouettes ── */ [data-theme="scarface"] .nn-sf-palms { position: absolute; inset: 0; pointer-events: none; z-index: 0; width: 100vw; left: 50%; transform: translateX(-50%); } [data-theme="scarface"] .nn-sf-palm { position: absolute; bottom: 50px; opacity: 0.88; } [data-theme="scarface"] .nn-sf-palm--ll { left: -8px; width: 88px; height: 360px; } [data-theme="scarface"] .nn-sf-palm--ln { left: 62px; width: 80px; height: 290px; bottom: 44px; } [data-theme="scarface"] .nn-sf-palm--rn { right: 62px; width: 80px; height: 290px; bottom: 44px; } [data-theme="scarface"] .nn-sf-palm--rr { right: -8px; width: 88px; height: 360px; } /* ── Reviews: cocaine line → angled bill snorts → star rating pops ── */ [data-theme="scarface"] .nn-sf-reviews { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 40px; width: 100%; max-width: 560px; position: relative; z-index: 2; align-self: center; } /* Scene wrapper — coke line, bill, and rating all occupy same vertical space */ [data-theme="scarface"] .nn-sf-snort-scene { position: relative; width: 100%; height: 64px; } /* Cocaine line — irregular powder shape, erased left-to-right */ [data-theme="scarface"] .nn-sf-coke-line { position: absolute; top: 50%; left: 0; right: 0; height: 7px; transform: translateY(-50%); clip-path: inset(0 0 0 0%); animation: sf-snort-erase 1.9s linear forwards; animation-delay: 1.1s; } /* Irregular powder texture via polygon */ [data-theme="scarface"] .nn-sf-coke-line::before { content: ''; display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.92); clip-path: polygon( 0% 55%, 1% 0%, 3% 75%, 6% 5%, 9% 85%, 13% 10%, 17% 70%, 21% 0%, 25% 90%, 29% 15%, 33% 65%, 38% 0%, 43% 80%, 48% 10%, 53% 75%, 58% 0%, 62% 85%, 67% 5%, 72% 70%, 77% 20%, 82% 80%, 87% 0%, 92% 60%, 96% 25%, 100% 45%, 100% 100%, 0% 100% ); filter: blur(0.4px); box-shadow: 0 0 8px rgba(255,255,255,0.55), 0 0 20px rgba(255,255,255,0.2); } /* Erase from left (snorted) to right — delayed so it starts when bill reaches the line */ @keyframes sf-snort-erase { to { clip-path: inset(0 0 0 100%); } } /* Dollar bill image — enters from left, snorts across the line */ [data-theme="scarface"] .nn-sf-snort-bill { position: absolute; top: 50%; left: -140px; width: 120px; height: auto; transform: translateY(-80%); z-index: 4; opacity: 0; animation: sf-bill-move 2.4s ease-in forwards; animation-delay: 0.6s; } @keyframes sf-bill-move { 0% { left: -140px; opacity: 1; } 98% { opacity: 1; } 100% { left: calc(100% + 20px); opacity: 0; } } /* Star rating — absolutely overlaid on the coke line, pops in when snort finishes */ [data-theme="scarface"] .nn-sf-star-rating { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; justify-content: center; opacity: 0; animation: sf-rating-pop 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) forwards; animation-delay: 3.2s; } @keyframes sf-rating-pop { from { opacity: 0; transform: scale(0.85) translateY(5px); } to { opacity: 1; transform: scale(1) translateY(0); } } [data-theme="scarface"] .nn-sf-stars { color: #FFD700; font-size: clamp(18px, 2.6vw, 26px); letter-spacing: 0.06em; text-shadow: 0 0 14px rgba(255,215,0,0.5); } [data-theme="scarface"] .nn-sf-rating-label { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(13px, 1.8vw, 18px); font-weight: 600; color: rgba(255,255,255,0.9); letter-spacing: 0.06em; } @keyframes sf-fade-up { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } /* ── Tommy gun headline ── */ [data-theme="scarface"] .nn-sf-headline { display: flex; align-items: center; gap: 24px; align-self: center; margin-bottom: 40px; position: relative; z-index: 2; width: 100%; max-width: 860px; } /* Single tommy gun — stays stationary, fires 3 shots */ [data-theme="scarface"] .nn-sf-tommy-gun { position: relative; flex-shrink: 0; width: 110px; height: 65px; } /* Gun body / stock */ [data-theme="scarface"] .nn-sf-tommy-gun::before { content: ''; position: absolute; top: 14px; left: 0; width: 66px; height: 18px; background: linear-gradient(to bottom, #5a4030 0%, #2a1c10 100%); border-radius: 3px 0 2px 6px; border: 1px solid #1a1008; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } /* Barrel — points right */ [data-theme="scarface"] .nn-sf-tommy-gun::after { content: ''; position: absolute; top: 17px; right: 0; width: 48px; height: 10px; background: linear-gradient(to bottom, #2a1c10 0%, #1a1008 100%); border-radius: 0 4px 4px 0; border: 1px solid #0a0804; } /* Circular drum magazine — tommy gun's signature */ [data-theme="scarface"] .nn-sf-tommy-gun__drum { position: absolute; bottom: 0; left: 22px; width: 32px; height: 32px; background: radial-gradient(circle at 38% 32%, #4a3020 0%, #2a1c10 55%, #1a1008 100%); border-radius: 50%; border: 2px solid #3a2418; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06); } /* Muzzle flash div — 3 bursts timed to each shot */ [data-theme="scarface"] .nn-sf-tommy-gun__flash { position: absolute; top: 22px; right: -4px; width: 10px; height: 8px; border-radius: 50%; animation: sf-three-shots 1.9s ease-out forwards; animation-delay: 3.6s; } /* Shot 1 = 0%, Shot 2 = 47% (0.9s in), Shot 3 = 95% (1.8s in) */ @keyframes sf-three-shots { 0% { box-shadow: 0 0 0 0px rgba(255,230,50,0), 0 0 0 0px rgba(255,110,0,0); } 2% { box-shadow: 0 0 0 16px rgba(255,230,50,0.95), 0 0 0 28px rgba(255,110,0,0.5); } 8% { box-shadow: 0 0 0 8px rgba(255,180,30,0.35), 0 0 0 14px rgba(255,70,0,0.18); } 13% { box-shadow: 0 0 0 0px rgba(255,100,0,0), 0 0 0 0px rgba(255,50,0,0); } 46% { box-shadow: 0 0 0 0px rgba(255,230,50,0), 0 0 0 0px rgba(255,110,0,0); } 48% { box-shadow: 0 0 0 16px rgba(255,230,50,0.95), 0 0 0 28px rgba(255,110,0,0.5); } 54% { box-shadow: 0 0 0 8px rgba(255,180,30,0.35), 0 0 0 14px rgba(255,70,0,0.18); } 59% { box-shadow: 0 0 0 0px rgba(255,100,0,0), 0 0 0 0px rgba(255,50,0,0); } 93% { box-shadow: 0 0 0 0px rgba(255,230,50,0), 0 0 0 0px rgba(255,110,0,0); } 95% { box-shadow: 0 0 0 16px rgba(255,230,50,0.95), 0 0 0 28px rgba(255,110,0,0.5); } 100% { box-shadow: 0 0 0 6px rgba(255,180,30,0.2), 0 0 0 10px rgba(255,70,0,0.1); } } /* Text lines container */ [data-theme="scarface"] .nn-sf-gun-lines { display: flex; flex-direction: column; gap: 6px; } [data-theme="scarface"] .nn-sf-gunline { overflow: hidden; } /* Text — Playfair Display 900 to match logo, fires left-to-right per shot */ [data-theme="scarface"] .nn-sf-gunline__text { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(22px, 4.8vw, 52px); font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: #EDE8E0; text-shadow: 0 0 40px rgba(255,80,20,0.4), 2px 2px 0 rgba(0,0,0,0.45); white-space: nowrap; display: block; clip-path: inset(0 100% 0 0); animation: sf-text-fire 0.38s cubic-bezier(0.08, 0.7, 0.3, 1) forwards; } [data-theme="scarface"] .nn-sf-gunline--1 .nn-sf-gunline__text { animation-delay: 3.75s; } [data-theme="scarface"] .nn-sf-gunline--2 .nn-sf-gunline__text { animation-delay: 4.65s; } [data-theme="scarface"] .nn-sf-gunline--3 .nn-sf-gunline__text { animation-delay: 5.55s; } @keyframes sf-text-fire { to { clip-path: inset(0 0% 0 0); } } /* ── CTAs ── */ [data-theme="scarface"] .nn-sf-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 52px; position: relative; z-index: 2; width: 100%; opacity: 0; animation: sf-fade-up 0.6s ease forwards; animation-delay: 6.2s; } [data-theme="scarface"] .nn-sf-hero-cta { font-family: 'Cinzel Decorative', serif; font-size: clamp(11px, 1.5vw, 13px); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 16px 34px; text-decoration: none; border: none; cursor: pointer; display: inline-block; transition: all 0.2s; } [data-theme="scarface"] .nn-sf-hero-cta--primary { background: #B80000; color: #EDE8E0; border: 2px solid rgba(255,40,40,0.6); box-shadow: 0 0 22px rgba(184,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1); } [data-theme="scarface"] .nn-sf-hero-cta--primary:hover { background: #D50000; box-shadow: 0 0 36px rgba(220,0,0,0.8), 0 0 70px rgba(184,0,0,0.3); transform: translateY(-2px); } [data-theme="scarface"] .nn-sf-hero-cta--secondary { background: transparent; color: rgba(237,232,224,0.72); border: 1.5px solid rgba(237,232,224,0.36); } [data-theme="scarface"] .nn-sf-hero-cta--secondary:hover { background: rgba(237,232,224,0.08); color: #EDE8E0; border-color: rgba(237,232,224,0.65); } /* ── Stage: ornate table + cocaine mountain + glowing jar ── */ [data-theme="scarface"] .nn-sf-stage { position: relative; width: min(640px, 100%); height: 280px; margin: 0 auto; z-index: 2; align-self: center; } /* Table top surface with gold trim */ [data-theme="scarface"] .nn-sf-table-top { position: absolute; bottom: 120px; left: 0; right: 0; height: 16px; background: linear-gradient(to bottom, #4a2c14 0%, #2c1608 100%); border: 2px solid #C0922A; border-radius: 4px; box-shadow: inset 0 2px 4px rgba(255,255,255,0.07), 0 0 0 1px rgba(192,146,42,0.3), 0 4px 0 #7a5c18, 0 8px 20px rgba(0,0,0,0.7); } /* Table apron front face with ornate carved panel */ [data-theme="scarface"] .nn-sf-table-apron { position: absolute; bottom: 70px; left: 18px; right: 18px; height: 52px; background: linear-gradient(to bottom, #2c1608 0%, #1a0c04 100%); border: 1.5px solid rgba(192,146,42,0.5); border-top: none; } [data-theme="scarface"] .nn-sf-table-apron::before { content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 110px; height: 24px; border: 1px solid rgba(192,146,42,0.4); border-radius: 2px; } /* Table legs */ [data-theme="scarface"] .nn-sf-table-leg { position: absolute; bottom: 0; width: 22px; height: 72px; background: linear-gradient(to right, #180c04, #2c1808, #180c04); border: 1px solid rgba(192,146,42,0.4); border-top: none; } [data-theme="scarface"] .nn-sf-table-leg--l { left: 28px; } [data-theme="scarface"] .nn-sf-table-leg--r { right: 28px; } /* Cocaine mound */ [data-theme="scarface"] .nn-sf-mountain { position: absolute; bottom: 136px; left: 50%; transform: translateX(-50%); width: 300px; height: 78px; background: radial-gradient(ellipse 92% 80% at 50% 100%, #ffffff 0%, #f6f3ee 35%, #e8e3d8 75%, transparent 100%); filter: drop-shadow(0 0 22px rgba(255,255,255,0.5)) drop-shadow(0 0 50px rgba(255,255,255,0.18)); } /* Product jar — warm amber glow */ [data-theme="scarface"] .nn-sf-stage-jar { position: absolute; bottom: 136px; left: 50%; transform: translateX(-50%); height: 150px; z-index: 3; animation: sf-jar-warm 2.6s ease-in-out infinite alternate; } @keyframes sf-jar-warm { from { filter: drop-shadow(0 0 16px rgba(255,185,40,0.8)) drop-shadow(0 0 38px rgba(255,120,0,0.45)); } to { filter: drop-shadow(0 0 26px rgba(255,210,60,1.0)) drop-shadow(0 0 55px rgba(255,155,0,0.65)) brightness(1.07); } } /* ── Mobile ── */ @media (max-width: 768px) { [data-theme="scarface"] .nn-sf-hero-scene { padding: 48px 20px 0; align-items: center; } [data-theme="scarface"] .nn-sf-headline { align-items: center; } [data-theme="scarface"] .nn-sf-hero-ctas { justify-content: center; } [data-theme="scarface"] .nn-sf-reviews { max-width: 100%; } [data-theme="scarface"] .nn-sf-palm--ln, [data-theme="scarface"] .nn-sf-palm--rn { display: none; } [data-theme="scarface"] .nn-sf-palm--ll, [data-theme="scarface"] .nn-sf-palm--rr { width: 66px; height: 260px; } [data-theme="scarface"] .nn-sf-gunline { gap: 8px; } [data-theme="scarface"] .nn-sf-gunline__gun { width: 42px; } [data-theme="scarface"] .nn-sf-gunline__text { white-space: normal; } [data-theme="scarface"] .nn-sf-stage { height: 210px; } [data-theme="scarface"] .nn-sf-table-top { bottom: 98px; } [data-theme="scarface"] .nn-sf-table-apron { bottom: 52px; height: 48px; left: 12px; right: 12px; } [data-theme="scarface"] .nn-sf-table-leg { height: 54px; } [data-theme="scarface"] .nn-sf-table-leg--l { left: 18px; } [data-theme="scarface"] .nn-sf-table-leg--r { right: 18px; } [data-theme="scarface"] .nn-sf-mountain { width: 230px; height: 62px; bottom: 114px; } [data-theme="scarface"] .nn-sf-stage-jar { height: 116px; bottom: 114px; } } /* sf-default: clean dark marble base — no repeating tile pattern */ [data-pattern="sf-default"] { --color-bg: #0D0B0B; --pattern-bg: none; --pattern-size: auto; --pattern-opacity: 0; } /* ============================================================ SATURDAY MORNING CARTOONS — MARQUEE BAR ============================================================ */ .nn-marquee--saturday-morning-cartoons { display: none; } .nn-smc-live-badge { display: none; } [data-theme="saturday-morning-cartoons"] .nn-marquee--default { display: none; } [data-theme="saturday-morning-cartoons"] .nn-marquee--space-jam { display: none; } [data-theme="saturday-morning-cartoons"] .nn-marquee--windows-98 { display: none; } [data-theme="saturday-morning-cartoons"] .nn-marquee--lisa-frank { display: none; } [data-theme="saturday-morning-cartoons"] .nn-marquee--nickelodeon { display: none; } [data-theme="saturday-morning-cartoons"] .nn-marquee--blockbuster { display: none; } [data-theme="saturday-morning-cartoons"] .nn-marquee--scarface { display: none; } [data-theme="saturday-morning-cartoons"] .nn-marquee--saturday-morning-cartoons { display: inline-block; } /* Color-block background: red → blue → yellow, repeating */ [data-theme="saturday-morning-cartoons"] .nn-marquee-bar { background: repeating-linear-gradient( 90deg, #D9231D 0px, #D9231D 180px, #1A4CC8 180px, #1A4CC8 360px, #F5C200 360px, #F5C200 540px ); overflow: hidden; } /* Text: Bangers, white with black outline, vertically centered */ [data-theme="saturday-morning-cartoons"] .nn-marquee--saturday-morning-cartoons { font-family: 'Bangers', cursive; font-size: 16px; letter-spacing: 0.07em; color: #ffffff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; line-height: 36px; } /* TV icon inside marquee text */ .nn-smc-tv-icon { display: inline; vertical-align: middle; margin: 0 6px; } /* Shift marquee link right so text clears the LIVE badge */ [data-theme="saturday-morning-cartoons"] .nn-marquee-link { padding-left: 78px; } /* LIVE badge: red pill, absolute left of bar */ [data-theme="saturday-morning-cartoons"] .nn-smc-live-badge { display: flex; align-items: center; gap: 5px; position: absolute; left: 0; top: 0; bottom: 0; z-index: 10; background: #D9231D; border-right: 2px solid #000; border-radius: 0; padding: 0 10px 0 8px; pointer-events: none; } .nn-smc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex-shrink: 0; animation: smc-blink 1s step-end infinite; } .nn-smc-live-label { font-family: 'Bangers', cursive; font-size: 13px; letter-spacing: 0.12em; color: #fff; line-height: 1; } @keyframes smc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ============================================================ SATURDAY MORNING CARTOONS — NAV ============================================================ */ [data-theme="saturday-morning-cartoons"] .nn-nav { background-color: #ffffff; background-image: repeating-linear-gradient( -45deg, transparent 0px, transparent 9px, rgba(255,180,0,0.08) 9px, rgba(255,180,0,0.08) 10px ); border-bottom: 4px solid #000; box-shadow: none; overflow: clip; } /* Speed lines div — unused, kept in HTML for future use */ .nn-smc-speed-lines { display: none; } /* Logo: gentle bounce + periodic channel static flicker */ [data-theme="saturday-morning-cartoons"] .nn-logo-img { animation: smc-logo-bounce 2.4s ease-in-out infinite, smc-static-flicker 9s linear infinite; } @keyframes smc-logo-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes smc-static-flicker { 0%, 86%, 100% { opacity: 1; filter: none; } 87% { opacity: 0.5; filter: brightness(2) saturate(0); } 87.4%{ opacity: 1; filter: none; } 88% { opacity: 0.3; filter: brightness(0.4); } 88.4%{ opacity: 1; filter: none; } } /* Nav tabs */ [data-theme="saturday-morning-cartoons"] .nn-nav__tab { font-family: 'Bangers', cursive; font-size: 17px; letter-spacing: 0.07em; color: #000; border-bottom: 4px solid transparent; } [data-theme="saturday-morning-cartoons"] .nn-nav__tab::before { display: none; } [data-theme="saturday-morning-cartoons"] .nn-nav__tab:hover { color: #1A4CC8; border-bottom-color: #1A4CC8; } [data-theme="saturday-morning-cartoons"] .nn-nav__tab.is-active { color: #D9231D; border-bottom-color: #D9231D; } /* Hide default cart, show cereal box */ [data-theme="saturday-morning-cartoons"] .nn-nav__cart { display: none; } .nn-smc-cart { display: none; } [data-theme="saturday-morning-cartoons"] .nn-smc-cart { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; min-width: 44px; min-height: 44px; justify-content: center; } .nn-smc-cart__box-wrap { position: relative; } .nn-smc-cart__count { position: absolute; top: -6px; right: -10px; background: #FFE033; border: 2px solid #000; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-family: 'Bangers', cursive; font-size: 12px; color: #000; line-height: 1; } .nn-smc-cart__label { font-family: 'Bangers', cursive; font-size: 11px; letter-spacing: 0.1em; color: #000; line-height: 1; } /* Mobile */ @media (max-width: 768px) { [data-theme="saturday-morning-cartoons"] .nn-logo-img { height: 90px; } [data-theme="saturday-morning-cartoons"] .nn-smc-speed-lines { width: 180px; height: 180px; } } /* ============================================================ SATURDAY MORNING CARTOONS — HERO ============================================================ */ .nn-smc-hero-scene { display: none; } [data-theme="saturday-morning-cartoons"] .nn-smc-hero-scene { display: block; } [data-theme="saturday-morning-cartoons"] .nn-hero__body { display: none; } /* ── Section ── */ [data-theme="saturday-morning-cartoons"] .nn-smc-hero-scene { position: relative; overflow: hidden; background-color: #FFF8E7; background-image: linear-gradient( 90deg, rgba(192,192,192,0.05) 0% 14.28%, rgba(192,192,0,0.05) 14.28% 28.57%, rgba(0,192,192,0.05) 28.57% 42.86%, rgba(0,192,0,0.05) 42.86% 57.14%, rgba(192,0,192,0.05) 57.14% 71.43%, rgba(192,0,0,0.05) 71.43% 85.71%, rgba(0,0,192,0.05) 85.71% 100% ); padding-bottom: 55px; } /* ── Color bars overlay ── */ .nn-smc-bars-overlay { position: fixed; inset: 0; z-index: 9998; display: flex; flex-direction: row; pointer-events: none; } .nn-smc-bar { flex: 1; } .nn-smc-bars-pluge { position: absolute; bottom: 0; left: 0; right: 0; height: 25%; background: #000; } /* ── Hero inner (clip-path warmup applied by JS) ── */ .nn-smc-hero-inner { display: flex; flex-direction: column; align-items: center; padding: 28px 20px 16px; } /* ── Copy — mobile: order 2 (below TV) ── */ .nn-smc-copy { order: 2; width: 100%; text-align: center; padding-top: 28px; } /* ── TV wrap — mobile: order 1 (above copy) ── */ .nn-smc-tv-wrap { order: 1; display: flex; flex-direction: column; align-items: center; width: 100%; } /* ── Hero machine wrap ── */ .nn-smc-hero-machine-wrap { order: 1; display: flex; flex-direction: column; align-items: center; width: 100%; } .nn-smc-machine--hero { width: 240px; } .nn-smc-machine--hero .nn-smc-machine__body { width: 240px; } /* Hero coupon strip */ .nn-smc-hero-strip { max-height: 0; overflow: hidden; transition: max-height 1.8s cubic-bezier(0.2, 0.8, 0.3, 1); width: 240px; } .nn-smc-hero-strip.is-pulled { max-height: 600px; } /* Hero coupon card */ .nn-smc-hero-coupon { background: #F5F0E4; border-left: 2px solid #ddd; border-right: 2px solid #ddd; border-bottom: 2px solid #ddd; border-radius: 0 0 4px 4px; padding: 12px 14px 10px; opacity: 0; transform: translateY(-6px); transition: opacity 0.5s ease 0.6s, transform 0.5s ease 0.6s; } .nn-smc-hero-strip.is-pulled .nn-smc-hero-coupon { opacity: 1; transform: none; } .nn-smc-hero-coupon__label { font-size: 8px; font-weight: 700; letter-spacing: 2.5px; color: #999; text-align: center; text-transform: uppercase; margin-bottom: 10px; } /* Before / after reveal */ .nn-smc-hero-coupon__reveal { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; } .nn-smc-hero-coupon__side { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; } .nn-smc-hero-coupon__img { width: 80px; height: 80px; object-fit: contain; border: 1.5px solid #ddd; border-radius: 3px; padding: 4px; background: #fff; filter: grayscale(80%) contrast(0.85) brightness(0.9); } .nn-smc-hero-coupon__img--new { filter: none; border-color: #F5C200; box-shadow: 0 0 8px rgba(245,194,0,0.5); } .nn-smc-hero-coupon__stamp { font-family: 'Bangers', cursive; font-size: 11px; letter-spacing: 1.5px; padding: 2px 6px; border-radius: 2px; } .nn-smc-hero-coupon__stamp--disc { background: #D9231D; color: #fff; } .nn-smc-hero-coupon__stamp--new { background: #F5C200; color: #111; } .nn-smc-hero-coupon__year { font-size: 9px; font-weight: 700; color: #888; letter-spacing: 1px; } .nn-smc-hero-coupon__arrow { font-family: 'Bangers', cursive; font-size: 36px; color: #D9231D; line-height: 1; flex: 0 0 auto; } /* NOW AIRING eyebrow */ .nn-smc-now-airing { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Bangers', cursive; font-size: 13px; letter-spacing: 0.18em; color: #D9231D; margin-bottom: 10px; } .nn-smc-now-airing__dot { width: 9px; height: 9px; border-radius: 50%; background: #D9231D; flex-shrink: 0; animation: smc-blink 1s step-end infinite; } /* Stars */ .nn-smc-stars { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 14px; } .nn-smc-stars__icons { color: #FFE033; font-size: 16px; letter-spacing: 2px; } .nn-smc-stars__label { color: #444; } /* Headline */ .nn-smc-headline { font-family: 'Bangers', cursive; font-size: 30px; line-height: 1.1; letter-spacing: 0.02em; color: #1A1A4E; text-shadow: 3px 3px 0 #FFE033; margin: 0 0 14px; } /* Sub copy */ .nn-smc-sub { font-size: 15px; line-height: 1.65; color: #333; margin: 0 auto 24px; max-width: 480px; } /* CTAs */ .nn-smc-cta-group { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .nn-smc-btn-primary { display: inline-flex; align-items: center; font-family: 'Bangers', cursive; font-size: 17px; letter-spacing: 0.08em; color: #fff; background: #D9231D; border: 3px solid #000; border-radius: 4px; padding: 10px 22px; text-decoration: none; box-shadow: 4px 4px 0 #000; transition: transform 0.08s, box-shadow 0.08s; min-height: 44px; } .nn-smc-btn-primary:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #000; } .nn-smc-btn-primary:active { transform: translate(4px,4px); box-shadow: 0 0 0 #000; } .nn-smc-btn-secondary { display: inline-flex; align-items: center; font-family: 'Bangers', cursive; font-size: 16px; letter-spacing: 0.08em; color: #000; background: transparent; border: 3px solid #000; border-radius: 4px; padding: 10px 20px; cursor: pointer; box-shadow: 4px 4px 0 #000; transition: transform 0.08s, box-shadow 0.08s; min-height: 44px; } .nn-smc-btn-secondary:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #000; } .nn-smc-btn-secondary:active { transform: translate(4px,4px); box-shadow: 0 0 0 #000; } /* ============================================================ CRT TELEVISION ============================================================ */ .nn-smc-tv { position: relative; width: 300px; } /* Rabbit ears */ .nn-smc-tv__ears { position: absolute; top: 0; left: 0; right: 0; height: 62px; pointer-events: none; } .nn-smc-tv__ear { position: absolute; bottom: 0; width: 5px; height: 60px; background: linear-gradient(to right, #777, #ccc, #777); border-radius: 3px; transform-origin: bottom center; } .nn-smc-tv__ear::before { content: ''; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4470e0, #1A4CC8); border: 2px solid #000; } .nn-smc-tv__ear--l { left: calc(50% - 38px); transform: rotate(-28deg); } .nn-smc-tv__ear--r { right: calc(50% - 38px); transform: rotate(28deg); } /* TV body */ .nn-smc-tv__body { position: relative; background: #D9231D; border-radius: 18px 18px 14px 14px; border: 3px solid #000; box-shadow: 5px 6px 0 2px #000, inset 0 2px 0 rgba(255,255,255,0.18); padding: 16px 58px 12px 16px; margin-top: 62px; } /* CRT phosphor glow — pulses on the bezel, bleeds outward like real phosphor */ @keyframes smc-phosphor-pulse { 0%, 100% { box-shadow: inset 0 0 20px rgba(0,0,0,0.9), 0 0 12px rgba(60,180,255,0.28), 0 0 28px rgba(60,180,255,0.10); } 50% { box-shadow: inset 0 0 20px rgba(0,0,0,0.9), 0 0 22px rgba(60,180,255,0.50), 0 0 48px rgba(60,180,255,0.20); } } /* Screen bezel */ .nn-smc-tv__screen-bezel { background: #111; border-radius: 6px; border: 3px solid #000; padding: 5px; animation: smc-phosphor-pulse 3s ease-in-out infinite; } /* Screen */ .nn-smc-tv__screen { position: relative; width: 100%; height: 148px; background: #050510; border-radius: 4px; overflow: hidden; } .nn-smc-tv__product { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; } /* Scanlines */ .nn-smc-tv__scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.13) 2px, rgba(0,0,0,0.13) 3px ); z-index: 5; pointer-events: none; border-radius: inherit; } /* Glare */ .nn-smc-tv__glare { position: absolute; top: 0; left: 0; width: 55%; height: 40%; background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 65%); z-index: 6; pointer-events: none; border-radius: 4px 0 0 0; } /* Channel bug */ .nn-smc-tv__bug { position: absolute; bottom: 6px; right: 7px; font-family: 'Bangers', cursive; font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); z-index: 7; pointer-events: none; } /* Static flash */ .nn-smc-tv__static { position: absolute; inset: 0; opacity: 0; z-index: 8; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 2px, transparent 2px, transparent 5px); } @keyframes smc-static-noise { 0% { opacity: 1; filter: brightness(2.2) contrast(1.5); } 20% { opacity: 0.7; filter: brightness(0.3); } 40% { opacity: 1; filter: brightness(1.8) hue-rotate(180deg); } 60% { opacity: 0.5; filter: brightness(0.2) contrast(3); } 80% { opacity: 0.9; filter: brightness(1.4); } 100% { opacity: 0; filter: none; } } /* Speaker grille */ .nn-smc-tv__speaker { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 4px; padding: 0 4px; } .nn-smc-tv__speaker span { display: block; height: 2px; background: rgba(0,0,0,0.28); border-radius: 1px; } /* Knobs */ .nn-smc-tv__knobs { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 18px; } .nn-smc-tv__knob { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4470e0, #1A4CC8, #0d2870); border: 2px solid #000; box-shadow: 2px 2px 0 1px #000; position: relative; } .nn-smc-tv__knob::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.4); } /* Feet */ .nn-smc-tv__feet { display: flex; justify-content: space-between; padding: 0 36px; } .nn-smc-tv__foot { width: 48px; height: 16px; background: #A01515; border: 2px solid #000; border-top: none; border-radius: 0 0 6px 6px; box-shadow: 2px 3px 0 1px #000; } /* ── Channel buttons ── */ .nn-smc-channels { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; } .nn-smc-ch { font-family: 'Bangers', cursive; font-size: 15px; letter-spacing: 0.08em; background: #1a1a1a; color: #fff; border: 2.5px solid #000; border-radius: 4px; padding: 6px 12px; cursor: pointer; box-shadow: 3px 3px 0 #000; transition: transform 0.08s, box-shadow 0.08s, background 0.1s; min-width: 48px; min-height: 44px; } .nn-smc-ch:hover:not(.is-active) { background: #1A4CC8; } .nn-smc-ch.is-active { background: #D9231D; } .nn-smc-ch:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #000; } /* ── Cereal bowl prop ── */ .nn-smc-bowl-prop { display: none; } /* ── Carpet strip ── */ .nn-smc-carpet { display: none; } /* ── CRT TV Reel ── */ .nn-smc-tv-reel { position: relative; width: 100%; height: 190px; overflow: hidden; } .nn-smc-tv-track { position: absolute; inset: 0; display: flex; align-items: center; } .nn-smc-tv-track__inner { display: flex; align-items: center; gap: 24px; padding: 16px; width: max-content; animation: nn-smc-tv-scroll 14s linear infinite; } /* Grainy track: left half only */ .nn-smc-tv-track--before { clip-path: inset(0 50% 0 0); } /* Bright track: right half only */ .nn-smc-tv-track--after { clip-path: inset(0 0 0 50%); } .nn-smc-tv-track--before .nn-smc-tv-set__screen img { filter: grayscale(90%) contrast(0.75) brightness(0.65) sepia(15%); } /* TV set */ .nn-smc-tv-set { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; } .nn-smc-tv-set__antennas { display: flex; gap: 18px; margin-bottom: -1px; } .nn-smc-tv-set__antenna { display: block; width: 3px; height: 28px; background: #3c3c3c; border-radius: 2px; } .nn-smc-tv-set__antenna--l { transform: rotate(-18deg); transform-origin: bottom center; } .nn-smc-tv-set__antenna--r { transform: rotate(18deg); transform-origin: bottom center; } .nn-smc-tv-set__body { width: 130px; height: 108px; background: linear-gradient(150deg, #484848 0%, #2c2c2c 55%, #1a1a1a 100%); border-radius: 10px 10px 6px 6px; border: 2px solid #0d0d0d; box-shadow: inset 0 -3px 6px rgba(0,0,0,0.6), 2px 4px 10px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 7px 7px 7px 10px; position: relative; } /* Legs */ .nn-smc-tv-set__body::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 52%; height: 8px; background: #222; border-radius: 0 0 4px 4px; } /* Knobs */ .nn-smc-tv-set__body::before { content: ''; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; background: #555; border-radius: 50%; box-shadow: 0 11px 0 #555; } .nn-smc-tv-set__screen { width: 94px; height: 78px; background: #111; border-radius: 3px; border: 2px solid #000; overflow: hidden; position: relative; } /* Colored TV body (after track) */ .nn-smc-tv-set__body--color { border-color: rgba(0,0,0,0.25); box-shadow: inset 0 -3px 6px rgba(0,0,0,0.3), 2px 4px 12px rgba(0,0,0,0.35); } .nn-smc-tv-set__body--color::before { background: rgba(255,255,255,0.35); box-shadow: 0 11px 0 rgba(255,255,255,0.35); } .nn-smc-tv-set__body--color::after { background: rgba(0,0,0,0.25); } /* Scan lines */ .nn-smc-tv-set__screen::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 3px ); z-index: 2; pointer-events: none; } .nn-smc-tv-set__screen img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Portal bar */ .nn-smc-tv-portal { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; z-index: 20; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .nn-smc-tv-portal__beam { width: 2px; height: 100%; background: linear-gradient(to bottom, transparent 0%, #F5C200 20%, #F5C200 80%, transparent 100%); box-shadow: 0 0 6px 1px rgba(245,194,0,0.55); } .nn-smc-tv-portal__tag { position: absolute; bottom: -28px; z-index: 20; font-family: 'Bangers', cursive; font-size: 10px; letter-spacing: 2px; padding: 3px 10px; border-radius: 3px; white-space: nowrap; pointer-events: none; } .nn-smc-tv-portal__tag--before { left: 12px; background: #444; color: #ccc; } .nn-smc-tv-portal__tag--after { right: 12px; background: #F5C200; color: #111; } @keyframes nn-smc-tv-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* Desktop: slightly larger TVs */ @media (min-width: 769px) { .nn-smc-tv-reel { height: 220px; } .nn-smc-tv-set__body { width: 152px; height: 126px; } .nn-smc-tv-set__screen { width: 110px; height: 90px; } .nn-smc-tv-set__antennas { gap: 22px; } .nn-smc-tv-set__antenna { height: 34px; } } /* ============================================================ SATURDAY MORNING CARTOONS — CEREAL SHELF PRODUCT GRID ============================================================ */ /* Visibility */ .nn-smc-shelf-unit { display: none; } [data-theme="saturday-morning-cartoons"] .nn-smc-shelf-unit { display: block; } [data-theme="saturday-morning-cartoons"] .nn-product-grid .nn-section-header, [data-theme="saturday-morning-cartoons"] .nn-product-grid .nn-section-sub, [data-theme="saturday-morning-cartoons"] .nn-product-grid .nn-grid, [data-theme="saturday-morning-cartoons"] .nn-product-grid .nn-w98-explorer, [data-theme="saturday-morning-cartoons"] .nn-product-grid .nn-w98-explorer__pane, [data-theme="saturday-morning-cartoons"] .nn-product-grid .nn-w98-explorer__statusbar, [data-theme="saturday-morning-cartoons"] .nn-product-grid .nn-bb-shelf-unit, [data-theme="saturday-morning-cartoons"] .nn-product-grid .nn-arc-dk-unit { display: none; } /* ── Color tokens per variant ── */ .nn-smc-box--red { --box-bg: #D9231D; --box-text: #fff; --badge-bg: #F5C200; --badge-text: #000; } .nn-smc-box--blue { --box-bg: #1A4CC8; --box-text: #fff; --badge-bg: #F5C200; --badge-text: #000; } .nn-smc-box--yellow { --box-bg: #F5C200; --box-text: #000; --badge-bg: #D9231D; --badge-text: #fff; } /* Section header */ .nn-smc-shelf-header { padding: 44px 20px 24px; text-align: center; } .nn-smc-shelf-header__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: 'Bangers', cursive; font-size: 13px; letter-spacing: 3px; color: #D9231D; margin-bottom: 8px; } .nn-smc-shelf-header__live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #D9231D; animation: smc-blink 1s step-end infinite; flex-shrink: 0; } @keyframes smc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .nn-smc-shelf-header__title { font-family: 'Bangers', cursive; font-size: 40px; letter-spacing: 2px; color: #111; line-height: 1; margin: 0 0 8px; } .nn-smc-shelf-header__sub { font-size: 13px; color: #666; letter-spacing: 0.3px; } /* Shelf body */ .nn-smc-shelf-body { padding: 0 16px 48px; max-width: 480px; margin: 0 auto; } /* Shelf row: 1 column — each box on its own shelf */ .nn-smc-shelf-row { display: block; } /* Mobile: box-planks handle separation, hide row-level planks */ .nn-smc-shelf-plank { display: none; } .nn-smc-box-plank { margin-bottom: 24px; } /* Shelf plank */ .nn-smc-shelf-plank { margin-bottom: 32px; } .nn-smc-shelf-plank__face { height: 16px; background: linear-gradient(to bottom, #D4A055 0%, #9B6B28 100%); border: 2px solid #000; border-bottom: none; box-shadow: inset 0 4px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0,0,0,0.15); } .nn-smc-shelf-plank__edge { height: 8px; background: #5C3D14; border: 2px solid #000; border-top: none; box-shadow: 0 3px 0 rgba(0,0,0,0.25); } /* ── Box: perspective wrapper ── */ .nn-smc-box { cursor: pointer; perspective: 1000px; -webkit-tap-highlight-color: transparent; user-select: none; } /* ── Box inner: flips on .is-flipped ── */ .nn-smc-box__inner { position: relative; width: 100%; height: 500px; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); border: 3px solid #000; box-shadow: 5px 5px 0 #000; } .nn-smc-box__inner.is-flipped { transform: rotateY(180deg); } /* ── Shared: front + back ── */ .nn-smc-box__front, .nn-smc-box__back { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .nn-smc-box__back { transform: rotateY(180deg); } /* ══ FRONT ══ */ /* Color top — flavor name */ .nn-smc-box__top { flex: 0 0 auto; background: var(--box-bg); color: var(--box-text); display: flex; align-items: center; justify-content: center; padding: 12px 14px; border-bottom: 3px solid #000; text-align: center; } .nn-smc-box__box-name { font-family: 'Bangers', cursive; font-size: clamp(18px, 5vw, 28px); letter-spacing: 1.5px; line-height: 1.05; } /* Product image panel */ .nn-smc-box__panel { flex: 1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 14px; border-bottom: 3px solid #000; } .nn-smc-box__img { width: 100%; height: 100%; object-fit: contain; } /* Price */ .nn-smc-box__front-price { flex: 0 0 auto; background: #FFF8E7; font-family: 'Bangers', cursive; font-size: 26px; letter-spacing: 1px; color: #111; padding: 8px 14px; border-bottom: 3px solid #000; text-align: center; } /* CTA button — front and back */ .nn-smc-box__cart-btn { display: block; width: 100%; background: var(--box-bg); color: var(--box-text); font-family: 'Bangers', cursive; font-size: 20px; letter-spacing: 1.5px; border: none; padding: 14px 10px; cursor: pointer; } .nn-smc-box__cart-btn:active { opacity: 0.85; } /* ══ BACK ══ */ /* Color top */ .nn-smc-box__back-top { flex: 0 0 auto; background: var(--box-bg); color: var(--box-text); padding: 10px 14px; border-bottom: 3px solid #000; text-align: center; } .nn-smc-box__back-label { font-family: 'Bangers', cursive; font-size: 10px; letter-spacing: 2.5px; opacity: 0.75; line-height: 1; margin-bottom: 3px; } .nn-smc-box__back-name { font-family: 'Bangers', cursive; font-size: 24px; letter-spacing: 1px; line-height: 1; } /* Original snack image zone */ .nn-smc-box__back-og { flex: 1; background: #f5f5f5; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 3px solid #000; overflow: hidden; padding: 10px; } .nn-smc-box__og-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0 auto; object-fit: contain; } .nn-smc-box__og-name { font-family: 'Bangers', cursive; font-size: 11px; letter-spacing: 2px; color: #888; text-align: center; padding: 4px 0 6px; } /* Description */ .nn-smc-box__back-body { flex: 1; background: #FFF8E7; padding: 10px 14px; overflow: hidden; border-bottom: 2px solid #000; display: flex; align-items: center; justify-content: center; text-align: center; } .nn-smc-box__back-desc { font-size: 12px; line-height: 1.45; color: #333; margin: 0; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Era / timeframe strip */ .nn-smc-box__era { flex: 0 0 auto; background: #fff; border-bottom: 2px solid #000; padding: 6px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; } .nn-smc-box__era-label { font-family: 'Bangers', cursive; font-size: 9px; letter-spacing: 2.5px; color: #999; line-height: 1; } .nn-smc-box__era-years { font-family: 'Bangers', cursive; font-size: 18px; letter-spacing: 2px; color: #111; line-height: 1; } /* Back CTA */ .nn-smc-box__back-cta { flex: 0 0 auto; } .nn-smc-box__back-cta .nn-smc-box__cart-btn { font-size: 16px; padding: 11px 10px; border-bottom: none; } /* Collect strip */ .nn-smc-box__collect { flex: 0 0 auto; text-align: center; font-family: 'Bangers', cursive; font-size: 10px; letter-spacing: 2px; padding: 5px 6px; background: var(--box-bg); color: var(--box-text); border-top: 2px solid #000; opacity: 0.85; } /* ── Desktop ≥769px: 3+2 shelf ── */ @media (min-width: 769px) { .nn-smc-shelf-body { max-width: 1060px; padding: 0 40px 64px; } .nn-smc-shelf-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .nn-smc-shelf-row .nn-smc-box { flex: 0 0 calc(33.333% - 14px); } .nn-smc-shelf-plank { display: block; } .nn-smc-box-plank { display: none; } .nn-smc-shelf-header__title { font-size: 52px; } .nn-smc-box__inner { height: 600px; } .nn-smc-box__box-name { font-size: clamp(18px, 2vw, 26px); } .nn-smc-box__cart-btn { font-size: 20px; } } /* ── Hero desktop ── */ @media (min-width: 769px) { [data-theme="saturday-morning-cartoons"] .nn-smc-hero-scene { min-height: 560px; } .nn-smc-hero-inner { flex-direction: row; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding: 50px 40px 24px; gap: 40px; } .nn-smc-copy { order: 1; flex: 0 0 44%; text-align: left; } .nn-smc-tv-wrap { order: 2; flex: 0 0 50%; } .nn-smc-hero-machine-wrap { order: 2; flex: 0 0 auto; align-items: center; } .nn-smc-machine--hero { width: 280px; } .nn-smc-machine--hero .nn-smc-machine__body { width: 280px; } .nn-smc-hero-strip { width: 280px; } .nn-smc-hero-coupon__img { width: 96px; height: 96px; } .nn-smc-now-airing { justify-content: flex-start; } .nn-smc-stars { justify-content: flex-start; } .nn-smc-cta-group { justify-content: flex-start; } .nn-smc-sub { margin-left: 0; } .nn-smc-tv { width: 340px; } .nn-smc-tv__screen { height: 170px; } .nn-smc-headline { font-size: 48px; } .nn-smc-bowl-prop { display: block; margin-top: 16px; opacity: 0.9; } } /* ============================================================ SATURDAY MORNING CARTOONS — SMARTSOURCE COUPON MACHINE ============================================================ */ .nn-smc-coupon-section { display: none; } [data-theme="saturday-morning-cartoons"] .nn-smc-coupon-section { display: block; padding: 60px 20px 80px; } /* Header */ .nn-smc-coupon-eyebrow { font-family: 'Bangers', cursive; font-size: 13px; letter-spacing: 3px; color: #D9231D; text-align: center; margin: 0 0 8px; } .nn-smc-coupon-title { font-family: 'Bangers', cursive; font-size: clamp(36px, 8vw, 64px); letter-spacing: 2px; color: #111; text-align: center; line-height: 1; margin: 0 0 10px; } .nn-smc-coupon-sub { font-size: 15px; color: #555; text-align: center; margin: 0 0 40px; } /* Stage */ .nn-smc-coupon-stage { display: flex; flex-direction: column; align-items: center; } /* ── Machine ── */ .nn-smc-machine { width: 220px; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(4px 8px 16px rgba(0,0,0,0.35)); } /* Display card on top */ .nn-smc-machine__display { width: 160px; background: linear-gradient(135deg, #FF6B00 0%, #FFD700 100%); border: 2px solid #111; border-bottom: none; border-radius: 4px 4px 0 0; padding: 8px 10px; text-align: center; display: flex; flex-direction: column; } .nn-smc-machine__display-save { font-family: 'Bangers', cursive; font-size: 22px; letter-spacing: 2px; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.4); line-height: 1; } .nn-smc-machine__display-on { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: rgba(0,0,0,0.6); text-transform: uppercase; } /* Main body */ .nn-smc-machine__body { width: 220px; background: linear-gradient(160deg, #D32F2F 0%, #B71C1C 50%, #8B0000 100%); border: 2.5px solid #111; border-radius: 8px 8px 4px 4px; padding: 14px 18px 18px; position: relative; box-shadow: inset 0 3px 6px rgba(255,255,255,0.18), inset 0 -4px 8px rgba(0,0,0,0.35); } .nn-smc-machine__highlight { position: absolute; top: 0; left: 0; right: 0; height: 40%; border-radius: 8px 8px 0 0; background: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, transparent 100%); pointer-events: none; } .nn-smc-machine__label-plate { background: rgba(0,0,0,0.25); border-radius: 4px; padding: 8px 12px; text-align: center; margin-bottom: 12px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.1); } .nn-smc-machine__brand { display: block; font-style: italic; font-weight: 900; font-size: 20px; color: #fff; letter-spacing: -0.5px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); font-family: Arial, sans-serif; line-height: 1; } .nn-smc-machine__brand-sub { display: block; font-size: 8px; font-weight: 600; letter-spacing: 2px; color: rgba(255,255,255,0.6); text-transform: uppercase; margin-top: 2px; font-family: Arial, sans-serif; } .nn-smc-machine__vents { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; } .nn-smc-machine__vent { height: 4px; background: rgba(0,0,0,0.4); border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,0.08); } .nn-smc-machine__led { width: 8px; height: 8px; border-radius: 50%; background: #00E676; box-shadow: 0 0 8px #00E676, 0 0 16px rgba(0,230,118,0.5); margin-bottom: 10px; animation: nn-smc-led-blink 2s ease-in-out infinite; } @keyframes nn-smc-led-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .nn-smc-machine__slot { height: 7px; background: #0a0a0a; border-radius: 2px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.08); } /* Pull tab */ .nn-smc-machine__tab { width: 70px; background: #F5F0E4; border: 1.5px solid #ccc; border-top: none; padding: 8px 6px 12px; text-align: center; cursor: pointer; position: relative; transition: transform 0.15s ease; /* Jagged bottom edge */ clip-path: polygon(0 0, 100% 0, 100% 80%, 91% 100%, 82% 80%, 73% 100%, 64% 80%, 55% 100%, 46% 80%, 37% 100%, 28% 80%, 18% 100%, 9% 80%, 0 100%); } .nn-smc-machine__tab:hover { transform: translateY(4px); } .nn-smc-machine__tab.is-pulled { transform: translateY(8px); opacity: 0.5; cursor: default; } .nn-smc-machine__tab-text { font-family: 'Bangers', cursive; font-size: 13px; letter-spacing: 2px; color: #D9231D; } /* Dispense shake */ @keyframes nn-smc-dispense { 0% { transform: translateX(0); } 15% { transform: translateX(-4px) rotate(-0.5deg); } 30% { transform: translateX(4px) rotate(0.5deg); } 45% { transform: translateX(-3px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-1px); } 100% { transform: translateX(0); } } .nn-smc-machine__body.is-dispensing { animation: nn-smc-dispense 0.5s ease; } /* ── Coupon Strip ── */ .nn-smc-strip { max-height: 0; overflow: hidden; transition: max-height 2s cubic-bezier(0.2, 0.8, 0.3, 1); width: 220px; } .nn-smc-strip.is-pulled { max-height: 2400px; } /* Individual coupon */ .nn-smc-coupon { background: #F5F0E4; border-left: 2px solid #ddd; border-right: 2px solid #ddd; padding: 14px 16px 10px; opacity: 0; transform: translateY(-6px); transition: opacity 0.4s ease, transform 0.4s ease; } .nn-smc-strip.is-pulled .nn-smc-coupon:nth-child(1) { transition-delay: 0.4s; opacity: 1; transform: none; } .nn-smc-strip.is-pulled .nn-smc-coupon:nth-child(2) { transition-delay: 0.75s; opacity: 1; transform: none; } .nn-smc-strip.is-pulled .nn-smc-coupon:nth-child(3) { transition-delay: 1.1s; opacity: 1; transform: none; } .nn-smc-strip.is-pulled .nn-smc-coupon:nth-child(4) { transition-delay: 1.45s; opacity: 1; transform: none; } .nn-smc-strip.is-pulled .nn-smc-coupon:nth-child(5) { transition-delay: 1.8s; opacity: 1; transform: none; } .nn-smc-strip.is-pulled .nn-smc-coupon:nth-child(6) { transition-delay: 2.1s; opacity: 1; transform: none; } /* Coupon two-column layout */ .nn-smc-coupon__body { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .nn-smc-coupon__img { flex: 0 0 72px; width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1.5px solid #ddd; border-radius: 4px; padding: 4px; } .nn-smc-coupon__text { flex: 1; } /* Perforation */ .nn-smc-coupon__perf { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; color: #bbb; font-size: 11px; } .nn-smc-coupon__perf::before, .nn-smc-coupon__perf::after { content: ''; flex: 1; height: 1px; background: repeating-linear-gradient(to right, #bbb 0px, #bbb 5px, transparent 5px, transparent 9px); } /* Coupon content */ .nn-smc-coupon__save { font-family: 'Bangers', cursive; font-size: 38px; letter-spacing: 2px; color: #D9231D; line-height: 1; } .nn-smc-coupon__on { font-size: 9px; font-weight: 700; letter-spacing: 3px; color: #999; margin: 2px 0; } .nn-smc-coupon__name { font-family: 'Bangers', cursive; font-size: 22px; letter-spacing: 1.5px; color: #111; margin-bottom: 4px; line-height: 1; } .nn-smc-coupon__dates { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #555; text-transform: uppercase; } .nn-smc-coupon__barcode { height: 32px; background: repeating-linear-gradient( to right, #111 0px, #111 2px, #F5F0E4 2px, #F5F0E4 4px, #111 4px, #111 5px, #F5F0E4 5px, #F5F0E4 8px, #111 8px, #111 11px, #F5F0E4 11px, #F5F0E4 13px, #111 13px, #111 16px, #F5F0E4 16px, #F5F0E4 18px, #111 18px, #111 20px, #F5F0E4 20px, #F5F0E4 24px ); background-size: 24px 100%; margin: 6px 0 6px; } .nn-smc-coupon__fine { font-size: 8px; color: #aaa; text-align: center; line-height: 1.4; } /* CTA coupon */ .nn-smc-coupon--cta { background: #111; border-color: #111; border-bottom: 2px solid #111; border-radius: 0 0 4px 4px; } .nn-smc-coupon--cta .nn-smc-coupon__perf { color: #444; } .nn-smc-coupon--cta .nn-smc-coupon__perf::before, .nn-smc-coupon--cta .nn-smc-coupon__perf::after { background: repeating-linear-gradient(to right, #444 0px, #444 5px, transparent 5px, transparent 9px); } .nn-smc-coupon--cta .nn-smc-coupon__barcode { background: repeating-linear-gradient( to right, #F5C200 0px, #F5C200 2px, #111 2px, #111 4px, #F5C200 4px, #F5C200 5px, #111 5px, #111 8px, #F5C200 8px, #F5C200 11px, #111 11px, #111 16px, #F5C200 16px, #F5C200 18px, #111 18px, #111 24px ); background-size: 24px 100%; } .nn-smc-coupon__cta-label { font-family: 'Bangers', cursive; font-size: 11px; letter-spacing: 3px; color: #F5C200; text-align: center; margin-bottom: 4px; } .nn-smc-coupon__cta-brand { font-family: 'Bangers', cursive; font-size: 32px; letter-spacing: 2px; color: #fff; text-align: center; line-height: 1; margin-bottom: 6px; } .nn-smc-coupon__cta-sub { font-size: 11px; color: rgba(255,255,255,0.6); text-align: center; margin-bottom: 14px; line-height: 1.4; } .nn-smc-coupon__cta-btn { display: block; background: #F5C200; color: #111; font-family: 'Bangers', cursive; font-size: 18px; letter-spacing: 2px; text-align: center; text-decoration: none; padding: 10px; border: 2px solid #111; margin-bottom: 12px; transition: background 0.15s ease; } .nn-smc-coupon__cta-btn:hover { background: #fff; } .nn-smc-coupon--cta .nn-smc-coupon__fine { color: #555; } /* ============================================================ SATURDAY MORNING CARTOONS — BODY BACKGROUND ============================================================ */ [data-theme="saturday-morning-cartoons"] body { background-color: #FFF8E7; background-image: none; } [data-theme="saturday-morning-cartoons"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: repeating-conic-gradient( from 0deg at 50% 0%, rgba(255, 175, 0, 0.08) 0deg 8deg, transparent 8deg 16deg ); pointer-events: none; } /* ============================================================ SATURDAY MORNING CARTOONS — COMMERCIAL BREAK TRUST STRIP ============================================================ */ .nn-smc-break { display: none; } [data-theme="saturday-morning-cartoons"] .nn-smc-break { display: block; } [data-theme="saturday-morning-cartoons"] .nn-trust-strip { display: none; } /* Label strip */ .nn-smc-break__label { background: #000; color: #F5C200; font-family: 'Bangers', cursive; font-size: 14px; letter-spacing: 2.5px; text-align: center; padding: 7px 16px; border-top: 3px solid #000; border-bottom: 3px solid #000; } /* Card grid: 2×2 mobile, 1×4 desktop */ .nn-smc-break__cards { display: grid; grid-template-columns: 1fr 1fr; } /* Individual card */ .nn-smc-break__card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 12px 20px; border-right: 3px solid #000; border-bottom: 3px solid #000; text-align: center; gap: 2px; } .nn-smc-break__card:nth-child(even) { border-right: none; } .nn-smc-break__card:nth-child(3), .nn-smc-break__card:nth-child(4) { border-bottom: none; } .nn-smc-break__card--red { background: #D9231D; } .nn-smc-break__card--blue { background: #1A4CC8; } .nn-smc-break__card--yellow { background: #F5C200; } /* Stat number — the big hero */ .nn-smc-break__stat { font-family: 'Bangers', cursive; font-size: 56px; line-height: 1; letter-spacing: 1px; color: #fff; text-shadow: 3px 3px 0 #000; } .nn-smc-break__card--yellow .nn-smc-break__stat { color: #000; text-shadow: 2px 2px 0 rgba(0,0,0,0.2); } /* Label */ .nn-smc-break__name { font-family: 'Bangers', cursive; font-size: 18px; letter-spacing: 1.5px; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.4); line-height: 1; } .nn-smc-break__card--yellow .nn-smc-break__name { color: #000; text-shadow: none; } /* Fine print */ .nn-smc-break__fine { font-size: 11px; color: rgba(255,255,255,0.75); margin-top: 4px; text-transform: lowercase; letter-spacing: 0.3px; } .nn-smc-break__card--yellow .nn-smc-break__fine { color: rgba(0,0,0,0.55); } /* Desktop: single row */ @media (min-width: 769px) { .nn-smc-break__cards { grid-template-columns: repeat(4, 1fr); } .nn-smc-break__card:nth-child(even) { border-right: 3px solid #000; } .nn-smc-break__card:nth-child(3), .nn-smc-break__card:nth-child(4) { border-bottom: none; } .nn-smc-break__card:last-child { border-right: none; } .nn-smc-break__stat { font-size: 68px; } .nn-smc-break__name { font-size: 20px; } } /* ============================================================ SMC: CEREAL BOX BACK PANEL ============================================================ */ .nn-smc-cerealbox { display: none; } [data-theme="saturday-morning-cartoons"] .nn-smc-cerealbox { display: flex; justify-content: center; padding: 60px 20px 80px; background: #FFF9E6; } .nn-smc-cb-panel { width: 100%; max-width: 680px; background: #FFFDF5; border: 4px solid #1A1A4E; border-radius: 6px; box-shadow: 6px 6px 0 #1A1A4E; overflow: hidden; font-family: 'Bangers', cursive; } /* ── Header ── */ .nn-smc-cb-header { display: flex; align-items: center; gap: 16px; padding: 20px 24px 16px; background: #E63329; border-bottom: 4px solid #1A1A4E; } .nn-smc-cb-starburst { flex-shrink: 0; width: 68px; height: 68px; background: #F5C200; border: 3px solid #1A1A4E; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Bangers', cursive; font-size: 14px; line-height: 1.1; color: #1A1A4E; letter-spacing: 0.5px; box-shadow: 2px 2px 0 #1A1A4E; } .nn-smc-cb-header-text { flex: 1; } .nn-smc-cb-eyebrow { font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #FFE999; margin-bottom: 4px; } .nn-smc-cb-title { font-family: 'Bangers', cursive; font-size: 36px; line-height: 1; color: #FFFFFF; text-shadow: 2px 2px 0 #1A1A4E; letter-spacing: 1px; } .nn-smc-cb-sub { font-family: Arial, sans-serif; font-size: 11px; color: #FFE999; margin-top: 4px; } .nn-smc-cb-collect { flex-shrink: 0; width: 60px; height: 60px; background: #1A1A4E; border: 3px solid #F5C200; border-radius: 4px; display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Bangers', cursive; font-size: 13px; line-height: 1.2; color: #F5C200; letter-spacing: 0.5px; } /* ── Tabs ── */ .nn-smc-cb-tabs { display: flex; border-bottom: 4px solid #1A1A4E; background: #1A1A4E; gap: 2px; } .nn-smc-cb-tab { flex: 1; padding: 10px 8px; border: none; background: #2A2A6E; color: #AAB0FF; font-family: 'Bangers', cursive; font-size: 14px; letter-spacing: 0.5px; cursor: pointer; transition: background 0.15s, color 0.15s; } .nn-smc-cb-tab:hover { background: #3535A0; color: #fff; } .nn-smc-cb-tab.is-active { background: #F5C200; color: #1A1A4E; font-size: 15px; } /* ── Game area ── */ .nn-smc-cb-game { min-height: 340px; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; } /* ── Footer ── */ .nn-smc-cb-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: #1A1A4E; border-top: 4px solid #1A1A4E; } .nn-smc-cb-barcode { display: flex; flex-direction: column; align-items: center; gap: 2px; } .nn-smc-cb-barcode__bars { width: 64px; height: 28px; background: repeating-linear-gradient( 90deg, #fff 0px, #fff 1px, transparent 1px, transparent 2px, #fff 2px, #fff 4px, transparent 4px, transparent 5px, #fff 5px, #fff 7px, transparent 7px, transparent 9px, #fff 9px, #fff 10px ); } .nn-smc-cb-barcode__num { font-family: monospace; font-size: 8px; color: #fff; letter-spacing: 1px; } .nn-smc-cb-footer-text { font-family: Arial, sans-serif; font-size: 9px; color: rgba(255,255,255,0.7); letter-spacing: 1px; text-transform: uppercase; } /* ============================================================ SMC GAME: WORD SEARCH ============================================================ */ .nn-smc-ws { width: 100%; max-width: 400px; } .nn-smc-ws__title { font-family: 'Bangers', cursive; font-size: 22px; color: #1A1A4E; letter-spacing: 1px; text-align: center; margin-bottom: 6px; } .nn-smc-ws__words { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin-bottom: 14px; } .nn-smc-ws__word { font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #1A1A4E; padding: 2px 8px; border: 2px solid #1A1A4E; border-radius: 3px; background: #fff; transition: background 0.2s, color 0.2s; } .nn-smc-ws__word.is-found { background: #E63329; color: #fff; border-color: #E63329; text-decoration: line-through; } .nn-smc-ws__grid { display: grid; gap: 2px; width: 100%; touch-action: none; user-select: none; } .nn-smc-ws__cell { aspect-ratio: 1; width: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Bangers', cursive; font-size: 13px; letter-spacing: 0; color: #1A1A4E; border: 1px solid #ddd; border-radius: 2px; background: #fff; cursor: pointer; user-select: none; transition: background 0.1s, color 0.1s; } .nn-smc-ws__cell.is-selected { background: #FFE033; } .nn-smc-ws__cell.is-found { background: #E63329; color: #fff; border-color: #E63329; } .nn-smc-ws__status { font-family: Arial, sans-serif; font-size: 12px; text-align: center; color: #666; margin-top: 10px; min-height: 18px; } /* win state */ .nn-smc-ws__win { display: none; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 20px; background: #F5C200; border: 3px solid #1A1A4E; border-radius: 4px; margin-top: 14px; width: 100%; } .nn-smc-ws__win.is-visible { display: flex; } .nn-smc-ws__win-title { font-family: 'Bangers', cursive; font-size: 28px; color: #1A1A4E; letter-spacing: 1px; } .nn-smc-ws__win-sub { font-family: Arial, sans-serif; font-size: 12px; color: #333; } .nn-smc-ws__win-btn { display: inline-block; padding: 10px 24px; background: #E63329; color: #fff; font-family: 'Bangers', cursive; font-size: 18px; letter-spacing: 1px; border: 2px solid #1A1A4E; border-radius: 4px; text-decoration: none; box-shadow: 2px 2px 0 #1A1A4E; } /* ============================================================ SMC GAME: DECODER RING ============================================================ */ .nn-smc-dr { width: 100%; max-width: 400px; text-align: center; } .nn-smc-dr__title { font-family: 'Bangers', cursive; font-size: 22px; color: #1A1A4E; letter-spacing: 1px; margin-bottom: 4px; } .nn-smc-dr__instr { font-family: Arial, sans-serif; font-size: 11px; color: #555; margin-bottom: 16px; } .nn-smc-dr__ring-wrap { display: flex; justify-content: center; margin-bottom: 14px; } .nn-smc-dr__ring-svg { filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.2)); } .nn-smc-dr__puzzle-label { font-family: 'Bangers', cursive; font-size: 14px; letter-spacing: 2px; color: #888; margin-bottom: 6px; } .nn-smc-dr__encoded { font-family: monospace; font-size: 20px; font-weight: 700; letter-spacing: 6px; color: #1A1A4E; background: #fff; border: 2px solid #1A1A4E; border-radius: 4px; padding: 10px 16px; margin-bottom: 14px; display: inline-block; } .nn-smc-dr__input-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; } .nn-smc-dr__input { width: 180px; padding: 8px 12px; font-family: monospace; font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; border: 2px solid #1A1A4E; border-radius: 4px; text-align: center; background: #fff; } .nn-smc-dr__input:focus { outline: none; border-color: #E63329; } .nn-smc-dr__crack-btn { padding: 8px 20px; background: #E63329; color: #fff; font-family: 'Bangers', cursive; font-size: 18px; letter-spacing: 1px; border: 2px solid #1A1A4E; border-radius: 4px; cursor: pointer; box-shadow: 2px 2px 0 #1A1A4E; } .nn-smc-dr__crack-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #1A1A4E; } .nn-smc-dr__feedback { font-family: Arial, sans-serif; font-size: 12px; min-height: 18px; color: #E63329; font-weight: 700; margin-bottom: 8px; } .nn-smc-dr__feedback.is-correct { color: #2E7D32; } .nn-smc-dr__nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 4px; } .nn-smc-dr__nav-btn { background: none; border: 2px solid #1A1A4E; border-radius: 4px; font-family: 'Bangers', cursive; font-size: 16px; padding: 4px 14px; cursor: pointer; color: #1A1A4E; } .nn-smc-dr__nav-btn:disabled { opacity: 0.3; cursor: default; } .nn-smc-dr__progress { font-family: Arial, sans-serif; font-size: 12px; color: #888; } .nn-smc-dr__win { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 20px; background: #F5C200; border: 3px solid #1A1A4E; border-radius: 4px; margin-top: 14px; text-align: center; } .nn-smc-dr__win.is-visible { display: flex; } .nn-smc-dr__win-title { font-family: 'Bangers', cursive; font-size: 28px; color: #1A1A4E; letter-spacing: 1px; } .nn-smc-dr__win-sub { font-family: Arial, sans-serif; font-size: 12px; color: #333; } .nn-smc-dr__win-btn { display: inline-block; padding: 10px 24px; background: #E63329; color: #fff; font-family: 'Bangers', cursive; font-size: 18px; letter-spacing: 1px; border: 2px solid #1A1A4E; border-radius: 4px; text-decoration: none; box-shadow: 2px 2px 0 #1A1A4E; } /* Decoder hint strip */ .nn-smc-dr__hint { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .nn-smc-dr__pair { display: flex; flex-direction: column; align-items: center; gap: 1px; } .nn-smc-dr__pair-enc { font-family: monospace; font-size: 16px; font-weight: 700; color: #1A1A4E; background: #fff; border: 2px solid #1A1A4E; border-radius: 3px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; } .nn-smc-dr__pair-arr { font-size: 10px; color: #999; line-height: 1; } .nn-smc-dr__pair-dec { font-family: monospace; font-size: 16px; font-weight: 700; color: #ccc; background: #f5f5f5; border: 2px dashed #ccc; border-radius: 3px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; transition: color 0.3s, border-color 0.3s; } /* ============================================================ SMC GAME: TRIVIA ============================================================ */ .nn-smc-tv { width: 100%; max-width: 420px; } .nn-smc-tv__title { font-family: 'Bangers', cursive; font-size: 22px; color: #1A1A4E; letter-spacing: 1px; text-align: center; margin-bottom: 4px; } .nn-smc-tv__counter { font-family: Arial, sans-serif; font-size: 11px; color: #888; text-align: center; margin-bottom: 4px; letter-spacing: 1px; text-transform: uppercase; } .nn-smc-tv__score-bar { font-family: Arial, sans-serif; font-size: 11px; color: #fff; background: #1A1A4E; border-radius: 3px; padding: 3px 10px; text-align: center; margin-bottom: 14px; } .nn-smc-tv__q { font-family: 'Bangers', cursive; font-size: 20px; color: #1A1A4E; line-height: 1.2; text-align: center; margin-bottom: 14px; min-height: 50px; display: flex; align-items: center; justify-content: center; } .nn-smc-tv__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .nn-smc-tv__opt { padding: 12px 8px; background: #fff; border: 2px solid #1A1A4E; border-radius: 4px; font-family: Arial, sans-serif; font-size: 13px; font-weight: 700; color: #1A1A4E; cursor: pointer; transition: background 0.12s, color 0.12s; box-shadow: 2px 2px 0 #1A1A4E; } .nn-smc-tv__opt:hover:not(:disabled) { background: #F5C200; } .nn-smc-tv__opt:disabled { cursor: default; box-shadow: none; } .nn-smc-tv__opt.is-correct { background: #2E7D32; color: #fff; border-color: #2E7D32; } .nn-smc-tv__opt.is-wrong { background: #E63329; color: #fff; border-color: #E63329; } .nn-smc-tv__feedback { font-family: Arial, sans-serif; font-size: 13px; font-weight: 700; text-align: center; min-height: 20px; } .nn-smc-tv__feedback.is-correct { color: #2E7D32; } .nn-smc-tv__feedback.is-wrong { color: #E63329; } .nn-smc-tv__result { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; background: #F5C200; border: 3px solid #1A1A4E; border-radius: 4px; text-align: center; } .nn-smc-tv__result-score { font-family: 'Bangers', cursive; font-size: 52px; color: #1A1A4E; line-height: 1; } .nn-smc-tv__result-label { font-family: 'Bangers', cursive; font-size: 22px; color: #1A1A4E; } .nn-smc-tv__result-sub { font-family: Arial, sans-serif; font-size: 12px; color: #333; } .nn-smc-tv__result-btn { display: inline-block; padding: 10px 24px; background: #E63329; color: #fff; font-family: 'Bangers', cursive; font-size: 18px; letter-spacing: 1px; border: 2px solid #1A1A4E; border-radius: 4px; text-decoration: none; box-shadow: 2px 2px 0 #1A1A4E; } .nn-smc-tv__replay { background: none; border: 2px solid #1A1A4E; border-radius: 4px; font-family: 'Bangers', cursive; font-size: 16px; padding: 6px 18px; cursor: pointer; color: #1A1A4E; } /* ============================================================ SMC GAME: CONNECT THE DOTS ============================================================ */ .nn-smc-cd { width: 100%; max-width: 340px; text-align: center; } .nn-smc-cd__title { font-family: 'Bangers', cursive; font-size: 22px; color: #1A1A4E; letter-spacing: 1px; margin-bottom: 4px; } .nn-smc-cd__instr { font-family: Arial, sans-serif; font-size: 11px; color: #555; margin-bottom: 12px; } .nn-smc-cd__svg-wrap { display: flex; justify-content: center; background: #fff; border: 2px solid #1A1A4E; border-radius: 4px; margin-bottom: 10px; overflow: hidden; } .nn-smc-cd__status { font-family: Arial, sans-serif; font-size: 12px; color: #888; min-height: 18px; margin-bottom: 8px; } .nn-smc-cd__reset-btn { background: none; border: 2px solid #1A1A4E; border-radius: 4px; font-family: 'Bangers', cursive; font-size: 15px; padding: 5px 16px; cursor: pointer; color: #1A1A4E; } .nn-smc-cd__win { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 20px; background: #F5C200; border: 3px solid #1A1A4E; border-radius: 4px; margin-top: 12px; text-align: center; } .nn-smc-cd__win.is-visible { display: flex; } .nn-smc-cd__win-title { font-family: 'Bangers', cursive; font-size: 28px; color: #1A1A4E; letter-spacing: 1px; } .nn-smc-cd__win-sub { font-family: Arial, sans-serif; font-size: 12px; color: #333; } .nn-smc-cd__win-btn { display: inline-block; padding: 10px 24px; background: #E63329; color: #fff; font-family: 'Bangers', cursive; font-size: 18px; letter-spacing: 1px; border: 2px solid #1A1A4E; border-radius: 4px; text-decoration: none; box-shadow: 2px 2px 0 #1A1A4E; } @media (min-width: 769px) { .nn-smc-cb-title { font-size: 48px; } .nn-smc-cb-tab { font-size: 16px; } .nn-smc-ws__cell { font-size: 17px; } } /* ═══════════════════════════════════════════════════════════════ SPINNY — Arcade Chatbot Hidden by default; shown only on arcade theme ═══════════════════════════════════════════════════════════════ */ /* ── Coin (fixed bottom-right trigger) ──────────────────────── */ .nn-spinny-coin { display: none; position: fixed; bottom: 28px; right: 68px; z-index: 8000; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; user-select: none; perspective: 200px; /* perspective on parent — prevents drift */ } [data-theme="arcade"] .nn-spinny-coin { display: flex; } .nn-spinny-coin__bubble { position: relative; background: #000011; border: 2px solid #FFE600; color: #FFE600; font-family: 'Press Start 2P', monospace; font-size: 5px; padding: 5px 9px; white-space: nowrap; letter-spacing: 1px; opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s; box-shadow: 0 0 10px rgba(255, 230, 0, 0.4); } .nn-spinny-coin__bubble::after { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #FFE600; } .nn-spinny-coin__bubble.is-visible { opacity: 1; transform: translateY(0); } .nn-spinny-coin__disc { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; animation: nn-spinny-idle 3.5s linear infinite; filter: drop-shadow(0 0 14px rgba(255, 200, 50, 0.65)); } .nn-spinny-coin__img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; } @keyframes nn-spinny-idle { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .nn-spinny-coin--hover .nn-spinny-coin__disc { animation: nn-spinny-idle 1s linear infinite; filter: drop-shadow(0 0 22px rgba(255, 220, 50, 0.95)); } .nn-spinny-coin--flip .nn-spinny-coin__disc { animation: nn-spinny-flip 0.55s ease-in-out forwards, nn-spinny-idle 3.5s linear 0.55s infinite; } @keyframes nn-spinny-flip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(720deg); } } /* ── Backdrop ────────────────────────────────────────────────── */ .nn-spinny-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.82); z-index: 8500; backdrop-filter: blur(3px); } .nn-spinny-backdrop.is-open { display: block; } /* ── Modal + Cabinet ─────────────────────────────────────────── */ .nn-spinny-modal { display: none; position: fixed; inset: 0; z-index: 8600; align-items: center; justify-content: center; padding: 16px; } .nn-spinny-modal.is-open { display: flex; } /* Wrapper: constrains width, stacks marquee cap above cabinet */ .nn-spinny-wrap { width: 100%; max-width: 460px; height: 85vh; max-height: 92vh; display: flex; flex-direction: column; } .nn-spinny-cabinet { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #0d2494; border: 2px solid #1e3cc0; border-top: none; border-radius: 0 0 6px 6px; box-shadow: 0 0 60px rgba(0, 100, 255, 0.25), 0 0 120px rgba(20, 60, 200, 0.3), 0 32px 100px rgba(0, 0, 0, 0.95); overflow: hidden; } /* ── Marquee header ──────────────────────────────────────────── */ .nn-spinny-marquee { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: linear-gradient(180deg, #0f2bb8 0%, #0b22a0 60%, #091a88 100%); border: 2px solid #2a4adc; border-bottom: 3px solid #FFE600; border-radius: 10px 10px 0 0; flex-shrink: 0; position: relative; overflow: hidden; /* Wider than cabinet — overhangs 14px each side */ margin: 0 -14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(30, 37, 128, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Backlit glow behind marquee content */ .nn-spinny-marquee::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 100%, rgba(255, 200, 0, 0.14) 0%, transparent 70%); pointer-events: none; } /* Light bleed strip at bottom edge */ .nn-spinny-marquee::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(to right, transparent, rgba(255,230,0,0.8), rgba(255,230,0,0.6), transparent); box-shadow: 0 0 14px 3px rgba(255, 230, 0, 0.35); pointer-events: none; } .nn-spinny-marquee__title { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #FFE600; text-shadow: 0 0 8px #FFE600, 0 0 20px rgba(255, 230, 0, 0.6), 0 0 40px rgba(255, 200, 0, 0.25); letter-spacing: 2px; position: relative; z-index: 1; } .nn-spinny-bulb { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF5A0, #FFE600); box-shadow: 0 0 6px 2px #FFE600, 0 0 16px rgba(255, 230, 0, 0.7), 0 0 28px rgba(255, 200, 0, 0.3); animation: nn-spinny-bulb-pulse 1.8s ease-in-out infinite alternate; flex-shrink: 0; position: relative; z-index: 1; } @keyframes nn-spinny-bulb-pulse { from { opacity: 0.6; box-shadow: 0 0 4px 1px #FFE600, 0 0 10px rgba(255,230,0,0.4); } to { opacity: 1; box-shadow: 0 0 8px 3px #FFE600, 0 0 22px rgba(255,230,0,0.7), 0 0 40px rgba(255,200,0,0.3); } } /* ── Bezel + Screen ──────────────────────────────────────────── */ .nn-spinny-bezel { background: #0a1c80; padding: 14px 12px; flex: 1; min-height: 0; display: flex; flex-direction: row; /* row for side art */ align-items: stretch; gap: 10px; overflow: hidden; /* contains screen animations */ } /* ── Side art strips ─────────────────────────────────────────── */ .nn-spinny-side-art { width: 22px; flex-shrink: 0; border-radius: 3px; position: relative; overflow: hidden; } .nn-spinny-side-art--l { background: linear-gradient(180deg, #1a0030 0%, #0a0020 50%, #040012 100%); border: 1px solid #2a0045; box-shadow: inset -3px 0 10px rgba(255, 0, 255, 0.1), 2px 0 8px rgba(255, 0, 255, 0.06); } .nn-spinny-side-art--r { background: linear-gradient(180deg, #001830 0%, #000a20 50%, #000510 100%); border: 1px solid #002045; box-shadow: inset 3px 0 10px rgba(0, 255, 255, 0.1), -2px 0 8px rgba(0, 255, 255, 0.06); } /* Pixel scanline pattern on side art */ .nn-spinny-side-art::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 5px, rgba(255, 255, 255, 0.025) 5px, rgba(255, 255, 255, 0.025) 6px ); } /* Accent glow dot in the middle of each side panel */ .nn-spinny-side-art::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; border-radius: 50%; } .nn-spinny-side-art--l::after { background: #FF00FF; box-shadow: 0 0 8px #FF00FF, 0 0 16px rgba(255,0,255,0.5); } .nn-spinny-side-art--r::after { background: #00FFFF; box-shadow: 0 0 8px #00FFFF, 0 0 16px rgba(0,255,255,0.5); } .nn-spinny-screen { position: relative; flex: 1; min-height: 180px; background: #000c16; border: 4px solid #08081e; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 70px rgba(0, 0, 30, 0.98), inset 0 0 25px rgba(0, 20, 40, 0.6), 0 0 35px rgba(0, 255, 255, 0.18), 0 0 70px rgba(0, 255, 255, 0.06); display: flex; flex-direction: column; } /* CRT vignette — dark corners, bright center */ .nn-spinny-screen::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse 88% 82% at 50% 50%, transparent 28%, rgba(0, 0, 0, 0.72) 100% ); pointer-events: none; z-index: 9; border-radius: 4px; } /* Convex glass highlight arc */ .nn-spinny-screen::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: radial-gradient( ellipse 65% 55% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 100% ); pointer-events: none; z-index: 11; border-radius: 6px 6px 0 0; } /* CRT scanlines — subtle, decorative only */ .nn-spinny-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.08) 3px, rgba(0, 0, 0, 0.08) 4px ); pointer-events: none; z-index: 10; } /* CRT flicker on open */ .nn-spinny-screen--on { animation: nn-spinny-crt-on 0.4s ease-out forwards; } @keyframes nn-spinny-crt-on { 0% { filter: brightness(0); } 15% { filter: brightness(2) blur(2px); } 30% { filter: brightness(0.4); } 60% { filter: brightness(1.3); } 100% { filter: brightness(1); } } .nn-spinny-screen--off { animation: nn-spinny-crt-off 0.35s ease-in forwards; } @keyframes nn-spinny-crt-off { 0% { filter: brightness(1); transform: scaleY(1); } 40% { filter: brightness(2); transform: scaleY(0.04); } 100% { filter: brightness(0); transform: scaleY(0); } } /* ── Boot sequence ───────────────────────────────────────────── */ .nn-spinny-boot { display: flex; flex-direction: column; gap: 10px; padding: 20px 16px; flex: 1; } .nn-spinny-boot__line { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #00FF88; text-shadow: 0 0 8px #00FF66, 0 0 20px rgba(0, 255, 100, 0.5), 0 0 40px rgba(0, 200, 80, 0.2); line-height: 1.6; animation: nn-spinny-type-in 0.15s ease-out both; } @keyframes nn-spinny-type-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } /* ── Chat UI ─────────────────────────────────────────────────── */ .nn-spinny-chat { display: none; flex-direction: column; flex: 1; min-height: 0; } .nn-spinny-messages { flex: 1; overflow-y: scroll; overflow-x: hidden; scrollbar-gutter: stable; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: #00FFFF22 transparent; } .nn-spinny-msg { font-family: 'Press Start 2P', monospace; font-size: 9px; line-height: 2; max-width: 88%; padding: 10px 12px; border-radius: 2px; word-break: break-word; } .nn-spinny-msg--bot { color: #ffffff; text-shadow: none; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); align-self: flex-start; } .nn-spinny-msg--user { color: #FFE600; text-shadow: none; background: rgba(255, 230, 0, 0.07); border: 1px solid rgba(255, 230, 0, 0.2); align-self: flex-end; } /* Typing indicator */ .nn-spinny-msg--typing { display: flex; gap: 5px; align-items: center; padding: 10px 14px; background: rgba(0, 255, 255, 0.05); border: 1px solid rgba(0, 255, 255, 0.15); align-self: flex-start; } .nn-spinny-msg--typing span { width: 5px; height: 5px; background: #00FFFF; border-radius: 50%; animation: nn-spinny-dot 1s ease-in-out infinite; box-shadow: 0 0 6px #00FFFF; } .nn-spinny-msg--typing span:nth-child(2) { animation-delay: 0.15s; } .nn-spinny-msg--typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes nn-spinny-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } /* Text Jay button */ .nn-spinny-text-btn { display: block; align-self: flex-start; font-family: 'Press Start 2P', monospace; font-size: 6px; color: #000011; background: #FF00FF; padding: 8px 12px; text-decoration: none; letter-spacing: 1px; border: none; cursor: pointer; box-shadow: 0 0 14px rgba(255, 0, 255, 0.5); animation: nn-spinny-text-btn-pulse 1.4s ease-in-out infinite alternate; margin-top: -4px; } @keyframes nn-spinny-text-btn-pulse { from { box-shadow: 0 0 10px rgba(255,0,255,0.4); } to { box-shadow: 0 0 22px rgba(255,0,255,0.8); } } /* Quick replies */ .nn-spinny-qrs { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 12px; border-top: 1px solid rgba(0, 255, 255, 0.1); } .nn-spinny-qr { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #FFE600; background: transparent; border: 1px solid rgba(255, 230, 0, 0.3); padding: 10px 12px; cursor: pointer; text-align: left; line-height: 2; transition: background 0.12s, border-color 0.12s; } .nn-spinny-qr:hover { background: rgba(255, 230, 0, 0.08); border-color: #FFE600; } /* ── Control panel ───────────────────────────────────────────── */ .nn-spinny-panel { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; background: linear-gradient(180deg, #0e28a8 0%, #0a1e8c 100%); border-top: 3px solid #1e3ccc; flex-shrink: 0; transform: perspective(500px) rotateX(4deg); transform-origin: top center; box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.5); } .nn-spinny-panel__deco { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Joystick */ .nn-spinny-joystick { display: flex; flex-direction: column; align-items: center; gap: 0; transition: transform 0.18s ease-in-out; } .nn-spinny-joystick__shaft { width: 5px; height: 16px; background: linear-gradient(to right, #555, #999, #555); border-radius: 2px; } .nn-spinny-joystick__ball { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #888, #333); box-shadow: 0 2px 4px rgba(0,0,0,0.5); margin-top: -2px; } /* Decorative buttons */ .nn-spinny-panel__btns { display: flex; gap: 6px; } .nn-spinny-panel__btn { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 8px currentColor; } .nn-spinny-panel__btn--y { background: #FFE600; color: #FFE600; } .nn-spinny-panel__btn--r { background: #CC2200; color: #CC2200; } /* Input area */ .nn-spinny-panel__input-wrap { flex: 1; display: flex; gap: 8px; align-items: center; min-width: 0; } .nn-spinny-input { flex: 1; min-width: 0; font-family: 'VT323', monospace; font-size: 20px; background: #000022; border: 2px solid #2a2a55; color: #FFE600; padding: 14px 12px; outline: none; transition: border-color 0.15s; } .nn-spinny-input::placeholder { color: rgba(255, 230, 0, 0.3); } .nn-spinny-input:focus { border-color: #00FFFF; } .nn-spinny-fire { font-family: 'Press Start 2P', monospace; font-size: 8px; background: #CC2200; color: #fff; border: none; padding: 14px 14px; cursor: pointer; letter-spacing: 1px; box-shadow: 0 0 10px rgba(204, 34, 0, 0.5); flex-shrink: 0; transition: background 0.1s, box-shadow 0.1s; } .nn-spinny-fire:hover { background: #FF3300; box-shadow: 0 0 18px rgba(255, 51, 0, 0.7); } .nn-spinny-fire:active { background: #991500; } /* ── Footer ──────────────────────────────────────────────────── */ .nn-spinny-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: #081878; border-top: 1px solid #1630a0; border-radius: 0 0 3px 3px; flex-shrink: 0; } .nn-spinny-footer__cr { font-family: 'Press Start 2P', monospace; font-size: 5px; color: rgba(255, 255, 255, 0.2); letter-spacing: 1px; } .nn-spinny-pwr { font-family: 'Press Start 2P', monospace; font-size: 6px; color: #CC2200; background: transparent; border: 2px solid #CC2200; padding: 5px 10px; cursor: pointer; letter-spacing: 1px; box-shadow: 0 0 8px rgba(204, 34, 0, 0.3); transition: background 0.1s, box-shadow 0.1s; } .nn-spinny-pwr:hover { background: #CC2200; color: #fff; box-shadow: 0 0 16px rgba(204, 34, 0, 0.7); } /* ── Desktop ─────────────────────────────────────────────────── */ @media (min-width: 768px) { .nn-spinny-coin { bottom: 32px; right: 160px; gap: 12px; } .nn-spinny-coin__disc { width: 120px; height: 120px; } .nn-spinny-coin__bubble { font-size: 9px; padding: 8px 14px; letter-spacing: 1.5px; } } /* ── Mobile ──────────────────────────────────────────────────── */ @media (max-width: 520px) { .nn-spinny-modal { padding: 16px; align-items: center; } .nn-spinny-wrap { max-width: 100%; height: 80vh; max-height: 84vh; } .nn-spinny-marquee { margin: 0 -8px; padding: 10px 16px; } .nn-spinny-coin { bottom: 20px; right: 24px; } .nn-spinny-coin__disc { width: 56px; height: 56px; } .nn-spinny-panel__deco { display: none; } .nn-spinny-panel { padding: 10px 12px 8px; } .nn-spinny-footer { padding: 6px 12px; } /* Bigger, readable text on mobile */ .nn-spinny-msg { font-size: 9px; max-width: 100%; text-align: center; align-self: center; color: #ffffff; text-shadow: none; line-height: 1.9; } .nn-spinny-msg--bot { color: #ffffff; text-shadow: none; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); } .nn-spinny-msg--user { color: #FFE600; text-shadow: none; } .nn-spinny-qr { font-size: 6px; text-align: center; padding: 8px 10px; } .nn-spinny-text-btn { align-self: center; font-size: 7px; } .nn-spinny-boot__line { font-size: 8px; text-align: center; } .nn-spinny-marquee__title { font-size: 6px; } .nn-spinny-screen { min-height: 120px; } } /* ═══════════════════════════════════════════════════════════════ ARCADE — INSERT COIN LOADING SCREEN ═══════════════════════════════════════════════════════════════ */ .nn-coin-screen { display: none; position: fixed; inset: 0; z-index: 99999; background: #000011; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none; } [data-theme="arcade"] .nn-coin-screen.is-active { display: flex; } .nn-coin-screen__maze { position: absolute; inset: 0; background-image: url("data:image/svg+xml,"); background-repeat: repeat; background-size: 200px 180px; pointer-events: none; } .nn-coin-screen__scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 4px ); pointer-events: none; z-index: 1; } .nn-coin-screen__stars { position: absolute; inset: 0; pointer-events: none; } .nn-coin-screen__stars span { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; opacity: 0.4; animation: nn-arc-blink 2s step-end infinite; } .nn-coin-screen__stars span:nth-child(2n) { animation-duration: 1.4s; opacity: 0.6; } .nn-coin-screen__stars span:nth-child(3n) { width: 3px; height: 3px; animation-duration: 2.6s; } .nn-coin-screen__stars span:nth-child(4n) { animation-delay: 0.5s; } .nn-coin-screen__stars span:nth-child(5n) { animation-delay: 1.1s; opacity: 0.25; } .nn-coin-screen__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 38px; padding: 0 24px; text-align: center; } /* CRT vignette — dark edges, transparent center, sits above everything */ .nn-coin-screen::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,0.82) 100%); pointer-events: none; z-index: 5; } .nn-coin-screen__logo { width: 290px; height: auto; filter: drop-shadow(0 0 16px #FFE600) drop-shadow(0 0 40px rgba(255,230,0,0.35)); animation: nn-coin-logo-pulse 3s ease-in-out infinite; } @keyframes nn-coin-logo-pulse { 0%, 100% { filter: drop-shadow(0 0 16px #FFE600) drop-shadow(0 0 40px rgba(255,230,0,0.35)); } 50% { filter: drop-shadow(0 0 30px #FFE600) drop-shadow(0 0 70px rgba(255,230,0,0.65)); } } .nn-coin-screen__coin-wrap { width: 125px; height: 125px; perspective: 400px; } .nn-coin-screen__coin-img { width: 100%; height: 100%; object-fit: contain; animation: nn-coin-bob 2.4s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(255,200,50,0.7)); } @keyframes nn-coin-bob { 0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 12px rgba(255,200,50,0.7)); } 50% { transform: translateY(-10px) scale(1.06); filter: drop-shadow(0 0 24px rgba(255,200,50,1)); } } .nn-coin-screen__insert { font-family: 'Press Start 2P', monospace; font-size: 26px; color: #FFE600; text-shadow: 0 0 18px #FFE600, 0 0 40px rgba(255,230,0,0.4); animation: nn-arc-blink 0.85s step-end infinite; letter-spacing: 2px; margin: 0; } .nn-coin-screen__tap { font-family: 'VT323', monospace; font-size: 22px; color: rgba(255,255,255,0.45); letter-spacing: 3px; margin: 0; } .nn-coin-screen__copy { font-family: 'Press Start 2P', monospace; font-size: 5px; color: rgba(255,255,255,0.15); letter-spacing: 1px; margin: 0; line-height: 2; } /* ── Pac-Man dot row ─────────────────────────────────────────── */ .nn-coin-screen__dotrow { position: absolute; bottom: 36px; left: 0; right: 0; height: 20px; overflow: visible; z-index: 2; } /* Dots — clip-path synced with Pac-Man so eaten dots disappear */ .nn-coin-screen__dots { position: absolute; inset: 0; background-image: radial-gradient(circle, #FFE600 3px, transparent 3px); background-size: 28px 20px; background-position: 0 50%; background-repeat: repeat-x; opacity: 0.55; animation: nn-coin-dots-eaten 4.5s linear infinite; } @keyframes nn-coin-dots-eaten { 0% { clip-path: inset(0 0 0 0%); } 3% { clip-path: inset(0 0 0 0%); } 88% { clip-path: inset(0 0 0 100%); } 88.1% { clip-path: inset(0 0 0 0%); } 100% { clip-path: inset(0 0 0 0%); } } .nn-coin-screen__pac { position: absolute; width: 0; height: 0; border: 10px solid #FFE600; border-right-color: transparent; border-radius: 50%; top: 50%; transform: translateY(-50%); filter: drop-shadow(0 0 6px #FFE600); animation: nn-coin-chomp 0.26s linear infinite, nn-coin-pac-sweep 4.5s linear infinite; } @keyframes nn-coin-chomp { 0%, 100% { border-right-color: transparent; } 50% { border-right-color: #FFE600; } } @keyframes nn-coin-pac-sweep { 0% { left: -20px; opacity: 0; } 3% { opacity: 1; } 88% { left: calc(100% + 20px); opacity: 1; } 88.1% { left: -20px; opacity: 0; } 100% { left: -20px; opacity: 0; } } /* Drop animation */ .nn-coin-screen.is-dropping .nn-coin-screen__coin-img { animation: nn-coin-drop 0.55s cubic-bezier(0.55, 0, 1, 0.45) forwards; } @keyframes nn-coin-drop { 0% { transform: translateY(0) rotateY(0deg) scale(1); opacity: 1; } 40% { transform: translateY(-14px) rotateY(180deg) scale(1.15); opacity: 1; } 100% { transform: translateY(80px) rotateY(720deg) scale(0.6); opacity: 0; } } /* Gold flash */ .nn-coin-screen.is-flashing { animation: nn-coin-flash 0.35s ease-out forwards; } @keyframes nn-coin-flash { 0% { background-color: #FFE600; } 60% { background-color: #1a1400; } 100% { background-color: #000011; } } /* Fade out */ .nn-coin-screen.is-fading { animation: nn-coin-fadeout 0.55s ease-in forwards; pointer-events: none; } @keyframes nn-coin-fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } /* ── Jar marquee strips ──────────────────────────────────────── */ .nn-coin-screen__jar-strip { position: absolute; left: 0; right: 0; height: 130px; overflow: hidden; z-index: 2; } .nn-coin-screen__jar-strip--top { top: 0; } .nn-coin-screen__jar-strip--btm { bottom: 0; } .nn-coin-screen__jar-track { display: flex; align-items: center; gap: 32px; padding: 14px 0; width: max-content; } .nn-coin-screen__jar-track img { width: 100px; height: 100px; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 0 8px rgba(255,230,0,0.6)) contrast(1.2) saturate(1.3); flex-shrink: 0; animation: nn-coin-jar-glitch 6s step-end infinite; } /* Stagger glitch across jars so they don't all fire at once */ .nn-coin-screen__jar-track img:nth-child(2) { animation-delay: 0.8s; } .nn-coin-screen__jar-track img:nth-child(3) { animation-delay: 2.1s; } .nn-coin-screen__jar-track img:nth-child(4) { animation-delay: 3.4s; } .nn-coin-screen__jar-track img:nth-child(5) { animation-delay: 1.3s; } .nn-coin-screen__jar-track img:nth-child(6) { animation-delay: 4.7s; } .nn-coin-screen__jar-track img:nth-child(7) { animation-delay: 0.4s; } .nn-coin-screen__jar-track img:nth-child(8) { animation-delay: 2.9s; } .nn-coin-screen__jar-track img:nth-child(9) { animation-delay: 5.2s; } .nn-coin-screen__jar-track img:nth-child(10) { animation-delay: 1.7s; } @keyframes nn-coin-jar-glitch { 0%, 88%, 100% { transform: translateX(0) skewX(0deg); filter: drop-shadow(0 0 8px rgba(255,230,0,0.6)) contrast(1.2) saturate(1.3); } 90% { transform: translateX(-5px) skewX(-3deg); filter: drop-shadow(-4px 0 0 #FF00FF) drop-shadow(4px 0 0 #00FFFF) contrast(1.5) saturate(1.5); } 92% { transform: translateX(5px) skewX(3deg); filter: drop-shadow(4px 0 0 #FF00FF) drop-shadow(-4px 0 0 #00FFFF) contrast(1.5) saturate(1.5); } 94% { transform: translateX(-2px) skewX(0deg); filter: drop-shadow(0 0 12px rgba(255,230,0,0.9)) contrast(1.2) saturate(1.3); } } .nn-coin-screen__jar-track--left { animation: nn-coin-jars-left 18s linear infinite; } .nn-coin-screen__jar-track--right { animation: nn-coin-jars-right 18s linear infinite; } @keyframes nn-coin-jars-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes nn-coin-jars-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Mobile */ @media (max-width: 480px) { .nn-coin-screen__logo { width: 210px; } .nn-coin-screen__coin-wrap { width: 94px; height: 94px; } .nn-coin-screen__insert { font-size: 18px; } .nn-coin-screen__tap { font-size: 19px; } .nn-coin-screen__inner { gap: 26px; } .nn-coin-screen__jar-strip { height: 90px; } .nn-coin-screen__jar-track { gap: 22px; } .nn-coin-screen__jar-track img { width: 66px; height: 66px; } }