/* ============================================================ the raimentarium — theme Three art directions switch via [data-direction] on : atelier · specimen · aura. All moody/dark, bold & artful. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--bg); } /* ---------- Default tokens (Atelier) ---------- */ :root, :root[data-direction="atelier"] { --bg: oklch(0.158 0.012 62); --bg-2: oklch(0.205 0.014 62); --bg-3: oklch(0.255 0.016 62); --ink: oklch(0.945 0.010 78); --ink-soft: oklch(0.735 0.012 76); --ink-faint: oklch(0.560 0.012 74); --line: oklch(0.320 0.012 64); --accent: var(--accent-override, oklch(0.815 0.085 78)); --accent-2: oklch(0.815 0.085 78); --glow: transparent; --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Jost", system-ui, sans-serif; --font-label: "Jost", system-ui, sans-serif; --display-weight: 600; --display-spacing: -0.01em; --label-spacing: 0.32em; --label-transform: uppercase; --label-weight: 500; --radius: 2px; --maxw: 1320px; } /* ---------- Specimen ---------- */ :root[data-direction="specimen"] { --bg: oklch(0.165 0.010 255); --bg-2: oklch(0.205 0.012 255); --bg-3: oklch(0.250 0.014 255); --ink: oklch(0.955 0.006 255); --ink-soft: oklch(0.715 0.012 255); --ink-faint: oklch(0.540 0.012 255); --line: oklch(0.340 0.014 255); --accent: var(--accent-override, oklch(0.875 0.185 128)); --accent-2: oklch(0.875 0.185 128); --glow: transparent; --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --font-label: "Space Mono", ui-monospace, monospace; --display-weight: 600; --display-spacing: -0.03em; --label-spacing: 0.06em; --label-transform: uppercase; --label-weight: 400; --radius: 0px; --maxw: 1320px; } /* ---------- Aura ---------- */ :root[data-direction="aura"] { --bg: oklch(0.155 0.022 318); --bg-2: oklch(0.205 0.030 316); --bg-3: oklch(0.255 0.036 314); --ink: oklch(0.940 0.012 330); --ink-soft: oklch(0.745 0.022 328); --ink-faint: oklch(0.575 0.026 322); --line: oklch(0.330 0.026 318); --accent: var(--accent-override, oklch(0.790 0.090 12)); --accent-2: oklch(0.730 0.100 300); --glow: oklch(0.730 0.100 300); --font-display: "Bodoni Moda", Georgia, serif; --font-body: "Jost", system-ui, sans-serif; --font-label: "Jost", system-ui, sans-serif; --display-weight: 600; --display-spacing: 0em; --label-spacing: 0.30em; --label-transform: uppercase; --label-weight: 400; --radius: 18px; --maxw: 1240px; } /* ============================================================ Layout primitives ============================================================ */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); } .label { font-family: var(--font-label); text-transform: var(--label-transform); letter-spacing: var(--label-spacing); font-weight: var(--label-weight); font-size: 12.5px; color: var(--ink-soft); margin: 0; } .display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); line-height: 0.98; margin: 0; } /* ============================================================ Top navigation ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 5vw, 64px); transition: background .4s ease, backdrop-filter .4s ease, padding .4s ease, border-color .4s ease; border-bottom: 1px solid transparent; } .nav.scrolled { background: color-mix(in oklab, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); padding-top: 13px; padding-bottom: 13px; } .brand { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 22px; letter-spacing: var(--display-spacing); line-height: 1; white-space: nowrap; } :root[data-direction="specimen"] .brand { font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } .nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); } .nav-links a.navlink { font-family: var(--font-label); text-transform: var(--label-transform); letter-spacing: 0.14em; font-size: 12px; color: var(--ink-soft); position: relative; padding: 4px 0; transition: color .25s ease; } :root[data-direction="specimen"] .nav-links a.navlink { letter-spacing: 0.02em; } .nav-links a.navlink::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--accent); transition: width .3s ease; } .nav-links a.navlink:hover { color: var(--ink); } .nav-links a.navlink:hover::after { width: 100%; } .nav-links .nav-hide { display: inline; } @media (max-width: 720px) { .nav-links .nav-hide { display: none; } } /* Buttons */ .btn { font-family: var(--font-label); text-transform: var(--label-transform); letter-spacing: 0.14em; font-size: 12px; font-weight: var(--label-weight); display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; transition: background .25s ease, color .25s ease, transform .2s ease, box-shadow .3s ease; } .btn:hover { background: var(--accent); color: var(--bg); transform: translateY(-1px); } .btn.solid { background: var(--accent); color: var(--bg); } .btn.solid:hover { box-shadow: 0 10px 30px -8px color-mix(in oklab, var(--accent) 60%, transparent); } .btn.ghost { border-color: var(--line); color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } :root[data-direction="specimen"] .btn { border-radius: 0; letter-spacing: 0.04em; } :root[data-direction="aura"] .btn { border-radius: 999px; } /* ============================================================ Hero ============================================================ */ .hero { position: relative; padding: clamp(120px, 18vh, 220px) 0 clamp(60px, 9vh, 110px); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 72px); align-items: end; } @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; align-items: start; } } .hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; } .hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .hero-title { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); line-height: 0.92; font-size: clamp(56px, 11.5vw, 168px); margin: 0 0 6px; text-wrap: balance; } :root[data-direction="specimen"] .hero-title { text-transform: uppercase; line-height: 0.86; } :root[data-direction="aura"] .hero-title { font-style: italic; } .hero-title .thin { font-weight: 300; } .hero-title .art, .footer-word .art { font-style: italic; font-weight: 500; color: var(--accent); } :root[data-direction="specimen"] .hero-title .art, :root[data-direction="specimen"] .footer-word .art { font-style: normal; color: inherit; } .hero-sub { max-width: 36ch; margin: 26px 0 0; color: var(--ink-soft); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; text-wrap: pretty; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero-media { position: relative; } .hero-media .media-frame { aspect-ratio: 4 / 5; } .hero-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; color: var(--ink-faint); } .hero-cap .t { font-family: var(--font-display); font-size: 19px; color: var(--ink); } :root[data-direction="specimen"] .hero-cap .t { font-family: var(--font-body); font-weight: 600; font-size: 15px; } /* decorative aura blooms (only visible in aura direction) */ .bloom { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0; pointer-events: none; z-index: 0; transition: opacity .6s ease; } :root[data-direction="aura"] .bloom { opacity: .5; } .bloom.b1 { width: 460px; height: 460px; background: var(--glow); top: -120px; right: -60px; } .bloom.b2 { width: 380px; height: 380px; background: var(--accent); bottom: -160px; left: -120px; opacity: 0; } :root[data-direction="aura"] .bloom.b2 { opacity: .38; } .hero .wrap, .section .wrap { position: relative; z-index: 1; } /* ============================================================ Section scaffolding ============================================================ */ .section { padding: clamp(70px, 11vh, 150px) 0; position: relative; } .section.alt { background: color-mix(in oklab, var(--bg-2) 60%, var(--bg)); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 30px; margin-bottom: clamp(34px, 5vw, 60px); border-bottom: 1px solid var(--line); } .section-head .lead { max-width: 64%; } @media (max-width: 720px) { .section-head .lead { max-width: 100%; } } .section-title { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); line-height: 0.98; font-size: clamp(38px, 6.5vw, 84px); margin: 14px 0 0; } :root[data-direction="specimen"] .section-title { text-transform: uppercase; } :root[data-direction="aura"] .section-title { font-style: italic; } .section-intro { color: var(--ink-soft); max-width: 44ch; margin: 0; font-size: 16px; line-height: 1.6; text-wrap: pretty; } .section-num { font-family: var(--font-label); color: var(--accent); letter-spacing: 0.2em; font-size: 12.5px; } :root[data-direction="specimen"] .section-num { letter-spacing: 0.04em; } /* ============================================================ Piece cards + galleries ============================================================ */ .media-frame { position: relative; width: 100%; background: var(--bg-3); overflow: visible; } .media-frame image-slot { width: 100%; height: 100%; display: block; } .media-frame::after { /* hairline border that sits above the slot */ content: ""; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; z-index: 3; } /* dark-friendly empty-state text inside the image-slot shadow DOM */ image-slot::part(empty) { color: color-mix(in oklab, var(--ink) 52%, transparent); } image-slot::part(frame) { background: var(--bg-3); } /* The clickable artwork tile */ .tile { position: relative; cursor: pointer; } .tile .media-frame { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; } .tile:hover .media-frame { transform: translateY(-5px); box-shadow: 0 26px 50px -22px rgba(0,0,0,.7); } :root[data-direction="aura"] .tile:hover .media-frame { box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent), 0 30px 70px -20px color-mix(in oklab, var(--glow) 70%, transparent); } .tile .expand { position: absolute; z-index: 4; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--bg) 55%, transparent); backdrop-filter: blur(6px); color: var(--ink); border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent); opacity: 0; transform: scale(.9); transition: opacity .3s ease, transform .3s ease, background .3s; } .tile:hover .expand { opacity: 1; transform: scale(1); } .tile .expand svg { width: 16px; height: 16px; } .piece-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 16px; } .piece-name { font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 26px); font-weight: var(--display-weight); line-height: 1.05; margin: 0; letter-spacing: var(--display-spacing); } :root[data-direction="specimen"] .piece-name { font-family: var(--font-body); font-weight: 600; font-size: clamp(17px,1.5vw,21px); letter-spacing: -0.01em; } :root[data-direction="aura"] .piece-name { font-style: italic; } .piece-sub { font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 7px 0 0; } :root[data-direction="specimen"] .piece-sub { letter-spacing: 0.02em; } .piece-idx { font-family: var(--font-label); font-size: 12px; color: var(--ink-faint); letter-spacing: 0.1em; } /* status + inquire row for available pieces */ .avail-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } :root[data-direction="specimen"] .status { letter-spacing: 0.02em; } .status .pulse { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.78 0.13 150); position: relative; } .status .pulse::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid oklch(0.78 0.13 150); opacity:.6; animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(1.5);opacity:0} } .inq { font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); cursor: pointer; background: none; border: none; padding: 6px 2px; display: inline-flex; align-items: center; gap: 7px; transition: gap .25s ease, color .2s; } :root[data-direction="specimen"] .inq { letter-spacing: 0.03em; } .inq:hover { gap: 12px; } .inq svg { width: 14px; height: 14px; } /* Available grid */ .avail-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 3.4vw, 52px) clamp(18px, 2.2vw, 32px); align-items: start; } .avail-grid .tile { grid-column: span 4; } .avail-grid .tile.feature { grid-column: span 6; } .avail-grid .tile:nth-child(1) .media-frame { aspect-ratio: 4/5; } .avail-grid .tile:nth-child(2) .media-frame { aspect-ratio: 4/5; } .avail-grid .tile:nth-child(3) .media-frame { aspect-ratio: 4/5; } .avail-grid .tile:nth-child(4) .media-frame { aspect-ratio: 3/4; } .avail-grid .tile:nth-child(5) .media-frame { aspect-ratio: 3/4; } @media (max-width: 920px) { .avail-grid .tile, .avail-grid .tile.feature { grid-column: span 6; } } @media (max-width: 560px) { .avail-grid .tile, .avail-grid .tile.feature { grid-column: span 12; } } /* Archive subsections */ .archive-group { margin-top: clamp(46px, 6vw, 78px); } .archive-group:first-of-type { margin-top: 0; } .group-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; } .group-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(24px, 3vw, 38px); margin: 0; letter-spacing: var(--display-spacing); white-space: nowrap; flex-shrink: 0; } :root[data-direction="specimen"] .group-title { text-transform: uppercase; font-size: clamp(20px,2.4vw,30px); } :root[data-direction="aura"] .group-title { font-style: italic; } .group-rule { flex: 1; height: 1px; background: var(--line); } .group-count { font-family: var(--font-label); font-size: 12px; color: var(--ink-faint); letter-spacing: 0.14em; } .arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 46px) clamp(18px, 2.4vw, 34px); align-items: start; } @media (max-width: 760px) { .arch-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .arch-grid { grid-template-columns: 1fr; } } .arch-grid .tile .media-frame { aspect-ratio: 1/1; } .archive-group.gowns .arch-grid .tile .media-frame { aspect-ratio: 3/4; } .archive-group.fiber .arch-grid .tile:nth-child(2) .media-frame { aspect-ratio: 1/1; } /* ============================================================ About ============================================================ */ .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(34px, 6vw, 90px); align-items: center; } @media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } } .about-portrait .media-frame { aspect-ratio: 4/5; } .about-statement p { font-size: clamp(19px, 2.1vw, 27px); line-height: 1.5; font-family: var(--font-display); color: var(--ink); margin: 0 0 1em; text-wrap: pretty; font-weight: 500; } :root[data-direction="specimen"] .about-statement p { font-family: var(--font-body); font-weight: 400; font-size: clamp(17px,1.8vw,22px); } :root[data-direction="aura"] .about-statement p:first-child { font-style: italic; } .about-statement .small { font-family: var(--font-body); font-size: 16px; color: var(--ink-soft); line-height: 1.7; font-weight: 400; } .about-contact { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); } .contact-item .k { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 5px; } .contact-item .v { font-family: var(--font-display); font-size: 19px; color: var(--ink); } .contact-item a.v:hover { color: var(--accent); } :root[data-direction="specimen"] .contact-item .v { font-family: var(--font-body); font-size: 16px; font-weight: 500; } /* ============================================================ Footer ============================================================ */ .footer { padding: clamp(56px, 8vh, 96px) 0 40px; border-top: 1px solid var(--line); } .footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; } .footer-word { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(40px, 9vw, 120px); line-height: 0.9; letter-spacing: var(--display-spacing); margin: 0; } :root[data-direction="specimen"] .footer-word { text-transform: uppercase; } :root[data-direction="aura"] .footer-word { font-style: italic; } .footer-links { display: flex; flex-direction: column; gap: 10px; text-align: right; } .footer-links a { font-family: var(--font-label); font-size: 13px; letter-spacing: 0.1em; color: var(--ink-soft); transition: color .2s; } .footer-links a:hover { color: var(--accent); } .footer-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 70px); padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.08em; color: var(--ink-faint); } /* ============================================================ Lightbox ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; } .lightbox.open { display: block; } .lb-scrim { position: absolute; inset: 0; background: color-mix(in oklab, var(--bg) 86%, black); backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s ease; } .lightbox.open .lb-scrim { opacity: 1; } .lb-inner { position: absolute; inset: 0; display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(20px, 4vw, 60px); align-items: center; padding: clamp(56px, 8vh, 90px) clamp(20px, 6vw, 80px); opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; } .lightbox.open .lb-inner { opacity: 1; transform: none; } @media (max-width: 820px) { .lb-inner { grid-template-columns: 1fr; align-content: center; gap: 24px; overflow-y: auto; } } .lb-stage { position: relative; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; } .lb-stage image-slot { width: 100%; height: 100%; max-height: 78vh; } @media (max-width: 820px) { .lb-stage image-slot { height: 50vh; } } .lb-info { max-width: 420px; } .lb-num { font-family: var(--font-label); color: var(--accent); letter-spacing: 0.2em; font-size: 12.5px; } :root[data-direction="specimen"] .lb-num { letter-spacing: 0.05em; } .lb-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(34px, 4.4vw, 60px); line-height: 1; margin: 16px 0 0; letter-spacing: var(--display-spacing); } :root[data-direction="aura"] .lb-title { font-style: italic; } :root[data-direction="specimen"] .lb-title { text-transform: uppercase; } .lb-cat { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--ink-soft); margin: 18px 0 0; } .lb-desc { color: var(--ink-soft); margin: 18px 0 0; line-height: 1.7; font-size: 16px; } .lb-specs { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--line); } .lb-specs li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .lb-specs .k { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; color: var(--ink-faint); } .lb-specs .v { color: var(--ink); text-align: right; } .lb-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .lb-close { position: fixed; top: 22px; right: 24px; z-index: 210; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 60%, transparent); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .25s, transform .25s; } .lb-close:hover { background: var(--accent); color: var(--bg); transform: rotate(90deg); } .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 210; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 60%, transparent); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .25s, color .25s; } .lb-nav:hover { background: var(--accent); color: var(--bg); } .lb-nav.prev { left: 18px; } .lb-nav.next { right: 18px; } @media (max-width: 820px) { .lb-nav { top: auto; bottom: 18px; transform: none; } .lb-nav.prev{left:calc(50% - 64px);} .lb-nav.next{right:calc(50% - 64px);} } .lb-close svg, .lb-nav svg { width: 18px; height: 18px; } /* ============================================================ Scroll reveals ============================================================ */ html.reveals-on .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } html.reveals-on .reveal.in { opacity: 1; transform: none; } html.reveals-on .reveal.d1 { transition-delay: .08s; } html.reveals-on .reveal.d2 { transition-delay: .16s; } html.reveals-on .reveal.d3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { html.reveals-on .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ Optional film grain texture ============================================================ */ .grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0; mix-blend-mode: overlay; transition: opacity .4s; } .grain.on { opacity: .06; } .grain svg { width: 100%; height: 100%; } /* edit-mode tweak panel mount */ #tweak-root { position: fixed; z-index: 300; }