/* * whatif.css — the "Play with this site" drop-up menu and its effects. * Pick an effect from the menu; it stays until you pick another or hit * "put it back". Most effects are a class on (wif-*); party and * gravity are driven by whatif.js. */ /* ── The picker (bottom-right) ─────────────────────────── */ .playground { position: fixed; right: 20px; bottom: 20px; z-index: 9000; font-family: 'DM Sans', sans-serif; display: flex; align-items: center; gap: 12px; } /* Countdown to auto-revert — a yellow disc that empties clockwise while running. Yellow stays visible on every background (cream, dark takeovers, etc.). */ @property --pg-pie { syntax: ""; inherits: false; initial-value: 0deg; } .pg-countdown { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; --pg-pie: 0deg; background: conic-gradient(transparent var(--pg-pie), var(--yellow) 0); filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.25)); } .pg-countdown[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .pg-countdown { display: none !important; } } .playground-picker { position: relative; } .playground-toggle { background: var(--yellow); color: var(--text); border: none; border-radius: 40px; padding: 14px 22px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22); white-space: nowrap; transition: transform 0.15s ease; } .playground-toggle:hover { transform: translateY(-2px); } .playground-menu { position: absolute; right: 0; bottom: calc(100% + 10px); list-style: none; margin: 0; padding: 6px; background: var(--cream); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18); min-width: 250px; } .playground-menu li { margin: 0; } .playground-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 11px 14px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--text); cursor: pointer; } .playground-menu button:hover { background: var(--yellow-light); } /* ── Active bar (bottom-centre, hard to miss) ──────────── */ .playground-active { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9001; display: flex; align-items: center; gap: 14px; background: var(--forest); color: var(--cream); padding: 12px 14px 12px 22px; border-radius: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); max-width: calc(100vw - 40px); } .playground-active-label { font-size: 15px; font-weight: 600; } .playground-undo { background: var(--yellow); color: var(--text); border: none; border-radius: 40px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } @media (max-width: 600px) { .playground { right: 12px; bottom: 12px; } .playground-toggle { padding: 12px 18px; font-size: 14px; } .playground-active { bottom: 78px; } /* sit above the picker */ } /* ══════════════════════════════════════════════════════ EFFECT: …we lived in the 90s? ══════════════════════════════════════════════════════ */ /* Full-screen takeover: the real site is hidden behind this. */ .wif-90s { position: fixed; inset: 0; z-index: 8800; overflow: auto; background-color: #00012b; background-image: radial-gradient(1.5px 1.5px at 25px 40px, #fff, transparent), radial-gradient(1px 1px at 120px 90px, #fff, transparent), radial-gradient(2px 2px at 180px 30px, #fff, transparent), radial-gradient(1px 1px at 60px 160px, #fff, transparent), radial-gradient(1.5px 1.5px at 205px 180px, #fff, transparent); background-size: 230px 230px; font-family: "Comic Sans MS", "Times New Roman", cursive; color: #00ff00; text-align: center; padding: 46px 16px 58px; } .wif-90s a { color: #00ffff; text-decoration: underline; } .wif-90s-marquee { position: fixed; left: 0; right: 0; z-index: 2; background: #000; color: #ffff00; font-size: 16px; padding: 5px 0; white-space: nowrap; overflow: hidden; } .wif-90s-top { top: 0; animation: wif-marquee 16s linear infinite; } .wif-90s-bottom { bottom: 0; color: #ff00ff; animation: wif-marquee 22s linear infinite reverse; } .wif-90s-stage { max-width: 640px; margin: 36px auto; background: rgba(0,0,0,0.35); border: 4px ridge #c0c0c0; padding: 28px 24px; } .wif-90s-wordart { font-size: clamp(38px, 8vw, 74px); font-weight: 900; font-style: italic; background: linear-gradient(90deg,#ff0000,#ff9900,#ffff00,#00ff00,#00ffff,#3333ff,#ff00ff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #000; transform: skewX(-8deg); letter-spacing: 1px; margin: 0 0 12px; filter: drop-shadow(3px 3px 0 #000); } .wif-90s-supertag { color: #ffd700; font-style: italic; letter-spacing: 4px; font-size: 15px; font-family: Georgia, serif; margin: 0 0 6px; } .wif-90s-tag { color: #ffff00; font-size: 18px; margin: 0 0 14px; } .wif-90s-blink { color: #ff2222; font-weight: bold; font-size: 20px; animation: wif-blink 1s steps(2, start) infinite; } @keyframes wif-blink { 50% { opacity: 0; } } .wif-90s-links { margin: 18px 0; font-size: 18px; color: #fff; } .wif-90s-counter { display: inline-block; background: #000; color: #00ff00; font-family: "Courier New", monospace; padding: 6px 12px; border: 2px inset #888; margin: 10px 0; } .wif-90s-email { color: #00ffff; margin: 8px 0; } .wif-90s-badges { font-size: 28px; letter-spacing: 10px; margin: 12px 0; } .wif-90s-foot { color: #c0c0c0; font-size: 12px; margin-top: 16px; } .wif-90s-clippy { position: fixed; right: 20px; bottom: 88px; z-index: 3; display: flex; align-items: flex-end; gap: 0; text-align: left; } .wif-90s-clippy img { width: 88px; height: auto; display: block; } .wif-90s-clippy span { background: #ffffcc; color: #000; border: 1px solid #000; border-radius: 8px; padding: 10px 12px; max-width: 210px; font-size: 13px; font-family: "Tahoma", "DM Sans", sans-serif; box-shadow: 3px 3px 0 rgba(0,0,0,0.4); margin-bottom: 22px; margin-right: -6px; } @keyframes wif-marquee { from { text-indent: 100vw; } to { text-indent: -100vw; } } /* ══════════════════════════════════════════════════════ EFFECT: Luna the dog ══════════════════════════════════════════════════════ */ .wif-dog-layer { position: fixed; inset: 0; z-index: 8700; pointer-events: none; overflow: hidden; } /* She sits up around the vertical middle, not down at the floor. */ .wif-dog-wrap { position: absolute; bottom: 38vh; left: 0; will-change: transform; } .wif-dog-img { height: 170px; width: auto; display: block; animation: wif-dog-bob 0.45s ease-in-out infinite; } .wif-dog-wrap.peeing .wif-dog-img { animation: none; transform: rotate(6deg); transform-origin: 30% bottom; } .wif-dog-img.rolling { animation: wif-roll 0.75s linear; } @keyframes wif-dog-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes wif-roll { from { transform: rotate(0); } to { transform: rotate(360deg); } } .wif-dog-pee { position: absolute; right: 9%; bottom: 16px; width: 4px; height: 0; background: linear-gradient(#f4d03f, rgba(244,208,63,0.35)); border-radius: 2px; animation: wif-pee 0.6s ease forwards; } @keyframes wif-pee { to { height: 42px; } } .wif-dog-puddle { position: absolute; /* top set in JS, at her feet */ width: 10px; height: 6px; background: radial-gradient(ellipse, rgba(244,208,63,0.55), rgba(244,208,63,0.12)); border-radius: 50%; transform: translateX(-50%); transition: width 1.2s ease, height 1.2s ease; } .wif-dog-puddle.grow { width: 92px; height: 22px; } /* ══════════════════════════════════════════════════════ EFFECT: turn it upside down ══════════════════════════════════════════════════════ */ body.wif-flip #page { transform: rotate(180deg); } /* ══════════════════════════════════════════════════════ EFFECT: serious consultancy (full takeover) ══════════════════════════════════════════════════════ */ .wif-corp { position: fixed; inset: 0; z-index: 8800; overflow: auto; background: #0b1f3a; color: #fff; font-family: "Arial", "Helvetica", system-ui, sans-serif; } .wif-corp-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; border-bottom: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; } .wif-corp-logo { font-weight: 800; letter-spacing: 1px; font-size: 18px; } .wif-corp-logo b { color: #f5c518; } .wif-corp-nav nav { color: rgba(255,255,255,0.7); font-size: 14px; } .wif-corp-cta { background: #f5c518; color: #0b1f3a; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 4px; } .wif-corp-hero { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 30px; align-items: end; max-width: 1100px; margin: 0 auto; padding: 30px 28px 20px; } .wif-corp-portrait { position: relative; align-self: end; } .wif-corp-portrait img { width: 100%; height: auto; display: block; } .wif-corp-portrait span { display: none; } .wif-corp-portrait.empty { display: grid; place-items: center; border: 2px dashed rgba(255,255,255,0.3); border-radius: 6px; min-height: 300px; } .wif-corp-portrait.empty span { display: block; color: rgba(255,255,255,0.5); font-size: 13px; text-align: center; padding: 10px; } .wif-corp-hero-copy h1 { font-family: "Arial Black", "Arial", sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 6vw, 64px); line-height: 0.95; letter-spacing: -0.01em; margin: 0 0 18px; } .wif-corp-swoosh { position: relative; white-space: nowrap; } .wif-corp-swoosh::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 12px; border-bottom: 5px solid #f5c518; border-radius: 0 0 60% 60% / 0 0 100% 100%; } .wif-corp-quote { font-style: italic; color: rgba(255,255,255,0.8); font-size: 16px; line-height: 1.6; max-width: 520px; margin: 0 0 22px; } .wif-corp-btn { display: inline-block; background: #f5c518; color: #0b1f3a; font-weight: 700; padding: 13px 22px; border-radius: 4px; } .wif-corp-ticker { background: #f5c518; color: #0b1f3a; font-weight: 800; font-size: 13px; letter-spacing: 1px; padding: 9px 0; white-space: nowrap; overflow: hidden; animation: wif-marquee 24s linear infinite; margin-top: 16px; } .wif-corp-logos { text-align: center; padding: 26px 20px; color: rgba(255,255,255,0.55); font-size: 12px; letter-spacing: 2px; } .wif-corp-logos div { margin-top: 12px; color: rgba(255,255,255,0.85); font-weight: 700; font-size: 15px; letter-spacing: 1px; } .wif-corp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; padding: 10px 28px 26px; } .wif-corp-cards > div { background: #12294a; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 22px; } .wif-corp-cards h3 { font-size: 18px; margin: 0 0 8px; color: #f5c518; } .wif-corp-cards p { font-size: 14px; color: rgba(255,255,255,0.75); margin: 0; } .wif-corp-stock { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1100px; margin: 0 auto; padding: 0 28px 44px; } .wif-corp-photo { position: relative; border-radius: 6px; overflow: hidden; } .wif-corp-photo img { width: 100%; height: 220px; object-fit: cover; display: block; } .wif-corp-photo span { display: none; } .wif-corp-photo.empty { display: grid; place-items: center; min-height: 160px; border: 2px dashed rgba(255,255,255,0.25); } .wif-corp-photo.empty span { display: block; color: rgba(255,255,255,0.5); font-size: 13px; text-align: center; padding: 10px; } @media (max-width: 768px) { .wif-corp-hero { grid-template-columns: 1fr; } .wif-corp-cards { grid-template-columns: 1fr; } .wif-corp-stock { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════ EFFECT: talk to my inner child The real site, recoloured in crayon. ══════════════════════════════════════════════════════ */ body.wif-kid #page { background: #fffdf2 !important; font-family: 'Schoolbell', 'Comic Sans MS', cursive !important; color: #1b1b1b !important; padding-top: 8px; } body.wif-kid #page p, body.wif-kid #page li, body.wif-kid #page a, body.wif-kid #page span, body.wif-kid #page em, body.wif-kid #page blockquote { font-family: 'Schoolbell', 'Comic Sans MS', cursive !important; } body.wif-kid #page h1, body.wif-kid #page h2, body.wif-kid #page h3, body.wif-kid #page h4, body.wif-kid #page .hero-headline, body.wif-kid #page .section-title, body.wif-kid #page .section-label, body.wif-kid #page .nav-logo, body.wif-kid #page .footer-logo { font-family: 'Gloria Hallelujah', 'Comic Sans MS', cursive !important; color: #e23b3b !important; text-shadow: 2px 2px 0 #ffd21e; letter-spacing: 0 !important; } body.wif-kid #page h2, body.wif-kid #page .section-title { color: #2a6fdb !important; transform: rotate(-1.5deg); } body.wif-kid #page h3 { color: #3aa655 !important; transform: rotate(1.2deg); } body.wif-kid #page .hero-headline { transform: rotate(-2deg); } /* crayon buttons */ body.wif-kid #page .btn { background: #ffd21e !important; color: #1b1b1b !important; border: 3px solid #1b1b1b !important; border-radius: 16px 9px 18px 8px !important; /* wobbly */ box-shadow: 3px 3px 0 #e23b3b !important; font-family: 'Gloria Hallelujah', 'Comic Sans MS', cursive !important; transform: rotate(-1.5deg); } /* every photo gets a kid's wonky crayon frame */ body.wif-kid #page .hero-photo, body.wif-kid #page .about-image img, body.wif-kid #page .project-card img, body.wif-kid #page .case-hero-img img { border: 6px solid #2a6fdb !important; border-radius: 14px 20px 10px 18px !important; box-shadow: 4px 4px 0 #ffd21e !important; transform: rotate(-2deg); } body.wif-kid #page .about-image img { border-color: #3aa655 !important; transform: rotate(2deg); } .wif-kid-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9100; background: #ffd21e; border-bottom: 5px dashed #e23b3b; text-align: center; padding: 12px 16px; pointer-events: none; } .wif-kid-banner span { display: inline-block; font-family: 'Gloria Hallelujah', 'Comic Sans MS', cursive; font-size: clamp(17px, 3.4vw, 30px); color: #e23b3b; transform: rotate(-1.5deg); } .wif-kid-banner b { color: #2a6fdb; } .wif-kid-stickers { position: fixed; inset: 0; z-index: 9050; pointer-events: none; overflow: hidden; } .wif-kid-sticker { position: absolute; font-size: clamp(34px, 6vw, 58px); line-height: 1; animation: wif-kid-wobble 1.6s ease-in-out infinite; } @keyframes wif-kid-wobble { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } } /* ══════════════════════════════════════════════════════ JS effect helpers: party ══════════════════════════════════════════════════════ */ .wif-party-layer { position: fixed; inset: 0; z-index: 8600; pointer-events: none; overflow: hidden; } .wif-disco { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); font-size: 64px; animation: wif-disco-drop 1s ease-out forwards, wif-disco-spin 2s linear 1s infinite; } @keyframes wif-disco-drop { to { top: 24px; } } @keyframes wif-disco-spin { to { transform: translateX(-50%) rotate(360deg); } } .wif-disco-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 12%, rgba(255,255,255,0.16), transparent 38%); animation: wif-hue 4s linear infinite; } @keyframes wif-hue { to { filter: hue-rotate(360deg); } } .wif-confetti { position: absolute; top: -16px; width: 9px; height: 14px; opacity: 0.9; animation: wif-fall linear forwards; } @keyframes wif-fall { to { transform: translateY(105vh) rotate(540deg); } } /* Reduced motion: kill the scrolling/looping animations. (whatif.js also hides party + gravity from the menu for these users.) */ @media (prefers-reduced-motion: reduce) { .wif-corp-ticker, .wif-90s-top, .wif-90s-bottom, .wif-90s-blink, .wif-dog-img, .wif-disco, .wif-disco-glow, .wif-kid-sticker, .wif-confetti { animation: none !important; } } /* ── Fixes + button nudges (added) ─────────────────────── */ /* hidden must beat the flex/menu display rules */ .playground-active[hidden], .playground-menu[hidden] { display: none !important; } /* the toggle needs to clip the shimmer sweep */ .playground-toggle { position: relative; overflow: hidden; } .playground-toggle.pg-jump { animation: pg-jump 0.7s ease; } @keyframes pg-jump { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-9px); } 45% { transform: translateY(0); } 62% { transform: translateY(-5px); } 80% { transform: translateY(0); } } .playground-toggle.pg-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.65) 50%, transparent 65%); transform: translateX(-100%); animation: pg-shimmer 0.9s ease; } @keyframes pg-shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .playground-toggle.pg-jump, .playground-toggle.pg-shimmer::after { animation: none !important; } }