/* ============================================================= SOUNDS OF THE JUNGLE — style.css ------------------------------------------------------------- All visual styling. TWEAK comments mark adjustable values. ============================================================= */ /* ── RESET ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } /* ── PAGE WRAPPER ──────────────────────────────────────────── TWEAK: background — page background color TWEAK: width/height — target canvas size TWEAK: padding — space between content and page edges */ body { background: #fafafa; width: 800px; height: 540px; max-width: 100%; display: flex; flex-direction: column; overflow: hidden; padding: 32px 40px 24px; font-family: "Public Sans", sans-serif; } /* ── HEADER ROW ────────────────────────────────────────────── Flex row: text block on the left, logo icon on the right. */ .header { display: flex; align-items: flex-start; /* top-align text and logo */ justify-content: space-between; gap: 16px; flex-shrink: 0; width: 100%; } /* Left side: title + subtitle stacked */ .header-text { flex: 1; min-width: 0; text-align: left; } .title { /* TWEAK: Main title font family Must match a font loaded in the of index.html */ font-family: "Rowan", serif; font-weight: 400; /* TWEAK: Title font size and color */ font-size: 24pt; color: #003029; line-height: 1.15; } .subtitle { /* TWEAK: Subtitle font size and color */ font-family: "Public Sans", sans-serif; font-weight: 400; font-size: 11pt; color: #738b87; /* TWEAK: Vertical gap between title and subtitle */ margin-top: 5px; line-height: 1.4; } /* ── LOGO ICON ─────────────────────────────────────────────── Right-side logo in the header row. ★ LOGO ICON SIZE — TWEAK HERE ★ Change width and height to resize the logo. Both values should stay equal to keep the aspect ratio, or set height: auto to let the image scale proportionally. */ .logo-icon { width: 32px; /* ← TWEAK: logo width */ height: 32px; /* ← TWEAK: logo height */ object-fit: contain; flex-shrink: 0; display: block; } /* ── SPECTROGRAM CANVAS ────────────────────────────────────── TWEAK: padding values adjust space above/below the canvas */ .visualizer-wrap { width: 100%; flex-shrink: 0; padding: 14px 0 10px; } #timeline-canvas { width: 100%; /* TWEAK: Canvas height — keep in sync with canvasH in script.js */ height: 200px; display: block; /* TWEAK: Canvas corner rounding */ border-radius: 4px; } /* ── SOUND BUTTONS CONTAINER ────────────────────────────────── TWEAK: gap — space between the three cards */ .sound-buttons { display: flex; gap: clamp(8px, 1.5vw, 20px); justify-content: center; width: 100%; flex: 1; align-items: center; } /* ── INDIVIDUAL SOUND BUTTON ────────────────────────────────── TWEAK: background — card fill behind the label row TWEAK: border — default border style TWEAK: border-radius — card corner rounding */ .sound-btn { flex: 1; min-width: 0; background: #f0f0f0; border: 1px solid #dde8e5; border-radius: 6px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; transition: all 0.22s ease; } /* TWEAK: Hover state — border color and lift amount */ .sound-btn:hover { border-color: #4a9080; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 48, 41, 0.14); } /* TWEAK: Active (playing) state — border and glow */ .sound-btn.active { border-color: #003029; box-shadow: 0 0 18px rgba(0, 48, 41, 0.2); } /* TWEAK: Image area height — clamp(min, preferred, max) */ .sound-btn img { width: 100%; height: clamp(80px, 12vh, 140px); object-fit: cover; display: block; } /* ── BUTTON LABEL ROW ───────────────────────────────────────── TWEAK: padding — space inside the label row */ .btn-label { padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; } /* TWEAK: Button name font size and color */ .btn-name { font-family: "Public Sans", sans-serif; font-size: clamp(9pt, 1.3vw, 11pt); font-weight: 400; color: #003029; } /* ── PLAY / STOP ICON ───────────────────────────────────────── TWEAK: width/height — icon circle size TWEAK: background — idle circle fill color */ .play-icon { width: 30px; height: 30px; border-radius: 50%; background: #dde8e5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; } /* TWEAK: Icon circle color while playing */ .sound-btn.active .play-icon { background: #003029; } /* TWEAK: SVG icon size inside the circle */ .play-icon svg { width: 13px; height: 13px; } .play-icon .play-triangle { fill: #003029; display: block; } .play-icon .stop-rect { fill: #fafafa; display: none; } .sound-btn.active .play-triangle { display: none; } .sound-btn.active .stop-rect { display: block; } /* ── SOURCES FOOTER ─────────────────────────────────────────── TWEAK: padding-top — gap above the footer text */ .footer { width: 100%; flex-shrink: 0; padding-top: 10px; } /* TWEAK: Source text font size and color */ .sources { font-family: "Public Sans", sans-serif; font-weight: 400; font-size: clamp(7pt, 0.9vw, 9pt); color: #738b87; max-width: 100%; line-height: 1.45; } /* ── RESPONSIVE ─────────────────────────────────────────────── Below 600 px the layout stacks the buttons vertically. */ @media (max-width: 600px) { body { width: 100%; height: auto; min-height: 100vh; padding: 20px 16px 16px; overflow: auto; } .title { font-size: 18pt; } /* TWEAK: title size on small screens */ .subtitle { font-size: 9pt; } /* TWEAK: subtitle size on small screens */ .logo-icon { width: 26px; height: 26px; } /* TWEAK: logo size on small screens */ .sound-buttons { flex-direction: column; align-items: stretch; flex: auto; } .sound-btn { width: 100%; } .sources { font-size: 7pt; } /* TWEAK: sources size on small screens */ }