Spaces:
Running
Running
| /* ShadowRock — Hugging Face Space | |
| Tokens per ShadowRock Brand System (BRAND-FACTS.md). | |
| Strict 4-color system: charcoal #222222, lavender #D7E2FF, black, white. | |
| Hard edges (radius 0). Titles Brockmann 500, body Avenir 500. */ | |
| @font-face { | |
| font-family: 'Brockmann'; | |
| src: url('fonts/brockmann-medium-webfont.ttf') format('truetype'); | |
| font-weight: 500; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Avenir'; | |
| src: url('fonts/Avenir-Medium.ttf') format('truetype'); | |
| font-weight: 500; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| :root { | |
| --sr-charcoal: #222222; | |
| --sr-lavender: #D7E2FF; | |
| --sr-black: #000000; | |
| --sr-white: #FFFFFF; | |
| --sr-font: Avenir, 'Avenir Next', Poppins, 'Century Gothic', -apple-system, sans-serif; | |
| --sr-font-display: Brockmann, Avenir, 'Avenir Next', Poppins, 'Century Gothic', -apple-system, sans-serif; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| background: var(--sr-charcoal); | |
| color: var(--sr-white); | |
| font-family: var(--sr-font); | |
| font-weight: 500; | |
| font-size: 17px; | |
| line-height: 1.6; | |
| } | |
| a { color: inherit; } | |
| .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } | |
| /* Header */ | |
| header { padding: 48px 0 0; } | |
| header .lockup { display: block; width: 216px; } | |
| header .lockup svg { width: 100%; height: auto; display: block; } | |
| /* Hero */ | |
| .hero { padding: 96px 0 64px; } | |
| .eyebrow { | |
| font-size: 12px; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| color: var(--sr-lavender); | |
| margin-bottom: 24px; | |
| } | |
| h1 { | |
| font-family: var(--sr-font-display); | |
| font-weight: 500; | |
| font-size: clamp(40px, 7vw, 72px); | |
| line-height: 1.05; | |
| letter-spacing: -0.01em; | |
| } | |
| h1 .accent { color: var(--sr-lavender); } | |
| .hero p { | |
| max-width: 640px; | |
| margin-top: 32px; | |
| font-size: 20px; | |
| } | |
| /* Section scaffolding */ | |
| section { padding: 64px 0; border-top: 1px solid var(--sr-lavender); } | |
| h2 { | |
| font-family: var(--sr-font-display); | |
| font-weight: 500; | |
| font-size: 32px; | |
| line-height: 1.15; | |
| margin: 16px 0 32px; | |
| } | |
| /* Model cards */ | |
| .models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } | |
| .model { | |
| display: block; | |
| background: var(--sr-black); | |
| padding: 32px 24px; | |
| text-decoration: none; | |
| border: 1px solid var(--sr-black); | |
| } | |
| .model:hover { border-color: var(--sr-lavender); } | |
| .model .fmt { | |
| font-family: var(--sr-font-display); | |
| font-weight: 500; | |
| font-size: 24px; | |
| color: var(--sr-lavender); | |
| } | |
| .model .target { | |
| font-size: 12px; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| margin: 8px 0 16px; | |
| } | |
| .model p { font-size: 15px; } | |
| .collection-note { margin-top: 32px; max-width: 720px; } | |
| .collection-note a { color: var(--sr-lavender); } | |
| /* Credentials */ | |
| .creds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 48px; list-style: none; } | |
| .creds li { padding-left: 28px; position: relative; } | |
| .creds li::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 7px; | |
| width: 12px; | |
| height: 12px; | |
| background: var(--sr-lavender); | |
| clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%); | |
| } | |
| .creds strong { display: block; } | |
| .creds span { font-size: 15px; } | |
| /* Capabilities + industries */ | |
| .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } | |
| .cols h3 { | |
| font-family: var(--sr-font-display); | |
| font-weight: 500; | |
| font-size: 24px; | |
| margin-bottom: 16px; | |
| } | |
| .cols ul { list-style: none; } | |
| .cols li { padding: 10px 0; border-top: 1px solid var(--sr-black); } | |
| .cols li:first-child { border-top: 0; } | |
| /* Footer */ | |
| footer { | |
| border-top: 1px solid var(--sr-lavender); | |
| padding: 48px 0 64px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| flex-wrap: wrap; | |
| } | |
| footer nav a { | |
| color: var(--sr-lavender); | |
| text-decoration: none; | |
| margin-right: 32px; | |
| font-size: 15px; | |
| } | |
| footer nav a:hover { text-decoration: underline; } | |
| footer .mark { width: 28px; } | |
| footer .mark svg { width: 100%; height: auto; display: block; } | |
| @media (max-width: 760px) { | |
| .models, .creds, .cols { grid-template-columns: 1fr; } | |
| .hero { padding: 64px 0 48px; } | |
| } | |