/* ===== Themes — each one named after a gem, switchable via [data-theme] on ===== */ :root, [data-theme="sapphire"] { /* Sapphire (default) — crisp modern light, cool blue accent. */ --bg: #F3F6FC; --bg-soft: #E9F0FB; --card: #FFFFFF; --card-2: #EEF3FC; --line: #DCE6F5; --ink: #1B2A41; --muted: #5C7086; --accent: #2C5FE0; --accent-deep: #1A3FA6; --amber: #E8A93D; --danger: #D8434A; --ok: #2FA36B; --radius: 16px; --shadow: 0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent); --bg-gradient: radial-gradient(1200px 600px at 80% -10%, #E9F0FB 0%, var(--bg) 55%); --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent); --card-blur: none; } [data-theme="amethyst"] { /* Amethyst — bold, glassy, playful. Drifting gradient blobs (see body::before/after). */ --bg: #FBF5FF; --bg-soft: #F3E9FF; --card: color-mix(in srgb, #FFFFFF 80%, transparent); --card-2: #F3E4FF; --line: #E4D2FA; --ink: #341C54; --muted: #7C6291; --accent: #8B3FE0; --accent-deep: #6423B0; --amber: #E8A93D; --danger: #D8437A; --ok: #3FA37E; --radius: 18px; --shadow: 0 10px 30px color-mix(in srgb, var(--accent) 18%, transparent); --bg-gradient: radial-gradient(1100px 550px at 85% -10%, #F3E4FF 0%, transparent 60%), var(--bg); --topbar-bg: color-mix(in srgb, var(--bg) 78%, transparent); --card-blur: blur(14px); } [data-theme="onyx"] { /* Onyx — premium dark, glowing emerald accent. */ --bg: #0B0E14; --bg-soft: #131824; --card: #151B26; --card-2: #1C2432; --line: #2A3444; --ink: #E7ECF5; --muted: #8A97AC; --accent: #3DDC97; --accent-deep: #0F6B4A; --amber: #F0B84A; --danger: #F0524F; --ok: #4AE3A0; --radius: 16px; --shadow: 0 10px 30px rgba(0,0,0,.5); --bg-gradient: radial-gradient(1200px 600px at 80% -10%, #131824 0%, var(--bg) 55%); --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent); --card-blur: none; --glow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent); } [data-theme="ruby"] { /* Ruby — warm light, crimson accent, soft rounded cards. */ --bg: #FDF6F5; --bg-soft: #FBEAEA; --card: #FFFFFF; --card-2: #FCEDED; --line: #F1D6D8; --ink: #3A1A22; --muted: #8A606A; --accent: #D62246; --accent-deep: #A11133; --amber: #E0912D; --danger: #B3261E; --ok: #2FA36B; --radius: 20px; --shadow: 0 10px 28px color-mix(in srgb, var(--accent) 16%, transparent); --bg-gradient: radial-gradient(1150px 580px at 82% -10%, #FBE0E2 0%, var(--bg) 55%); --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent); --card-blur: none; } [data-theme="emerald"] { /* Emerald — crisp light green, sharper corners, gradient from the start side. */ --bg: #F2FBF6; --bg-soft: #E3F6EC; --card: #FFFFFF; --card-2: #E9F7EF; --line: #CBE8D6; --ink: #123329; --muted: #4C7A65; --accent: #067A55; --accent-deep: #04543B; --amber: #C9902A; --danger: #D8434A; --ok: #067A55; --radius: 12px; --shadow: 0 8px 24px color-mix(in srgb, var(--accent) 14%, transparent); --bg-gradient: radial-gradient(1150px 580px at 16% -10%, #DBF3E5 0%, var(--bg) 55%); --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent); --card-blur: none; } [data-theme="citrine"] { /* Citrine — honey-gold warm cream, deep amber accent. */ --bg: #FEFAEF; --bg-soft: #FBF1D8; --card: #FFFFFF; --card-2: #FCF3DD; --line: #EEDFBB; --ink: #3B2E12; --muted: #897548; --accent: #B07A0C; --accent-deep: #8A5E06; --amber: #E0A32E; --danger: #C4433F; --ok: #2FA36B; --radius: 14px; --shadow: 0 10px 26px color-mix(in srgb, var(--accent) 18%, transparent); --bg-gradient: radial-gradient(1120px 560px at 85% -10%, #FBEBC5 0%, var(--bg) 55%); --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent); --card-blur: none; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg-gradient); color: var(--ink); font-family: "Rubik", "Segoe UI", Arial, sans-serif; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; position: relative; transition: background-color .35s ease, color .35s ease; } /* Amethyst signature — two slow-drifting blurred blobs behind everything. */ [data-theme="amethyst"] body::before, [data-theme="amethyst"] body::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; animation: drift 22s ease-in-out infinite; } [data-theme="amethyst"] body::before { width: 480px; height: 480px; top: -120px; inset-inline-end: -100px; background: #D9B8FF; } [data-theme="amethyst"] body::after { width: 420px; height: 420px; bottom: -140px; inset-inline-start: -100px; background: #FFD1EC; animation-delay: -11s; } @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 25px) scale(1.06); } } @media (prefers-reduced-motion: reduce) { [data-theme="amethyst"] body::before, [data-theme="amethyst"] body::after { animation: none; } } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; width: 100%; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Topbar */ .topbar { border-bottom: 1px solid var(--line); background: var(--topbar-bg); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; transition: background-color .35s ease, border-color .35s ease; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; position: relative; } .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 20px; min-width: 0; flex: 1 1 auto; } .brand:hover { text-decoration: none; } .brand-gem { font-size: 24px; flex: none; } .brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav { display: flex; align-items: center; gap: 16px; } .nav-link { color: var(--muted); font-weight: 500; } .nav-link:hover { color: var(--ink); text-decoration: none; } .nav-link.muted { font-size: 14px; } .nav-user { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; } .avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); } .btn-ghost { border: 1px solid var(--accent-deep); color: var(--accent); padding: 7px 16px; border-radius: 10px; } .btn-ghost:hover { background: var(--accent-deep); color: #fff; text-decoration: none; } .nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--ink); font-size: 20px; line-height: 1; padding: 6px 12px; border-radius: 10px; cursor: pointer; } /* Flash */ .flashes { margin-top: 14px; } .flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 10px; font-weight: 500; } .flash-ok { background: color-mix(in srgb, var(--ok) 13%, transparent); border: 1px solid var(--ok); color: var(--ok); } .flash-error { background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid var(--danger); color: var(--danger); } main.wrap { flex: 1; padding-top: 24px; padding-bottom: 48px; } .footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; padding: 22px 0; text-align: center; } /* Hero / gallery header */ .hero { margin-bottom: 22px; } .hero h1 { font-size: 30px; margin: 0 0 6px; } .hero p { color: var(--muted); margin: 0; } /* Search + filters */ .filters { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 24px; } .filters-bar { display: flex; gap: 10px; align-items: center; } .filters-bar .field { flex: 1 1 auto; } .filters-advanced { display: none; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .filters-advanced.open { display: flex; } .filters-advanced .field { flex: 1 1 150px; } .field { display: flex; flex-direction: column; gap: 5px; } .field label { font-size: 13px; color: var(--muted); } .field.grow { flex: 1 1 220px; } input[type=text], input[type=email], select, textarea { background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 15px; width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } textarea { resize: vertical; min-height: 90px; } .btn { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-weight: 600; font-size: 15px; cursor: pointer; font-family: inherit; } .btn:hover { background: var(--accent-deep); } .btn.secondary { background: var(--card-2); color: var(--ink); border: 1px solid var(--line); } .btn.secondary:hover { background: var(--line); } .btn.danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); } .btn.danger:hover { background: var(--danger); color: #fff; } .btn.small { padding: 6px 12px; font-size: 13px; } /* Cards grid */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .card { background: var(--card); backdrop-filter: var(--card-blur); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .35s ease; cursor: pointer; } .card:hover { transform: translateY(-4px); border-color: var(--accent-deep); box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 20%, transparent); } .card h3 { margin: 0; font-size: 18px; } .card h3 a { color: var(--ink); } .card h3 a:hover { color: var(--accent); text-decoration: none; } .card .desc { color: var(--muted); font-size: 14px; flex: 1; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { background: var(--card-2); border: 1px solid var(--line); color: var(--muted); font-size: 12px; padding: 3px 10px; border-radius: 999px; } .chip.type { border-color: var(--accent-deep); color: var(--accent); } .card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .stars { color: var(--amber); font-size: 14px; letter-spacing: 1px; } .stars .count { color: var(--muted); margin-inline-start: 6px; } .fav-btn { background: none; border: none; cursor: pointer; font-size: 26px; color: var(--muted); line-height: 1; } .fav-btn.on { color: var(--danger); } .fav-btn-lg { font-size: 38px; } /* A visible caption next to the heart — a hover title alone is invisible on mobile, and sitting right next to the star rating read as related to it. */ .fav-wrap { display: inline-flex; align-items: center; gap: 5px; } .fav-caption { font-size: 11px; color: var(--muted); white-space: nowrap; } .empty { text-align: center; color: var(--muted); padding: 60px 20px; } /* Detail */ .detail-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; } .detail-head h1 { margin: 0 0 8px; font-size: 28px; } .meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .panel { background: var(--card); backdrop-filter: var(--card-blur); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 18px 0; transition: background-color .35s ease, border-color .35s ease; } .actions { display: flex; flex-wrap: wrap; gap: 12px; } .actions .btn { display: inline-flex; align-items: center; gap: 8px; } .prompt-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px; white-space: pre-wrap; font-size: 13.5px; max-height: 320px; overflow: auto; color: var(--ink); } .section-title { font-size: 20px; margin: 26px 0 12px; } .detail-desc { color: var(--muted); margin: 4px 0 0; font-size: 16px; } /* Detail — hero CTA */ .cta-panel { text-align: center; padding: 30px 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); } .btn.hero { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; padding: 16px 44px; border-radius: 12px; box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 32%, transparent); transition: transform .18s ease, box-shadow .18s ease, background-color .35s ease; animation: pulseGlow 2.6s ease-in-out infinite; } .btn.hero:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 42%, transparent); text-decoration: none; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 28%, transparent); } 50% { box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 46%, transparent); } } @media (prefers-reduced-motion: reduce) { .btn.hero { animation: none; } } .secondary-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; } .secondary-actions .btn { display: inline-flex; align-items: center; gap: 8px; } .share-link { margin: 20px 0 0; color: var(--muted); font-size: 14px; } /* Comment composer extras — emoji + GIF picker (WhatsApp-style) */ .composer-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; position: relative; } .emoji-picker, .gif-picker { display: none; position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 30; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 10px; } .emoji-picker.open { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; width: 260px; animation: menuIn .15s ease; } .emoji-opt { background: none; border: none; font-size: 20px; cursor: pointer; border-radius: 8px; padding: 4px; line-height: 1; font-family: inherit; } .emoji-opt:hover { background: var(--card-2); } .gif-picker.open { display: block; width: 280px; animation: menuIn .15s ease; } .gif-search { width: 100%; margin-bottom: 8px; } .gif-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: 240px; overflow-y: auto; } .gif-thumb { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); display: block; } .gif-thumb:hover { border-color: var(--accent-deep); } .gif-loading { grid-column: 1 / -1; color: var(--muted); font-size: 13px; text-align: center; padding: 24px 0; } .gif-preview { display: inline-flex; align-items: center; gap: 8px; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px; } .gif-preview img { height: 44px; border-radius: 6px; display: block; } .gif-remove { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 15px; padding: 2px; } .gif-remove:hover { color: var(--danger); } /* Recommended starter prompts (detail page) */ .prompt-list { display: flex; flex-direction: column; gap: 12px; } .prompt-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .prompt-card .prompt-text { color: var(--ink); font-size: 15px; white-space: pre-wrap; } .prompt-card .prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* Comments */ .comment { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--card); } .comment.reply { margin-inline-start: 28px; border-right: 3px solid var(--accent-deep); background: var(--card-2); } .comment-head { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 6px; } .comment-head .who { font-weight: 600; } .badge-admin { background: var(--accent-deep); color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: 700; } .comment .date { color: var(--muted); font-size: 12px; } .rating-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; font-size: 24px; } .rating-input input { display: none; } .rating-input label { cursor: pointer; color: var(--line); } .rating-input label:hover, .rating-input label:hover ~ label, .rating-input input:checked ~ label { color: var(--amber); } .comment-img { max-width: 260px; max-height: 260px; border-radius: 10px; border: 1px solid var(--line); margin-top: 8px; display: block; } .file-input { font-size: 13px; color: var(--muted); padding: 6px 8px; } .file-input::file-selector-button { background: var(--card-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-family: inherit; font-size: 13px; cursor: pointer; margin-inline-end: 10px; } .file-input::file-selector-button:hover { border-color: var(--accent-deep); } /* Gem requests — vote widget */ .request-row { display: flex; gap: 16px; align-items: flex-start; } .vote-widget { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; min-width: 40px; } .vote-btn { background: none; border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); font-size: 14px; } .vote-btn:hover { border-color: var(--accent-deep); color: var(--ink); } .vote-btn.up.on { color: var(--ok); border-color: var(--ok); } .vote-btn.down.on { color: var(--danger); border-color: var(--danger); } .vote-btn.disabled { opacity: .4; cursor: default; } .vote-score { font-weight: 700; font-size: 15px; } .request-body { flex: 1; min-width: 0; } .request-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Tables (admin) */ table { width: 100%; border-collapse: collapse; } th, td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; } th { color: var(--muted); font-weight: 600; } .status-pill { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); } .status-published { color: var(--ok); border-color: var(--ok); } .status-test { color: var(--accent); border-color: var(--accent-deep); } .status-draft { color: var(--amber); border-color: var(--amber); } .status-hidden { color: var(--muted); } .status-open { color: var(--amber); border-color: var(--amber); } .status-planned { color: var(--accent); border-color: var(--accent-deep); } .status-declined { color: var(--muted); } /* Multi-select checkbox list (e.g. subjects in the gem editor) */ .checkbox-list { display: flex; flex-wrap: wrap; gap: 8px; } .checkbox-item { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 14px; } .checkbox-item input { width: auto; } .checkbox-item:hover { border-color: var(--accent-deep); } .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 16px; margin: 18px 0; } .tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: center; } .tile .num { font-size: 34px; font-weight: 700; color: var(--accent); } .tile .lbl { color: var(--muted); font-size: 14px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-grid .full { grid-column: 1 / -1; } .login-card { max-width: 440px; margin: 60px auto; text-align: center; } .login-card .panel { padding: 32px; } .google-btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #202124; font-weight: 600; padding: 12px 22px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; font-size: 15px; } .google-btn:hover { background: #f1f3f4; text-decoration: none; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .detail-head h1 { font-size: 24px; } .brand { font-size: 16px; flex: 1 1 auto; } .brand-text { max-width: none; white-space: normal; } .nav-toggle { display: block; flex: none; } .nav { display: none; position: absolute; top: 100%; inset-inline: 0; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--bg-soft); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px 20px 16px; z-index: 30; } .nav.open { display: flex; } .nav-user { order: -1; } .theme-switcher { width: 100%; order: 5; } .theme-menu { position: static; width: 100%; min-width: 0; margin-top: 8px; box-shadow: none; background: var(--bg-soft); } } /* Onyx overrides — placed last so equal-specificity rules above lose the cascade. */ [data-theme="onyx"] .btn { background: var(--accent-deep); } [data-theme="onyx"] .btn:hover { background: var(--accent); color: #06150F; } [data-theme="onyx"] .btn:hover, [data-theme="onyx"] .card:hover, [data-theme="onyx"] .btn.hero:hover { box-shadow: var(--glow); } /* Theme switcher */ .theme-switcher { position: relative; } .theme-toggle { background: none; border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1; height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; transition: border-color .18s, background-color .18s; } .theme-toggle:hover { border-color: var(--accent-deep); background: var(--card-2); } .theme-menu { display: none; position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 40; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; min-width: 220px; } .theme-menu.open { display: block; animation: menuIn .18s ease; } @keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .theme-option { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; border-radius: 10px; padding: 8px 10px; cursor: pointer; font-family: inherit; text-align: right; } .theme-option:hover { background: var(--card-2); } .theme-option.active { background: var(--card-2); font-weight: 600; } .theme-swatch { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.08); } .theme-option .name { color: var(--ink); font-size: 14px; } .theme-option .desc { color: var(--muted); font-size: 12px; display: block; } /* Audience toggle (gallery) */ .audience-toggle { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .audience-pill { background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 999px; transition: all .15s ease; } .audience-pill:hover { border-color: var(--accent-deep); color: var(--ink); text-decoration: none; } .audience-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; } [data-theme="onyx"] .audience-pill.active { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; } .chip.audience-teachers { border-color: var(--accent-deep); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card-2)); } .chip.audience-students { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--card-2)); } /* Card entrance animation */ @keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .grid .card { animation: cardIn .5s ease both; } .grid .card:nth-child(1) { animation-delay: .02s; } .grid .card:nth-child(2) { animation-delay: .07s; } .grid .card:nth-child(3) { animation-delay: .12s; } .grid .card:nth-child(4) { animation-delay: .17s; } .grid .card:nth-child(5) { animation-delay: .22s; } .grid .card:nth-child(6) { animation-delay: .27s; } .grid .card:nth-child(7) { animation-delay: .32s; } .grid .card:nth-child(8) { animation-delay: .37s; } /* Micro-interactions */ .btn { transition: background-color .18s ease, color .18s ease, transform .1s ease, box-shadow .18s ease; } .btn:active { transform: scale(.96); } .fav-btn { transition: color .15s ease, transform .15s ease; } .fav-btn.pop { animation: favPop .4s ease; } @keyframes favPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .vote-btn { transition: all .15s ease; } .vote-btn:active { transform: scale(.9); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }