/* garabatos/styles.css pv1: no longer links the main site's /styles.css — every var(--token, fallback) below now always resolves to its fallback value, since nothing defines the token anymore. Going its own visual direction (90s/retro) independent of the main site's design system, same precedent as gallery/pajaritos. Comic Sans is the page's base font per the pv1 brief; swap/extend the stack below as the retro design comes together. */ /* The page's ES/EN toggle only works because of this rule — it used to come from the main /styles.css, which this page no longer links. Without it, both language spans render side by side everywhere (garabatos/script.js's currentLang()/lang toggle still updates html[data-lang], this is just the CSS that reacts to it). */ html[data-lang="es"] [data-i18n-en], html[data-lang="en"] [data-i18n-es] { display: none; } /* html gets the same background as body: on iOS Safari, scrolling past the top/bottom edge (rubber-band overscroll) reveals whatever's behind body — html's own background, white by default — instead of stretching body's gradient into that area. Duplicating it here closes that gap. */ html, body { background: hsla(92, 85%, 68%, 1); background: linear-gradient(90deg, hsla(92, 85%, 68%, 1) 0%, hsla(338, 98%, 49%, 1) 100%); background: -moz-linear-gradient(90deg, hsla(92, 85%, 68%, 1) 0%, hsla(338, 98%, 49%, 1) 100%); background: -webkit-linear-gradient(90deg, hsla(92, 85%, 68%, 1) 0%, hsla(338, 98%, 49%, 1) 100%); } body { filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#A8F368", endColorstr="#F9035E", GradientType=1 ); color: var(--fg, #b7ff00); margin: 0; /* Comic Relief loaded via Google Fonts in index.html's — real Comic Sans MS only exists on Windows/macOS, so it's listed here as a fallback for browsers that block the web font, not the primary. */ font-family: 'Comic Relief', 'Comic Sans MS', 'Comic Sans', cursive, sans-serif; } /* --- pv1 retro scaffold: WordArt glow badge --- */ .retro-wordart { /* Lives inside .garabatos-header, between and the intro text. Plain CSS position:sticky, no JS — a prior "stay pinned forever" hybrid (switching to position:fixed once the header ran out of room) caused a real, large jump: leaving document flow made the header collapse by the badge's own height, snapping the intro text and canvas below it up by ~88px in a single scroll step. Plain sticky can't do that — nothing ever leaves flow — at the cost of the badge eventually scrolling away with the header instead of staying stuck through the whole page. width:fit-content + margin:auto centers it without needing left:50% + transform:translateX, which would fight position:sticky's own use of the left/right offsets. Real link (to /sorpresa) — pointer-events stays enabled (default), no pointer-events:none parent to opt out of. */ position: sticky; top: 1rem; display: block; width: fit-content; margin: 1.5rem auto; transform: rotate(-4deg); z-index: 30; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; /* Fixed, not clamp()/vw-based: a fluid size interacting with the max-width:40rem breakpoint below left an untested mid-range gap (~640-900px) where the badge grew large enough to clip into the header text despite both endpoints (375px, 1280px) looking fine. One fixed size per breakpoint is boring but predictable. */ font-size: 2rem; letter-spacing: 0.03em; color: #fffb00; text-decoration: none; /* Stacked hard-edge offsets read as an outline at any size (cheap substitute for -webkit-text-stroke, which Firefox still doesn't support); the blurred shadows on top are the actual glow. */ text-shadow: 2px 2px 0 #7700ff, -2px -2px 0 #7700ff, 2px -2px 0 #7700ff, -2px 2px 0 #7700ff, 0 0 8px #fffb00, 0 0 18px #ff00c8, 0 0 32px #ff00c8; } .garabatos-header { position: relative; /* Top padding clears 's absolutely-positioned row (top:1.5rem + its own height) — #retro-wordart now lives inside this header (between the topbar and the intro text) and supplies its own margin for the gaps on either side of it, rather than this padding trying to account for it too. */ padding: 3.5rem 1.5rem 2rem; text-align: center; } .garabatos-header h1 { margin: 0 0 0.5rem; font-size: 2rem; } .garabatos-intro { max-width: 32rem; margin: 0 auto; color: var(--muted, #ffffff); } .garabatos-board { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 0 1.5rem 3rem; } #scratch-canvas { width: 100%; max-width: 40rem; aspect-ratio: 640 / 400; touch-action: none; cursor: crosshair; border-radius: 12px; border: 5px solid transparent; border-radius:16px; background: linear-gradient(#000000, #000000) padding-box, linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%) border-box; ; /* pv1: canvas.js's PIXEL_SCALE now renders into a backing buffer smaller than this element's displayed size, so the browser has to upscale it — image-rendering controls HOW that upscale looks. pixelated = chunky/blocky (the retro look); without a lower backing resolution this property alone would be a no-op, since nothing would actually be getting scaled up. */ image-rendering: pixelated; } .garabatos-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; max-width: 40rem; width: 100%; } .garabatos-controls label { font-size: 0.85rem; color: var(--muted, #ffffff); } /* Links to gallery/garabatos-fotos/ (the classic grid+lightbox view of these same drawings) — whole box is the , .garabatos-redirect is the heading inside it. */ .redirect-box { display: block; width: fit-content; margin: 2rem auto; padding: 0.75rem 1.5rem; border-radius: 16px; background: #000000; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); transition: box-shadow 0.2s ease, transform 0.2s ease; } .redirect-box:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); transform: translateY(-2px); } /* Was `.garabatos-redirect h1` — that only matches an h1 INSIDE an element carrying this class, but the class is on the h1 itself, so the gradient text never actually applied. Targeting the class directly fixes it. */ .garabatos-redirect { margin: 0; font-size: 1.1rem; background-image: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%); background-clip: text; -webkit-background-clip: text; color: transparent; } #artist-name { flex: 1 1 12rem; padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid var(--pill-border, #d8d6d1); background: var(--pill-bg, linear-gradient(90deg, rgba(255, 0, 0, 0.233) 0%, rgba(255, 153, 0, 0.227) 10%, rgba(210, 222, 33, 0.563) 20%, rgba(79, 220, 74, 0.538) 30%, rgba(63, 218, 215, 0.474) 40%, rgba(47, 202, 226, 0.671) 50%, rgba(28, 126, 238, 0.639) 60%, rgba(95, 21, 242, 0.633) 70%, rgba(185, 12, 248, 0.671) 80%, rgba(251, 7, 218, 0.582) 90%, rgba(255, 0, 0, 0.607) 100%)); color: var(--fg, #ffffff); font: inherit; } /* Browsers default placeholder text to a dim/grey tint of the input's own color — invisible-ish against this page's rainbow input background. Explicit white instead. */ #artist-name::placeholder { color: #ffffff; opacity: 1; } .garabatos-controls button { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--pill-border, #d8d6d1); background: var(--pill-bg, rgba(94, 255, 1, 0.55)); color: var(--fg, #7700ff); font: inherit; cursor: pointer; } .garabatos-save { background: var(--accent, #1a1a1a); color: var(--accent-fg, #fb01ff); border-color: transparent; } /* Wraps #save-btn + #save-status together as ONE flex item inside .garabatos-controls. Putting the status text directly in the flex row (even after the button) still moved the gallery section below: the row's max-width (40rem) is already tight with label+slider+clear+name+save, so any text added to it pushed the row over and triggered flex-wrap onto a second line, growing .garabatos-board's height. Taking #save-status out of flow entirely via position:absolute (anchored to this wrapper, which only sizes to the button) is the only way appearing/disappearing text truly can't move anything else on the page. */ .garabatos-save-wrap { position: relative; display: inline-flex; } .garabatos-status { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin: 0 0 0 0.75rem; font-size: 0.9rem; white-space: nowrap; color: var(--muted, #ff0303); pointer-events: none; } @media (max-width: 40rem) { /* left:100% would run off the right edge of narrow viewports, since the save button already sits near the row's own right edge there. Below and centered on the button instead avoids that clipping. */ .garabatos-status { left: 50%; top: 100%; transform: translateX(-50%); margin: 0.35rem 0 0; } } .garabatos-gallery { padding: 0 1.5rem 4rem; max-width: 60rem; margin: 0 auto; } .garabatos-gallery h2 { text-align: center; margin-bottom: 1.5rem; } .garabatos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; } .garabato-card { margin: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: linear-gradient(#5b5a5a, #070707) padding-box, linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%) border-box; ; } .garabato-card img { display: block; width: 100%; aspect-ratio: 640 / 400; object-fit: cover; image-rendering: pixelated; } .garabato-card figcaption { padding: 0.4rem 0.6rem; font-size: 0.8rem; color: var(--muted, #00ff0d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .garabatos-empty { grid-column: 1 / -1; text-align: center; color: var(--muted, #6b6b6b); } @media (max-width: 40rem) { /* The page's real title now, since the plain

was removed. No .garabatos-header padding-top override needed here anymore — the badge is a normal in-flow sibling above it (position:sticky), not an overlay that header needs to clear space for. / .retro-wordart { font-size: 3rem; } } / --- pv1: retro override --- is a shared custom element (libs/personal/site-chrome.js) used on index.html and pajaritos too — its own