/* ==========================================================================
Design Tokens — Furniture & Industrial Design Portfolio (Vegard Tufto Wik)
Philosophy: Japanese Minimalism (Ma) x Editorial/Magazine, warm variant —
with Swiss/International Typographic typography: a single grotesque
family (in Text + Display optical sizes) for body + display, hierarchy
via size/weight/letter-spacing.
See: .design/furniture-portfolio/DESIGN_BRIEF.md
Fonts (load in every page ):
Neue Haas Grotesk — via Adobe Fonts (Typekit):
- "neue-haas-grotesk-display" -> --font-family-display
Weights 100-900 available. Used for font-size-xl and above
(section titles, hero, headings).
- "neue-haas-grotesk-text" -> --font-family-body
Weights 400/500/700. Used for font-size-lg and below
(body copy, captions, card titles).
Space Mono (mono) — folio numbers, specs/metadata labels. The one
contrast element against the single grotesque family.
Each HTML page links both font sources AND tokens.css, then defines its
own inline Tailwind config that maps theme colors/fonts/spacing to these
CSS variables, e.g.:
tailwind.config = {
theme: {
extend: {
colors: {
bg: 'var(--color-bg-primary)',
surface: 'var(--color-bg-secondary)',
ink: 'var(--color-text-primary)',
muted: 'var(--color-text-secondary)',
accent: 'var(--color-accent-primary)',
},
fontFamily: {
display: ['neue-haas-grotesk-display', 'Helvetica', 'Arial', 'sans-serif'],
body: ['neue-haas-grotesk-text', 'Helvetica', 'Arial', 'sans-serif'],
mono: ['"Space Mono"', 'monospace'],
},
},
},
}
========================================================================== */
:root {
/* ---------------------------------------------------------------------
Color — warm, near-monochrome grey + muted sage accent.
Single fixed palette by design: no dark mode — full control over how
gallery imagery is perceived.
--------------------------------------------------------------------- */
--color-bg-primary: #F7F5F1; /* warm linen/paper */
--color-bg-secondary: #EFEBE3; /* card / selected-work surfaces */
--color-bg-tertiary: #E8E2D8; /* inputs, wells, hover fills */
--color-bg-inverse: #2B2825; /* warm charcoal */
--color-text-primary: #2B2825; /* warm near-black */
--color-text-secondary: #6F6A62; /* captions, metadata, secondary copy */
--color-text-tertiary: #A39C92; /* placeholders, disabled, folio "of N" */
--color-text-inverse: #F7F5F1;
--color-text-link: #5C6F5E; /* deep sage, AA on bg-primary */
--color-border-primary: #DDD6CB;
--color-border-secondary: #EAE4D9;
--color-border-focus: #5C6F5E;
--color-accent-primary: #5FA052; /* brighter green — hover/active accent */
--color-accent-primary-hover: #4D8242;
--color-accent-primary-active: #3F6A37;
--color-accent-secondary: #A8B6A0; /* light sage — decorative/badges, not text */
--color-status-success: #5C6F5E;
--color-status-warning: #B8924A;
--color-status-error: #A8503F;
--color-status-info: #6E8A9E;
--color-surface-overlay: rgba(43, 40, 37, 0.4);
/* ---------------------------------------------------------------------
Spacing — 8px base, large multipliers (Ma calls for generous whitespace)
--------------------------------------------------------------------- */
--space-0: 0;
--space-1: 0.125rem; /* 2px */
--space-2: 0.25rem; /* 4px */
--space-3: 0.375rem; /* 6px */
--space-4: 0.5rem; /* 8px */
--space-5: 0.75rem; /* 12px */
--space-6: 1rem; /* 16px */
--space-7: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-9: 3rem; /* 48px */
--space-10: 4rem; /* 64px */
--space-11: 6rem; /* 96px */
--space-12: 8rem; /* 128px */
/* ---------------------------------------------------------------------
Typography
--------------------------------------------------------------------- */
--font-family-display: 'neue-haas-grotesk-display', Helvetica, Arial, sans-serif;
--font-family-body: 'neue-haas-grotesk-text', Helvetica, Arial, sans-serif;
--font-family-mono: '"Space Mono"', ui-monospace, monospace;
--font-size-xs: 0.75rem; /* 12px — folio "of N", micro-labels */
--font-size-sm: 0.875rem; /* 14px — captions, metadata */
--font-size-base: 1rem; /* 16px — body */
--font-size-md: 1.125rem; /* 18px — lead paragraphs */
--font-size-lg: 1.375rem; /* 22px — card titles */
--font-size-xl: 1.75rem; /* 28px — page section titles */
--font-size-2xl: 2.25rem; /* 36px — page headings */
--font-size-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); /* ~32px -> 56px */
--font-size-4xl: clamp(2.75rem, 2rem + 5vw, 6rem); /* ~44px -> 96px, hero */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.15; /* headings */
--line-height-normal: 1.6; /* UI text, captions */
--line-height-relaxed: 1.7; /* body copy */
--letter-spacing-tight: -0.03em; /* large display headings */
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.08em; /* folio numbers, all-caps labels */
/* ---------------------------------------------------------------------
Layout
--------------------------------------------------------------------- */
--max-width-content: 38rem; /* ~65-75ch reading width — bio, body copy */
--max-width-wide: 68rem; /* project page content */
--max-width-page: 90rem; /* outer page container */
--border-radius-sm: 2px;
--border-radius-md: 0;
--border-radius-lg: 8px;
--border-radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(43, 40, 37, 0.04);
--shadow-md: 0 2px 4px rgba(43, 40, 37, 0.04), 0 8px 16px rgba(43, 40, 37, 0.06);
--shadow-lg: 0 4px 8px rgba(43, 40, 37, 0.05), 0 16px 32px rgba(43, 40, 37, 0.08);
--shadow-focus: 0 0 0 3px rgba(92, 111, 94, 0.35);
/* ---------------------------------------------------------------------
Motion — gentle fades, no bounce/overshoot (Ma)
--------------------------------------------------------------------- */
--duration-instant: 50ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--duration-slower: 700ms;
--easing-default: cubic-bezier(0.16, 1, 0.3, 1); /* smooth decel, spring-like, no overshoot */
--easing-in: cubic-bezier(0.7, 0, 0.84, 0);
--easing-out: cubic-bezier(0.16, 1, 0.3, 1);
--easing-bounce: cubic-bezier(0.34, 1.1, 0.64, 1); /* minimal overshoot — reserved, unused by default per Ma */
/* ---------------------------------------------------------------------
Responsive breakpoints (reference only — Tailwind defaults match these)
--------------------------------------------------------------------- */
--breakpoint-sm: 375px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
}
/* Reduced motion: disable/shorten all transitions and animations */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
Shared base utilities
========================================================================== */
/* Consistent focus ring for every interactive element (links, buttons,
form fields, folio nav). Apply alongside Tailwind's hover/active classes. */
.focus-ring:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
border-radius: var(--border-radius-sm);
}
/* Avoid orphaned short last words in body copy and captions.
Firefox (no support yet) falls back to normal wrapping. */
p {
text-wrap: pretty;
}
/* ---------------------------------------------------------------------
Entrance animations — gentle fade-up on load (hero) and on scroll
into view (data-reveal). Used on every page for a consistent,
calm "settling in" feel. See /reveal.js for the scroll trigger.
--------------------------------------------------------------------- */
@keyframes fade-up {
from { opacity: 0; transform: translateY(1rem); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
opacity: 0;
animation: fade-up var(--duration-slower) var(--easing-default) both;
}
[data-reveal] {
opacity: 0;
transform: translateY(1.5rem);
transition: opacity var(--duration-slower) var(--easing-default),
transform var(--duration-slower) var(--easing-default);
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
/* Mobile navigation overlay */
#mobile-menu {
opacity: 0;
transform: translateY(-0.25rem);
pointer-events: none;
transition: opacity 200ms var(--easing-default), transform 200ms var(--easing-default);
}
#mobile-menu[aria-hidden="false"] {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* ---------------------------------------------------------------------
Image lightbox — click any project image to inspect it full-screen.
See /lightbox.js for behavior.
--------------------------------------------------------------------- */
.lightbox-trigger {
cursor: zoom-in;
}
.lightbox {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
flex-direction: column;
background: rgba(43, 40, 37, 0.94);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-normal) var(--easing-default);
}
.lightbox[aria-hidden="false"] {
opacity: 1;
pointer-events: auto;
}
.lightbox-stage {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
padding: 4.5rem 1.5rem 1.5rem;
cursor: zoom-in;
}
.lightbox-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.lightbox-stage.is-zoomed {
align-items: flex-start;
justify-content: flex-start;
cursor: zoom-out;
}
.lightbox-stage.is-zoomed .lightbox-image {
max-width: none;
max-height: none;
width: auto;
height: auto;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
position: absolute;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
padding: 0;
color: var(--color-text-inverse);
cursor: pointer;
opacity: 0.65;
transition: opacity var(--duration-fast) var(--easing-default);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
opacity: 1;
}
.lightbox-close {
top: 1.25rem;
right: 1.25rem;
width: 2.5rem;
height: 2.5rem;
}
.lightbox-prev,
.lightbox-next {
top: 50%;
transform: translateY(-50%);
width: 3rem;
height: 3rem;
}
.lightbox-prev { left: 0.25rem; }
.lightbox-next { right: 0.25rem; }
.lightbox-meta {
flex: none;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0 1.5rem 1.25rem;
color: var(--color-text-inverse);
}
.lightbox-caption {
font-family: var(--font-family-body);
font-size: var(--font-size-sm);
opacity: 0.75;
max-width: 38rem;
}
.lightbox-counter {
font-family: var(--font-family-mono);
font-size: var(--font-size-xs);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
opacity: 0.55;
white-space: nowrap;
}
@media (max-width: 640px) {
.lightbox-prev,
.lightbox-next {
display: none;
}
}