@charset "UTF-8"; /* ============================================================================ SCSS: High-tech (default) = BLACK TEXT on WHITE BACKGROUNDS Creative layout (body.creative-layout) = your original colors --------------------------------------------------------------------------- HOW TO EDIT: - High-tech (default): edit the base rules (no body class). - When you explicitly use , the duplicate .high-tech-layout overrides below keep it black/white as well. - Creative: override colors inside body.creative-layout { ... } only. - Do NOT use body:not(.creative-layout). ============================================================================ */ /* ---------------- Base reset ---------------- */ * { margin: 0; /* padding: 0; */ box-sizing: border-box; } /* ---------------- palette --------- */ .neon { background-color: #4bd675 !important; color: inherit !important; } .lgreen { background-color: #43ab91 !important; color: inherit !important; } .mgreen { background-color: #335e50 !important; color: inherit !important; } .dgreen { background-color: #1c302e !important; color: inherit !important; } .dblue { background-color: #061426 !important; color: inherit !important; } .mblue { background-color: #57d4d0 !important; color: inherit !important; } .lblue { background-color: #abfbff !important; color: inherit !important; } /* ============================================================================ Responsive animation block - Default (High-tech): plain black/white - Creative: restores original color accents where they existed ============================================================================ */ #responsiveAnimation { position: relative; height: 38em; /* Maximum height during animation */ /* Layout helpers */ /* keep black dotted */ /* Default High-tech: black accent instead of green */ /* Content cells animate spacing only; keep them B/W */ /* ---------------- keyframes (unchanged timing) ---------------- */ } #responsiveAnimation .center { margin: auto; } #responsiveAnimation .border { border: 3px dotted #000; } #responsiveAnimation .wrap { height: 100vh; width: 100vw; padding: 3em; } #responsiveAnimation .outside { width: 6.5em; height: 13em; padding: 0.75em 0 0.625em; display: flex; flex-direction: column; justify-content: space-between; align-items: center; animation: outside 5s ease-in-out infinite; position: relative; /* ---------- this font size controls the size of the graphic --------- */ font-size: 2vw; } #responsiveAnimation .screen { width: 5.25em; height: 10.5em; padding: 0.5em; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); overflow: hidden; animation: screen 5s ease-in-out infinite; /* B/W frame */ border: 1px solid #000; /* thin black outline (optional) */ } #responsiveAnimation .button { width: 1em; height: 0.5em; animation: button 5s ease-in-out infinite; background: #000; /* black “button” */ } #responsiveAnimation .stand { position: absolute; height: 2em; width: 2em; bottom: -2em; transform-origin: top; transform: rotateX(90deg); animation: stand 5s ease-in-out infinite; } #responsiveAnimation .stand:after { content: ""; border-top: 1.5em solid #000; /* was #1c302e */ border-bottom: 2em solid transparent; border-radius: 50%; position: absolute; width: 8em; bottom: -3em; right: -3em; } #responsiveAnimation .content:nth-child(1) { animation: content1 5s ease-in-out infinite; grid-column: span 4; margin-bottom: 0.25em; } #responsiveAnimation .content:nth-child(2) { animation: content2 5s ease-in-out infinite; margin: 0.25em 0 0.25em 0; } #responsiveAnimation .content:nth-child(3) { animation: content3 5s ease-in-out infinite; margin: 0.25em 0 0.25em 0; } #responsiveAnimation .content:nth-child(4) { animation: content4 5s ease-in-out infinite; margin: 0.25em 0 0.25em 0; } #responsiveAnimation .content:nth-child(5) { animation: content5 5s ease-in-out infinite; margin: 0.25em 0 0.25em 0; } #responsiveAnimation .content:nth-child(6) { animation: content6 5s ease-in-out infinite; margin: 0.25em 0 0.25em 0; } #responsiveAnimation .content:nth-child(7) { animation: content7 5s ease-in-out infinite; margin: 0.25em 0 0.25em 0; } #responsiveAnimation .content:nth-child(8) { animation: content8 5s ease-in-out infinite; margin: 0.25em 0 0.25em 0; } #responsiveAnimation .content:nth-child(9) { animation: content9 5s ease-in-out infinite; margin: 0.25em 0 0 0; } #responsiveAnimation .content:nth-child(10) { animation: content10 5s ease-in-out infinite; margin-top: 0.25em; grid-column: span 2; } #responsiveAnimation .content:nth-child(11) { animation: content11 5s ease-in-out infinite; grid-column: span 2; margin-top: 0.25em; } @keyframes outside { 0%, 20%, 100% { width: 6.5em; height: 13em; } 30%, 50% { width: 12em; height: 15em; } 60%, 80% { width: 22em; height: 15em; } } @keyframes screen { 0%, 20%, 100% { width: 5.25em; height: 10.5em; } 30%, 50% { width: 10.5em; height: 12.5em; } 60%, 80% { width: 20.5em; height: 13.5em; } } @keyframes button { 0%, 20%, 100% { width: 1em; height: 0.5em; transform: translate(0); } 30%, 50% { width: 1em; height: 0.5em; transform: translate(0); } 60%, 80% { width: 1em; height: 0.25em; transform: translate(0, 0.3em); } } @keyframes stand { 0%, 20%, 90%, 100% { transform: rotateX(90deg); } 30%, 50% { transform: rotateX(90deg); } 60%, 80% { transform: rotateX(0deg); } } @keyframes content1 { 0%, 20%, 100% { margin-bottom: 0.25em; } 30%, 50% { margin-bottom: 0.25em; } 60%, 80% { margin-bottom: 0.25em; } } @keyframes content2 { 0%, 20%, 100% { margin: 0.25em 0; } 30%, 55% { margin: 0.25em 0; margin-right: 0; } 60%, 80% { margin: 0.25em 0; margin-right: 0.25em; } } @keyframes content3 { 0%, 20%, 100% { margin: 0.25em 0; margin-right: 0; } 30%, 50% { margin: 0.25em 0; margin-right: 0.25em; margin-left: 0; } 60%, 80% { margin: 0.25em 0; margin-right: 0.25em; margin-left: 0.25em; } } @keyframes content4 { 0%, 20%, 100% { margin: 0.25em 0 0.25em 0; } 30%, 50% { margin: 0 0 0.25em 0.25em; } 60%, 80% { margin: 0.25em 0.5em 0.25em 0.25em; } } @keyframes content5 { 0%, 20%, 100% { margin: 0.25em 0; } 30%, 50% { margin: 0 0 0.25em 0; } 60%, 80% { margin: 0 0 0.25em 0; } } @keyframes content6 { 0%, 20%, 100% { margin: 0.25em 0; } 30%, 50% { margin: 0.25em 0; margin-right: 0; } 60%, 80% { margin: 0.25em 0; margin-right: 0.25em; } } @keyframes content7 { 0%, 20%, 100% { margin: 0.25em 0; margin-right: 0; } 30%, 50% { margin: 0.25em 0; margin-right: 0.25em; margin-left: 0; } 60%, 80% { margin: 0.25em 0; margin-right: 0.25em; margin-left: 0.25em; } } @keyframes content8 { 0%, 20%, 100% { margin: 0.25em 0 0.25em 0; } 30%, 50% { margin: 0 0 0 0.25em; } 60%, 80% { margin: 0.25em 0.5em 0.25em 0.25em; } } @keyframes content9 { 0%, 20%, 100% { margin: 0.25em 0; } 30%, 50% { margin: 0 0 0 0; } 60%, 80% { margin: 0.25em 0 0 0; } } @keyframes content10 { 0%, 20%, 100% { margin-top: 0.25em; margin-right: 0; } 30%, 50% { margin-top: 0.25em; margin-right: 0.25em; } 60%, 80% { margin-top: 0.25em; margin-right: 0; } } @keyframes content11 { 0%, 20%, 100% { margin-top: 0.25em; margin-left: 0; } 30%, 50% { margin-top: 0; margin-left: 0.25em; } 60%, 80% { margin-top: 0.25em; margin-left: 0; } } /* Creative-only overrides for this block (restoring the one colored piece) */ body.creative-layout #responsiveAnimation .stand:after { border-top: 1.5em solid #1c302e; /* original green accent for Creative */ } body.creative-layout #responsiveAnimation .screen { border-color: #000; /* outline ok in creative too */ } /* ---------------- Responsive heights (unchanged) ---------------- */ @media (max-width: 575.98px) { #responsiveAnimation { position: relative; height: 14em; margin-top: 5%; } } @media (min-width: 576px) and (max-width: 767.98px) { #responsiveAnimation { position: relative; height: 14em; margin-top: 5%; } } @media (min-width: 768px) and (max-width: 991.98px) { #responsiveAnimation { position: relative; height: 24em; } } @media (min-width: 992px) and (max-width: 1199.98px) { #responsiveAnimation { position: relative; height: 24em; } } @media (min-width: 1200px) { #responsiveAnimation { position: relative; height: 36em; } }/*# sourceMappingURL=responsive-animation.css.map */