/* Theme Name: Puppetx2 Twenty Twenty-Five Theme URI: https://github.com/amyuki/puppetx2twentytwentyfive Author: Yuki Zhang Author URI: https://sizheng.org Description: Designed by Puppetx2, built on Twenty Twenty-Five. Version: 1.0.1 Requires at least: 6.8 Tested up to: 6.8 Requires PHP: 8.2 Text Domain: puppetx2twentytwentyfive Tags: block-patterns, block-styles, custom-colors, custom-logo, editor-style, full-site-editing, template-editing, translation-ready */ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Restore ordered list numbering for content & Gutenberg blocks. The CSS reset above removes default markers; re-enable decimal numbering where lists are used in post content or block output. */ .entry-content ol, .wp-block-list ol, .wp-block-latest-posts__list, .wp-block-latest-posts__list ol, .wp-block-post-content ol, .wp-block-group ol, .wp-block-column ol { list-style-type: decimal; list-style-position: outside; margin: 0 0 1em 1.5rem; } /* Optional: style the marker in modern browsers for better contrast */ .entry-content ol li::marker, .wp-block-list ol li::marker { color: inherit; font-weight: 500; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; line-break: after-white-space; -webkit-user-select: auto; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* ========================================== Custom Styles for Puppetx2 Twenty Twenty-Five ========================================== */ /* ========================================== Base Layout ========================================== */ body { overflow-x: hidden; } .entry-content { margin-block-start: 0; } /* ========================================== Responsive Embeds (YouTube) ========================================== */ /* Ensure block embeds and iframes fill the content width */ .entry-content .wp-block-embed, .entry-content .wp-block-embed__wrapper, .entry-content .wp-block-embed-youtube, .entry-content iframe { width: 100%; max-width: 100%; display: block; } /* Modern browsers: prefer aspect-ratio to keep correct height automatically */ .entry-content iframe, .entry-content .wp-block-embed__wrapper { aspect-ratio: 16/9; height: auto; } /* Fallback for older browsers: intrinsic ratio wrapper */ .entry-content .wp-block-embed__wrapper { position: relative; padding-top: 56.25%; /* 16:9 ratio */ height: 0; overflow: hidden; } .entry-content .wp-block-embed__wrapper iframe, .entry-content .wp-block-embed__wrapper object, .entry-content .wp-block-embed__wrapper embed, .entry-content .wp-block-embed__wrapper>*>iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Stronger overrides: strip iframe inline width/height influence */ .responsive-embed, .entry-content .wp-block-embed__wrapper { max-width: 100%; } .responsive-embed iframe, .entry-content .wp-block-embed__wrapper iframe, .entry-content iframe { width: 100% !important; height: 100% !important; max-width: 100% !important; display: block !important; border: 0 !important; aspect-ratio: 16/9 !important; } /* If using the explicit responsive wrapper added by PHP filter */ .responsive-embed { position: relative; padding-top: 56.25%; /* 16:9 */ height: 0; overflow: hidden; } .responsive-embed iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } /* ========================================== Typography ========================================== */ h1, h2, h3, h4, h5, h6, .wp-block-heading, .entry-title, .page-title, .site-title { font-family: var(--wp--preset--font-family--noto-serif-tc); font-weight: 600; } /* Reapply sensible styling for emphasized text */ .entry-content strong, .wp-block strong, .wp-block-group strong, .wp-block-column strong { font-weight: 600; color: inherit; background-color: transparent; } /* Use page-scoped background color as a text color for headings and link titles The template sets `--puppetx2-page-bg` on the article element. This keeps color scoped to each page/post. */ .wp-block-post-content .wp-block-heading, .wp-block-post-content .wp-block-heading a { color: var(--puppetx2-page-bg); } .wp-block-post-content .wp-block-puppet-link-list ul li .link-title, .wp-block-post-content .wp-block-puppet-link-list ul li .link-title a { color: var(--puppetx2-page-bg); } /* ========================================== Content Width & Alignment ========================================== */ /* Default content width - centered */ .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) { max-width: 1200px; margin-left: auto; margin-right: auto; } /* Wide alignment */ .alignwide { max-width: 1554px; margin-left: auto; margin-right: auto; } /* Full width alignment */ .alignfull { max-width: 100%; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .alignright { float: right; margin-left: 1em; } .alignleft { float: left; margin-right: 1em; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } /* Ensure .alignfull can break out when nested inside constrained wrappers (e.g. when the_content() is inside .is-layout-constrained > .entry-content). */ .is-layout-constrained .wp-block-post-content .alignfull, .is-layout-constrained .entry-content .alignfull { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; max-width: none; } /* Extra large screens (1920px+) */ @media (min-width: 1920px) { .page-title-container { max-width: var(--wp--style--global--wide-size, 1280px); padding-left: 45px; padding-right: 20px; } .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) { max-width: 1314px; } .alignwide { max-width: 1554px; } } /* Medium to large desktop (1024px - 1919px) */ @media (min-width: 1024px) and (max-width: 1919px) { .page-title-container { max-width: var(--wp--style--global--wide-size, 1280px); padding-left: 45px; padding-right: 20px; } .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) { max-width: 1200px; } .alignwide { max-width: calc(1200px + (1554px - 1200px) * ((100vw - 1024px) / (1920px - 1024px))); } } /* Tablet (768px - 1023px) */ @media (min-width: 768px) and (max-width: 1023px) { .page-title-container, .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) { max-width: calc(279px + (1200px - 279px) * ((100vw - 375px) / (1024px - 375px))); } .alignwide { max-width: calc(337px + (1554px - 337px) * ((100vw - 375px) / (1920px - 375px))); } } /* Mobile landscape (375px - 767px) */ @media (min-width: 375px) and (max-width: 767px) { .page-title-container, .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) { max-width: calc(279px + (1200px - 279px) * ((100vw - 375px) / (1024px - 375px))); } .alignwide { max-width: calc(337px + (1554px - 337px) * ((100vw - 375px) / (1920px - 375px))); } } /* Small mobile (375px and below) */ @media (max-width: 375px) { .page-title-container, .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) { max-width: 279px; } /* Make alignwide scale down proportionally below 375px - at 375px viewport => 337px - at 320px viewport => 279px - clamp() keeps values within the desired range */ .alignwide { max-width: clamp(279px, calc(279px + ((100vw - 320px) * 1.05454545)), 337px); } } /* ========================================== Page Title Components ========================================== */ .page-title-container { margin: 0 auto; } .page-title-style-1 { position: relative; overflow: visible; z-index: 2; clip-path: path("M-1957,-394.5a2487.5,652.5 0 1,0 4975,0a2487.5,652.5 0 1,0 -4975,0"); /* Default background color; can be overridden per-page via slug class */ background-color: #a88d60; margin-top: 0; margin-bottom: 0; padding-top: 8rem; padding-bottom: 6rem; } /* Title text styles that were previously inline */ .page-title-style-1 .page-title { color: #F6F4EE; letter-spacing: 6.4px; padding-bottom: 20px; } /* Responsive Page Title - target: h1.page-title (and block-heading variants) - at 1920px viewport => 64px - at 375px viewport => 22px, letter-spacing: 2.2px - fluidly interpolates between those sizes */ .page-title-style-1 .page-title, h1.page-title, .wp-block-heading.page-title { font-size: clamp(22px, calc(2.718vw + 11.81px), 64px); letter-spacing: clamp(2.2px, calc(0.2718vw + 1.18px), 6.4px); line-height: 1.05; } /* Explicit caps for very large and very small viewports to ensure exact values */ @media (min-width: 1920px) { .page-title-style-1 .page-title, h1.page-title, .wp-block-heading.page-title { font-size: 64px; letter-spacing: 6.4px; } } @media (max-width: 375px) { .page-title-style-1 .page-title, h1.page-title, .wp-block-heading.page-title { font-size: 22px; letter-spacing: 2.2px; } } /* Per-page overrides ------------------ The template outputs an inline `background-color` style on the title wrapper. Default color is `#a88d60`. To set a custom color for a page, add a post meta named `page_bg_color` with a hex color value (e.g. `#123456`) via the editor or programmatically; that value will be used inline. Example: update_post_meta( $post_id, 'page_bg_color', '#123456' ); */ .category-news .page-title-style-1, .category-news .back-button-link { background-color: var(--wp--preset--color--primary); } .wp-block-heading.page-title::before { display: none; } /* ========================================== Hero Section - Projects Cover ========================================== */ .hero-projects-cover.alignfull { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: -185px; max-width: none; height: 800px; z-index: 1; } .hero-projects-cover .wp-block-cover__image-background { background-position: bottom center !important; background-size: cover; } .hero-projects-cover .wp-block-cover__inner-container { margin: 0 auto; position: relative; z-index: 2; padding-top: 185px; } /* Wave overlay decoration */ .hero-projects-cover::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 200px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='200' viewBox='0 0 1920 200' fill='none'%3E%3Cpath d='M0 179.5C0 179.5 -0.000427246 179.5 655.5 179.5C1311 179.5 1920 0 1920 0V200H0L0 179.5Z' fill='%23F6F4EE'/%3E%3C/svg%3E"); background-size: cover; background-repeat: no-repeat; background-position: bottom; pointer-events: none; z-index: 1; } /* ========================================== Home Page Specific Styles ========================================== */ .home .wp-block-heading { color: var(--wp--preset--color--dark-grayish-3); font-size: 64px !important; letter-spacing: 6.4px; } .home .wp-block-heading::before { display: none; } .home .wp-block-group.has-background { padding-left: 0; padding-right: 0; } /* ========================================== Navigation - Back Button ========================================== */ .back-button-wrapper { position: fixed; left: 0; top: 550px; z-index: 999; } .back-button-link { background-color: var(--wp--preset--color--dark-orange); color: #FFFFFF; border: none; border-radius: 0 25px 25px 0; padding: 12px 24px; font-size: 16px; font-weight: 400; line-height: 1; text-decoration: none; display: flex; align-items: center; gap: 8px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); transition: background-color 0.3s ease; } .back-button-link:hover { background-color: var(--wp--preset--color--dark-grayish-4); } .back-button-link .back-icon { width: 20px; height: 20px; flex-shrink: 0; } /* ========================================== Pagination ========================================== */ .wp-block-query-pagination { margin-top: 3rem; padding-bottom: 120px; gap: 1rem; display: flex; justify-content: center; align-items: center; } .wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { text-decoration: none; font-size: 30px; letter-spacing: 3px; color: #9f9d90; transition: all 0.3s ease; } .wp-block-query-pagination .page-numbers { display: flex; gap: 1rem; align-items: center; } .wp-block-query-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 36px; font-size: 30px; color: #9f9d90; text-decoration: none; border: none; background: transparent; } .wp-block-query-pagination .page-numbers.current { color: #f6f4ee; background: #2C2C2C; border-radius: 13.5px; font-weight: 600; } .wp-block-query-pagination .page-numbers:not(.current):hover { color: #2C2C2C; } .wp-block-query-pagination .dots { color: #9f9d90; letter-spacing: 3px; } .wp-block-query-pagination .page-numbers.next { margin-left: 3rem; } .wp-block-query-pagination .page-numbers.prev { margin-right: 3rem; } /* ========================================== Back to Top Button ========================================== */ #back-to-top svg { overflow: visible; } #back-to-top svg .dot1, #back-to-top svg .dot2 { transition: transform 0.3s cubic-bezier(0.4, 2, 0.2, 1); } #back-to-top:hover svg .dot1 { transform: translateY(-32px); } #back-to-top:hover svg .dot2 { transform: translateY(-16px); } /* Back to Top flows at the end of content (not fixed). Provide spacing above it: desktop 120px, mobile 40px. Center it horizontally. */ #back-to-top { position: static; /* keep in document flow */ display: flex; align-items: center; justify-content: center; margin-top: 120px; text-align: center; } /* ========================================== Utility Classes ========================================== */ .mobile-only { display: none; } /* ========================================== Responsive Design - Large Screens (1957px+) ========================================== */ @media (min-width: 1957px) { .hero-buttons-wrapper { top: 200px; } } /* ========================================== Responsive Design - Mobile (769px and below) ========================================== */ @media (max-width: 769px) { /* Layout adjustments */ :root :where(.is-layout-flow)>* { margin-block-start: 21px; } /* Typography */ .has-title-font-size { font-size: 22px !important; letter-spacing: 2.2px !important; } .has-heading-font-size { font-size: 18px !important; letter-spacing: 1.2px !important; } .wp-block-table>table, p { font-size: 12px; line-height: 24px !important; } /* Page title */ .page-title-style-1 { padding-bottom: 1rem !important; clip-path: path("M-755,20a960,168 0 1,0 1920,0a960,168 0 1,0 -1920,0"); } /* Buttons */ .wp-block-buttons .wp-block-button__link { font-size: 12px; letter-spacing: 1.2px; padding: 4px 14px; } .wp-block-buttons.is-layout-flex .wp-block-button { width: auto; /* Ensure individual buttons can be inline when horizontal */ } .wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex { display: flex; flex-direction: row; flex-wrap: wrap; gap: 13px; } /* Headings */ .home .wp-block-heading { font-size: 22px; letter-spacing: 2.2px; } .wp-block-heading { align-items: flex-start; } .wp-block-heading::before { width: 11px; height: 11px; margin-top: 7px; } /* Utility classes */ .mobile-only { display: block; } /* Back to Top on mobile: closer to top */ #back-to-top { margin-top: 40px; } /* Reduce the back-to-top SVG size on mobile for better fit */ #back-to-top svg { width: 23px !important; height: auto !important; } .hide-mobile { display: none !important; } /* Pagination */ .wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { font-size: 17.361px; letter-spacing: 1.736px; } .wp-block-query-pagination .page-numbers { min-width: 14px; height: 22px; font-size: 17.361px; } .wp-block-query-pagination .page-numbers.next svg, .wp-block-query-pagination a.next svg, .wp-block-query-pagination a.next .page-numbers svg, .wp-block-query-pagination .page-numbers.prev svg, .wp-block-query-pagination a.prev svg, .wp-block-query-pagination a.prev .page-numbers svg { width: 7.76px; height: auto; display: inline-block; } } /* ========================================== Responsive Design - Mobile (768px and below) ========================================== */ @media (max-width: 768px) { /* Hero section */ .hero-projects-cover.alignfull { height: auto; min-height: 600px; } .hero-projects-cover .wp-block-cover__image-background { height: 400px; object-fit: cover; } .hero-projects-cover .wp-block-cover__inner-container { padding-top: 420px; padding-bottom: 40px; } .hero-projects-cover::after { top: 320px; bottom: auto; height: 80px; } /* Back button */ .back-button-wrapper { top: 200px; } .back-button-link { padding: 10px 20px; font-size: 14px; } .back-button-link .back-icon { width: 18px; height: 18px; } } .site-mega-menu__nav { align-items: center; background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .38) 46.63%, rgba(0, 0, 0, .12) 78.85%, transparent); display: flex; justify-content: space-between; left: 0; max-height: 100px; padding: 27px 40px 15px; position: fixed; right: 0; top: 0; transition: background .3s ease; width: 100%; z-index: 1000 } .admin-bar .site-mega-menu__nav { top: var(--wp-admin--admin-bar--height, 0) } .site-mega-menu__nav .site-logo-link .logo-color { left: 0; opacity: 0; position: absolute; top: 0; transition: opacity .3s } .site-mega-menu__nav .site-logo-link { display: inline-block; position: relative } .site-mega-menu__nav .site-logo-link .logo-white { display: block } @media(min-width:769px) { .site-mega-menu__nav:has(~.site-mega-menu__overlay:hover), .site-mega-menu__nav:hover { background: rgba(0, 0, 0, .85) } .site-mega-menu__nav:has(~.site-mega-menu__overlay:hover)~.site-mega-menu__overlay, .site-mega-menu__nav:hover~.site-mega-menu__overlay { opacity: 1; pointer-events: auto; visibility: visible } } .site-mega-menu__logo { flex-shrink: 0 } .site-mega-menu__logo img { max-height: 66px } .site-mega-menu__level1 { display: flex; gap: 55px; list-style: none; margin: 0; padding: 0 } .site-mega-menu__level1-item { width: 120px } .site-mega-menu__level1-item a { color: #fff; display: block; font-family: "Source Serif 4", "Noto Serif TC", serif; font-weight: 600; text-decoration: none } .site-mega-menu__level1-item a .menu-label { font-size: 20px; line-height: 1.5; word-wrap: normal } .site-mega-menu__level1-item a .menu-description { font-size: 14px; word-wrap: normal; line-height: 1 } .site-mega-menu__overlay { background: rgba(0, 0, 0, .85); left: 0; opacity: 0; overflow: hidden; padding: 0 55px 40px 40px; pointer-events: none; position: fixed; right: 0; top: 100px; transition: opacity .3s ease, visibility .3s ease; visibility: hidden; width: 100vw; z-index: 999 } .admin-bar .site-mega-menu__overlay { top: calc(100px + var(--wp-admin--admin-bar--height, 0px)) } .site-mega-menu__overlay:hover { opacity: 1; pointer-events: auto; visibility: visible } .site-mega-menu__overlay-inner { align-items: flex-start; display: flex; justify-content: space-between; max-height: calc(100vh - 175px); opacity: 0; transform: translateY(-5px); transition: opacity .3s ease .1s, transform .3s ease .1s } .site-mega-menu:hover .site-mega-menu__overlay-inner, .site-mega-menu__nav:hover~.site-mega-menu .site-mega-menu__overlay-inner { opacity: 1; transform: translateY(0) } .site-mega-menu:hover .site-logo-link .logo-white, .site-mega-menu__nav:hover~.site-mega-menu .site-logo-link .logo-white { opacity: 0 } .site-mega-menu:hover .site-logo-link .logo-color, .site-mega-menu__nav:hover~.site-mega-menu .site-logo-link .logo-color { opacity: 1 } .site-mega-menu__logo-spacer { flex-shrink: 0; visibility: hidden } .site-mega-menu__level2-wrapper { display: flex; gap: 55px } .site-mega-menu__submenu-column { display: flex; flex-direction: column; flex-shrink: 0; gap: 15px; overflow: hidden; width: 120px } .site-mega-menu__submenu-column ul { flex-direction: column; gap: 15px; list-style: none; margin: 0; padding: 0 } .site-mega-menu__submenu-item { margin-bottom: 15px } .site-mega-menu__submenu-item a { color: #9f9d90; display: block; font-family: "Source Serif 4", "Noto Serif TC", serif; font-weight: 600; text-decoration: none } .site-mega-menu__submenu-item a .menu-label { font-size: 20px; line-height: 1.5; word-wrap: normal } .site-mega-menu__submenu-item a .menu-description { font-size: 14px; word-wrap: normal; line-height: 1 } .site-mega-menu__submenu-item a:hover { color: #fff } .site-mega-menu__hamburger { display: none } @media(max-width:768px) { .site-mega-menu__hamburger { background: none; border: none; cursor: pointer; display: block; height: 24px; padding: 0; position: fixed; right: 40px; top: 38px; width: 30px; z-index: 1003 } .admin-bar .site-mega-menu__hamburger { top: calc(38px + var(--wp-admin--admin-bar--height, 0px)) } .site-mega-menu__hamburger span { background: #fff; display: block; height: 2px; left: 0; position: absolute; transition: all .3s ease; width: 100% } .site-mega-menu__hamburger span:first-child { top: 0 } .site-mega-menu__hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%) } .site-mega-menu__hamburger span:nth-child(3) { bottom: 0 } .site-mega-menu__hamburger.is-open span:first-child { top: 50%; transform: translateY(-50%) rotate(45deg) } .site-mega-menu__hamburger.is-open span:nth-child(2) { opacity: 0 } .site-mega-menu__hamburger.is-open span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg) } .site-mega-menu__level1, .site-mega-menu__overlay { display: none } .site-mega-menu__mobile-overlay { background: rgba(0, 0, 0, .85); bottom: 0; left: 0; opacity: 0; overflow-y: auto; padding-top: 120px; position: fixed; right: 0; scrollbar-width: none; top: 0; transition: opacity .3s ease, visibility .3s ease; visibility: hidden; z-index: 1001; -ms-overflow-style: none } .site-mega-menu__mobile-overlay::-webkit-scrollbar { display: none } .site-mega-menu__mobile-overlay.is-open { opacity: 1; visibility: visible } .site-mega-menu__mobile-menu { display: flex; flex-direction: column; min-height: calc(100vh - 120px); padding: 40px 60px } .site-mega-menu__mobile-level1-item { width: 100% } .site-mega-menu__mobile-item-wrapper { display: flex; gap: 15px; justify-content: space-between; margin-bottom: 15px } .site-mega-menu__mobile-link { color: #fff; display: flex; font-family: "Source Serif 4", "Noto Serif TC", serif; text-decoration: none } .site-mega-menu__mobile-link .menu-text { align-items: center; display: flex; gap: 8px } .site-mega-menu__mobile-link .menu-label { color: #fff; font-size: 24px; font-weight: 600; line-height: 1; white-space: nowrap } .site-mega-menu__mobile-link .menu-description { color: #fff; font-size: 24px; font-weight: 600; line-height: 1; opacity: 1 } .site-mega-menu__mobile-toggle-icon { align-items: center; background: none; border: none; color: #fff; cursor: pointer; display: flex; flex-shrink: 0; height: 32px; justify-content: center; padding: 0; position: relative; width: 32px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } .site-mega-menu__mobile-toggle-icon svg { height: 24px; pointer-events: none; position: absolute; transition: opacity .2s ease, transform .2s ease; width: 24px } .site-mega-menu__mobile-toggle-icon .chevron-right { opacity: 1; transform: scale(1) } .site-mega-menu__mobile-toggle-icon .chevron-down, .site-mega-menu__mobile-toggle-icon.is-open .chevron-right { opacity: 0; transform: scale(.8) } .site-mega-menu__mobile-toggle-icon.is-open .chevron-down { opacity: 1; transform: scale(1) } .site-mega-menu__mobile-submenu { display: flex; flex-direction: column; margin-bottom: 15px; max-height: 0; overflow: hidden; transition: max-height .3s ease; width: 100% } .site-mega-menu__mobile-submenu.is-expanded { max-height: 2000px } .site-mega-menu__mobile-submenu a { align-items: center; color: #fff; display: flex; font-family: "Source Serif 4", "Noto Serif TC", serif; gap: 8px; padding: 15px 20px; text-decoration: none; width: 100% } .site-mega-menu__mobile-submenu a .menu-label { color: #fff; font-size: 24px; font-weight: 600; line-height: 1; white-space: nowrap } .site-mega-menu__mobile-submenu a .menu-description { color: #fff; font-size: 24px; font-weight: 600; line-height: 1; opacity: 1 } .site-mega-menu__mobile-submenu a:active, .site-mega-menu__mobile-submenu a:hover { opacity: .7 } } @media(min-width:769px) { .site-mega-menu__hamburger, .site-mega-menu__mobile-overlay { display: none } } /* ========================================== Footer Styles - Desktop & Mobile Responsive ========================================== */ /* Footer Container */ footer#colophon { color: #ffffff; padding: 0; } .footer-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 50px 20px 0; } /* Footer Content - Three Column Layout */ .footer-content { display: grid; grid-template-columns: auto 1fr auto; gap: 60px; margin-bottom: 30px; align-items: start; } /* Column 1: Logo */ .footer-logo { min-width: 150px; } /* Column 2: Navigation */ .footer-navigation { display: flex; flex-direction: column; gap: 30px; } .footer-nav-columns { display: grid; grid-template-columns: auto auto 1fr; gap: 40px; } .footer-nav-col { min-width: 100px; } /* Navigation Styles */ footer#colophon .wp-block-navigation { display: block; } footer#colophon .wp-block-navigation__container { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } footer#colophon .wp-block-navigation-item { margin: 0; } footer#colophon .wp-block-navigation-item__content { color: #ffffff; text-decoration: none; display: inline-block; font-family: "Noto Serif TC", serif; font-weight: 600; font-size: 20px; letter-spacing: 2px; transition: color 0.3s ease; } footer#colophon .wp-block-navigation-item__content:hover { color: #9f9d90; } footer#colophon .wp-block-navigation-item__label { display: inline-block; } /* Social + Taiwan Top Row */ .footer-social-taiwan { display: flex; justify-content: space-between; align-items: start; gap: 20px; } /* Social Links */ footer#colophon .wp-block-social-links { display: flex; gap: 15px; list-style: none; margin: 0; padding: 0; align-items: center; } footer#colophon .wp-block-social-link { margin: 0; } footer#colophon .wp-block-social-link a { color: #ffffff; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; transition: opacity 0.3s ease; text-decoration: none; } footer#colophon .wp-block-social-link a:hover { opacity: 0.8; text-decoration: none; } footer#colophon .wp-block-social-link .dashicons { font-size: 50px; width: 50px; height: 50px; } .footer-taiwan-top { display: flex; align-items: center; } /* Column 3: Contact Info */ .footer-contact { min-width: 300px; } .footer-contact-info { font-size: 16px; line-height: 45px; font-weight: 500; font-family: 'Source Serif 4', 'Noto Serif TC', serif; } /* Footer Separator */ .footer-separator { width: 100vw; height: 1px; background-color: #fff; margin: 30px 0 0; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } /* Footer Copyright */ .footer-copyright { text-align: center; font-size: 15px; color: #fff; font-family: 'Source Serif 4', 'Noto Serif TC', serif; font-weight: 400; line-height: 15px; letter-spacing: 1.5px; padding: 25px 0; } /* ========================================== Mobile Responsive Styles ========================================== */ @media (max-width: 768px) { .footer-container { padding: 30px 20px 0; } /* Stack columns vertically on mobile */ .footer-content { grid-template-columns: 1fr; gap: 30px; text-align: center; } /* Center logo on mobile */ .footer-logo { display: flex; justify-content: center; margin: 0 auto; } /* Navigation - keep 3 columns on mobile */ .footer-navigation { gap: 25px; } .footer-nav-columns { grid-template-columns: repeat(3, 1fr); gap: 15px; } footer#colophon .wp-block-navigation__container { align-items: start; gap: 12px; } footer#colophon .wp-block-navigation-item__content { font-size: 14px; letter-spacing: 1px; } /* Social + Taiwan Top - two columns layout */ .footer-social-taiwan { flex-direction: row; gap: 20px; align-items: center; justify-content: space-between; } footer#colophon .wp-block-social-links { justify-content: flex-start; } .footer-taiwan-top { justify-content: flex-end; } /* Contact aligned left on mobile */ .footer-contact { text-align: left; } .footer-contact-info { font-size: 12px; line-height: 21px; } .footer-separator { margin: 20px 0 0; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } .footer-copyright { font-size: 12px; padding: 15px 0; } } /* Tablet adjustments */ @media (min-width: 769px) and (max-width: 1024px) { .footer-content { grid-template-columns: 1fr; gap: 40px; } .footer-nav-columns { grid-template-columns: repeat(3, 1fr); gap: 30px; } .footer-contact { width: 100%; } } /* Small mobile screens - prevent overflow */ @media (max-width: 426px) { .footer-container { padding: 30px 15px 0; overflow-x: hidden; } .wp-block-navigation__container li { display: flex; text-align: left; } /* Stack social and taiwan top vertically on very small screens */ .footer-social-taiwan { gap: 15px; align-items: center; } footer#colophon .wp-block-social-links { justify-content: center; } footer#colophon .wp-block-social-link a { width: 34.722px; height: 34.722px; } .footer-taiwan-top { justify-content: center; max-width: 100%; overflow: hidden; } .footer-taiwan-top img { width: 121.528px; height: auto; } /* Adjust navigation gaps for smaller screens */ .footer-nav-columns { gap: 10px; } footer#colophon .wp-block-navigation__container { gap: 8px; } footer#colophon .wp-block-navigation-item__content { font-size: 15px; letter-spacing: 1.5px; } } /* Extra small screens (320px) - single column navigation */ @media (max-width: 375px) { .site-mega-menu__nav { padding: 27px 15px 15px; } .site-mega-menu__mobile-menu { padding: 40px 15px; } .footer-container { padding: 20px 10px 0; overflow-x: hidden; max-width: 100%; } .footer-content { gap: 20px; overflow-x: hidden; } /* Logo smaller on tiny screens */ .footer-logo { min-width: auto; max-width: 120px; } .footer-logo img { max-width: 100%; height: auto; } .footer-nav-col { min-width: auto; width: 100%; } footer#colophon .wp-block-navigation__container { width: 100%; } footer#colophon .wp-block-navigation-item__content { word-wrap: break-word; } /* Social icons smaller */ footer#colophon .wp-block-social-link a { width: 32px; height: 32px; } footer#colophon .wp-block-social-link .dashicons { font-size: 28px; width: 28px; height: 28px; } /* Taiwan top smaller */ .footer-taiwan-top { max-width: 90%; } .footer-taiwan-top img { max-width: 100%; height: auto; } /* Contact info adjustments */ .footer-contact { width: 100%; overflow-x: hidden; } .footer-copyright { font-size: 7px; letter-spacing: 0.7px; } } @media (min-width: 1800px) { .footer-container { max-width: 1474px; } .footer-content { gap: 126px; } .footer-nav-columns { gap: 80px; } } /* News article meta (single-news.php) ------------------------------------------------ */ .news-navbar .wp-block-buttons { gap: 35px; } .news-navbar { margin-bottom: 40px; } .news-article-meta-container { margin-top: 60px; margin-bottom: 50px; padding: 80px 0; } .news-article-meta { display: flex; align-items: center; gap: 79px; flex-wrap: wrap; } .tag-activity .wp-block-heading { color: var(--wp--preset--color--dark-green); } .tag-activity .wp-block-button.is-style-outline.is-style-outline--1 .wp-block-button__link { border-color: var(--wp--preset--color--dark-green); color: var(--wp--preset--color--dark-green); background-color: transparent; } .tag-activity .wp-block-button .wp-block-button__link { background-color: var(--wp--preset--color--dark-green); } .tag-newsletter .wp-block-heading { color: var(--wp--preset--color--dark-orange); } .tag-newsletter .wp-block-button.is-style-outline.is-style-outline--1 .wp-block-button__link { border-color: var(--wp--preset--color--dark-orange); color: var(--wp--preset--color--dark-orange); background-color: transparent; } .tag-newsletter .wp-block-button .wp-block-button__link { background-color: var(--wp--preset--color--dark-orange); } .tag-announcement .wp-block-heading { color: var(--wp--preset--color--dark-grayish-1); } .tag-announcement .wp-block-button.is-style-outline.is-style-outline--1 .wp-block-button__link { border-color: var(--wp--preset--color--dark-grayish-1); color: var(--wp--preset--color--dark-grayish-1); background-color: transparent; } .tag-announcement .wp-block-button .wp-block-button__link { background-color: var(--wp--preset--color--dark-grayish-1); } .news-article-separator { border-top: solid 1px #9f9d90; } @media (max-width: 768px) { .news-navbar { margin-top: 15px; } .news-navbar .wp-block-buttons { gap: 12px; } .news-article-meta-container { margin-top: 20px; margin-bottom: 15px; padding: 10px 0; } .news-article-meta { gap: 17.36px; } } /* End news article meta ----------------------------------------------------- */ /* ===== Merged from assets/css/category-news.css ===== */ .category-news-template .wp-block-buttons.is-nowrap.is-layout-flex { margin-top: 0; } .category-news-template .wp-block-buttons.is-nowrap.is-layout-flex a:hover { background-color: var(--wp--preset--color--secondary) !important; } ul.wp-block-post-template li { margin-block-start: 0; } .post-list-item { display: flex; align-items: center; gap: 5rem; padding: 10px 0; border-bottom: 1px solid #9f9d90; cursor: pointer; transition: background-color 0.3s ease; } /* .category-news-template .post-list-item:hover { background-color: rgba(173, 140, 89, 0.1) } */ /* Left Meta Section - Horizontal layout */ .post-meta-left { display: flex; flex-direction: row; align-items: center; gap: 5rem; min-width: 120px; flex-shrink: 0; } /* Tag Styling */ .post-tag { color: white; border-radius: 50%; width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; font-size: 20px; text-align: center; padding: 10px; line-height: 25px; flex-shrink: 0; font-family: var(--wp--preset--font-family--noto-serif-tc); font-weight: 600; letter-spacing: 2px; } .post-tag a { color: white; text-decoration: none; } .post-tag a:first-child~.wp-block-post-terms__separator { display: none; } /* Color Classes */ .tag-newsletter .post-tag { background: #b8956a; } .post-tag { background: #414438; } .tag-newsletter .post-title { color: #b8956a; } .tag-activity .post-tag { background: #7a9b76; } .tag-activity .post-title { color: #7a9b76; } .tag-announcement .post-tag { background: #9a9a9a; } .tag-announcement .post-title { color: #9a9a9a; } .post-tag.tag-dark-grey { background: #5a5a5a; } .post-tag.tag-default { background: #666666; } .category-repertoire.tag-mature .post-hero-slider-curve, .category-repertoire.tag-mature .wp-block-buttons .wp-block-button__link, .category-repertoire.tag-mature .mobile-only.repertoire-meta .repertoire-hashtag-pill, .category-repertoire.tag-mature .post-hero-hashtag-pill { background-color: #667F89; } .category-repertoire.tag-mature .wp-block-heading, .category-repertoire.tag-mature .mobile-only.repertoire-meta .repertoire-title, .category-repertoire.tag-mature .mobile-only.repertoire-meta .repertoire-title-en { color: #667F89; } .category-repertoire.tag-global .post-hero-slider-curve, .category-repertoire.tag-global .wp-block-buttons .wp-block-button__link, .category-repertoire.tag-global .mobile-only.repertoire-meta .repertoire-hashtag-pill, .category-repertoire.tag-global .post-hero-hashtag-pill { background-color: #8C8A81; } .category-repertoire.tag-global .wp-block-heading, .category-repertoire.tag-global .mobile-only.repertoire-meta .repertoire-title, .category-repertoire.tag-global .mobile-only.repertoire-meta .repertoire-title-en { color: #8C8A81; } .category-repertoire.tag-general .post-hero-slider-curve, .category-repertoire.tag-general .wp-block-buttons .wp-block-button__link, .category-repertoire.tag-general .mobile-only.repertoire-meta .repertoire-hashtag-pill, .category-repertoire.tag-general .post-hero-hashtag-pill { background-color: #AD8C59; } .category-repertoire.tag-general .wp-block-heading, .category-repertoire.tag-general .mobile-only.repertoire-meta .repertoire-title, .category-repertoire.tag-general .mobile-only.repertoire-meta .repertoire-title-en { color: #AD8C59; } .category-repertoire.tag-family .post-hero-slider-curve, .category-repertoire.tag-family .wp-block-buttons .wp-block-button__link, .category-repertoire.tag-family .mobile-only.repertoire-meta .repertoire-hashtag-pill, .category-repertoire.tag-family .post-hero-hashtag-pill { background-color: #7F8760; } .category-repertoire.tag-family .wp-block-heading, .category-repertoire.tag-family .mobile-only.repertoire-meta .repertoire-title, .category-repertoire.tag-family .mobile-only.repertoire-meta .repertoire-title-en { color: #7F8760; } .category-repertoire.tag-fusion .post-hero-slider-curve, .category-repertoire.tag-fusion .wp-block-buttons .wp-block-button__link, .category-repertoire.tag-fusion .mobile-only.repertoire-meta .repertoire-hashtag-pill, .category-repertoire.tag-fusion .post-hero-hashtag-pill { background-color: #9E7872; } .category-repertoire.tag-fusion .wp-block-heading, .category-repertoire.tag-fusion .mobile-only.repertoire-meta .repertoire-title, .category-repertoire.tag-fusion .mobile-only.repertoire-meta .repertoire-title-en { color: #9E7872; } /* Date Styling - Vertical in horizontal container */ .post-date { display: block; text-align: center; } .post-date time { display: flex; flex-direction: column; align-items: start; gap: 0.2rem; line-height: 1; font-family: var(--wp--preset--font-family--noto-sans-tc); } .date-year { font-size: 30px; letter-spacing: 3px; } .date-month-day { font-size: 40px; letter-spacing: 4px; } /* Middle Content Section */ .post-content-middle { flex-grow: 1; min-width: 0; } .post-title { margin-top: 0; } .post-title a { text-decoration: none; display: block; margin-bottom: 0.5rem; } /* Excerpt Styling - Reset margin and inline more text */ .post-excerpt.wp-block-post-excerpt { margin-block-start: 0; margin-top: 0; } .post-excerpt p { margin: 0; } .wp-block-post-excerpt__excerpt { display: inline; line-height: 30px; } .wp-block-post-excerpt__more-text { display: inline; margin-left: 0; } .wp-block-post-excerpt__more-link { display: none; } /* Featured Image - Custom dimensions with border-radius */ .post-thumbnail { flex-shrink: 0; width: 361px; height: 219px; border-radius: 128px; overflow: hidden; transition: transform 0.3s ease; } .post-thumbnail img { object-fit: cover; width: 100%; height: 100%; transition: transform 0.3s ease; } /* Hover animation on thumbnail */ .post-list-item:hover .post-thumbnail img { transform: scale(1.1); } /* Responsive Design */ @media (max-width: 768px) { .post-list-item { gap: 19px; } .post-meta-left { min-width: 33px; } .post-tag { width: 33px; height: 33px; font-size: 9px; letter-spacing: 0.9px; line-height: 10.417px; padding: 5px; } .post-date { display: none; } .date-year, .date-month-day, time.mobile-only { font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 1.4px; } .post-thumbnail { width: 125px; height: 72px; aspect-ratio: 361/219; border-radius: 40px; } .post-title { font-size: 12px !important; letter-spacing: 1.2px !important; } .wp-block-post-excerpt { display: none; } } /* ===== End merged category-news styles ===== */ /** Pill-shaped Search Form Styles **/ .search-form-container { margin-bottom: 40px; display: flex; align-items: center; gap: 16px; } .pill-search-form { display: flex; align-items: center; width: 355px; max-width: 100%; border: 2px solid #9D9D9D; border-radius: 999px; padding: 9px 22px 6px; box-sizing: border-box; transition: width 0.35s ease; } /* hover 在表單或裡面的任何元素時都展開 */ .pill-search-form:hover, .pill-search-form:focus-within { width: 396px; } .pill-search-input { flex: 1; border: none; background: transparent; outline: none; font-size: 22px; } .pill-search-button { border: none; background: none; padding: 0; margin-left: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* 移除按钮的默认 focus 样式，按需自行设计可访问性样式 */ .pill-search-button:focus { outline: none; } /* 隐藏 Chrome / Safari 等 WebKit 浏览器的清除按钮和装饰 */ .pill-search-input::-webkit-search-cancel-button, .pill-search-input::-webkit-search-decoration, .pill-search-input::-webkit-search-results-button, .pill-search-input::-webkit-search-results-decoration { display: none; } .search-results-count { color: #9F9D90; font-family: var(--wp--preset--font-family--noto-serif-tc); font-weight: 400; letter-spacing: 2.5px; } @media (max-width: 767px) { .pill-search-form { width: 191px; } .pill-search-form:hover, .pill-search-form:focus-within { width: 221px; } .pill-search-input { font-size: 12px; letter-spacing: 1.2px; } .pill-search-button svg { width: 12px; height: 12px; } .search-results-count { font-size: 12px; font-weight: 500; letter-spacing: 1.2px; } .not-found { color: #2C2C2C; font-family: var(--wp--preset--font-family--noto-serif-tc); font-size: 17px; font-weight: 600; letter-spacing: 1.7px; } } /** Post Grid Styles with Hover Effect **/ .post-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 40px; } .post-card a { display: block; text-decoration: none; color: inherit; } /* 正方形 */ .post-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; background-size: cover; background-position: center; overflow: hidden; } /* 左下角小色塊（預設狀態） */ .post-overlay { position: absolute; left: 0; bottom: 0; width: 193px; height: 170px; background: #667F89; color: #fff; padding: 8px 10px; display: flex; flex-direction: column; justify-content: flex-end; clip-path: path("M0 0C0 0 0.499634 74.6432 62 122.967C123.5 171.291 193 169.997 193 169.997H0V0Z"); transform-origin: left; transition: 0.3s ease } /* hover：色塊向右推開變成全寬長方形遮罩 */ .post-card:hover .post-overlay { width: 100%; clip-path: inset(0 0 0 0 round 0); } .post-meta-year, .post-title-zh, .post-title-en { opacity: 0; transition: 0.5s ease-in-out; } /* 文字樣式，自行微調 */ .post-meta-year { letter-spacing: 2.5px; } .post-title-zh { font-size: 36px; font-weight: 600; letter-spacing: 3.6px; font-family: var(--wp--preset--font-family--noto-serif-tc); } .post-title-en { font-weight: 600; letter-spacing: 2.5px; font-family: var(--wp--preset--font-family--noto-serif-tc); } .post-card:hover .post-meta-year, .post-card:hover .post-title-zh, .post-card:hover .post-title-en { opacity: 1; } @media (max-width: 767px) { .post-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; } .post-overlay { left: 0; bottom: 0; width: 100%; height: 45%; padding: 10px 12px; background: rgba(102, 127, 137, 0.96); clip-path: inset(0 0 0 0 round 0); /* 直接長方形 */ } .post-meta-year, .post-title-zh, .post-title-en { opacity: 1; } /* 手機端 hover 無效，這裡只是避免有差異 */ .post-card:hover .post-overlay { width: 100%; height: 45%; } .post-meta-year { font-size: 12px; letter-spacing: 1.2px; } .post-title-zh { font-size: 12px; letter-spacing: 1.2px; } .post-title-en { font-size: 8px; letter-spacing: 0.8px; } } /** repertorie post styles **/ .mobile-only.repertoire-meta .repertoire-title { font-size: 28px; font-weight: 600; line-height: 39px; letter-spacing: 2.8px; font-family: var(--wp--preset--font-family--noto-serif-tc); } .mobile-only.repertoire-meta .repertoire-title-en { font-size: 14px; font-weight: 600; font-family: var(--wp--preset--font-family--noto-serif-tc); } .mobile-only.repertoire-meta .repertoire-hashtags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .mobile-only.repertoire-meta .repertoire-hashtag-pill { display: inline-block; color: white; padding: 3px 7px; border-radius: 999px; font-size: 12px; letter-spacing: 1.2px; font-weight: 600; font-family: var(--wp--preset--font-family--noto-sans-tc); } /* ======================================================== Ensure mobile `.alignwide` follows `style.css` responsive rules instead of values generated from `theme.json`. These overrides use the same responsive calculations already present in this stylesheet and increase specificity with `!important` to take precedence. ======================================================== */ @media (min-width: 768px) and (max-width: 1023px) { .alignwide { max-width: calc(279px + (1200px - 279px) * ((100vw - 375px) / (1024px - 375px))) !important; margin-left: auto !important; margin-right: auto !important; width: auto !important; } } @media (min-width: 1024px) and (max-width: 1919px) { .alignwide { max-width: calc(1200px + (1554px - 1200px) * ((100vw - 1024px) / (1920px - 1024px))) !important; margin-left: auto !important; margin-right: auto !important; width: auto !important; } } @media (max-width: 769px) { /* Mobile landscape & smaller mobiles */ .alignwide { max-width: calc(337px + (1554px - 337px) * ((100vw - 375px) / (1920px - 375px))) !important; margin-left: auto !important; margin-right: auto !important; width: auto !important; } } @media (max-width: 375px) { /* Very small screens: keep explicit small width from stylesheet */ .alignwide { max-width: 279px !important; margin-left: auto !important; margin-right: auto !important; width: auto !important; } }