Spaces:
Running
Running
| /* Fleece Teammate — Hugging Face Space page. | |
| Follows the locked Fleece AI Team design system: paper/ink, a single | |
| vermillon accent, Bricolage Grotesque throughout, Instrument Serif italic | |
| on exactly one word. Editorial rhythm: hairlines, not cards. */ | |
| :root { | |
| --paper: #ffffff; | |
| --tint: #f5f5f7; | |
| --line: #d2d2d7; | |
| --mute: #6e6e73; | |
| --ink-2: #424245; | |
| --ink: #1d1d1f; | |
| --accent: #e04e2e; | |
| --measure: 65ch; | |
| --gutter: clamp(1.25rem, 5vw, 4rem); | |
| --rule: 1px solid var(--line); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --paper: #000000; | |
| --tint: #1c1c1e; | |
| --line: #38383a; | |
| --mute: #98989d; | |
| --ink-2: #d1d1d6; | |
| --ink: #f5f5f7; | |
| --accent: #ff6347; | |
| } | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--paper); | |
| color: var(--ink); | |
| font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif; | |
| font-weight: 400; | |
| font-size: 1.0625rem; | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| } | |
| ::selection { | |
| background: var(--accent); | |
| color: #fff; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| border-bottom: 1px solid var(--line); | |
| transition: border-color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); | |
| } | |
| a:hover { | |
| border-bottom-color: currentColor; | |
| } | |
| :focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| border-radius: 2px; | |
| } | |
| .skip { | |
| position: absolute; | |
| left: -9999px; | |
| } | |
| .skip:focus { | |
| left: var(--gutter); | |
| top: 1rem; | |
| z-index: 10; | |
| padding: 0.5rem 0.85rem; | |
| background: var(--ink); | |
| color: var(--paper); | |
| border: 0; | |
| } | |
| .wrap { | |
| max-width: 68rem; | |
| margin: 0 auto; | |
| padding-inline: var(--gutter); | |
| } | |
| /* ---------- masthead ---------- */ | |
| .masthead { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| padding-block: 1.5rem; | |
| border-bottom: var(--rule); | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.65rem; | |
| border: 0; | |
| } | |
| .brand img { | |
| width: 32px; | |
| height: 32px; | |
| display: block; | |
| } | |
| .brand span { | |
| font-weight: 600; | |
| letter-spacing: -0.015em; | |
| } | |
| .masthead .kicker { | |
| color: var(--mute); | |
| font-size: 0.8125rem; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| /* ---------- mascot stickers ---------- | |
| Borrowed from the way Pollen punctuate the Reachy Mini page: a die-cut | |
| character, tilted, breaking out of the block it sits next to. The keyline | |
| is paper-white in both themes, as a real sticker would be. */ | |
| .sticker { | |
| filter: | |
| drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) | |
| drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) | |
| drop-shadow(0 12px 20px rgba(0, 0, 0, 0.16)); | |
| user-select: none; | |
| pointer-events: none; | |
| } | |
| /* ---------- hero ---------- */ | |
| .hero { | |
| position: relative; | |
| padding-block: clamp(3.5rem, 11vw, 8rem) 0; | |
| } | |
| .sticker--hero { | |
| position: absolute; | |
| bottom: -1.5rem; | |
| right: -1.5rem; | |
| width: clamp(8.5rem, 13vw, 11rem); | |
| transform: rotate(-9deg); | |
| } | |
| h1 { | |
| margin: 0; | |
| font-size: clamp(2.5rem, 7.2vw, 5.25rem); | |
| font-weight: 500; | |
| line-height: 1.02; | |
| letter-spacing: -0.03em; | |
| max-width: 16ch; | |
| } | |
| h1 em { | |
| font-family: "Instrument Serif", Georgia, serif; | |
| font-style: italic; | |
| font-weight: 400; | |
| color: var(--accent); | |
| letter-spacing: -0.01em; | |
| } | |
| .lede { | |
| margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; | |
| /* Narrower than the 65ch body measure so the hero mascot never sits on the text. */ | |
| max-width: 54ch; | |
| font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); | |
| color: var(--ink-2); | |
| line-height: 1.55; | |
| } | |
| /* ---------- the exchange (hero artifact) ---------- */ | |
| .figure { | |
| position: relative; | |
| margin-block: clamp(2.5rem, 6vw, 4rem); | |
| } | |
| /* Left, to alternate with the hero mascot rather than stack under it. */ | |
| .sticker--figure { | |
| position: absolute; | |
| top: -4rem; | |
| left: 1.25rem; | |
| width: 5.75rem; | |
| transform: rotate(-13deg); | |
| z-index: 1; | |
| } | |
| .exchange { | |
| position: relative; | |
| border: var(--rule); | |
| border-radius: 14px; | |
| background: var(--tint); | |
| } | |
| .turn { | |
| display: grid; | |
| grid-template-columns: 7rem 1fr; | |
| gap: 1.5rem; | |
| padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem); | |
| } | |
| .turn .face { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| flex: none; | |
| color: var(--ink-2); | |
| } | |
| .turn + .turn { | |
| border-top: var(--rule); | |
| } | |
| .turn .who { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.5rem; | |
| color: var(--mute); | |
| font-size: 0.8125rem; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| padding-top: 0.35rem; | |
| } | |
| .turn p { | |
| margin: 0; | |
| max-width: 52ch; | |
| font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); | |
| line-height: 1.5; | |
| } | |
| .stage { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem 1.5rem; | |
| padding: 0.9rem clamp(1.25rem, 3vw, 2.25rem); | |
| border-top: var(--rule); | |
| color: var(--mute); | |
| font-size: 0.875rem; | |
| } | |
| .caption { | |
| margin: 0.9rem 0 0; | |
| color: var(--mute); | |
| font-size: 0.875rem; | |
| max-width: 60ch; | |
| } | |
| /* ---------- capabilities ---------- */ | |
| .capabilities { | |
| display: grid; | |
| grid-template-columns: 1.35fr 1fr 1fr; | |
| gap: clamp(2rem, 4vw, 3.5rem); | |
| padding-block: clamp(2rem, 6vw, 4rem) clamp(3.5rem, 9vw, 6rem); | |
| } | |
| .capabilities > div { | |
| border-top: 2px solid var(--ink); | |
| padding-top: 1.1rem; | |
| } | |
| .capabilities h2 { | |
| /* Reserves two lines so the three bodies start on the same baseline even | |
| when only one heading wraps. */ | |
| min-height: 2.5em; | |
| margin: 0 0 0.65rem; | |
| font-size: 1.1875rem; | |
| font-weight: 600; | |
| letter-spacing: -0.015em; | |
| line-height: 1.25; | |
| } | |
| @media (max-width: 900px) { | |
| .capabilities h2 { | |
| min-height: 0; | |
| } | |
| } | |
| .capabilities p { | |
| margin: 0; | |
| color: var(--ink-2); | |
| font-size: 0.9375rem; | |
| line-height: 1.6; | |
| } | |
| /* ---------- setup ---------- */ | |
| .setup { | |
| position: relative; | |
| overflow: hidden; | |
| background: var(--tint); | |
| border-top: var(--rule); | |
| border-bottom: var(--rule); | |
| padding-block: clamp(3.5rem, 9vw, 6rem); | |
| } | |
| .sticker--setup { | |
| position: absolute; | |
| top: clamp(2rem, 5vw, 3.5rem); | |
| right: clamp(-1.75rem, -1.2vw, -0.75rem); | |
| width: clamp(7rem, 12vw, 10rem); | |
| transform: rotate(13deg); | |
| } | |
| .setup h2 { | |
| margin: 0 0 clamp(2rem, 5vw, 3.5rem); | |
| font-size: clamp(1.75rem, 3.6vw, 2.75rem); | |
| font-weight: 500; | |
| letter-spacing: -0.025em; | |
| line-height: 1.1; | |
| max-width: 20ch; | |
| } | |
| .steps { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(min(24rem, 100%), 1fr)); | |
| gap: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem); | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| counter-reset: step; | |
| } | |
| .steps li { | |
| counter-increment: step; | |
| display: grid; | |
| grid-template-columns: 3.25rem 1fr; | |
| gap: 0.75rem; | |
| align-items: start; | |
| } | |
| .steps li::before { | |
| content: "0" counter(step); | |
| font-size: 1.75rem; | |
| font-weight: 500; | |
| line-height: 1; | |
| letter-spacing: -0.02em; | |
| color: var(--ink); | |
| opacity: 0.15; | |
| } | |
| .steps h3 { | |
| margin: 0 0 0.35rem; | |
| font-size: 1.0625rem; | |
| font-weight: 600; | |
| letter-spacing: -0.01em; | |
| } | |
| .steps p { | |
| margin: 0; | |
| color: var(--ink-2); | |
| font-size: 0.9375rem; | |
| line-height: 1.6; | |
| max-width: 42ch; | |
| } | |
| /* ---------- closing note ---------- */ | |
| .note { | |
| padding-block: clamp(3rem, 7vw, 5rem); | |
| max-width: var(--measure); | |
| } | |
| .note h2 { | |
| margin: 0 0 0.75rem; | |
| font-size: 1.1875rem; | |
| font-weight: 600; | |
| letter-spacing: -0.015em; | |
| } | |
| .note p { | |
| margin: 0; | |
| color: var(--ink-2); | |
| } | |
| /* ---------- footer ---------- */ | |
| .footer { | |
| border-top: var(--rule); | |
| padding-block: 2rem 3rem; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| color: var(--mute); | |
| font-size: 0.875rem; | |
| } | |
| .footer img { | |
| width: 20px; | |
| height: 20px; | |
| vertical-align: -0.3em; | |
| margin-right: 0.4rem; | |
| } | |
| .footer nav { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1.25rem; | |
| } | |
| /* ---------- one page-load reveal ---------- */ | |
| @media (prefers-reduced-motion: no-preference) { | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(12px); | |
| animation: rise 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; | |
| } | |
| .reveal:nth-child(1) { animation-delay: 0.05s; } | |
| .reveal:nth-child(2) { animation-delay: 0.13s; } | |
| .reveal:nth-child(3) { animation-delay: 0.21s; } | |
| @keyframes rise { | |
| to { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| } | |
| } | |
| /* ---------- narrow screens ---------- */ | |
| @media (max-width: 900px) { | |
| .capabilities { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .steps { | |
| grid-template-columns: 1fr; | |
| } | |
| /* No room beside the headline — the mascot leads the page instead. */ | |
| .sticker--hero { | |
| position: static; | |
| display: block; | |
| width: 7rem; | |
| margin: 0 0 1.5rem -0.25rem; | |
| } | |
| } | |
| @media (max-width: 560px) { | |
| /* Nothing clears the steps at this width — it opens the section instead. */ | |
| .sticker--setup { | |
| position: static; | |
| display: block; | |
| width: 5.5rem; | |
| margin: 0 var(--gutter) 1.25rem auto; | |
| } | |
| .sticker--figure { | |
| width: 4.5rem; | |
| left: 0.75rem; | |
| top: -3rem; | |
| } | |
| } | |
| @media (max-width: 560px) { | |
| .turn { | |
| grid-template-columns: 1fr; | |
| gap: 0.4rem; | |
| } | |
| .turn .who { | |
| padding-top: 0; | |
| } | |
| .masthead .kicker { | |
| display: none; | |
| } | |
| } | |