/* ========================================================================== RAUM STUDIO — Design tokens & global styles Edit the custom properties below to retheme colors, type, and spacing across the entire site from one place. ========================================================================== */ :root { /* ---- Color ------------------------------------------------------------ */ --color-bg: #F4F1EC; /* warm off-white, page background */ --color-text: #111111; /* near-black, primary text */ --color-text-muted: #4A4742; /* secondary text on light bg */ --color-inverse: #FFFFFF; /* text over photography */ --color-line: rgba(17, 17, 17, 0.14); /* hairline dividers */ --color-line-inverse: rgba(255, 255, 255, 0.4); --overlay-gradient: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 35%, rgba(0,0,0,0) 65%); --overlay-gradient-soft: linear-gradient(to top, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 55%); --overlay-center: linear-gradient(to bottom, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.06) 30%, rgba(0,0,0,0.06) 70%, rgba(0,0,0,0.4) 100%); /* ---- Type -------------------------------------------------------------- Display/serif: wordmark, nav, section labels, project titles (uppercase). Body/sans: paragraph copy, form fields, small UI labels. Both are loaded in via Google Fonts — see index.html. */ --font-serif: 'Libre Caslon Text', 'Times New Roman', Georgia, serif; --font-sans: 'Work Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif; --tracking-label: 0.18em; /* nav / section labels */ --tracking-wordmark: 0.22em; --tracking-title: 0.15em; --fs-nav: 0.72rem; --fs-caption-title: 0.95rem; --fs-caption-meta: 0.85rem; --fs-body: 1rem; --fs-lede: 1.2rem; --fs-h1: clamp(1.9rem, 4vw, 3rem); --fs-h2: clamp(1.4rem, 2.6vw, 1.9rem); --fs-index: clamp(2.4rem, 9vw, 5.5rem); --lh-body: 1.6; --lh-tight: 1.25; /* ---- Spacing ------------------------------------------------------------ */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 5rem; --space-7: 7.5rem; --space-8: 10rem; --gutter: 32px; --gutter-mobile: 16px; --header-height: 84px; /* ---- Motion ------------------------------------------------------------- */ --ease-out-slow: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 300ms; --dur-med: 500ms; --dur-slow: 700ms; --measure: 66ch; /* comfortable reading measure */ } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p, figure { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } input, textarea, select { font: inherit; color: inherit; } :focus-visible { outline: 1px solid var(--color-text); outline-offset: 3px; } .mt-4 { margin-top: var(--space-4); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================== Type utilities ========================================================================== */ .label { font-family: var(--font-serif); font-size: var(--fs-nav); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 400; } .italic-meta { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0.01em; } .eyebrow { font-family: var(--font-serif); font-size: var(--fs-nav); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); } /* ========================================================================== Layout helpers ========================================================================== */ .container { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); } @media (min-width: 768px) { .container { padding-left: var(--gutter); padding-right: var(--gutter); } } .measure { max-width: var(--measure); } .section-pad { padding-top: var(--space-7); padding-bottom: var(--space-7); } /* ========================================================================== Site header / navigation ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 200; height: var(--header-height); display: flex; align-items: center; background: var(--color-bg); border-bottom: 1px solid var(--color-line); color: var(--color-text); } .site-header__inner { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); } .site-header__nav { display: none; gap: var(--space-4); align-items: center; } .site-header__nav--left { grid-column: 1; } .site-header__nav--right { grid-column: 3; justify-self: end; } @media (min-width: 768px) { .site-header__nav { display: flex; } } .nav-link { font-family: var(--font-serif); font-size: var(--fs-nav); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; position: relative; padding: var(--space-1) 0; } .nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right var(--dur-med) var(--ease-out-slow); } .nav-link:hover::after, .nav-link.is-active::after { right: 0; } /* The logo mark stands on its own — no box, no border, no wordmark text. An aria-label on the parent link (or role="img" on the home hero's span) keeps it accessible. */ .site-header__wordmark { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; justify-content: center; } /* Logo mark: a plain image, transparent background. The header/footer instances sit on a light backdrop and use the near-black line art; the home hero instance sits over a photo and uses the white variant. */ .logo-mark { display: block; width: 100%; height: 100%; object-fit: contain; } .site-header__mark { width: 26px; height: 47px; flex-shrink: 0; } .site-header__menu-toggle { grid-column: 3; justify-self: end; font-family: var(--font-serif); font-size: var(--fs-nav); letter-spacing: var(--tracking-label); text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; padding: var(--space-1) var(--space-1); } @media (min-width: 768px) { .site-header__menu-toggle { display: none; } } /* Mobile full-screen overlay menu */ .mobile-menu { position: fixed; inset: 0; z-index: 300; background: var(--color-bg); color: var(--color-text); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-4); opacity: 0; visibility: hidden; transition: opacity var(--dur-med) var(--ease-out-slow); } .mobile-menu.is-open { opacity: 1; visibility: visible; } .mobile-menu__close { position: absolute; top: var(--space-3); right: var(--gutter-mobile); font-family: var(--font-serif); font-size: var(--fs-nav); letter-spacing: var(--tracking-label); text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; } .mobile-menu__link { font-family: var(--font-serif); font-size: 1.6rem; letter-spacing: var(--tracking-title); text-transform: uppercase; padding: var(--space-1) 0; } body.menu-open { overflow: hidden; } /* ========================================================================== Caption block (shared: home slideshow + projects index tiles + detail hero) ========================================================================== */ .caption { position: absolute; left: var(--gutter-mobile); bottom: var(--gutter-mobile); color: var(--color-inverse); z-index: 2; max-width: 80%; } @media (min-width: 768px) { .caption { left: var(--gutter); bottom: var(--gutter); max-width: 60%; } } /* Centered hero caption — project detail hero and (in its own markup) the home hero. Title + meta sit centered over the image rather than pinned to the bottom-left corner. */ .caption--center { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); max-width: 90%; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; } .caption--center .caption__title { font-size: var(--fs-h1); margin-bottom: 0.5em; } @media (min-width: 768px) { .caption--center { left: 50%; bottom: auto; max-width: 90%; } } .caption__title { font-family: var(--font-serif); font-size: var(--fs-caption-title); letter-spacing: var(--tracking-title); text-transform: uppercase; margin-bottom: 0.4em; } .caption__category { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-caption-meta); margin-bottom: 0.25em; opacity: 0.92; } .caption__location { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; } .media-overlay { position: absolute; inset: 0; background: var(--overlay-gradient); pointer-events: none; z-index: 1; } /* "Coming soon" cover — used on projects still awaiting real photography. A uniform tint (rather than the bottom-weighted gradient above) keeps contrast even behind centered text. */ .media-overlay--center { position: absolute; inset: 0; background: rgba(20, 14, 10, 0.22); pointer-events: none; z-index: 1; } .coming-soon-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; color: var(--color-inverse); font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; } .caption--center .coming-soon-badge { position: static; transform: none; margin-top: 0.3em; } /* ========================================================================== Home — single full-bleed hero with centered mark ========================================================================== */ .home-hero { position: relative; height: 100svh; min-height: 560px; width: 100%; overflow: hidden; } .home-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); animation: home-hero-fade var(--dur-slow) var(--ease-out-slow) both, home-hero-zoom 8000ms var(--ease-out-slow) both; } @keyframes home-hero-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes home-hero-zoom { from { transform: scale(1.02); } to { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .home-hero__img { animation: home-hero-fade var(--dur-med) linear both; transform: none; } } /* A soft white halo centered behind the logo + nav (rather than a hard box) — brightens the photo just enough, right where the white mark and text sit, to keep them legible without flattening the whole image. */ .home-hero__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 42% at center, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0) 78%); pointer-events: none; z-index: 1; } .home-hero__content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); color: var(--color-inverse); text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,0.28); } .home-hero__mark { width: 52px; height: 94px; filter: drop-shadow(0 1px 6px rgba(0,0,0,0.28)); } .home-hero__nav { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; } .home-hero__nav a { font-family: var(--font-serif); font-size: var(--fs-nav); letter-spacing: var(--tracking-label); text-transform: uppercase; } /* ========================================================================== Reveal-on-scroll (used on interior pages) ========================================================================== */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out-slow), transform var(--dur-slow) var(--ease-out-slow); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { transform: none; transition: opacity var(--dur-med) linear; } } /* ========================================================================== Projects index ========================================================================== */ .page-hero { padding-top: var(--space-6); padding-bottom: var(--space-5); text-align: center; } .page-hero__title { font-family: var(--font-serif); font-size: var(--fs-h1); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: 400; } .page-hero__sub { margin-top: var(--space-2); color: var(--color-text-muted); max-width: 44ch; margin-left: auto; margin-right: auto; } .project-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--gutter-mobile); padding-top: var(--space-5); padding-bottom: var(--space-6); } @media (min-width: 700px) { .project-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--gutter); } } .project-tile { display: block; } .project-tile[hidden] { display: none; } .project-tile__frame { position: relative; overflow: hidden; display: block; } .project-tile img { display: block; width: 100%; height: auto; transition: transform 700ms var(--ease-out-slow); } @media (hover: hover) { .project-tile:hover img { transform: scale(1.035); } } /* Title (and, for placeholder projects, a "Coming Soon" note) sit inside a soft scrim at the base of each image. At rest the grid reads as pure photography, caption-free; the scrim fades in on hover/focus so tiles stay discoverable without cluttering the layout. Touch devices have no hover state, so the scrim stays on there. */ .project-tile__caption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.3em; padding: var(--space-4) var(--space-3) var(--space-3); text-align: center; background: linear-gradient(to top, rgba(20, 14, 10, 0.5) 0%, rgba(20, 14, 10, 0) 55%); opacity: 0; transition: opacity 350ms var(--ease-out-slow); } @media (hover: hover) { .project-tile:hover .project-tile__caption, .project-tile:focus-visible .project-tile__caption { opacity: 1; } } @media (hover: none) { .project-tile__caption { opacity: 1; } } .project-tile__title { font-family: var(--font-serif); font-size: var(--fs-nav); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-inverse); } .project-tile__meta { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); } /* ========================================================================== Project detail ========================================================================== */ .project-hero { position: relative; height: calc(100svh - var(--header-height)); min-height: 420px; width: 100%; overflow: hidden; } .project-hero img { width: 100%; height: 100%; object-fit: cover; animation: hero-fade var(--dur-med) var(--ease-out-slow) both; } @keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } } .project-intro { padding: var(--space-6) 0 var(--space-6); text-align: center; } .project-intro__inner { max-width: 56ch; margin: 0 auto; } .project-intro__meta { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; justify-content: center; } .project-intro p { font-size: var(--fs-lede); line-height: 1.65; color: var(--color-text); } .photo-essay { display: flex; flex-direction: column; gap: var(--space-7); padding-bottom: var(--space-8); } .essay-full img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .essay-duo { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 768px) { .essay-duo { grid-template-columns: 1fr 1fr; gap: var(--space-5); } } .essay-duo img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; } figure.reveal { margin: 0; } figcaption { margin-top: var(--space-2); font-family: var(--font-serif); font-style: italic; font-size: 0.82rem; color: var(--color-text-muted); } .next-project { border-top: 1px solid var(--color-line); padding: var(--space-6) 0; } .next-project__label { display: block; margin-bottom: var(--space-3); } .next-project__link { display: grid; grid-template-columns: 1fr; gap: var(--space-3); align-items: center; } @media (min-width: 640px) { .next-project__link { grid-template-columns: 160px 1fr; gap: var(--space-4); } } .next-project__thumb { aspect-ratio: 4/3; overflow: hidden; } .next-project__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease-out-slow); } .next-project__link:hover .next-project__thumb img { transform: scale(1.04); } .next-project__title { font-family: var(--font-serif); font-size: var(--fs-h2); letter-spacing: var(--tracking-title); text-transform: uppercase; } .next-project__meta { margin-top: var(--space-1); color: var(--color-text-muted); } /* ========================================================================== Studio (About) page ========================================================================== */ .studio-columns { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-7) var(--gutter-mobile) var(--space-8); max-width: 1440px; margin: 0 auto; } @media (min-width: 900px) { .studio-columns { grid-template-columns: 1fr 1fr; gap: var(--space-7); padding: var(--space-7) var(--gutter) var(--space-8); align-items: start; } } .studio-columns__col { display: flex; flex-direction: column; gap: var(--space-5); } .studio-columns__heading { font-family: var(--font-serif); font-size: var(--fs-h2); letter-spacing: var(--tracking-title); text-transform: uppercase; } .studio-columns__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .studio-tabs { display: flex; justify-content: center; gap: var(--space-4); padding-top: var(--space-6); overflow-x: auto; } .studio-tab { font-family: var(--font-serif); font-size: var(--fs-nav); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: var(--space-1) 0 var(--space-2); min-height: 44px; display: inline-flex; align-items: center; position: relative; white-space: nowrap; color: var(--color-text-muted); } .studio-tab::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right var(--dur-med) var(--ease-out-slow); } .studio-tab.is-active { color: var(--color-text); } .studio-tab.is-active::after { right: 0; } .studio-panel { display: none; } .studio-panel.is-active { display: block; } .studio-panel h2 { font-family: var(--font-serif); font-size: var(--fs-h2); letter-spacing: var(--tracking-title); text-transform: uppercase; margin-bottom: var(--space-4); } .studio-panel p + p, .studio-panel p + h3 { margin-top: var(--space-3); } .studio-panel p { max-width: 60ch; margin-left: auto; margin-right: auto; } .founder + .founder { padding-top: var(--space-5); border-top: 1px solid var(--color-line); } .founder h3 { font-family: var(--font-serif); font-size: 1rem; letter-spacing: var(--tracking-title); text-transform: uppercase; margin-bottom: 0.3em; } .founder .role { display: block; font-family: var(--font-serif); font-style: italic; color: var(--color-text-muted); margin-bottom: var(--space-2); font-size: 0.9rem; } .process-steps { display: flex; flex-direction: column; gap: var(--space-5); } .process-step__index { font-family: var(--font-serif); font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--space-1); } .process-step h3 { font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: var(--space-1); } .press-list { display: flex; flex-direction: column; } .press-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 0.2em; } .press-item:first-child { border-top: 1px solid var(--color-line); } .press-item__outlet { font-family: var(--font-serif); font-size: var(--fs-nav); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); } .press-item__title { font-size: 1.02rem; } .press-item__title a { border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) ease; } .press-item__title a:hover { border-color: currentColor; } /* ========================================================================== Contact block (shared: studio page footer + contact page) ========================================================================== */ .contact-block { border-top: 1px solid var(--color-line); margin-top: var(--space-6); padding-top: var(--space-5); display: grid; gap: var(--space-4); } @media (min-width: 640px) { .contact-block { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } .contact-block h3 { margin-bottom: var(--space-2); } .contact-block address, .contact-block p { font-style: normal; } .contact-block a.mail-link { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) ease; } .contact-block a.mail-link:hover { border-color: currentColor; } /* ========================================================================== Contact page — minimal, centered ========================================================================== */ .contact-layout { max-width: 46ch; margin: 0 auto; padding: var(--space-7) 0 var(--space-8); text-align: center; } .contact-info h1 { font-family: var(--font-serif); font-size: var(--fs-h1); letter-spacing: var(--tracking-title); text-transform: uppercase; margin-bottom: var(--space-5); } .contact-info__group { margin-bottom: var(--space-5); } .contact-info__group h2 { font-size: var(--fs-nav); font-family: var(--font-serif); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); } .contact-info address { font-style: normal; line-height: 1.7; } .contact-info a.mail-link { display: inline-block; font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) ease; } .contact-info a.mail-link:hover { border-color: currentColor; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--color-bg); color: var(--color-text-muted); border-top: 1px solid var(--color-line); padding: var(--space-6) 0; } .site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; color: var(--color-text); } .site-footer__mark { width: 30px; height: 54px; opacity: 0.9; } .site-footer__meta { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; } .site-footer a { border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) ease; } .site-footer a:hover { border-color: currentColor; }