/* CardChan — "Sticker Bomb" design system. Tokens transcribed from planning/design/README.md. Theme switches via the data-theme="dark" attribute on ; light values are the fallbacks so the page paints with no flash. Accents/badges are identical in both modes — only surfaces, text, outlines-shadow, and background change. */ :root { --ink: #14121f; --pink: #ff3d90; --pink-light: #ff7ab8; --cyan: #45d7f2; --lime: #c6ff5e; --yellow: #ffe14d; /* Themed (light defaults) */ --bg: linear-gradient(180deg, #f1fbff, #f7f0ff 55%, #fff0f8); --dot: rgba(140, 90, 220, 0.10); --surface: #ffffff; --surface-2: #fbf7ff; --text-strong: #2c2140; --text-body: #5a4a78; --text-muted: #7a6aa0; --violet: #8a4fd6; --nav: #4a3a66; --shadow: rgba(20, 18, 31, 0.88); --head-edge: #ffffff; --r-pill: 999px; --r-card: 18px; --r-panel: 24px; } html[data-theme="dark"] { --bg: linear-gradient(180deg, #191427, #1e1530 55%, #261426); --dot: rgba(200, 150, 255, 0.07); --surface: #241d38; --surface-2: #2c2442; --text-strong: #f3ecff; --text-body: #c9bce6; --text-muted: #9c8fc2; --violet: #c9a4ff; --nav: #d9cef2; --shadow: rgba(5, 3, 12, 0.95); --head-edge: rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } body { margin: 0; font-family: "M PLUS Rounded 1c", system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.55; color: var(--text-body); background-image: radial-gradient(var(--dot) 1.4px, transparent 1.8px), var(--bg); background-size: 24px 24px, auto; background-attachment: fixed; min-height: 100vh; } .cc-container { max-width: 1340px; margin: 0 auto; padding: 0 30px; } /* --- Typography --- */ .cc-logo, h1, h2, h3, .cc-display { font-family: "Mochiy Pop One", system-ui, sans-serif; font-weight: 400; color: var(--text-strong); } .cc-mono { font-family: "Space Mono", monospace; } .cc-annotation { font-family: "Space Mono", monospace; color: var(--violet); font-size: 13px; } .cc-logo { font-size: 28px; color: #fff; text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 5px 6px 0 #ff5fa2; text-decoration: none; } .cc-hero-h1 { font-size: 54px; line-height: 1.04; margin: 0.2em 0; text-shadow: 2px 2px 0 var(--head-edge); } .cc-hero-h1 .accent { color: var(--pink); text-shadow: 2px 2px 0 var(--head-edge), 5px 5px 0 rgba(255, 61, 144, 0.2); } /* --- Nav --- */ .cc-nav { display: flex; align-items: center; gap: 22px; padding: 22px 0 14px; } .cc-nav .spacer { flex: 1; } .cc-nav a.cc-navlink { font-weight: 800; font-size: 14px; color: var(--nav); text-decoration: none; } .cc-nav a.cc-navlink:hover { color: var(--pink); } /* --- Buttons & chips --- */ .cc-btn { display: inline-flex; align-items: center; gap: 6px; font-family: "Mochiy Pop One", sans-serif; font-size: 14px; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-pill); padding: 9px 16px; background: var(--surface); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; text-decoration: none; transition: transform 0.06s ease, box-shadow 0.06s ease; } .cc-btn:hover { transform: translateY(-2px); } .cc-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } .cc-btn--pink { background: linear-gradient(135deg, var(--pink-light), var(--pink)); color: #fff; } .cc-btn--cyan { background: var(--cyan); } .cc-btn--yellow { background: var(--yellow); } .cc-btn--lime { background: var(--lime); } .cc-chip { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; border: 2px solid var(--ink); border-radius: var(--r-pill); padding: 5px 12px; background: var(--surface); color: var(--text-body); box-shadow: 2px 2px 0 var(--ink); text-decoration: none; } /* --- Panels & sticker cards --- */ .cc-panel { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-panel); box-shadow: 6px 7px 0 var(--shadow); padding: 26px 28px; } .cc-card { background: var(--surface); border: 3.5px solid #fff; outline: 2.5px solid var(--ink); border-radius: var(--r-card); box-shadow: 5px 6px 0 var(--shadow); overflow: hidden; } /* Responsive grid of sticker cards (browse walls, home rails) */ .cc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; } /* Sticker card (asset grid item) — see templates/components/sticker_card.html */ .cc-sticker { display: flex; flex-direction: column; } .cc-sticker__art { position: relative; display: block; aspect-ratio: 4 / 5; background-size: cover; background-position: center; text-decoration: none; } .cc-sticker__art--placeholder { background-image: linear-gradient(135deg, var(--pink-light), var(--cyan)); } .cc-sticker__tier { position: absolute; top: 8px; left: 8px; } .cc-sticker__tokens { position: absolute; bottom: 8px; right: 8px; font-size: 11px; padding: 3px 8px; } .cc-sticker__body { padding: 12px 14px 14px; } .cc-sticker__title { font-size: 17px; margin: 0; line-height: 1.15; } .cc-sticker__sub { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); } .cc-sticker__metrics { display: flex; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--text-body); } /* --- Badges (Gold / Silver / Popular / Trending) --- */ .cc-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; border: 2px solid var(--ink); border-radius: var(--r-pill); padding: 3px 8px; box-shadow: 2px 2px 0 var(--ink); } .cc-badge--gold { background: linear-gradient(135deg, #ffe49a, #f2b23c); color: #5b3a00; } .cc-badge--silver { background: linear-gradient(135deg, #eff3f8, #c3cedb); color: #3a4656; } .cc-badge--popular { background: linear-gradient(135deg, #ff93c2, #ff4f94); color: #fff; } .cc-badge--trending { background: linear-gradient(135deg, #a6e4ff, #37b6f2); color: #073049; } /* --- Theme toggle chip --- */ .cc-theme-toggle { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--surface); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; font-size: 16px; } /* --- Auth pages (django-allauth) --- allauth emits plain HTML (h1/p/form/label/input/button/.helptext + a social