/* Shared style for the tab pages. Matches the landing page: cream background, lowercase mono-900 type, and the vertical-bar "stitch" texture that the flower, red button and pull switch are drawn with. Each page sets --acc (accent) and --acc-soft on . */ :root { --bg: #fefefe; --ink: #2d1408; --petal: #ffc928; --petal-bright: #ffe066; --center: #6b3410; --stem: #4a9c2a; --leaf: #6dc047; --red: #e54c3a; --red-dark: #9e1a13; --grey-lt: #d2cecb; --grey-md: #9f9b98; --grey-dk: #6e6a67; --rain: #5588cc; --rain-lt: #8fb4e8; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100vh; background: var(--bg); } body { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); letter-spacing: 1px; padding: 96px clamp(20px, 8vw, 120px) 120px; } /* ===== visiting ASCII bees (bees.js) ===== */ #bee-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 35; overflow: hidden; pointer-events: none; } /* ===== stitch texture: thin vertical bars, like the SVG art ===== */ .stitch { background: repeating-linear-gradient( 90deg, var(--acc, var(--petal)) 0 3px, transparent 3px 6px ); } /* ===== chrome: back link + hamburger (same as landing) ===== */ a.back { position: fixed; top: 18px; left: 18px; font-weight: 900; font-size: clamp(12px, 1.6vmin, 18px); color: var(--ink); text-decoration: none; background: rgba(254, 254, 254, 0.92); padding: 3px 9px; z-index: 50; transition: color 0.15s, background 0.15s; } a.back:hover, a.back:focus-visible { color: var(--petal-bright); background: var(--ink); outline: none; } .menu-toggle { position: fixed; top: 18px; right: 18px; width: 36px; height: 36px; background: transparent; border: none; padding: 8px 6px; cursor: pointer; z-index: 50; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s ease; } .menu-toggle span { display: block; width: 100%; height: 3px; background: var(--ink); border-radius: 1.5px; } .menu-toggle.open { transform: rotate(90deg); } .menu-dropdown { position: fixed; top: 60px; right: 18px; background: rgba(254, 254, 254, 0.96); border: 1px solid #e3ddd6; border-radius: 6px; padding: 6px 0; display: flex; flex-direction: column; z-index: 50; box-shadow: 0 6px 18px rgba(45, 20, 8, 0.12); font-weight: 900; font-size: clamp(12px, 1.4vmin, 16px); transform: scaleY(0); transform-origin: top right; transition: transform 0.25s ease, opacity 0.25s ease; opacity: 0; pointer-events: none; } .menu-dropdown.open { transform: scaleY(1); opacity: 1; pointer-events: auto; } .menu-dropdown a { padding: 6px 18px; color: var(--ink); text-decoration: none; white-space: nowrap; transition: color 0.12s, background 0.12s; } .menu-dropdown a:hover, .menu-dropdown a:focus-visible { background: var(--ink); color: var(--petal-bright); outline: none; } /* ===== page title ===== */ h1 { font-size: clamp(28px, 5vmin, 44px); font-weight: 900; margin: 0 0 10px; } .title-stitch { height: 10px; max-width: 340px; margin-bottom: 48px; } h2 { font-size: clamp(15px, 2vmin, 19px); font-weight: 900; margin: 48px 0 16px; } p { line-height: 1.7; max-width: 62ch; margin: 0 0 16px; } a { color: inherit; font-weight: 900; } a:hover { color: var(--acc, var(--petal)); } /* placeholder marker — remove when real content lands */ .todo { color: var(--grey-md); font-style: italic; } /* ===== reusable bits ===== */ .chip { display: inline-block; font-weight: 900; font-size: 12px; padding: 2px 8px; border: 1.5px solid var(--ink); border-radius: 999px; margin-right: 6px; } .stitch-block { /* image / thumbnail placeholder woven out of bars */ background: repeating-linear-gradient(90deg, var(--acc, var(--petal)) 0 3px, transparent 3px 6px), repeating-linear-gradient(0deg, rgba(45, 20, 8, 0.06) 0 8px, transparent 8px 16px); }