/* ============================================================ junacircle — design system foundation Scoped under .jc so it never clashes with design-canvas chrome. Switchable: data-mode (light/dark), data-accent, data-type on . ============================================================ */ /* ---- Type pairings (swapped via [data-type]) ---- */ :root { --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-serif: "Newsreader", Georgia, serif; --font-mono: "Spline Sans Mono", ui-monospace, monospace; } :root[data-type="b"] { --font-display: "Newsreader", Georgia, serif; --font-body: "Figtree", system-ui, sans-serif; } :root[data-type="c"] { --font-display: "Schibsted Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; } /* ============================================================ PALETTE SYSTEM - Base (bg/surface/ink) swapped via [data-base] warm|cool + [data-mode] - Accent driven by 3 vars (--a-l --a-c --a-h) → derived below. Add an accent by setting just those 3 + --accent-ink. ============================================================ */ /* ---- Warm light base (default) ---- */ :root { --bg: oklch(0.965 0.012 76); --surface: oklch(0.992 0.006 84); --surface-2: oklch(0.945 0.014 74); --surface-3: oklch(0.915 0.016 72); --ink: oklch(0.285 0.018 56); --ink-soft: oklch(0.475 0.018 58); --ink-faint: oklch(0.635 0.016 64); --line: oklch(0.895 0.012 72); --line-soft: oklch(0.925 0.010 74); --shadow: 14 10 6; --shadow-1: 0 1px 2px rgb(var(--shadow) / .06), 0 2px 8px rgb(var(--shadow) / .05); --shadow-2: 0 2px 6px rgb(var(--shadow) / .07), 0 12px 32px rgb(var(--shadow) / .09); --shadow-3: 0 8px 24px rgb(var(--shadow) / .10), 0 24px 60px rgb(var(--shadow) / .14); /* semantic states (constant across themes) */ --go: oklch(0.58 0.10 155); --maybe: oklch(0.70 0.12 80); --cant: oklch(0.60 0.13 28); --go-soft: oklch(0.58 0.10 155 / .14); --maybe-soft: oklch(0.70 0.12 80 / .16); --cant-soft: oklch(0.60 0.13 28 / .12); } /* ---- Cool light base (modern slate/white) ---- */ :root[data-base="cool"] { --bg: oklch(0.975 0.004 255); --surface: oklch(1 0 0); --surface-2: oklch(0.958 0.006 255); --surface-3: oklch(0.928 0.009 256); --ink: oklch(0.255 0.022 264); --ink-soft: oklch(0.455 0.022 262); --ink-faint: oklch(0.620 0.018 260); --line: oklch(0.905 0.008 256); --line-soft: oklch(0.938 0.006 256); --shadow: 18 22 40; } /* ---- Warm dark base ---- */ :root[data-mode="dark"] { --bg: oklch(0.205 0.010 60); --surface: oklch(0.255 0.012 62); --surface-2: oklch(0.305 0.013 62); --surface-3: oklch(0.355 0.014 62); --ink: oklch(0.945 0.012 78); --ink-soft: oklch(0.785 0.014 72); --ink-faint: oklch(0.620 0.014 66); --line: oklch(1 0 0 / .10); --line-soft: oklch(1 0 0 / .06); --shadow: 0 0 0; --shadow-1: 0 1px 2px rgb(0 0 0 / .30), 0 2px 8px rgb(0 0 0 / .26); --shadow-2: 0 2px 6px rgb(0 0 0 / .34), 0 12px 32px rgb(0 0 0 / .40); --shadow-3: 0 8px 24px rgb(0 0 0 / .44), 0 24px 60px rgb(0 0 0 / .54); } /* ---- Cool dark base (true slate) ---- */ :root[data-mode="dark"][data-base="cool"] { --bg: oklch(0.195 0.015 264); --surface: oklch(0.245 0.018 265); --surface-2: oklch(0.298 0.020 266); --surface-3: oklch(0.350 0.022 266); --ink: oklch(0.955 0.008 255); --ink-soft: oklch(0.770 0.016 258); --ink-faint: oklch(0.600 0.018 260); --line: oklch(1 0 0 / .11); --line-soft: oklch(1 0 0 / .06); } /* ============================================================ ACCENTS — each sets 3 vars; everything derives from them. ============================================================ */ :root { --a-l: 0.620; --a-c: 0.150; --a-h: 42; /* terracotta (default) */ --accent-ink: oklch(0.985 0.01 80); --accent: oklch(var(--a-l) var(--a-c) var(--a-h)); --accent-press: oklch(calc(var(--a-l) - 0.06) var(--a-c) var(--a-h)); --accent-soft: oklch(var(--a-l) var(--a-c) var(--a-h) / .13); --accent-line: oklch(var(--a-l) var(--a-c) var(--a-h) / .32); } :root[data-accent="amber"] { --a-l: 0.760; --a-c: 0.145; --a-h: 72; --accent-ink: oklch(0.27 0.04 70); } :root[data-accent="coral"] { --a-l: 0.660; --a-c: 0.175; --a-h: 30; --accent-ink: oklch(0.99 0.01 40); } :root[data-accent="rose"] { --a-l: 0.625; --a-c: 0.205; --a-h: 6; --accent-ink: oklch(0.99 0.01 20); } :root[data-accent="fuchsia"] { --a-l: 0.605; --a-c: 0.235; --a-h: 332; --accent-ink: oklch(0.99 0.01 330); } :root[data-accent="violet"] { --a-l: 0.560; --a-c: 0.215; --a-h: 298; --accent-ink: oklch(0.99 0.01 300); } :root[data-accent="indigo"] { --a-l: 0.545; --a-c: 0.195; --a-h: 270; --accent-ink: oklch(0.99 0.01 270); } :root[data-accent="azure"] { --a-l: 0.620; --a-c: 0.165; --a-h: 240; --accent-ink: oklch(0.99 0.01 250); } :root[data-accent="teal"] { --a-l: 0.700; --a-c: 0.115; --a-h: 195; --accent-ink: oklch(0.24 0.03 200); } :root[data-accent="emerald"] { --a-l: 0.645; --a-c: 0.150; --a-h: 158; --accent-ink: oklch(0.99 0.01 160); } /* dark mode brightens accents a touch + stronger tints for contrast */ :root[data-mode="dark"] { --accent: oklch(calc(var(--a-l) + 0.05) var(--a-c) var(--a-h)); --accent-press: oklch(calc(var(--a-l) - 0.01) var(--a-c) var(--a-h)); --accent-soft: oklch(calc(var(--a-l) + 0.05) var(--a-c) var(--a-h) / .20); --accent-line: oklch(calc(var(--a-l) + 0.05) var(--a-c) var(--a-h) / .40); --accent-ink: oklch(0.16 0.02 var(--a-h)); } :root[data-mode="dark"][data-accent="amber"] { --accent-ink: oklch(0.20 0.04 70); } :root[data-mode="dark"][data-accent="teal"] { --accent-ink: oklch(0.18 0.03 200); } /* ============================================================ Base ============================================================ */ .jc, .jc * { box-sizing: border-box; } .jc { font-family: var(--font-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.45; font-size: 15px; } .jc h1,.jc h2,.jc h3,.jc h4 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -0.02em; line-height: 1.1; } .jc p { margin: 0; } /* ============================================================ Phone frame ============================================================ */ .jc-phone { width: 372px; height: 806px; background: #0c0a09; border-radius: 52px; padding: 11px; box-shadow: var(--shadow-3); position: relative; } :root[data-mode="dark"] .jc-phone { background: #050403; box-shadow: 0 0 0 1px rgb(255 255 255 / .06), var(--shadow-3); } .jc-screen { width: 350px; height: 784px; background: var(--bg); border-radius: 42px; overflow: hidden; position: relative; display: flex; flex-direction: column; } /* dynamic island */ .jc-island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 108px; height: 30px; background: #0c0a09; border-radius: 16px; z-index: 60; } .jc-statusbar { height: 54px; flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 26px 8px; font-size: 14px; font-weight: 600; color: var(--ink); position: relative; z-index: 50; } .jc-statusbar .jc-sb-icons { display: flex; align-items: center; gap: 6px; } .jc-home-ind { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 128px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .35; z-index: 60; } /* scroll body */ .jc-body { flex: 1 1 auto; overflow: hidden; position: relative; } .jc-scroll { height: 100%; overflow-y: auto; } /* ============================================================ Product chrome: nav, header ============================================================ */ .jc-tabbar { flex: 0 0 auto; height: 78px; display: flex; align-items: flex-start; justify-content: space-around; padding: 10px 8px 0; background: var(--surface); border-top: 1px solid var(--line); position: relative; z-index: 40; } .jc-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-faint); font-size: 10.5px; font-weight: 600; flex: 1; cursor: pointer; } .jc-tab.is-active { color: var(--accent); } .jc-tab svg { width: 24px; height: 24px; } .jc-fab { position: absolute; right: 18px; bottom: 92px; width: 56px; height: 56px; border-radius: 28px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-2), 0 0 0 4px var(--bg); z-index: 45; } .jc-fab svg { width: 26px; height: 26px; } .jc-topbar { display: flex; align-items: center; gap: 12px; padding: 4px 18px 14px; } .jc-topbar .jc-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; flex: 1; } .jc-iconbtn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-soft); position: relative; flex: 0 0 auto; } .jc-iconbtn svg { width: 20px; height: 20px; } .jc-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--surface); } /* ============================================================ Buttons ============================================================ */ .jc-btn { font-family: var(--font-body); font-weight: 600; font-size: 15px; border: none; border-radius: 99px; padding: 13px 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; transition: transform .08s; } .jc-btn:active { transform: scale(.97); } .jc-btn svg { width: 18px; height: 18px; } .jc-btn--primary { background: var(--accent); color: var(--accent-ink); } .jc-btn--block { width: 100%; padding: 16px; font-size: 16px; } .jc-btn--secondary { background: var(--surface-2); color: var(--ink); } .jc-btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); } .jc-btn--ghost { background: transparent; color: var(--accent); } .jc-btn--sm { padding: 9px 16px; font-size: 13.5px; } /* ============================================================ Pills / chips / badges ============================================================ */ .jc-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 99px; background: var(--surface-2); color: var(--ink-soft); white-space: nowrap; } .jc-pill svg { width: 14px; height: 14px; } .jc-pill--accent { background: var(--accent-soft); color: var(--accent); } .jc-pill--go { background: var(--go-soft); color: var(--go); } .jc-pill--maybe { background: var(--maybe-soft); color: oklch(0.50 0.09 75); } .jc-pill--cant { background: var(--cant-soft); color: var(--cant); } .jc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 600; background: var(--surface); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; } .jc-chip.is-active { background: var(--ink); color: var(--bg); box-shadow: none; } .jc-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); } /* ============================================================ Cards / lists / surfaces ============================================================ */ .jc-card { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-1); overflow: hidden; } .jc-card--line { box-shadow: inset 0 0 0 1px var(--line); } .jc-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; } .jc-divide > * + * { border-top: 1px solid var(--line-soft); } .jc-avatar { border-radius: 50%; background: var(--surface-3); flex: 0 0 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink-soft); } .jc-stack { display: flex; } .jc-stack > * { margin-left: -10px; box-shadow: 0 0 0 2.5px var(--surface); } .jc-stack > *:first-child { margin-left: 0; } .jc-section-label { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } .jc-meta { font-size: 13px; color: var(--ink-soft); } .jc-faint { color: var(--ink-faint); } /* segmented control */ .jc-seg { display: flex; gap: 2px; background: var(--surface-2); border-radius: 12px; padding: 3px; } .jc-seg button { flex: 1; border: none; background: transparent; font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: var(--ink-soft); padding: 8px; border-radius: 9px; cursor: pointer; } .jc-seg button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); } /* tabs underline */ .jc-tabs { display: flex; gap: 22px; padding: 0 18px; border-bottom: 1px solid var(--line); } .jc-tabs button { border: none; background: none; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--ink-faint); padding: 12px 0; cursor: pointer; position: relative; } .jc-tabs button.is-active { color: var(--ink); } .jc-tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--accent); } /* inputs */ .jc-input { width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; } .jc-input::placeholder { color: var(--ink-faint); } .jc-field-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; display: block; } /* toggle */ .jc-toggle { width: 46px; height: 28px; border-radius: 99px; background: var(--surface-3); position: relative; flex: 0 0 auto; transition: background .15s; } .jc-toggle.is-on { background: var(--accent); } .jc-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .15s; } .jc-toggle.is-on::after { transform: translateX(18px); } /* ============================================================ Image placeholder (striped, labeled) ============================================================ */ .jc-ph { position: relative; overflow: hidden; background: var(--surface-2); background-image: repeating-linear-gradient(135deg, rgb(var(--shadow) / .05) 0 1px, transparent 1px 11px); display: flex; align-items: center; justify-content: center; } :root[data-mode="dark"] .jc-ph { background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .04) 0 1px, transparent 1px 11px); } .jc-ph span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em; color: var(--ink-faint); text-align: center; padding: 4px 8px; line-height: 1.3; } .jc-ph--accent { background: var(--accent-soft); background-image: repeating-linear-gradient(135deg, var(--accent-line) 0 1px, transparent 1px 12px); } .jc-ph--accent span { color: var(--accent); } /* concentric ripple loader motif */ .jc-rings { position: relative; } /* ============================================================ Event themes — override local vars on event surfaces only ============================================================ */ .theme-elegant { --ev-accent: oklch(0.42 0.055 215); --ev-accent-ink: #fff; --ev-font: var(--font-serif); --ev-radius: 6px; --ev-hero-h: 320px; } .theme-playful { --ev-accent: oklch(0.66 0.135 200); --ev-accent-ink: #fff; --ev-font: var(--font-display); --ev-radius: 26px; --ev-hero-h: 300px; } .theme-minimal { --ev-accent: var(--ink); --ev-accent-ink: var(--bg); --ev-font: var(--font-body); --ev-radius: 12px; --ev-hero-h: 300px; } .theme-elegant h1,.theme-elegant h2,.theme-elegant h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: 0; } .theme-playful h1,.theme-playful h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; } .theme-minimal h1,.theme-minimal h2 { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.02em; } /* ============================================================ Toolbar (fixed, outside canvas world) ============================================================ */ .jc-toolbar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 12px; padding: 9px 9px 9px 16px; max-width: calc(100vw - 24px); background: rgb(28,24,20); border-radius: 26px; box-shadow: 0 8px 30px rgb(0 0 0 / .28), inset 0 0 0 1px rgb(255 255 255 / .08); font-family: "Hanken Grotesk", system-ui, sans-serif; color: #fff; } .jc-toolbar .tb-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; } .jc-toolbar .tb-sep { width: 1px; height: 22px; background: rgb(255 255 255 / .16); } .jc-toolbar .tb-group { display: flex; align-items: center; gap: 6px; } .jc-toolbar .tb-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgb(255 255 255 / .5); } .jc-toolbar .tb-seg { display: flex; background: rgb(255 255 255 / .08); border-radius: 99px; padding: 3px; } .jc-toolbar .tb-seg button { border: none; background: transparent; color: rgb(255 255 255 / .6); font-family: inherit; font-weight: 600; font-size: 12.5px; padding: 6px 13px; border-radius: 99px; cursor: pointer; } .jc-toolbar .tb-seg button.is-active { background: #fff; color: #1c1814; } .jc-toolbar .tb-sw { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; padding: 0; } .jc-toolbar .tb-sw.is-active { border-color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); } .jc-toolbar .tb-select { appearance: none; -webkit-appearance: none; background: rgb(255 255 255 / .08); color: #fff; border: none; font-family: inherit; font-weight: 600; font-size: 12.5px; padding: 7px 28px 7px 13px; border-radius: 99px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .jc-toolbar .tb-select option { color: #1c1814; }