/* ============================================================ DRAWMOORE — paper / sketchbook A sheet of warm art paper you draw on. Pencil-gray ink, tactile grain, deckled edges, sketchbook binding. The whole surface is paper; the centerpiece is a live drawing board. Two themes, both intentional: - light: warm art-paper, graphite line. - dark: charcoal sketch / chalkboard, chalk-white line. Theme is driven by [data-theme] on , set before paint. ============================================================ */ /* ---------- tokens: LIGHT (warm art-paper) ---------- */ :root, :root[data-theme="light"] { --bg: oklch(95.5% 0.014 78); /* warm sheet */ --bg-deep: oklch(92.5% 0.018 74); /* shadowed gutter / behind sheet */ --sheet: oklch(97.2% 0.012 82); /* the drawing sheet, a touch brighter */ /* graphite ink ramp */ --ink: oklch(28% 0.012 60); /* body + headings, pencil-dark */ --ink-soft: oklch(40% 0.012 60); /* secondary text (≥4.5:1 on sheet) */ --ink-faint: oklch(50% 0.010 60); /* hints, captions (≥4.5:1 on sheet) */ --line: oklch(32% 0.010 60); /* the drawn stroke colour */ /* a single restrained accent: a red sketch pencil / margin mark */ --mark: oklch(54% 0.17 28); /* terracotta-red ink */ --mark-deep: oklch(46% 0.18 28); /* hairlines on paper */ --rule: oklch(78% 0.014 70); --rule-soft: oklch(85% 0.012 72); /* ink-button text colour (light = paper) */ --on-ink: oklch(96% 0.012 82); /* paper texture controls */ --grain-blend: multiply; --grain-op-fine: 0.16; --grain-op-coarse: 0.06; --vignette: oklch(86% 0.02 72 / .35); --tape: oklch(89% 0.05 88 / .65); --tape-edge: oklch(80% 0.05 88 / .5); --board-grid: oklch(70% 0.02 70 / .06); } /* ---------- tokens: DARK (charcoal sketch / chalkboard) ---------- */ :root[data-theme="dark"] { --bg: oklch(23% 0.010 250); /* slate-charcoal board */ --bg-deep: oklch(19% 0.012 250); /* behind the sheet */ --sheet: oklch(27% 0.012 250); /* the working sheet, a touch lighter */ /* chalk / white-ink ramp (light type needs more air) */ --ink: oklch(93% 0.008 250); /* chalk-bright headings + body */ --ink-soft: oklch(80% 0.008 250); /* secondary text */ --ink-faint: oklch(66% 0.008 250); /* hints, captions */ --line: oklch(95% 0.006 250); /* the drawn stroke = chalk on board */ /* accent stays warm so the brand reads in both modes */ --mark: oklch(70% 0.15 38); /* warm ochre-red, brighter for dark */ --mark-deep: oklch(76% 0.15 45); --rule: oklch(40% 0.012 250); --rule-soft: oklch(34% 0.012 250); --on-ink: oklch(22% 0.010 250); /* dark text on the chalk-white button */ --grain-blend: screen; /* tooth reads as light dust on dark */ --grain-op-fine: 0.10; --grain-op-coarse: 0.05; --vignette: oklch(12% 0.01 250 / .55); --tape: oklch(40% 0.03 88 / .5); --tape-edge: oklch(50% 0.04 88 / .45); --board-grid: oklch(80% 0.02 250 / .055); } :root { --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --ease: cubic-bezier(.22,.61,.36,1); /* ease-out-quart-ish */ --ease-expo: cubic-bezier(.16,1,.3,1); --maxw: 1180px; --z-binding: 5; --z-pencil: 60; color-scheme: light dark; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100%; font-family: "Inter", system-ui, sans-serif; color: var(--ink); background-color: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; transition: background-color .4s var(--ease), color .4s var(--ease); } /* accessible helpers */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: .6rem; left: .6rem; z-index: 100; background: var(--ink); color: var(--on-ink); padding: .55rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; text-decoration: none; transform: translateY(-150%); transition: transform .2s var(--ease); } .skip-link:focus { transform: translateY(0); } /* visible focus everywhere */ :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; border-radius: var(--r-sm); } /* ---------- paper grain / tooth (pure CSS, SVG fractal noise) ---------- */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: var(--grain-op-fine); mix-blend-mode: var(--grain-blend); } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 120% at 50% 0%, transparent 60%, var(--vignette) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.18' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.6'/%3E%3C/svg%3E"); opacity: var(--grain-op-coarse); mix-blend-mode: var(--grain-blend); } /* keep everything above the texture layers */ main, .colophon, .binding { position: relative; z-index: 1; } .pencil { z-index: var(--z-pencil); } /* ---------- sketchbook binding (left margin rings) ---------- */ .binding { position: fixed; top: 0; left: 0; bottom: 0; width: 46px; z-index: var(--z-binding); pointer-events: none; background: linear-gradient(90deg, var(--bg-deep) 0%, transparent 100%); border-right: 1px dashed var(--rule); } .binding::before { content: ""; position: absolute; top: 0; bottom: 0; left: 19px; width: 8px; background-image: radial-gradient(circle at 50% 50%, var(--ink-faint) 0 2.4px, transparent 2.8px); background-size: 8px 46px; background-repeat: repeat-y; opacity: .55; } @media (max-width: 760px) { .binding { display: none; } } /* ---------- fixed right-side rail ---------- */ /* A pinned sketchbook tab on the right edge. Holds the DRAWMOORE brand at the top, the section links, then the theme toggle. ALL text is upright and horizontal — never rotated — and stays in place while scrolling. */ .rail { position: fixed; /* nudged down from dead-center so it doesn't sit pinned too high */ top: 56%; right: clamp(.85rem, 1.6vw, 1.6rem); transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: stretch; gap: .5rem; padding: .85rem .8rem; width: 11rem; /* never exceed the viewport: cap by available width minus the right gap */ max-width: calc(100vw - 2rem); background: color-mix(in oklab, var(--sheet) 90%, transparent); border: 1px solid var(--rule-soft); border-radius: 18px; box-shadow: 0 1px 0 oklch(100% 0 0 / .12) inset, 0 14px 34px -18px oklch(0% 0 0 / .42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .4s var(--ease), border-color .4s var(--ease); } /* brand block at the top of the rail: glyph + name on a single row. */ .rail__brand { display: flex; align-items: center; column-gap: .5rem; text-decoration: none; color: var(--ink); padding: .15rem .25rem .35rem; min-width: 0; } .rail__glyph { color: var(--mark); display: inline-flex; flex: none; } .rail__brandname { min-width: 0; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1; } .rail__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: .1rem; } .rail__link { display: flex; flex-direction: row; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink-soft); padding: .42rem .5rem; border-radius: 10px; transition: color .25s var(--ease), background .25s var(--ease); } .rail__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); flex: none; transition: background .25s var(--ease), transform .25s var(--ease); } .rail__text { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1; } .rail__link:hover { color: var(--ink); background: oklch(60% 0.02 72 / .1); } .rail__link:hover .rail__dot { background: var(--mark); transform: scale(1.25); } .rail__link.is-active { color: var(--ink); } .rail__link.is-active .rail__dot { background: var(--mark); transform: scale(1.4); } .rail__sep { width: 100%; height: 1px; background: var(--rule); margin: .1rem 0; } .rail__icons { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .25rem; padding: 0 .15rem; } /* single, site-wide connect wallet (lives in the studio section). small + paper-styled: a compact sketchbook button, not a wide bar. */ .connect { font-family: "Inter", sans-serif; font-size: .8rem; font-weight: 500; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: 999px; padding: .34rem .85rem; min-height: 34px; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 0 oklch(100% 0 0 / .1) inset, 0 2px 6px -4px oklch(0% 0 0 / .35); transition: transform .14s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .connect:hover { transform: translateY(-1px); border-color: var(--ink-soft); box-shadow: 0 1px 0 oklch(100% 0 0 / .1) inset, 0 5px 12px -7px oklch(0% 0 0 / .45); } .connect:active { transform: translateY(0); } .connect.is-connected { background: transparent; color: var(--ink-soft); border-color: var(--rule-soft); border-style: dashed; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem; box-shadow: none; } /* minimal icon button (theme toggle) */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; border-radius: 999px; text-decoration: none; transition: color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease); } .icon-btn:hover { color: var(--ink); background: oklch(60% 0.02 72 / .12); } .icon-btn:active { transform: scale(.94); } /* theme toggle: sun/moon icon swap only */ .theme-toggle { position: relative; } .theme-toggle__sun, .theme-toggle__moon { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; transition: opacity .25s var(--ease), transform .3s var(--ease-expo); } .theme-toggle__moon { opacity: 0; transform: rotate(-30deg) scale(.7); } [data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(30deg) scale(.7); } [data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); } /* rail sizing: slimmer icons inside the rail */ .rail .icon-btn { width: 34px; height: 34px; } /* OpenSea logomark in the rail — quiet, monochrome, theme-aware via currentColor. Matches the theme toggle's weight; lifts to full ink on hover/focus like the other rail controls. */ .rail__opensea { color: var(--ink-soft); } .rail__opensea svg { display: block; width: 18px; height: 18px; } .rail__opensea:hover { color: var(--ink); } /* X (formerly Twitter) mark in the rail — same quiet, monochrome, theme-aware treatment as the OpenSea mark; sits between it and the theme toggle. Lifts to full ink on hover/focus like its neighbours. */ .rail__x { color: var(--ink-soft); } .rail__x svg { display: block; width: 18px; height: 18px; } .rail__x:hover { color: var(--ink); } /* On shorter / narrower viewports, dock the rail to the bottom as a compact horizontal bar. Brand stays readable; links collapse to upright text chips. */ @media (max-width: 820px) { .rail { top: auto; bottom: clamp(.6rem, 3vw, 1rem); right: 50%; left: auto; transform: translateX(50%); width: auto; max-width: calc(100vw - 1.4rem); flex-direction: row; align-items: center; flex-wrap: nowrap; gap: .45rem; padding: .45rem .7rem; border-radius: 999px; } .rail__brand { padding: 0 .15rem; gap: .4rem; } .rail__brandname { font-size: .9rem; } .rail__sep { width: 1px; height: 22px; margin: 0 .1rem; } .rail__links { flex-direction: row; align-items: center; gap: .05rem; } .rail__link { flex-direction: row; padding: .35rem .45rem; gap: .35rem; } .rail__text { font-size: .66rem; letter-spacing: .1em; } .rail__icons { flex-direction: row; gap: .1rem; } } /* very narrow phones: drop the section-link text to dots, keep the brand. */ @media (max-width: 520px) { .rail { gap: .3rem; padding: .4rem .55rem; } .rail__brandname { font-size: .82rem; } .rail__link { padding: .4rem .3rem; gap: 0; } .rail__text { display: none; } /* dots remain as nav targets */ .rail__dot { width: 8px; height: 8px; } .rail .icon-btn { width: 38px; height: 38px; } } /* ---------- shared type ---------- */ .mono { font-family: "JetBrains Mono", ui-monospace, monospace; } .muted { color: var(--ink-faint); } em { font-style: italic; } .section-title { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } .section-lede { max-width: 60ch; color: var(--ink-soft); font-size: 1.02rem; margin-top: .85rem; text-wrap: pretty; } /* ============================================================ DRAW — interactive centerpiece ============================================================ */ .draw-section { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) clamp(1.1rem, 4vw, 2.6rem) 2.4rem; text-align: center; } .draw-head { max-width: 46rem; margin: 0 auto; } .draw-title { font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(2.1rem, 7.5vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; } .draw-title em { font-weight: 400; font-style: italic; position: relative; white-space: nowrap; } /* a hand-inked underline scribble under the emphasis */ .draw-title em::after { content: ""; position: absolute; left: -1%; right: -1%; bottom: -.12em; height: .42em; background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 16 C 60 6, 110 20, 160 12 C 210 5, 250 18, 297 9' fill='none' stroke='%23b5532f' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E"); opacity: .85; pointer-events: none; } .draw-sub { max-width: 50ch; margin: 1.1rem auto 0; color: var(--ink-soft); font-size: 1.02rem; text-wrap: pretty; } /* the paper sheet that holds the board */ .paper { position: relative; max-width: 620px; margin: clamp(1.6rem, 5vw, 2.6rem) auto 0; background: var(--sheet); border-radius: var(--r-md); padding: clamp(.7rem, 2vw, 1.1rem); box-shadow: 0 1px 0 oklch(100% 0 0 / .15) inset, 0 2px 4px oklch(0% 0 0 / .12), 0 22px 50px -28px oklch(0% 0 0 / .42); border: 1px solid var(--rule-soft); transition: background .4s var(--ease), border-color .4s var(--ease); } /* red margin rule, classic sketchbook left line */ .paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(28px, 6%, 54px); width: 1.5px; background: var(--mark); opacity: .22; pointer-events: none; border-radius: 2px; } /* tape strip, like a sketch pinned down at the top */ .paper::after { content: ""; position: absolute; top: -10px; left: 50%; width: 86px; height: 26px; transform: translateX(-50%) rotate(-2.5deg); background: var(--tape); border: 1px solid var(--tape-edge); box-shadow: 0 2px 6px oklch(0% 0 0 / .14); pointer-events: none; } .paper__board { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; background: linear-gradient(var(--board-grid) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, var(--board-grid) 1px, transparent 1px) 0 0 / 28px 100%; border-radius: var(--r-sm); touch-action: none; cursor: none; } @media (hover: none) { .paper__board { cursor: crosshair; } } /* in the editor, the face you own sits behind your strokes, drawn in the theme ink (currentColor), softened so your accent lines stand out */ #editorFaceLayer { color: var(--ink); opacity: .62; } #editorFaceLayer.is-loaded { opacity: .66; } [data-theme="dark"] #editorFaceLayer { color: var(--ink); opacity: .8; } /* your committed + live ink (the lines you add) */ .ink-live { stroke: var(--mark-deep); stroke-width: 4.2; fill: none; } #committed .user-line { stroke: var(--mark-deep); stroke-width: 4.2; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .95; } .paper__hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-3deg); font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: clamp(1.1rem, 3vw, 1.6rem); color: var(--ink-faint); pointer-events: none; user-select: none; transition: opacity .4s var(--ease); text-align: center; } .paper.has-ink .paper__hint { opacity: 0; } .paper__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .8rem .6rem .35rem; margin-top: .2rem; } .meter { display: inline-flex; align-items: baseline; gap: .45rem; font-size: .95rem; color: var(--ink-soft); } .meter__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); } .meter__num { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; transition: transform .35s var(--ease-expo); display: inline-block; } .meter__num.bump { transform: translateY(-3px) scale(1.18); } .tools { display: inline-flex; gap: .5rem; } .tool { font-family: "Inter", sans-serif; font-size: .85rem; font-weight: 500; color: var(--ink-soft); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: .38rem .8rem; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease); } .tool:hover:not(:disabled) { border-color: var(--ink-soft); color: var(--ink); background: oklch(60% 0.02 72 / .12); } .tool:active:not(:disabled) { transform: translateY(1px); } .tool:disabled { opacity: .42; cursor: not-allowed; } /* free-sketchpad footnote beneath the hero board */ .draw-foot { max-width: 52ch; margin: 1.4rem auto 0; color: var(--ink-faint); font-size: .9rem; text-wrap: pretty; } .draw-foot a { color: var(--mark-deep); text-decoration-color: var(--rule); text-underline-offset: 3px; } .draw-foot a:hover { text-decoration-color: var(--mark); } .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; } /* ============================================================ PENCIL CURSOR ============================================================ */ .pencil { position: fixed; top: 0; left: 0; width: 56px; height: 56px; pointer-events: none; transform: translate3d(-9999px, -9999px, 0); transform-origin: 14% 92%; opacity: 0; transition: opacity .18s var(--ease); will-change: transform; filter: drop-shadow(2px 4px 3px oklch(0% 0 0 / .32)); } .pencil.is-visible { opacity: 1; } .pencil.is-down .pencil__g { transform: translate(1px, 1px) rotate(-2deg); transform-origin: 14% 92%; } .pencil__g { transition: transform .08s var(--ease); } /* ============================================================ FACES — render-pool strip ============================================================ */ .faces { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.1rem, 4vw, 2.6rem); } .faces__head { max-width: 50rem; } .faces__strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(1rem, 3vw, 2rem); margin-top: 2rem; /* reserve row height so async-loaded cards don't shift the layout. no content-visibility/contain here — it would clip the hover lift. */ min-height: 190px; } @media (min-width: 900px) { .faces__strip { grid-template-columns: repeat(5, 1fr); } } /* each sketch = paper card pinned, slightly tilted */ .sketch { position: relative; background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: var(--r-sm); padding: .55rem .55rem .65rem; box-shadow: 0 1px 0 oklch(100% 0 0 / .12) inset, 0 14px 26px -18px oklch(0% 0 0 / .5); transform: rotate(var(--tilt, 0deg)); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .4s var(--ease), border-color .4s var(--ease); opacity: 1; } .js .sketch:not(.is-in) { opacity: 0; } .sketch.is-in { animation: pinDrop .55s var(--ease-expo) both; } @keyframes pinDrop { from { opacity: 0; transform: rotate(var(--tilt,0deg)) translateY(14px); } to { opacity: 1; transform: rotate(var(--tilt,0deg)) translateY(0); } } .sketch:hover, .sketch:focus-within { transform: rotate(0deg) translateY(-8px) scale(1.035); box-shadow: 0 1px 0 oklch(100% 0 0 / .14) inset, 0 30px 48px -18px oklch(0% 0 0 / .6); border-color: var(--ink-soft); z-index: 3; } .sketch:hover .sketch__pin, .sketch:focus-within .sketch__pin { transform: translateX(-50%) translateY(-1px) scale(1.12); } .sketch__pin { position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, oklch(72% 0.17 28), oklch(50% 0.17 28)); box-shadow: 0 3px 5px oklch(0% 0 0 / .4); transition: transform .35s var(--ease); } .sketch__art { display: block; width: 100%; aspect-ratio: 1 / 1; background: linear-gradient(var(--board-grid) 1px, transparent 1px) 0 0 / 100% 22px, var(--sheet); border-radius: 2px; overflow: hidden; } .sketch__art { color: var(--ink); } .sketch__art svg { display: block; width: 100%; height: 100%; } .sketch__cap { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; margin-top: .5rem; font-size: .78rem; } .sketch__species { font-family: "Fraunces", serif; font-weight: 500; color: var(--ink); } .sketch__tier { font-family: "JetBrains Mono", monospace; font-size: .64rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--tier, var(--ink-faint)); border: 1px solid color-mix(in oklab, var(--tier, var(--ink-faint)) 45%, transparent); border-radius: 999px; padding: .1rem .42rem; white-space: nowrap; } /* color-code rarity so common -> legendary reads at a glance */ .sketch__tier[data-tier="common"] { --tier: var(--ink-faint); } .sketch__tier[data-tier="uncommon"] { --tier: oklch(58% 0.10 160); } .sketch__tier[data-tier="rare"] { --tier: oklch(60% 0.13 240); } .sketch__tier[data-tier="epic"] { --tier: oklch(58% 0.16 305); } .sketch__tier[data-tier="legendary"] { --tier: oklch(64% 0.15 70); } /* ============================================================ STUDIO — WALLET · MINT · BURN · DRAW-ON-YOUR-NFT ============================================================ */ .studio { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem, 6vw, 3.5rem) clamp(1.2rem, 4vw, 2.6rem) 3rem; } .studio__head { max-width: 60rem; } /* the single, shared connect row — light + inline, no heavy card */ .wallet-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem; margin-top: 1.6rem; } .wallet-bar .connect { flex: 0 0 auto; } .wallet-bar__note { color: var(--ink-faint); font-size: .82rem; text-wrap: pretty; } .studio__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem 1.4rem; margin-top: 1.5rem; max-width: 40rem; } .studio__facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: .15rem; } .studio__facts dd { font-family: "Fraunces", serif; font-size: 1.25rem; color: var(--ink); } .studio__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.1rem, 2.5vw, 1.5rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); } @media (min-width: 760px) { .studio__grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- draw-on-your-NFT block ---------- */ .onface { margin-top: clamp(1.4rem, 3vw, 2rem); background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: var(--r-lg); padding: clamp(1.3rem, 3.5vw, 2rem); box-shadow: 0 1px 0 oklch(100% 0 0 / .12) inset, 0 16px 38px -26px oklch(0% 0 0 / .42); } .onface__head { display: flex; align-items: flex-start; gap: .8rem; } .onface__head .act__icon { color: var(--mark-deep); border-color: var(--mark); flex: 0 0 auto; } .onface__lede { margin-top: .35rem; min-height: 0; max-width: 56ch; } .onface__layout { display: grid; grid-template-columns: 1fr; gap: clamp(1.2rem, 3vw, 1.8rem); margin-top: 1.4rem; } @media (min-width: 820px) { .onface__layout { grid-template-columns: minmax(0, 18rem) 1fr; align-items: start; } } .onface__sub { font-family: "Inter", sans-serif; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: .8rem; } /* owned-faces list */ .myfaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .7rem; align-content: start; min-height: 96px; } .myfaces__empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 96px; padding: 1rem; color: var(--ink-faint); font-size: .88rem; text-wrap: pretty; border: 1px dashed var(--rule); border-radius: var(--r-md); background: var(--bg); } .myface { display: flex; flex-direction: column; gap: .35rem; padding: .4rem; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-md); cursor: pointer; transition: border-color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease); } .myface:hover { border-color: var(--ink-soft); transform: translateY(-2px); } .myface.is-picked { border-color: var(--mark); box-shadow: 0 0 0 1px var(--mark); } .myface__art { display: block; width: 100%; aspect-ratio: 1 / 1; color: var(--ink); border-radius: 2px; overflow: hidden; } .myface__art svg { display: block; width: 100%; height: 100%; } .myface__id { font-size: .78rem; font-weight: 500; color: var(--ink-soft); text-align: center; letter-spacing: .02em; } .myface:hover .myface__id, .myface.is-picked .myface__id { color: var(--ink); } /* editor board reuses .paper; tighten its max-width inside the grid */ .paper--editor { max-width: 520px; margin: 0; } .onface__commit { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; margin-top: 1.2rem; } .onface__commit .btn { margin-top: 0; } @media (max-width: 600px) { .onface__commit { align-items: stretch; } .onface__commit .btn--compact { width: 100%; } } /* one action panel */ .act { display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: var(--r-lg); padding: clamp(1.2rem, 3vw, 1.5rem); box-shadow: 0 1px 0 oklch(100% 0 0 / .12) inset, 0 16px 38px -26px oklch(0% 0 0 / .42); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .4s var(--ease), border-color .4s var(--ease); } .act:hover { transform: translateY(-3px); box-shadow: 0 1px 0 oklch(100% 0 0 / .12) inset, 0 22px 44px -26px oklch(0% 0 0 / .5); } .act--draw { border-color: var(--mark); box-shadow: 0 1px 0 oklch(100% 0 0 / .12) inset, 0 16px 38px -26px var(--mark-deep); } .act--note { background: var(--bg); } .act--note:hover { transform: none; } .act--note .act__icon { color: var(--mark-deep); border-color: var(--mark); } /* inline how-it-works list (no FAQ; explained in plain language) */ .howto { list-style: none; margin: 1rem 0 .2rem; padding: 0; display: flex; flex-direction: column; gap: .8rem; flex: 1 0 auto; } .howto li { position: relative; padding-left: 1.1rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; text-wrap: pretty; } .howto li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--mark); } .howto strong { color: var(--ink); font-weight: 600; } .act__head { display: flex; align-items: center; gap: .6rem; } .act__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); } .act--draw .act__icon { color: var(--mark-deep); border-color: var(--mark); } .act__title { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink); } .act__lede { margin-top: .7rem; color: var(--ink-soft); font-size: .92rem; text-wrap: pretty; min-height: 2.6em; } .act__body { margin: 1.1rem 0 .4rem; display: flex; flex-direction: column; gap: .7rem; flex: 1 0 auto; } .stepper { display: flex; align-items: center; justify-content: space-between; background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; padding: .3rem; } .stepper__btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background .2s var(--ease), transform .12s var(--ease); } .stepper__btn:hover { background: oklch(60% 0.02 72 / .14); } .stepper__btn:active { transform: scale(.94); } .stepper__value { font-size: 1.2rem; color: var(--ink); } /* burn token input */ .field { display: flex; flex-direction: column; gap: .35rem; } .field__k { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); } .field__in { width: 100%; background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; padding: .55rem .95rem; color: var(--ink); font-size: 1rem; transition: border-color .2s var(--ease); } .field__in::placeholder { color: var(--ink-faint); } .field__in:focus { border-color: var(--ink-soft); outline: none; } .field__in:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; } .quote { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding-bottom: .6rem; border-bottom: 1px dashed var(--rule); } .quote__k { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); } .quote__v { font-size: 1.1rem; color: var(--ink); } .act--draw .quote__v { color: var(--mark-deep); } .btn { font-family: "Inter", sans-serif; font-weight: 600; font-size: .95rem; border-radius: 999px; cursor: pointer; border: 1px solid transparent; padding: .8rem 1.4rem; margin-top: 1rem; transition: transform .14s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease); } .btn--block { display: block; width: 100%; } .btn--ink { background: var(--ink); color: var(--on-ink); box-shadow: 0 6px 16px -8px oklch(0% 0 0 / .5); } .btn--ink:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px oklch(0% 0 0 / .55); } .btn--ink:active { transform: translateY(0); } .btn--mark { background: transparent; color: var(--mark-deep); border-color: var(--mark); } .btn--mark:hover { background: var(--mark); color: var(--on-ink); transform: translateY(-1px); } .btn--mark:active { transform: translateY(0); } /* compact button — small + well-proportioned (e.g. Commit on-chain) */ .btn--compact { font-size: .85rem; padding: .5rem 1.05rem; margin-top: 0; } .act__status { margin-top: .85rem; font-size: .82rem; color: var(--ink-faint); text-wrap: pretty; min-height: 2.4em; } /* ============================================================ colophon ============================================================ */ .colophon { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem clamp(1.2rem, 4vw, 2.6rem) 3.5rem; border-top: 1px dashed var(--rule); } .colophon__lore { font-family: "Fraunces", serif; font-style: italic; font-size: clamp(1.05rem, 2.4vw, 1.4rem); color: var(--ink-soft); max-width: 50ch; text-wrap: pretty; } .colophon__row { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; justify-content: space-between; align-items: center; margin-top: 1.6rem; font-size: .85rem; } .colophon__brand { font-family: "Fraunces", serif; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: .5rem; } .colophon__ticker { font-family: "JetBrains Mono", monospace; font-size: .66rem; font-weight: 500; letter-spacing: .14em; color: var(--ink-faint); border: 1px solid var(--rule); border-radius: 999px; padding: .1rem .4rem; } .colophon__meta { color: var(--ink-faint); } /* Below the rail's bottom-dock breakpoint (820px) the rail becomes a fixed pill at the bottom-center of the screen. Reserve space underneath the footer so the floating rail never covers the colophon text when scrolled to the end. Placed AFTER the base .colophon padding shorthand so this override wins. Clearance = rail height (~60px) + its bottom gap (~16px) + comfortable margin, plus the device safe-area inset on notched phones. */ @media (max-width: 820px) { .colophon { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); } } /* ============================================================ reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .sketch { opacity: 1; transform: rotate(var(--tilt,0deg)); } } /* ============================================================ mobile-first tightening (≤ 600px) ============================================================ */ @media (max-width: 600px) { body { line-height: 1.6; } .paper { max-width: 100%; padding: .7rem; } .paper__bar { padding: .7rem .3rem .3rem; } .meter { font-size: .88rem; gap: .35rem; } .meter__num { font-size: 1.2rem; } .tools { gap: .4rem; flex-wrap: wrap; justify-content: flex-end; } .tool { padding: .42rem .7rem; min-height: 40px; } .draw-sub { font-size: .98rem; } .paper--editor { max-width: 100%; } /* hide the floating pencil cursor on touch — it can't track touch */ .pencil { display: none; } } /* keep tap targets comfortable on small / coarse pointers */ @media (max-width: 600px), (hover: none) { .tool, .stepper__btn, .icon-btn { min-height: 44px; min-width: 44px; } .connect { min-height: 44px; } }