/* case-study.css Shared layout for individual case study pages. Per-page color themes are set via data-theme on . */ /* Osteria Verdi (default) */ :root, [data-theme="osteria-verdi"] { --cs-dark: #1c1a17; --cs-dark-text: #e8e0d2; } [data-theme="hikari-sushi"] { --cs-dark: #111814; --cs-dark-text: #cfd4ca; } [data-theme="holly-cafe"] { --cs-dark: #2b2218; --cs-dark-text: #f0e8dc; } /* ============================ Hero ============================ */ .cs-hero { padding: var(--space-xl) 0; } /* Dark variant — atmospheric background, white text */ .cs-hero--dark { background: var(--cs-dark); padding-top: calc(var(--space-xl) + 1rem); } .cs-hero-back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cs-dark-text); opacity: 0.5; margin-bottom: var(--space-md); transition: opacity 0.2s ease; } .cs-hero-back:hover { opacity: 1; } .cs-hero-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--space-xl); align-items: center; } .cs-hero-meta { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: var(--space-sm); } .cs-hero--dark .cs-hero-meta { color: var(--cs-dark-text); opacity: 0.5; } .cs-hero-heading { font-family: var(--font-heading); font-size: clamp(3rem, 5.5vw, 5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.0; color: var(--color-text-primary); margin-bottom: var(--space-sm); } .cs-hero--dark .cs-hero-heading { color: #fff; } .cs-hero-summary { font-size: 1.05rem; color: var(--color-text-secondary); line-height: 1.7; max-width: 38ch; margin-bottom: var(--space-card); } .cs-hero--dark .cs-hero-summary { color: var(--cs-dark-text); opacity: 0.75; } .cs-hero-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-primary); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color 0.2s ease, opacity 0.2s ease; } .cs-hero-link:hover { color: var(--color-brand); } .cs-hero--dark .cs-hero-link { color: var(--cs-dark-text); opacity: 0.8; } .cs-hero--dark .cs-hero-link:hover { color: #fff; opacity: 1; } .cs-hero-visual img { width: 100%; display: block; } /* ============================ Narrative ============================ */ .cs-narrative { padding: var(--space-xl) 0; border-top: 1px solid var(--color-border); } .cs-narrative-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-xl); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); } .cs-narrative-row:last-child { border-bottom: none; padding-bottom: 0; } .cs-narrative-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-muted); padding-top: 0.15rem; } .cs-narrative-text { font-size: 0.95rem; line-height: 1.7; color: var(--color-text-secondary); max-width: 56ch; margin: 0; } /* ============================ Showcase: desktop + phone on dark bg ============================ */ .cs-showcase { display: grid; grid-template-columns: 60% 40%; gap: 0; align-items: stretch; } .cs-showcase-desktop { background: var(--cs-dark); padding: var(--space-xl); display: flex; align-items: flex-end; } .cs-showcase-desktop img { width: 100%; display: block; } .cs-showcase-mobile { background: #ede8e0; padding: var(--space-xl); display: flex; align-items: flex-end; justify-content: center; } .cs-showcase-mobile img { height: 100%; width: auto; max-width: 100%; display: block; } /* ============================ Details: photo + project metadata ============================ */ .cs-details { display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; } .cs-details-photo { overflow: hidden; } .cs-details-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .cs-details-info { padding: var(--space-xl); display: flex; flex-direction: column; justify-content: center; background: var(--color-bg-subtle); } .cs-details-heading { font-family: var(--font-heading); font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; color: var(--color-text-primary); margin-bottom: var(--space-md); } .cs-details-table { display: grid; } .cs-details-row { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-xs); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border); } .cs-details-row:last-child { border-bottom: none; } .cs-details-key { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); padding-top: 0.1rem; } .cs-details-val { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0; line-height: 1.5; } /* ============================ CTA ============================ */ .cs-cta { padding: var(--space-xl) 0; border-top: 1px solid var(--color-border); } /* ============================ Responsive ============================ */ @media (max-width: 960px) { .cs-hero-layout { grid-template-columns: 1fr; gap: var(--space-lg); } .cs-narrative-row { grid-template-columns: 1fr; gap: var(--space-xs); padding: var(--space-sm) 0; } .cs-showcase { grid-template-columns: 1fr; } .cs-showcase-desktop, .cs-showcase-mobile { padding: var(--space-md); } .cs-showcase-mobile { display: none; } .cs-details { grid-template-columns: 1fr; } .cs-details-photo { min-height: 300px; } } @media (max-width: 700px) { .cs-details-info { padding: var(--space-md); } }