/* ========================================================= PANTHERA — FULL CSS (tokenized) + SKIN SYSTEM Headings follow --pth-color-heading in every skin ========================================================= */ /* ========================================================= 0) SKINS (Option A: body class switch) --------------------------------------------------------- How this works: - :root defines the DEFAULT token set (baseline skin). In this file, :root represents SKIN-BLACK. - In functions.php you add ONE class to : • pth-skin-white -> overrides token values for light skin • pth-skin-black -> optional explicit class (no-op here) - The order of skin blocks in this CSS does NOT decide which skin is used. Only the selector that matches the actual class applies. ========================================================= */ /* --- Default tokens (skin-black baseline) --- */ :root{ /* ===== Brand / text ===== */ --pth-color-bg: #0b0b0b; --pth-color-panel: #111111; --pth-color-text: #e9e9e9; --pth-color-text-soft: rgba(233,233,233,.85); --pth-color-muted: #bdbdbd; /* IMPORTANT: headings token (skin-controlled) */ --pth-color-heading: #ffffff; /* Links token (skin-controlled) */ --pth-color-link: #ffffff; --pth-color-link-hover: #ffffff; /* Accent (theme accent) */ --pth-color-accent: #e0002a; /* ========================================================= Spotlight text tokens (NOT the theme accent) Use by adding classes on headings/paragraphs: - pth-spotlight (color + font) - pth-spotlight-color (color only) - pth-spotlight-font (font only) ========================================================= */ --pth-spotlight-color: #D80825; --pth-spotlight-font: "Courier New", Courier, monospace; /* Nav/footer tokens (skin-controlled) */ --pth-color-nav-text: #ffffff; --pth-color-footer-text: rgba(255,255,255,.85); /* ===== Lines / borders ===== */ --pth-line: rgba(255,255,255,.14); --pth-line-strong: rgba(255,255,255,.22); --pth-line-soft: rgba(255,255,255,.12); /* ===== Surfaces ===== */ --pth-surface-0: var(--pth-color-bg); /* page background */ --pth-surface-1: rgba(255,255,255,.03); /* subtle card */ --pth-surface-2: rgba(255,255,255,.06); /* inputs / hover */ --pth-surface-3: rgba(255,255,255,.09); /* stronger hover */ --pth-card-light-bg: #ffffff; --pth-card-light-text: #111111; /* ===== Radius ===== */ --pth-radius-sm: 10px; --pth-radius-md: 14px; --pth-radius-lg: 16px; --pth-radius-pill: 999px; /* ===== Shadows ===== */ --pth-shadow-lg: 0 10px 30px rgba(0,0,0,.35); /* ===== Layout widths ===== */ --pth-max: 1100px; --pth-post-max: min(82ch, 980px); /* ===== Typography (fluid) ===== */ --pth-fs-body: clamp(16px, 0.5vw + 14px, 18px); --pth-fs-h1: clamp(34px, 3.2vw + 14px, 64px); --pth-fs-h2: clamp(28px, 2.4vw + 14px, 48px); --pth-fs-h3: clamp(22px, 1.8vw + 14px, 36px); --pth-fs-h4: clamp(18px, 1.2vw + 14px, 28px); --pth-fs-h5: clamp(16px, 0.8vw + 14px, 22px); --pth-fs-h6: clamp(14px, 0.6vw + 13px, 18px); /* ===== Heading spacing (mobile/base) ===== */ --pth-h-gap-1: clamp(16px, 1.4vw, 30px); --pth-h-gap-2: clamp(14px, 1.2vw, 26px); --pth-h-gap-3: clamp(12px, 1.0vw, 22px); --pth-h-gap-4: clamp(10px, 0.8vw, 18px); --pth-h-gap-5: clamp(8px, 0.6vw, 14px); --pth-h-gap-6: clamp(8px, 0.5vw, 12px); /* ===== Sections ===== */ --pth-section-pad-y: clamp(28px, 5vw, 80px); --pth-section-pad-x: clamp(14px, 2vw, 24px); --pth-section-pad-y-tight: clamp(12px, 2.2vw, 28px); /* ===== Divider (short) ===== */ --pth-divider-max: 900px; --pth-divider-inset: 96px; /* total inset (desktop) */ --pth-divider-strip-h: clamp(10px, 1.6vw, 18px); /* IMPORTANT: divider line color is a skin token */ --pth-divider-line: rgba(255,255,255,.32); --pth-divider-thickness: 2px; /* ===== Images spacing ===== */ --pth-img-gap-top: clamp(10px, 1.8vw, 22px); --pth-img-gap-bot: clamp(14px, 2.4vw, 34px); /* ===== Header sizing ===== */ --pth-header-pad-y: 3px; --pth-header-pad-x: 14px; --pth-branding-font: 28px; --pth-toggle-pad-y: 6px; --pth-toggle-pad-x: 10px; --pth-header-offset: 72px; /* content offset for fixed header */ /* ===== Hero typography ===== */ --pth-fs-hero-kicker: var(--pth-fs-h1); --pth-fs-hero-title: clamp(51px, 4.8vw + 21px, 96px); /* 1.5x H1 */ /* Hero text colors (manual per-block override using classes below) */ --pth-hero-text-light: rgba(255,255,255,.96); --pth-hero-text-dark: rgba(0,0,0,.92); /* ===== Blog card padding (fluid) ===== */ --pth-card-pad: clamp(14px, 2vw, 22px); /* ===== Button tokens (skin-controlled) ===== */ --pth-btn-bg: var(--pth-color-accent); --pth-btn-text: #ffffff; --pth-btn-font-size: 16px; --pth-btn-border-color: var(--pth-line-soft); --pth-btn-border-w: 1px; /* ===== FAQ title token (skin-controlled) ===== */ /* Black skin wants red question titles */ --pth-faq-title-color: var(--pth-color-accent); /* ===== Tabs (reach) tokens (skin-controlled) ===== */ --pth-tab-btn-radius: var(--pth-radius-pill); --pth-tab-btn-bg: var(--pth-surface-1); --pth-tab-btn-text: var(--pth-color-text); --pth-tab-btn-border: var(--pth-line); --pth-tab-btn-border-w: 1px; --pth-tab-btn-hover-bg: var(--pth-surface-2); --pth-tab-btn-hover-text: var(--pth-color-heading); --pth-tab-btn-hover-border: var(--pth-line-strong); /* Active (selected) tab */ --pth-tab-btn-active-bg: var(--pth-color-accent); --pth-tab-btn-active-text: #ffffff; --pth-tab-btn-active-border: rgba(0,0,0,0); } /* Optional explicit black skin class. NOTE: black is already the default via :root above. */ body.pth-skin-black{} /* Desktop boosts */ @media (min-width: 1024px){ :root{ --pth-h-gap-1: clamp(24px, 2.0vw, 48px); --pth-h-gap-2: clamp(20px, 1.6vw, 38px); --pth-h-gap-3: clamp(16px, 1.2vw, 28px); --pth-h-gap-4: clamp(12px, 0.9vw, 22px); --pth-h-gap-5: clamp(10px, 0.7vw, 18px); --pth-h-gap-6: clamp(10px, 0.6vw, 16px); --pth-img-gap-top: clamp(14px, 1.6vw, 28px); --pth-img-gap-bot: clamp(18px, 2.2vw, 44px); } } @media (max-width: 768px){ :root{ --pth-divider-inset: 40px; /* total inset (mobile) */ --pth-header-pad-y: 4px; --pth-header-pad-x: 12px; --pth-branding-font: 22px; --pth-header-offset: 64px; } } /* ========================================================= SKIN: WHITE (light) Usage: body has class "pth-skin-white" ========================================================= */ body.pth-skin-white{ --pth-color-bg: #f7f8f9; --pth-color-panel: #ffffff; --pth-color-text: #111111; --pth-color-text-soft: rgba(17,17,17,.82); --pth-color-muted: #444444; /* headings token */ --pth-color-heading: #111111; /* Links */ --pth-color-link: #111111; --pth-color-link-hover: #111111; /* Accent */ --pth-color-accent: #e0002a; /* Spotlight tokens (NOT the theme accent) */ --pth-spotlight-color: #D80825; --pth-spotlight-font: "Courier New", Courier, monospace; /* Nav/footer */ --pth-color-nav-text: #111111; --pth-color-footer-text: rgba(17,17,17,.82); /* Lines */ --pth-line: rgba(0,0,0,.14); --pth-line-strong: rgba(0,0,0,.22); --pth-line-soft: rgba(0,0,0,.12); /* Surfaces */ --pth-surface-0: var(--pth-color-bg); --pth-surface-1: rgba(0,0,0,.03); --pth-surface-2: rgba(0,0,0,.06); --pth-surface-3: rgba(0,0,0,.09); /* Divider line must be visible on light backgrounds */ --pth-divider-line: rgba(0,0,0,.22); /* FAQ title: white skin wants black question titles */ --pth-faq-title-color: var(--pth-color-heading); /* Hero manual colors */ --pth-hero-text-light: rgba(255,255,255,.96); --pth-hero-text-dark: rgba(0,0,0,.92); /* Button tokens in light skin */ --pth-btn-bg: var(--pth-color-accent); --pth-btn-text: #ffffff; --pth-btn-font-size: 16px; --pth-btn-border-color: rgba(0,0,0,.18); --pth-btn-border-w: 1px; /* Tabs tokens for white skin */ --pth-tab-btn-bg: rgba(0,0,0,.08); --pth-tab-btn-text: #111111; --pth-tab-btn-border: rgba(0,0,0,.18); --pth-tab-btn-border-w: 1px; --pth-tab-btn-hover-bg: rgba(0,0,0,.12); --pth-tab-btn-hover-text: #111111; --pth-tab-btn-hover-border: rgba(0,0,0,.28); --pth-tab-btn-active-bg: var(--pth-color-accent); --pth-tab-btn-active-text: #ffffff; --pth-tab-btn-active-border: rgba(0,0,0,0); /* Shadow (lighter) */ --pth-shadow-lg: 0 10px 30px rgba(0,0,0,.12); } /* ========================================================= 1) Global base + GP overrides ========================================================= */ html, body{ background: var(--pth-surface-0) !important; } body{ color: var(--pth-color-text); } /* wrappers */ #page, .site, .site-content{ background: var(--pth-surface-0) !important; } /* Remove GP “white card” feel */ .separate-containers .inside-article, .separate-containers .page-header, .one-container .container, .inside-page-header{ background: transparent !important; } .separate-containers .inside-article, .one-container .site-content{ padding: 0 !important; } /* Make main container full width so skin reaches edges */ .site.grid-container.container{ max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; } /* Constrain “wide” blocks nicely */ .wp-block-group.alignwide, .wp-block-cover.alignfull .wp-block-cover__inner-container{ max-width: var(--pth-max); margin-left: auto; margin-right: auto; } /* ========================================================= 1b) Spotlight utilities (editor classes) --------------------------------------------------------- Add these classes on a Heading/Paragraph block: - pth-spotlight -> uses spotlight color + font - pth-spotlight-color -> color only - pth-spotlight-font -> font only Works even when heading colors are forced by the skin. ========================================================= */ :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,.wp-block-heading).pth-spotlight{ color: var(--pth-spotlight-color) !important; font-family: var(--pth-spotlight-font) !important; } :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,.wp-block-heading).pth-spotlight-color{ color: var(--pth-spotlight-color) !important; } :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,.wp-block-heading).pth-spotlight-font{ font-family: var(--pth-spotlight-font) !important; } /* ========================================================= 2) Typography: sizes + spacing (Gutenberg content) ========================================================= */ .entry-content :where(p, li){ font-size: var(--pth-fs-body) !important; line-height: 1.6 !important; color: var(--pth-color-text) !important; } /* GLOBAL heading color + sizes */ .entry-content :where(h1,h2,h3,h4,h5,h6,.wp-block-heading){ color: var(--pth-color-heading) !important; padding: 0 !important; } /* Heading sizes */ .entry-content :where(h1, h1.wp-block-heading){ font-size: var(--pth-fs-h1) !important; line-height: 1.08 !important; } .entry-content :where(h2, h2.wp-block-heading){ font-size: var(--pth-fs-h2) !important; line-height: 1.12 !important; } .entry-content :where(h3, h3.wp-block-heading){ font-size: var(--pth-fs-h3) !important; line-height: 1.18 !important; } .entry-content :where(h4, h4.wp-block-heading){ font-size: var(--pth-fs-h4) !important; line-height: 1.24 !important; } .entry-content :where(h5, h5.wp-block-heading){ font-size: var(--pth-fs-h5) !important; line-height: 1.30 !important; } .entry-content :where(h6, h6.wp-block-heading){ font-size: var(--pth-fs-h6) !important; line-height: 1.35 !important; } /* Heading spacing via margins (fluid) */ .entry-content :where(h1, h1.wp-block-heading){ margin-block: var(--pth-h-gap-1) var(--pth-h-gap-2) !important; } .entry-content :where(h2, h2.wp-block-heading){ margin-block: var(--pth-h-gap-1) var(--pth-h-gap-3) !important; } .entry-content :where(h3, h3.wp-block-heading){ margin-block: var(--pth-h-gap-2) var(--pth-h-gap-4) !important; } .entry-content :where(h4, h4.wp-block-heading){ margin-block: var(--pth-h-gap-3) var(--pth-h-gap-5) !important; } .entry-content :where(h5, h5.wp-block-heading){ margin-block: var(--pth-h-gap-4) var(--pth-h-gap-6) !important; } .entry-content :where(h6, h6.wp-block-heading){ margin-block: var(--pth-h-gap-5) var(--pth-h-gap-6) !important; } /* If a heading accidentally has .pth-section, neutralize it */ .entry-content :where(h1,h2,h3,h4,h5,h6).pth-section{ padding: 0 !important; background: transparent !important; } /* Links in content */ .entry-content a{ color: var(--pth-color-link) !important; } .entry-content a:hover, .entry-content a:focus{ color: var(--pth-color-link-hover) !important; } /* Accent heading must win */ .pth-accent-title{ color: var(--pth-color-accent) !important; letter-spacing: .3px; } /* ========================================================= 2b) Fluid typography for GP templates (blog cards + single post titles) ========================================================= */ .blog :where(.entry-title), .archive :where(.entry-title), .search :where(.entry-title){ font-size: var(--pth-fs-h3) !important; line-height: 1.18 !important; margin-block: var(--pth-h-gap-4) var(--pth-h-gap-5) !important; color: var(--pth-color-heading) !important; } .blog :where(.entry-title a), .archive :where(.entry-title a), .search :where(.entry-title a){ color: var(--pth-color-heading) !important; text-decoration: none; } .blog :where(.entry-summary, .entry-summary p, .entry-summary li), .archive :where(.entry-summary, .entry-summary p, .entry-summary li), .search :where(.entry-summary, .entry-summary p, .entry-summary li){ font-size: var(--pth-fs-body) !important; line-height: 1.6 !important; color: var(--pth-color-text-soft) !important; } .blog .entry-summary p, .archive .entry-summary p, .search .entry-summary p{ margin: 0 0 var(--pth-h-gap-6) !important; } .single-post .entry-title{ font-size: var(--pth-fs-h1) !important; line-height: 1.08 !important; margin-block: var(--pth-h-gap-1) var(--pth-h-gap-2) !important; color: var(--pth-color-heading) !important; } /* ========================================================= 3) Sections (themed sections) ========================================================= */ .pth-section{ padding: var(--pth-section-pad-y) var(--pth-section-pad-x) !important; } .pth-section--dark{ background: var(--pth-surface-0); } .entry-content .pth-section--dark, .entry-content .pth-section--dark :where(p, li, blockquote){ color: var(--pth-color-text) !important; } .entry-content .pth-section--dark :where(h1,h2,h3,h4,h5,h6,.wp-block-heading){ color: var(--pth-color-heading) !important; } .entry-content .pth-section--dark a{ color: var(--pth-color-link) !important; } .entry-content .pth-section:has(+ hr.wp-block-separator.pth-divider-short){ padding-bottom: var(--pth-section-pad-y-tight) !important; } .entry-content hr.wp-block-separator.pth-divider-short + .pth-section{ padding-top: var(--pth-section-pad-y-tight) !important; } .pth-section-tight{ padding-top: var(--pth-section-pad-y-tight) !important; padding-bottom: var(--pth-section-pad-y-tight) !important; } /* ========================================================= 4) Hero (Cover) ========================================================= */ .pth-hero{ position: relative; } .pth-hero::before{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.8)); z-index:0; } .pth-hero > *{ position: relative; z-index: 1; } .pth-hero p{ color: var(--pth-color-muted); } .pth-hero .pth-hero-kicker{ font-size: var(--pth-fs-hero-kicker) !important; line-height: 1.08 !important; margin: 0 0 10px; text-align: center; color: var(--pth-hero-text-light) !important; } .pth-hero .pth-hero-title{ font-size: var(--pth-fs-hero-title) !important; line-height: 1 !important; margin: 0; text-align: center !important; max-width: 100%; color: var(--pth-hero-text-light) !important; } /* Manual per-block overrides (add both classes on the Heading blocks) */ .pth-hero .pth-hero-kicker.pth-hero-kicker-light{ color: var(--pth-hero-text-light) !important; } .pth-hero .pth-hero-kicker.pth-hero-kicker-dark{ color: var(--pth-hero-text-dark) !important; } .pth-hero .pth-hero-title.pth-hero-title-light{ color: var(--pth-hero-text-light) !important; } .pth-hero .pth-hero-title.pth-hero-title-dark{ color: var(--pth-hero-text-dark) !important; } .entry-content > .pth-hero:first-child{ margin-top: calc(-1 * var(--pth-header-offset)) !important; } /* ========================================================= 5) Buttons (tokens are skin-controlled) ========================================================= */ .pth-btn a, .wp-block-button.pth-btn a{ background: var(--pth-btn-bg) !important; color: var(--pth-btn-text) !important; font-size: var(--pth-btn-font-size) !important; border-radius: var(--pth-radius-pill); padding: 12px 18px; border: var(--pth-btn-border-w) solid var(--pth-btn-border-color) !important; text-decoration: none; } /* ========================================================= 6) Cards ========================================================= */ .pth-card{ background: var(--pth-card-light-bg); color: var(--pth-card-light-text); border-radius: var(--pth-radius-md); padding: 18px; box-shadow: var(--pth-shadow-lg); } .pth-card :where(p, li, h1,h2,h3,h4,h5,h6, a){ color: var(--pth-card-light-text) !important; } .pth-card-dark{ background: var(--pth-surface-1); border: 1px solid var(--pth-line-soft); border-radius: var(--pth-radius-md); padding: 18px; color: var(--pth-color-text) !important; } .pth-card-dark :where(p, li){ color: var(--pth-color-text) !important; } .pth-card-dark :where(h1,h2,h3,h4,h5,h6){ color: var(--pth-color-heading) !important; } .pth-card-dark a{ color: var(--pth-color-link) !important; text-decoration:none; } .pth-card-dark a:hover{ text-decoration: underline; } /* Stretched link: make whole card clickable */ .pth-click-card{ position: relative; } .pth-click-card .wp-block-post-title a, .pth-click-card h2 a, .pth-click-card h3 a{ position: static; } .pth-click-card .wp-block-post-title a::after, .pth-click-card h2 a::after, .pth-click-card h3 a::after{ content:""; position:absolute; inset:0; z-index:1; } .pth-click-card > *{ position: relative; z-index: 2; } /* ========================================================= 7) Images helpers ========================================================= */ .entry-content figure.wp-block-image.pth-legend-img{ margin-top: var(--pth-img-gap-top) !important; margin-bottom: var(--pth-img-gap-bot) !important; } .entry-content figure.wp-block-image.pth-legend-img img{ display:block; width:100%; height:auto; border-radius: 0; } /* ========================================================= 8) FAQ (Details block) ========================================================= */ .pth-faq{ border: 1px solid var(--pth-line); border-radius: var(--pth-radius-sm); padding: 10px 14px; margin: 10px 0; background: var(--pth-surface-1); } .pth-faq summary{ cursor: pointer; color: var(--pth-faq-title-color) !important; font-weight: 600; } .pth-faq p{ color: var(--pth-color-text); margin: 10px 0 0; } /* ========================================================= 9) Forms ========================================================= */ .pth-section input, .pth-section textarea, .pth-section select{ width: 100%; background: var(--pth-surface-2); border: 1px solid var(--pth-line); color: var(--pth-color-text); border-radius: var(--pth-radius-pill); padding: 12px 14px; } .pth-section textarea{ border-radius: var(--pth-radius-md); min-height: 140px; } /* ========================================================= 10) Tabs (How to reach) ========================================================= */ .pth-tabbar{ display:flex; flex-direction:column; gap:10px; } .pth-tabbar .wp-block-button__link{ display:block; text-align:left; padding:10px 14px; border-radius: var(--pth-tab-btn-radius) !important; border: var(--pth-tab-btn-border-w) solid var(--pth-tab-btn-border) !important; background: var(--pth-tab-btn-bg) !important; color: var(--pth-tab-btn-text) !important; text-decoration: none !important; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .pth-tabbar .wp-block-button__link:hover, .pth-tabbar .wp-block-button__link:focus{ background: var(--pth-tab-btn-hover-bg) !important; color: var(--pth-tab-btn-hover-text) !important; border-color: var(--pth-tab-btn-hover-border) !important; outline: none !important; } .pth-tabbar .wp-block-button__link.is-active, .pth-tabbar .wp-block-button__link[aria-current="page"], .pth-tabbar .wp-block-button__link[aria-current="true"]{ background: var(--pth-tab-btn-active-bg) !important; color: var(--pth-tab-btn-active-text) !important; border-color: var(--pth-tab-btn-active-border) !important; } /* Panel */ .pth-tabpanel{ display:none; border: 1px solid var(--pth-line); border-radius: var(--pth-radius-md); padding: 18px; background: var(--pth-surface-1); } .pth-tabpanel.is-default{ display:block; } @media (max-width: 768px){ .pth-tabbar{ flex-direction:row; flex-wrap:wrap; } } @media (min-width: 769px){ .pth-tabs--reach .wp-block-columns{ flex-direction: column !important; gap: 16px; } .pth-tabs--reach .wp-block-columns > .wp-block-column{ flex-basis: 100% !important; width: 100% !important; } .pth-tabs--reach .pth-tabbar{ flex-direction: row !important; flex-wrap: wrap; } } /* ========================================================= 11) Header / Nav (fixed) ========================================================= */ #masthead.site-header{ position: fixed !important; top: 0; left: 0; right: 0; z-index: 99999; } .site-content{ padding-top: var(--pth-header-offset) !important; } #masthead, #masthead .inside-header, #masthead #site-navigation, #masthead #site-navigation .inside-navigation, #masthead #mobile-menu-control-wrapper{ background: var(--pth-surface-0) !important; } #masthead .inside-header{ padding: var(--pth-header-pad-y) var(--pth-header-pad-x) !important; } #masthead .site-branding, #masthead .main-title{ margin: 0 !important; } #masthead .main-title a{ font-size: var(--pth-branding-font) !important; line-height: 1.1 !important; color: var(--pth-color-nav-text) !important; } #masthead #site-navigation .main-nav > ul > li > a{ color: var(--pth-color-nav-text) !important; background: transparent !important; } #masthead #site-navigation .main-nav > ul > li > a:hover, #masthead #site-navigation .main-nav > ul > li.current-menu-item > a, #masthead #site-navigation .main-nav > ul > li.current_page_item > a{ color: var(--pth-color-nav-text) !important; } #masthead #site-navigation ul ul{ background: var(--pth-surface-0) !important; } #masthead #site-navigation ul ul a{ color: var(--pth-color-nav-text) !important; } #masthead .menu-toggle{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: var(--pth-toggle-pad-y) var(--pth-toggle-pad-x) !important; line-height: 1 !important; color: var(--pth-color-nav-text) !important; } #masthead .menu-toggle .gp-icon svg{ fill: currentColor !important; } @media (max-width: 768px){ #site-navigation .menu-toggle{ display:none !important; } } .admin-bar #masthead.site-header{ top: 32px; } @media (max-width: 782px){ .admin-bar #masthead.site-header{ top: 46px; } } /* ========================================================= 12) Footer ========================================================= */ .site-footer, .site-footer .site-info, .site-footer .inside-site-info{ background: var(--pth-surface-0) !important; color: var(--pth-color-footer-text) !important; } .site-footer a{ color: var(--pth-color-link) !important; text-decoration:none; } .site-footer a:hover, .site-footer a:focus{ text-decoration: underline; } /* ========================================================= 13) Divider — short (strip + line) ========================================================= */ .entry-content hr.wp-block-separator.pth-divider-short{ position: relative !important; border: 0 !important; width: 100% !important; max-width: none !important; height: var(--pth-divider-strip-h) !important; background: var(--pth-surface-0) !important; margin: 0 !important; } .entry-content hr.wp-block-separator.pth-divider-short::before{ content:""; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width: min(var(--pth-divider-max), calc(100% - var(--pth-divider-inset))); height: var(--pth-divider-thickness) !important; background: var(--pth-divider-line) !important; } /* ========================================================= 14) Legal pages helper ========================================================= */ .pth-legal{ width: 100%; padding: clamp(28px, 5vw, 90px) clamp(16px, 4vw, 32px) !important; } .pth-legal > .wp-block-group__inner-container{ max-width: min(80ch, var(--pth-max)); margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } /* ========================================================= 15) Blog archive grid (2 cols desktop) ========================================================= */ @media (min-width: 769px){ .blog .site-main, .archive .site-main, .search .site-main{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .blog .site-main .paging-navigation, .archive .site-main .paging-navigation, .search .site-main .paging-navigation{ grid-column: 1 / -1; } } .blog .site-main article, .archive .site-main article, .search .site-main article{ background: var(--pth-surface-1); border: 1px solid var(--pth-line-soft); border-radius: var(--pth-radius-md); padding: var(--pth-card-pad) !important; margin: 0; } .blog .entry-meta, .blog .entry-footer, .archive .entry-meta, .archive .entry-footer, .search .entry-meta, .search .entry-footer{ display:none !important; } .blog #right-sidebar, .home.blog #right-sidebar{ display:none !important; } .blog #page.site, .home.blog #page.site{ max-width: min(1200px, calc(100% - 48px)) !important; margin-left: auto !important; margin-right: auto !important; } .blog .site-content .content-area, .home.blog .site-content .content-area{ width: 100% !important; float: none !important; } .pth-archive-thumb img{ display:block; width:100%; height:auto; border-radius: 0; } /* ========================================================= 16) Single post (centered container, no meta) ========================================================= */ .single-post .inside-article{ max-width: var(--pth-post-max) !important; margin-left: auto !important; margin-right: auto !important; padding: clamp(18px, 4vw, 44px) !important; background: var(--pth-surface-1) !important; border: 1px solid var(--pth-line-soft) !important; border-radius: var(--pth-radius-lg) !important; color: var(--pth-color-text) !important; } .single-post .inside-article :where(h1,h2,h3,h4,h5,h6){ color: var(--pth-color-heading) !important; } .single-post .inside-article :where(p, li, blockquote){ color: var(--pth-color-text) !important; } .single-post .inside-article a{ color: var(--pth-color-link) !important; } .single-post .featured-image.page-header-image-single{ max-width: 100% !important; padding: 0 !important; margin: 0 0 clamp(14px, 3vw, 28px) 0 !important; } .single-post .featured-image.page-header-image-single img{ display:block; width:100%; height:auto; border-radius: 0 !important; } .single-post .entry-header .entry-meta{ display:none !important; } .single-post footer.entry-meta .cat-links{ display:none !important; } .single-post .post-navigation{ display:none !important; } /* ========================================================= 17) Pagination (minimal) ========================================================= */ .paging-navigation{ background: var(--pth-surface-0) !important; color: var(--pth-color-text) !important; padding: 12px 0; } .paging-navigation a, .paging-navigation .page-numbers{ color: var(--pth-color-link) !important; text-decoration:none !important; } .paging-navigation a:hover, .paging-navigation a:focus{ text-decoration: underline; } .paging-navigation .page-numbers.current{ font-weight: 700; } /* ========================================================= 18) Spotlight must win even inside .pth-section--dark ========================================================= */ .entry-content :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,.wp-block-heading).pth-spotlight, .entry-content :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,.wp-block-heading).pth-spotlight-color, .entry-content .pth-section--dark :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,.wp-block-heading).pth-spotlight, .entry-content .pth-section--dark :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,.wp-block-heading).pth-spotlight-color{ color: var(--pth-spotlight-color) !important; } .entry-content :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,.wp-block-heading).pth-spotlight, .entry-content :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,.wp-block-heading).pth-spotlight-font, .entry-content .pth-section--dark :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,.wp-block-heading).pth-spotlight-font{ font-family: var(--pth-spotlight-font) !important; } /* ========================================================= 19) Slider ========================================================= */ /* ========================================================= 1) MAIN SLIDER STAGE Forces the container to fill the viewport and removes Gutenberg's default constraints. ========================================================= */ .js-custom-slider { position: relative !important; overflow: hidden !important; width: 100% !important; /* CHANGE: Increase mobile height to 85% or 100% of viewport */ height: 85vh !important; /* CHANGE: Ensure it is tall enough for long mobile screens */ min-height: 600px !important; background: #000 !important; } @media (min-width: 768px) { .js-custom-slider { /* Keep or adjust your desktop height preference */ height: 75vh !important; min-height: 600px !important; } } /* Neutralize the nested Gutenberg 'inner-container' This prevents the black/grey bars and hidden images. */ .js-custom-slider .wp-block-group__inner-container, .js-custom-slider .is-layout-constrained { max-width: none !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* ========================================================= 2) THE SLIDES (Cover Blocks) Standardizes positioning and ensures a clean fade transition. ========================================================= */ .js-custom-slider .wp-block-cover { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 0; display: none; transition: opacity 0.5s ease-in-out !important; /* Snappy fade [cite: 167] */ z-index: 1 !important; background-color: transparent !important; } .js-custom-slider .wp-block-cover.is-active { opacity: 1 !important; z-index: 2 !important; display: flex !important; } /* CRITICAL: Remove the default WP grey dimming tint This is why images often appear black. */ .js-custom-slider .wp-block-cover__background, .js-custom-slider .has-background-dim { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* ========================================================= 3) THE IMAGE ENGINE Targets the background image to fill the stage completely. ========================================================= */ .js-custom-slider .wp-block-cover img.wp-block-cover__image-background, .js-custom-slider .wp-block-cover img { width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; /* Eliminates letterboxing [cite: 171] */ will-change: transform; animation-fill-mode: forwards !important; animation-timing-function: ease-in-out !important; /* Respects the Editor Focal Point [cite: 179] */ transform-origin: center center !important; /* Baseline scale to prevent edge gaps [cite: 172] */ transform: scale(1.25); } /* ========================================================= 4) STATIC HERO CONTENT OVERLAY Maintains title, kicker, and button in a central position. ========================================================= */ .pth-hero-overlay { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 10 !important; /* Sits above all slides [cite: 183] */ width: 90% !important; max-width: 800px !important; text-align: center !important; pointer-events: none !important; /* Allows clicks to pass through [cite: 184] */ } .pth-hero-overlay * { pointer-events: auto !important; /* Re-enable for buttons [cite: 186] */ } .pth-hero-kicker { font-size: var(--pth-fs-hero-kicker) !important; color: var(--pth-hero-text-light) !important; margin-bottom: 10px !important; } .pth-hero-title { font-size: var(--pth-fs-hero-title) !important; color: var(--pth-hero-text-light) !important; margin-bottom: 20px !important; } /* ========================================================= 5) ANIMATION SPEEDS & BEHAVIORS ========================================================= */ .is-active img { animation-duration: 7s; } /* [cite: 176] */ .slow.is-active img { animation-duration: 9s; } /* [cite: 175] */ .very-slow.is-active img { animation-duration: 12s; } /* [cite: 174] */ .fast.is-active img { animation-duration: 4s; } .super-fast.is-active img { animation-duration: 2.5s; } /* [cite: 177] */ .zoom-in.is-active img { animation-name: kf-zoom-in; } /* [cite: 178] */ .zoom-out.is-active img { animation-name: kf-zoom-out; } .translate-right.is-active img { animation-name: kf-translate-right; } /* [cite: 192] */ .translate-left.is-active img { animation-name: kf-translate-left; } .translate-up.is-active img { animation-name: kf-translate-up; } /* [cite: 195] */ .translate-down.is-active img { animation-name: kf-translate-down; } /* ========================================================= 6) KEYFRAMES ========================================================= */ @keyframes kf-zoom-in { from { transform: scale(1.15); } to { transform: scale(1.4); } /* [cite: 190] */ } @keyframes kf-zoom-out { from { transform: scale(1.4); } to { transform: scale(1.15); } /* [cite: 191] */ } @keyframes kf-translate-right { from { transform: scale(1.25) translateX(-8%); } to { transform: scale(1.25) translateX(8%); } /* [cite: 193] */ } @keyframes kf-translate-left { from { transform: scale(1.25) translateX(8%); } to { transform: scale(1.25) translateX(-8%); } /* [cite: 194] */ } @keyframes kf-translate-up { from { transform: scale(1.25) translateY(8%); } to { transform: scale(1.25) translateY(-8%); } /* [cite: 196] */ } @keyframes kf-translate-down { from { transform: scale(1.25) translateY(-8%); } to { transform: scale(1.25) translateY(8%); } /* [cite: 197] */ } /* ========================================================= 20) Latepoint ========================================================= */ /* 1. Hide the Left Side Panel (Progress/Icons) */ .latepoint-side-panel { display: none !important; } /* 2. Hide the Right Side Panel (Summary/Checkout) */ .latepoint-summary-w { display: none !important; } /* 3. Force the Main Form to take up 100% width */ .latepoint-form-w { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } /* 4. Remove any borders or extra padding between the elements */ .latepoint-booking-form-element { display: block !important; } /* Change the Back button text and border to black */ .latepoint-footer .latepoint-prev-btn { color: #000000 !important; border-color: #000000 !important; background-color: transparent !important; } /* Change the arrow icon inside the Back button to black */ .latepoint-footer .latepoint-prev-btn i { color: #000000 !important; } /* Optional: Hover state to keep it black or slightly grey */ .latepoint-footer .latepoint-prev-btn:hover { background-color: #f5f5f5 !important; color: #000000 !important; }