/* ============================================================ KEMPIRE — Single consolidated stylesheet Combines all per-page CSS + responsive into one file. Fonts (load in ): Page scoping: Each page sets a body class so per-page rules don't bleed across pages. kempire.html -> kempire-about.html -> kempire-blogpost.html -> kempire-podcasts.html -> kempire-shop.html -> kempire-stories.html -> kempire-tour.html -> kempire-watch.html -> Sections: 1. COMMON BASE — reset, body, nav, footer, ticker, ad base, btn 2. PAGE: HOME — .kempire-home-page 3. PAGE: ABOUT — .kempire-about-page 4. PAGE: BLOGPOST — .kempire-blogpost-page 5. PAGE: PODCASTS — .kempire-podcasts-page 6. PAGE: SHOP — .kempire-shop-page 7. PAGE: TOUR — .kempire-tour-page 8. PAGE: WATCH — .kempire-watch-page 9. PAGE: STORIES — .kempire-stories-page 10. RESPONSIVE — all media queries, page-scoped ============================================================ */ /* ============================================================ 1. COMMON BASE ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'DM Sans', sans-serif; background: #0A0A0A; color: #F0EDE6; } /* --- Navigation (sticky by default; About overrides) --- */ nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; border-bottom: 0.5px solid rgba(240,237,230,0.1); position: sticky; top: 0; background: #0A0A0A; z-index: 100; } .logo { display: inline-flex; align-items: center; /* gap would apply between every letter and · span — wildly wide. Space after crown only → a.logo > img margin */ gap: 0; font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 900; /* Tight tracking like the banner; explicit · separators carry most rhythm */ letter-spacing: 0.06em; color: #F0EDE6; text-decoration: none; } /* Crown: use a.logo > img so Elementor can’t drop styling if it strips img class. transform (not rotate) + !important beats theme img { height:auto } overrides. */ a.logo > img { position: relative !important; top: -11px !important; left: 9px !important; transform: rotate(-38deg) !important; height: 1.15em !important; width: auto !important; max-width: none !important; flex-shrink: 0; display: block; object-fit: contain; margin-right: 10px; } .logo span { color: #C8A96E; } .nav-links { display: flex; gap: 28px; list-style: none; } .nav-links a { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,237,230,0.55); text-decoration: none; } .nav-links a:hover, .nav-links a.active { color: #C8A96E; } .nav-socials { display: flex; gap: 16px; } .nav-socials a { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,237,230,0.35); text-decoration: none; } .nav-socials a:hover { color: #C8A96E; } /* YouTube nav SVG: white rectangle; dark play triangle for contrast on #0A0A0A nav */ .nav-socials a[aria-label="YouTube"] svg path:first-of-type { fill: #fff !important; } .nav-socials a[aria-label="YouTube"] svg path:last-of-type { fill: #0A0A0A !important; } /* Mobile nav: shared by all Elementor pastes (stories, blog post, etc. load kempire-all.css only). Words like "Menu" are visually replaced by a gold hamburger; desktop hides the control. */ .nav-toggle { display: none; box-sizing: border-box; font-size: 0; line-height: 0; color: transparent; background: transparent; border: 1px solid rgba(200, 169, 110, 0.55); width: 44px; height: 40px; padding: 0; cursor: pointer; position: relative; flex-shrink: 0; font-family: inherit; -webkit-appearance: none; appearance: none; } .nav-toggle:focus-visible { outline: 2px solid rgba(200, 169, 110, 0.55); outline-offset: 2px; } .nav-toggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin-left: -9px; margin-top: -7px; background: #c8a96e; box-shadow: 0 6px 0 #c8a96e, 0 12px 0 #c8a96e; pointer-events: none; } @media (width < 640px) { nav { position: relative; flex-wrap: wrap; justify-content: space-between !important; align-items: center; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } nav .nav-links, nav .nav-socials { display: none !important; } nav.nav-open .nav-links { display: flex !important; width: 100%; margin-top: 10px; padding: 14px 14px 10px; border: 1px solid rgba(200, 169, 110, 0.35); border-bottom: none; background: #111; flex-direction: column; align-items: flex-start; gap: 12px; } nav.nav-open .nav-socials { display: flex !important; width: 100%; padding: 0 14px 14px; border: 1px solid rgba(200, 169, 110, 0.35); border-top: none; background: #111; justify-content: flex-start; gap: 14px; } nav.nav-open .nav-links a, nav.nav-open .nav-socials a { font-size: 11px; letter-spacing: 0.14em; } } /* --- Ticker (used by Home, Shop) --- */ .ticker { padding: 12px 0; border-bottom: 0.5px solid rgba(240,237,230,0.1); overflow: hidden; white-space: nowrap; } .ticker-inner { display: inline-block; animation: tick 30s linear infinite; } .ticker-inner span { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,237,230,0.3); padding: 0 40px; } .ticker-inner span b { color: #C8A96E; font-weight: 500; } @keyframes tick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* --- Button (canonical) --- */ .btn { display: inline-block; padding: 14px 32px; border: 1px solid #C8A96E; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #C8A96E; text-decoration: none; width: fit-content; transition: all 0.2s; } .btn:hover { background: #C8A96E; color: #0A0A0A; } .btn.solid { background: #C8A96E; color: #0A0A0A; } /* --- Ad slots (live AdSense only) --- Wrapper flex-centers the served ad iframe at whatever size AdSense returns. Unfilled slots collapse completely. No reserved height, no border, no label. */ .ad-slot.ad-live { display: flex; justify-content: center; align-items: center; background: transparent; border: 0; padding: 24px 0; margin: 0 auto; min-height: 0; } .ad-slot.ad-live .ad-slot-label { display: none; } .ad-slot.ad-live ins.adsbygoogle { display: inline-block !important; max-width: 100%; } ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; } .ad-slot.ad-live:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; } /* Diagnostics: Inspect each ins in DevTools — data-ad-status (filled vs unfilled). AdSense: Ads overview per unit — impressions vs unfilled ratio. Or add html.kempire-ads-debug temporarily to visualize unfilled slot boxes (below). */ html.kempire-ads-debug ins.adsbygoogle[data-ad-status="unfilled"] { display: block !important; min-height: 40px; outline: 2px dashed rgba(220, 100, 100, 0.7); background: rgba(220, 100, 100, 0.06); } html.kempire-ads-debug .ad-slot.ad-live:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: block !important; } /* --- Footer (universal) --- */ footer { border-top: 0.5px solid rgba(240,237,230,0.1); padding: 56px 48px 32px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; } .f-logo { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 900; letter-spacing: 0.06em; color: #F0EDE6; margin-bottom: 14px; text-decoration: none; display: block; } .f-logo span { color: #C8A96E; } .f-copy { font-size: 11px; color: rgba(240,237,230,0.3); line-height: 1.7; font-weight: 300; } .f-col-title { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,237,230,0.35); margin-bottom: 16px; } .f-links { list-style: none; } .f-links li { margin-bottom: 10px; } .f-links a { font-size: 12px; color: rgba(240,237,230,0.5); text-decoration: none; } .f-links a:hover { color: #C8A96E; } .footer-bar { padding: 18px 48px; border-top: 0.5px solid rgba(240,237,230,0.06); display: flex; justify-content: space-between; } .footer-bar p { font-size: 10px; color: rgba(240,237,230,0.2); letter-spacing: 0.06em; } /* ============================================================ 2. PAGE: HOME (.kempire-home-page) ============================================================ */ /* --- Hero --- */ .kempire-home-page .hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 88vh; border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-home-page .hero-img { position: relative; overflow: hidden; background: #111; } .kempire-home-page .hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; filter: brightness(0.88); } .kempire-home-page .hero-fade { position: absolute; inset: 0; background: linear-gradient(to right, transparent 50%, #0A0A0A 100%); } .kempire-home-page .hero-content { padding: 80px 56px; display: flex; flex-direction: column; justify-content: center; } .kempire-home-page .eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 24px; } .kempire-home-page .headline { font-family: 'Playfair Display', serif; font-size: clamp(48px, 5vw, 76px); font-weight: 900; line-height: 0.95; color: #F0EDE6; margin-bottom: 24px; letter-spacing: -0.02em; } .kempire-home-page .headline em { font-style: italic; color: #C8A96E; display: block; } .kempire-home-page .hero-body { font-size: 14px; color: rgba(240,237,230,0.5); line-height: 1.8; font-weight: 300; max-width: 360px; margin-bottom: 40px; } /* --- Topic Filter Bar --- */ .kempire-home-page .topics { display: flex; border-bottom: 0.5px solid rgba(240,237,230,0.1); overflow-x: auto; padding: 0 48px; } .kempire-home-page .topic { flex-shrink: 0; padding: 14px 24px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,237,230,0.4); cursor: pointer; border-right: 0.5px solid rgba(240,237,230,0.08); white-space: nowrap; position: relative; transition: color 0.25s ease, transform 0.18s ease; } .kempire-home-page .topic::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -0.5px; height: 1px; background: #C8A96E; transform: scaleX(0); transform-origin: center; opacity: 0; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; pointer-events: none; } .kempire-home-page .topic:first-child { padding-left: 0; } .kempire-home-page .topic:first-child::after { left: 0; } .kempire-home-page .topic.active, .kempire-home-page .topic:hover { color: #C8A96E; } .kempire-home-page .topic.active::after { transform: scaleX(1); opacity: 1; } .kempire-home-page .topic:active { transform: scale(0.97); } /* --- Section header --- */ .kempire-home-page .sec-header { display: flex; align-items: baseline; justify-content: space-between; padding: 48px 48px 32px; } .kempire-home-page .sec-title { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; color: #F0EDE6; } .kempire-home-page .sec-link { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #C8A96E; text-decoration: none; } /* --- Post feed --- */ .kempire-home-page .feed { padding: 0 48px 64px; display: flex; flex-direction: column; gap: 24px; transition: opacity 0.22s ease, min-height 0.4s ease; } .kempire-home-page .feed.is-loading { opacity: 0; pointer-events: none; } .kempire-home-page .post-card { display: grid; grid-template-columns: 1fr 1fr; border: 0.5px solid rgba(240,237,230,0.1); cursor: pointer; transition: border-color 0.2s; } .kempire-home-page .post-card:hover { border-color: rgba(200,169,110,0.4); } .kempire-home-page .post-card.reverse { direction: rtl; } .kempire-home-page .post-card.reverse > * { direction: ltr; } @keyframes kempireCardIn { from { opacity: 0; } to { opacity: 1; } } .kempire-home-page .feed .kf-card { opacity: 0; animation: kempireCardIn 0.45s ease-out forwards; animation-delay: calc(var(--kf-i, 0) * 80ms); will-change: opacity; } @media (prefers-reduced-motion: reduce) { .kempire-home-page .feed, .kempire-home-page .feed.is-loading, .kempire-home-page .feed .kf-card, .kempire-home-page .topic, .kempire-home-page .topic::after { transition: none !important; animation: none !important; } .kempire-home-page .feed.is-loading { opacity: 1; } .kempire-home-page .feed .kf-card { opacity: 1; } .kempire-home-page .topic.active::after { opacity: 1; transform: scaleX(1); } } .kempire-home-page .blog-side { padding: 36px; display: flex; flex-direction: column; justify-content: space-between; border-right: 0.5px solid rgba(240,237,230,0.08); } .kempire-home-page .post-card.reverse .blog-side { border-right: none; border-left: 0.5px solid rgba(240,237,230,0.08); } /* Latest Stories feed (#yt-feature-feed): renderPostCard uses .post-card-body + .post-card-vid / .vid-thumb-sm */ .kempire-home-page .post-card-body { padding: 36px; display: flex; flex-direction: column; justify-content: space-between; border-right: 0.5px solid rgba(240,237,230,0.08); } .kempire-home-page .post-card.reverse .post-card-body { border-right: none; border-left: 0.5px solid rgba(240,237,230,0.08); } .kempire-home-page .post-card-vid { background: #0f0f0f; display: flex; flex-direction: column; min-width: 0; align-self: stretch; } .kempire-home-page .vid-thumb-sm { flex: none; width: 100%; aspect-ratio: 16 / 9; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; background-size: cover !important; background-position: center center; } .kempire-home-page .post-meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .kempire-home-page .post-date, .kempire-home-page .post-read { font-size: 10px; color: rgba(240,237,230,0.3); } .kempire-home-page .vid-meta-sm { padding: 10px 12px; border-top: 0.5px solid rgba(240,237,230,0.06); } .kempire-home-page .vid-meta-label { font-size: 7px; letter-spacing: 0.16em; text-transform: uppercase; color: #c8a96e; margin-bottom: 4px; } .kempire-home-page .vid-meta-views { font-size: 9px; color: rgba(240,237,230,0.3); } .kempire-home-page .post-cat { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #C8A96E; margin-bottom: 14px; } .kempire-home-page .post-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; line-height: 1.2; color: #F0EDE6; margin-bottom: 14px; } .kempire-home-page .post-excerpt { font-size: 12px; color: rgba(240,237,230,0.45); line-height: 1.7; font-weight: 300; } .kempire-home-page .post-meta { font-size: 10px; color: rgba(240,237,230,0.3); letter-spacing: 0.06em; display: flex; gap: 14px; margin-top: 20px; } .kempire-home-page .blog-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 0.5px solid rgba(240,237,230,0.08); margin-top: 20px; } .kempire-home-page .blog-cta { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #C8A96E; } .kempire-home-page .vid-badge-sm { font-size: 9px; letter-spacing: 0.1em; color: rgba(200,169,110,0.5); text-transform: uppercase; } /* --- Video Side --- */ .kempire-home-page .vid-side { background: #111; display: flex; flex-direction: column; } .kempire-home-page .vid-thumb { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 200px; background: #0F0F0F; position: relative; } .kempire-home-page .vid-lbl { position: absolute; top: 14px; left: 14px; font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,237,230,0.4); border: 0.5px solid rgba(240,237,230,0.15); padding: 4px 10px; } .kempire-home-page .play { width: 52px; height: 52px; border: 1.5px solid rgba(200,169,110,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .kempire-home-page .tri { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 17px solid #C8A96E; margin-left: 4px; } .kempire-home-page .vid-info { padding: 18px 22px; border-top: 0.5px solid rgba(240,237,230,0.08); } .kempire-home-page .vid-label2 { font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: #C8A96E; margin-bottom: 6px; } .kempire-home-page .vid-title { font-size: 13px; font-weight: 500; color: #F0EDE6; line-height: 1.4; margin-bottom: 6px; } .kempire-home-page .vid-meta { font-size: 10px; color: rgba(240,237,230,0.3); } /* --- Podcast Section --- */ .kempire-home-page .podcast { display: grid; grid-template-columns: 280px 1fr; border-top: 0.5px solid rgba(240,237,230,0.1); } .kempire-home-page .pod-left { background: #C8A96E; padding: 52px 36px; display: flex; flex-direction: column; gap: 14px; } .kempire-home-page .pod-eyebrow { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(10,10,10,0.55); } .kempire-home-page .pod-name { font-family: 'Playfair Display', serif; font-size: clamp(16px, 3.2vw, 26px); font-weight: 900; color: #0A0A0A; line-height: 1.15; } .kempire-home-page .pod-sub { font-size: 12px; color: rgba(10,10,10,0.6); line-height: 1.6; font-weight: 300; flex: 1; } .kempire-home-page .pod-btn { display: inline-block; padding: 11px 22px; border: 1px solid #0A0A0A; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #0A0A0A; text-decoration: none; width: fit-content; margin-top: 8px; } .kempire-home-page .pod-right { padding: 36px 48px; display: flex; flex-direction: column; } .kempire-home-page .ep { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 0.5px solid rgba(240,237,230,0.08); cursor: pointer; } .kempire-home-page a.ep { text-decoration: none; color: inherit; } .kempire-home-page a.ep:focus-visible { outline: 2px solid rgba(200, 169, 110, 0.65); outline-offset: 2px; } .kempire-home-page .ep:last-child { border-bottom: none; } .kempire-home-page .ep:hover .ep-title { color: #C8A96E; } .kempire-home-page .ep-num { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 900; color: rgba(200,169,110,0.2); min-width: 44px; } .kempire-home-page .ep-title { font-size: 14px; font-weight: 500; color: #F0EDE6; transition: color 0.2s; line-height: 1.3; } .kempire-home-page .ep-dur { margin-left: auto; font-size: 10px; color: rgba(240,237,230,0.3); white-space: nowrap; } /* ============================================================ 3. PAGE: ABOUT (.kempire-about-page) ============================================================ */ /* About has a non-sticky nav */ .kempire-about-page nav { position: static; } .kempire-about-page .page-header { padding: 80px 48px 0; border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .page-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 16px; } .kempire-about-page .page-title { font-family: "Playfair Display", serif; font-size: clamp(52px, 7vw, 96px); font-weight: 900; line-height: 0.9; color: #F0EDE6; padding-bottom: 48px; letter-spacing: -0.02em; } .kempire-about-page .page-title em { font-style: italic; color: #C8A96E; } .kempire-about-page .about-main { display: grid; grid-template-columns: 420px 1fr; min-height: 600px; border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .about-img { overflow: hidden; background: #111; position: relative; } .kempire-about-page .about-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; display: block; } .kempire-about-page .about-img-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, transparent, #0A0A0A); } .kempire-about-page .about-content { padding: 64px; display: flex; flex-direction: column; justify-content: center; border-left: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .rule { width: 48px; height: 1px; background: #C8A96E; margin-bottom: 28px; } .kempire-about-page .about-name { font-family: "Playfair Display", serif; font-size: 36px; font-weight: 900; color: #F0EDE6; margin-bottom: 6px; } .kempire-about-page .about-role { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #C8A96E; margin-bottom: 32px; } .kempire-about-page .about-text { font-size: 14px; color: rgba(240, 237, 230, 0.6); line-height: 1.9; font-weight: 300; max-width: 520px; } .kempire-about-page .about-text p { margin-bottom: 20px; } .kempire-about-page .about-text p:last-child { margin-bottom: 0; } .kempire-about-page .about-crown { width: 72px; height: auto; margin-bottom: 20px; display: block; } .kempire-about-page .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .stat-item { padding: 40px 48px; border-right: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .stat-item:last-child { border-right: none; } .kempire-about-page .stat-num { font-family: "Playfair Display", serif; font-size: 48px; font-weight: 900; color: #C8A96E; line-height: 1; margin-bottom: 8px; } .kempire-about-page .stat-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 237, 230, 0.4); } .kempire-about-page .what-section { padding: 80px 48px; border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .what-title { font-family: "Playfair Display", serif; font-size: 32px; font-weight: 700; color: #F0EDE6; margin-bottom: 48px; } .kempire-about-page .what-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 0.5px solid rgba(240, 237, 230, 0.1); border-left: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .what-card { padding: 36px; border-right: 0.5px solid rgba(240, 237, 230, 0.1); border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .what-num { font-family: "Playfair Display", serif; font-size: 56px; font-weight: 900; color: rgba(200, 169, 110, 0.1); margin-bottom: 16px; line-height: 1; } .kempire-about-page .what-card-title { font-family: "Playfair Display", serif; font-size: 20px; font-weight: 700; color: #F0EDE6; margin-bottom: 12px; } .kempire-about-page .what-card-body { font-size: 12px; color: rgba(240, 237, 230, 0.45); line-height: 1.7; font-weight: 300; } .kempire-about-page .cta { padding: 100px 48px; display: flex; align-items: center; justify-content: space-between; gap: 60px; border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .cta-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 16px; } .kempire-about-page .cta-title { font-family: "Playfair Display", serif; font-size: clamp(36px, 4vw, 58px); font-weight: 900; color: #F0EDE6; line-height: 1; margin-bottom: 20px; } .kempire-about-page .cta-title em { font-style: italic; color: #C8A96E; } .kempire-about-page .cta-body { font-size: 13px; color: rgba(240, 237, 230, 0.5); line-height: 1.7; max-width: 400px; font-weight: 300; } .kempire-about-page .cta-btns { display: flex; gap: 16px; flex-shrink: 0; } /* ============================================================ 4. PAGE: BLOGPOST (.kempire-blogpost-page) ============================================================ */ .kempire-blogpost-page .article-header { padding: 40px 48px 0; max-width: 900px; } .kempire-blogpost-page .breadcrumb { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,237,230,0.35); margin-bottom: 20px; } .kempire-blogpost-page .breadcrumb span { color: #C8A96E; } .kempire-blogpost-page .article-cat { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #C8A96E; margin-bottom: 20px; display: block; } .kempire-blogpost-page .article-title { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4vw, 52px); font-weight: 900; line-height: 1.1; color: #F0EDE6; margin-bottom: 24px; } .kempire-blogpost-page .article-meta { display: flex; align-items: center; gap: 20px; padding-bottom: 40px; border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-blogpost-page .meta-date, .kempire-blogpost-page .meta-read { font-size: 11px; color: rgba(240,237,230,0.4); letter-spacing: 0.08em; } .kempire-blogpost-page .meta-div { width: 1px; height: 12px; background: rgba(240,237,230,0.15); } .kempire-blogpost-page .meta-pill { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #C8A96E; border: 0.5px solid rgba(200,169,110,0.4); padding: 4px 12px; } .kempire-blogpost-page .video-block { margin: 0 48px; border: 0.5px solid rgba(240,237,230,0.1); } .kempire-blogpost-page .video-thumb { background: #111; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; position: relative; } .kempire-blogpost-page .video-label { position: absolute; top: 20px; left: 20px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; background: #C8A96E; color: #0A0A0A; padding: 6px 14px; font-weight: 500; } .kempire-blogpost-page .play-lg { width: 72px; height: 72px; border: 2px solid rgba(200,169,110,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .kempire-blogpost-page .tri-lg { width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 24px solid #C8A96E; margin-left: 6px; } .kempire-blogpost-page .video-caption { padding: 16px 20px; border-top: 0.5px solid rgba(240,237,230,0.1); display: flex; align-items: center; justify-content: space-between; } .kempire-blogpost-page .video-caption-text { font-size: 12px; color: rgba(240,237,230,0.5); } .kempire-blogpost-page .video-link { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #C8A96E; text-decoration: none; } .kempire-blogpost-page .content-wrapper { display: grid; grid-template-columns: 1fr 300px; gap: 0; padding: 0 48px; align-items: start; } .kempire-blogpost-page .article-body { padding: 48px 48px 48px 0; border-right: 0.5px solid rgba(240,237,230,0.08); } .kempire-blogpost-page .article-body p { font-size: 15px; color: rgba(240,237,230,0.7); line-height: 1.9; font-weight: 300; margin-bottom: 24px; } .kempire-blogpost-page .article-body h2 { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: #F0EDE6; margin: 40px 0 16px; } .kempire-blogpost-page .pull-quote { border-left: 3px solid #C8A96E; padding: 20px 32px; margin: 40px 0; background: rgba(200,169,110,0.04); } .kempire-blogpost-page .pull-quote p { font-family: 'Playfair Display', serif; font-size: 20px; font-style: italic; color: #F0EDE6; line-height: 1.5; font-weight: 700; margin: 0; } .kempire-blogpost-page .sidebar { padding: 48px 0 48px 36px; display: flex; flex-direction: column; gap: 32px; } .kempire-blogpost-page .sidebar-section-title { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240,237,230,0.35); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 0.5px solid rgba(240,237,230,0.08); } .kempire-blogpost-page .sidebar-post { padding: 14px 0; border-bottom: 0.5px solid rgba(240,237,230,0.06); cursor: pointer; } .kempire-blogpost-page .sidebar-post:last-child { border-bottom: none; } .kempire-blogpost-page .sidebar-post-cat { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #C8A96E; margin-bottom: 6px; } .kempire-blogpost-page .sidebar-post-title { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; line-height: 1.3; color: rgba(240,237,230,0.7); } .kempire-blogpost-page .sidebar-post-title:hover { color: #F0EDE6; } /* Single post + Elementor pastes (.kempire-elementor-html-root): same centering + slot geometry as blog. Uses class-only rules in kempire-all.css so slots stay centered if Elementor strips data-kempire-ads-managed. */ .kempire-blogpost-page .ad-slot.ad-live, .kempire-elementor-html-root .ad-slot.ad-live { display: block; text-align: center; } .kempire-blogpost-page .ad-slot.ad-live ins.adsbygoogle, .kempire-elementor-html-root .ad-slot.ad-live ins.adsbygoogle { margin-left: auto; margin-right: auto; } /* Full-width row so leaderboards center in the column (watch / shop / tour). */ .kempire-blogpost-page .ad-slot.ad-live.ad-leaderboard, .kempire-blogpost-page .ad-slot.ad-live.ad-mid, .kempire-blogpost-page .ad-slot.ad-live.ad-footer, .kempire-elementor-html-root .ad-slot.ad-live.ad-leaderboard, .kempire-elementor-html-root .ad-slot.ad-live.ad-mid, .kempire-elementor-html-root .ad-slot.ad-live.ad-footer { width: 100%; max-width: 100%; box-sizing: border-box; } .kempire-blogpost-page .ad-slot.ad-live.ad-leaderboard ins.adsbygoogle, .kempire-blogpost-page .ad-slot.ad-live.ad-mid ins.adsbygoogle, .kempire-blogpost-page .ad-slot.ad-live.ad-footer ins.adsbygoogle, .kempire-elementor-html-root .ad-slot.ad-live.ad-leaderboard ins.adsbygoogle, .kempire-elementor-html-root .ad-slot.ad-live.ad-mid ins.adsbygoogle, .kempire-elementor-html-root .ad-slot.ad-live.ad-footer ins.adsbygoogle { display: block !important; width: 728px; max-width: 100%; min-width: 320px; min-height: 90px; } .kempire-blogpost-page .ad-slot.ad-live.ad-in-content ins.adsbygoogle, .kempire-blogpost-page .ad-slot.ad-live.ad-rect ins.adsbygoogle, .kempire-elementor-html-root .ad-slot.ad-live.ad-in-content ins.adsbygoogle, .kempire-elementor-html-root .ad-slot.ad-live.ad-rect ins.adsbygoogle { display: block !important; width: 336px; max-width: 100%; min-width: 300px; min-height: 280px; } .kempire-blogpost-page .ad-slot.ad-live.ad-sidebar-box ins.adsbygoogle, .kempire-blogpost-page .ad-slot.ad-live.ad-sidebar ins.adsbygoogle, .kempire-elementor-html-root .ad-slot.ad-live.ad-sidebar-box ins.adsbygoogle, .kempire-elementor-html-root .ad-slot.ad-live.ad-sidebar ins.adsbygoogle { display: block !important; width: 300px; max-width: 100%; min-height: 250px; } .kempire-blogpost-page .ad-slot.ad-live.ad-sidebar-tall ins.adsbygoogle, .kempire-elementor-html-root .ad-slot.ad-live.ad-sidebar-tall ins.adsbygoogle { display: block !important; width: 300px; max-width: 100%; min-height: 600px; } /* Elementor: HTML widget should span the column so %/max-width ads compute > 0 */ .elementor-widget-html .kempire-blogpost-page, .elementor-widget-html .kempire-elementor-html-root { width: 100%; max-width: 100%; box-sizing: border-box; } .kempire-blogpost-page .byline-wrap { padding: 0 48px 0; } .kempire-blogpost-page .byline { padding: 32px 36px; border: 0.5px solid rgba(240,237,230,0.1); display: flex; align-items: flex-start; gap: 22px; background: rgba(240,237,230,0.02); } .kempire-blogpost-page .byline-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid rgba(200,169,110,0.4); } .kempire-blogpost-page .byline-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .kempire-blogpost-page .byline-name { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: #F0EDE6; margin-bottom: 4px; } .kempire-blogpost-page .byline-role { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #C8A96E; margin-bottom: 10px; } .kempire-blogpost-page .byline-bio { font-size: 12px; color: rgba(240,237,230,0.45); line-height: 1.7; font-weight: 300; } .kempire-blogpost-page .more { padding: 40px 48px 64px; border-top: 0.5px solid rgba(240,237,230,0.1); } .kempire-blogpost-page .more-title { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: #F0EDE6; margin-bottom: 32px; } .kempire-blogpost-page .more-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 0.5px solid rgba(240,237,230,0.1); border-left: 0.5px solid rgba(240,237,230,0.1); } .kempire-blogpost-page .more-card { padding: 28px; border-right: 0.5px solid rgba(240,237,230,0.1); border-bottom: 0.5px solid rgba(240,237,230,0.1); cursor: pointer; } .kempire-blogpost-page .more-cat { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #C8A96E; margin-bottom: 10px; } .kempire-blogpost-page .more-card-title { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; line-height: 1.3; color: #F0EDE6; } /* ============================================================ 5. PAGE: PODCASTS (.kempire-podcasts-page) ============================================================ */ .kempire-podcasts-page .page-header { padding: 56px 48px 0; border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-podcasts-page .page-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 14px; } .kempire-podcasts-page .page-title { font-family: "Playfair Display", serif; font-size: clamp(48px, 6vw, 88px); font-weight: 900; line-height: 0.9; color: #F0EDE6; padding-bottom: 48px; letter-spacing: -0.02em; } .kempire-podcasts-page .page-title em { font-style: italic; color: #C8A96E; } .kempire-podcasts-page .show-hero { display: grid; grid-template-columns: 280px 1fr; border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-podcasts-page .show-art { background: #C8A96E; padding: 52px 40px; display: flex; flex-direction: column; justify-content: space-between; } .kempire-podcasts-page .show-art-label { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(10, 10, 10, 0.5); margin-bottom: 16px; } .kempire-podcasts-page .show-art-title { font-family: "Playfair Display", serif; font-size: clamp(17px, 3.8vw, 28px); font-weight: 900; color: #0A0A0A; line-height: 1.15; margin-bottom: 16px; } .kempire-podcasts-page .show-art-sub { font-size: 12px; color: rgba(10, 10, 10, 0.6); line-height: 1.6; font-weight: 300; } .kempire-podcasts-page .show-platforms { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; } .kempire-podcasts-page .platform-btn { display: inline-block; padding: 10px 20px; border: 1px solid #0A0A0A; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #0A0A0A; text-decoration: none; text-align: center; } .kempire-podcasts-page .platform-btn:hover { background: #0A0A0A; color: #C8A96E; } .kempire-podcasts-page .show-info { padding: 52px 56px; display: flex; flex-direction: column; justify-content: center; border-left: 0.5px solid rgba(240,237,230,0.1); } .kempire-podcasts-page .show-info-label { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: #C8A96E; margin-bottom: 16px; } .kempire-podcasts-page .show-info-title { font-family: "Playfair Display", serif; font-size: 32px; font-weight: 700; color: #F0EDE6; margin-bottom: 16px; } .kempire-podcasts-page .show-info-body { font-size: 14px; color: rgba(240,237,230,0.55); line-height: 1.8; font-weight: 300; max-width: 520px; margin-bottom: 28px; } .kempire-podcasts-page .show-stats { display: flex; gap: 36px; } .kempire-podcasts-page .show-stat-num { font-family: "Playfair Display", serif; font-size: 36px; font-weight: 900; color: #C8A96E; line-height: 1; } .kempire-podcasts-page .show-stat-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240,237,230,0.35); margin-top: 4px; } .kempire-podcasts-page .episodes-wrapper { display: grid; grid-template-columns: 1fr 300px; gap: 0; } .kempire-podcasts-page .episodes-main { padding: 0 48px; border-right: 0.5px solid rgba(240,237,230,0.08); } .kempire-podcasts-page .ep-header { display: flex; align-items: baseline; justify-content: space-between; padding: 48px 0 28px; border-bottom: 0.5px solid rgba(240,237,230,0.1); margin-bottom: 0; } .kempire-podcasts-page .ep-header-title { font-family: "Playfair Display", serif; font-size: 28px; font-weight: 700; color: #F0EDE6; } .kempire-podcasts-page .ep-row { display: flex; align-items: center; gap: 24px; padding: 28px 0; border-bottom: 0.5px solid rgba(240,237,230,0.08); cursor: pointer; } .kempire-podcasts-page a.ep-row { text-decoration: none; color: inherit; } .kempire-podcasts-page a.ep-row:focus-visible { outline: 2px solid rgba(200, 169, 110, 0.65); outline-offset: 2px; } .kempire-podcasts-page .ep-row:hover .ep-title { color: #C8A96E; } .kempire-podcasts-page .ep-num { font-family: "Playfair Display", serif; font-size: 36px; font-weight: 900; color: rgba(200, 169, 110, 0.15); min-width: 52px; line-height: 1; } .kempire-podcasts-page .ep-body { flex: 1; } .kempire-podcasts-page .ep-title { font-family: "Playfair Display", serif; font-size: 18px; font-weight: 700; color: #F0EDE6; line-height: 1.25; margin-bottom: 8px; transition: color 0.2s; } .kempire-podcasts-page .ep-desc { font-size: 12px; color: rgba(240,237,230,0.4); line-height: 1.6; font-weight: 300; } .kempire-podcasts-page .ep-meta { font-size: 10px; color: rgba(240,237,230,0.25); margin-top: 8px; letter-spacing: 0.06em; } .kempire-podcasts-page .ep-play { width: 44px; height: 44px; border: 1.5px solid rgba(200,169,110,0.35); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s; } .kempire-podcasts-page .ep-row:hover .ep-play { border-color: rgba(200, 169, 110, 0.7); } .kempire-podcasts-page .ep-tri { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid #C8A96E; margin-left: 3px; } .kempire-podcasts-page .pod-sidebar { padding: 48px 0 48px 36px; display: flex; flex-direction: column; gap: 32px; } .kempire-podcasts-page .sidebar-section-title { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240,237,230,0.35); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 0.5px solid rgba(240,237,230,0.08); } .kempire-podcasts-page .sub-cta { padding: 80px 48px; display: flex; align-items: center; justify-content: space-between; gap: 60px; border-top: 0.5px solid rgba(240,237,230,0.1); border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-podcasts-page .sub-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 14px; } .kempire-podcasts-page .sub-title { font-family: "Playfair Display", serif; font-size: clamp(32px, 4vw, 52px); font-weight: 900; color: #F0EDE6; line-height: 1; margin-bottom: 16px; } .kempire-podcasts-page .sub-title em { font-style: italic; color: #C8A96E; } .kempire-podcasts-page .sub-body { font-size: 13px; color: rgba(240,237,230,0.5); line-height: 1.7; max-width: 380px; font-weight: 300; } .kempire-podcasts-page .sub-btns { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; } .kempire-podcasts-page .sub-btn { display: inline-block; padding: 13px 28px; border: 1px solid #C8A96E; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #C8A96E; text-decoration: none; text-align: center; white-space: nowrap; } .kempire-podcasts-page .sub-btn.solid { background: #C8A96E; color: #0A0A0A; } /* ============================================================ 6. PAGE: SHOP (.kempire-shop-page) ============================================================ */ .kempire-shop-page .shop-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-shop-page .shop-hero-img { position: relative; overflow: hidden; background: #111; } .kempire-shop-page .shop-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; filter: brightness(0.75); } .kempire-shop-page .shop-hero-fade { position: absolute; inset: 0; background: linear-gradient(to right, transparent 45%, #0A0A0A 100%); } .kempire-shop-page .shop-hero-content { padding: 80px 56px; display: flex; flex-direction: column; justify-content: center; } .kempire-shop-page .eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 24px; } .kempire-shop-page .shop-headline { font-family: 'Playfair Display', serif; font-size: clamp(48px, 5vw, 76px); font-weight: 900; line-height: 0.95; color: #F0EDE6; margin-bottom: 24px; letter-spacing: -0.02em; } .kempire-shop-page .shop-headline em { font-style: italic; color: #C8A96E; display: block; } .kempire-shop-page .shop-sub { font-size: 14px; color: rgba(240,237,230,0.5); line-height: 1.8; font-weight: 300; max-width: 360px; margin-bottom: 16px; } .kempire-shop-page .shop-note { font-size: 11px; color: rgba(240,237,230,0.3); letter-spacing: 0.08em; margin-bottom: 40px; } .kempire-shop-page .filter-bar { display: flex; padding: 0 48px; border-bottom: 0.5px solid rgba(240,237,230,0.1); overflow-x: auto; } .kempire-shop-page .filter { flex-shrink: 0; padding: 14px 24px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,237,230,0.4); cursor: pointer; border-right: 0.5px solid rgba(240,237,230,0.08); white-space: nowrap; } .kempire-shop-page .filter:first-child { padding-left: 0; } .kempire-shop-page .filter.active, .kempire-shop-page .filter:hover { color: #C8A96E; } .kempire-shop-page .sec-header { display: flex; align-items: baseline; justify-content: space-between; padding: 48px 48px 32px; } .kempire-shop-page .sec-title { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; color: #F0EDE6; } .kempire-shop-page .sec-link { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #C8A96E; text-decoration: none; } .kempire-shop-page .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 0.5px solid rgba(240,237,230,0.1); border-left: 0.5px solid rgba(240,237,230,0.1); padding: 0 48px; } .kempire-shop-page .product-card { border-right: 0.5px solid rgba(240,237,230,0.1); border-bottom: 0.5px solid rgba(240,237,230,0.1); cursor: pointer; transition: background 0.2s; text-decoration: none; display: block; } .kempire-shop-page .product-card:hover { background: rgba(200,169,110,0.04); } .kempire-shop-page .product-img { width: 100%; aspect-ratio: 1/1; background: #141414; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .kempire-shop-page .product-img-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .kempire-shop-page .product-img-icon { width: 48px; height: 48px; border: 1px solid rgba(200,169,110,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .kempire-shop-page .product-img-icon svg { width: 20px; height: 20px; fill: none; stroke: rgba(200,169,110,0.4); stroke-width: 1.5; } .kempire-shop-page .product-img-text { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240,237,230,0.2); } .kempire-shop-page .product-badge { position: absolute; top: 14px; left: 14px; font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px; } .kempire-shop-page .product-badge.new { background: #C8A96E; color: #0A0A0A; font-weight: 500; } .kempire-shop-page .product-badge.bestseller { background: transparent; border: 0.5px solid rgba(200,169,110,0.5); color: #C8A96E; } .kempire-shop-page .product-info { padding: 22px 24px 28px; } .kempire-shop-page .product-cat { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,237,230,0.35); margin-bottom: 8px; } .kempire-shop-page .product-name { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: #F0EDE6; margin-bottom: 10px; line-height: 1.2; } .kempire-shop-page .product-desc { font-size: 12px; color: rgba(240,237,230,0.4); line-height: 1.6; font-weight: 300; margin-bottom: 16px; } .kempire-shop-page .product-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 0.5px solid rgba(240,237,230,0.08); } .kempire-shop-page .product-price { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #C8A96E; } .kempire-shop-page .product-cta { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(200,169,110,0.6); } .kempire-shop-page .product-featured { display: grid; grid-template-columns: 1fr 1fr; border-top: 0.5px solid rgba(240,237,230,0.1); border-bottom: 0.5px solid rgba(240,237,230,0.1); margin: 0 48px; text-decoration: none; transition: background 0.2s; } .kempire-shop-page .product-featured:hover { background: rgba(200,169,110,0.03); } .kempire-shop-page .featured-img { background: #141414; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border-right: 0.5px solid rgba(240,237,230,0.1); position: relative; } .kempire-shop-page .featured-info { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; } .kempire-shop-page .featured-eyebrow { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: #C8A96E; margin-bottom: 16px; } .kempire-shop-page .featured-name { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 900; color: #F0EDE6; line-height: 1.1; margin-bottom: 16px; } .kempire-shop-page .featured-desc { font-size: 13px; color: rgba(240,237,230,0.5); line-height: 1.8; font-weight: 300; margin-bottom: 28px; max-width: 400px; } .kempire-shop-page .featured-price { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 900; color: #C8A96E; margin-bottom: 28px; } .kempire-shop-page .shop-link { display: inline-block; padding: 14px 32px; border: 1px solid #C8A96E; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #C8A96E; text-decoration: none; width: fit-content; transition: all 0.2s; } .kempire-shop-page .shop-link:hover { background: #C8A96E; color: #0A0A0A; } .kempire-shop-page .fw-banner { margin: 0 48px; padding: 36px 48px; background: rgba(200,169,110,0.06); border: 0.5px solid rgba(200,169,110,0.2); display: flex; align-items: center; justify-content: space-between; gap: 40px; } .kempire-shop-page .fw-banner-text { flex: 1; } .kempire-shop-page .fw-banner-eyebrow { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: #C8A96E; margin-bottom: 10px; } .kempire-shop-page .fw-banner-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #F0EDE6; margin-bottom: 8px; } .kempire-shop-page .fw-banner-sub { font-size: 12px; color: rgba(240,237,230,0.45); line-height: 1.6; font-weight: 300; } .kempire-shop-page .fw-btn { display: inline-block; padding: 13px 28px; background: #C8A96E; border: 1px solid #C8A96E; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #0A0A0A; text-decoration: none; flex-shrink: 0; white-space: nowrap; font-weight: 500; transition: all 0.2s; } .kempire-shop-page .fw-btn:hover { background: transparent; color: #C8A96E; } .kempire-shop-page .newsletter { padding: 100px 48px; display: flex; align-items: center; justify-content: space-between; gap: 60px; border-top: 0.5px solid rgba(240,237,230,0.1); border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-shop-page .newsletter-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 16px; } .kempire-shop-page .newsletter-title { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4vw, 52px); font-weight: 900; color: #F0EDE6; line-height: 1; margin-bottom: 16px; } .kempire-shop-page .newsletter-title em { font-style: italic; color: #C8A96E; } .kempire-shop-page .newsletter-sub { font-size: 13px; color: rgba(240,237,230,0.5); line-height: 1.7; max-width: 380px; font-weight: 300; } .kempire-shop-page .newsletter-form { display: flex; gap: 0; flex-shrink: 0; } .kempire-shop-page .newsletter-input { padding: 14px 20px; background: transparent; border: 1px solid rgba(240,237,230,0.2); color: #F0EDE6; font-size: 13px; font-family: 'DM Sans', sans-serif; width: 280px; outline: none; } .kempire-shop-page .newsletter-input::placeholder { color: rgba(240,237,230,0.3); } .kempire-shop-page .newsletter-submit { padding: 14px 28px; background: #C8A96E; border: 1px solid #C8A96E; color: #0A0A0A; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-family: 'DM Sans', sans-serif; cursor: pointer; font-weight: 500; } /* ============================================================ 7. PAGE: TOUR (.kempire-tour-page) ============================================================ */ .kempire-tour-page .tour-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 60vh; border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-tour-page .tour-hero-img { position: relative; overflow: hidden; background: #111; } .kempire-tour-page .tour-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; filter: brightness(0.7); } .kempire-tour-page .tour-hero-fade { position: absolute; inset: 0; background: linear-gradient(to right, transparent 40%, #0A0A0A 100%); } .kempire-tour-page .tour-hero-content { padding: 80px 56px; display: flex; flex-direction: column; justify-content: center; } .kempire-tour-page .eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 20px; } .kempire-tour-page .tour-headline { font-family: 'Playfair Display', serif; font-size: clamp(44px, 5vw, 72px); font-weight: 900; line-height: 0.95; color: #F0EDE6; margin-bottom: 20px; letter-spacing: -0.02em; } .kempire-tour-page .tour-headline em { font-style: italic; color: #C8A96E; display: block; } .kempire-tour-page .tour-sub { font-size: 14px; color: rgba(240,237,230,0.5); line-height: 1.8; font-weight: 300; max-width: 360px; margin-bottom: 36px; } .kempire-tour-page .sec-header { display: flex; align-items: baseline; justify-content: space-between; padding: 56px 48px 32px; border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-tour-page .sec-title { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; color: #F0EDE6; } .kempire-tour-page .sec-note { font-size: 11px; color: rgba(240,237,230,0.35); letter-spacing: 0.08em; } .kempire-tour-page .events { padding: 0 48px 0; } .kempire-tour-page .event-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 40px; padding: 32px 0; border-bottom: 0.5px solid rgba(240,237,230,0.08); } .kempire-tour-page .event-row:last-child { border-bottom: none; } .kempire-tour-page .event-date { text-align: center; } .kempire-tour-page .event-month { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: #C8A96E; margin-bottom: 4px; } .kempire-tour-page .event-day { font-family: 'Playfair Display', serif; font-size: 48px; font-weight: 900; color: #F0EDE6; line-height: 1; } .kempire-tour-page .event-year { font-size: 10px; letter-spacing: 0.1em; color: rgba(240,237,230,0.3); margin-top: 4px; } .kempire-tour-page .event-divider { width: 0.5px; height: 60px; background: rgba(240,237,230,0.1); } .kempire-tour-page .event-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #F0EDE6; margin-bottom: 8px; } .kempire-tour-page .event-location { font-size: 13px; color: rgba(240,237,230,0.5); margin-bottom: 6px; } .kempire-tour-page .event-tags { display: flex; gap: 8px; margin-top: 10px; } .kempire-tour-page .event-tag { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(200,169,110,0.7); border: 0.5px solid rgba(200,169,110,0.3); padding: 3px 10px; } .kempire-tour-page .event-tag.sold-out { color: rgba(240,237,230,0.3); border-color: rgba(240,237,230,0.12); } .kempire-tour-page .ticket-btn { display: inline-block; padding: 12px 24px; border: 1px solid #C8A96E; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #C8A96E; text-decoration: none; white-space: nowrap; transition: all 0.2s; } .kempire-tour-page .ticket-btn:hover { background: #C8A96E; color: #0A0A0A; } .kempire-tour-page .ticket-btn.sold { border-color: rgba(240,237,230,0.15); color: rgba(240,237,230,0.25); pointer-events: none; } .kempire-tour-page .past-section { padding: 0 48px 64px; border-top: 0.5px solid rgba(240,237,230,0.1); } .kempire-tour-page .past-header { padding: 48px 0 28px; } .kempire-tour-page .past-title { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: #F0EDE6; } .kempire-tour-page .past-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 0.5px solid rgba(240,237,230,0.1); border-left: 0.5px solid rgba(240,237,230,0.1); } .kempire-tour-page .past-card { padding: 28px; border-right: 0.5px solid rgba(240,237,230,0.1); border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-tour-page .past-date { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,237,230,0.3); margin-bottom: 10px; } .kempire-tour-page .past-city { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: rgba(240,237,230,0.5); margin-bottom: 6px; } .kempire-tour-page .past-venue { font-size: 12px; color: rgba(240,237,230,0.3); } .kempire-tour-page .notify { padding: 100px 48px; display: flex; align-items: center; justify-content: space-between; gap: 60px; border-top: 0.5px solid rgba(240,237,230,0.1); border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-tour-page .notify-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 16px; } .kempire-tour-page .notify-title { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4vw, 52px); font-weight: 900; color: #F0EDE6; line-height: 1; margin-bottom: 16px; } .kempire-tour-page .notify-title em { font-style: italic; color: #C8A96E; } .kempire-tour-page .notify-sub { font-size: 13px; color: rgba(240,237,230,0.5); line-height: 1.7; max-width: 380px; font-weight: 300; } .kempire-tour-page .notify-form { display: flex; gap: 0; flex-shrink: 0; } .kempire-tour-page .notify-input { padding: 14px 20px; background: transparent; border: 1px solid rgba(240,237,230,0.2); color: #F0EDE6; font-size: 13px; font-family: 'DM Sans', sans-serif; width: 280px; outline: none; } .kempire-tour-page .notify-input::placeholder { color: rgba(240,237,230,0.3); } .kempire-tour-page .notify-submit { padding: 14px 28px; background: #C8A96E; border: 1px solid #C8A96E; color: #0A0A0A; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-family: 'DM Sans', sans-serif; cursor: pointer; } /* ============================================================ 8. PAGE: WATCH (.kempire-watch-page) ============================================================ */ .kempire-watch-page .page-header { padding: 56px 48px 0; border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-watch-page .page-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 14px; } .kempire-watch-page .page-title { font-family: "Playfair Display", serif; font-size: clamp(48px, 6vw, 88px); font-weight: 900; line-height: 0.9; color: #F0EDE6; padding-bottom: 48px; letter-spacing: -0.02em; } .kempire-watch-page .page-title em { font-style: italic; color: #C8A96E; } .kempire-watch-page .featured, .kempire-watch-page a.featured.featured-whole-link { display: grid; grid-template-columns: minmax(0, 50%) minmax(280px, 1fr); border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-watch-page a.featured.featured-whole-link { color: inherit; text-decoration: none; cursor: pointer; } .kempire-watch-page div.featured .featured-thumb { cursor: pointer; } .kempire-watch-page div.featured:hover .featured-thumb:not(.is-playing) { filter: brightness(1.06); } .kempire-watch-page div.featured:hover .watch-btn { background: rgba(200, 169, 110, 0.12); } .kempire-watch-page a.featured.featured-whole-link:hover .featured-thumb { filter: brightness(1.06); } .kempire-watch-page a.featured.featured-whole-link:hover .watch-btn { background: rgba(200, 169, 110, 0.12); } .kempire-watch-page a.featured.featured-whole-link:focus-visible { outline: 2px solid rgba(200, 169, 110, 0.65); outline-offset: 3px; } .kempire-watch-page div.featured:focus-within .featured-thumb[role="button"]:focus-visible { outline: 2px solid rgba(200, 169, 110, 0.65); outline-offset: 2px; } .kempire-watch-page .featured-thumb { background: #111; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; position: relative; border-right: 0.5px solid rgba(240, 237, 230, 0.1); overflow: hidden; } .kempire-watch-page .featured-thumb .featured-youtube-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .kempire-watch-page .featured-badge { position: absolute; top: 20px; left: 20px; background: #C8A96E; color: #0A0A0A; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 14px; font-weight: 500; } .kempire-watch-page .play-xl { width: 80px; height: 80px; border: 2px solid rgba(200, 169, 110, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .kempire-watch-page .tri-xl { width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 28px solid #C8A96E; margin-left: 6px; } .kempire-watch-page .featured-info { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; } .kempire-watch-page .featured-cat { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #C8A96E; margin-bottom: 16px; } .kempire-watch-page .featured-title { font-family: "Playfair Display", serif; font-size: 26px; font-weight: 700; line-height: 1.2; color: #F0EDE6; margin-bottom: 16px; } .kempire-watch-page .featured-desc { font-size: 13px; color: rgba(240, 237, 230, 0.5); line-height: 1.7; font-weight: 300; margin-bottom: 28px; } .kempire-watch-page .featured-meta { font-size: 10px; color: rgba(240, 237, 230, 0.3); margin-bottom: 28px; letter-spacing: 0.06em; } .kempire-watch-page .watch-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; border: 1px solid #C8A96E; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #C8A96E; text-decoration: none; width: fit-content; box-sizing: border-box; } .kempire-watch-page a.watch-btn { text-decoration: none; } .kempire-watch-page span.watch-btn { pointer-events: none; } .kempire-watch-page .filter-bar { display: flex; flex-wrap: wrap; row-gap: 8px; padding: 0 48px; border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-watch-page .filter { flex-shrink: 0; padding: 14px 24px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 237, 230, 0.4); cursor: pointer; border-right: 0.5px solid rgba(240, 237, 230, 0.08); white-space: nowrap; } .kempire-watch-page .filter:first-child { padding-left: 0; } .kempire-watch-page .filter.active, .kempire-watch-page .filter:hover { color: #C8A96E; } .kempire-watch-page .sec-header { display: flex; align-items: baseline; justify-content: space-between; padding: 48px 48px 28px; } .kempire-watch-page .sec-title { font-family: "Playfair Display", serif; font-size: 28px; font-weight: 700; color: #F0EDE6; } .kempire-watch-page .sec-link { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #C8A96E; text-decoration: none; } .kempire-watch-page .vid-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 100%; box-sizing: border-box; border-top: 0.5px solid rgba(240, 237, 230, 0.1); padding: 20px 48px 0; } .kempire-watch-page .vid-card { border: 0.5px solid rgba(240, 237, 230, 0.1); cursor: pointer; transition: background 0.2s; min-width: 0; } .kempire-watch-page .vid-card:hover { background: rgba(200, 169, 110, 0.03); } .kempire-watch-page .vid-thumb-sm { width: 100%; aspect-ratio: 16/9; background: #111; display: flex; align-items: center; justify-content: center; position: relative; background-size: cover; background-position: center; } .kempire-watch-page .vid-thumb-sm:hover .play-sm { border-color: rgba(200, 169, 110, 0.8); } .kempire-watch-page .play-sm { width: 40px; height: 40px; border: 1.5px solid rgba(200, 169, 110, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; } .kempire-watch-page .tri-sm { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #C8A96E; margin-left: 3px; } .kempire-watch-page .vid-card-info { padding: 20px 22px 24px; } .kempire-watch-page .vid-card-cat { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #C8A96E; margin-bottom: 8px; } .kempire-watch-page .vid-card-title { font-family: "Playfair Display", serif; font-size: 16px; font-weight: 700; line-height: 1.3; color: #F0EDE6; margin-bottom: 10px; } .kempire-watch-page .vid-card-meta { font-size: 10px; color: rgba(240, 237, 230, 0.3); letter-spacing: 0.06em; } .kempire-watch-page .yt-cta { padding: 80px 48px; display: flex; align-items: center; justify-content: space-between; gap: 60px; border-top: 0.5px solid rgba(240, 237, 230, 0.1); border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-watch-page .yt-cta-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 14px; } .kempire-watch-page .yt-cta-title { font-family: "Playfair Display", serif; font-size: clamp(32px, 4vw, 52px); font-weight: 900; color: #F0EDE6; line-height: 1; margin-bottom: 16px; } .kempire-watch-page .yt-cta-title em { font-style: italic; color: #C8A96E; } .kempire-watch-page .yt-cta-sub { font-size: 13px; color: rgba(240, 237, 230, 0.5); line-height: 1.7; max-width: 400px; font-weight: 300; } .kempire-watch-page .yt-btn { display: inline-block; padding: 14px 32px; background: #C8A96E; border: 1px solid #C8A96E; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #0A0A0A; text-decoration: none; flex-shrink: 0; } /* ============================================================ 9. PAGE: STORIES (.kempire-stories-page) ============================================================ */ /* Remove Elementor default column padding (10px) around Stories HTML widget */ .elementor-column-gap-default > .elementor-column > .elementor-element-populated:has(.kempire-stories-page) { padding: 0 !important; } .kempire-stories-page { box-sizing: border-box; font-family: "DM Sans", sans-serif; background: #0A0A0A; color: #F0EDE6; } .kempire-stories-page *, .kempire-stories-page *::before, .kempire-stories-page *::after { box-sizing: border-box; margin: 0; padding: 0; } .kempire-stories-page .ad-leaderboard { margin: 24px 48px 0; } .kempire-stories-page .ad-mid { margin: 0 48px; } .kempire-stories-page .ad-footer { margin: 0 48px; } .kempire-stories-page .ad-slot.ad-live { display: block; background: transparent; border: 0; padding: 0; margin: 32px auto; text-align: center; } .kempire-stories-page .ad-slot.ad-live .ad-slot-label { display: none; } .kempire-stories-page .page-header { padding: 64px 48px 0; border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-stories-page .page-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 14px; } .kempire-stories-page .page-title { font-family: 'Playfair Display', serif; font-size: clamp(52px, 7vw, 96px); font-weight: 900; line-height: 0.9; color: #F0EDE6; padding-bottom: 48px; letter-spacing: -0.02em; } .kempire-stories-page .page-title em { font-style: italic; color: #C8A96E; } .kempire-stories-page .filter-bar { display: flex; padding: 0 48px; border-bottom: 0.5px solid rgba(240,237,230,0.1); overflow-x: auto; } .kempire-stories-page .filter { flex-shrink: 0; padding: 14px 24px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,237,230,0.4); cursor: pointer; border-right: 0.5px solid rgba(240,237,230,0.08); white-space: nowrap; } .kempire-stories-page .filter:first-child { padding-left: 0; } .kempire-stories-page .filter.active, .kempire-stories-page .filter:hover { color: #C8A96E; } .kempire-stories-page .kempire-stories-loading-shell { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 48px 24px; min-height: 160px; color: rgba(240,237,230,0.45); font-size: 12px; letter-spacing: 0.06em; } .kempire-stories-page a.featured-story .kempire-stories-loading-shell.is-featured { grid-column: 1 / -1; min-height: 280px; } .kempire-stories-page .kempire-stories-spinner { width: 28px; height: 28px; flex-shrink: 0; box-sizing: border-box; border: 2px solid rgba(200,169,110,0.2); border-top-color: #C8A96E; border-radius: 50%; animation: kempire-stories-spin 0.65s linear infinite; } @keyframes kempire-stories-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .kempire-stories-page .kempire-stories-spinner { animation: none; border-top-color: rgba(200,169,110,0.35); } } .kempire-stories-page .featured-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 0.5px solid rgba(240,237,230,0.1); text-decoration: none; transition: background 0.2s; } .kempire-stories-page .featured-story:hover { background: rgba(200,169,110,0.02); } .kempire-stories-page .featured-thumb { background: #111; position: relative; overflow: hidden; border-right: 0.5px solid rgba(240,237,230,0.1); min-width: 0; } .kempire-stories-page .featured-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: brightness(0.8); min-height: 420px; } .kempire-stories-page .featured-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.5) 0%, transparent 60%); } .kempire-stories-page .featured-badge { position: absolute; top: 20px; left: 20px; background: #C8A96E; color: #0A0A0A; font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 14px; font-weight: 500; } .kempire-stories-page .featured-info { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .kempire-stories-page .featured-cat { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #C8A96E; margin-bottom: 16px; } .kempire-stories-page .featured-title { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; line-height: 1.2; color: #F0EDE6; margin-bottom: 16px; } .kempire-stories-page .featured-excerpt { font-size: 13px; color: rgba(240,237,230,0.5); line-height: 1.7; font-weight: 300; margin-bottom: 24px; } .kempire-stories-page .featured-meta { font-size: 10px; color: rgba(240,237,230,0.3); letter-spacing: 0.08em; display: flex; gap: 16px; align-items: center; margin-bottom: 28px; } .kempire-stories-page .meta-div { width: 1px; height: 10px; background: rgba(240,237,230,0.15); } .kempire-stories-page .vid-pill { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: #C8A96E; border: 0.5px solid rgba(200,169,110,0.4); padding: 3px 10px; } .kempire-stories-page .read-link { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #C8A96E; display: flex; align-items: center; gap: 8px; } .kempire-stories-page .stories-wrapper { display: grid; grid-template-columns: 1fr 300px; gap: 0; padding: 0 48px; border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-stories-page .posts-col { border-right: 0.5px solid rgba(240,237,230,0.08); padding-right: 0; } .kempire-stories-page .posts-header { display: flex; align-items: baseline; justify-content: space-between; padding: 40px 0 28px; border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-stories-page .posts-title { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: #F0EDE6; } .kempire-stories-page .post-card { display: grid; grid-template-columns: 1fr 200px; border-bottom: 0.5px solid rgba(240,237,230,0.08); cursor: pointer; transition: background 0.2s; text-decoration: none; } .kempire-stories-page .post-card:last-child { border-bottom: none; } .kempire-stories-page .post-card:hover { background: rgba(200,169,110,0.02); } .kempire-stories-page .post-card-body { padding: 28px 28px 28px 0; display: flex; flex-direction: column; justify-content: space-between; border-right: 0.5px solid rgba(240,237,230,0.06); } .kempire-stories-page .post-cat { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #C8A96E; margin-bottom: 10px; } .kempire-stories-page .post-title { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; line-height: 1.25; color: #F0EDE6; margin-bottom: 10px; } .kempire-stories-page .post-excerpt { font-size: 12px; color: rgba(240,237,230,0.45); line-height: 1.6; font-weight: 300; margin-bottom: 14px; } .kempire-stories-page .post-meta-row { display: flex; align-items: center; gap: 12px; } .kempire-stories-page .post-date { font-size: 10px; color: rgba(240,237,230,0.3); letter-spacing: 0.06em; } .kempire-stories-page .post-read { font-size: 10px; color: rgba(240,237,230,0.3); } .kempire-stories-page .post-vid-tag { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(200,169,110,0.5); border: 0.5px solid rgba(200,169,110,0.25); padding: 2px 8px; } .kempire-stories-page .post-card-vid { background: #0F0F0F; display: flex; flex-direction: column; } .kempire-stories-page .vid-thumb-sm { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 110px; position: relative; } .kempire-stories-page .vid-lbl { position: absolute; top: 8px; left: 8px; font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240,237,230,0.35); border: 0.5px solid rgba(240,237,230,0.12); padding: 3px 7px; } .kempire-stories-page .play-xs { width: 32px; height: 32px; border: 1px solid rgba(200,169,110,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .kempire-stories-page .tri-xs { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #C8A96E; margin-left: 2px; } .kempire-stories-page .vid-meta-sm { padding: 10px 12px; border-top: 0.5px solid rgba(240,237,230,0.06); } .kempire-stories-page .vid-meta-label { font-size: 7px; letter-spacing: 0.16em; text-transform: uppercase; color: #C8A96E; margin-bottom: 4px; } .kempire-stories-page .vid-meta-views { font-size: 9px; color: rgba(240,237,230,0.3); } .kempire-stories-page .stories-sidebar { padding: 40px 0 40px 32px; display: flex; flex-direction: column; gap: 32px; } .kempire-stories-page .sidebar-title { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240,237,230,0.35); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 0.5px solid rgba(240,237,230,0.08); } .kempire-stories-page .sidebar-post { padding: 14px 0; border-bottom: 0.5px solid rgba(240,237,230,0.06); cursor: pointer; text-decoration: none; display: block; } .kempire-stories-page .sidebar-post:last-child { border-bottom: none; } .kempire-stories-page .sidebar-post:hover .sidebar-post-title { color: #C8A96E; } .kempire-stories-page .sidebar-post-cat { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #C8A96E; margin-bottom: 6px; } .kempire-stories-page .sidebar-post-title { font-family: 'Playfair Display', serif; font-size: 13px; font-weight: 700; line-height: 1.3; color: rgba(240,237,230,0.65); transition: color 0.2s; } .kempire-stories-page .author-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 36px 48px; border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-stories-page .author-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(200,169,110,0.4); flex-shrink: 0; } .kempire-stories-page .author-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .kempire-stories-page .author-name { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: #F0EDE6; margin-bottom: 4px; } .kempire-stories-page .author-role { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #C8A96E; margin-bottom: 6px; } .kempire-stories-page .author-bio { font-size: 12px; color: rgba(240,237,230,0.4); line-height: 1.6; font-weight: 300; } .kempire-stories-page .author-btn { display: inline-block; padding: 12px 24px; border: 1px solid #C8A96E; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #C8A96E; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: all 0.2s; } .kempire-stories-page .author-btn:hover { background: #C8A96E; color: #0A0A0A; } .kempire-stories-page .newsletter { padding: 80px 48px; display: flex; align-items: center; justify-content: space-between; gap: 60px; border-bottom: 0.5px solid rgba(240,237,230,0.1); } .kempire-stories-page .newsletter-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8A96E; margin-bottom: 14px; } .kempire-stories-page .newsletter-title { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 44px); font-weight: 900; color: #F0EDE6; line-height: 1; margin-bottom: 14px; } .kempire-stories-page .newsletter-title em { font-style: italic; color: #C8A96E; } .kempire-stories-page .newsletter-sub { font-size: 13px; color: rgba(240,237,230,0.5); line-height: 1.7; max-width: 380px; font-weight: 300; } .kempire-stories-page .newsletter-form { display: flex; flex-shrink: 0; } .kempire-stories-page .newsletter-input { padding: 14px 20px; background: transparent; border: 1px solid rgba(240,237,230,0.2); color: #F0EDE6; font-size: 13px; font-family: 'DM Sans', sans-serif; width: 260px; outline: none; } .kempire-stories-page .newsletter-input::placeholder { color: rgba(240,237,230,0.3); } .kempire-stories-page .newsletter-submit { padding: 14px 24px; background: #C8A96E; border: 1px solid #C8A96E; color: #0A0A0A; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-family: 'DM Sans', sans-serif; cursor: pointer; font-weight: 500; } /* Homepage embed: same .post-card markup; data-kempire-mode="home" in kempire-stories-wp.js */ .kempire-stories-page[data-kempire-mode="home"] { display: block; background: #0a0a0a; padding: 0; } .kempire-stories-page[data-kempire-mode="home"] .posts-col { border-right: none; max-width: 100%; } .kempire-stories-page[data-kempire-mode="home"] .posts-header { padding-top: 0; } .kempire-stories-page[data-kempire-mode="home"] .vid-thumb-sm { flex: none; width: 100%; aspect-ratio: 16 / 9; min-height: 0; background-size: cover !important; background-position: center center; } .kempire-stories-page[data-kempire-mode="home"] .post-card-vid { display: flex; flex-direction: column; } @media (max-width: 639px) { .kempire-stories-page[data-kempire-mode="home"] .post-card-vid { min-height: 140px; } } /* ============================================================ 10. RESPONSIVE — all media queries, page-scoped ============================================================ */ /* ---------- Mobile: 0px – 319px ---------- */ @media (min-width: 0px) and (width < 320px) { /* Common nav for all pages */ nav { flex-wrap: wrap; gap: 10px; justify-content: center; padding-top: 14px; padding-bottom: 14px; } .nav-links { width: 100%; justify-content: center; flex-wrap: wrap; gap: 10px 12px; } .nav-socials { width: 100%; justify-content: center; } footer { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; } .footer-bar { flex-direction: column; gap: 8px; padding-top: 12px; padding-bottom: 14px; } /* HOME */ .kempire-home-page nav, .kempire-home-page .topics, .kempire-home-page .sec-header, .kempire-home-page .feed, .kempire-home-page .pod-left, .kempire-home-page .pod-right, .kempire-home-page footer, .kempire-home-page .footer-bar { padding-left: 14px; padding-right: 14px; } .kempire-home-page .ticker-inner span { padding: 0 16px; letter-spacing: 0.12em; } .kempire-home-page .hero { grid-template-columns: 1fr; min-height: auto; } .kempire-home-page .hero-img { max-height: 420px; min-height: 260px; } .kempire-home-page .hero-fade { background: linear-gradient(to bottom, transparent 40%, #0A0A0A 100%); } .kempire-home-page .hero-content { padding: 30px 14px 36px; } .kempire-home-page .headline { font-size: clamp(32px, 12vw, 44px); } .kempire-home-page .hero-body { font-size: 12px; max-width: 100%; } .kempire-home-page .eyebrow, .kempire-home-page .post-cat, .kempire-home-page .blog-cta, .kempire-home-page .topic, .kempire-home-page .sec-link { letter-spacing: 0.12em; } .kempire-home-page .sec-header { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 28px; padding-bottom: 16px; } .kempire-home-page .sec-title { font-size: 24px; } .kempire-home-page .feed { padding-bottom: 34px; gap: 14px; } .kempire-home-page .post-card, .kempire-home-page .post-card.reverse { direction: ltr; grid-template-columns: 1fr; } .kempire-home-page .blog-side, .kempire-home-page .post-card.reverse .blog-side { border-left: none; border-right: none; border-bottom: 0.5px solid rgba(240,237,230,0.08); } .kempire-home-page .blog-side { padding: 16px 14px; } .kempire-home-page .post-title { font-size: 17px; } .kempire-home-page .vid-thumb { min-height: 150px; } .kempire-home-page .vid-info { padding: 14px 14px; } .kempire-home-page .podcast { grid-template-columns: 1fr; } .kempire-home-page .pod-left { padding: 28px 14px; } .kempire-home-page .ep { gap: 10px; align-items: flex-start; } .kempire-home-page .ep-num { min-width: 30px; font-size: 20px; } .kempire-home-page .ep-title { font-size: 12px; flex: 1; } .kempire-home-page .ep-dur { margin-left: 0; padding-top: 4px; } /* ABOUT */ .kempire-about-page nav, .kempire-about-page .page-header, .kempire-about-page .what-section, .kempire-about-page .cta, .kempire-about-page footer, .kempire-about-page .footer-bar { padding-left: 14px; padding-right: 14px; } .kempire-about-page .page-title { font-size: clamp(34px, 12vw, 44px); padding-bottom: 30px; } .kempire-about-page .about-main { grid-template-columns: 1fr; } .kempire-about-page .about-content { padding: 30px 14px 34px; border-left: none; border-top: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .about-name { font-size: 28px; } .kempire-about-page .about-text { font-size: 13px; } .kempire-about-page .stats-bar { grid-template-columns: 1fr 1fr; } .kempire-about-page .stat-item { padding: 24px 14px; } .kempire-about-page .stat-num { font-size: 34px; } .kempire-about-page .what-section { padding-top: 40px; padding-bottom: 40px; } .kempire-about-page .what-title { font-size: 24px; margin-bottom: 28px; } .kempire-about-page .what-grid { grid-template-columns: 1fr; border-left: none; } .kempire-about-page .what-card { padding: 22px 14px; border-left: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .cta { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 44px; padding-bottom: 44px; } .kempire-about-page .cta-btns { flex-direction: column; width: 100%; } .kempire-about-page .btn { text-align: center; width: 100%; } /* BLOGPOST */ .kempire-blogpost-page nav { flex-direction: column; gap: 12px; padding: 16px; } .kempire-blogpost-page .nav-links { flex-wrap: wrap; justify-content: center; gap: 12px; } .kempire-blogpost-page .nav-socials { justify-content: center; } .kempire-blogpost-page .video-block, .kempire-blogpost-page .byline-wrap, .kempire-blogpost-page .more, .kempire-blogpost-page .article-header { margin-left: 16px; margin-right: 16px; padding-left: 0; padding-right: 0; } .kempire-blogpost-page .content-wrapper { grid-template-columns: 1fr; padding: 0 16px; } .kempire-blogpost-page .article-body { padding: 32px 0; border-right: 0; } .kempire-blogpost-page .sidebar { padding: 0 0 32px; } .kempire-blogpost-page .more-grid { grid-template-columns: 1fr; } .kempire-blogpost-page footer { padding: 40px 16px 24px; } .kempire-blogpost-page .footer-bar { padding: 16px; } /* PODCASTS */ .kempire-podcasts-page nav, .kempire-podcasts-page .page-header, .kempire-podcasts-page .episodes-main, .kempire-podcasts-page .sub-cta, .kempire-podcasts-page footer, .kempire-podcasts-page .footer-bar { padding-left: 14px; padding-right: 14px; margin-left: 0; margin-right: 0; } .kempire-podcasts-page .page-title { font-size: clamp(34px, 12vw, 44px); padding-bottom: 30px; } .kempire-podcasts-page .show-hero { grid-template-columns: 1fr; } .kempire-podcasts-page .show-info { border-left: none; border-top: 0.5px solid rgba(240, 237, 230, 0.1); padding: 28px 14px; } .kempire-podcasts-page .show-art { padding: 30px 14px; } .kempire-podcasts-page .show-stats { flex-direction: column; gap: 16px; } .kempire-podcasts-page .episodes-wrapper { grid-template-columns: 1fr; } .kempire-podcasts-page .episodes-main { border-right: none; } .kempire-podcasts-page .ep-header { padding-top: 30px; } .kempire-podcasts-page .ep-header-title { font-size: 24px; } .kempire-podcasts-page .ep-row { gap: 12px; } .kempire-podcasts-page .ep-num { min-width: 34px; font-size: 28px; } .kempire-podcasts-page .ep-title { font-size: 15px; } .kempire-podcasts-page .pod-sidebar { padding: 30px 14px; border-top: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-podcasts-page .sub-cta { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 40px; padding-bottom: 40px; } .kempire-podcasts-page .sub-btns { width: 100%; } /* SHOP */ .kempire-shop-page nav { flex-direction: column; gap: 12px; padding: 16px; } .kempire-shop-page .nav-links { flex-wrap: wrap; justify-content: center; gap: 12px; } .kempire-shop-page .nav-socials { justify-content: center; } .kempire-shop-page .shop-hero { grid-template-columns: 1fr; } .kempire-shop-page .shop-hero-content { padding: 28px 16px; } .kempire-shop-page .filter-bar { padding: 0 16px; } .kempire-shop-page .sec-header, .kempire-shop-page .fw-banner, .kempire-shop-page .newsletter, .kempire-shop-page .product-featured { margin-left: 16px; margin-right: 16px; padding-left: 16px; padding-right: 16px; } .kempire-shop-page .product-grid { grid-template-columns: 1fr; padding: 0 16px; } .kempire-shop-page .product-featured { grid-template-columns: 1fr; } .kempire-shop-page .featured-info { padding: 24px 16px; } .kempire-shop-page .newsletter { flex-direction: column; align-items: flex-start; padding-top: 48px; padding-bottom: 48px; } .kempire-shop-page .newsletter-form { width: 100%; } .kempire-shop-page .newsletter-input { width: 100%; } .kempire-shop-page footer { padding: 40px 16px 24px; } .kempire-shop-page .footer-bar { padding: 16px; } /* TOUR */ .kempire-tour-page nav { flex-direction: column; gap: 12px; padding: 16px; } .kempire-tour-page .nav-links { flex-wrap: wrap; justify-content: center; gap: 12px; } .kempire-tour-page .nav-socials { justify-content: center; } .kempire-tour-page .tour-hero { grid-template-columns: 1fr; } .kempire-tour-page .tour-hero-content { padding: 28px 16px; } .kempire-tour-page .sec-header, .kempire-tour-page .events, .kempire-tour-page .past-section, .kempire-tour-page .notify { padding-left: 16px; padding-right: 16px; } .kempire-tour-page .event-row { grid-template-columns: 1fr; gap: 14px; } .kempire-tour-page .event-divider { display: none; } .kempire-tour-page .event-date { text-align: left; } .kempire-tour-page .past-grid { grid-template-columns: 1fr; } .kempire-tour-page .notify { flex-direction: column; align-items: flex-start; padding-top: 48px; padding-bottom: 48px; } .kempire-tour-page .notify-form { width: 100%; } .kempire-tour-page .notify-input { width: 100%; } .kempire-tour-page footer { padding: 40px 16px 24px; } .kempire-tour-page .footer-bar { padding: 16px; } /* WATCH */ .kempire-watch-page nav, .kempire-watch-page .page-header, .kempire-watch-page .filter-bar, .kempire-watch-page .sec-header, .kempire-watch-page .vid-grid, .kempire-watch-page .yt-cta, .kempire-watch-page footer, .kempire-watch-page .footer-bar { padding-left: 14px; padding-right: 14px; margin-left: 0; margin-right: 0; } .kempire-watch-page .featured { grid-template-columns: 1fr; } .kempire-watch-page .featured-thumb { border-right: none; border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-watch-page .featured-info { padding: 24px 14px 28px; } .kempire-watch-page .featured-title { font-size: 20px; } .kempire-watch-page .page-title { font-size: clamp(34px, 12vw, 44px); padding-bottom: 30px; } .kempire-watch-page .sec-header { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 30px; } .kempire-watch-page .sec-title { font-size: 24px; } .kempire-watch-page .vid-grid { grid-template-columns: 1fr; gap: 24px; } .kempire-watch-page .vid-card { border: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-watch-page .yt-cta { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 40px; padding-bottom: 40px; } /* STORIES */ .kempire-stories-page nav, .kempire-stories-page .ad-leaderboard, .kempire-stories-page .ad-mid, .kempire-stories-page .ad-footer, .kempire-stories-page .page-header, .kempire-stories-page .filter-bar, .kempire-stories-page .stories-wrapper, .kempire-stories-page .author-strip, .kempire-stories-page .newsletter, .kempire-stories-page footer, .kempire-stories-page .footer-bar { padding-left: 14px; padding-right: 14px; margin-left: 0; margin-right: 0; } .kempire-stories-page .featured-story { grid-template-columns: 1fr; } .kempire-stories-page .featured-thumb { border-right: none; border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-stories-page .featured-thumb img { min-height: 220px; } .kempire-stories-page .featured-info { padding: 24px 0 28px; } .kempire-stories-page .featured-title { font-size: 20px; } .kempire-stories-page .page-title { font-size: clamp(34px, 12vw, 44px); padding-bottom: 30px; } .kempire-stories-page .stories-wrapper { grid-template-columns: 1fr; padding-left: 14px; padding-right: 14px; } .kempire-stories-page .posts-col { border-right: none; border-bottom: 0.5px solid rgba(240, 237, 230, 0.08); } .kempire-stories-page .stories-sidebar { padding: 28px 0 32px; } .kempire-stories-page .post-card { grid-template-columns: 1fr; } .kempire-stories-page .post-card-body { border-right: none; border-bottom: 0.5px solid rgba(240, 237, 230, 0.06); padding: 20px 0; } .kempire-stories-page .post-card-vid { min-height: 140px; } .kempire-stories-page .author-strip { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 18px; } .kempire-stories-page .author-btn { justify-self: center; } .kempire-stories-page .newsletter { flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 48px; padding-bottom: 48px; } .kempire-stories-page .newsletter-form { flex-direction: column; width: 100%; } .kempire-stories-page .newsletter-input { width: 100%; } } /* ---------- Mobile: 320px – 639px ---------- */ @media (min-width: 320px) and (width < 640px) { /* Common nav for all pages */ nav { flex-wrap: wrap; gap: 14px; justify-content: center; padding-top: 16px; padding-bottom: 16px; } .nav-links { width: 100%; justify-content: center; flex-wrap: wrap; gap: 12px 16px; } .nav-socials { width: 100%; justify-content: center; } footer { grid-template-columns: 1fr; gap: 22px; padding-top: 36px; } .footer-bar { flex-direction: column; gap: 8px; padding-top: 14px; padding-bottom: 16px; } /* HOME */ .kempire-home-page nav, .kempire-home-page .topics, .kempire-home-page .sec-header, .kempire-home-page .feed, .kempire-home-page .pod-left, .kempire-home-page .pod-right, .kempire-home-page footer, .kempire-home-page .footer-bar { padding-left: 20px; padding-right: 20px; } .kempire-home-page .ticker-inner span { padding: 0 24px; letter-spacing: 0.14em; } .kempire-home-page .hero { grid-template-columns: 1fr; min-height: auto; } .kempire-home-page .hero-img { max-height: 520px; min-height: 320px; } .kempire-home-page .hero-fade { background: linear-gradient(to bottom, transparent 40%, #0A0A0A 100%); } .kempire-home-page .hero-content { padding: 38px 20px 46px; } .kempire-home-page .headline { font-size: clamp(40px, 10vw, 62px); } .kempire-home-page .hero-body { font-size: 13px; max-width: 100%; } .kempire-home-page .eyebrow, .kempire-home-page .post-cat, .kempire-home-page .blog-cta, .kempire-home-page .topic, .kempire-home-page .sec-link { letter-spacing: 0.14em; } .kempire-home-page .sec-header { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 36px; padding-bottom: 20px; } .kempire-home-page .sec-title { font-size: 28px; } .kempire-home-page .feed { padding-bottom: 44px; gap: 18px; } .kempire-home-page .post-card, .kempire-home-page .post-card.reverse { direction: ltr; grid-template-columns: 1fr; } .kempire-home-page .blog-side, .kempire-home-page .post-card.reverse .blog-side { border-left: none; border-right: none; border-bottom: 0.5px solid rgba(240,237,230,0.08); } .kempire-home-page .blog-side { padding: 22px 20px; } .kempire-home-page .post-title { font-size: 19px; } .kempire-home-page .vid-thumb { min-height: 180px; } .kempire-home-page .vid-info { padding: 16px 18px; } .kempire-home-page .podcast { grid-template-columns: 1fr; } .kempire-home-page .ep { gap: 12px; align-items: flex-start; } .kempire-home-page .ep-num { min-width: 34px; font-size: 22px; } .kempire-home-page .ep-title { font-size: 13px; flex: 1; } .kempire-home-page .ep-dur { margin-left: 0; padding-top: 4px; } /* ABOUT */ .kempire-about-page nav, .kempire-about-page .page-header, .kempire-about-page .what-section, .kempire-about-page .cta, .kempire-about-page footer, .kempire-about-page .footer-bar { padding-left: 20px; padding-right: 20px; } .kempire-about-page .about-main { grid-template-columns: 1fr; } .kempire-about-page .about-content { padding: 34px 20px 38px; border-left: none; border-top: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .stats-bar { grid-template-columns: 1fr 1fr; } .kempire-about-page .stat-item { padding: 30px 20px; } .kempire-about-page .what-grid { grid-template-columns: 1fr; border-left: none; } .kempire-about-page .what-card { border-left: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-about-page .cta { flex-direction: column; align-items: flex-start; gap: 30px; padding-top: 52px; padding-bottom: 52px; } .kempire-about-page .cta-btns { width: 100%; } .kempire-about-page .btn { text-align: center; flex: 1; } /* BLOGPOST */ .kempire-blogpost-page nav { flex-direction: column; gap: 12px; padding: 18px 20px; } .kempire-blogpost-page .nav-links { flex-wrap: wrap; justify-content: center; gap: 14px; } .kempire-blogpost-page .nav-socials { justify-content: center; } .kempire-blogpost-page .video-block, .kempire-blogpost-page .byline-wrap, .kempire-blogpost-page .more, .kempire-blogpost-page .article-header { margin-left: 20px; margin-right: 20px; padding-left: 0; padding-right: 0; } .kempire-blogpost-page .content-wrapper { grid-template-columns: 1fr; padding: 0 20px; } .kempire-blogpost-page .article-body { padding: 36px 0; border-right: 0; } .kempire-blogpost-page .sidebar { padding: 0 0 36px; } .kempire-blogpost-page .more-grid { grid-template-columns: 1fr; } .kempire-blogpost-page footer { padding: 44px 20px 28px; } .kempire-blogpost-page .footer-bar { padding: 18px 20px; } /* PODCASTS */ .kempire-podcasts-page nav, .kempire-podcasts-page .page-header, .kempire-podcasts-page .episodes-main, .kempire-podcasts-page .sub-cta, .kempire-podcasts-page footer, .kempire-podcasts-page .footer-bar { padding-left: 20px; padding-right: 20px; margin-left: 0; margin-right: 0; } .kempire-podcasts-page .show-hero { grid-template-columns: 1fr; } .kempire-podcasts-page .show-info { border-left: none; border-top: 0.5px solid rgba(240, 237, 230, 0.1); padding: 34px 20px; } .kempire-podcasts-page .show-art { padding: 34px 20px; } .kempire-podcasts-page .episodes-wrapper { grid-template-columns: 1fr; } .kempire-podcasts-page .episodes-main { border-right: none; } .kempire-podcasts-page .pod-sidebar { padding: 36px 20px; border-top: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-podcasts-page .sub-cta { flex-direction: column; align-items: flex-start; gap: 30px; padding-top: 48px; padding-bottom: 48px; } .kempire-podcasts-page .sub-btns { width: 100%; } /* SHOP */ .kempire-shop-page nav { flex-direction: column; gap: 12px; padding: 18px 20px; } .kempire-shop-page .nav-links { flex-wrap: wrap; justify-content: center; gap: 14px; } .kempire-shop-page .nav-socials { justify-content: center; } .kempire-shop-page .shop-hero { grid-template-columns: 1fr; } .kempire-shop-page .shop-hero-content { padding: 36px 20px; } .kempire-shop-page .filter-bar { padding: 0 20px; } .kempire-shop-page .sec-header, .kempire-shop-page .fw-banner, .kempire-shop-page .newsletter, .kempire-shop-page .product-featured { margin-left: 20px; margin-right: 20px; } .kempire-shop-page .product-grid { grid-template-columns: 1fr; padding: 0 20px; } .kempire-shop-page .product-featured { grid-template-columns: 1fr; } .kempire-shop-page .featured-info { padding: 28px 20px; } .kempire-shop-page .newsletter { flex-direction: column; align-items: flex-start; padding: 56px 20px; } .kempire-shop-page .newsletter-form { width: 100%; } .kempire-shop-page .newsletter-input { width: 100%; } .kempire-shop-page footer { padding: 44px 20px 28px; } .kempire-shop-page .footer-bar { padding: 18px 20px; } /* TOUR */ .kempire-tour-page nav { flex-direction: column; gap: 12px; padding: 18px 20px; } .kempire-tour-page .nav-links { flex-wrap: wrap; justify-content: center; gap: 14px; } .kempire-tour-page .nav-socials { justify-content: center; } .kempire-tour-page .tour-hero { grid-template-columns: 1fr; } .kempire-tour-page .tour-hero-content { padding: 36px 20px; } .kempire-tour-page .sec-header, .kempire-tour-page .events, .kempire-tour-page .past-section, .kempire-tour-page .notify { padding-left: 20px; padding-right: 20px; } .kempire-tour-page .event-row { grid-template-columns: 1fr; gap: 14px; } .kempire-tour-page .event-divider { display: none; } .kempire-tour-page .event-date { text-align: left; } .kempire-tour-page .past-grid { grid-template-columns: 1fr; } .kempire-tour-page .notify { flex-direction: column; align-items: flex-start; padding-top: 56px; padding-bottom: 56px; } .kempire-tour-page .notify-form { width: 100%; } .kempire-tour-page .notify-input { width: 100%; } .kempire-tour-page footer { padding: 44px 20px 28px; } .kempire-tour-page .footer-bar { padding: 18px 20px; } /* WATCH */ .kempire-watch-page nav, .kempire-watch-page .page-header, .kempire-watch-page .filter-bar, .kempire-watch-page .sec-header, .kempire-watch-page .vid-grid, .kempire-watch-page .yt-cta, .kempire-watch-page footer, .kempire-watch-page .footer-bar { padding-left: 20px; padding-right: 20px; margin-left: 0; margin-right: 0; } .kempire-watch-page .featured { grid-template-columns: 1fr; } .kempire-watch-page .featured-thumb { border-right: none; border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-watch-page .featured-info { padding: 30px 20px 34px; } .kempire-watch-page .sec-header { flex-direction: column; align-items: flex-start; gap: 12px; } .kempire-watch-page .vid-grid { grid-template-columns: 1fr; gap: 24px; } .kempire-watch-page .vid-card { border: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-watch-page .yt-cta { flex-direction: column; align-items: flex-start; gap: 30px; padding-top: 48px; padding-bottom: 48px; } /* STORIES */ .kempire-stories-page nav, .kempire-stories-page .ad-leaderboard, .kempire-stories-page .ad-mid, .kempire-stories-page .ad-footer, .kempire-stories-page .page-header, .kempire-stories-page .filter-bar, .kempire-stories-page .stories-wrapper, .kempire-stories-page .author-strip, .kempire-stories-page .newsletter, .kempire-stories-page footer, .kempire-stories-page .footer-bar { padding-left: 20px; padding-right: 20px; margin-left: 0; margin-right: 0; } .kempire-stories-page .featured-story { grid-template-columns: 1fr; } .kempire-stories-page .featured-thumb { border-right: none; border-bottom: 0.5px solid rgba(240, 237, 230, 0.1); } .kempire-stories-page .featured-thumb img { min-height: 280px; } .kempire-stories-page .featured-info { padding: 30px 0 34px; } .kempire-stories-page .stories-wrapper { grid-template-columns: 1fr; } .kempire-stories-page .posts-col { border-right: none; border-bottom: 0.5px solid rgba(240, 237, 230, 0.08); } .kempire-stories-page .stories-sidebar { padding: 32px 0 36px; } .kempire-stories-page .post-card { grid-template-columns: 1fr; } .kempire-stories-page .post-card-body { border-right: none; border-bottom: 0.5px solid rgba(240, 237, 230, 0.06); padding: 24px 0; } .kempire-stories-page .author-strip { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 20px; } .kempire-stories-page .author-btn { justify-self: center; } .kempire-stories-page .newsletter { flex-direction: column; align-items: flex-start; gap: 32px; padding-top: 56px; padding-bottom: 56px; } .kempire-stories-page .newsletter-form { flex-direction: column; width: 100%; } .kempire-stories-page .newsletter-input { width: 100%; max-width: 320px; } }