/* project-page.css — wspólny plik dla wszystkich podstron portfolio Wygenerowany z: domlets, donuts, fantazja, ice-and-roll, jessie, lumpai, martys, pizza oraz dotychczasowego project-page.css. Jak używać: 1) Na każdej podstronie projektu zostaw tylko ten jeden plik CSS: 2) Nie musisz zmieniać HTML, bo style rozpoznają podstronę po istniejących klasach typu .pizza-main-preview, .donuts-main-preview itd. 3) Dla większej kompatybilności możesz dodać klasę do body, np.: */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } body { margin: 0; font-family: Inter, system-ui, sans-serif; } /* ========================================================= Anthony / project-page Scope: :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) ========================================================= */ :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) { --dark: #11161d; --dark-2: #171d26; --text: #ffffff; --muted: #c7ced8; --yellow: #ffe400; --red: #e32222; --accent: #ffb52e; --line: rgba(255,255,255,0.12); --container: min(1440px, calc(100vw - 32px)); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) * { box-sizing: border-box; } html { scroll-behavior: smooth; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 28%), linear-gradient(180deg, #151a21 0%, #0d1117 100%); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) img { max-width: 100%; display: block; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) a { color: inherit; text-decoration: none; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-page { min-height: 100vh; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-container { width: var(--container); margin-inline: auto; } /* Header */ :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-header { position: sticky; top: 0; z-index: 50; background: rgba(10, 14, 20, 0.78); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .back-link { padding: 10px 16px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; color: #fff; transition: background .25s ease, transform .25s ease; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .back-link:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); } /* Hero */ :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-hero { padding: 64px 0 0; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-hero-grid { display: grid; grid-template-columns: 1.35fr 0.85fr; min-height: 620px; overflow: hidden; border-radius: 24px 24px 0 0; background: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.08), transparent 25%), repeating-linear-gradient( 135deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 6px ), #12171f; box-shadow: 0 40px 100px rgba(0,0,0,0.35); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-intro { padding: clamp(44px, 6vw, 92px); display: flex; flex-direction: column; justify-content: center; text-align: center; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-kicker { margin: 0 0 18px; color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-intro h1 { margin: 0; font-family: "Roboto Slab", serif; font-size: clamp(3.4rem, 8vw, 7.2rem); line-height: 0.88; text-transform: uppercase; letter-spacing: -0.06em; color: var(--red); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-intro h1 span { display: block; color: var(--yellow); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-lead { max-width: 680px; margin: 28px auto 0; color: #eef2f7; font-size: clamp(1rem, 1.4vw, 1.22rem); line-height: 1.65; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-features { margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; width: min(720px, 100%); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .feature { display: grid; justify-items: center; gap: 8px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .feature-icon { width: 76px; height: 76px; border: 2px solid rgba(255,181,46,0.42); border-radius: 50%; display: grid; place-items: center; color: var(--accent); font-size: 2rem; font-weight: 800; background: rgba(255,181,46,0.12); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .feature strong { font-size: 0.98rem; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .feature small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .feature-icon.dots { position: relative; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .feature-icon.dots span { position: absolute; width: 24px; height: 24px; border-radius: 50%; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .feature-icon.dots span:nth-child(1) { background: #e32222; transform: translate(-8px, -8px); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .feature-icon.dots span:nth-child(2) { background: #ffe400; transform: translate(-14px, 12px); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .feature-icon.dots span:nth-child(3) { background: #57b941; transform: translate(12px, 8px); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-main-preview { min-height: 620px; background:url("../img/Anthony/tlo-1.png")center center/ cover no-repeat; display: flex; align-items: center; justify-content: center; padding: 48px; position: relative; overflow: hidden; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-main-preview::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.5)), radial-gradient(circle at center, transparent 20%, rgba(0,0,0,0.55) 78%); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-main-preview img { position: relative; z-index: 2; width: min(420px, 90%); border-radius: 8px; box-shadow: 0 32px 70px rgba(0,0,0,0.5); } /* Showcase */ :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-showcase { padding: 0 0 80px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .showcase-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; align-items: stretch; box-shadow: 0 40px 100px rgba(0,0,0,0.28); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .white-panel { background: url("../img/Anthony/tlo-2.png"); padding: clamp(28px, 5vw, 70px); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .image-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; align-items: start; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-shot { margin: 0; overflow: hidden; border-radius: 18px; background: #f3f3f3; box-shadow: 0 18px 38px rgba(0,0,0,0.16); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-shot img { width: 100%; height: 100%; display: block; } /* Zdjęcia poziome, np. potykacz i szyld */ :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .shot-landscape { grid-column: span 6; aspect-ratio: 16 / 10; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .shot-landscape img { object-fit: cover; } /* Projekty menu / ulotki pionowe */ :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .shot-portrait { grid-column: span 4; aspect-ratio: 3 / 4.35; padding: 12px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .shot-portrait img { object-fit: contain; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-side { display: grid; grid-template-rows: auto auto 1fr; background: repeating-linear-gradient( 135deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 6px ), #12171f; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .side-image { min-height: 260px; overflow: hidden; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .scope-card { padding: clamp(34px, 5vw, 58px); display: flex; flex-direction: column; justify-content: center; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .scope-card h2 { margin: 0 0 24px; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 2rem); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .scope-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .scope-card li { position: relative; padding-left: 24px; color: #eef2f7; font-size: clamp(1rem, 1.4vw, 1.25rem); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .scope-card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); } /* Description */ :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-description { padding: 20px 0 90px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .description-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; padding: clamp(34px, 5vw, 64px); border: 1px solid rgba(255,255,255,0.1); border-radius: 32px; background: rgba(255,255,255,0.045); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .description-grid h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -0.05em; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .description-grid p:last-child { color: var(--muted); font-size: 1.08rem; line-height: 1.8; margin: 0; } /* Next */ :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .next-project { padding: 0 0 64px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .next-project-inner { display: flex; justify-content: space-between; gap: 18px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .next-project a { padding: 14px 20px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); transition: transform .25s ease, background .25s ease; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .next-project a:hover { transform: translateY(-2px); background: rgba(255,255,255,0.14); } /* Responsive */ @media (max-width: 1080px) { :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-hero-grid, :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .showcase-grid, :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .description-grid { grid-template-columns: 1fr; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-main-preview { min-height: 520px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .scope-card { grid-column: 1 / -1; } } @media (max-width: 760px) { :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-nav { min-height: 66px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-logo span { display: none; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .back-link { font-size: 0.9rem; padding: 9px 12px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-hero { padding-top: 28px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-hero-grid { border-radius: 22px 22px 0 0; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-intro { padding: 42px 22px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-features { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .feature-icon { width: 66px; height: 66px; font-size: 1.6rem; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-main-preview { min-height: 420px; padding: 28px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .image-grid { grid-template-columns: 1fr; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-shot, :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .shot-landscape, :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .shot-portrait { grid-column: auto; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .shot-landscape { aspect-ratio: 16 / 10; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .shot-portrait { aspect-ratio: 3 / 4.35; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-side { grid-template-columns: 1fr; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .side-image { min-height: 220px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .next-project-inner { flex-direction: column; } } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .menu1-image { width: 100%; max-height: 90vh; object-fit: contain; display: block; } /* Lightbox / powiększenie zdjęcia */ :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-shot img, :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .side-image img, :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .project-main-preview img { cursor: zoom-in; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .image-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(10px); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .image-lightbox.is-active { display: flex; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .lightbox-content { width: min(1200px, 100%); height: min(88vh, 900px); display: flex; align-items: center; justify-content: center; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .lightbox-content img { width: auto; height: auto; max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .lightbox-close { position: fixed; top: 24px; right: 28px; z-index: 10000; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 38px; line-height: 1; cursor: pointer; transition: background .25s ease, transform .25s ease; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .lightbox-close:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)).lightbox-open { overflow: hidden; } @media (max-width: 760px) { :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .image-lightbox { padding: 18px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .lightbox-content { height: 82vh; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .lightbox-content img { max-height: 82vh; border-radius: 10px; } :is(body.project-anthony, body:has(.white-panel), body:has(.project-side)) .lightbox-close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 32px; } } /* ========================================================= Domlets Scope: :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) ========================================================= */ :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) { --dark: #0f1518; --dark-2: #141d20; --text: #ffffff; --muted: #c8d4d4; --teal: #22c6bd; --teal-dark: #078b83; --graphite: #20282b; --paper: #f7fbfb; --line: rgba(255,255,255,0.12); --container: min(1440px, calc(100vw - 32px)); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) * { box-sizing: border-box; } html { scroll-behavior: smooth; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: radial-gradient(circle at 18% 0%, rgba(34,198,189,0.22), transparent 30%), radial-gradient(circle at 92% 20%, rgba(255,255,255,0.08), transparent 24%), linear-gradient(180deg, #11191c 0%, #0b1012 100%); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) img { max-width: 100%; display: block; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) a { color: inherit; text-decoration: none; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-page { min-height: 100vh; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-container { width: var(--container); margin-inline: auto; } /* Header */ :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-header { position: sticky; top: 0; z-index: 50; background: rgba(8, 14, 16, 0.78); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .back-link { padding: 10px 16px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; color: #fff; transition: background .25s ease, transform .25s ease, border-color .25s ease; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .back-link:hover { background: rgba(34,198,189,0.16); border-color: rgba(34,198,189,0.48); transform: translateY(-2px); } /* Hero */ :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-hero { padding: 64px 0 0; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; min-height: 620px; overflow: hidden; border-radius: 24px 24px 0 0; background: linear-gradient(135deg, rgba(34,198,189,0.18), transparent 34%), repeating-linear-gradient( 135deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 7px ), #121a1d; box-shadow: 0 40px 100px rgba(0,0,0,0.35); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-intro { padding: clamp(44px, 6vw, 92px); display: flex; flex-direction: column; justify-content: center; text-align: center; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-kicker { margin: 0 0 18px; color: var(--teal); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-intro h1 { margin: 0; font-size: clamp(3.3rem, 7.4vw, 7rem); line-height: 0.88; text-transform: lowercase; letter-spacing: -0.075em; color: #fff; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-intro h1 span { display: block; margin-top: 16px; font-size: clamp(1.8rem, 4.4vw, 4rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.055em; color: var(--teal); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-lead { max-width: 720px; margin: 28px auto 0; color: #edf7f7; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-features { margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; width: min(760px, 100%); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .feature { display: grid; justify-items: center; gap: 8px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .feature-icon { width: 76px; height: 76px; border: 2px solid rgba(34,198,189,0.44); border-radius: 50%; display: grid; place-items: center; color: var(--teal); font-size: 2rem; font-weight: 900; background: rgba(34,198,189,0.12); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .feature strong { font-size: 0.98rem; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .feature small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .feature-icon.dots { position: relative; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .feature-icon.dots span { position: absolute; width: 24px; height: 24px; border-radius: 50%; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .feature-icon.dots span:nth-child(1) { background: #22c6bd; transform: translate(-8px, -8px); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .feature-icon.dots span:nth-child(2) { background: #ffffff; transform: translate(-14px, 12px); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .feature-icon.dots span:nth-child(3) { background: #2b3336; transform: translate(12px, 8px); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-main-preview { min-height: 620px; display: flex; align-items: center; justify-content: center; padding: 54px; position: relative; overflow: hidden; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .domlets-main-preview { background: radial-gradient(circle at center, rgba(34,198,189,0.28), transparent 28%), linear-gradient(135deg, rgba(34,198,189,0.22), transparent 42%), #eaf2f2; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .domlets-main-preview::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0 46%, rgba(34,198,189,0.9) 46% 56%, transparent 56%), radial-gradient(circle at 50% 50%, transparent 22%, rgba(0,0,0,0.18) 82%); opacity: 0.55; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-main-preview img { position: relative; z-index: 2; width: min(520px, 94%); border-radius: 12px; box-shadow: 0 34px 80px rgba(0,0,0,0.32); cursor: zoom-in; } /* Showcase */ :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-showcase { padding: 0 0 80px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .showcase-grid { display: grid; grid-template-columns: 1fr; align-items: stretch; box-shadow: 0 40px 100px rgba(0,0,0,0.28); overflow: hidden; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .domlets-panel { padding: 0; background: #0c1113; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .domlets-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(340px, 36vw); gap: 0; align-items: stretch; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-shot { margin: 0; overflow: hidden; border-radius: 0; background: #111a1d; box-shadow: none; border: 0; transition: none; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-shot:hover { transform: none; box-shadow: none; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-shot img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; cursor: zoom-in; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-poster, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-square, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-banner, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-card, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-wide, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-letter, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-folder, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-slip, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-stationery { grid-column: span 1; aspect-ratio: auto; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-banner, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-stationery { grid-column: span 2; min-height: clamp(360px, 42vw, 680px); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-poster, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-letter, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-folder { grid-row: span 2; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-card, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-wide, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-square, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-slip { min-height: clamp(340px, 36vw, 560px); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .domlets-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; background: linear-gradient(180deg, #111a1d 0%, #0c1113 100%); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .side-brand-card, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .scope-card { padding: clamp(34px, 5vw, 58px); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .side-brand-card { background: linear-gradient(135deg, rgba(34,198,189,0.2), transparent 52%), #151f22; border-bottom: 0; border-right: 1px solid rgba(255,255,255,0.08); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .side-brand-card h2, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .scope-card h2 { margin: 0 0 22px; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.05; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .side-brand-card p:last-child { margin: 0; color: var(--muted); line-height: 1.7; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .scope-card { display: flex; flex-direction: column; justify-content: center; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .scope-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .scope-card li { position: relative; padding-left: 24px; color: #eef7f7; font-size: clamp(1rem, 1.35vw, 1.18rem); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .scope-card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); } /* Description */ :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-description { padding: 20px 0 90px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .description-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; padding: clamp(34px, 5vw, 64px); border: 1px solid rgba(34,198,189,0.18); border-radius: 32px; background: linear-gradient(135deg, rgba(34,198,189,0.14), transparent 50%), rgba(255,255,255,0.045); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .description-grid h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -0.055em; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .description-grid p:last-child { color: var(--muted); font-size: 1.08rem; line-height: 1.8; margin: 0; } /* Next */ :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .next-project { padding: 0 0 64px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .next-project-inner { display: flex; justify-content: space-between; gap: 18px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .next-project a { padding: 14px 20px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); transition: transform .25s ease, background .25s ease, border-color .25s ease; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .next-project a:hover { transform: translateY(-2px); background: rgba(34,198,189,0.14); border-color: rgba(34,198,189,0.45); } /* Lightbox */ :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .image-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(10px); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .image-lightbox.is-active { display: flex; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .lightbox-content { width: min(1200px, 100%); height: min(88vh, 900px); display: flex; align-items: center; justify-content: center; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .lightbox-content img { width: auto; height: auto; max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .lightbox-close { position: fixed; top: 24px; right: 28px; z-index: 10000; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 38px; line-height: 1; cursor: pointer; transition: background .25s ease, transform .25s ease; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .lightbox-close:hover { background: rgba(34,198,189,0.22); transform: scale(1.05); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)).lightbox-open { overflow: hidden; } /* Responsive */ @media (max-width: 1080px) { :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-hero-grid, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .description-grid { grid-template-columns: 1fr; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-main-preview { min-height: 520px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .domlets-image-grid { grid-auto-rows: minmax(300px, 44vw); } } @media (max-width: 860px) { :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .domlets-image-grid { grid-auto-rows: minmax(280px, 58vw); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-banner, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-stationery { min-height: clamp(320px, 58vw, 560px); } } @media (max-width: 760px) { :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-nav { min-height: 66px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-logo span { display: none; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .back-link { font-size: 0.9rem; padding: 9px 12px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-hero { padding-top: 28px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-hero-grid { border-radius: 22px 22px 0 0; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-intro { padding: 42px 22px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-features { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .feature-icon { width: 66px; height: 66px; font-size: 1.6rem; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .project-main-preview { min-height: 420px; padding: 28px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .domlets-image-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(260px, 78vw); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-poster, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-square, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-banner, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-card, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-wide, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-letter, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-folder, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-slip, :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .shot-stationery { grid-column: auto; grid-row: auto; min-height: 0; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .domlets-side { grid-template-columns: 1fr; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .side-brand-card { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .next-project-inner { flex-direction: column; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .image-lightbox { padding: 18px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .lightbox-content { height: 82vh; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .lightbox-content img { max-height: 82vh; border-radius: 10px; } :is(body.project-domlets, body:has(.domlets-main-preview), body:has(.domlets-gallery-preview), body:has(.domlets-panel)) .lightbox-close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 32px; } } /* ========================================================= Donuts Scope: :is(body.project-donuts, body:has(.donuts-main-preview)) ========================================================= */ :is(body.project-donuts, body:has(.donuts-main-preview)) { --dark: #17101a; --dark-2: #231522; --text: #ffffff; --muted: #f4dce8; --pink: #ff4fa3; --pink-dark: #c91e73; --cyan: #27d3e7; --cream: #fff4da; --choco: #4d2635; --line: rgba(255,255,255,0.12); --container: min(1440px, calc(100vw - 32px)); } :is(body.project-donuts, body:has(.donuts-main-preview)) * { box-sizing: border-box; } html { scroll-behavior: smooth; } :is(body.project-donuts, body:has(.donuts-main-preview)) { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: radial-gradient(circle at 16% 0%, rgba(255,79,163,0.28), transparent 30%), radial-gradient(circle at 88% 14%, rgba(39,211,231,0.18), transparent 26%), linear-gradient(180deg, #201222 0%, #120a15 100%); } :is(body.project-donuts, body:has(.donuts-main-preview)) img { max-width: 100%; display: block; } :is(body.project-donuts, body:has(.donuts-main-preview)) a { color: inherit; text-decoration: none; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-page { min-height: 100vh; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-container { width: var(--container); margin-inline: auto; } /* Header */ :is(body.project-donuts, body:has(.donuts-main-preview)) .project-header { position: sticky; top: 0; z-index: 50; background: rgba(18, 8, 20, 0.78); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; } :is(body.project-donuts, body:has(.donuts-main-preview)) .back-link { padding: 10px 16px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; color: #fff; transition: background .25s ease, transform .25s ease, border-color .25s ease; } :is(body.project-donuts, body:has(.donuts-main-preview)) .back-link:hover { background: rgba(255,79,163,0.18); border-color: rgba(255,79,163,0.52); transform: translateY(-2px); } /* Hero */ :is(body.project-donuts, body:has(.donuts-main-preview)) .project-hero { padding: 64px 0 0; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 640px; overflow: hidden; border-radius: 28px 28px 0 0; background: radial-gradient(circle at 20% 12%, rgba(255,79,163,0.22), transparent 28%), radial-gradient(circle at 80% 78%, rgba(39,211,231,0.14), transparent 34%), repeating-linear-gradient( 135deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 8px ), #211321; box-shadow: 0 40px 100px rgba(0,0,0,0.35); } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-intro { padding: clamp(44px, 6vw, 92px); display: flex; flex-direction: column; justify-content: center; text-align: center; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-kicker { margin: 0 0 18px; color: var(--cyan); font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-intro h1 { margin: 0; font-family: Fredoka, Inter, system-ui, sans-serif; font-size: clamp(3.5rem, 7.6vw, 7.5rem); line-height: 0.86; letter-spacing: -0.055em; color: var(--pink); text-shadow: 0 16px 42px rgba(255,79,163,0.28); } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-intro h1 span { display: block; margin-top: 16px; font-family: Inter, system-ui, sans-serif; font-size: clamp(1.75rem, 4.1vw, 3.9rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.055em; color: var(--cream); } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-lead { max-width: 730px; margin: 28px auto 0; color: #fff5fb; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-features { margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; width: min(760px, 100%); } :is(body.project-donuts, body:has(.donuts-main-preview)) .feature { display: grid; justify-items: center; gap: 8px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .feature-icon { width: 76px; height: 76px; border: 2px solid rgba(255,79,163,0.46); border-radius: 50%; display: grid; place-items: center; color: var(--cream); font-size: 1.8rem; font-weight: 900; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 38%), rgba(255,79,163,0.17); } :is(body.project-donuts, body:has(.donuts-main-preview)) .feature strong { font-size: 0.98rem; } :is(body.project-donuts, body:has(.donuts-main-preview)) .feature small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; } :is(body.project-donuts, body:has(.donuts-main-preview)) .feature-icon.dots { position: relative; } :is(body.project-donuts, body:has(.donuts-main-preview)) .feature-icon.dots span { position: absolute; width: 24px; height: 24px; border-radius: 50%; } :is(body.project-donuts, body:has(.donuts-main-preview)) .feature-icon.dots span:nth-child(1) { background: #ff4fa3; transform: translate(-8px, -8px); } :is(body.project-donuts, body:has(.donuts-main-preview)) .feature-icon.dots span:nth-child(2) { background: #27d3e7; transform: translate(-14px, 12px); } :is(body.project-donuts, body:has(.donuts-main-preview)) .feature-icon.dots span:nth-child(3) { background: #fff4da; transform: translate(12px, 8px); } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-main-preview { min-height: 640px; display: flex; align-items: center; justify-content: center; padding: 54px; position: relative; overflow: hidden; } :is(body.project-donuts, body:has(.donuts-main-preview)) .donuts-main-preview { background: radial-gradient(circle at 58% 44%, rgba(255,244,218,0.78), transparent 24%), radial-gradient(circle at 30% 20%, rgba(255,79,163,0.55), transparent 34%), radial-gradient(circle at 80% 76%, rgba(39,211,231,0.35), transparent 34%), linear-gradient(135deg, #ff74b7 0%, #f84b9b 48%, #24c7dd 100%); } :is(body.project-donuts, body:has(.donuts-main-preview)) .donuts-main-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 22%, rgba(255,255,255,0.32) 0 8px, transparent 9px), radial-gradient(circle at 76% 18%, rgba(255,255,255,0.25) 0 6px, transparent 7px), radial-gradient(circle at 66% 82%, rgba(255,255,255,0.22) 0 9px, transparent 10px), linear-gradient(180deg, transparent, rgba(0,0,0,0.18)); opacity: 0.8; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-main-preview img { position: relative; z-index: 2; width: min(560px, 94%); border-radius: 18px; box-shadow: 0 34px 90px rgba(60, 0, 45, 0.38); cursor: zoom-in; } /* Showcase */ :is(body.project-donuts, body:has(.donuts-main-preview)) .project-showcase { padding: 0 0 80px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .showcase-grid { display: grid; grid-template-columns: 1.55fr 0.45fr; align-items: stretch; box-shadow: 0 40px 100px rgba(0,0,0,0.28); } :is(body.project-donuts, body:has(.donuts-main-preview)) .donuts-panel { padding: clamp(26px, 4.5vw, 68px); background: radial-gradient(circle at 22% 8%, rgba(255,79,163,0.34), transparent 28%), radial-gradient(circle at 78% 18%, rgba(39,211,231,0.24), transparent 30%), linear-gradient(145deg, #fff2f8 0%, #ffd7ea 44%, #d7f7fb 100%); } :is(body.project-donuts, body:has(.donuts-main-preview)) .donuts-image-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: 20px; align-items: start; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-shot { margin: 0; overflow: hidden; border-radius: 22px; background: #ffffff; box-shadow: 0 18px 40px rgba(112, 18, 72, 0.18); border: 1px solid rgba(255,255,255,0.6); transition: transform .25s ease, box-shadow .25s ease; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-shot:hover { transform: translateY(-4px); box-shadow: 0 28px 58px rgba(112, 18, 72, 0.28); } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-shot img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; cursor: zoom-in; } :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-hero-poster { grid-column: span 4; grid-row: span 2; aspect-ratio: 3 / 4.25; } :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-poster { grid-column: span 2; aspect-ratio: 3 / 4.25; } :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-wide { grid-column: span 6; aspect-ratio: 2.4 / 1; } :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-card { grid-column: span 3; aspect-ratio: 1.85 / 1; } :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-menu { grid-column: span 4; aspect-ratio: 1.45 / 1; } :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-strip { grid-column: span 5; aspect-ratio: 2.2 / 1; } :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-waffle { grid-column: span 3; aspect-ratio: 3 / 4.1; } :is(body.project-donuts, body:has(.donuts-main-preview)) .donuts-side { display: grid; grid-template-rows: auto 1fr; background: radial-gradient(circle at 80% 10%, rgba(255,79,163,0.24), transparent 30%), linear-gradient(180deg, #241323 0%, #140b15 100%); } :is(body.project-donuts, body:has(.donuts-main-preview)) .side-brand-card, :is(body.project-donuts, body:has(.donuts-main-preview)) .scope-card { padding: clamp(34px, 5vw, 58px); } :is(body.project-donuts, body:has(.donuts-main-preview)) .side-brand-card { background: linear-gradient(135deg, rgba(255,79,163,0.23), transparent 52%), #241424; border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-donuts, body:has(.donuts-main-preview)) .side-brand-card h2, :is(body.project-donuts, body:has(.donuts-main-preview)) .scope-card h2 { margin: 0 0 22px; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.05; } :is(body.project-donuts, body:has(.donuts-main-preview)) .side-brand-card p:last-child { margin: 0; color: var(--muted); line-height: 1.7; } :is(body.project-donuts, body:has(.donuts-main-preview)) .scope-card { display: flex; flex-direction: column; justify-content: center; } :is(body.project-donuts, body:has(.donuts-main-preview)) .scope-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .scope-card li { position: relative; padding-left: 24px; color: #fff2fa; font-size: clamp(1rem, 1.35vw, 1.18rem); } :is(body.project-donuts, body:has(.donuts-main-preview)) .scope-card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 5px rgba(255,79,163,0.13); } /* Description */ :is(body.project-donuts, body:has(.donuts-main-preview)) .project-description { padding: 20px 0 90px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .description-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; padding: clamp(34px, 5vw, 64px); border: 1px solid rgba(255,79,163,0.22); border-radius: 32px; background: linear-gradient(135deg, rgba(255,79,163,0.16), transparent 48%), rgba(255,255,255,0.045); } :is(body.project-donuts, body:has(.donuts-main-preview)) .description-grid h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -0.055em; } :is(body.project-donuts, body:has(.donuts-main-preview)) .description-grid p:last-child { color: var(--muted); font-size: 1.08rem; line-height: 1.8; margin: 0; } /* Next */ :is(body.project-donuts, body:has(.donuts-main-preview)) .next-project { padding: 0 0 64px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .next-project-inner { display: flex; justify-content: space-between; gap: 18px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .next-project a { padding: 14px 20px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); transition: transform .25s ease, background .25s ease, border-color .25s ease; } :is(body.project-donuts, body:has(.donuts-main-preview)) .next-project a:hover { transform: translateY(-2px); background: rgba(255,79,163,0.16); border-color: rgba(255,79,163,0.48); } /* Lightbox */ :is(body.project-donuts, body:has(.donuts-main-preview)) .image-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(10px); } :is(body.project-donuts, body:has(.donuts-main-preview)) .image-lightbox.is-active { display: flex; } :is(body.project-donuts, body:has(.donuts-main-preview)) .lightbox-content { width: min(1200px, 100%); height: min(88vh, 900px); display: flex; align-items: center; justify-content: center; } :is(body.project-donuts, body:has(.donuts-main-preview)) .lightbox-content img { width: auto; height: auto; max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65); } :is(body.project-donuts, body:has(.donuts-main-preview)) .lightbox-close { position: fixed; top: 24px; right: 28px; z-index: 10000; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 38px; line-height: 1; cursor: pointer; transition: background .25s ease, transform .25s ease; } :is(body.project-donuts, body:has(.donuts-main-preview)) .lightbox-close:hover { background: rgba(255,79,163,0.25); transform: scale(1.05); } :is(body.project-donuts, body:has(.donuts-main-preview)).lightbox-open { overflow: hidden; } /* Responsive */ @media (max-width: 1080px) { :is(body.project-donuts, body:has(.donuts-main-preview)) .project-hero-grid, :is(body.project-donuts, body:has(.donuts-main-preview)) .showcase-grid, :is(body.project-donuts, body:has(.donuts-main-preview)) .description-grid { grid-template-columns: 1fr; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-main-preview { min-height: 520px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .donuts-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } } @media (max-width: 900px) { :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-hero-poster, :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-poster, :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-wide, :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-card, :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-menu, :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-strip, :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-waffle { grid-column: span 6; } } @media (max-width: 760px) { :is(body.project-donuts, body:has(.donuts-main-preview)) .project-nav { min-height: 66px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-logo span { display: none; } :is(body.project-donuts, body:has(.donuts-main-preview)) .back-link { font-size: 0.9rem; padding: 9px 12px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-hero { padding-top: 28px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-hero-grid { border-radius: 22px 22px 0 0; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-intro { padding: 42px 22px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-features { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .feature-icon { width: 66px; height: 66px; font-size: 1.5rem; } :is(body.project-donuts, body:has(.donuts-main-preview)) .project-main-preview { min-height: 420px; padding: 28px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .donuts-image-grid { grid-template-columns: 1fr; } :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-hero-poster, :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-poster, :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-wide, :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-card, :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-menu, :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-strip, :is(body.project-donuts, body:has(.donuts-main-preview)) .shot-waffle { grid-column: auto; } :is(body.project-donuts, body:has(.donuts-main-preview)) .donuts-side { grid-template-columns: 1fr; } :is(body.project-donuts, body:has(.donuts-main-preview)) .next-project-inner { flex-direction: column; } :is(body.project-donuts, body:has(.donuts-main-preview)) .image-lightbox { padding: 18px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .lightbox-content { height: 82vh; } :is(body.project-donuts, body:has(.donuts-main-preview)) .lightbox-content img { max-height: 82vh; border-radius: 10px; } :is(body.project-donuts, body:has(.donuts-main-preview)) .lightbox-close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 32px; } } /* ========================================================= Fantazja Scope: :is(body.project-fantazja, body:has(.fantazja-main-preview)) ========================================================= */ :is(body.project-fantazja, body:has(.fantazja-main-preview)) { --dark: #11170f; --dark-2: #182016; --text: #ffffff; --muted: #d7dfd1; --sage: #a9c98c; --sage-light: #cce6b5; --olive: #6f8f3f; --leaf: #2e8a45; --gold: #d6aa46; --cream: #f6f2df; --line: rgba(255,255,255,0.12); --container: min(1440px, calc(100vw - 32px)); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) * { box-sizing: border-box; } html { scroll-behavior: smooth; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: radial-gradient(circle at 18% 0%, rgba(169,201,140,0.28), transparent 30%), radial-gradient(circle at 86% 22%, rgba(214,170,70,0.16), transparent 26%), linear-gradient(180deg, #151d13 0%, #0b100a 100%); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) img { max-width: 100%; display: block; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) a { color: inherit; text-decoration: none; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-page { min-height: 100vh; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-container { width: var(--container); margin-inline: auto; } /* Header */ :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 16, 10, 0.78); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .back-link { padding: 10px 16px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; color: #fff; transition: background .25s ease, transform .25s ease, border-color .25s ease; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .back-link:hover { background: rgba(169,201,140,0.16); border-color: rgba(169,201,140,0.48); transform: translateY(-2px); } /* Hero */ :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-hero { padding: 64px 0 0; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 620px; overflow: hidden; border-radius: 24px 24px 0 0; background: radial-gradient(circle at 18% 15%, rgba(204,230,181,0.22), transparent 27%), linear-gradient(135deg, rgba(214,170,70,0.12), transparent 42%), repeating-linear-gradient( 135deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 7px ), #151d13; box-shadow: 0 40px 100px rgba(0,0,0,0.35); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-intro { padding: clamp(44px, 6vw, 92px); display: flex; flex-direction: column; justify-content: center; text-align: center; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-kicker { margin: 0 0 18px; color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-intro h1 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(3.5rem, 7.6vw, 7.4rem); line-height: 0.9; letter-spacing: -0.065em; color: var(--sage-light); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-intro h1 span { display: block; margin-top: 16px; font-family: Inter, system-ui, sans-serif; font-size: clamp(1.5rem, 3.7vw, 3.5rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.04em; color: #fff; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-lead { max-width: 720px; margin: 28px auto 0; color: #eef7e9; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.72; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-features { margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; width: min(760px, 100%); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .feature { display: grid; justify-items: center; gap: 8px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .feature-icon { width: 76px; height: 76px; border: 2px solid rgba(169,201,140,0.44); border-radius: 50%; display: grid; place-items: center; color: var(--sage-light); font-size: 2rem; font-weight: 900; background: rgba(169,201,140,0.12); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .feature strong { font-size: 0.98rem; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .feature small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .feature-icon.dots { position: relative; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .feature-icon.dots span { position: absolute; width: 24px; height: 24px; border-radius: 50%; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .feature-icon.dots span:nth-child(1) { background: #a9c98c; transform: translate(-8px, -8px); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .feature-icon.dots span:nth-child(2) { background: #d6aa46; transform: translate(-14px, 12px); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .feature-icon.dots span:nth-child(3) { background: #2e8a45; transform: translate(12px, 8px); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-main-preview { min-height: 620px; display: flex; align-items: center; justify-content: center; padding: 54px; position: relative; overflow: hidden; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .fantazja-main-preview { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.52), transparent 25%), linear-gradient(135deg, rgba(169,201,140,0.95), rgba(232,241,211,0.88) 48%, rgba(118,151,70,0.8)), #cde7b7; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .fantazja-main-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.24), transparent 18%), radial-gradient(circle at 80% 82%, rgba(46,138,69,0.24), transparent 30%), linear-gradient(135deg, transparent 0 47%, rgba(255,255,255,0.2) 47% 51%, transparent 51%); opacity: 0.8; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-main-preview img { position: relative; z-index: 2; width: min(560px, 94%); border-radius: 14px; box-shadow: 0 34px 80px rgba(19, 35, 13, 0.35); cursor: zoom-in; } /* Showcase */ :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-showcase { padding: 0 0 80px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .showcase-grid { display: grid; grid-template-columns: 1.48fr 0.52fr; align-items: stretch; box-shadow: 0 40px 100px rgba(0,0,0,0.28); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .fantazja-panel { padding: clamp(26px, 4.5vw, 68px); background: radial-gradient(circle at 28% 10%, rgba(214,170,70,0.16), transparent 24%), radial-gradient(circle at 72% 15%, rgba(169,201,140,0.24), transparent 28%), linear-gradient(145deg, #eef6de 0%, #d7e9bf 48%, #b8d69e 100%); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .fantazja-image-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: start; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-shot { margin: 0; overflow: hidden; border-radius: 20px; background: rgba(255,255,255,0.74); box-shadow: 0 18px 42px rgba(34, 59, 21, 0.2); border: 1px solid rgba(255,255,255,0.65); transition: transform .25s ease, box-shadow .25s ease; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-shot:hover { transform: translateY(-4px); box-shadow: 0 28px 58px rgba(34, 59, 21, 0.28); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-shot img { width: 100%; height: 100%; display: block; cursor: zoom-in; object-fit: cover; object-position: center; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-logo { grid-column: span 5; aspect-ratio: 2.25 / 1; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-wide { grid-column: span 7; aspect-ratio: 2.15 / 1; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-flyer { grid-column: span 5; aspect-ratio: 1.75 / 1; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-social { grid-column: span 6; aspect-ratio: 2.2 / 1; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-leaflet { grid-column: span 5; aspect-ratio: 2 / 1; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-brochure { grid-column: span 5; aspect-ratio: 2 / 1; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-rollup { grid-column: span 3; aspect-ratio: 3 / 4.3; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-collection { grid-column: span 4; aspect-ratio: 1.55 / 1; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-rollup img { object-fit: cover; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .fantazja-side { display: grid; grid-template-rows: auto 1fr; background: linear-gradient(180deg, #172014 0%, #0c110a 100%); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .side-brand-card, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .scope-card { padding: clamp(34px, 5vw, 58px); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .side-brand-card { background: radial-gradient(circle at top left, rgba(169,201,140,0.22), transparent 34%), linear-gradient(135deg, rgba(214,170,70,0.14), transparent 56%), #192416; border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .side-brand-card h2, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .scope-card h2 { margin: 0 0 22px; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.05; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .side-brand-card p:last-child { margin: 0; color: var(--muted); line-height: 1.7; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .scope-card { display: flex; flex-direction: column; justify-content: center; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .scope-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .scope-card li { position: relative; padding-left: 24px; color: #eef7e9; font-size: clamp(1rem, 1.35vw, 1.18rem); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .scope-card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); } /* Description */ :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-description { padding: 20px 0 90px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .description-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; padding: clamp(34px, 5vw, 64px); border: 1px solid rgba(169,201,140,0.18); border-radius: 32px; background: linear-gradient(135deg, rgba(169,201,140,0.14), transparent 50%), rgba(255,255,255,0.045); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .description-grid h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -0.055em; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .description-grid p:last-child { color: var(--muted); font-size: 1.08rem; line-height: 1.8; margin: 0; } /* Next */ :is(body.project-fantazja, body:has(.fantazja-main-preview)) .next-project { padding: 0 0 64px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .next-project-inner { display: flex; justify-content: space-between; gap: 18px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .next-project a { padding: 14px 20px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); transition: transform .25s ease, background .25s ease, border-color .25s ease; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .next-project a:hover { transform: translateY(-2px); background: rgba(169,201,140,0.14); border-color: rgba(169,201,140,0.45); } /* Lightbox */ :is(body.project-fantazja, body:has(.fantazja-main-preview)) .image-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(10px); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .image-lightbox.is-active { display: flex; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .lightbox-content { width: min(1200px, 100%); height: min(88vh, 900px); display: flex; align-items: center; justify-content: center; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .lightbox-content img { width: auto; height: auto; max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65); } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .lightbox-close { position: fixed; top: 24px; right: 28px; z-index: 10000; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 38px; line-height: 1; cursor: pointer; transition: background .25s ease, transform .25s ease; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .lightbox-close:hover { background: rgba(169,201,140,0.22); transform: scale(1.05); } :is(body.project-fantazja, body:has(.fantazja-main-preview)).lightbox-open { overflow: hidden; } /* Responsive */ @media (max-width: 1080px) { :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-hero-grid, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .showcase-grid, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .description-grid { grid-template-columns: 1fr; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-main-preview { min-height: 520px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .fantazja-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } } @media (max-width: 860px) { :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-logo, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-wide, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-flyer, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-social, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-leaflet, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-brochure, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-rollup, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-collection { grid-column: span 6; } } @media (max-width: 760px) { :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-nav { min-height: 66px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-logo span { display: none; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .back-link { font-size: 0.9rem; padding: 9px 12px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-hero { padding-top: 28px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-hero-grid { border-radius: 22px 22px 0 0; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-intro { padding: 42px 22px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-features { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .feature-icon { width: 66px; height: 66px; font-size: 1.6rem; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .project-main-preview { min-height: 420px; padding: 28px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .fantazja-image-grid { grid-template-columns: 1fr; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-logo, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-wide, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-flyer, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-social, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-leaflet, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-brochure, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-rollup, :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-collection { grid-column: auto; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .shot-rollup { aspect-ratio: 3 / 4.2; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .fantazja-side { grid-template-columns: 1fr; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .next-project-inner { flex-direction: column; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .image-lightbox { padding: 18px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .lightbox-content { height: 82vh; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .lightbox-content img { max-height: 82vh; border-radius: 10px; } :is(body.project-fantazja, body:has(.fantazja-main-preview)) .lightbox-close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 32px; } } /* ========================================================= Ice and Roll Scope: :is(body.project-ice-roll, body:has(.ice-main-preview)) ========================================================= */ :is(body.project-ice-roll, body:has(.ice-main-preview)) { --dark: #1e0920; --dark-2: #2b0d2f; --text: #ffffff; --muted: #f7dff0; --pink: #ef3b97; --pink-soft: #ff9fca; --aqua: #93e8f3; --aqua-dark: #39bfd1; --cream: #fff3d7; --choco: #3a1135; --yellow: #ffe15c; --line: rgba(255,255,255,0.12); --container: min(1440px, calc(100vw - 32px)); } :is(body.project-ice-roll, body:has(.ice-main-preview)) * { box-sizing: border-box; } html { scroll-behavior: smooth; } :is(body.project-ice-roll, body:has(.ice-main-preview)) { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: radial-gradient(circle at 14% 0%, rgba(239,59,151,0.32), transparent 30%), radial-gradient(circle at 88% 14%, rgba(147,232,243,0.26), transparent 30%), linear-gradient(180deg, #2a0c30 0%, #120615 100%); } :is(body.project-ice-roll, body:has(.ice-main-preview)) img { max-width: 100%; display: block; } :is(body.project-ice-roll, body:has(.ice-main-preview)) a { color: inherit; text-decoration: none; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-page { min-height: 100vh; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-container { width: var(--container); margin-inline: auto; } /* Header */ :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-header { position: sticky; top: 0; z-index: 50; background: rgba(25, 6, 29, 0.78); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .back-link { padding: 10px 16px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; color: #fff; transition: background .25s ease, transform .25s ease, border-color .25s ease; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .back-link:hover { background: rgba(239,59,151,0.16); border-color: rgba(147,232,243,0.5); transform: translateY(-2px); } /* Hero */ :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-hero { padding: 64px 0 0; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 620px; overflow: hidden; border-radius: 24px 24px 0 0; background: radial-gradient(circle at 14% 18%, rgba(239,59,151,0.32), transparent 28%), radial-gradient(circle at 82% 12%, rgba(147,232,243,0.22), transparent 30%), repeating-linear-gradient( 135deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 7px ), #240a28; box-shadow: 0 40px 100px rgba(0,0,0,0.35); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-intro { padding: clamp(44px, 6vw, 92px); display: flex; flex-direction: column; justify-content: center; text-align: center; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-kicker { margin: 0 0 18px; color: var(--aqua); font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-intro h1 { margin: 0; font-family: "Fredoka", Inter, system-ui, sans-serif; font-size: clamp(3.2rem, 7.1vw, 6.8rem); line-height: 0.9; letter-spacing: -0.055em; color: var(--pink-soft); text-shadow: 0 18px 50px rgba(0,0,0,0.32); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-intro h1 span { display: block; margin-top: 16px; font-size: clamp(1.55rem, 4vw, 3.6rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.04em; color: var(--aqua); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-lead { max-width: 740px; margin: 28px auto 0; color: #fff4fb; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-features { margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; width: min(760px, 100%); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .feature { display: grid; justify-items: center; gap: 8px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .feature-icon { width: 76px; height: 76px; border: 2px solid rgba(147,232,243,0.44); border-radius: 50%; display: grid; place-items: center; color: var(--aqua); font-size: 1.65rem; font-weight: 900; background: rgba(147,232,243,0.11); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .feature strong { font-size: 0.98rem; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .feature small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .feature-icon.dots { position: relative; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .feature-icon.dots span { position: absolute; width: 24px; height: 24px; border-radius: 50%; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .feature-icon.dots span:nth-child(1) { background: #ef3b97; transform: translate(-8px, -8px); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .feature-icon.dots span:nth-child(2) { background: #93e8f3; transform: translate(-14px, 12px); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .feature-icon.dots span:nth-child(3) { background: #ffe15c; transform: translate(12px, 8px); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-main-preview { min-height: 620px; display: flex; align-items: center; justify-content: center; padding: 54px; position: relative; overflow: hidden; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .ice-main-preview { background: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.7), transparent 24%), radial-gradient(circle at 22% 18%, rgba(239,59,151,0.45), transparent 30%), radial-gradient(circle at 86% 78%, rgba(147,232,243,0.45), transparent 34%), linear-gradient(135deg, #ff9fca 0%, #93e8f3 100%); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .ice-main-preview::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.32), transparent 36%), radial-gradient(circle at 50% 50%, transparent 30%, rgba(58,17,53,0.22) 88%); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-main-preview img { position: relative; z-index: 2; width: min(520px, 94%); border-radius: 18px; box-shadow: 0 34px 80px rgba(58,17,53,0.34); cursor: zoom-in; } /* Showcase */ :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-showcase { padding: 0 0 80px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .showcase-grid { display: grid; grid-template-columns: 1.58fr 0.42fr; align-items: stretch; box-shadow: 0 40px 100px rgba(0,0,0,0.28); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .ice-panel { padding: clamp(26px, 4.5vw, 68px); background: radial-gradient(circle at 16% 12%, rgba(255,255,255,0.65), transparent 24%), radial-gradient(circle at 86% 18%, rgba(147,232,243,0.45), transparent 28%), linear-gradient(145deg, #fff1f8 0%, #ffd1e7 44%, #c7f5fb 100%); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .ice-image-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: 20px; align-items: start; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-shot { margin: 0; overflow: hidden; border-radius: 20px; background: #fff9fb; box-shadow: 0 18px 40px rgba(58, 17, 53, 0.18); border: 1px solid rgba(255,255,255,0.72); transition: transform .25s ease, box-shadow .25s ease; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-shot:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(58, 17, 53, 0.25); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-shot img { width: 100%; height: 100%; display: block; cursor: zoom-in; object-fit: cover; object-position: center; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-offer { grid-column: span 4; aspect-ratio: 1.55 / 1; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-business-card { grid-column: span 4; aspect-ratio: 1.85 / 1; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-poster-blue, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-poster-pink { grid-column: span 4; aspect-ratio: 3 / 4; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-menu-large { grid-column: span 3; aspect-ratio: 3 / 4.1; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-menu-tall { grid-column: span 3; aspect-ratio: 3 / 4.25; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-price-wide { grid-column: span 6; aspect-ratio: 1.55 / 1; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-price-portrait { grid-column: span 3; aspect-ratio: 3 / 4.3; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-a5 { grid-column: span 3; aspect-ratio: 3 / 4.2; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-a5-green { grid-column: span 3; aspect-ratio: 3 / 4.15; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .ice-side { display: grid; grid-template-rows: auto 1fr; background: linear-gradient(180deg, #2a0c30 0%, #140617 100%); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .side-brand-card, :is(body.project-ice-roll, body:has(.ice-main-preview)) .scope-card { padding: clamp(34px, 5vw, 58px); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .side-brand-card { background: radial-gradient(circle at 90% 5%, rgba(147,232,243,0.2), transparent 30%), linear-gradient(135deg, rgba(239,59,151,0.24), transparent 55%), #2b0d2f; border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .side-brand-card h2, :is(body.project-ice-roll, body:has(.ice-main-preview)) .scope-card h2 { margin: 0 0 22px; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.05; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .side-brand-card p:last-child { margin: 0; color: var(--muted); line-height: 1.7; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .scope-card { display: flex; flex-direction: column; justify-content: center; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .scope-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .scope-card li { position: relative; padding-left: 24px; color: #fff3fb; font-size: clamp(1rem, 1.35vw, 1.18rem); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .scope-card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 4px rgba(147,232,243,0.12); } /* Description */ :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-description { padding: 20px 0 90px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .description-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; padding: clamp(34px, 5vw, 64px); border: 1px solid rgba(147,232,243,0.22); border-radius: 32px; background: radial-gradient(circle at 0% 0%, rgba(239,59,151,0.16), transparent 32%), linear-gradient(135deg, rgba(147,232,243,0.12), transparent 54%), rgba(255,255,255,0.045); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .description-grid h2 { margin: 0; font-family: "Fredoka", Inter, system-ui, sans-serif; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -0.055em; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .description-grid p:last-child { color: var(--muted); font-size: 1.08rem; line-height: 1.8; margin: 0; } /* Next */ :is(body.project-ice-roll, body:has(.ice-main-preview)) .next-project { padding: 0 0 64px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .next-project-inner { display: flex; justify-content: space-between; gap: 18px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .next-project a { padding: 14px 20px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); transition: transform .25s ease, background .25s ease, border-color .25s ease; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .next-project a:hover { transform: translateY(-2px); background: rgba(239,59,151,0.16); border-color: rgba(147,232,243,0.45); } /* Lightbox */ :is(body.project-ice-roll, body:has(.ice-main-preview)) .image-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(10px); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .image-lightbox.is-active { display: flex; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .lightbox-content { width: min(1200px, 100%); height: min(88vh, 900px); display: flex; align-items: center; justify-content: center; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .lightbox-content img { width: auto; height: auto; max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65); } :is(body.project-ice-roll, body:has(.ice-main-preview)) .lightbox-close { position: fixed; top: 24px; right: 28px; z-index: 10000; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 38px; line-height: 1; cursor: pointer; transition: background .25s ease, transform .25s ease; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .lightbox-close:hover { background: rgba(239,59,151,0.26); transform: scale(1.05); } :is(body.project-ice-roll, body:has(.ice-main-preview)).lightbox-open { overflow: hidden; } /* Responsive */ @media (max-width: 1080px) { :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-hero-grid, :is(body.project-ice-roll, body:has(.ice-main-preview)) .showcase-grid, :is(body.project-ice-roll, body:has(.ice-main-preview)) .description-grid { grid-template-columns: 1fr; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-main-preview { min-height: 520px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .ice-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } } @media (max-width: 900px) { :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-offer, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-business-card, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-poster-blue, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-poster-pink, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-menu-large, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-menu-tall, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-price-wide, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-price-portrait, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-a5, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-a5-green { grid-column: span 6; } } @media (max-width: 760px) { :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-nav { min-height: 66px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-logo span { display: none; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .back-link { font-size: 0.9rem; padding: 9px 12px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-hero { padding-top: 28px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-hero-grid { border-radius: 22px 22px 0 0; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-intro { padding: 42px 22px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-features { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .feature-icon { width: 66px; height: 66px; font-size: 1.4rem; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .project-main-preview { min-height: 420px; padding: 28px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .ice-image-grid { grid-template-columns: 1fr; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-offer, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-business-card, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-poster-blue, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-poster-pink, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-menu-large, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-menu-tall, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-price-wide, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-price-portrait, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-a5, :is(body.project-ice-roll, body:has(.ice-main-preview)) .shot-a5-green { grid-column: auto; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .ice-side { grid-template-columns: 1fr; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .next-project-inner { flex-direction: column; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .image-lightbox { padding: 18px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .lightbox-content { height: 82vh; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .lightbox-content img { max-height: 82vh; border-radius: 10px; } :is(body.project-ice-roll, body:has(.ice-main-preview)) .lightbox-close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 32px; } } /* ========================================================= Jessie Scope: :is(body.project-jessie, body:has(.jessie-main-preview)) ========================================================= */ :is(body.project-jessie, body:has(.jessie-main-preview)) { --dark: #180018; --dark-2: #240427; --text: #ffffff; --muted: #f5c9e6; --pink: #f03a9b; --pink-light: #ff79c6; --cyan: #82e8f3; --cyan-soft: #c9f7fb; --plum: #3b063e; --berry: #7e0d63; --cream: #fff1fb; --line: rgba(255,255,255,0.12); --container: min(1440px, calc(100vw - 32px)); } :is(body.project-jessie, body:has(.jessie-main-preview)) * { box-sizing: border-box; } html { scroll-behavior: smooth; } :is(body.project-jessie, body:has(.jessie-main-preview)) { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: radial-gradient(circle at 18% 0%, rgba(240,58,155,0.34), transparent 30%), radial-gradient(circle at 88% 18%, rgba(130,232,243,0.22), transparent 27%), linear-gradient(180deg, #260026 0%, #110010 100%); } :is(body.project-jessie, body:has(.jessie-main-preview)) img { max-width: 100%; display: block; } :is(body.project-jessie, body:has(.jessie-main-preview)) a { color: inherit; text-decoration: none; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-page { min-height: 100vh; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-container { width: var(--container); margin-inline: auto; } /* Header */ :is(body.project-jessie, body:has(.jessie-main-preview)) .project-header { position: sticky; top: 0; z-index: 50; background: rgba(20, 0, 20, 0.78); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; } :is(body.project-jessie, body:has(.jessie-main-preview)) .back-link { padding: 10px 16px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; color: #fff; transition: background .25s ease, transform .25s ease, border-color .25s ease; } :is(body.project-jessie, body:has(.jessie-main-preview)) .back-link:hover { background: rgba(240,58,155,0.18); border-color: rgba(130,232,243,0.5); transform: translateY(-2px); } /* Hero */ :is(body.project-jessie, body:has(.jessie-main-preview)) .project-hero { padding: 64px 0 0; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; min-height: 620px; overflow: hidden; border-radius: 24px 24px 0 0; background: radial-gradient(circle at 18% 15%, rgba(255,121,198,0.26), transparent 28%), radial-gradient(circle at 86% 82%, rgba(130,232,243,0.2), transparent 26%), repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 7px), #250327; box-shadow: 0 40px 100px rgba(0,0,0,0.35); } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-intro { padding: clamp(44px, 6vw, 92px); display: flex; flex-direction: column; justify-content: center; text-align: center; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-kicker { margin: 0 0 18px; color: var(--cyan); font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-intro h1 { margin: 0; font-family: "Pacifico", cursive; font-size: clamp(4rem, 8vw, 8rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--pink-light); text-shadow: 0 10px 30px rgba(240,58,155,0.32); } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-intro h1 span { display: block; margin-top: 18px; font-family: Inter, system-ui, sans-serif; font-size: clamp(1.55rem, 3.8vw, 3.6rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.045em; color: #fff; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-lead { max-width: 730px; margin: 30px auto 0; color: #ffe9f8; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.72; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-features { margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; width: min(760px, 100%); } :is(body.project-jessie, body:has(.jessie-main-preview)) .feature { display: grid; justify-items: center; gap: 8px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .feature-icon { width: 76px; height: 76px; border: 2px solid rgba(130,232,243,0.5); border-radius: 50%; display: grid; place-items: center; color: var(--cyan); font-size: 2rem; font-weight: 900; background: rgba(255,121,198,0.16); box-shadow: inset 0 0 26px rgba(130,232,243,0.08); } :is(body.project-jessie, body:has(.jessie-main-preview)) .feature strong { font-size: 0.98rem; } :is(body.project-jessie, body:has(.jessie-main-preview)) .feature small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; } :is(body.project-jessie, body:has(.jessie-main-preview)) .feature-icon.dots { position: relative; } :is(body.project-jessie, body:has(.jessie-main-preview)) .feature-icon.dots span { position: absolute; width: 24px; height: 24px; border-radius: 50%; } :is(body.project-jessie, body:has(.jessie-main-preview)) .feature-icon.dots span:nth-child(1) { background: #f03a9b; transform: translate(-8px, -8px); } :is(body.project-jessie, body:has(.jessie-main-preview)) .feature-icon.dots span:nth-child(2) { background: #82e8f3; transform: translate(-14px, 12px); } :is(body.project-jessie, body:has(.jessie-main-preview)) .feature-icon.dots span:nth-child(3) { background: #ffffff; transform: translate(12px, 8px); } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-main-preview { min-height: 620px; display: flex; align-items: center; justify-content: center; padding: 54px; position: relative; overflow: hidden; } :is(body.project-jessie, body:has(.jessie-main-preview)) .jessie-main-preview { background: radial-gradient(circle at 48% 42%, rgba(255,255,255,0.5), transparent 25%), linear-gradient(135deg, rgba(130,232,243,0.96), rgba(255,121,198,0.84) 52%, rgba(80,5,76,0.92)), #82e8f3; } :is(body.project-jessie, body:has(.jessie-main-preview)) .jessie-main-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 22% 24%, rgba(255,255,255,0.26), transparent 18%), radial-gradient(circle at 78% 80%, rgba(240,58,155,0.3), transparent 28%), linear-gradient(135deg, transparent 0 46%, rgba(255,255,255,0.22) 46% 51%, transparent 51%); opacity: 0.88; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-main-preview img { position: relative; z-index: 2; width: min(560px, 94%); border-radius: 18px; box-shadow: 0 34px 80px rgba(31, 0, 34, 0.42); cursor: zoom-in; } /* Showcase */ :is(body.project-jessie, body:has(.jessie-main-preview)) .project-showcase { padding: 0 0 80px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .showcase-grid { display: grid; grid-template-columns: 1.5fr 0.5fr; align-items: stretch; box-shadow: 0 40px 100px rgba(0,0,0,0.28); } :is(body.project-jessie, body:has(.jessie-main-preview)) .jessie-panel { padding: clamp(26px, 4.5vw, 68px); background: radial-gradient(circle at 20% 10%, rgba(255,121,198,0.28), transparent 24%), radial-gradient(circle at 72% 16%, rgba(130,232,243,0.28), transparent 28%), linear-gradient(145deg, #ffeff9 0%, #c9f7fb 43%, #ff9bd0 100%); } :is(body.project-jessie, body:has(.jessie-main-preview)) .jessie-image-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: start; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-shot { margin: 0; overflow: hidden; border-radius: 22px; background: rgba(255,255,255,0.82); box-shadow: 0 18px 42px rgba(70, 0, 58, 0.22); border: 1px solid rgba(255,255,255,0.72); transition: transform .25s ease, box-shadow .25s ease; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-shot:hover { transform: translateY(-4px); box-shadow: 0 28px 58px rgba(70, 0, 58, 0.3); } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-shot img { width: 100%; height: 100%; display: block; cursor: zoom-in; object-fit: cover; object-position: center; } /* Dopasowanie pól do kształtów zdjęć z zestawienia */ :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-hero-menu { grid-column: span 5; aspect-ratio: 1.55 / 1; } :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-store { grid-column: span 4; aspect-ratio: 1.05 / 1; } :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-wide-menu { grid-column: span 7; aspect-ratio: 2.15 / 1; } :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-photo { grid-column: span 5; aspect-ratio: 1.75 / 1; } :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-shakes { grid-column: span 5; aspect-ratio: 1.35 / 1; } :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-sweets { grid-column: span 6; aspect-ratio: 1.75 / 1; } :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-waffles { grid-column: span 4; aspect-ratio: 1 / 1.15; } :is(body.project-jessie, body:has(.jessie-main-preview)) .jessie-side { display: grid; grid-template-rows: auto 1fr; background: linear-gradient(180deg, #260026 0%, #130011 100%); } :is(body.project-jessie, body:has(.jessie-main-preview)) .side-brand-card, :is(body.project-jessie, body:has(.jessie-main-preview)) .scope-card { padding: clamp(34px, 5vw, 58px); } :is(body.project-jessie, body:has(.jessie-main-preview)) .side-brand-card { background: radial-gradient(circle at top left, rgba(240,58,155,0.22), transparent 34%), linear-gradient(135deg, rgba(130,232,243,0.14), transparent 56%), #2b062e; border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-jessie, body:has(.jessie-main-preview)) .side-brand-card h2, :is(body.project-jessie, body:has(.jessie-main-preview)) .scope-card h2 { margin: 0 0 22px; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.05; } :is(body.project-jessie, body:has(.jessie-main-preview)) .side-brand-card p:last-child { margin: 0; color: var(--muted); line-height: 1.7; } :is(body.project-jessie, body:has(.jessie-main-preview)) .scope-card { display: flex; flex-direction: column; justify-content: center; } :is(body.project-jessie, body:has(.jessie-main-preview)) .scope-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .scope-card li { position: relative; padding-left: 24px; color: #ffe9f8; font-size: clamp(1rem, 1.35vw, 1.18rem); } :is(body.project-jessie, body:has(.jessie-main-preview)) .scope-card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); } /* Description */ :is(body.project-jessie, body:has(.jessie-main-preview)) .project-description { padding: 20px 0 90px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .description-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; padding: clamp(34px, 5vw, 64px); border: 1px solid rgba(255,121,198,0.22); border-radius: 32px; background: linear-gradient(135deg, rgba(240,58,155,0.15), transparent 50%), rgba(255,255,255,0.045); } :is(body.project-jessie, body:has(.jessie-main-preview)) .description-grid h2 { margin: 0; font-family: "Pacifico", cursive; font-size: clamp(2.2rem, 4.2vw, 4.2rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--pink-light); } :is(body.project-jessie, body:has(.jessie-main-preview)) .description-grid p:last-child { color: var(--muted); font-size: 1.08rem; line-height: 1.8; margin: 0; } /* Next */ :is(body.project-jessie, body:has(.jessie-main-preview)) .next-project { padding: 0 0 64px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .next-project-inner { display: flex; justify-content: space-between; gap: 18px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .next-project a { padding: 14px 20px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); transition: transform .25s ease, background .25s ease, border-color .25s ease; } :is(body.project-jessie, body:has(.jessie-main-preview)) .next-project a:hover { transform: translateY(-2px); background: rgba(240,58,155,0.16); border-color: rgba(130,232,243,0.45); } /* Lightbox */ :is(body.project-jessie, body:has(.jessie-main-preview)) .image-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(10px); } :is(body.project-jessie, body:has(.jessie-main-preview)) .image-lightbox.is-active { display: flex; } :is(body.project-jessie, body:has(.jessie-main-preview)) .lightbox-content { width: min(1200px, 100%); height: min(88vh, 900px); display: flex; align-items: center; justify-content: center; } :is(body.project-jessie, body:has(.jessie-main-preview)) .lightbox-content img { width: auto; height: auto; max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65); } :is(body.project-jessie, body:has(.jessie-main-preview)) .lightbox-close { position: fixed; top: 24px; right: 28px; z-index: 10000; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 38px; line-height: 1; cursor: pointer; transition: background .25s ease, transform .25s ease; } :is(body.project-jessie, body:has(.jessie-main-preview)) .lightbox-close:hover { background: rgba(240,58,155,0.24); transform: scale(1.05); } :is(body.project-jessie, body:has(.jessie-main-preview)).lightbox-open { overflow: hidden; } /* Responsive */ @media (max-width: 1080px) { :is(body.project-jessie, body:has(.jessie-main-preview)) .project-hero-grid, :is(body.project-jessie, body:has(.jessie-main-preview)) .showcase-grid, :is(body.project-jessie, body:has(.jessie-main-preview)) .description-grid { grid-template-columns: 1fr; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-main-preview { min-height: 520px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .jessie-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } } @media (max-width: 860px) { :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-hero-menu, :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-store, :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-wide-menu, :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-photo, :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-shakes, :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-sweets, :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-waffles { grid-column: span 6; } } @media (max-width: 760px) { :is(body.project-jessie, body:has(.jessie-main-preview)) .project-nav { min-height: 66px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-logo span { display: none; } :is(body.project-jessie, body:has(.jessie-main-preview)) .back-link { font-size: 0.9rem; padding: 9px 12px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-hero { padding-top: 28px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-hero-grid { border-radius: 22px 22px 0 0; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-intro { padding: 42px 22px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-features { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .feature-icon { width: 66px; height: 66px; font-size: 1.6rem; } :is(body.project-jessie, body:has(.jessie-main-preview)) .project-main-preview { min-height: 420px; padding: 28px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .jessie-image-grid { grid-template-columns: 1fr; } :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-hero-menu, :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-store, :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-wide-menu, :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-photo, :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-shakes, :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-sweets, :is(body.project-jessie, body:has(.jessie-main-preview)) .shot-waffles { grid-column: auto; } :is(body.project-jessie, body:has(.jessie-main-preview)) .jessie-side { grid-template-columns: 1fr; } :is(body.project-jessie, body:has(.jessie-main-preview)) .next-project-inner { flex-direction: column; } :is(body.project-jessie, body:has(.jessie-main-preview)) .image-lightbox { padding: 18px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .lightbox-content { height: 82vh; } :is(body.project-jessie, body:has(.jessie-main-preview)) .lightbox-content img { max-height: 82vh; border-radius: 10px; } :is(body.project-jessie, body:has(.jessie-main-preview)) .lightbox-close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 32px; } } /* ========================================================= Lumpai Scope: :is(body.project-lumpai, body:has(.lumpai-main-preview)) ========================================================= */ :is(body.project-lumpai, body:has(.lumpai-main-preview)) { --dark: #090d16; --dark-2: #111827; --text: #ffffff; --muted: #d2d8e5; --navy: #101a33; --navy-2: #17284d; --blue-soft: #b8d4ee; --cream: #f5eddc; --gold: #caa65a; --gold-light: #e6c777; --slate: #5f6f86; --line: rgba(255,255,255,0.12); --container: min(1440px, calc(100vw - 32px)); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) * { box-sizing: border-box; } html { scroll-behavior: smooth; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: radial-gradient(circle at 17% 0%, rgba(202,166,90,0.22), transparent 30%), radial-gradient(circle at 88% 22%, rgba(184,212,238,0.18), transparent 26%), linear-gradient(180deg, #10182a 0%, #070b12 100%); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) img { max-width: 100%; display: block; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) a { color: inherit; text-decoration: none; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-page { min-height: 100vh; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-container { width: var(--container); margin-inline: auto; } /* Header */ :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-header { position: sticky; top: 0; z-index: 50; background: rgba(7, 11, 18, 0.8); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .back-link { padding: 10px 16px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; color: #fff; transition: background .25s ease, transform .25s ease, border-color .25s ease; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .back-link:hover { background: rgba(202,166,90,0.16); border-color: rgba(202,166,90,0.52); transform: translateY(-2px); } /* Hero */ :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-hero { padding: 64px 0 0; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 620px; overflow: hidden; border-radius: 24px 24px 0 0; background: radial-gradient(circle at 18% 15%, rgba(202,166,90,0.2), transparent 27%), linear-gradient(135deg, rgba(184,212,238,0.12), transparent 42%), repeating-linear-gradient( 135deg, rgba(255,255,255,0.028) 0px, rgba(255,255,255,0.028) 1px, transparent 1px, transparent 7px ), #101827; box-shadow: 0 40px 100px rgba(0,0,0,0.35); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-intro { padding: clamp(44px, 6vw, 92px); display: flex; flex-direction: column; justify-content: center; text-align: center; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-kicker { margin: 0 0 18px; color: var(--gold-light); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-intro h1 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(3.5rem, 7.6vw, 7.4rem); line-height: 0.9; letter-spacing: -0.065em; color: var(--gold-light); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-intro h1 span { display: block; margin-top: 16px; font-family: Inter, system-ui, sans-serif; font-size: clamp(1.45rem, 3.6vw, 3.4rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.04em; color: #fff; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-lead { max-width: 720px; margin: 28px auto 0; color: #edf2fb; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.72; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-features { margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; width: min(760px, 100%); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .feature { display: grid; justify-items: center; gap: 8px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .feature-icon { width: 76px; height: 76px; border: 2px solid rgba(202,166,90,0.46); border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); font-size: 2rem; font-weight: 900; background: rgba(202,166,90,0.12); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .feature strong { font-size: 0.98rem; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .feature small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .feature-icon.dots { position: relative; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .feature-icon.dots span { position: absolute; width: 24px; height: 24px; border-radius: 50%; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .feature-icon.dots span:nth-child(1) { background: #caa65a; transform: translate(-8px, -8px); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .feature-icon.dots span:nth-child(2) { background: #f5eddc; transform: translate(-14px, 12px); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .feature-icon.dots span:nth-child(3) { background: #17284d; transform: translate(12px, 8px); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-main-preview { min-height: 620px; display: flex; align-items: center; justify-content: center; padding: 54px; position: relative; overflow: hidden; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lumpai-main-preview { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.28), transparent 25%), linear-gradient(135deg, rgba(14,26,53,0.96), rgba(33,52,91,0.92) 48%, rgba(205,169,91,0.76)), #182541; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lumpai-main-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 18%, rgba(202,166,90,0.28), transparent 20%), radial-gradient(circle at 82% 84%, rgba(184,212,238,0.2), transparent 32%), linear-gradient(135deg, transparent 0 47%, rgba(255,255,255,0.12) 47% 51%, transparent 51%); opacity: 0.9; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-main-preview img { position: relative; z-index: 2; width: min(560px, 94%); border-radius: 14px; box-shadow: 0 34px 80px rgba(0, 0, 0, 0.42); cursor: zoom-in; } /* Showcase */ :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-showcase { padding: 0 0 80px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .showcase-grid { display: grid; grid-template-columns: 1.5fr 0.5fr; align-items: stretch; box-shadow: 0 40px 100px rgba(0,0,0,0.28); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lumpai-panel { padding: clamp(26px, 4.5vw, 68px); background: radial-gradient(circle at 22% 12%, rgba(202,166,90,0.2), transparent 26%), radial-gradient(circle at 78% 18%, rgba(184,212,238,0.2), transparent 28%), linear-gradient(145deg, #eef3f8 0%, #d9e3ee 46%, #b8c5d4 100%); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lumpai-image-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: start; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-shot { margin: 0; overflow: hidden; border-radius: 20px; background: rgba(255,255,255,0.8); box-shadow: 0 18px 42px rgba(6, 12, 26, 0.22); border: 1px solid rgba(255,255,255,0.7); transition: transform .25s ease, box-shadow .25s ease; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-shot:hover { transform: translateY(-4px); box-shadow: 0 28px 58px rgba(6, 12, 26, 0.3); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-shot img { width: 100%; height: 100%; display: block; cursor: zoom-in; object-fit: cover; object-position: center; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-business { grid-column: span 5; aspect-ratio: 2.1 / 1; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-certificate { grid-column: span 3; aspect-ratio: 3 / 4.15; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-flyer-stack { grid-column: span 4; aspect-ratio: 1.15 / 1; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-spa-room { grid-column: span 5; aspect-ratio: 1.5 / 1; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-rollup-blue { grid-column: span 3; aspect-ratio: 3 / 4.2; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-card-gold { grid-column: span 4; aspect-ratio: 1.8 / 1; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-poster { grid-column: span 4; aspect-ratio: 3 / 3.55; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-expo { grid-column: span 4; aspect-ratio: 1.22 / 1; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-brochure { grid-column: span 5; aspect-ratio: 1.9 / 1; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-certificate img, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-rollup-blue img { object-fit: cover; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lumpai-side { display: grid; grid-template-rows: auto 1fr; background: linear-gradient(180deg, #111a2f 0%, #080c15 100%); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .side-brand-card, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .scope-card { padding: clamp(34px, 5vw, 58px); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .side-brand-card { background: radial-gradient(circle at top left, rgba(202,166,90,0.22), transparent 34%), linear-gradient(135deg, rgba(184,212,238,0.12), transparent 56%), #121e36; border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .side-brand-card h2, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .scope-card h2 { margin: 0 0 22px; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.05; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .side-brand-card p:last-child { margin: 0; color: var(--muted); line-height: 1.7; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .scope-card { display: flex; flex-direction: column; justify-content: center; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .scope-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .scope-card li { position: relative; padding-left: 24px; color: #eef2fb; font-size: clamp(1rem, 1.35vw, 1.18rem); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .scope-card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-light); } /* Description */ :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-description { padding: 20px 0 90px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .description-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; padding: clamp(34px, 5vw, 64px); border: 1px solid rgba(202,166,90,0.2); border-radius: 32px; background: linear-gradient(135deg, rgba(202,166,90,0.14), transparent 50%), rgba(255,255,255,0.045); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .description-grid h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -0.055em; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .description-grid p:last-child { color: var(--muted); font-size: 1.08rem; line-height: 1.8; margin: 0; } /* Next */ :is(body.project-lumpai, body:has(.lumpai-main-preview)) .next-project { padding: 0 0 64px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .next-project-inner { display: flex; justify-content: space-between; gap: 18px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .next-project a { padding: 14px 20px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); transition: transform .25s ease, background .25s ease, border-color .25s ease; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .next-project a:hover { transform: translateY(-2px); background: rgba(202,166,90,0.16); border-color: rgba(202,166,90,0.48); } /* Lightbox */ :is(body.project-lumpai, body:has(.lumpai-main-preview)) .image-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(10px); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .image-lightbox.is-active { display: flex; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lightbox-content { width: min(1200px, 100%); height: min(88vh, 900px); display: flex; align-items: center; justify-content: center; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lightbox-content img { width: auto; height: auto; max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65); } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lightbox-close { position: fixed; top: 24px; right: 28px; z-index: 10000; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 38px; line-height: 1; cursor: pointer; transition: background .25s ease, transform .25s ease; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lightbox-close:hover { background: rgba(202,166,90,0.22); transform: scale(1.05); } :is(body.project-lumpai, body:has(.lumpai-main-preview)).lightbox-open { overflow: hidden; } /* Responsive */ @media (max-width: 1080px) { :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-hero-grid, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .showcase-grid, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .description-grid { grid-template-columns: 1fr; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-main-preview { min-height: 520px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lumpai-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } } @media (max-width: 860px) { :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-business, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-certificate, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-flyer-stack, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-spa-room, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-rollup-blue, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-card-gold, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-poster, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-expo, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-brochure { grid-column: span 6; } } @media (max-width: 760px) { :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-nav { min-height: 66px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-logo span { display: none; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .back-link { font-size: 0.9rem; padding: 9px 12px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-hero { padding-top: 28px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-hero-grid { border-radius: 22px 22px 0 0; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-intro { padding: 42px 22px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-features { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .feature-icon { width: 66px; height: 66px; font-size: 1.6rem; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .project-main-preview { min-height: 420px; padding: 28px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lumpai-image-grid { grid-template-columns: 1fr; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-business, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-certificate, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-flyer-stack, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-spa-room, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-rollup-blue, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-card-gold, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-poster, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-expo, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-brochure { grid-column: auto; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-certificate, :is(body.project-lumpai, body:has(.lumpai-main-preview)) .shot-rollup-blue { aspect-ratio: 3 / 4.2; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lumpai-side { grid-template-columns: 1fr; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .next-project-inner { flex-direction: column; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .image-lightbox { padding: 18px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lightbox-content { height: 82vh; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lightbox-content img { max-height: 82vh; border-radius: 10px; } :is(body.project-lumpai, body:has(.lumpai-main-preview)) .lightbox-close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 32px; } } /* ========================================================= Martys Scope: :is(body.project-martys, body:has(.martys-main-preview)) ========================================================= */ :is(body.project-martys, body:has(.martys-main-preview)) { --dark: #110b0d; --dark-2: #1a1012; --text: #ffffff; --muted: #e6d7c5; --burgundy: #8f1624; --burgundy-light: #c43a43; --cream: #f4e6cf; --gold: #c9a24f; --ink: #151c2b; --paper: #fbf4e8; --line: rgba(255,255,255,0.12); --container: min(1440px, calc(100vw - 32px)); } :is(body.project-martys, body:has(.martys-main-preview)) * { box-sizing: border-box; } html { scroll-behavior: smooth; } :is(body.project-martys, body:has(.martys-main-preview)) { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: radial-gradient(circle at 18% 0%, rgba(201,162,79,0.2), transparent 29%), radial-gradient(circle at 88% 18%, rgba(143,22,36,0.3), transparent 28%), linear-gradient(180deg, #160d10 0%, #070607 100%); } :is(body.project-martys, body:has(.martys-main-preview)) img { max-width: 100%; display: block; } :is(body.project-martys, body:has(.martys-main-preview)) a { color: inherit; text-decoration: none; } :is(body.project-martys, body:has(.martys-main-preview)) .project-page { min-height: 100vh; } :is(body.project-martys, body:has(.martys-main-preview)) .project-container { width: var(--container); margin-inline: auto; } /* Header */ :is(body.project-martys, body:has(.martys-main-preview)) .project-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 7, 8, 0.78); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-martys, body:has(.martys-main-preview)) .project-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; } :is(body.project-martys, body:has(.martys-main-preview)) .project-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; } :is(body.project-martys, body:has(.martys-main-preview)) .back-link { padding: 10px 16px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; color: #fff; transition: background .25s ease, transform .25s ease, border-color .25s ease; } :is(body.project-martys, body:has(.martys-main-preview)) .back-link:hover { background: rgba(201,162,79,0.14); border-color: rgba(201,162,79,0.48); transform: translateY(-2px); } /* Hero */ :is(body.project-martys, body:has(.martys-main-preview)) .project-hero { padding: 64px 0 0; } :is(body.project-martys, body:has(.martys-main-preview)) .project-hero-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; min-height: 620px; overflow: hidden; border-radius: 24px 24px 0 0; background: radial-gradient(circle at 18% 15%, rgba(201,162,79,0.18), transparent 27%), linear-gradient(135deg, rgba(143,22,36,0.3), transparent 42%), repeating-linear-gradient( 135deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 7px ), #171012; box-shadow: 0 40px 100px rgba(0,0,0,0.35); } :is(body.project-martys, body:has(.martys-main-preview)) .project-intro { padding: clamp(44px, 6vw, 92px); display: flex; flex-direction: column; justify-content: center; text-align: center; } :is(body.project-martys, body:has(.martys-main-preview)) .project-kicker { margin: 0 0 18px; color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; } :is(body.project-martys, body:has(.martys-main-preview)) .project-intro h1 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(3.6rem, 7.6vw, 7.4rem); line-height: 0.9; letter-spacing: -0.065em; color: var(--cream); } :is(body.project-martys, body:has(.martys-main-preview)) .project-intro h1 span { display: block; margin-top: 16px; font-family: Inter, system-ui, sans-serif; font-size: clamp(1.45rem, 3.7vw, 3.45rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.04em; color: var(--burgundy-light); } :is(body.project-martys, body:has(.martys-main-preview)) .project-lead { max-width: 730px; margin: 28px auto 0; color: #f4eadf; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.72; } :is(body.project-martys, body:has(.martys-main-preview)) .project-features { margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; width: min(760px, 100%); } :is(body.project-martys, body:has(.martys-main-preview)) .feature { display: grid; justify-items: center; gap: 8px; } :is(body.project-martys, body:has(.martys-main-preview)) .feature-icon { width: 76px; height: 76px; border: 2px solid rgba(201,162,79,0.44); border-radius: 50%; display: grid; place-items: center; color: var(--cream); font-size: 2rem; font-weight: 900; background: rgba(201,162,79,0.11); } :is(body.project-martys, body:has(.martys-main-preview)) .feature strong { font-size: 0.98rem; } :is(body.project-martys, body:has(.martys-main-preview)) .feature small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; } :is(body.project-martys, body:has(.martys-main-preview)) .feature-icon.dots { position: relative; } :is(body.project-martys, body:has(.martys-main-preview)) .feature-icon.dots span { position: absolute; width: 24px; height: 24px; border-radius: 50%; } :is(body.project-martys, body:has(.martys-main-preview)) .feature-icon.dots span:nth-child(1) { background: #8f1624; transform: translate(-8px, -8px); } :is(body.project-martys, body:has(.martys-main-preview)) .feature-icon.dots span:nth-child(2) { background: #c9a24f; transform: translate(-14px, 12px); } :is(body.project-martys, body:has(.martys-main-preview)) .feature-icon.dots span:nth-child(3) { background: #f4e6cf; transform: translate(12px, 8px); } :is(body.project-martys, body:has(.martys-main-preview)) .project-main-preview { min-height: 620px; display: flex; align-items: center; justify-content: center; padding: 54px; position: relative; overflow: hidden; } :is(body.project-martys, body:has(.martys-main-preview)) .martys-main-preview { background: radial-gradient(circle at 50% 45%, rgba(255,246,232,0.4), transparent 24%), linear-gradient(135deg, #2a1116 0%, #6f1420 45%, #c9a24f 46%, #2b1b14 62%, #111722 100%); } :is(body.project-martys, body:has(.martys-main-preview)) .martys-main-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.17), transparent 18%), radial-gradient(circle at 83% 83%, rgba(201,162,79,0.2), transparent 30%), repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 8px); opacity: 0.72; } :is(body.project-martys, body:has(.martys-main-preview)) .project-main-preview img { position: relative; z-index: 2; width: min(560px, 94%); border-radius: 16px; box-shadow: 0 34px 80px rgba(0, 0, 0, 0.42); cursor: zoom-in; } /* Showcase */ :is(body.project-martys, body:has(.martys-main-preview)) .project-showcase { padding: 0 0 80px; } :is(body.project-martys, body:has(.martys-main-preview)) .showcase-grid { display: grid; grid-template-columns: 1.52fr 0.48fr; align-items: stretch; box-shadow: 0 40px 100px rgba(0,0,0,0.28); } :is(body.project-martys, body:has(.martys-main-preview)) .martys-panel { padding: clamp(26px, 4.5vw, 68px); background: radial-gradient(circle at 28% 10%, rgba(201,162,79,0.2), transparent 25%), radial-gradient(circle at 78% 18%, rgba(143,22,36,0.2), transparent 28%), linear-gradient(145deg, #fff4e3 0%, #ead7bd 42%, #c9a24f 100%); } :is(body.project-martys, body:has(.martys-main-preview)) .martys-image-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: 20px; align-items: start; } :is(body.project-martys, body:has(.martys-main-preview)) .project-shot { margin: 0; overflow: hidden; border-radius: 20px; background: rgba(255,255,255,0.76); box-shadow: 0 18px 42px rgba(56, 22, 17, 0.22); border: 1px solid rgba(255,255,255,0.7); transition: transform .25s ease, box-shadow .25s ease; } :is(body.project-martys, body:has(.martys-main-preview)) .project-shot:hover { transform: translateY(-4px); box-shadow: 0 28px 58px rgba(56, 22, 17, 0.3); } :is(body.project-martys, body:has(.martys-main-preview)) .project-shot img { width: 100%; height: 100%; display: block; cursor: zoom-in; object-fit: cover; object-position: center; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-hero-wide { grid-column: span 7; aspect-ratio: 2.12 / 1; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-logo { grid-column: span 5; aspect-ratio: 2.3 / 1; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-menu-tall { grid-column: span 3; aspect-ratio: 3 / 4.55; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-form { grid-column: span 3; aspect-ratio: 2 / 3.4; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-menu-wide { grid-column: span 6; aspect-ratio: 1.95 / 1; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-red-mockup { grid-column: span 4; aspect-ratio: 1.55 / 1; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-grid { grid-column: span 4; aspect-ratio: 1.65 / 1; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-christmas { grid-column: span 2; aspect-ratio: 2 / 3.45; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-folded { grid-column: span 5; aspect-ratio: 2 / 1; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-hours { grid-column: span 3; aspect-ratio: 3 / 4.5; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-business { grid-column: span 3; aspect-ratio: 1.55 / 1; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-booklet { grid-column: span 4; aspect-ratio: 1.7 / 1; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-paper { grid-column: span 3; aspect-ratio: 1.35 / 1; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-gold { grid-column: span 3; aspect-ratio: 1.45 / 1; } :is(body.project-martys, body:has(.martys-main-preview)) .martys-side { display: grid; grid-template-rows: auto 1fr; background: linear-gradient(180deg, #1c1012 0%, #0a0708 100%); } :is(body.project-martys, body:has(.martys-main-preview)) .side-brand-card, :is(body.project-martys, body:has(.martys-main-preview)) .scope-card { padding: clamp(34px, 5vw, 58px); } :is(body.project-martys, body:has(.martys-main-preview)) .side-brand-card { background: radial-gradient(circle at top left, rgba(201,162,79,0.22), transparent 35%), linear-gradient(135deg, rgba(143,22,36,0.24), transparent 56%), #201114; border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-martys, body:has(.martys-main-preview)) .side-brand-card h2, :is(body.project-martys, body:has(.martys-main-preview)) .scope-card h2 { margin: 0 0 22px; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.05; } :is(body.project-martys, body:has(.martys-main-preview)) .side-brand-card p:last-child { margin: 0; color: var(--muted); line-height: 1.7; } :is(body.project-martys, body:has(.martys-main-preview)) .scope-card { display: flex; flex-direction: column; justify-content: center; } :is(body.project-martys, body:has(.martys-main-preview)) .scope-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } :is(body.project-martys, body:has(.martys-main-preview)) .scope-card li { position: relative; padding-left: 24px; color: #f4eadf; font-size: clamp(1rem, 1.35vw, 1.18rem); } :is(body.project-martys, body:has(.martys-main-preview)) .scope-card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); } /* Description */ :is(body.project-martys, body:has(.martys-main-preview)) .project-description { padding: 20px 0 90px; } :is(body.project-martys, body:has(.martys-main-preview)) .description-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; padding: clamp(34px, 5vw, 64px); border: 1px solid rgba(201,162,79,0.18); border-radius: 32px; background: linear-gradient(135deg, rgba(143,22,36,0.18), transparent 50%), rgba(255,255,255,0.045); } :is(body.project-martys, body:has(.martys-main-preview)) .description-grid h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -0.055em; } :is(body.project-martys, body:has(.martys-main-preview)) .description-grid p:last-child { color: var(--muted); font-size: 1.08rem; line-height: 1.8; margin: 0; } /* Next */ :is(body.project-martys, body:has(.martys-main-preview)) .next-project { padding: 0 0 64px; } :is(body.project-martys, body:has(.martys-main-preview)) .next-project-inner { display: flex; justify-content: space-between; gap: 18px; } :is(body.project-martys, body:has(.martys-main-preview)) .next-project a { padding: 14px 20px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); transition: transform .25s ease, background .25s ease, border-color .25s ease; } :is(body.project-martys, body:has(.martys-main-preview)) .next-project a:hover { transform: translateY(-2px); background: rgba(201,162,79,0.14); border-color: rgba(201,162,79,0.45); } /* Lightbox */ :is(body.project-martys, body:has(.martys-main-preview)) .image-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(10px); } :is(body.project-martys, body:has(.martys-main-preview)) .image-lightbox.is-active { display: flex; } :is(body.project-martys, body:has(.martys-main-preview)) .lightbox-content { width: min(1200px, 100%); height: min(88vh, 900px); display: flex; align-items: center; justify-content: center; } :is(body.project-martys, body:has(.martys-main-preview)) .lightbox-content img { width: auto; height: auto; max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65); } :is(body.project-martys, body:has(.martys-main-preview)) .lightbox-close { position: fixed; top: 24px; right: 28px; z-index: 10000; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 38px; line-height: 1; cursor: pointer; transition: background .25s ease, transform .25s ease; } :is(body.project-martys, body:has(.martys-main-preview)) .lightbox-close:hover { background: rgba(201,162,79,0.22); transform: scale(1.05); } :is(body.project-martys, body:has(.martys-main-preview)).lightbox-open { overflow: hidden; } /* Responsive */ @media (max-width: 1080px) { :is(body.project-martys, body:has(.martys-main-preview)) .project-hero-grid, :is(body.project-martys, body:has(.martys-main-preview)) .showcase-grid, :is(body.project-martys, body:has(.martys-main-preview)) .description-grid { grid-template-columns: 1fr; } :is(body.project-martys, body:has(.martys-main-preview)) .project-main-preview { min-height: 520px; } :is(body.project-martys, body:has(.martys-main-preview)) .martys-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } } @media (max-width: 860px) { :is(body.project-martys, body:has(.martys-main-preview)) .shot-hero-wide, :is(body.project-martys, body:has(.martys-main-preview)) .shot-logo, :is(body.project-martys, body:has(.martys-main-preview)) .shot-menu-tall, :is(body.project-martys, body:has(.martys-main-preview)) .shot-form, :is(body.project-martys, body:has(.martys-main-preview)) .shot-menu-wide, :is(body.project-martys, body:has(.martys-main-preview)) .shot-red-mockup, :is(body.project-martys, body:has(.martys-main-preview)) .shot-grid, :is(body.project-martys, body:has(.martys-main-preview)) .shot-christmas, :is(body.project-martys, body:has(.martys-main-preview)) .shot-folded, :is(body.project-martys, body:has(.martys-main-preview)) .shot-hours, :is(body.project-martys, body:has(.martys-main-preview)) .shot-business, :is(body.project-martys, body:has(.martys-main-preview)) .shot-booklet, :is(body.project-martys, body:has(.martys-main-preview)) .shot-paper, :is(body.project-martys, body:has(.martys-main-preview)) .shot-gold { grid-column: span 6; } } @media (max-width: 760px) { :is(body.project-martys, body:has(.martys-main-preview)) .project-nav { min-height: 66px; } :is(body.project-martys, body:has(.martys-main-preview)) .project-logo span { display: none; } :is(body.project-martys, body:has(.martys-main-preview)) .back-link { font-size: 0.9rem; padding: 9px 12px; } :is(body.project-martys, body:has(.martys-main-preview)) .project-hero { padding-top: 28px; } :is(body.project-martys, body:has(.martys-main-preview)) .project-hero-grid { border-radius: 22px 22px 0 0; } :is(body.project-martys, body:has(.martys-main-preview)) .project-intro { padding: 42px 22px; } :is(body.project-martys, body:has(.martys-main-preview)) .project-features { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } :is(body.project-martys, body:has(.martys-main-preview)) .feature-icon { width: 66px; height: 66px; font-size: 1.6rem; } :is(body.project-martys, body:has(.martys-main-preview)) .project-main-preview { min-height: 420px; padding: 28px; } :is(body.project-martys, body:has(.martys-main-preview)) .martys-image-grid { grid-template-columns: 1fr; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-hero-wide, :is(body.project-martys, body:has(.martys-main-preview)) .shot-logo, :is(body.project-martys, body:has(.martys-main-preview)) .shot-menu-tall, :is(body.project-martys, body:has(.martys-main-preview)) .shot-form, :is(body.project-martys, body:has(.martys-main-preview)) .shot-menu-wide, :is(body.project-martys, body:has(.martys-main-preview)) .shot-red-mockup, :is(body.project-martys, body:has(.martys-main-preview)) .shot-grid, :is(body.project-martys, body:has(.martys-main-preview)) .shot-christmas, :is(body.project-martys, body:has(.martys-main-preview)) .shot-folded, :is(body.project-martys, body:has(.martys-main-preview)) .shot-hours, :is(body.project-martys, body:has(.martys-main-preview)) .shot-business, :is(body.project-martys, body:has(.martys-main-preview)) .shot-booklet, :is(body.project-martys, body:has(.martys-main-preview)) .shot-paper, :is(body.project-martys, body:has(.martys-main-preview)) .shot-gold { grid-column: auto; } :is(body.project-martys, body:has(.martys-main-preview)) .shot-menu-tall, :is(body.project-martys, body:has(.martys-main-preview)) .shot-form, :is(body.project-martys, body:has(.martys-main-preview)) .shot-christmas, :is(body.project-martys, body:has(.martys-main-preview)) .shot-hours { aspect-ratio: 3 / 4.3; } :is(body.project-martys, body:has(.martys-main-preview)) .martys-side { grid-template-columns: 1fr; } :is(body.project-martys, body:has(.martys-main-preview)) .next-project-inner { flex-direction: column; } :is(body.project-martys, body:has(.martys-main-preview)) .image-lightbox { padding: 18px; } :is(body.project-martys, body:has(.martys-main-preview)) .lightbox-content { height: 82vh; } :is(body.project-martys, body:has(.martys-main-preview)) .lightbox-content img { max-height: 82vh; border-radius: 10px; } :is(body.project-martys, body:has(.martys-main-preview)) .lightbox-close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 32px; } } /* ========================================================= Cheshire Pizza Scope: :is(body.project-pizza, body:has(.pizza-main-preview)) ========================================================= */ :is(body.project-pizza, body:has(.pizza-main-preview)) { --dark: #071815; --dark-2: #0b221e; --text: #ffffff; --muted: #d9f4ec; --green: #0fc28a; --green-dark: #05745d; --teal: #008f86; --lime: #99d63a; --magenta: #9b0d63; --cream: #fff5df; --ink: #10201c; --line: rgba(255,255,255,0.12); --container: min(1440px, calc(100vw - 32px)); } :is(body.project-pizza, body:has(.pizza-main-preview)) * { box-sizing: border-box; } html { scroll-behavior: smooth; } :is(body.project-pizza, body:has(.pizza-main-preview)) { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: radial-gradient(circle at 16% 0%, rgba(15,194,138,0.28), transparent 31%), radial-gradient(circle at 88% 12%, rgba(153,214,58,0.18), transparent 27%), radial-gradient(circle at 70% 82%, rgba(155,13,99,0.16), transparent 32%), linear-gradient(180deg, #0d211d 0%, #06100e 100%); } :is(body.project-pizza, body:has(.pizza-main-preview)) img { max-width: 100%; display: block; } :is(body.project-pizza, body:has(.pizza-main-preview)) a { color: inherit; text-decoration: none; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-page { min-height: 100vh; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-container { width: var(--container); margin-inline: auto; } /* Header */ :is(body.project-pizza, body:has(.pizza-main-preview)) .project-header { position: sticky; top: 0; z-index: 50; background: rgba(5, 17, 15, 0.78); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; } :is(body.project-pizza, body:has(.pizza-main-preview)) .back-link { padding: 10px 16px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; color: #fff; transition: background .25s ease, transform .25s ease, border-color .25s ease; } :is(body.project-pizza, body:has(.pizza-main-preview)) .back-link:hover { background: rgba(15,194,138,0.17); border-color: rgba(15,194,138,0.52); transform: translateY(-2px); } /* Hero */ :is(body.project-pizza, body:has(.pizza-main-preview)) .project-hero { padding: 64px 0 0; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; min-height: 640px; overflow: hidden; border-radius: 28px 28px 0 0; background: radial-gradient(circle at 20% 14%, rgba(15,194,138,0.2), transparent 29%), radial-gradient(circle at 88% 80%, rgba(155,13,99,0.16), transparent 32%), repeating-linear-gradient( 135deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 8px ), #0d211d; box-shadow: 0 40px 100px rgba(0,0,0,0.35); } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-intro { padding: clamp(44px, 6vw, 92px); display: flex; flex-direction: column; justify-content: center; text-align: center; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-kicker { margin: 0 0 18px; color: var(--lime); font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-intro h1 { margin: 0; font-family: Oswald, Inter, system-ui, sans-serif; font-size: clamp(3.7rem, 7.8vw, 7.7rem); line-height: 0.88; text-transform: uppercase; letter-spacing: -0.045em; color: var(--green); text-shadow: 0 16px 44px rgba(15,194,138,0.22); } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-intro h1 span { display: block; margin-top: 16px; font-family: Inter, system-ui, sans-serif; font-size: clamp(1.65rem, 3.8vw, 3.65rem); line-height: 0.96; letter-spacing: -0.055em; color: var(--cream); } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-lead { max-width: 740px; margin: 28px auto 0; color: #effff9; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-features { margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; width: min(760px, 100%); } :is(body.project-pizza, body:has(.pizza-main-preview)) .feature { display: grid; justify-items: center; gap: 8px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .feature-icon { width: 76px; height: 76px; border: 2px solid rgba(153,214,58,0.48); border-radius: 50%; display: grid; place-items: center; color: var(--cream); font-size: 1.8rem; font-weight: 900; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 38%), rgba(15,194,138,0.17); } :is(body.project-pizza, body:has(.pizza-main-preview)) .feature strong { font-size: 0.98rem; } :is(body.project-pizza, body:has(.pizza-main-preview)) .feature small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; } :is(body.project-pizza, body:has(.pizza-main-preview)) .feature-icon.dots { position: relative; } :is(body.project-pizza, body:has(.pizza-main-preview)) .feature-icon.dots span { position: absolute; width: 24px; height: 24px; border-radius: 50%; } :is(body.project-pizza, body:has(.pizza-main-preview)) .feature-icon.dots span:nth-child(1) { background: #0fc28a; transform: translate(-8px, -8px); } :is(body.project-pizza, body:has(.pizza-main-preview)) .feature-icon.dots span:nth-child(2) { background: #99d63a; transform: translate(-14px, 12px); } :is(body.project-pizza, body:has(.pizza-main-preview)) .feature-icon.dots span:nth-child(3) { background: #9b0d63; transform: translate(12px, 8px); } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-main-preview { min-height: 640px; display: flex; align-items: center; justify-content: center; padding: 54px; position: relative; overflow: hidden; } :is(body.project-pizza, body:has(.pizza-main-preview)) .pizza-main-preview { background: radial-gradient(circle at 50% 42%, rgba(255,245,223,0.64), transparent 26%), radial-gradient(circle at 78% 18%, rgba(153,214,58,0.38), transparent 32%), radial-gradient(circle at 20% 78%, rgba(155,13,99,0.28), transparent 30%), linear-gradient(135deg, #0b8579 0%, #12a983 48%, #8cc63f 100%); } :is(body.project-pizza, body:has(.pizza-main-preview)) .pizza-main-preview::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.22), transparent 34%), radial-gradient(circle at 20% 22%, rgba(255,255,255,0.28) 0 7px, transparent 8px), radial-gradient(circle at 78% 80%, rgba(255,255,255,0.2) 0 10px, transparent 11px), linear-gradient(180deg, transparent, rgba(0,0,0,0.2)); opacity: 0.78; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-main-preview img { position: relative; z-index: 2; width: min(560px, 94%); border-radius: 18px; box-shadow: 0 34px 90px rgba(0, 55, 42, 0.38); cursor: zoom-in; } /* Showcase */ :is(body.project-pizza, body:has(.pizza-main-preview)) .project-showcase { padding: 0 0 80px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .showcase-grid { display: grid; grid-template-columns: 1.52fr 0.48fr; align-items: stretch; box-shadow: 0 40px 100px rgba(0,0,0,0.28); } :is(body.project-pizza, body:has(.pizza-main-preview)) .pizza-panel { padding: clamp(26px, 4.5vw, 68px); background: radial-gradient(circle at 18% 10%, rgba(15,194,138,0.32), transparent 30%), radial-gradient(circle at 82% 20%, rgba(155,13,99,0.16), transparent 26%), linear-gradient(145deg, #eafff7 0%, #d3f6ec 48%, #c7ead3 100%); } :is(body.project-pizza, body:has(.pizza-main-preview)) .pizza-image-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: 20px; align-items: start; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-shot { margin: 0; overflow: hidden; border-radius: 22px; background: #ffffff; box-shadow: 0 18px 40px rgba(2, 52, 42, 0.18); border: 1px solid rgba(255,255,255,0.72); transition: transform .25s ease, box-shadow .25s ease; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-shot:hover { transform: translateY(-4px); box-shadow: 0 28px 58px rgba(2, 52, 42, 0.28); } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-shot img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; cursor: zoom-in; } :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-storefront { grid-column: span 5; grid-row: span 2; aspect-ratio: 1.35 / 1; } :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-menu-main { grid-column: span 4; aspect-ratio: 1.75 / 1; } :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-banner { grid-column: span 3; aspect-ratio: 1.9 / 1; } :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-frames-large { grid-column: span 5; aspect-ratio: 2.25 / 1; } :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-frames { grid-column: span 4; aspect-ratio: 2.35 / 1; } :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-tea { grid-column: span 4; aspect-ratio: 1.45 / 1; } :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-moving { grid-column: span 4; aspect-ratio: 1.55 / 1; } :is(body.project-pizza, body:has(.pizza-main-preview)) .pizza-side { display: grid; grid-template-rows: auto 1fr; background: radial-gradient(circle at 78% 12%, rgba(153,214,58,0.22), transparent 30%), linear-gradient(180deg, #0d211d 0%, #07110f 100%); } :is(body.project-pizza, body:has(.pizza-main-preview)) .side-brand-card, :is(body.project-pizza, body:has(.pizza-main-preview)) .scope-card { padding: clamp(34px, 5vw, 58px); } :is(body.project-pizza, body:has(.pizza-main-preview)) .side-brand-card { background: linear-gradient(135deg, rgba(15,194,138,0.22), transparent 52%), #0f2722; border-bottom: 1px solid rgba(255,255,255,0.08); } :is(body.project-pizza, body:has(.pizza-main-preview)) .side-brand-card h2, :is(body.project-pizza, body:has(.pizza-main-preview)) .scope-card h2 { margin: 0 0 22px; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.05; } :is(body.project-pizza, body:has(.pizza-main-preview)) .side-brand-card p:last-child { margin: 0; color: var(--muted); line-height: 1.7; } :is(body.project-pizza, body:has(.pizza-main-preview)) .scope-card { display: flex; flex-direction: column; justify-content: center; } :is(body.project-pizza, body:has(.pizza-main-preview)) .scope-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .scope-card li { position: relative; padding-left: 24px; color: #effff9; font-size: clamp(1rem, 1.35vw, 1.18rem); } :is(body.project-pizza, body:has(.pizza-main-preview)) .scope-card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(153,214,58,0.13); } /* Description */ :is(body.project-pizza, body:has(.pizza-main-preview)) .project-description { padding: 20px 0 90px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .description-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; padding: clamp(34px, 5vw, 64px); border: 1px solid rgba(15,194,138,0.22); border-radius: 32px; background: linear-gradient(135deg, rgba(15,194,138,0.15), transparent 48%), rgba(255,255,255,0.045); } :is(body.project-pizza, body:has(.pizza-main-preview)) .description-grid h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -0.055em; } :is(body.project-pizza, body:has(.pizza-main-preview)) .description-grid p:last-child { color: var(--muted); font-size: 1.08rem; line-height: 1.8; margin: 0; } /* Next */ :is(body.project-pizza, body:has(.pizza-main-preview)) .next-project { padding: 0 0 64px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .next-project-inner { display: flex; justify-content: space-between; gap: 18px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .next-project a { padding: 14px 20px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); transition: transform .25s ease, background .25s ease, border-color .25s ease; } :is(body.project-pizza, body:has(.pizza-main-preview)) .next-project a:hover { transform: translateY(-2px); background: rgba(15,194,138,0.16); border-color: rgba(15,194,138,0.48); } /* Lightbox */ :is(body.project-pizza, body:has(.pizza-main-preview)) .image-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(10px); } :is(body.project-pizza, body:has(.pizza-main-preview)) .image-lightbox.is-active { display: flex; } :is(body.project-pizza, body:has(.pizza-main-preview)) .lightbox-content { width: min(1200px, 100%); height: min(88vh, 900px); display: flex; align-items: center; justify-content: center; } :is(body.project-pizza, body:has(.pizza-main-preview)) .lightbox-content img { width: auto; height: auto; max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65); } :is(body.project-pizza, body:has(.pizza-main-preview)) .lightbox-close { position: fixed; top: 24px; right: 28px; z-index: 10000; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 38px; line-height: 1; cursor: pointer; transition: background .25s ease, transform .25s ease; } :is(body.project-pizza, body:has(.pizza-main-preview)) .lightbox-close:hover { background: rgba(15,194,138,0.25); transform: scale(1.05); } :is(body.project-pizza, body:has(.pizza-main-preview)).lightbox-open { overflow: hidden; } /* Responsive */ @media (max-width: 1080px) { :is(body.project-pizza, body:has(.pizza-main-preview)) .project-hero-grid, :is(body.project-pizza, body:has(.pizza-main-preview)) .showcase-grid, :is(body.project-pizza, body:has(.pizza-main-preview)) .description-grid { grid-template-columns: 1fr; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-main-preview { min-height: 520px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .pizza-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } } @media (max-width: 900px) { :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-storefront, :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-menu-main, :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-banner, :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-frames-large, :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-frames, :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-tea, :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-moving { grid-column: span 6; } } @media (max-width: 760px) { :is(body.project-pizza, body:has(.pizza-main-preview)) .project-nav { min-height: 66px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-logo span { display: none; } :is(body.project-pizza, body:has(.pizza-main-preview)) .back-link { font-size: 0.9rem; padding: 9px 12px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-hero { padding-top: 28px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-hero-grid { border-radius: 22px 22px 0 0; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-intro { padding: 42px 22px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-features { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .feature-icon { width: 66px; height: 66px; font-size: 1.5rem; } :is(body.project-pizza, body:has(.pizza-main-preview)) .project-main-preview { min-height: 420px; padding: 28px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .pizza-image-grid { grid-template-columns: 1fr; } :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-storefront, :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-menu-main, :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-banner, :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-frames-large, :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-frames, :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-tea, :is(body.project-pizza, body:has(.pizza-main-preview)) .shot-moving { grid-column: auto; } :is(body.project-pizza, body:has(.pizza-main-preview)) .pizza-side { grid-template-columns: 1fr; } :is(body.project-pizza, body:has(.pizza-main-preview)) .next-project-inner { flex-direction: column; } :is(body.project-pizza, body:has(.pizza-main-preview)) .image-lightbox { padding: 18px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .lightbox-content { height: 82vh; } :is(body.project-pizza, body:has(.pizza-main-preview)) .lightbox-content img { max-height: 82vh; border-radius: 10px; } :is(body.project-pizza, body:has(.pizza-main-preview)) .lightbox-close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 32px; } }