/* Short Week — design tokens & lockup styles
Font: load Space Grotesk 500,700 from Google Fonts before using. */
:root {
--sw-bg: #F4EFE4;
--sw-ink: #22201B;
--sw-muted: #6B6455;
--sw-faded: #B8AE9C;
--sw-strike: #D85A30;
--sw-rule: #C9BFAA;
--sw-font: 'Space Grotesk', system-ui, sans-serif;
--sw-radius: 4px;
}
@media (prefers-color-scheme: dark) {
:root {
--sw-bg: #1C1A16;
--sw-ink: #F4EFE4;
--sw-muted: #8A8474;
--sw-faded: #57534A;
--sw-strike: #E86A3C;
--sw-rule: #44403A;
}
}
/* Explicit theme override hooks (if the app uses a toggle instead of
prefers-color-scheme, set data-theme on ) */
[data-theme="light"] {
--sw-bg: #F4EFE4; --sw-ink: #22201B; --sw-muted: #6B6455;
--sw-faded: #B8AE9C; --sw-strike: #D85A30; --sw-rule: #C9BFAA;
}
[data-theme="dark"] {
--sw-bg: #1C1A16; --sw-ink: #F4EFE4; --sw-muted: #8A8474;
--sw-faded: #57534A; --sw-strike: #E86A3C; --sw-rule: #44403A;
}
/* ---- Full lockup component ----
Markup pattern (see BRAND.md for anatomy):
M
T
W
T
F
short week
No time. Good plan.
*/
.sw-lockup {
font-family: var(--sw-font);
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
/* scale knob: 1 = reference size (54px wordmark) */
--sw-scale: 1;
}
.sw-week {
display: flex;
gap: calc(10px * var(--sw-scale));
}
.sw-day {
position: relative;
font-weight: 500;
font-size: calc(14px * var(--sw-scale));
letter-spacing: 0.07em;
color: var(--sw-muted);
padding: calc(4px * var(--sw-scale)) calc(6px * var(--sw-scale));
line-height: 1;
}
.sw-day--struck {
color: var(--sw-faded);
}
.sw-day--struck::after {
content: "";
position: absolute;
left: -1px;
right: -1px;
top: 50%;
height: calc(2px * var(--sw-scale));
background: var(--sw-strike);
transform: rotate(var(--tilt, -8deg));
}
.sw-day--today {
font-weight: 700;
color: var(--sw-ink);
border: calc(2px * var(--sw-scale)) solid var(--sw-ink);
border-radius: var(--sw-radius);
}
.sw-wordmark {
font-weight: 700;
font-size: calc(54px * var(--sw-scale));
letter-spacing: -0.028em;
line-height: 1;
color: var(--sw-ink);
text-transform: lowercase;
}
.sw-motto {
display: flex;
align-items: center;
gap: calc(10px * var(--sw-scale));
}
.sw-motto span {
font-weight: 700;
font-size: calc(13px * var(--sw-scale));
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--sw-strike);
white-space: nowrap;
}
.sw-motto i {
display: block;
width: calc(26px * var(--sw-scale));
height: calc(2px * var(--sw-scale));
background: var(--sw-rule);
}
/* ---- Tool sub-brand lockup ----
short week · call sheet
*/
.sw-tool {
font-family: var(--sw-font);
font-weight: 500;
color: var(--sw-ink);
letter-spacing: -0.01em;
text-transform: lowercase;
}
.sw-tool b {
font-weight: 700;
color: var(--sw-strike);
padding: 0 0.15em;
}