/* ================================================================== THE GREEN TURTLES — stylesheet ------------------------------------------------------------------ The remaining shared/page-level styling, after splitting each feature out into its own file (see index.html for the full list — wave-hand.css, bubbles.css, sparkles.css, walking-turtle.css, ninja-turtle.css, swimming-turtle.css, shell-clamp.css). What's left here is what those files don't own: CSS variables, the page background, header/layout, the origin story card + badge, and the ocean floor's sand/reef/pebbles (the clams living on it are their own file). Table of contents: 1. Variables & resets 2. Animated background (gradient sky) 3. Page layout & typography 4. Origin story card 5. Ocean floor decoration (sand, reef, pebbles) 6. Click-through plumbing 7. Responsive tweaks ================================================================== */ /* --------------------------------------------------------------- 1. Variables & resets ------------------------------------------------------------------ */ :root { --shell-dark: #2f9e44; --shell-light: #51cf66; --shell-highlight: #8ce99a; --skin: #69db7c; --skin-dark: #40c057; --cheek: #ffa8a8; /* Overridden live by ninja-turtle.js on click (scoped to the ninja turtle element itself, not :root — see that file), which also recomputes --mask-dark to match whichever color is active. */ --mask-color: #255d98; --mask-dark: #1a4470; --card-bg: rgba(255, 255, 255, 0.85); --text-dark: #1b4332; } * { box-sizing: border-box; } /* This page is deliberately built to fit exactly one screen with no scrolling (see .page in section 3) — overflow is hidden on both axes, not just X, so a vertical scrollbar can never appear either. That matters beyond aesthetics: a scrollbar toggling on/off shrinks the viewport's available width, shifting all centered content sideways — and CSS transforms (like a click-bounce scale, or the clam lid's animation) can transiently push rendered pixels a few pixels past the bottom edge without changing any element's actual layout box, which is enough to trip a scrollbar into appearing for a frame and back out again. That flicker is what a "bounce" affecting seemingly unrelated text and divs turned out to be — not a layout bug in any single element, but any transient overflow being allowed to matter at all. */ html, body { margin: 0; padding: 0; min-height: 100%; font-family: "Segoe UI", "Trebuchet MS", Verdana, sans-serif; color: var(--text-dark); overflow: hidden; } /* --------------------------------------------------------------- 2. Animated background A full-viewport fixed gradient that slowly cycles hue. Bubbles, sparkles, the swimming turtles and the ocean floor all layer on top of it, positioned by their own files, but painted inside this same fixed container (see .background in index.html). ------------------------------------------------------------------ */ /* No z-index here (deliberately not -1): a negative z-index paints an element behind its own ancestors' boxes, which sinks it below 's own hit-testable box and makes everything inside unclickable — a real bug this site hit once bubbles/turtles needed to receive clicks. Leaving z-index at its default (auto) is enough: .background is position:fixed so it already paints above 's non-positioned normal-flow content, and .page's explicit z-index: 1 (see section 3) keeps the real page content on top of it. */ .background { position: fixed; inset: 0; background: linear-gradient( -45deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb, #ffdde1, #b5ead7 ); background-size: 400% 400%; animation: gradient-shift 18s ease infinite; } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* --------------------------------------------------------------- 3. Page layout & typography ------------------------------------------------------------------ */ /* The whole composition (header, walking turtle, ninja footer) is sized to fit within one viewport ("the screen") with no scrolling needed on typical screens — .hero grows to fill the leftover space so the ninja turtle always lands at the bottom edge. */ .page { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 1rem 1.5rem 0; text-align: center; } .welcome { max-width: 700px; } .title { font-size: clamp(1.8rem, 5vw, 3rem); margin: 0 0 0.4rem; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .rainbow-text { background: linear-gradient(90deg, #ff6b6b, #feca57, #1dd1a1, #54a0ff, #a55eea, #ff6b6b); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow-slide 6s linear infinite; } @keyframes rainbow-slide { to { background-position: 300% center; } } .subtitle { font-size: clamp(0.9rem, 2vw, 1.1rem); margin: 0 0 0.2rem; color: var(--text-dark); opacity: 0.85; } /* flex:1 makes this section absorb all leftover vertical space, which is what pins the ninja footer to the bottom of the screen. */ .hero { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 900px; min-height: 0; } /* --------------------------------------------------------------- 4. Origin story card ------------------------------------------------------------------ */ .origin-card { background: var(--card-bg); border-radius: 22px; padding: 0.75rem 1.6rem; max-width: 560px; font-size: 0.9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); animation: float-card 5s ease-in-out infinite; } .origin-card p { margin: 0.4rem 0; } @keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .origin-card h2 { margin-top: 0; color: var(--shell-dark); } .badge { display: inline-block; margin-top: 0.5rem; padding: 0.4rem 1.1rem; border-radius: 999px; font-weight: bold; background: linear-gradient(90deg, #ffe066, #ff8787); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); animation: pulse-badge 2.4s ease-in-out infinite; } @keyframes pulse-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* --------------------------------------------------------------- 5. Ocean floor decoration (sand, reef) Lives inside the fixed .background layer (see section 2), so it never affects document height/scrolling — it's purely a colorful backdrop pinned to the bottom edge of the viewport. The clam shells used to sit here too, but now stand fixed-width next to the ninja turtle instead (ninja-turtle.css's .ninja-zone + shell-clamp.css) — the swap was needed because this whole scene used to be one big SVG stretched edge-to-edge with preserveAspectRatio="none", which distorted the art (and any clam sitting inside it) more the wider the viewport got. The sand is a small SVG tile (data URI, embeds its own gradient since a background-image can't reference #sandGradient from the main document) repeated horizontally instead of stretched to fit: background-size sets a fixed *height* (matching .seafloor's own clamp() below) with width left auto, so the tile's aspect ratio — and therefore how large the sand waves/texture look — never distorts; more of the same size tile just repeats on wider screens instead of one tile stretching to fill them. */ .seafloor { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 18vh, 170px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cdefs%3E%3ClinearGradient id='tileSandGradient' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe9ba'/%3E%3Cstop offset='1' stop-color='%23e3a94f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23tileSandGradient)' d='M0 220 L0 105 C50 85 90 125 140 100 C190 78 220 118 260 95 C275 88 290 98 300 105 L300 220 Z'/%3E%3Cellipse fill='%23c9954a' opacity='0.35' cx='90' cy='165' rx='35' ry='6'/%3E%3Cellipse fill='%23c9954a' opacity='0.35' cx='230' cy='180' rx='28' ry='5'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: left bottom; background-size: auto 100%; } /* Anchored to the left/right edges at their own natural aspect ratio (height: 100% of .seafloor, width: auto) so they scale with the band's responsive height without ever stretching horizontally. */ .reef { position: absolute; bottom: 0; height: 100%; width: auto; } .reef-left { left: 0; } .reef-right { right: 0; } /* Pointed corals and the sea-fan sway gently, each on its own timing so the reef doesn't move as one rigid block. */ .coral { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 4s ease-in-out infinite; } .coral-fan-ridges { fill: none; stroke: rgba(0, 0, 0, 0.2); stroke-width: 2; stroke-linecap: round; } .coral-a { animation-duration: 3.6s; } .coral-b { animation-duration: 4.2s; animation-delay: 0.4s; } .coral-c { animation-duration: 3.8s; animation-delay: 0.8s; } .seaweed { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 3.2s ease-in-out infinite; } /* Also defined in swimming-turtle.css for its flippers — identical keyframe, kept duplicated so each file stays self-contained. */ @keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } /* --------------------------------------------------------------- 6. Click-through plumbing .page and .seafloor are full-viewport (or full-width) boxes. By default a box captures clicks across its whole area even where it's visually empty, so without this every click would be swallowed before it ever reached a bubble, turtle or clam underneath (standard CSS hit-testing). Each per-feature CSS file handles opting its own clickable elements back in with pointer-events: auto/bounding-box — this section only covers the containers and elements that remain in this file. ------------------------------------------------------------------ */ .page { pointer-events: none; } .origin-card { pointer-events: auto; } .badge { cursor: pointer; /* Without this, double-clicking selects the text (and neighboring text) like any other paragraph, which looks broken for what's meant to read as a button. */ user-select: none; -webkit-user-select: none; } .seafloor { pointer-events: none; } /* Shared layer for short-lived effects spawned by bubbles.js and swimming-turtle.js via TurtlesAnimations.spawnFx (see shared-animations.js). Sits between the background (implicit z-index 0 via source order — see section 2) and the page content (z-index 1). pointer-events: none so it can never itself block a click. */ .fx-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* --------------------------------------------------------------- 7. Responsive tweaks ------------------------------------------------------------------ */ @media (max-width: 480px) { .origin-card { padding: 1.1rem 1.3rem; } }