/* FriendFind theme — "Girly Pop mode" (soft pastel pink) and "Goth Babe mode" (dark, punkier) via data-theme on . */ :root, [data-theme="melody"] { --bg: #fdeef5; --bg-soft: #fbdaea; --card: #fffafd; --ink: #5b3a5e; --ink-soft: #9b7ba0; --accent: #f48fb9; --accent-strong: #ec6ba4; --accent-ink: #fff; --lavender: #cbb3e6; --border: #f6c8dd; --danger: #d9548a; --charm-a: #f48fb9; --charm-b: #8d6cb8; --charm-hi: #ffffff; --shadow: 0 4px 14px rgba(236, 107, 164, .18); } [data-theme="kuromi"] { --bg: #1c1424; --bg-soft: #2a1d38; --card: #251a31; --ink: #f2e6ff; --ink-soft: #b49cc9; --accent: #a06ae0; --accent-strong: #b985f0; --accent-ink: #1c1424; --lavender: #6d4a99; --border: #43305c; --danger: #ff6fa5; --charm-a: #b985f0; --charm-b: #ff8fc0; --charm-hi: #2a1d38; --shadow: 0 4px 16px rgba(0, 0, 0, .45); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); background-image: radial-gradient(var(--bg-soft) 1.5px, transparent 1.5px); background-size: 26px 26px; color: var(--ink); font-family: "Quicksand", "Trebuchet MS", sans-serif; min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, .logo, .btn { font-family: "Baloo 2", "Comic Sans MS", cursive; } h1 { font-size: 1.9rem; margin: .4em 0; } h2 { font-size: 1.25rem; } a { color: var(--accent-strong); } code { background: var(--bg-soft); padding: .1em .35em; border-radius: 8px; word-break: break-all; } .topbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .7rem 1.2rem; background: var(--card); border-bottom: 2px solid var(--border); box-shadow: var(--shadow); } .logo { font-size: 1.4rem; font-weight: 700; text-decoration: none; color: var(--ink); } .nav { display: flex; gap: .9rem; flex-wrap: wrap; } .nav a { text-decoration: none; font-weight: 600; color: var(--ink-soft); padding: .2rem .5rem; border-radius: 999px; } .nav a:hover { color: var(--accent-strong); background: var(--bg-soft); } .nav-alert { color: var(--danger) !important; } .nav-alert::after { content: " ♥"; } .topbar-right { margin-left: auto; display: flex; gap: .6rem; align-items: center; } .theme-toggle { border: 2px solid var(--border); background: var(--bg-soft); color: var(--ink); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; font-weight: 600; font-family: inherit; } [data-theme="melody"] .mode-melody { display: none; } [data-theme="kuromi"] .mode-kuromi { display: none; } .page { flex: 1; width: min(880px, 94vw); margin: 1.4rem auto; } .footer { text-align: center; color: var(--ink-soft); padding: 1.2rem; font-size: .85rem; } .kofi-link { color: var(--accent-strong); font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--accent); padding-bottom: 1px; } .kofi-link:hover { color: var(--accent); border-bottom-style: solid; } .card { background: var(--card); border: 2px solid var(--border); border-radius: 22px; padding: 1.2rem 1.4rem; margin: 1rem 0; box-shadow: var(--shadow); } .card-narrow { max-width: 460px; margin: 2rem auto; } label { display: block; margin: .8rem 0; font-weight: 600; } input[type=text], input[type=email], input[type=password], select, textarea { display: block; width: 100%; margin-top: .3rem; padding: .55rem .8rem; border: 2px solid var(--border); border-radius: 14px; font-family: inherit; font-size: 1rem; background: var(--bg); color: var(--ink); } input:focus, select:focus { outline: none; border-color: var(--accent); } .check { font-weight: 500; } .check input { margin-right: .5rem; accent-color: var(--accent-strong); } .btn { display: inline-block; border: 2px solid var(--accent-strong); background: var(--card); color: var(--accent-strong); border-radius: 999px; padding: .45rem 1.1rem; font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; position: relative; } .btn-primary { background: var(--accent-strong); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent); border-color: var(--accent); } .btn-ghost { border-color: var(--border); color: var(--ink-soft); background: transparent; } .btn-small { padding: .2rem .7rem; font-size: .85rem; } .btn-big { font-size: 1.35rem; padding: .8rem 1.8rem; } .btn-danger { border-color: var(--danger); color: var(--danger); background: var(--card); } .btn-danger:hover { background: var(--danger); color: var(--card); } .inline { display: inline; } .hint, .muted { color: var(--ink-soft); font-size: .88rem; font-weight: 500; } .lede { color: var(--ink-soft); font-weight: 500; } .flash { border-radius: 16px; padding: .7rem 1rem; margin: .6rem 0; font-weight: 600; border: 2px solid var(--border); background: var(--card); } .flash-success { border-color: var(--accent); } .flash-error { border-color: var(--danger); color: var(--danger); } .banner-muted { background: var(--bg-soft); border-bottom: 2px solid var(--border); padding: .6rem 1.2rem; text-align: center; font-weight: 600; } .table { width: 100%; border-collapse: collapse; } .table th, .table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--border); } .table th { color: var(--ink-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; } .tag { border-radius: 999px; padding: .1rem .6rem; font-size: .78rem; font-weight: 700; background: var(--bg-soft); color: var(--ink-soft); white-space: nowrap; } .tag-verified { background: var(--accent); color: var(--accent-ink); } .tag-pending { background: var(--lavender); color: var(--card); } .tag-muted { background: var(--bg-soft); } .tag-add { background: var(--accent); color: var(--accent-ink); } .tag-vouch { background: var(--lavender); color: var(--card); } .tag-remove, .tag-edit { background: var(--bg-soft); color: var(--ink-soft); } .tag-admin { background: var(--ink); color: var(--card); border: 1px solid var(--accent-strong); } .platform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; margin: 1.2rem 0; } .platform-card { display: flex; flex-direction: column; align-items: center; gap: .25rem; background: var(--card); border: 2px solid var(--border); border-radius: 20px; padding: 1rem .6rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .15s ease; } .platform-card:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--accent); } .platform-empty { opacity: .55; } .platform-card-name { font-weight: 700; font-family: "Baloo 2", cursive; } .platform-card-count { font-size: .8rem; color: var(--ink-soft); } .handle-list, .vouch-list, .member-list { list-style: none; padding: 0; margin: 0; } .handle-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .2rem; border-bottom: 1px dashed var(--border); flex-wrap: wrap; } .handle-row:last-child { border-bottom: none; } .handle-username { color: var(--accent-strong); font-weight: 700; margin: 0 .4rem; } .vouch-list li, .member-list li { padding: .45rem 0; border-bottom: 1px dashed var(--border); } .member-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; } .vouch-list li:last-child, .member-list li:last-child { border-bottom: none; } .charm { vertical-align: middle; } .handle-link { text-decoration: none; border-bottom: 1px dashed var(--accent); } .handle-link:hover { border-bottom-style: solid; } /* "no profile link" tooltip — shows on hover AND on focus, so a tap on touch screens (focusing the tabindex'd icon) opens it too */ .info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: .3rem; border-radius: 50%; background: var(--bg-soft); color: var(--ink-soft); font-size: .8rem; border: 1px solid var(--border); cursor: help; vertical-align: middle; } .info-tip::after { content: attr(data-tip); position: absolute; bottom: 135%; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--card); padding: .5rem .75rem; border-radius: 12px; font-size: .78rem; font-weight: 500; width: max-content; max-width: min(230px, 78vw); white-space: normal; text-align: center; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 6; } .info-tip:hover::after, .info-tip:focus::after { opacity: 1; } .info-tip:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .logo-img { width: 30px; height: 30px; vertical-align: -7px; } .brand-block { text-align: center; margin-bottom: 1rem; } .brand-logo { width: 72px; height: 72px; } .brand-block h1 { margin: .15em 0 .1em; } .tagline { color: var(--ink-soft); font-weight: 600; font-size: 1.02rem; margin: 0 0 .4rem; font-family: "Baloo 2", cursive; } .invite-choice { text-align: center; } .invite-choice-lede { font-weight: 600; margin-top: 0; } .invite-options { display: flex; flex-direction: column; align-items: center; gap: .5rem; } .invite-option { font-weight: 600; } .invite-or { color: var(--ink-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; } .handle-pair { display: flex; gap: .5rem; } .handle-pair select { flex: 0 1 45%; } .handle-pair input { flex: 1; } .handle-pair select, .handle-pair input { margin-top: .3rem; } .qr-box { display: flex; justify-content: center; padding: .8rem; background: #fff; border-radius: 16px; border: 2px solid var(--border); } .checkin-card { text-align: center; } .burst-stage { position: relative; height: 0; } /* sparkle micro-animation on hover / success */ .sparkle-hover::after { content: "✦"; position: absolute; top: -.55em; right: -.35em; font-size: .8em; opacity: 0; transform: scale(.3) rotate(0deg); transition: opacity .18s ease, transform .3s ease; pointer-events: none; color: var(--accent-strong); text-shadow: 0 0 6px var(--accent); } .sparkle-hover { position: relative; } .sparkle-hover:hover::after { opacity: 1; transform: scale(1.15) rotate(24deg); } @keyframes burst-float { 0% { transform: translate(0, 0) scale(.4) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(var(--rot)); opacity: 0; } } .burst-particle { position: absolute; left: 50%; top: 0; font-size: 1.4rem; pointer-events: none; animation: burst-float 1.2s ease-out forwards; } @keyframes flash-pop { from { transform: scale(.96); } to { transform: scale(1); } } .flash { animation: flash-pop .25s ease; } /* ============ responsive / mobile ============ */ /* hamburger hidden on wide screens */ .nav-toggle { display: none; border: 2px solid var(--border); background: var(--bg-soft); color: var(--ink); border-radius: 14px; padding: .4rem .9rem; cursor: pointer; font-family: "Baloo 2", cursive; font-size: 1rem; font-weight: 700; min-height: 44px; } /* comfortable touch targets on touch devices, regardless of screen size */ @media (pointer: coarse) { .btn { min-height: 44px; padding-top: .55rem; padding-bottom: .55rem; } .btn-small { min-height: 40px; padding: .45rem .9rem; } .nav a { padding: .5rem .7rem; } .theme-toggle { min-height: 44px; } .info-tip { width: 30px; height: 30px; font-size: .95rem; } .check input, input[type=checkbox] { width: 1.25rem; height: 1.25rem; } .handle-row, .member-row { row-gap: .5rem; } } @media (max-width: 780px) { .topbar { padding: .6rem .9rem; gap: .6rem; } .nav-toggle { display: inline-block; } .nav { display: none; } .nav.nav-open { display: flex; flex-direction: column; align-items: stretch; order: 10; width: 100%; gap: .15rem; padding-top: .4rem; border-top: 1px dashed var(--border); } .nav.nav-open a { padding: .8rem .6rem; border-radius: 12px; font-size: 1.05rem; min-height: 44px; display: flex; align-items: center; } .topbar-right { margin-left: auto; } h1 { font-size: 1.55rem; } .page { margin-top: 1rem; } .card { padding: 1rem; border-radius: 18px; } .card-narrow { margin: 1rem auto; } /* wide tables (invites, audit, admin) scroll inside themselves instead of forcing the page to scroll horizontally */ .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .platform-grid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: .7rem; } /* stacked rows: info on top, actions below, full-width tap area */ .handle-row { flex-direction: column; align-items: flex-start; } .handle-row > div:last-child { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; } .member-row { align-items: flex-start; } .vouch-list li form { display: block; margin-top: .4rem; } .btn-big { font-size: 1.2rem; width: 100%; } .flash { font-size: .95rem; } } @media (max-width: 400px) { .platform-grid { grid-template-columns: 1fr 1fr; } .logo { font-size: 1.2rem; } .logo-img { width: 26px; height: 26px; vertical-align: -6px; } .brand-logo { width: 60px; height: 60px; } .handle-pair { flex-direction: column; gap: 0; } }