/* ============================================================================ tinytoolsstack design system — "the little workshop" (riso / handmade) ---------------------------------------------------------------------------- SINGLE SOURCE OF TRUTH for the visual language of every tinytoolsstack surface: the hub (tinytoolsstack.com), the about pages (/pomodoro, /shinkai), the legal pages (/privacy, /terms, /feedback), and every tool subdomain (tabloft, slashburst, ...). The thesis: a small independent maker's workshop — warm shelf paper, a characterful display serif (Fraunces), ink-bordered hard-shadow cards, and four riso ink pops (blue / coral / sun / grape), ONE assigned per tool. Deliberately NOT the AI-default warm-editorial cream (#ece9e3 greige + DM Serif + lone terracotta + left accent rail). See the design-system skill. How to use: link this file (``) OR, from a separate tool repo, vendor a copy at the repo root and keep it in sync. A page sets its tool accent once: . Do NOT re-declare tokens per page — change them here, once. ============================================================================ */ /* Fonts. tinytoolsstack is English-facing / global, so the Google Fonts CDN is acceptable here (matches the prior setup); a China-facing project would self-host per the china-user rule. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;1,9..144,600;1,9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap'); :root{ /* paper + ink */ --bg:#f7f4ec; /* warm shelf paper (NOT #ece9e3 greige) */ --card:#fffdf8; --ink:#1b1710; --body:#4a4236; --muted:#635c52; /* 6.0:1 on paper */ --subtle:#746e62; /* 4.6:1 on paper -- the AA floor for small text */ --line:#1b1710; /* the riso look leans on a real ink line */ --hair:rgba(27,23,16,.14); /* riso ink pops */ --blue:#2f57e8; --coral:#fa4a48; --sun:#ffb020; --grape:#7b5cff; /* per-tool accents — readable-on-paper variants; ONE per tool, forever. Assign a new tool the next unused hue; never reuse the AI-default clay. */ --p-tabloft:#2f57e8; --p-tabloft-fg:#fff; /* white on blue 5.8:1 */ --p-slashburst:#ff7a77; --p-slashburst-fg:#1b1710; /* ink on coral 7.1:1 */ --p-shinkai:#c8790a; --p-shinkai-fg:#fff; /* white on amber 3.4:1. Owner chose white over ink (5.3:1) on 2026-07-21, having seen both rendered. The AA shortfall on the /shinkai CTAs is accepted, not overlooked -- see docs/ROADMAP.md. The hue #c8790a is Shinkai's own and is not altered from another tool. */ --p-pomodoro:#448036; --p-pomodoro-fg:#fff; /* the tomato STEM green. Pomodoro is a tomato timer; the fruit is red but Slash Burst already owns coral, and two reds do not separate. A real tomato is red body + green stem, so the accent takes the stem (icon stays the red tomato) -- still anchored to the real object, fully distinct from the other three. Green #4a8a3f is the icon's own stem + a product token; #448036 holds it to AA as text (white 4.8:1), hue kept on the stem's 111 deg rather than drifting to a fresher green. See ADR-0004. */ --accent:var(--p-tabloft); /* default; each page overrides on */ /* Text ON the accent follows the HUE, not the theme: white is right on blue and 2.3:1 on Slash Burst's coral, so one global value cannot serve four tools. A page picks both together: Never hardcode #fff against var(--accent). */ --accent-fg:var(--p-tabloft-fg); /* The accent used AS TEXT on paper needs a darker value than the fill: the coral is 2.3:1 as text. Large display type may use --accent at the 3:1 threshold; anything small must use this. */ --accent-text:#ca3b37; --serif:'Fraunces',Georgia,serif; --sans:'Hanken Grotesk',-apple-system,system-ui,sans-serif; --shadow:5px 5px 0 var(--ink); --radius:16px; --maxw:1000px; } :root{color-scheme:light dark} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#16130e; --card:#211d16; --ink:#f6f1e6; --body:#c9bfad; --muted:#8f8574; --subtle:#908472; --line:#f6f1e6; --hair:rgba(246,241,230,.16); --shadow:5px 5px 0 #000; --p-tabloft:#7b93ff; --p-slashburst:#ff7a77; --p-shinkai:#f0b445; --p-pomodoro:#72b566; --p-tabloft-fg:#16130e; --p-slashburst-fg:#16130e; --p-shinkai-fg:#16130e; --p-pomodoro-fg:#16130e; --accent-fg:var(--p-tabloft-fg); --accent-text:#ff7a77; } } :root[data-theme="dark"]{ --bg:#16130e; --card:#211d16; --ink:#f6f1e6; --body:#c9bfad; --muted:#8f8574; --subtle:#908472; --line:#f6f1e6; --hair:rgba(246,241,230,.16); --shadow:5px 5px 0 #000; --p-tabloft:#7b93ff; --p-slashburst:#ff7a77; --p-shinkai:#f0b445; --p-pomodoro:#72b566; --p-tabloft-fg:#16130e; --p-slashburst-fg:#16130e; --p-shinkai-fg:#16130e; --p-pomodoro-fg:#16130e; --accent-fg:var(--p-tabloft-fg); --accent-text:#ff7a77; } *{box-sizing:border-box;margin:0;padding:0} body{font-family:var(--sans);color:var(--body);background:var(--bg);line-height:1.6; -webkit-font-smoothing:antialiased;min-height:100vh} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px} .wrap.narrow{max-width:920px} /* about + legal pages sit a touch narrower */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} a{color:inherit} /* ---- top bar ---- */ .top{display:flex;align-items:center;justify-content:space-between;padding:28px 0 0;gap:16px} .brand{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none} .brand .logo{width:36px;height:36px;flex:none} .brand b{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-0.01em;color:var(--ink)} .brand .back{font-size:12.5px;color:var(--subtle);margin-left:2px} .feedback{color:var(--ink);text-decoration:none;font-weight:600;font-size:13.5px;white-space:nowrap; display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:100px; background:var(--card);border:2px solid var(--line);box-shadow:2px 2px 0 var(--line); transition:transform .14s ease,box-shadow .14s ease} .feedback:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--line)} /* ---- hero ---- */ .hero{padding:56px 0 6px} .kicker{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.03em;text-transform:uppercase; color:var(--accent-fg);background:var(--accent);padding:5px 13px;border-radius:100px;margin-bottom:22px} .hero-question{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5.6vw,58px); line-height:1.03;letter-spacing:-0.015em;color:var(--ink);max-width:var(--hero-w,17ch);margin-bottom:26px} /* --hero-w: the cap is tuned to the LENGTH OF THIS PAGE'S SENTENCE, so it belongs to the page, not to the system. 17ch fits a ~35-40 char question in two lines; a longer one orphans its last word. Set --hero-w inline on .hero-question and re-render: pick the width whose break lands on a clause boundary, not merely the one with two lines. */ .hero-question em{font-style:italic;color:var(--coral)} /* hero tagline: the product's one-line promise, closing the hero, with a twinkling spark. Scoped to .hero so it never collides with .prose .tagline (the legal-page subtitle). Every tool page carries one. The spark is inline (8-point star), tinted --accent. */ .hero .tagline{font-family:var(--serif);font-weight:700;font-size:clamp(22px,3.2vw,32px); color:var(--ink);margin:30px 0 2px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em} .hero .tagline .spark{width:22px;height:22px;color:var(--accent);flex:none; animation:twinkle 3.6s ease-in-out infinite} @keyframes twinkle{0%,100%{opacity:.55;transform:rotate(0) scale(.85)} 50%{opacity:1;transform:rotate(90deg) scale(1.1)}} @media (prefers-reduced-motion:reduce){.hero .tagline .spark{animation:none;opacity:.9}} .lead{font-size:18px;line-height:1.58;color:var(--body);max-width:640px} .lead b{color:var(--ink);font-weight:700} .tts{font-family:var(--serif);font-weight:700;letter-spacing:-0.01em} /* product-head (about + tool landing hero) */ .product-head{display:flex;align-items:center;gap:16px;margin-bottom:24px} .product-head .icon{width:58px;height:58px;border-radius:15px;flex:none;display:block;border:2.5px solid var(--line);overflow:hidden} .product-head .icon svg,.product-head .icon img{width:100%;height:100%;display:block} .product-head .nm{font-family:var(--serif);font-weight:700;font-size:28px;color:var(--ink);line-height:1.05;letter-spacing:-0.01em} .product-head .kind{display:inline-flex;align-items:center;gap:6px;margin-top:6px; font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase; color:color-mix(in srgb, var(--accent) 62%, var(--ink))} /* 62%, not 72%: the ratio has to clear 4.5:1 for the LIGHTEST accent in the family, which is now Slash Burst's coral. At 72% that label measured 4.15:1. Re-check this whenever a tool's hue is lightened. */ .product-head .kind::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent)} /* ---- values strip ---- */ .values{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:36px 0 8px} .value{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:15px 16px} .value .vt{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:4px} .value .vi{width:18px;height:18px;flex:none} .value p{font-size:13px;color:var(--muted);line-height:1.45} /* ---- CTA ---- */ .cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px} .cta{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:var(--accent-fg); /* 19px BOLD, not 16px, and the size is load-bearing: >=18.66px bold is WCAG "large text", which drops the contrast threshold from 4.5:1 to 3:1. White on Shinkai's amber #c8790a is 3.39:1 -- it fails as normal text and passes as large text. Shrinking this below 18.66px silently reintroduces an AA failure on /shinkai. See docs/ROADMAP.md. */ text-decoration:none;font-family:var(--sans);font-weight:700;font-size:19px;padding:13px 26px;border-radius:100px; border:2.5px solid var(--line);box-shadow:3px 3px 0 var(--line); transition:transform .14s ease,box-shadow .14s ease} .cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--line)} /* the "cat's-eye" shine: a slow low-frequency light sweep across the primary CTA. Every install CTA (Add to Chrome / Get the iPhone app) carries it. overflow:hidden clips the sweep to the pill; the ::after is a skewed translucent band that crosses ~once every 9s. */ .cta{position:relative;overflow:hidden} .cta::after{content:'';position:absolute;top:0;left:0;width:55%;height:100%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:translateX(-220%) skewX(-18deg);animation:ctaShine 9s ease-in-out infinite} @keyframes ctaShine{0%{transform:translateX(-220%) skewX(-18deg)} 60%,100%{transform:translateX(360%) skewX(-18deg)}} @media (prefers-reduced-motion:reduce){.cta::after{animation:none;display:none}} .cta-text{color:var(--muted);font-size:14.5px;font-weight:600;text-decoration:underline; text-underline-offset:3px;text-decoration-color:var(--hair)} .cta-text:hover{color:var(--ink)} /* rate-us pill: a quiet honest ask in the CTA row, next to feedback. Genuine question naming the product ("Enjoying ? Rate us"), NEVER a literal star count. Links to the tool's Chrome Web Store / App Store listing. Bordered, not filled, so it stays secondary to the primary install CTA. */ .rate-us{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600; color:var(--ink);text-decoration:none;padding:8px 15px;border-radius:100px; border:2px solid var(--line);transition:background .14s ease} .rate-us:hover{background:var(--hair)} .rate-us .star{width:14px;height:14px;color:var(--accent);flex:none} .note{font-size:13.5px;color:var(--subtle);margin-top:13px} .note a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--hair)} .note a:hover{color:var(--ink)} /* ---- section heading + label ---- */ .label{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--ink);margin:58px 0 20px} .eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle); margin:0 0 14px;display:flex;align-items:center;gap:12px} .eyebrow::after{content:'';flex:1;height:2px;background:var(--hair)} /* ---- "what it does" list ---- */ .does{list-style:none;padding:0;margin:0;display:grid;gap:2px} .does li{padding:9px 0 9px 28px;position:relative;font-size:15.5px;color:var(--body)} .does li::before{content:'';position:absolute;left:3px;top:15px;width:9px;height:9px;border-radius:2px; background:var(--accent)} /* ---- product screenshots ("see it") ---- The store screenshots are 1280x800 marketing compositions with their own baked-in warm-paper background + Fraunces headline, so they sit natively on the riso page. Each is framed as an ink-bordered hard-shadow "print" (the .card treatment) so it reads as an object on the shelf and separates from the page paper (whose color is close to the shot's own bg). Capped at 660px and centered: wide enough that the widget inside each shot stays legible, narrow enough that the shots' generous internal margins don't drag out an empty scroll. Screenshots are light-baked and do not theme; on dark they read as bright prints, which is expected for product shots. */ .shots-wrap{margin-top:56px} .shots{display:flex;flex-direction:column;gap:24px;margin-top:18px;align-items:center} .shots figure{margin:0;width:100%;max-width:660px;background:var(--card); border:2.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .shots img{display:block;width:100%;height:auto} /* ---- product grid (hub) ---- */ .grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} .card{position:relative;display:flex;flex-direction:column;gap:13px; background:var(--card);border:2.5px solid var(--line);border-radius:var(--radius);padding:22px 22px 20px; text-decoration:none;color:inherit;box-shadow:var(--shadow); transition:transform .16s ease,box-shadow .16s ease} .card::before{content:'';position:absolute;top:-2.5px;left:24px;width:58px;height:12px; background:var(--card-accent,var(--accent));border:2.5px solid var(--line);border-top:none;border-radius:0 0 8px 8px} .card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)} .card-head{display:flex;align-items:center;gap:14px;margin-top:6px} .icon{width:50px;height:50px;border-radius:13px;flex:none;display:block;border:2px solid var(--line);overflow:hidden} .icon svg,.icon img{width:100%;height:100%;display:block} .card-title{min-width:0} .card-title .nm{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink);line-height:1.1;letter-spacing:-0.01em} .kind{display:inline-flex;align-items:center;gap:6px;margin-top:5px; font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase; color:color-mix(in srgb, var(--card-accent,var(--accent)) 62%, var(--ink))} .kind::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--card-accent,var(--accent))} .card-desc{font-size:14.5px;color:var(--body);line-height:1.52} .go{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:6px} .go span{transition:transform .16s ease} .card:hover .go span{transform:translateX(4px)} .card:hover .go{color:var(--card-accent,var(--accent))} /* ---- legal / prose pages ---- */ .prose h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.5vw,42px);color:var(--ink);letter-spacing:-.015em;margin:0 0 8px} .prose .tagline{color:var(--muted);font-size:17px;margin-bottom:40px} .prose h2{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink);margin:36px 0 12px} .prose p,.prose li{font-size:15.5px;color:var(--body);margin-bottom:12px} .prose ul{padding-left:22px} .prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--hair)} .prose a:hover{text-decoration-color:var(--accent-text)} /* ---- footer ---- */ footer{margin:60px 0 44px;padding-top:22px;border-top:2px solid var(--line); display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)} footer .tts{color:var(--ink)} footer a{color:var(--muted);text-decoration:none} footer a:hover{color:var(--accent-text)} /* ---- responsive ---- */ @media(max-width:680px){ .values{grid-template-columns:1fr 1fr} .grid{grid-template-columns:1fr} .wrap{padding:0 22px} } /* ---- one directed reveal ---- */ @media (prefers-reduced-motion:no-preference){ .kicker,.hero-question,.product-head,.lead,.values,.cta-row,.label,.eyebrow,.does,.card,.shots figure{ animation:tts-pop .55s cubic-bezier(.2,.8,.2,1) both} .hero-question{animation-delay:.05s}.product-head{animation-delay:.05s} .lead{animation-delay:.1s}.values{animation-delay:.15s}.cta-row{animation-delay:.15s}.label{animation-delay:.2s} .card:nth-of-type(1){animation-delay:.24s}.card:nth-of-type(2){animation-delay:.3s} .card:nth-of-type(3){animation-delay:.36s}.card:nth-of-type(4){animation-delay:.42s} @keyframes tts-pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} }