/* =====================================================================
Sticai Design System v1.0 — core stylesheet (GRID)
Link this file to build on-brand pages:
Fonts (Geist, Geist Mono, Kalam) are embedded, so pages render offline.
Set the accent with a theme class on the page root: theme-red (default),
theme-cobalt, theme-teal, theme-violet, theme-amber, theme-green.
Night mode: add class 'dark' to .
===================================================================== */
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ff49f83effe.woff2) format("woff2");}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ff49f83effe.woff2) format("woff2");}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ff49f83effe.woff2) format("woff2");}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ff49f83effe.woff2) format("woff2");}
@font-face{font-family:'Geist';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/ff49f83effe.woff2) format("woff2");}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/f8c3cbed783.woff2) format("woff2");}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/f8c3cbed783.woff2) format("woff2");}
@font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/fa0b26053cd.woff2) format("woff2");}
@font-face{font-family:'Kalam';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/fbefa33190a.woff2) format("woff2");}
:root{
--sans:'Geist',system-ui,-apple-system,sans-serif;
--mono:'Geist Mono','SFMono-Regular',Consolas,monospace;
--hand:'Kalam',cursive;
/* neutrals — light */
--bg:#FAFAF6; --surface:#FFFFFF; --grid:#ECECE6; --line:#E2E2DC; --line2:#CFCFC8;
--ink:#111110; --ink2:#33332b; --mut:#6B6B61;
/* working states (fixed across themes) — light */
--green:#0F7A3D; --green-bg:#E4F6EA; --amber:#9A6207; --amber-bg:#FBEFD6;
--cobalt:#27349C; --cobalt-bg:#E6EAFE; --oxide:#7A2520; --oxide-bg:#F3E4E2;
/* brand accent (overridden by theme class) */
--acc:#F5333F;
--acc-fill:#E50B19; --acc-text:#E50B19;
/* motion + craft tokens (shared with the coaching app) */
--ease:cubic-bezier(0.22,1,0.36,1);
--dur-1:150ms; --dur-2:220ms; --dur-3:320ms;
--scrim:rgba(10,10,9,.5);
--spot-c1:rgba(235,150,60,.055);
/* craft tokens added for the coaching app (2026-07-20): highlight-mix
percentage for the brand-mark underline, and a shared elevation shadow.
Additive only — no existing token value above was changed. */
--hl-mix:20%;
--shadow:0 1px 2px rgba(20,20,19,.05), 0 6px 18px rgba(20,20,19,.05);
}
body.dark{
--bg:#17181A; --surface:#1F2123; --grid:#26282B; --line:#303234; --line2:#3C3E41;
--ink:#ECECE7; --ink2:#C4C5BE; --mut:#8F908A;
--green:#4FD68A; --green-bg:#16302233; --amber:#FBB13C; --amber-bg:#3A2C0F40;
--cobalt:#8FA0FF; --cobalt-bg:#1B215080; --oxide:#E0625A; --oxide-bg:#3A1E1B66;
--acc-text:#F64651;
--spot-c1:rgba(245,51,63,.10);
--hl-mix:32%;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
}
/* data-theme attribute support (2026-07-20): the coaching app forces theme
via :root[data-theme] rather than a body.dark class. Additive parity
layer only — mirrors the body.dark tokens above unchanged, so pages
using body.dark keep working exactly as before. */
:root[data-theme="dark"]{
--bg:#17181A; --surface:#1F2123; --grid:#26282B; --line:#303234; --line2:#3C3E41;
--ink:#ECECE7; --ink2:#C4C5BE; --mut:#8F908A;
--green:#4FD68A; --green-bg:#16302233; --amber:#FBB13C; --amber-bg:#3A2C0F40;
--cobalt:#8FA0FF; --cobalt-bg:#1B215080; --oxide:#E0625A; --oxide-bg:#3A1E1B66;
--acc-text:#F64651;
--spot-c1:rgba(245,51,63,.10);
--hl-mix:32%;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
--bg:#FAFAF6; --surface:#FFFFFF; --grid:#ECECE6; --line:#E2E2DC; --line2:#CFCFC8;
--ink:#111110; --ink2:#33332b; --mut:#6B6B61;
--green:#0F7A3D; --green-bg:#E4F6EA; --amber:#9A6207; --amber-bg:#FBEFD6;
--cobalt:#27349C; --cobalt-bg:#E6EAFE; --oxide:#7A2520; --oxide-bg:#F3E4E2;
--acc-text:#E50B19;
--spot-c1:rgba(235,150,60,.055);
--hl-mix:20%;
--shadow:0 1px 2px rgba(20,20,19,.05), 0 6px 18px rgba(20,20,19,.05);
}
/* accent themes — set on the page root */
.theme-red{--acc:#F5333F;--acc-fill:#E50B19;--acc-text:#E50B19;} .theme-cobalt{--acc:#3D5AFF;--acc-fill:#3D5AFF;--acc-text:#3D5AFF;} .theme-teal{--acc:#12A6B5;--acc-fill:#0D7B87;--acc-text:#0D7B87;}
.theme-violet{--acc:#7C5CFF;--acc-fill:#7452FF;--acc-text:#7452FF;} .theme-amber{--acc:#EE8A1E;--acc-fill:#AD600D;--acc-text:#AD600D;} .theme-green{--acc:#22B062;--acc-fill:#198148;--acc-text:#198148;}
body.dark.theme-red{--acc-text:#F64651;} body.dark.theme-cobalt{--acc-text:#667DFF;} body.dark.theme-teal{--acc-text:#12A6B5;}
body.dark.theme-violet{--acc-text:#8C70FF;} body.dark.theme-amber{--acc-text:#EE8A1E;} body.dark.theme-green{--acc-text:#22B062;}
:root[data-theme="dark"] .theme-red{--acc-text:#F64651;} :root[data-theme="dark"] .theme-cobalt{--acc-text:#667DFF;} :root[data-theme="dark"] .theme-teal{--acc-text:#12A6B5;}
:root[data-theme="dark"] .theme-violet{--acc-text:#8C70FF;} :root[data-theme="dark"] .theme-amber{--acc-text:#EE8A1E;} :root[data-theme="dark"] .theme-green{--acc-text:#22B062;}
:root[data-theme="light"] .theme-red{--acc-text:#E50B19;} :root[data-theme="light"] .theme-cobalt{--acc-text:#3D5AFF;} :root[data-theme="light"] .theme-teal{--acc-text:#0D7B87;}
:root[data-theme="light"] .theme-violet{--acc-text:#7452FF;} :root[data-theme="light"] .theme-amber{--acc-text:#AD600D;} :root[data-theme="light"] .theme-green{--acc-text:#198148;}
/* base */
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;}
.st-page{max-width:1080px;margin:0 auto;background:var(--bg);color:var(--ink);}
.st-grid{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px;}
.st-section{padding:50px 40px;border-top:1px solid var(--line);}
/* header */
.st-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:14px 40px;border-bottom:1px solid var(--line);background:var(--bg);}
.st-brand{
font-weight:700;font-size:30px;letter-spacing:-1px;
--logo-hl:color-mix(in srgb, var(--acc) 20%, transparent);
background-image:linear-gradient(var(--logo-hl),var(--logo-hl));
background-repeat:no-repeat;
background-position:left 78%;
background-size:100% 52%;
border-radius:2px;
padding:0 4px 1px;
}
body.dark .st-brand{--logo-hl:color-mix(in srgb, var(--acc) 32%, transparent);}
/* Round full stop drawn as a disc (Geist's own full stop is a square glyph).
overflow:hidden forces the inline-block baseline to its bottom edge, so the
disc rests on the text baseline instead of dropping below the line. */
.st-brand .dot{
display:inline-block;
width:7px;height:7px;
border-radius:50%;
background:var(--acc);
margin-left:2px;
vertical-align:baseline;
overflow:hidden;
font-size:0;
}
.st-modebtn{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--line2);border-radius:6px;padding:7px 11px;cursor:pointer;}
/* type */
.st-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);margin:0 0 14px;}
.st-eyebrow b{color:var(--acc);font-weight:500;}
.st-display{font-weight:700;font-size:64px;letter-spacing:-4px;line-height:.9;margin:0;}
.st-h1{font-weight:700;font-size:36px;letter-spacing:-1.4px;margin:0 0 10px;}
.st-h2{font-weight:600;font-size:28px;letter-spacing:-1px;margin:0 0 8px;}
.st-h3{font-weight:600;font-size:18px;letter-spacing:-.3px;margin:0 0 6px;}
.st-body{font-size:16px;line-height:1.6;color:var(--ink2);max-width:64ch;margin:0 0 18px;}
.st-mono{font-family:var(--mono);}
.st-hand{font-family:var(--hand);font-weight:700;}
.st-dot{color:var(--acc);}
/* underline mark (place an svg with stroke=currentColor inside, colour set by parent --acc) */
.st-rule{color:var(--acc);display:block;height:4px;width:96px;background:currentColor;margin:14px 0 22px;border-radius:2px;}
/* circled emphasis: wrap a word in word */
.st-circle{position:relative;color:var(--acc);padding:0 4px;white-space:nowrap;}
.st-circle svg{position:absolute;left:-12px;top:-11px;width:calc(100% + 26px);height:calc(100% + 22px);overflow:visible;pointer-events:none;}
/* hand notes — tilt them, hug a margin */
.st-note{font-family:var(--hand);font-weight:700;font-size:30px;line-height:1.05;margin:0 0 16px;color:var(--ink);display:inline-block;}
.st-note.acc{color:var(--acc);}
/* buttons */
.st-btn{font-family:var(--sans);font-size:14px;font-weight:500;padding:10px 16px;border-radius:7px;border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;}
.st-btn.acc{background:var(--acc);color:#fff;}
.st-btn.sec{background:transparent;color:var(--ink);border-color:var(--line2);}
/* tiles & cards */
.st-tile{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px 22px;}
.st-tile .label{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--mut);margin-bottom:10px;}
.st-source{border-left:3px solid var(--green);}
.st-claim{font-size:16px;font-weight:500;line-height:1.35;letter-spacing:-.3px;margin:0 0 12px;}
.st-prov{font-family:var(--mono);font-size:11px;color:var(--mut);line-height:1.8;}
/* state chips */
.st-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.5px;padding:4px 9px;border-radius:5px;}
.st-chip .d{width:6px;height:6px;border-radius:50%;background:currentColor;}
.st-chip.verified{background:var(--green-bg);color:var(--green);}
.st-chip.review{background:var(--amber-bg);color:var(--amber);}
.st-chip.source{background:var(--cobalt-bg);color:var(--cobalt);}
.st-chip.rejected{background:var(--oxide-bg);color:var(--oxide);}
/* image treatment — torn edge faces the core. choose the side that meets your content. */
.st-photo{position:relative;display:inline-block;}.st-paper{background:#fff;padding:10px 10px 4px;filter:drop-shadow(0 1px 2px rgba(20,20,19,.32)) drop-shadow(0 12px 18px rgba(20,20,19,.20)) drop-shadow(0 26px 36px rgba(20,20,19,.14));}
.st-photo .win{display:block;line-height:0;overflow:hidden;}
.st-photo .win img{width:100%;height:100%;object-fit:cover;display:block;}
.st-photo .cap{font-family:var(--hand);font-weight:700;color:#111110;padding:9px 4px 2px;line-height:1.05;background:#fff;}
.st-photo .cap small{font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:1px;color:#6B6B61;display:block;margin-top:4px;text-transform:uppercase;}
.st-paper.tear-left{clip-path:polygon(6% 0%,100% 0%,100% 100%,4% 100%,3.59% 100%,0.12% 98.95%,1.03% 95.72%,0.25% 92.63%,3.79% 89.87%,3.95% 85.9%,0.14% 83.26%,0.16% 80.25%,3.52% 76.05%,0.21% 71.75%,3.63% 66.64%,2.64% 61.49%,0.4% 58.78%,2.36% 54.38%,0.09% 49.67%,1.18% 46.84%,1.09% 43.45%,2.58% 40.6%,0.46% 35.94%,0.48% 31.7%,3.58% 27.77%,2.61% 24.69%,1.19% 20.57%,0.33% 16.65%,0.79% 12.83%,0.77% 7.83%,1.01% 3.78%,0.56% 0.0%);padding-left:16px;}
.st-paper.tear-right{clip-path:polygon(0% 0%,96.07% 0.0%,99.71% 3.46%,99.69% 6.83%,97.48% 9.62%,97.39% 12.45%,99.33% 16.57%,96.15% 19.8%,97.32% 23.96%,97.48% 27.53%,99.56% 31.31%,99.84% 36.4%,98.93% 40.26%,99.21% 44.35%,97.74% 49.2%,99.98% 52.28%,99.16% 55.28%,99.97% 60.24%,99.42% 64.97%,99.62% 68.22%,99.91% 71.31%,99.12% 75.83%,99.12% 80.88%,99.05% 83.99%,99.58% 89.06%,98.92% 93.95%,99.5% 98.12%,98.96% 100%,0% 100%);padding-right:16px;}
.st-paper.tear-top{clip-path:polygon(0.0% 3.42%,4.22% 3.83%,7.82% 0.79%,11.93% 1.07%,16.12% 2.98%,18.93% 0.97%,23.19% 1.06%,28.37% 2.45%,33.26% 0.6%,37.75% 1.02%,41.36% 2.5%,45.87% 2.59%,49.98% 0.5%,53.73% 3.71%,58.51% 1.18%,61.33% 3.77%,65.88% 0.05%,68.55% 3.62%,72.72% 3.02%,76.57% 0.03%,79.77% 2.28%,84.18% 0.76%,88.07% 0.76%,92.27% 0.97%,97.27% 3.06%,100% 3.05%,100% 100%,0% 100%);padding-top:16px;}
.st-paper.tear-bottom{clip-path:polygon(0% 0%,100% 0%,100% 99.4%,99.01% 96.84%,95.21% 98.84%,90.15% 99.75%,85.48% 98.99%,80.6% 99.63%,76.52% 98.99%,72.94% 99.23%,67.97% 96.49%,63.74% 97.4%,59.97% 98.87%,57.03% 98.99%,52.55% 99.38%,47.52% 97.53%,44.7% 99.79%,39.74% 99.92%,35.08% 96.34%,31.46% 99.34%,26.89% 99.9%,22.7% 98.97%,18.74% 99.62%,14.33% 99.36%,10.83% 98.82%,7.52% 96.18%,4.46% 99.02%,0.0% 99.75%);padding-bottom:14px;}
.st-tape{position:absolute;width:90px;height:23px;background:rgba(231,219,176,.74);border-left:1px dashed rgba(0,0,0,.07);border-right:1px dashed rgba(0,0,0,.07);}
body.dark .st-tape{background:rgba(120,112,84,.5);}
.st-pin{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--acc);box-shadow:0 2px 4px rgba(0,0,0,.35),inset -2px -2px 3px rgba(0,0,0,.25);}
.st-pin::after{content:"";position:absolute;top:3px;left:3px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);}
/* ---------- Stuck-paper treatment (.st-stuck): a note taped to the board. ----------
Apply ONLY to standalone note / quote / preview / callout cards, never grid tiles.
Angle is randomised per element by grid-motion.js via --tilt/--tape/--tapex. */
.st-stuck{
position:relative;
background:var(--surface);
border:1px solid color-mix(in srgb, var(--ink) 6%, transparent);
border-radius:2px;
transform:rotate(var(--tilt,-1.4deg));
background-image:
linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 9px),
linear-gradient(0deg, rgba(40,34,20,.035), rgba(40,34,20,0) 14px);
box-shadow:
0 1px 1px rgba(28,24,14,.05),
1px 2px 4px rgba(28,24,14,.06),
3px 6px 11px rgba(28,24,14,.07),
6px 13px 22px rgba(28,24,14,.08),
9px 22px 38px rgba(28,24,14,.06);
transition:transform .32s cubic-bezier(.2,.85,.25,1), box-shadow .32s ease;
}
body.dark .st-stuck{
/* white paper on the dark board: the note carries its own light palette */
--surface:#FFFFFF; --ink:#111110; --ink2:#33332B; --mut:#6B6B61; --line:#E2E2DC;
color:var(--ink);
background:#FCFBF7;
border-color:rgba(0,0,0,.14);
background-image:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0) 9px), linear-gradient(0deg, rgba(40,34,20,.04), rgba(40,34,20,0) 14px);
box-shadow:0 1px 2px rgba(0,0,0,.5), 4px 10px 22px rgba(0,0,0,.55), 10px 26px 50px rgba(0,0,0,.42);
}
.st-stuck:hover{
transform:rotate(calc(var(--tilt,-1.4deg) * .35)) translateY(-3px) scale(1.014);
box-shadow:0 2px 3px rgba(28,24,14,.06),2px 5px 9px rgba(28,24,14,.08),5px 12px 22px rgba(28,24,14,.10),9px 24px 40px rgba(28,24,14,.11),14px 36px 60px rgba(28,24,14,.07);
}
.st-stuck::before{
content:"";position:absolute;top:-9px;left:calc(50% + var(--tapex,0px));
transform:translateX(-50%) rotate(var(--tape,-1.5deg));
width:98px;height:28px;z-index:2;
background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.05) 48%, rgba(70,58,28,.06)),repeating-linear-gradient(90deg, rgba(70,58,28,.05) 0 1px, transparent 1px 4px),rgba(214,201,158,.5);
box-shadow:0 2px 5px rgba(28,24,14,.14);
-webkit-mask-image:linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.st-stuck.pin::before{
width:18px;height:18px;border-radius:50%;top:-7px;z-index:3;
background:radial-gradient(circle at 36% 30%, #ffb3b3 0 10%, #ff7a7a 32%, var(--acc) 62%, color-mix(in srgb, var(--acc) 62%, #000) 100%);
box-shadow:0 3px 6px rgba(28,24,14,.4), inset -2px -2px 4px rgba(0,0,0,.35), inset 2px 2px 3px rgba(255,255,255,.6);
-webkit-mask-image:none;mask-image:none;
}
@media (prefers-reduced-motion: reduce){ .st-stuck{transition:none} .st-stuck:hover{transform:rotate(var(--tilt,-1.4deg))} }
/* Shared keyboard focus treatment (matches grid-app.css) */
:where(button,a,textarea,input,select):focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px;}