/** * Story / Editorial Pages — GeneratePress Luxe * * Styles for collection story pages, the brand/about page, and any editorial * long-form content. These pages are designed to feel like book chapters: * spacious, typographically-led, and image-rich. * * Apply the class "luxe-story" to a page's via WPBakery or a page * template, or target it via GeneratePress' body class system. * * @package GP_Luxe */ /* ========================================================================= 1. Story page wrapper ========================================================================= */ .page-template-story, .luxe-story-page { background: var(--luxe-off-white); } /* Story content container — narrower for reading comfort */ .luxe-story-body { max-width: var(--luxe-content-width); margin: 0 auto; padding: var(--luxe-space-16) var(--luxe-space-6); } /* ========================================================================= 2. Chapter / collection header ========================================================================= */ .luxe-chapter-header { text-align: center; padding: var(--luxe-space-20) var(--luxe-space-6) var(--luxe-space-12); } .luxe-chapter-header__chapter-label { display: block; font-family: var(--luxe-font-sans); font-size: var(--luxe-text-xs); font-weight: 400; letter-spacing: var(--luxe-tracking-widest); text-transform: uppercase; color: var(--luxe-mid-grey); margin-bottom: var(--luxe-space-5); } .luxe-chapter-header__title { font-family: var(--luxe-font-serif); font-size: clamp(var(--luxe-text-2xl), 6vw, var(--luxe-text-3xl)); font-weight: 300; letter-spacing: var(--luxe-tracking-tight); line-height: var(--luxe-leading-tight); color: var(--luxe-black); margin: 0 auto var(--luxe-space-6); max-width: 14em; } .luxe-chapter-header__intro { font-family: var(--luxe-font-serif); font-size: var(--luxe-text-lg); font-style: italic; font-weight: 300; line-height: var(--luxe-leading-snug); color: var(--luxe-dark-grey); max-width: 34em; margin: 0 auto; } /* Divider below chapter header */ .luxe-chapter-header::after { content: ''; display: block; width: 40px; height: 1px; background: var(--luxe-black); margin: var(--luxe-space-10) auto 0; opacity: 0.3; } /* ========================================================================= 3. Story full-width image sections ========================================================================= */ .luxe-story-image { width: 100%; overflow: hidden; } .luxe-story-image img { width: 100%; height: auto; display: block; transition: transform 0.8s var(--luxe-ease-out); } /* Parallax-feel hover on story images (pure CSS) */ .luxe-story-image:hover img { transform: scale(1.015); } @media (prefers-reduced-motion: reduce) { .luxe-story-image:hover img { transform: scale(1); } } /* Captioned image */ .luxe-story-image__caption { font-family: var(--luxe-font-sans); font-size: var(--luxe-text-xs); letter-spacing: var(--luxe-tracking-wide); text-transform: uppercase; color: var(--luxe-mid-grey); text-align: center; padding: var(--luxe-space-3) var(--luxe-space-6) 0; } /* Half-width image — editorial pull */ .luxe-story-image--half { max-width: 50%; } /* Two-up image layout */ .luxe-story-images-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luxe-space-3); } /* ========================================================================= 4. Story text blocks ========================================================================= */ .luxe-story-text { max-width: var(--luxe-content-width); margin: var(--luxe-space-12) auto; padding: 0 var(--luxe-space-6); } .luxe-story-text p { font-family: var(--luxe-font-serif); font-size: var(--luxe-text-md); font-weight: 300; line-height: var(--luxe-leading-loose); color: var(--luxe-dark-grey); margin-bottom: var(--luxe-space-5); } /* Pull quote / blockquote */ .luxe-story-text blockquote, blockquote.luxe-quote { border: none; margin: var(--luxe-space-10) 0; padding: var(--luxe-space-6) var(--luxe-space-8); background: transparent; text-align: center; } .luxe-story-text blockquote p, blockquote.luxe-quote p { font-family: var(--luxe-font-serif); font-size: clamp(var(--luxe-text-lg), 3vw, var(--luxe-text-xl)); font-style: italic; font-weight: 300; line-height: var(--luxe-leading-snug); color: var(--luxe-black); margin: 0; } .luxe-story-text blockquote cite, blockquote.luxe-quote cite { display: block; margin-top: var(--luxe-space-4); font-family: var(--luxe-font-sans); font-size: var(--luxe-text-xs); font-style: normal; letter-spacing: var(--luxe-tracking-widest); text-transform: uppercase; color: var(--luxe-mid-grey); } /* ========================================================================= 5. Story CTA section (shop the collection) ========================================================================= */ .luxe-story-cta { text-align: center; padding: var(--luxe-space-16) var(--luxe-space-6); } .luxe-story-cta__label { display: block; font-family: var(--luxe-font-sans); font-size: var(--luxe-text-xs); letter-spacing: var(--luxe-tracking-widest); text-transform: uppercase; color: var(--luxe-mid-grey); margin-bottom: var(--luxe-space-4); } .luxe-story-cta__heading { font-family: var(--luxe-font-serif); font-size: clamp(var(--luxe-text-xl), 4vw, var(--luxe-text-2xl)); font-weight: 300; letter-spacing: var(--luxe-tracking-tight); color: var(--luxe-black); margin: 0 auto var(--luxe-space-8); max-width: 16em; } /* ========================================================================= 6. Brand / About page layout ========================================================================= */ .luxe-about { max-width: var(--luxe-max-width); margin: 0 auto; padding: var(--luxe-space-20) var(--luxe-space-6); } .luxe-about__lead { font-family: var(--luxe-font-serif); font-size: clamp(var(--luxe-text-xl), 3.5vw, var(--luxe-text-2xl)); font-weight: 300; line-height: var(--luxe-leading-snug); letter-spacing: var(--luxe-tracking-tight); color: var(--luxe-black); max-width: 700px; margin-bottom: var(--luxe-space-12); } .luxe-about__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luxe-space-12); align-items: start; } .luxe-about__body p { font-family: var(--luxe-font-serif); font-size: var(--luxe-text-md); font-weight: 300; line-height: var(--luxe-leading-loose); color: var(--luxe-dark-grey); } /* ========================================================================= 7. Collection archive — chapter grid header ========================================================================= */ .luxe-archive-header { padding: var(--luxe-space-20) var(--luxe-space-6) var(--luxe-space-10); text-align: center; border-bottom: var(--luxe-border-light); margin-bottom: var(--luxe-space-10); } .luxe-archive-header__chapter { font-family: var(--luxe-font-sans); font-size: var(--luxe-text-xs); font-weight: 400; letter-spacing: var(--luxe-tracking-widest); text-transform: uppercase; color: var(--luxe-mid-grey); margin-bottom: var(--luxe-space-3); } .luxe-archive-header__title { font-family: var(--luxe-font-serif); font-size: clamp(var(--luxe-text-xl), 4vw, var(--luxe-text-2xl)); font-weight: 300; letter-spacing: var(--luxe-tracking-tight); margin: 0; } .luxe-archive-header__description { font-family: var(--luxe-font-serif); font-size: var(--luxe-text-md); font-style: italic; color: var(--luxe-mid-grey); max-width: 42em; margin: var(--luxe-space-4) auto 0; } /* Link to collection story */ .luxe-archive-header__story-link { display: inline-block; margin-top: var(--luxe-space-5); font-family: var(--luxe-font-sans); font-size: var(--luxe-text-xs); letter-spacing: var(--luxe-tracking-widest); text-transform: uppercase; color: var(--luxe-mid-grey); text-decoration: none; border-bottom: 1px solid rgba(10,10,10,0.2); padding-bottom: 2px; transition: color var(--luxe-duration-fast) var(--luxe-ease-out), border-color var(--luxe-duration-fast) var(--luxe-ease-out); } .luxe-archive-header__story-link:hover { color: var(--luxe-black); border-color: var(--luxe-black); opacity: 1; } /* ========================================================================= 8. Responsive story ========================================================================= */ @media (max-width: 900px) { .luxe-about__body { grid-template-columns: 1fr; gap: var(--luxe-space-6); } .luxe-story-images-duo { grid-template-columns: 1fr; } .luxe-story-image--half { max-width: 100%; } } @media (max-width: 768px) { .luxe-chapter-header { padding: var(--luxe-space-16) var(--luxe-space-5) var(--luxe-space-8); } .luxe-story-text { margin: var(--luxe-space-8) auto; padding: 0 var(--luxe-space-4); } .luxe-about { padding: var(--luxe-space-12) var(--luxe-space-5); } .luxe-story-cta { padding: var(--luxe-space-10) var(--luxe-space-5); } }