/* Sweet Scales - design tokens + shared components. * Stage 4 built the candy token system; Stage 5 (2026-07-12, Ishaq ruling) * re-anchors the design on main.dinoden.gg: DARK is the default — near-black * field, HUD chrome (uppercase letterspaced labels, corner brackets, subtle * noise), Rajdhani type, card grids with category chips. Sweet Scales keeps * its own brand hues in the dinoden roles: lollipop pink is THE accent, * deep teal the second, ember orange for event chips. * The candy LIGHT theme keeps its Stage-4 values one toggle away: * set by sweet-theme.js (localStorage > dark). * Fonts are SELF-HOSTED (no hotlinks). Load THIS file before topbar.css and * page styles: they consume the tokens. */ @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/rajdhani-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/rajdhani-500-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/rajdhani-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/rajdhani-600-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/rajdhani-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/rajdhani-700-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- tokens: DARK is the default (dinoden ruling) ---------- */ :root { /* --sw-serif kept as the DISPLAY slot name (pages consume it) — it now * carries the Rajdhani display stack, not an actual serif. */ --sw-serif: 'Rajdhani', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --sw-sans: 'Rajdhani', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --sw-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; --sw-ease: cubic-bezier(.22, .61, .36, 1); --sw-bg: #0B0D11; --sw-bg-2: #0E1116; --sw-panel: #12151C; --sw-panel-2: #161A22; --sw-ink: #E9EEF4; --sw-ink-2: #A7B3C0; --sw-ink-3: #6B7885; --sw-hair: rgba(233, 238, 244, .14); --sw-hair-2: rgba(233, 238, 244, .07); --sw-pink: #F073AC; --sw-pink-soft: #F8A5C2; --sw-teal: #39B3C6; --sw-teal-deep: #2A8A99; --sw-orange: #F59E4B; --sw-accent: #F073AC; --sw-accent-2: #39B3C6; --sw-accent-ink: #180810; --sw-wash-pink: rgba(240, 115, 172, .10); --sw-wash-teal: rgba(57, 179, 198, .10); --sw-shadow: 0 18px 44px -18px rgba(0, 0, 0, .65); --sw-nav-bg: rgba(11, 13, 17, .90); --sw-nav-sheet: rgba(11, 13, 17, .98); --sw-ok: #58C58B; --sw-warn: #D9A93F; --sw-bad: #E06C5B; /* rgb triplets for alpha ramps in derived stylesheets (_shared.css). */ --sw-ink-rgb: 233, 238, 244; --sw-accent-rgb: 240, 115, 172; --sw-warm-rgb: 224, 108, 91; --sw-warn-rgb: 217, 169, 63; --sw-glass: rgba(255, 255, 255, .055); --sw-glass-2: rgba(255, 255, 255, .035); --sw-glass-border: rgba(233, 238, 244, .13); } /* ---------- tokens: candy LIGHT (the Stage-4 look, one toggle away) ------- */ :root[data-theme="light"] { --sw-bg: #FBF6EE; --sw-bg-2: #F5EDE0; --sw-panel: #FFFFFF; --sw-panel-2: #FDF9F2; --sw-ink: #1D3A4C; --sw-ink-2: #466173; --sw-ink-3: #7E92A0; --sw-hair: rgba(29, 58, 76, .16); --sw-hair-2: rgba(29, 58, 76, .08); --sw-pink: #E85D9E; --sw-pink-soft: #F8A5C2; --sw-teal: #2A7F8E; --sw-teal-deep: #1F6472; --sw-orange: #D97B2E; --sw-accent: #E85D9E; --sw-accent-2: #2A7F8E; --sw-accent-ink: #FFFFFF; --sw-wash-pink: rgba(232, 93, 158, .09); --sw-wash-teal: rgba(42, 127, 142, .08); --sw-shadow: 0 18px 44px -20px rgba(29, 58, 76, .28); --sw-nav-bg: rgba(251, 246, 238, .88); --sw-nav-sheet: rgba(251, 246, 238, .98); --sw-ok: #2E8B57; --sw-warn: #B8860B; --sw-bad: #C0392B; --sw-ink-rgb: 29, 58, 76; --sw-accent-rgb: 42, 127, 142; --sw-warm-rgb: 192, 57, 43; --sw-warn-rgb: 184, 134, 11; --sw-glass: rgba(255, 255, 255, .72); --sw-glass-2: rgba(255, 255, 255, .5); --sw-glass-border: rgba(29, 58, 76, .14); } /* ---------- base ---------- */ .sw-page { margin: 0; background: var(--sw-bg); color: var(--sw-ink); font-family: var(--sw-sans); font-weight: 500; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .35s var(--sw-ease), color .35s var(--sw-ease); } .sw-page ::selection { background: var(--sw-wash-pink); } .sw-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 44px); } .sw-display { font-family: var(--sw-serif); font-weight: 700; letter-spacing: .015em; line-height: 1.08; color: var(--sw-ink); margin: 0; } .sw-display em { font-style: normal; color: var(--sw-pink); } .sw-display strong { font-weight: 700; color: var(--sw-teal); } /* Section label, dinoden-style: an accent dash then spaced uppercase. */ .sw-kicker { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--sw-accent); margin: 0 0 14px; } .sw-kicker::before { content: ""; width: 34px; height: 2px; background: var(--sw-accent); opacity: .9; flex: none; } .sw-kicker.plain { color: var(--sw-ink-3); } .sw-kicker.plain::before { background: var(--sw-ink-3); } .sw-lede { color: var(--sw-ink-2); font-size: 16.5px; max-width: 62ch; font-weight: 500; } /* ---------- panels + cards ---------- */ .sw-card { background: var(--sw-panel); border: 1px solid var(--sw-hair-2); border-radius: 12px; padding: 24px 26px; box-shadow: var(--sw-shadow); transition: border-color .25s var(--sw-ease), transform .25s var(--sw-ease); } .sw-card.tinted { background: linear-gradient(160deg, var(--sw-panel) 55%, var(--sw-panel-2)); } .sw-card.hover:hover { border-color: rgba(var(--sw-accent-rgb), .45); transform: translateY(-2px); } .sw-card h3 { font-family: var(--sw-serif); font-weight: 700; font-size: 19px; letter-spacing: .01em; margin: 0 0 8px; } .sw-card .meta { font-size: 12px; color: var(--sw-ink-3); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; } .sw-hairline { border: 0; border-top: 1px solid var(--sw-hair-2); margin: 0; } /* HUD corner brackets (hero blocks, featured cards). */ .sw-corners { position: relative; } .sw-corners::before, .sw-corners::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; opacity: .55; } .sw-corners::before { top: 10px; left: 10px; border-top: 2px solid var(--sw-accent); border-left: 2px solid var(--sw-accent); } .sw-corners::after { bottom: 10px; right: 10px; border-bottom: 2px solid var(--sw-accent); border-right: 2px solid var(--sw-accent); } /* Static sensor-noise wash, dark theme only (a texture, not an animation). */ .sw-noise { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, .35) 2px 3px), repeating-linear-gradient(90deg, transparent 0 3px, rgba(255, 255, 255, .18) 3px 4px); background-size: 100% 4px, 4px 100%; mix-blend-mode: overlay; } :root[data-theme="light"] .sw-noise { display: none; } /* Terminal status strip (home hero). */ .sw-term { font-family: var(--sw-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--sw-ink-3); display: flex; flex-wrap: wrap; gap: 6px 22px; } .sw-term .ok { color: var(--sw-ok); font-weight: 600; } .sw-term .warn { color: var(--sw-warn); font-weight: 600; } /* Category chips (news/events/quests cards). */ .sw-chip { display: inline-flex; align-items: center; font-family: var(--sw-sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 4px; padding: 4px 10px; color: #10151B; background: var(--sw-teal); } .sw-chip.event { background: var(--sw-orange); } .sw-chip.quest { background: var(--sw-pink); } .sw-chip.muted { background: var(--sw-panel-2); color: var(--sw-ink-3); border: 1px solid var(--sw-hair-2); } /* Quest progress bar. */ .sw-progress { height: 8px; border-radius: 999px; background: var(--sw-hair-2); overflow: hidden; } .sw-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sw-pink), var(--sw-teal)); transition: width .4s var(--sw-ease); } .sw-progress.done > span { background: var(--sw-ok); } /* ---------- buttons ---------- */ .sw-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sw-sans); font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--sw-hair); border-radius: 8px; padding: 10px 20px; color: var(--sw-ink); background: transparent; text-decoration: none; transition: .25s var(--sw-ease); line-height: 1.2; white-space: nowrap; } .sw-btn:hover { border-color: var(--sw-ink-3); background: var(--sw-hair-2); } .sw-btn.solid { background: var(--sw-accent); border-color: var(--sw-accent); color: var(--sw-accent-ink); } .sw-btn.solid:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -12px var(--sw-accent); } .sw-btn.teal { background: var(--sw-accent-2); border-color: var(--sw-accent-2); color: #0E1116; } .sw-btn.teal:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -12px var(--sw-accent-2); } .sw-btn.quiet { border-color: transparent; color: var(--sw-ink-2); } .sw-btn.quiet:hover { color: var(--sw-ink); background: var(--sw-hair-2); } .sw-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; } :root[data-theme="light"] .sw-btn.teal { color: #FFFFFF; } /* ---------- forms ---------- */ .sw-input, .sw-textarea, .sw-select { width: 100%; box-sizing: border-box; font-family: var(--sw-sans); font-size: 14.5px; font-weight: 500; color: var(--sw-ink); background: var(--sw-panel-2); border: 1px solid var(--sw-hair); border-radius: 8px; padding: 10px 14px; outline: none; transition: border-color .2s; } .sw-input:focus, .sw-textarea:focus, .sw-select:focus { border-color: var(--sw-accent); } .sw-textarea { min-height: 130px; resize: vertical; line-height: 1.6; } .sw-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-ink-3); margin: 14px 0 6px; } /* ---------- pills + badges ---------- */ .sw-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 4px; padding: 5px 12px; background: var(--sw-wash-teal); color: var(--sw-teal); border: 1px solid var(--sw-hair-2); } .sw-pill.pink { background: var(--sw-wash-pink); color: var(--sw-pink); } .sw-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* ---------- accents ---------- */ .sw-swirl-rule { height: 3px; border: 0; border-radius: 3px; margin: 0; background: linear-gradient(90deg, var(--sw-pink), var(--sw-pink-soft) 35%, var(--sw-teal) 100%); opacity: .85; } .sw-hero-wash { background: radial-gradient(1100px 420px at 12% -10%, var(--sw-wash-pink), transparent 60%), radial-gradient(900px 380px at 88% -14%, var(--sw-wash-teal), transparent 60%), var(--sw-bg); } /* ---------- footer ---------- */ .sw-footer { border-top: 1px solid var(--sw-hair-2); padding: 34px 0 44px; color: var(--sw-ink-3); font-size: 13px; } .sw-footer a { color: var(--sw-ink-2); text-decoration: none; } .sw-footer a:hover { color: var(--sw-ink); } .sw-footer .cols { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; } .sw-footer nav { display: flex; gap: 18px; flex-wrap: wrap; } /* ---------- global chat (left sidebar shell; live wiring at Stage 10) ----- */ .sw-chat-toggle { position: fixed; left: 18px; bottom: 18px; z-index: 1180; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--sw-hair); border-radius: 8px; background: var(--sw-panel); color: var(--sw-ink-2); font-family: var(--sw-sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; cursor: pointer; box-shadow: var(--sw-shadow); transition: .25s var(--sw-ease); } .sw-chat-toggle:hover { color: var(--sw-ink); transform: translateY(-1px); border-color: rgba(var(--sw-accent-rgb), .5); } .sw-chat-toggle svg { width: 15px; height: 15px; } .sw-chat-panel { position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 86vw); z-index: 1190; display: none; flex-direction: column; background: var(--sw-panel); border-right: 1px solid var(--sw-hair); box-shadow: var(--sw-shadow); transform: translateX(-100%); transition: transform .35s var(--sw-ease); } .sw-chat-panel.open { display: flex; transform: none; } .sw-chat-panel .chat-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--sw-hair-2); } .sw-chat-panel .chat-head h4 { font-family: var(--sw-serif); font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; margin: 0; } .sw-chat-panel .chat-close { background: none; border: 0; color: var(--sw-ink-3); font-size: 17px; cursor: pointer; padding: 4px 8px; } .sw-chat-panel .chat-close:hover { color: var(--sw-ink); } .sw-chat-panel .chat-tabs { display: flex; gap: 8px; padding: 12px 16px 0; } .sw-chat-panel .chat-tab { flex: 1; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-ink-3); background: var(--sw-panel-2); border: 1px solid var(--sw-hair-2); border-radius: 6px; padding: 7px 0; } .sw-chat-panel .chat-tab.on { color: var(--sw-teal); border-color: rgba(57, 179, 198, .4); background: var(--sw-wash-teal); } .sw-chat-panel .chat-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; color: var(--sw-ink-3); font-size: 13.5px; } .sw-chat-panel .chat-note { border: 1px dashed var(--sw-hair); border-radius: 8px; background: var(--sw-panel-2); padding: 14px 16px; line-height: 1.55; } .sw-chat-panel .chat-input-row { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--sw-hair-2); } .sw-chat-panel .chat-input-row input { flex: 1; font-family: var(--sw-sans); font-size: 13.5px; font-weight: 500; background: var(--sw-panel-2); color: var(--sw-ink-3); border: 1px solid var(--sw-hair-2); border-radius: 8px; padding: 9px 14px; outline: none; } .sw-chat-panel .chat-input-row button { border: 1px solid var(--sw-hair-2); background: var(--sw-panel-2); color: var(--sw-ink-3); border-radius: 8px; padding: 9px 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: not-allowed; } /* ---------- tables (admin/status/profile lists) ---------- */ .sw-table { width: 100%; border-collapse: collapse; font-size: 14px; } .sw-table th { text-align: left; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sw-ink-3); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--sw-hair); } .sw-table td { padding: 11px 12px; border-bottom: 1px solid var(--sw-hair-2); color: var(--sw-ink-2); } .sw-table tr:hover td { background: var(--sw-hair-2); } /* ---------- reveal (quiet, respectful of reduced motion) ---------- */ .sw-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--sw-ease), transform .7s var(--sw-ease); } .sw-reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .sw-reveal { opacity: 1; transform: none; transition: none; } .sw-page, .sw-chat-panel { transition: none; } }