/* --- RESET & FONTS --- */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #FFFDF3; /* Soft cream background */ color: #333333; line-height: 1.6; padding: 4rem 2rem; /*background pattern from https://pattern.monster/terrazzo-1*/ background-image: url("data:image/svg+xml,"); } /* --- LAYOUT CONTAINER --- */ .container { max-width: 700px; margin: 0 auto; } /* --- HEADER SECTION --- */ header { text-align: center; margin-bottom: 5rem; /* Generous whitespace */ } .word-keep-together { display: inline-block; white-space: nowrap; /* Prevents letters within this word from breaking lines */ margin-right: 0.3em; /* Adds a clean, scalable space between words */ } .swaying-retro-title { font-family: 'Arial Black', Impact, sans-serif; font-size: 4rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin: 20px 0; } .swaying-retro-title span span { display: inline-block; color: #FFFFFF; /* Crisp white text */ -webkit-text-stroke: 2px #1d1e2c; /* Dark outline boundary */ text-shadow: 2px 2px 0px #FF5A5F, 4px 4px 0px #FFD166, 6px 6px 0px #06D6A0; transform-origin: bottom center; animation: gentle-sway 3.5s ease-in-out infinite alternate; } /* The Gentle Sway Loop */ @keyframes gentle-sway { 0% { transform: rotate(-3deg) translateY(0); } 100% { transform: rotate(3deg) translateY(-3px); } } /* Staggering the letters to create a beautiful wave ripple effect */ .swaying-retro-title span:nth-child(1) { animation-delay: 0.0s; } .swaying-retro-title span:nth-child(2) { animation-delay: 0.15s; } .swaying-retro-title span:nth-child(3) { animation-delay: 0.3s; } .swaying-retro-title span:nth-child(4) { animation-delay: 0.45s; } .swaying-retro-title span:nth-child(5) { animation-delay: 0.6s; } .swaying-retro-title span:nth-child(6) { animation-delay: 0.75s; } /* Space */ .swaying-retro-title span:nth-child(7) { animation-delay: 0.9s; } .swaying-retro-title span:nth-child(8) { animation-delay: 1.05s; } .swaying-retro-title span:nth-child(9) { animation-delay: 1.2s; } /* Space */ .swaying-retro-title span:nth-child(10) { animation-delay: 1.35s; } .swaying-retro-title span:nth-child(11) { animation-delay: 1.5s; } .swaying-retro-title span:nth-child(12) { animation-delay: 1.65s; } .swaying-retro-title span:nth-child(13) { animation-delay: 1.8s; } /* Space */ .swaying-retro-title span:nth-child(14) { animation-delay: 1.95s; } .swaying-retro-title span:nth-child(15) { animation-delay: 2.1s; } .swaying-retro-title span:nth-child(16) { animation-delay: 2.25s; } .swaying-retro-title span:nth-child(17) { animation-delay: 2.4s; } header p { background: #fefdf5; padding: 2rem; border-radius: 20px; border: 10px double pink; } .subtitle { font-size: 1.2rem; color: #666666; max-width: 500px; margin: 0 auto; } /* --- FILTER --- */ .filter-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 3rem; } /* Hide the actual radio inputs completely */ input[type="radio"].filter-radio { display: none; } /* Style the labels */ .filter-label { background-color: #E7F6FA; color: #118AB2; border: 2px solid #118AB2; padding: 0.4rem 1.0rem; font-size: 0.9rem; font-weight: bold; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; user-select: none; } .filter-label:hover { transform: translateY(-2px); } /* --- CSS FILTER LOGIC --- */ /* If "Team" is checked, hide any accordion that does not contain the word 'team' */ #filter-team:checked ~ .accordion-wrapper details:not([data-category~="team"]), #filter-small:checked ~ .accordion-wrapper details:not([data-category~="small"]), #filter-active:checked ~ .accordion-wrapper details:not([data-category~="active"]), #filter-calm:checked ~ .accordion-wrapper details:not([data-category~="calm"]), #filter-names:checked ~ .accordion-wrapper details:not([data-category~="names"]), #filter-big:checked ~ .accordion-wrapper details:not([data-category~="big"]), #filter-starters:checked ~ .accordion-wrapper details:not([data-category~="starters"]), #filter-equipment:checked ~ .accordion-wrapper details:not([data-category~="equipment"]), #filter-accessible:checked ~ .accordion-wrapper details:not([data-category~="accessible"]) { display: none; } /* Style the label tied to the currently checked radio button */ #filter-all:checked ~ .filter-container label[for="filter-all"], #filter-team:checked ~ .filter-container label[for="filter-team"], #filter-small:checked ~ .filter-container label[for="filter-small"], #filter-active:checked ~ .filter-container label[for="filter-active"], #filter-calm:checked ~ .filter-container label[for="filter-calm"], #filter-names:checked ~ .filter-container label[for="filter-names"], #filter-big:checked ~ .filter-container label[for="filter-big"], #filter-starters:checked ~ .filter-container label[for="filter-starters"], #filter-equipment:checked ~ .filter-container label[for="filter-equipment"], #filter-accessible:checked ~ .filter-container label[for="filter-accessible"] { background-color: #118AB2; color: white; box-shadow: 0 4px 0px #0A5873; transform: translateY(-2px); } /* --- ACCORDION STYLES --- */ .accordion-wrapper { display: flex; flex-direction: column; gap: 2rem; /* Space between each accordion */ } details { background-color: #FFFFFF; border: 3px solid #FFD166; /* Sunny yellow border */ border-radius: 16px; overflow: hidden; box-shadow: 0 8px 0px #FFD166; /* Fun, blocky shadow effect */ transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Subtle lift effect when open */ details[open] { transform: translateY(-4px); box-shadow: 0 12px 0px #FFD166; } summary { list-style: none; padding: 1.5rem 2rem; font-size: 1.5rem; font-weight: 900; color: #06D6A0; /* Bright mint green */ cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; outline: none; } /* Custom indicator arrow */ summary::after { content: '(-:>'; display: inline-block; transition: transform 0.5s ease; transform: rotate(90deg); color: #FF5A5F; } details[open] summary::after { transform: rotate(-450deg); } /* --- ACCORDION CONTENT --- */ .content { display: flex; flex-direction: column; padding: 0 2rem 2rem 2rem; border-top: 2px dashed #FFEBB7; background-color: #FAFAFA; } .content h2 { color: #118AB2; /* Sky blue */ margin: 1.5rem 0 1rem 0; font-size: 1.8rem; } .meta-info { background-color: #D8F0F7; padding: 1rem; border-radius: 8px; margin: 1.5rem 0 1.5rem 0; } .meta-info p { margin-bottom: 0.5rem; } .meta-info p:last-child { margin-bottom: 0; } .content h3 { color: #FF5A5F; margin: 1.5rem 0 0.5rem 0; font-size: 1.3rem; } .content ul { padding-left: 1.5rem; margin-bottom: 1.5rem; } .content li { margin-bottom: 0.5rem; } /* --- CLOSE BUTTON --- */ .close-btn { display: block; align-self: flex-end; margin-top: 2rem; background-color: #118AB2; color: white; border: none; padding: 0.4rem 0.9rem; font-size: 1rem; font-weight: bold; border-radius: 25px; cursor: pointer; box-shadow: 0 4px 0 #0A5873; transition: all 0.1s ease; } .close-btn:active { transform: translateY(4px); box-shadow: 0 0px 0 #00ced1; } /* --- FOOTER SECTION --- */ footer { text-align: center; margin: 5rem 0 5rem 0; /* Generous whitespace */ } footer .contact { background: #fefdf5; padding: 2rem; border-radius: 20px; border: 10px double pink; margin: 3rem auto; font-size: 1.2rem; color: #666666; max-width: 500px; } #email-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); height: fit-content; grid-row-gap: 0%; grid-column-gap: 5%; width: fit-content; justify-content: center; margin: 2rem auto; } .email { grid-column: 1/4; grid-row: 1/2; } .email span:nth-child(2) { display: none; } #copy-button { background-color: #118AB2; color: white; border: none; padding: 0.4rem 0.9rem; font-size: 1rem; font-weight: bold; border-radius: 25px; cursor: pointer; box-shadow: 0 4px 0 #0A5873; transition: all 0.1s ease; } #copy-button:active { transform: translateY(4px); box-shadow: 0 0px 0 #00ced1; } #copy-status-left { border-radius: 5px; padding: 5px; transition: background-color 0.5s ease, opacity 0.5s ease; grid-column: 1/2; grid-row: 2/3; font-family: sans-serif; align-self: center; color: #FF5964; } #copy-status-right { border-radius: 5px; padding: 5px; transition: background-color 0.5s ease, opacity 0.5s ease; grid-column: 3/4; grid-row: 2/3; font-family: sans-serif; align-self: center; color: #FF5964; } #copy-status-left.visible, #copy-status-right.visible { opacity: 1; } #copy-status-left:not(.visible), #copy-status-right:not(.visible) { opacity: 0; } /* The "Yay!" Text Base */ .yay-burst { display: inline-block; cursor: pointer; font-size: 4rem; font-weight: 900; text-transform: uppercase; font-family: 'Arial Black', sans-serif; letter-spacing: 2px; color: #FF5A5F; /* Fun summery coral */ position: relative; /* Necessary to anchor the confetti */ transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); user-select: none; /* Prevents text highlighting on mobile double-taps */ -webkit-tap-highlight-color: transparent; /* Removes the ugly mobile blue box */ -webkit-text-stroke: 1px #1d1e2c; /* The 3D Layering Magic */ text-shadow: 1px 1px 0px #FF5964, /* Layer 1: Coral / Neon Pink */ 2px 2px 0px #FF5964, 3px 3px 0px #35A7FF, /* Layer 2: Summer Sky Blue */ 4px 4px 0px #35A7FF, 5px 5px 0px #35A7FF, 6px 6px 0px #FFE74C, /* Layer 3: Sunshine Yellow */ 7px 7px 0px #FFE74C, 8px 8px 0px #FFE74C, 9px 9px 0px #FFE74C, 10px 10px 12px rgba(0, 0, 0, 0.3); /* Final Layer: Soft drop shadow for depth */ } /* 1. Desktop Hover + Mobile Tap: The Text Squishes and Pops */ .yay-burst:hover, .yay-burst:active { transform: scale(1.3) rotate(5deg); color: #06D6A0; /* Flashes to a fun mint green */ } /* 2. The Confetti Magic (Invisible by default) */ .yay-burst::before { content: ''; position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; /* Keeps it from blocking clicks */ /* Creating 4 tiny colorful confetti squares using a multi-layered box-shadow */ border-radius: 2px; box-shadow: -30px -20px 0 #FFD166, /* Top Left Gold */ 30px -25px 0 #35A7FF, /* Top Right Blue */ -25px 25px 0 #FF5A5F, /* Bottom Left Coral */ 35px 20px 0 #06D6A0; /* Bottom Right Mint */ width: 6px; height: 6px; } /* 3. Triggering the Confetti Burst on Hover/Active */ .yay-burst:hover::before, .yay-burst:active::before { animation: confetti-explode 0.4s ease-out forwards; } /* The Confetti Explosion Animation */ @keyframes confetti-explode { 0% { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 0; } 50% { opacity: 1; /* Fade in quickly as they fly out */ } 100% { transform: translate(-50%, -50%) scale(1.4) rotate(45deg); opacity: 0; /* Fade out at the end of the jump */ } } .link-belt { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; font-size: 1rem; text-decoration: none; width: 100%; gap: 2.5em 1em; } .link-belt a { flex: 1; margin-top: 1.5rem; text-decoration: none; color: rgb(72, 70, 70); min-width: 200px; } #neocities-link { display: flex; flex-direction: column; align-content: flex-start; justify-content: left; width: 100%; flex: 1; } #kofi-link img { max-width: 100%; height: auto; }