/* ═══════════════════════════════════════════════════════════════ style_index.css — Rainbow Coloring Pages Homepage Builds on style_responsive.css; add BOTH links in ═══════════════════════════════════════════════════════════════ */ /* ── Kill ads between type cards (only sidebar & page-bottom ads) */ .content .adsbygoogle, .content ins.adsbygoogle { display: none !important; } /* ══════════════════════════════════════════════════════════════ CARD CONTAINER — ensure card stretches to full content width ══════════════════════════════════════════════════════════════ */ .card-container { width: 100%; box-sizing: border-box; } /* ══════════════════════════════════════════════════════════════ CARD (header / body / footer layout) ══════════════════════════════════════════════════════════════ */ .card { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; /* More visible colored outline matching original site palette */ border: 2px solid #f0a500; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.13); background-color: #f5f5f5; } /* Header: compact, flat yellow — same character as original style_responsive */ .card-header { font-size: 0.88rem; font-weight: 700; padding: 4px 10px; background-color: #fdd835; border-bottom: 1px solid #e0a800; border-radius: 0; width: 100%; box-sizing: border-box; text-align: center; color: #3a2a00; line-height: 1.4; } .card-body { flex: 1; text-align: center; /* Minimal top padding — icons hug the header */ padding: 4px 4px 4px; background-color: #f5f5f5; } /* ── icons grid inside card-body ── */ .icons-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; padding: 2px; } .icon-wrapper { display: inline-flex; flex-direction: column; align-items: center; } /* ── subtype link: plain look matching original, underline only on hover ── */ a.subtype-link { display: inline-flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; text-decoration: none !important; color: #0645ad; } a.subtype-link:hover { text-decoration: underline !important; } a.subtype-link br { display: none !important; } /* Icon label: small, tight, same font style as original */ .subtype-name { display: block; margin-top: 2px; font-size: 0.72rem; line-height: 1.25; color: inherit; text-decoration: none; } /* ══════════════════════════════════════════════════════════════ CARD FOOTER — preview thumbnail strip, full width ══════════════════════════════════════════════════════════════ */ .card-footer { width: 100%; box-sizing: border-box; background: linear-gradient(180deg, #dce8f5 0%, #c9ddf0 100%); border-top: 2px solid #aac8e8; padding: 10px 12px 12px; text-align: center; } /* The flex row of thumbnail tiles — visible gap between each */ .card-footer-thumbs { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; } /* ══════════════════════════════════════════════════════════════ THUMBNAIL TILE — 6 across on wide, 5 across on narrow Wide (>600px): 6 tiles, 5 gaps x 10px = 50px -> (100%-50px)/6 Narrow (<=600px): 5 tiles, 4 gaps x 8px = 32px -> (100%-32px)/5 Slightly smaller than before so they breathe with the gap. ══════════════════════════════════════════════════════════════ */ .preview-thumb { flex: 0 0 calc((100% - 50px) / 6); width: calc((100% - 50px) / 6); aspect-ratio: 1 / 1; background-color: #fff; border-radius: 0.5rem; border: 1px solid #aaa; box-shadow: 1px 1px 2px #fff inset, 3px 3px 12px #bbb; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex-shrink: 0; position: relative; outline: 2px solid transparent; outline-offset: 2px; transition: transform 0.28s ease, box-shadow 0.28s ease; } /* Zoom + rainbow-glow on hover */ .preview-thumb:hover { transform: scale(1.10); animation: rainbowBorder 1.4s linear infinite; z-index: 2; } /* Rainbow border keyframe */ @keyframes rainbowBorder { 0% { box-shadow: 0 0 0 3px #ff4e50, 0 6px 22px rgba(80,100,200,0.25); } 14% { box-shadow: 0 0 0 3px #fc913a, 0 6px 22px rgba(80,100,200,0.25); } 28% { box-shadow: 0 0 0 3px #f9d423, 0 6px 22px rgba(80,100,200,0.25); } 42% { box-shadow: 0 0 0 3px #36d576, 0 6px 22px rgba(80,100,200,0.25); } 57% { box-shadow: 0 0 0 3px #1cb5e0, 0 6px 22px rgba(80,100,200,0.25); } 71% { box-shadow: 0 0 0 3px #6f42c1, 0 6px 22px rgba(80,100,200,0.25); } 85% { box-shadow: 0 0 0 3px #e040fb, 0 6px 22px rgba(80,100,200,0.25); } 100% { box-shadow: 0 0 0 3px #ff4e50, 0 6px 22px rgba(80,100,200,0.25); } } /* The inside each tile — no underline, no background */ .preview-thumb a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: none !important; background-image: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Image fits the tile without stretching */ .preview-thumb img { max-width: 90%; max-height: 90%; width: auto; height: auto; display: block; transition: transform 0.28s ease; pointer-events: none; } .preview-thumb:hover img { transform: scale(1.08); } /* ══════════════════════════════════════════════════════════════ MOBILE — 5 tiles per row on narrow screens ══════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { .card-footer-thumbs { gap: 8px; } .preview-thumb { flex: 0 0 calc((100% - 32px) / 5); width: calc((100% - 32px) / 5); } .card-footer { padding: 8px 6px 10px; } } /* ══════════════════════════════════════════════════════════════ MOBILE NEW-BOX — fix empty-space / broken layout ══════════════════════════════════════════════════════════════ */ #new-box .generic-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; } #new-box .generic-box > div:first-child { flex: 0 0 auto; } #new-box .thumbnail-adaptive { flex: 0 0 auto; } /* ══════════════════════════════════════════════════════════════ RANDOM-BUTTON two-line label ══════════════════════════════════════════════════════════════ */ .random-label { display: flex; flex-direction: column; align-items: center; text-align: center; word-break: break-word; line-height: 1.3; } .random-label span { display: block; } /* ══════════════════════════════════════════════════════════════ OLD preview-strip classes — neutralised (keep HTML safe) ══════════════════════════════════════════════════════════════ */ .preview-strip { display: contents; } .preview-strip-label { display: none; } .preview-strip-thumbs { display: contents; } .strip-thumb { display: contents; }