/* Gantry.World — Round 3 tokens + core components. Shared by round3/index.html, round3/system.html and round3/tapes/*.html. Page-specific CSS extends these; it never redefines tokens. Fonts (load in each page ): https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400;62..125,500;62..125,800;62..125,900&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Serif:wght@400&display=swap */ :root { /* ground */ --paper: #FAF8F2; /* page */ --white: #FFFFFF; /* panels, windows, J-cards */ --shell: #E7E4DB; /* cassette shell / hardware / desk */ --ink: #14161B; /* 17.0:1 on paper */ --graphite: #4B4F57; /* secondary text, 7.7:1 on paper */ --rule: #D5D2C8; /* decorative rules only */ --rule-strong: #8A8779; /* essential boundaries, 3.4:1 */ /* signal: blue, orange, white, with green as the complement. No rainbow. */ --cobalt: #1F4FD8; /* white on it 6.6:1; on paper 6.2:1 */ --orange: #F26B1D; /* ink on it 5.9:1; NEVER white text below 24px bold (3.05:1) */ --green: #1F9D55; /* ink on it 5.2:1; NEVER white text below 24px bold (3.49:1) */ --orange-ink: #B4460B; /* orange for small text on paper, 5.2:1 */ --green-ink: #157A40; /* green for small text on paper, 5.1:1 */ --cobalt-ink: #1A43B8; /* cobalt link text, 7.8:1 */ --cobalt-wash: #E4EAFB; --orange-wash: #FDE7DA; --green-wash: #DDF1E5; --riso-orange: #FF6A13; /* print layers only (multiply), never text */ /* series: how tapes are classified (one colour per series, not per tape) */ --series-o: var(--orange); /* Series O · Image tools : 001 Palette Pull, 003 Safe Crop */ --series-b: var(--cobalt); /* Series B · Words tools : 005 Thread Cutter, 006 Hook Bench */ --series-g: var(--green); /* Series G · Type & colour : 002 Type Tighter, 004 Contrast Pair */ /* type */ --display: "Archivo", system-ui, sans-serif; --body: "Archivo", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --serif: "IBM Plex Serif", Georgia, serif; /* space & shape */ --pad: clamp(20px, 4vw, 56px); --gap: 24px; --radius-tape: 6px; /* cassettes, J-cards, dials: softly rounded hardware */ --radius-ui: 0; /* panels, windows, buttons: hard drafting edges */ --shadow-hard: 4px 4px 0 var(--ink); --grain: url("data:image/svg+xml;utf8,"); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--body); } img { display: block; max-width: 100%; height: auto; } a { color: var(--cobalt-ink); } :focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } .wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--pad); } .label { font: 500 12px/1.4 var(--mono); letter-spacing: .03em; text-transform: uppercase; } .muted { color: var(--graphite); } .num { font: 400 1em/1 var(--serif); } .display { font: 900 clamp(52px, 8vw, 128px)/.9 var(--display); font-stretch: 88%; letter-spacing: -.035em; margin: 0; } .h2 { font: 800 clamp(32px, 4vw, 56px)/.95 var(--display); letter-spacing: -.025em; margin: 0; } .h3 { font: 800 22px/1.1 var(--display); letter-spacing: -.01em; margin: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- registration-marked panel (drafting chassis) ---------- */ .panel { position: relative; background: var(--white); border: 1px solid var(--ink); } .reg { position: relative; } .reg::before, .reg::after { content: ""; position: absolute; width: 15px; height: 15px; pointer-events: none; background: linear-gradient(var(--ink), var(--ink)) center/1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) center/100% 1px no-repeat; } .reg::before { left: -8px; top: -8px; } .reg::after { right: -8px; bottom: -8px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: var(--radius-ui); background: var(--white); color: var(--ink); font: 700 15px/1 var(--body); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-hard); transition: transform .08s, box-shadow .08s; } .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); } .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); } .btn-primary { background: var(--cobalt); color: var(--white); } .btn-play { background: var(--orange); color: var(--ink); } /* "use it now" / the free tool */ .btn-quiet { box-shadow: none; } .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } /* ---------- series tag ---------- */ .series { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .03em; } .series::before { content: ""; width: 12px; height: 12px; border: 1px solid var(--ink); background: var(--s, var(--ink)); } .series-o { --s: var(--series-o); } .series-b { --s: var(--series-b); } .series-g { --s: var(--series-g); } /* ---------- tape (J-card) : the unit every tool ships as ---------- */ .tape { --s: var(--ink); display: grid; grid-template-rows: auto auto 1fr auto; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius-tape); overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-hard); } .tape.series-o { --s: var(--series-o); } .tape.series-b { --s: var(--series-b); } .tape.series-g { --s: var(--series-g); } .tape-art { aspect-ratio: 1; background: var(--paper); border-bottom: 1.5px solid var(--ink); } .tape-art img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; } .tape-band { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--s); color: var(--ink); font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1.5px solid var(--ink); } .tape.series-b .tape-band { color: var(--white); } .tape-meta { padding: 14px 14px 10px; } .tape-no { font: 400 30px/1 var(--serif); } .tape-title { font: 800 22px/1.05 var(--display); letter-spacing: -.01em; margin: 6px 0 6px; } .tape-job { margin: 0; color: var(--graphite); font-size: 15px; line-height: 1.45; } .tape-sides { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); font: 400 12px/1.35 var(--mono); } .tape-sides > div { padding: 10px 12px; } .tape-sides > div + div { border-left: 1px solid var(--ink); background: var(--paper); } .tape-sides b { display: block; font: 700 12px/1.2 var(--mono); text-transform: uppercase; margin-bottom: 3px; } /* ---------- cassette shell (for a "loaded" tape in a deck) ---------- */ .cassette { --s: var(--ink); position: relative; width: 100%; aspect-ratio: 1.58; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--shell); padding: 7% 6% 16%; } .cassette.series-o { --s: var(--series-o); } .cassette.series-b { --s: var(--series-b); } .cassette.series-g { --s: var(--series-g); } .cassette-label { height: 100%; background: var(--white); border: 1px solid var(--ink); border-radius: 4px; position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; } .cassette-label .band { height: 22%; min-height: 10px; background: var(--s); border-bottom: 1px solid var(--ink); } .cassette-window { justify-self: center; align-self: center; width: 62%; height: 42%; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); display: flex; justify-content: space-between; align-items: center; padding: 0 9%; } .cassette-reel { width: 26%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--ink); background: repeating-conic-gradient(var(--ink) 0 8deg, transparent 8deg 60deg); } .cassette.is-playing .cassette-reel { animation: gw-reel 2.4s linear infinite; } @keyframes gw-reel { to { transform: rotate(360deg); } } /* ---------- window (workbench canvas) ---------- */ .win { --s: var(--ink); position: relative; background: var(--white); border: 1.5px solid var(--ink); box-shadow: var(--shadow-hard); display: flex; flex-direction: column; min-width: 0; } .win.series-o { --s: var(--series-o); } .win.series-b { --s: var(--series-b); } .win.series-g { --s: var(--series-g); } .win-bar { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px 0 10px; background: var(--s); color: var(--ink); border-bottom: 1.5px solid var(--ink); font: 700 14px/1 var(--body); user-select: none; } .win.series-b .win-bar, .win.series-ink .win-bar { color: var(--white); } .win-grip { width: 14px; height: 14px; background: radial-gradient(currentColor 1.2px, transparent 1.4px) 0 0/5px 5px; opacity: .8; cursor: grab; } .win-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .win-title .no { font: 400 13px/1 var(--mono); margin-right: 8px; } .win-btn { width: 24px; height: 24px; display: grid; place-items: center; border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; font: 700 14px/1 var(--mono); } .win-body { padding: 16px; min-width: 0; } .win.is-focused { box-shadow: 6px 6px 0 var(--ink); } /* ---------- dial (see dial.js) ---------- */ gw-dial { --dial-size: 72px; --ind: var(--ink); display: inline-grid; justify-items: center; gap: 4px; cursor: ns-resize; touch-action: none; user-select: none; } gw-dial[tone="cobalt"] { --ind: var(--cobalt); } gw-dial[tone="orange"] { --ind: var(--orange); } gw-dial[tone="green"] { --ind: var(--green); } .gw-dial-svg { width: var(--dial-size); height: var(--dial-size); overflow: visible; } .gw-dial-ticks line { stroke: var(--rule-strong); stroke-width: 3; stroke-linecap: round; } .gw-dial-ticks line.on { stroke: var(--ind); } .gw-dial-shadow { fill: var(--ink); } .gw-dial-body { transform-origin: 50px 50px; transition: transform .12s cubic-bezier(.2,.8,.2,1); } .gw-dial-knurl { fill: var(--shell); stroke: var(--ink); stroke-width: 5; stroke-dasharray: 1.6 2.4; paint-order: stroke; } .gw-dial-cap { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; } .gw-dial-ind { fill: var(--ind); stroke: var(--ink); stroke-width: 1; } gw-dial.is-turning .gw-dial-cap { fill: var(--paper); } gw-dial:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; border-radius: 8px; } .gw-dial-read { font: 500 14px/1 var(--mono); } .gw-dial-label { font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--graphite); } /* ---------- shipping log (lives in the footer) ---------- */ .log { width: 100%; border-collapse: collapse; font-size: 15px; } .log th, .log td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--rule-strong); } .log thead th { font: 500 11px/1.3 var(--mono); text-transform: uppercase; border-top: 0; color: inherit; opacity: .8; } .log .when { font: 400 13px/1.4 var(--mono); white-space: nowrap; } .log .tapeno { font: 400 13px/1.4 var(--mono); white-space: nowrap; } /* ---------- utilities ---------- */ .grain { position: relative; } .grain::after { content: ""; position: absolute; inset: 0; background: var(--grain); mix-blend-mode: multiply; opacity: .18; pointer-events: none; } .riso-shift { text-shadow: 2px 1px 0 var(--riso-orange); } /* large display type only */