/* Pedro Project Page ------------------ Dedicated stylesheet for project detail pages. Purpose: - Recreate the project detail Figma frame with high fidelity. - Stay isolated from the home page so the live landing page remains unchanged. - Provide a reusable structure for future project pages that share the same layout and only swap content. Organization: 1. Tokens and reset 2. Project detail layout 3. Footer 4. Responsive breakpoints Maintenance: - To create a new project page, duplicate the HTML file and change the `data-project-key` on the ``. - Project-specific content is defined in `Assets/js/pedro-project.js`. - Shared UI primitives such as header, mobile menu, buttons and the serif accent are intentionally inherited from `Assets/css/pedro-home-redesign.css`. - The desktop layout is based on the Figma frame geometry: 639px gallery / 45px gap / 388px sidebar within a 1072px content width. */ :root { --bg: #0a0a0a; --text: #f5f5f5; --text-soft: #f5f5f8; --muted: #ababab; --nav: #b8b8b8; --border: rgba(232, 232, 232, 0.15); --content: 1072px; --radius: 16px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: "Outfit", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.project-locked { overflow: hidden; } body.project-access-page { overflow: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .project-page { min-height: 100vh; overflow-x: hidden; padding-top: 78px; } body.project-locked .project-page { pointer-events: none; user-select: none; } .project-protection { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(18px); } body.project-locked .project-protection { display: flex; } body.project-access-page .project-protection { display: flex; } .project-protection__panel { position: relative; width: min(100%, 460px); padding: 32px; border: 1px solid rgba(232, 232, 232, 0.12); border-radius: 24px; background: rgba(245, 245, 248, 0.06); } .project-protection__close { position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; } .project-protection__close span { position: absolute; top: 11px; left: 1px; width: 22px; height: 1px; background: var(--text); } .project-protection__close span:first-child { transform: rotate(45deg); } .project-protection__close span:last-child { transform: rotate(-45deg); } .project-protection__eyebrow { margin: 0 0 12px; color: #858585; font-size: 14px; line-height: 18px; font-weight: 300; letter-spacing: -0.24px; } .project-protection__title { margin: 0 0 12px; color: var(--text-soft); font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: -1.28px; } .project-protection__copy { margin: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 24px; font-weight: 300; letter-spacing: -0.24px; } .project-protection__form { display: flex; flex-direction: column; gap: 12px; } .project-protection__label { color: var(--text); font-size: 14px; line-height: 18px; font-weight: 300; } .project-protection__input { width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-radius: 24px; outline: none; background: rgba(255, 255, 255, 0.06); color: var(--text); font: inherit; } .project-protection__input:focus { background: rgba(255, 255, 255, 0.1); } .project-protection__error { margin: 0; color: #eb445b; font-size: 14px; line-height: 18px; font-weight: 300; } .project-protection__button { width: 100%; } .project-reveal-item { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--project-reveal-delay, 0ms); will-change: opacity, transform; } .project-reveal-item.is-visible { opacity: 1; transform: translateY(0); } .container { width: min(calc(100% - 48px), var(--content)); margin: 0 auto; } /* Project detail layout */ .project-main { padding-top: 34px; } .project-layout { display: grid; grid-template-columns: 616px 388px; gap: 22px; align-items: start; } .project-gallery { width: 616px; } .project-gallery-surface { width: 100%; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: var(--bg); } .project-gallery-image, .project-gallery-video { width: 100%; height: auto; border-radius: 0; object-fit: cover; } .project-gallery-extra-image { width: 100%; height: auto; margin-top: 16px; border-radius: 0; } .project-sidebar { display: flex; flex-direction: column; gap: 32px; width: 434px; padding-top: 0; position: fixed; top: 112px; right: max(24px, calc((100vw - var(--content)) / 2)); height: fit-content; } .project-sidebar-block { display: flex; flex-direction: column; gap: 8px; } .project-sidebar h1 { margin: 0; color: var(--text-soft); font-size: 44px; line-height: 46.2px; font-weight: 400; letter-spacing: -1.68px; } .project-description { margin: 0; color: var(--muted); font-size: 18px; line-height: 24px; font-weight: 300; letter-spacing: -0.4px; } .project-details { display: flex; flex-direction: column; gap: 0; margin-top: 16px; color: var(--muted); font-size: 18px; line-height: 24px; font-weight: 300; letter-spacing: -0.4px; } .project-details h2 { margin: 0 0 0; color: var(--text); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.4px; } .project-detail-row { display: block; } .project-detail-label { color: var(--text); } .project-more-button { margin-top: 0; width: 100%; } .project-more-button::before, .project-more-button::after { opacity: 0; } .project-more-button:hover::before { opacity: 0.34; } .project-more-button:hover::after { opacity: 0.78; } /* Footer */ .project-footer { padding: 400px 0 24px; opacity: 0; visibility: hidden; transition: opacity 220ms ease; } body.project-gallery-ready .project-footer { opacity: 1; visibility: visible; } .project-footer-stack { width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; align-items: center; } .project-footer-divider-wrap { width: 460px; height: 1px; background: #1f1f1f; } .project-footer-divider { width: 460px; height: 1px; } .project-footer-copy { width: auto; margin: 0; text-align: center; color: #858585; font-size: 16px; line-height: 24px; letter-spacing: -0.24px; font-weight: 300; } /* Responsive */ @media (max-width: 1200px) { .project-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; } .project-gallery, .project-sidebar { width: auto; } .project-sidebar { right: 24px; width: 340px; top: 112px; } } @media (max-width: 768px) { html.mobile-layout .project-page { padding-top: 78px; } html.mobile-layout .container { width: min(calc(100% - 48px), 345px); } html.mobile-layout .site-header .container { padding: 24px 0; } html.mobile-layout .project-main { padding-top: 48px; } html.mobile-layout .project-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } html.mobile-layout .project-gallery, html.mobile-layout .project-sidebar { width: 100%; } html.mobile-layout .project-sidebar { gap: 24px; position: static; } html.mobile-layout .project-sidebar h1 { font-size: 36px; line-height: 38px; letter-spacing: -1.2px; } html.mobile-layout .project-details, html.mobile-layout .project-details h2 { font-size: 18px; line-height: 24px; letter-spacing: -0.24px; } html.mobile-layout .project-description { font-size: 18px; line-height: 24px; letter-spacing: -0.24px; } html.mobile-layout .project-footer { padding: 162px 0 24px; } html.mobile-layout .project-protection { padding: 16px; } html.mobile-layout .project-protection__panel { padding: 24px; border-radius: 20px; } html.mobile-layout .project-protection__title { font-size: 28px; letter-spacing: -1.12px; } html.mobile-layout .project-footer-stack, html.mobile-layout .project-footer-divider-wrap, html.mobile-layout .project-footer-divider, html.mobile-layout .project-footer-copy { width: 100%; } html.mobile-layout .project-footer-copy { font-size: 14px; line-height: 22px; } } @media (prefers-reduced-motion: reduce) { .project-reveal-item { opacity: 1; transform: none; transition: none; } .farfetch-project__hero-carousel-slide, .farfetch-project__hero-carousel-slide.is-active, .farfetch-project__hero-carousel-dot { transition: none; } } /* Farfetch page */ .project-page-farfetch .project-page, .project-page-article .project-page { padding-top: 72px; } .project-page-farfetch .project-main, .project-page-article .project-main { padding-top: 122px; } .project-page-farfetch .container, .project-page-article .container { width: min(calc(100% - 48px), 1074px); } .farfetch-project__stack { display: flex; flex-direction: column; gap: 144px; } .farfetch-project__hero { display: flex; flex-direction: column; gap: 48px; align-items: center; } .farfetch-project__context-row, .farfetch-project__content-row { display: grid; grid-template-columns: 323px 709px; column-gap: 42px; width: 100%; } .farfetch-project__content-row { align-items: start; } .farfetch-project__context-title-wrap { width: 323px; } .farfetch-project__context-title, .farfetch-project__section-title { margin: 0; color: #f5f5f8; font-size: 34px; line-height: 1; font-weight: 600; letter-spacing: 0; } .farfetch-project__context-spacer { min-height: 1px; } .farfetch-project__body-copy { color: #ababab; font-size: 18px; line-height: 24px; font-weight: 300; } .farfetch-project__body-copy p { margin: 0 0 24px; } .farfetch-project__body-copy p:last-child { margin-bottom: 0; } .farfetch-project__body-copy strong { color: #ababab; font-weight: 700; } .farfetch-project__image-wrap { width: 1072px; max-width: 100%; } .hostelworld-checkout-image { margin-top: 24px; } .farfetch-project__image-wrap--hero { height: auto; } .farfetch-project__hero-carousel { display: flex; flex-direction: column; gap: 16px; } .farfetch-project__hero-carousel-viewport { overflow: hidden; } .farfetch-project__hero-carousel-track { display: flex; transition: transform 1080ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .farfetch-project__hero-carousel-slide { flex: 0 0 100%; min-width: 100%; transform: scale(0.985); filter: blur(3px) brightness(0.92) saturate(0.94); opacity: 0.82; transition: transform 1080ms cubic-bezier(0.16, 1, 0.3, 1), filter 1080ms cubic-bezier(0.16, 1, 0.3, 1), opacity 820ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, filter, opacity; } .farfetch-project__hero-carousel-slide.is-active { pointer-events: auto; transform: scale(1); filter: blur(0) brightness(1) saturate(1); opacity: 1; } .farfetch-project__hero-carousel-media { width: 100%; height: auto; display: block; } .farfetch-project__hero-carousel-controls { display: flex; justify-content: center; align-items: center; gap: 10px; } .farfetch-project__hero-carousel-dot { appearance: none; border: 0; background: rgba(245, 245, 245, 0.4); width: 8px; height: 8px; border-radius: 999px; cursor: pointer; padding: 0; transition: opacity 220ms ease, transform 220ms ease, background-color 220ms ease, width 220ms ease, height 220ms ease; } .farfetch-project__hero-carousel-dot:hover { background: rgba(245, 245, 245, 0.64); } .farfetch-project__hero-carousel-dot.is-active { width: 12px; height: 12px; background: #f5f5f5; } .farfetch-project__image { width: 100%; height: auto; display: block; } .farfetch-project__impact-list { margin: 0 0 24px; padding-left: 22px; color: #ababab; font-size: 18px; line-height: 24px; font-weight: 300; } .farfetch-project__impact-list li { margin-bottom: 0; } .farfetch-project__topics { display: grid; grid-template-columns: repeat(3, 329px); column-gap: 43px; width: 100%; align-items: start; } .farfetch-project__topic { min-height: 113px; } .farfetch-project__topic h3 { margin: 0; color: #f5f5f5; font-size: 22px; line-height: 1; font-weight: 600; } .farfetch-project__topic p { margin: 41px 0 0; color: #b8b8b8; font-size: 18px; line-height: 24px; font-weight: 300; } .farfetch-project__more-button { width: 173px; min-width: 173px; align-self: center; } .project-page-farfetch .project-footer, .project-page-article .project-footer { padding: 144px 0 24px; opacity: 1; visibility: visible; transition: none; } .project-page-farfetch .project-footer-stack, .project-page-article .project-footer-stack { width: 460px; } .project-page-farfetch .project-footer-divider-wrap, .project-page-farfetch .project-footer-divider, .project-page-article .project-footer-divider-wrap, .project-page-article .project-footer-divider { width: 460px; height: 1px; } .project-page-farfetch .project-footer-copy, .project-page-article .project-footer-copy { width: auto; } @media (max-width: 1200px) { .project-page-farfetch .container, .project-page-article .container { width: min(calc(100% - 48px), 1074px); } .farfetch-project__context-row, .farfetch-project__content-row { grid-template-columns: 280px minmax(0, 1fr); } .farfetch-project__context-title-wrap { width: 280px; } .farfetch-project__topics { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } } @media (max-width: 768px) { .project-page-farfetch .project-page, .project-page-article .project-page { padding-top: 72px; } .project-page-farfetch .project-main, .project-page-article .project-main { padding-top: 72px; } .project-page-farfetch .container, .project-page-article .container { width: min(calc(100% - 48px), 345px); } .farfetch-project__stack { gap: 72px; } .farfetch-project__hero { gap: 24px; align-items: stretch; } .farfetch-project__context-row, .farfetch-project__content-row { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } .farfetch-project__context-title-wrap { width: 100%; } .farfetch-project__context-title, .farfetch-project__section-title { font-size: 30px; line-height: 32px; } .farfetch-project__hero-carousel-dot { width: 7px; height: 7px; } .farfetch-project__hero-carousel-dot.is-active { width: 11px; height: 11px; } .farfetch-project__body-copy, .farfetch-project__impact-list, .farfetch-project__topic p { font-size: 16px; line-height: 22px; } .farfetch-project__impact-list { padding-left: 18px; } .farfetch-project__topics { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } .farfetch-project__topic { min-height: 0; } .farfetch-project__topic h3 { font-size: 20px; } .farfetch-project__topic p { margin-top: 16px; } .farfetch-project__more-button { width: 100%; min-width: 0; } .project-page-farfetch .project-footer, .project-page-article .project-footer { padding-top: 72px; } .project-page-farfetch .project-footer-stack, .project-page-farfetch .project-footer-divider-wrap, .project-page-farfetch .project-footer-divider, .project-page-farfetch .project-footer-copy, .project-page-article .project-footer-stack, .project-page-article .project-footer-divider-wrap, .project-page-article .project-footer-divider, .project-page-article .project-footer-copy { width: 100%; } }