90 lines
2.1 KiB
CSS
90 lines
2.1 KiB
CSS
/* Clavitor logo treatments — all use Sora from inou's font stack */
|
|
|
|
:root {
|
|
--clavitor-amber: #B45309;
|
|
--clavitor-dark: #1A1A1A;
|
|
--clavitor-light: #F8F7F6;
|
|
}
|
|
|
|
/* 1. Default — confident, tight, bold */
|
|
.clavitor-logo {
|
|
font-family: 'Sora', system-ui, sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
color: var(--clavitor-amber);
|
|
}
|
|
|
|
/* 2. Editorial — airy, spaced, light */
|
|
.clavitor-logo.editorial {
|
|
font-weight: 300;
|
|
letter-spacing: 0.08em;
|
|
text-transform: lowercase;
|
|
color: var(--clavitor-dark);
|
|
}
|
|
|
|
/* 3. Heavy impact — extra bold, letter-spaced */
|
|
.clavitor-logo.heavy {
|
|
font-weight: 800;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
color: var(--clavitor-dark);
|
|
}
|
|
|
|
/* 4. Inverted — white on dark */
|
|
.clavitor-logo.inverted {
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: white;
|
|
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* 5. Gradient sweep */
|
|
.clavitor-logo.gradient {
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
background: linear-gradient(90deg, var(--clavitor-amber), #FF8D46);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* 6. Weight-shifted — letters get heavier toward the end */
|
|
.clavitor-logo.shifted {
|
|
font-weight: 400;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.clavitor-logo.shifted span:last-child { font-weight: 800; }
|
|
|
|
/* 7. Small-caps with bold first letter */
|
|
.clavitor-logo.smallcaps {
|
|
font-variant: small-caps;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
text-transform: lowercase;
|
|
}
|
|
.clavitor-logo.smallcaps::first-letter {
|
|
font-weight: 800;
|
|
font-variant: normal;
|
|
}
|
|
|
|
/* 8. Minimal — light, tight, subtle */
|
|
.clavitor-logo.minimal {
|
|
font-weight: 300;
|
|
letter-spacing: -0.04em;
|
|
opacity: 0.85;
|
|
color: var(--clavitor-dark);
|
|
}
|
|
|
|
/* 9. Hover lift (for links/buttons) */
|
|
.clavitor-logo.interactive {
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
color: var(--clavitor-amber);
|
|
transition: transform 0.15s ease, color 0.15s ease;
|
|
display: inline-block;
|
|
}
|
|
.clavitor-logo.interactive:hover {
|
|
transform: translateY(-1px);
|
|
color: #9A4507;
|
|
}
|