/* * goldfish-v1.css * jimthompsoncreative.com · AI Playground · Goldfish case study * Extracted from goldfish-r28.html — r28 inline style block → external file * Extracted: 2026-06-06 * * Load order in every Goldfish page : * 1. design-system.css (tokens, nav, reset, keyframes) * 2. goldfish-v1.css (this file) * * Section map: * §1 Hero * §2 Guppy mode (HTML uses .gf-s4-* — rename cosmetic, not worth churn) * §3 Big Fish mode (HTML uses .gf-s3-*) * §4 Endless Worlds (HTML uses .gf-s2-* — was carousel) * §5+ Brand Safety, Extensions, Smart Business, Close — TBD * * Game palette (scoped to .gf-screen): * Cream #FFF4D9 * Orange #F2755F (gradient stops: #F98332 / #D85540) * Gold #FCB925 * Deep ocean #2C5F7F * Find-card #5A9FC5 → #2C5F7F → #1A4459 at 0.62–0.72 alpha */ /* ============================================================ GOOGLE FONTS — Fredoka (game UI only, not portfolio voice) NOTE: @import must be first rule in any CSS file. Was misplaced mid-stylesheet in r28 inline block — fixed here. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap'); /* ============================================================ PAGE-LEVEL TOKENS ============================================================ */ :root { --tank-aspect: 16 / 9; /* swap if videos aren't 16:9 */ --stage-max: 900px; } /* ============================================================ SHARED SECTION TYPOGRAPHY Used across §2, §3, §4 — keeps all body/headline/eyebrow text consistent without re-declaring per section. ============================================================ */ .gf-copy { max-width: 460px; } .gf-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 500; color: var(--chart); letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 24px; } .gf-headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(28px, 2.6vw, 38px); font-weight: 300; color: var(--white); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 28px; text-wrap: balance; } .gf-body { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 300; color: var(--silver-bright); line-height: 1.65; } .gf-body + .gf-body { margin-top: 16px; } .gf-body--accent { color: var(--white); font-weight: 600; font-style: normal; } /* ============================================================ §1 HERO 90vh photo bg. No gradient — photo carries it. Text-shadow for legibility. Content anchored bottom-left. Mirrors Visit Mum hero pattern. ============================================================ */ .gf-hero-section { width: 100%; height: 90vh; position: relative; display: flex; align-items: flex-end; padding: 0 7vw 7vh; background-image: url('../assets/goldfish/goldfish-hero.webp'); background-size: cover; background-position: center center; background-color: #1a1e26; /* fallback while image loads */ } .gf-hero-content { position: relative; z-index: 2; max-width: 580px; } .gf-hero-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 500; color: var(--chart); text-transform: uppercase; letter-spacing: 0.28em; margin-bottom: 14px; text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5); opacity: 0; animation: riseIn 0.7s ease 0.3s forwards; } .gf-hero-headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(28px, 2.6vw, 40px); font-weight: 300; color: var(--white); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 22px; text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5); text-wrap: balance; opacity: 0; animation: riseIn 0.8s ease 0.5s forwards; } .gf-hero-sub { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 300; color: var(--silver-bright); line-height: 1.55; max-width: 540px; text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5); opacity: 0; animation: riseIn 0.8s ease 0.7s forwards; } /* ============================================================ §2 GUPPY (HTML class: .gf-s4 — rename cosmetic, not worth churn) Side-by-side: copy left, game stage right. ============================================================ */ .gf-s4 { max-width: 1600px; margin: 0 auto; padding: 120px 7vw; } .gf-s4-inner { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 64px; align-items: center; } .gf-s4-copy { max-width: 320px; } .gf-s4-copy .gf-eyebrow, .gf-s4-copy .gf-headline, .gf-s4-copy .gf-body { text-align: left; } /* Parent-lock label */ .gf-parent-lock { margin-top: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 400; color: var(--silver); text-transform: uppercase; letter-spacing: 0.22em; display: inline-flex; align-items: center; gap: 10px; } .gf-parent-lock::before { content: ''; display: inline-block; width: 12px; height: 1px; background: #FCB925; flex-shrink: 0; } /* Play Now CTA — site-standard chartreuse mono, with play-arrow ring */ .gf-cta-play { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500; color: var(--chart); text-transform: uppercase; letter-spacing: 0.2em; background: none; border: 0; cursor: pointer; padding: 12px 0; min-height: 44px; transition: color 0.2s ease; -webkit-tap-highlight-color: transparent; } .gf-cta-play:hover { color: var(--chart-hot); } .gf-cta-play:focus-visible { outline: 1px solid var(--chart); outline-offset: 6px; border-radius: 2px; } .gf-cta-ring { width: 26px; height: 26px; border: 1px solid rgba(184, 212, 0, 0.7); background: rgba(184, 212, 0, 0.06); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease; } .gf-cta-ring svg { width: 8px; height: 10px; margin-left: 1px; } .gf-cta-play:hover .gf-cta-ring { background: rgba(184, 212, 0, 0.14); border-color: rgba(184, 212, 0, 0.9); } /* ── Stage — clean rounded rect, no phone chrome ─────────── */ .gf-stage { width: 100%; position: relative; } .gf-screen { /* Game palette tokens — scoped to screen */ --gf-cream: #FFF4D9; --gf-orange: #F2755F; --gf-gold: #FCB925; --gf-deep: #2C5F7F; --gf-display: 'Fredoka', system-ui, sans-serif; position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 22px 48px rgba(0, 0, 0, 0.45), 0 50px 100px rgba(0, 0, 0, 0.35); } /* ── Tank video ───────────────────────────────────────────── */ .gf-tank-zone { position: absolute; inset: 0; background: #000; overflow: hidden; z-index: 4; transition: filter 0.15s ease; } .gf-stage[data-state="browse"] .gf-tank-zone { cursor: pointer; } .gf-stage[data-state="browse"] .gf-tank-zone:hover { filter: brightness(1.04) saturate(1.05); } .gf-stage[data-state="browse"] .gf-tank-zone:active { filter: brightness(0.94); } .gf-tank-video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 0; pointer-events: none; } /* ── Cards — full-screen translucent brand overlay ────────── */ .gf-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 36px; padding: 36px 56px; z-index: 25; transform: translateY(-105%); transition: transform 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97); pointer-events: none; -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35); } .gf-stage[data-state="ready"] .gf-card-ready { transform: translateY(0); pointer-events: auto; } .gf-stage[data-state="find"] .gf-card-find { transform: translateY(0); pointer-events: auto; } .gf-stage[data-state="wrong"] .gf-card-wrong { transform: translateY(0); pointer-events: auto; } .gf-stage[data-state="see-it"] .gf-card-seeit { transform: translateY(0); pointer-events: auto; } /* Brand-tinted translucent backdrops */ .gf-card-ready { background: linear-gradient(180deg, rgba(249, 131, 50, 0.62) 0%, rgba(242, 117, 95, 0.66) 50%, rgba(216, 85, 64, 0.70) 100%); } .gf-card-find { background: linear-gradient(180deg, rgba( 90, 159, 197, 0.62) 0%, rgba( 44, 95, 127, 0.68) 50%, rgba( 26, 68, 89, 0.72) 100%); } .gf-card-wrong { background: linear-gradient(180deg, rgba(249, 131, 50, 0.66) 0%, rgba(242, 117, 95, 0.70) 50%, rgba(216, 85, 64, 0.74) 100%); } .gf-card-seeit { background: rgba(255, 244, 217, 0.92); } /* Fish character in title cards */ .gf-card-fish { width: 160px; height: auto; flex-shrink: 0; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35)); clip-path: inset(0 0 32% 0); /* crops "YES" text baked into asset */ animation: cardFishHop 0.55s cubic-bezier(0.34, 1.7, 0.64, 1) 0.2s both; } .gf-stage[data-state="ready"] .gf-card-ready .gf-card-fish, .gf-stage[data-state="find"] .gf-card-find .gf-card-fish { animation: cardFishHop 0.55s cubic-bezier(0.34, 1.7, 0.64, 1) 0.2s both, cardFishWiggle 1.8s ease-in-out 1s infinite; } /* Speech bubble — title cards */ .gf-card-bubble-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .gf-card-bubble { position: relative; background: #FFF4D9; border: 4px solid #fff; border-radius: 28px; padding: 22px 28px; font-family: 'Fredoka', sans-serif; font-size: 30px; font-weight: 700; color: #2C5F7F; line-height: 1.1; letter-spacing: -0.015em; max-width: 360px; text-align: left; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); animation: bubbleIn 0.5s cubic-bezier(0.34, 1.7, 0.64, 1) 0.4s both; } /* Find-card bubble — longer copy, let it breathe */ .gf-card-find .gf-card-bubble { max-width: 460px; padding: 22px 30px 24px; } .gf-bubble-main { display: block; font-weight: 700; color: #2C5F7F; } .gf-bubble-warn { display: block; margin-top: 8px; font-size: 0.72em; font-weight: 600; color: #C25A3F; /* warm rust — readable on cream, same family as brand orange */ font-style: italic; letter-spacing: -0.005em; } /* Bubble tail — points LEFT toward the fish */ .gf-card-bubble::after { content: ''; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 18px solid #fff; } .gf-card-bubble::before { content: ''; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 13px solid #FFF4D9; z-index: 1; } /* Countdown pill — under find-card bubble */ .gf-countdown { display: inline-flex; align-items: baseline; gap: 10px; padding: 6px 18px 8px; background: rgba(255, 244, 217, 0.18); border: 1.5px solid rgba(255, 244, 217, 0.35); border-radius: 20px; animation: bubbleIn 0.45s cubic-bezier(0.34, 1.7, 0.64, 1) 0.55s both; } .gf-countdown-label { font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 500; color: rgba(255, 244, 217, 0.95); letter-spacing: 0.02em; } .gf-countdown-num { font-family: 'Fredoka', sans-serif; font-size: 30px; font-weight: 700; color: #FCB925; min-width: 22px; text-align: center; display: inline-block; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); line-height: 1; } .gf-countdown-num.tick { animation: countdownPop 0.45s cubic-bezier(0.34, 1.8, 0.64, 1); } /* Browse nav arrows */ .gf-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(255, 244, 217, 0.62); border: 2px solid rgba(255, 255, 255, 0.78); border-radius: 50%; cursor: pointer; z-index: 17; display: flex; align-items: center; justify-content: center; font-family: 'Fredoka', sans-serif; font-size: 26px; font-weight: 700; color: #2C5F7F; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, background 0.2s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; padding: 0; line-height: 1; } .gf-stage[data-state="browse"] .gf-nav { opacity: 0.92; pointer-events: auto; } .gf-stage[data-state="browse"] .gf-nav:hover { opacity: 1; background: rgba(255, 244, 217, 0.82); } .gf-nav-prev { left: 18px; } .gf-nav-next { right: 18px; } .gf-nav:active { transform: translateY(-50%) scale(0.9); } .gf-nav:focus-visible { outline: 2px solid #FCB925; outline-offset: 3px; opacity: 1; } /* Pagination dots */ .gf-counter { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 16; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .gf-stage[data-state="browse"] .gf-counter { opacity: 1; } .gf-counter-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 244, 217, 0.4); border: 2px solid #fff; transition: background 0.25s ease, transform 0.25s ease; } .gf-counter-dot.active { background: #FCB925; transform: scale(1.2); } /* "This one?" commit fish — lower right */ .gf-commit-fish { position: absolute; bottom: 22px; right: 22px; display: flex; align-items: center; gap: 14px; background: transparent; border: none; cursor: pointer; z-index: 18; padding: 0; opacity: 0; pointer-events: none; transition: opacity 0.35s ease 0.1s, transform 0.15s ease; -webkit-tap-highlight-color: transparent; } .gf-stage[data-state="browse"] .gf-commit-fish { opacity: 1; pointer-events: auto; animation: commitFishIn 0.5s cubic-bezier(0.34, 1.7, 0.64, 1) 0.6s both; } .gf-commit-fish:active { transform: scale(0.94); } .gf-commit-bubble { position: relative; background: #FFF4D9; border: 3px solid #fff; border-radius: 22px; padding: 10px 18px 11px; font-family: 'Fredoka', sans-serif; font-size: 22px; font-weight: 700; color: #2C5F7F; letter-spacing: -0.01em; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } /* Commit bubble tail — points LEFT toward fish (fish faces RIGHT, mouth on right) */ .gf-commit-bubble::after { content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 14px solid #fff; } .gf-commit-bubble::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 10px solid #FFF4D9; z-index: 1; } .gf-commit-img { width: 92px; height: auto; filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.45)); clip-path: inset(0 0 32% 0); /* crops "YES" text baked into asset */ animation: commitFishIdle 2s ease-in-out 1.2s infinite; transform-origin: center bottom; } /* Wrong card */ .gf-card-wrong-inner { display: flex; align-items: center; justify-content: center; gap: 32px; } .gf-card-wrong-fish { width: 180px; height: auto; flex-shrink: 0; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35)); clip-path: inset(0 0 32% 0); /* crops "NO" text baked into asset */ animation: cardFishHop 0.55s cubic-bezier(0.34, 1.7, 0.64, 1) 0.2s both; transform-origin: center bottom; } .gf-stage[data-state="wrong"] .gf-card-wrong-fish { animation: cardFishHop 0.55s cubic-bezier(0.34, 1.7, 0.64, 1) 0.2s both, wrongFishSulk 2.2s ease-in-out 1s infinite; } .gf-wrong-text-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 420px; text-align: left; } .gf-wrong-headline { font-family: 'Fredoka', sans-serif; font-size: 46px; font-weight: 700; color: #FFF4D9; line-height: 1.05; letter-spacing: -0.02em; text-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); animation: textPop 0.5s cubic-bezier(0.34, 1.7, 0.64, 1) 0.3s both; } .gf-wrong-sub { font-family: 'Fredoka', sans-serif; font-size: 19px; font-weight: 500; color: rgba(255, 244, 217, 0.92); animation: textPop 0.4s cubic-bezier(0.34, 1.7, 0.64, 1) 0.4s both; } .gf-wrong-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; animation: textPop 0.4s cubic-bezier(0.34, 1.7, 0.64, 1) 0.5s both; } .gf-card-btn { font-family: 'Fredoka', sans-serif; font-size: 20px; font-weight: 700; border: none; border-radius: 32px; padding: 16px 28px; cursor: pointer; min-height: 60px; transition: transform 0.1s ease, filter 0.15s ease; -webkit-tap-highlight-color: transparent; letter-spacing: -0.005em; } .gf-card-btn:active { transform: scale(0.95); } .gf-btn-primary { background: #2C5F7F; color: #FCB925; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); } .gf-btn-secondary { background: rgba(255, 244, 217, 0.95); color: #2C5F7F; border: 2px solid #fff; } /* See-it card — cream surface */ .gf-card-seeit-inner { display: flex; align-items: center; justify-content: center; gap: 36px; width: 100%; max-width: 900px; } .gf-seeit-thumb { width: 50%; aspect-ratio: 16/9; border-radius: 22px; overflow: hidden; flex-shrink: 0; background: #000; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); position: relative; } .gf-seeit-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; } .gf-seeit-text-group { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 360px; text-align: left; } .gf-seeit-headline { font-family: 'Fredoka', sans-serif; font-size: 36px; font-weight: 700; color: #2C5F7F; line-height: 1.1; letter-spacing: -0.015em; } .gf-seeit-sub { font-family: 'Fredoka', sans-serif; font-size: 18px; font-weight: 500; color: rgba(44, 95, 127, 0.7); line-height: 1.4; } .gf-btn-tryagain { width: 100%; background: #FCB925; color: #2C5F7F; font-family: 'Fredoka', sans-serif; font-size: 22px; font-weight: 700; border: none; border-radius: 30px; padding: 18px 28px; cursor: pointer; min-height: 64px; transition: transform 0.1s ease; -webkit-tap-highlight-color: transparent; box-shadow: 0 4px 0 #D89A0A; letter-spacing: -0.005em; } .gf-btn-tryagain:active { transform: translateY(2px); box-shadow: 0 2px 0 #D89A0A; } /* Win state — no CSS needed; fish video IS the celebration */ /* ============================================================ BIG FISH VIDEO WRAP Replaces static tank-1.png placeholder. ============================================================ */ .gf-s3-video-wrap { width: 100%; max-width: 700px; aspect-ratio: 16 / 9; position: relative; overflow: hidden; border-radius: 8px; background: var(--mid); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } .gf-s3-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ============================================================ ENDLESS WORLDS — HOVER-TO-PLAY Lazy-injected iframe per tile. Fades in over still. JS checks prefers-reduced-motion + touch before enabling. ============================================================ */ .gf-still-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.35s ease; /* no delay — JS shows only after timeupdate fires */ pointer-events: none; } .gf-still.playing .gf-still-video { opacity: 1; } .gf-still.playing img { opacity: 0; } @media (prefers-reduced-motion: reduce) { .gf-still-video { display: none; } } /* ============================================================ §3 BIG FISH (HTML class: .gf-s3) Two-column: copy left, visual right. Chartreuse dash markers. ============================================================ */ .gf-s3 { max-width: 1600px; margin: 0 auto; padding: 120px 7vw; display: grid; grid-template-columns: minmax(280px, 480px) 1fr; gap: 6vw; align-items: center; } .gf-s3-copy { max-width: 520px; } .gf-s3-headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(28px, 2.6vw, 38px); font-weight: 300; color: var(--white); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 36px; text-wrap: balance; } .gf-s3-list { list-style: none; padding: 0; margin: 0 0 32px; } .gf-s3-list li { position: relative; padding-left: 24px; margin-bottom: 14px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 300; color: var(--silver-bright); line-height: 1.55; } .gf-s3-list li::before { content: ''; position: absolute; left: 0; top: 12px; width: 12px; height: 1px; background: var(--chart); } .gf-s3-close { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 500; color: var(--white); line-height: 1.55; margin-top: 24px; } .gf-s3-visual { width: 100%; display: flex; align-items: center; justify-content: center; } .gf-s3-visual img { width: 100%; max-width: 700px; height: auto; display: block; background: var(--mid); } /* ============================================================ §4 ENDLESS WORLDS (HTML class: .gf-s2) 3-col page grid: copy spans 2 cols, stills grid full width. No video — quiet section after animated Guppy/Big Fish. ============================================================ */ .gf-s2 { max-width: 1600px; margin: 0 auto; padding: 120px 7vw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; } /* Copy spans 2 of 3 cols; right third intentionally empty */ .gf-s2 .gf-copy { grid-column: 1 / span 2; max-width: none; } /* Stills grid spans all 3 cols */ .gf-s2 .gf-grid { grid-column: 1 / -1; } /* Tank stills grid */ .gf-grid { width: 100%; max-width: 1400px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gf-still { margin: 0; position: relative; aspect-ratio: var(--tank-aspect, 16 / 10); background: var(--mid); overflow: hidden; border-radius: 4px; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .gf-still img { width: 100%; height: 100%; object-fit: cover; display: block; /* opacity included here — not just on .playing — so fade back on mouseleave works too */ transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease, opacity 0.35s ease; } .gf-still::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.15) 100%); pointer-events: none; opacity: 0.8; transition: opacity 0.35s ease; } .gf-still:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); } .gf-still:hover img { transform: scale(1.04); filter: brightness(1.06) saturate(1.05); } .gf-still:hover::after { opacity: 0.4; } /* ============================================================ §5 EXTENSIONS / RUNWAY (.gf-ext) Two-column: 340px copy LEFT, 1fr bento grid RIGHT. House standard: 340px / 1fr / 60px gap / 900px breakpoint. Seasonal tiles: persistent label + hover-to-play (Vimeo API). Static tiles (Funko, activations): Ungrounded-style frosted-glass hover overlay — label hidden at rest, fades in on hover. ============================================================ */ .gf-ext { max-width: 1600px; margin: 0 auto; padding: 100px 7vw; display: grid; grid-template-columns: 340px 1fr; gap: 60px; align-items: start; } /* Right column — 3x3 bento, row heights vary by content type */ .ext-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 200px 230px 340px; gap: 10px; } /* Base tile */ .ext-tile { position: relative; overflow: hidden; border-radius: 4px; background: var(--mid); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; cursor: default; } .ext-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); } .ext-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease, opacity 0.35s ease; } .ext-tile:hover img { transform: scale(1.04); filter: brightness(1.05) saturate(1.04); } .ext-tile.playing img { opacity: 0; } /* ── Seasonal tiles: persistent gradient label ──────────────── Hover plays video. Label stays visible over video. */ .ext-label-persist { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 13px 11px; background: linear-gradient(to top, rgba(0,0,0,0.68) 0%, transparent 100%); z-index: 10; pointer-events: none; } .ext-label-cat { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 500; color: var(--chart); text-transform: uppercase; letter-spacing: 0.26em; margin-bottom: 3px; } .ext-label-name { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 400; color: var(--white); text-transform: uppercase; letter-spacing: 0.12em; } /* Vimeo iframe — seasonal tiles */ .ext-tile-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 5; } .ext-tile.playing .ext-tile-video { opacity: 1; } /* ── Static tiles: Ungrounded-style frosted-glass overlay ───── Hidden at rest. Fades in on hover to reveal label. */ .ext-tile-overlay { position: absolute; inset: 0; background: rgba(37, 40, 47, 0.82); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 20px 18px; opacity: 0; transition: opacity 0.3s ease; z-index: 10; pointer-events: none; } .ext-tile:hover .ext-tile-overlay { opacity: 1; } .ext-tile:has(.ext-tile-overlay):hover img { filter: brightness(0.72) saturate(0.9); transform: scale(1.02); } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 900px) { .gf-ext { grid-template-columns: 1fr; padding: 80px 6vw; gap: 40px; } .ext-grid { grid-template-rows: 160px 180px 160px; } } @media (max-width: 600px) { .ext-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: 140px 160px 140px 140px 140px; } } @media (prefers-reduced-motion: reduce) { .ext-tile, .ext-tile img, .ext-tile-overlay { transition: none; } .ext-tile-video { display: none; } } /* ============================================================ KEYFRAMES ============================================================ */ @keyframes cardFishHop { from { transform: translateY(40px) rotate(-15deg) scale(0); opacity: 0; } to { transform: translateY(0) rotate(-4deg) scale(1); opacity: 1; } } @keyframes cardFishWiggle { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(3deg); } } @keyframes bubbleIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes countdownPop { 0% { transform: scale(0.4); opacity: 0; } 50% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes commitFishIn { from { transform: translateX(40px) scale(0.5); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } @keyframes commitFishIdle { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(4deg); } } @keyframes wrongFishSulk { 0%, 100% { transform: rotate(0deg); } 50% { transform: translateY(3px) rotate(-4deg); } } @keyframes textPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ============================================================ RESPONSIVE Consolidated from r28's scattered media query blocks. ============================================================ */ /* ── 1100px — tablet breakpoint ─────────────────────────── */ @media (max-width: 1100px) { /* Big Fish — stack */ .gf-s3 { grid-template-columns: 1fr; gap: 48px; padding: 100px 7vw; } .gf-s3-copy { max-width: none; } .gf-s3-headline { margin-bottom: 28px; } /* Endless Worlds — stack, 2-col grid */ .gf-s2 { padding: 100px 7vw; grid-template-columns: 1fr; gap: 48px; } .gf-s2 .gf-copy { grid-column: 1; max-width: 600px; } .gf-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } /* ── 900px — game UI scales down ────────────────────────── */ @media (max-width: 900px) { .gf-s4 { padding: 90px 6vw; } .gf-s4-inner { grid-template-columns: 1fr; gap: 40px; } .gf-s4-copy { max-width: none; } .gf-card { gap: 20px; padding: 24px 28px; } .gf-card-fish { width: 130px; } .gf-card-wrong-fish { width: 120px; } .gf-card-bubble { font-size: 22px; padding: 16px 22px; max-width: 280px; } .gf-countdown { padding: 5px 14px 6px; } .gf-countdown-label { font-size: 14px; } .gf-countdown-num { font-size: 24px; } .gf-wrong-headline { font-size: 32px; } .gf-wrong-sub { font-size: 15px; } .gf-nav { width: 38px; height: 38px; font-size: 18px; } .gf-nav-prev { left: 12px; } .gf-nav-next { right: 12px; } .gf-commit-fish { gap: 8px; bottom: 14px; right: 14px; } .gf-commit-bubble { font-size: 16px; padding: 7px 13px 8px; } .gf-commit-img { width: 64px; } .gf-card-wrong-inner { flex-direction: column; gap: 18px; } .gf-card-seeit-inner { flex-direction: column; gap: 20px; } .gf-seeit-thumb { width: 100%; } .gf-seeit-headline { font-size: 26px; } .gf-card-btn { font-size: 16px; padding: 12px 20px; min-height: 48px; } .gf-btn-tryagain { font-size: 18px; padding: 14px 22px; min-height: 54px; } } /* ── 760px — mobile ──────────────────────────────────────── */ @media (max-width: 760px) { .gf-hero-section { padding: 0 6vw 8vh; height: 88vh; } .gf-s2 { padding: 80px 6vw; gap: 36px; } .gf-s3 { padding: 80px 6vw; } .gf-grid { grid-template-columns: 1fr; gap: 12px; max-width: 460px; } } /* ── 560px — narrow mobile: cards stack, tails hide ─────── */ @media (max-width: 560px) { .gf-card { flex-direction: column; gap: 14px; } .gf-card-bubble::after, .gf-card-bubble::before { display: none; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { /* Hero entrance */ .gf-hero-eyebrow, .gf-hero-headline, .gf-hero-sub { animation: none; opacity: 1; } /* Stills hover */ .gf-still, .gf-still img, .gf-still::after { transition: none; } /* Game UI — all animations and transitions off */ .gf-card, .gf-card-fish, .gf-card-bubble, .gf-commit-fish, .gf-commit-img, .gf-card-wrong-fish, .gf-wrong-headline, .gf-wrong-sub, .gf-wrong-btns, .gf-countdown, .gf-countdown-num.tick { animation: none; transition: none; } } /* ============================================================ §6 SMART BUSINESS (.gf-biz) 340px copy / 1fr visual / 60px gap / 900px breakpoint. Photo vertically centered to copy block. From goldfish-close-r1.html → extracted to goldfish-v1.css ============================================================ */ .gf-biz { max-width: 1400px; margin: 0 auto; padding: 100px 7vw; display: grid; grid-template-columns: 340px 1fr; gap: 60px; align-items: center; } .gf-biz-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 500; color: var(--chart); text-transform: uppercase; letter-spacing: 0.28em; margin-bottom: 24px; } .gf-biz-headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(26px, 2.3vw, 36px); font-weight: 300; color: var(--white); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 32px; text-wrap: balance; } .gf-biz-body { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 300; color: var(--silver-bright); line-height: 1.7; margin-bottom: 20px; } .gf-biz-body:last-of-type { margin-bottom: 0; } .gf-biz-body em { font-style: italic; color: var(--white); font-weight: 400; } .gf-biz-visual-col { align-self: center; } .gf-biz-visual { width: 100%; border-radius: 6px; overflow: hidden; background: var(--mid); } .gf-biz-visual img { width: 100%; height: auto; display: block; border-radius: 6px; } @media (max-width: 900px) { .gf-biz { grid-template-columns: 1fr; gap: 40px; padding: 80px 6vw; } } @media (max-width: 560px) { .gf-biz { padding: 60px 6vw; } } /* ============================================================ BOTTOM PAGE NAV (.page-nav) Barrel background, full-width rule above. Left: ← Back to AI Playground Right: Next → Work From goldfish-close-r1.html → extracted to goldfish-v1.css ============================================================ */ .page-nav { width: 100%; background: var(--barrel); border-top: 1px solid var(--dim); } .page-nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 7vw; display: flex; justify-content: space-between; align-items: stretch; } .page-nav-link { display: flex; flex-direction: column; gap: 8px; padding: 40px 0; text-decoration: none; } .page-nav-link--right { align-items: flex-end; } .page-nav-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; color: var(--chart); text-transform: uppercase; letter-spacing: 0.28em; } .page-nav-title { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 300; color: var(--silver); text-transform: uppercase; letter-spacing: 0.18em; transition: color 0.2s ease; } .page-nav-link:hover .page-nav-title { color: var(--white); } @media (max-width: 900px) { .page-nav-inner { padding: 0 6vw; } .page-nav-link { padding: 32px 0; } } @media (prefers-reduced-motion: reduce) { .page-nav-title { transition: none; } }