/* ========================================================================= LoreTrue Studio Gallery — front-end styles Colours, fonts and sizes live in the :root block below. ========================================================================= */ /* Fonts are enqueued separately by the plugin (Statues → My setup). */ /* ---- 0. theme compatibility ------------------------------------------- Applies only to pages using our markup (body class lt-page). No :has(), and nothing outside #main is touched — cookie bars and popups are safe. ---------------------------------------------------------------------- */ body.lt-page.lt-hide-chrome #header, body.lt-page.lt-hide-chrome .ct-header, body.lt-page.lt-hide-chrome #footer, body.lt-page.lt-hide-chrome .ct-footer, body.lt-page.lt-hide-chrome .hero-section, body.lt-page.lt-hide-chrome .page-title, body.lt-page.lt-hide-chrome .entry-header { display: none; } body.lt-page #main, body.lt-page #main-container, body.lt-page #main .site-main, body.lt-page #main .content-area, body.lt-page #main .entry-content, body.lt-page #main .ct-container, body.lt-page #main .ct-container-narrow, body.lt-page #main .ct-container-wide, body.lt-page #main .ct-container-full { max-width: none; width: 100%; padding: 0; margin: 0; } body.lt-page #main .entry-content > * { max-width: none; margin: 0; } /* The 100vw trick needs a guard against horizontal overflow. Our own page template does not use 100vw, so the guard is skipped there. */ body.lt-page:not(.lt-template) { overflow-x: clip; } body.lt-page { background: #0d0d0d; } html.lt-page { scroll-behavior: smooth; } /* Plugin page template: content sits directly in , no theme wrappers. */ body.lt-template { margin: 0; padding: 0; } body.lt-template .lt-root { margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } /* ---- 1. tokens ---- */ .lt-root { --lt-bg: #0d0d0d; --lt-surface: #1c1c1c; --lt-line: #2e2e2e; --lt-gold: #e2b455; --lt-text: #ececea; --lt-muted: #8d8d88; --lt-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --lt-body: "Jost", "Helvetica Neue", Arial, sans-serif; --lt-hero-h: clamp(420px, 82vh, 900px); --lt-pad-x: clamp(20px, 5.5vw, 96px); --lt-gap: clamp(10px, 1.2vw, 20px); --lt-logo: 84px; --lt-logo-sm: 46px; position: relative; isolation: isolate; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; color: var(--lt-text); font-family: var(--lt-body); font-weight: 300; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* background as its own layer — not carried along when copying text */ .lt-root::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--lt-bg); pointer-events: none; } .lt-root *, .lt-root *::before, .lt-root *::after { box-sizing: border-box; } .lt-root img { display: block; max-width: 100%; } .lt-root a { color: inherit; text-decoration: none; } .lt-root button { font: inherit; } .lt-root :focus-visible { outline: 2px solid var(--lt-gold); outline-offset: 3px; } .lt-root ::selection { background: var(--lt-gold); color: #141005; } .lt-empty { padding: 20px 0; color: #8d8d88; font-size: 14px; } /* ---- 2. header ---- A bar in normal document flow (not sticky). The sticky version flickered on long galleries because the browser repainted it on every scroll step. Its colour matches the site background. */ .lt-header { position: relative; z-index: 40; display: flex; align-items: center; gap: clamp(16px, 4vw, 64px); padding: 18px var(--lt-pad-x); background: var(--lt-bg); } .lt-logo { flex: 0 0 auto; display: block; line-height: 0; } .lt-logo img { height: var(--lt-logo); width: auto; max-width: 260px; object-fit: contain; } .lt-nav { display: flex; gap: clamp(18px, 3.6vw, 60px); margin-left: clamp(10px, 3vw, 40px); } .lt-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 4px; font-size: 16px; font-weight: 400; letter-spacing: .02em; color: #f6f6f4; transition: color .25s ease; } .lt-nav a::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 1px; background: var(--lt-gold); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .lt-nav a:hover, .lt-nav a:focus-visible, .lt-nav a.is-current { color: var(--lt-gold); } .lt-nav a:hover::after, .lt-nav a:focus-visible::after, .lt-nav a.is-current::after { transform: scaleX(1); } .lt-burger { display: none; margin-left: auto; width: 46px; height: 46px; background: transparent; border: 1px solid #3a3a3a; color: var(--lt-text); cursor: pointer; padding: 0; } .lt-burger span { display: block; width: 20px; height: 1px; margin: 4px auto; background: currentColor; transition: transform .3s, opacity .3s; } .lt-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .lt-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .lt-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } @media (max-width: 860px) { .lt-root { --lt-logo: 62px; --lt-logo-sm: 44px; } .lt-burger { display: block; } .lt-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: var(--lt-bg); max-height: 0; overflow: hidden; transition: max-height .35s ease; } .lt-nav.is-open { max-height: 360px; } .lt-nav a { padding: 14px var(--lt-pad-x); min-height: 52px; } .lt-nav a::after { left: var(--lt-pad-x); right: var(--lt-pad-x); bottom: 10px; } } /* ---- 3. hero ---- */ .lt-hero { position: relative; height: var(--lt-hero-h); overflow: hidden; background: #111; } /* carousel: images stack and cross-fade */ .lt-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity .9s ease; } .lt-hero__img.is-active { opacity: 1; } /* hero overlay — disabled */ .lt-hero__veil { display: none; } .lt-hero__text { position: absolute; left: var(--lt-pad-x); bottom: clamp(36px, 6vh, 88px); z-index: 2; max-width: min(46ch, 62%); } .lt-hero__text h1 { margin: 0; font-family: var(--lt-display); font-weight: 400; font-size: clamp(38px, 4.9vw, 74px); line-height: 1.06; letter-spacing: .02em; color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, .6); } .lt-hero__text p { margin: 14px 0 0; padding-top: 14px; position: relative; max-width: 34ch; font-size: clamp(15px, 1.2vw, 21px); line-height: 1.55; font-weight: 300; letter-spacing: .04em; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 14px rgba(0, 0, 0, .6); } /* the gold rule sits above the text and is shorter than the paragraph */ .lt-hero__text p::before { content: ""; position: absolute; top: 0; left: 0; width: 85%; height: 1px; background: #f3d391; } @media (max-width: 640px) { .lt-hero__text { max-width: calc(100% - 2 * var(--lt-pad-x)); bottom: 28px; } .lt-hero__text h1 { font-size: clamp(26px, 8vw, 38px); } .lt-hero__text p { margin-top: 10px; padding-top: 10px; max-width: 24ch; } } /* ---- 4. page intro ---- */ .lt-pagehead { padding: clamp(34px, 5vw, 66px) var(--lt-pad-x) clamp(24px, 3.4vw, 46px); } .lt-back { display: inline-block; margin-bottom: 18px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--lt-muted); } .lt-back:hover { color: var(--lt-gold); } .lt-h1 { margin: 0; font-family: var(--lt-display); font-weight: 400; font-size: clamp(40px, 6vw, 86px); line-height: 1; font-variant-caps: small-caps; letter-spacing: .02em; color: var(--lt-gold); } .lt-pagehead p { margin: 14px 0 0; max-width: 60ch; color: #c1c1bc; font-size: clamp(15px, 1.15vw, 17px); } /* ---- 5. sections ---- */ .lt-section { padding: clamp(52px, 7vw, 110px) var(--lt-pad-x); scroll-margin-top: 110px; } .lt-section + .lt-section { padding-top: 0; } .lt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .lt-h2 { margin: 0; font-family: var(--lt-display); font-weight: 400; font-size: clamp(34px, 4.4vw, 58px); line-height: 1; font-variant-caps: small-caps; letter-spacing: .02em; color: var(--lt-gold); } /* clickable heading — a real link, not an invisible overlay */ .lt-h2 a { display: inline-block; padding: 4px 2px; color: inherit; transition: color .25s ease, opacity .25s ease; } .lt-h2 a:hover, .lt-h2 a:focus-visible { color: #f3d391; } .lt-rule { height: 1px; background: var(--lt-line); margin: clamp(16px, 2vw, 26px) 0 clamp(20px, 2.6vw, 34px); } .lt-btn { flex: 0 0 auto; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 150px; padding: 10px 20px; background: var(--lt-gold); border: 1px solid var(--lt-gold); color: #1a1408; font-family: var(--lt-display); font-size: 17px; letter-spacing: .03em; transition: background .25s, color .25s; } .lt-btn:hover { background: transparent; color: var(--lt-gold); } /* ---- 6. statue cards ---- */ .lt-groups { display: grid; gap: var(--lt-gap); grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .lt-groups { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .lt-groups { grid-template-columns: 1fr; } } .lt-group { position: relative; margin: 0; padding: 0; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; color: inherit; display: block; } .lt-shots { --th: clamp(40px, 20%, 72px); --tp: clamp(10px, 1.4vw, 16px); --tg: 5px; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lt-surface); border: 1px solid var(--lt-line); transition: border-color .3s; } .lt-group:hover .lt-shots, .lt-group:focus-visible .lt-shots { border-color: var(--lt-gold); } /* bottom gradient only, for title legibility */ .lt-shots::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .25) 35%, transparent 65%); } .lt-shots img { position: absolute; } .lt-shots img:nth-of-type(1) { inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .3, 1); } .lt-group:hover .lt-shots img:nth-of-type(1) { transform: scale(1.04); } .lt-shots img:nth-of-type(2), .lt-shots img:nth-of-type(3), .lt-shots img:nth-of-type(4) { z-index: 3; bottom: var(--tp); width: var(--th); height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 4px 14px rgba(0, 0, 0, .55); } .lt-shots img:nth-of-type(2) { right: calc(var(--tp) + 2 * (var(--th) + var(--tg))); } .lt-shots img:nth-of-type(3) { right: calc(var(--tp) + 1 * (var(--th) + var(--tg))); } .lt-shots img:nth-of-type(4) { right: var(--tp); } .lt-shots img:nth-of-type(n+5) { display: none; } .lt-badge { position: absolute; z-index: 4; bottom: var(--tp); right: var(--tp); width: var(--th); aspect-ratio: 1; display: grid; place-content: center; background: rgba(0, 0, 0, .62); border: 1px solid rgba(255, 255, 255, .35); font-family: var(--lt-display); font-size: clamp(14px, 1.5vw, 20px); color: #fff; } /* title bottom-left; thumbnails must never cover it */ .lt-group__title { position: absolute; z-index: 3; left: var(--tp); bottom: var(--tp); right: calc(var(--tp) + 3 * var(--th) + 2 * var(--tg) + 12px); margin: 0; font-family: var(--lt-display); font-weight: 500; font-size: clamp(22px, 1.7vw, 32px); line-height: 1.12; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .85); letter-spacing: .01em; } /* single-photo statue: the title may use the full width (class set in PHP) */ .lt-group--solo .lt-group__title { right: var(--tp); } /* ---- 7. plain tiles (My setup) ---- */ .lt-tiles { display: grid; gap: var(--lt-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .lt-tile { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; background: var(--lt-surface); border: 1px solid var(--lt-line); transition: border-color .3s; } .lt-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .3, 1); } .lt-tile:hover { border-color: var(--lt-gold); } .lt-tile:hover img { transform: scale(1.04); } /* ---- 8. prose and contact ---- */ .lt-prose p { margin: 0 0 18px; font-size: clamp(15px, 1.15vw, 17px); color: #c9c9c4; max-width: 70ch; } .lt-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 3vw, 44px); } .lt-card { border: 1px solid var(--lt-line); padding: clamp(20px, 2.4vw, 32px); } .lt-card h3 { margin: 0 0 10px; font-family: var(--lt-display); font-size: 16px; font-weight: 400; color: var(--lt-gold); letter-spacing: .02em; } .lt-card p { margin: 0; font-size: 15px; color: #c9c9c4; } .lt-card a { display: inline-block; min-height: 24px; } .lt-card a:hover { color: var(--lt-gold); } /* ---- 9. footer ---- */ .lt-footer { padding: 26px var(--lt-pad-x); border-top: 1px solid var(--lt-line); font-size: 12px; letter-spacing: .08em; color: var(--lt-muted); text-transform: uppercase; } /* ---- 10. lightbox ---- */ .lt-lb { position: fixed; inset: 0; z-index: 99999; display: none; background: rgba(0, 0, 0, .97); } .lt-lb.is-open { display: block; animation: lt-fade .28s ease both; } @keyframes lt-fade { from { opacity: 0; } to { opacity: 1; } } .lt-lb__stage { --lb-py: clamp(56px, 7vw, 90px); --lb-px: clamp(56px, 8vw, 120px); position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: var(--lb-py) var(--lb-px); z-index: 1; } .lt-lb__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; animation: lt-fade .25s ease both; } /* invisible but accessible click halves */ .lt-lb__zone { position: absolute; top: clamp(56px, 7vw, 90px); bottom: clamp(56px, 7vw, 90px); width: calc(50% - clamp(56px, 8vw, 120px) / 2); z-index: 2; padding: 0; background: transparent; border: 0; cursor: pointer; } .lt-lb__zone--prev { left: clamp(56px, 8vw, 120px); cursor: w-resize; } .lt-lb__zone--next { right: clamp(56px, 8vw, 120px); cursor: e-resize; } .lt-lb__zone:focus-visible { outline: 2px solid var(--lt-gold, #e2b455); outline-offset: -6px; } .lt-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: clamp(44px, 4vw, 60px); height: clamp(44px, 4vw, 60px); display: grid; place-content: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: clamp(20px, 2vw, 28px); line-height: 1; cursor: pointer; transition: background .25s, border-color .25s, color .25s; } .lt-lb__nav:hover { background: rgba(226, 180, 85, .14); border-color: #e2b455; color: #e2b455; } .lt-lb__prev { left: clamp(10px, 2vw, 28px); } .lt-lb__next { right: clamp(10px, 2vw, 28px); } .lt-lb__close { position: absolute; top: clamp(12px, 1.6vw, 24px); right: clamp(12px, 2vw, 28px); z-index: 4; width: 46px; height: 46px; background: none; border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; } .lt-lb__close:hover { border-color: #e2b455; color: #e2b455; } .lt-lb__meta { position: absolute; left: 0; right: 0; bottom: clamp(14px, 2vw, 28px); z-index: 3; text-align: center; color: #b9b9b4; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(14px, 1.4vw, 18px); letter-spacing: .08em; pointer-events: none; } .lt-lb__meta b { color: #e2b455; font-weight: 400; } .lt-lb.is-single .lt-lb__nav, .lt-lb.is-single .lt-lb__zone, .lt-lb.is-single .lt-lb__meta { display: none; } @media (max-width: 640px) { .lt-lb__stage { --lb-py: 64px; --lb-px: 12px; padding: 64px 12px 76px; } .lt-lb__nav { top: auto; bottom: 14px; transform: none; } .lt-lb__prev { left: 14px; } .lt-lb__next { right: 14px; } .lt-lb__meta { bottom: 30px; } .lt-lb__zone { top: 64px; bottom: 86px; width: 50%; } .lt-lb__zone--prev { left: 0; } .lt-lb__zone--next { right: 0; } } @media (prefers-reduced-motion: reduce) { .lt-root *, .lt-lb * { animation: none !important; transition: none !important; } }