Spaces:
Running
Running
File size: 4,073 Bytes
8d0f559 14c75a3 8d0f559 14c75a3 8d0f559 14c75a3 8d0f559 14c75a3 8d0f559 14c75a3 8d0f559 14c75a3 8d0f559 14c75a3 8d0f559 14c75a3 8d0f559 14c75a3 8d0f559 14c75a3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | /* 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; }
}
|