/* Theme Name: Power Sesugong Theme URI: https://www.band.us/band/97480819/post Author: Webmate Description: 동영박사의 파워세수공 공식 콘텐츠 허브를 위한 클래식 워드프레스 테마입니다. Version: 1.1.0 Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 8.0 Text Domain: power-sesugong */ :root { --ps-navy: #0c2851; --ps-navy-strong: #071d3d; --ps-blue: #156fe8; --ps-blue-dark: #0c55bd; --ps-sky: #eaf5ff; --ps-sky-strong: #cce8ff; --ps-mint: #c8f5ee; --ps-white: #ffffff; --ps-ink: #17253b; --ps-muted: #66758b; --ps-line: #dce6f1; --ps-surface: #f7faff; --ps-success: #0c8b72; /* Channel brand colours, darkened until white label text clears WCAG AA (BAND #00c73c is only 2.3:1 on white, YouTube #ff0000 only 4.0:1). */ --ps-band: #00842f; --ps-band-dark: #006d27; --ps-youtube: #cc0000; --ps-youtube-dark: #a70000; --ps-radius-sm: 12px; --ps-radius: 22px; --ps-radius-lg: 36px; --ps-shadow: 0 18px 50px rgba(12, 40, 81, 0.1); --ps-container: 1180px; /* Single reading column. Hero copy, prose, figures and notices all align to this so a long page has one left edge instead of several. */ --ps-measure: 820px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ps-ink); background: var(--ps-white); font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 19px; line-height: 1.75; word-break: keep-all; -webkit-font-smoothing: antialiased; } /* The scroll container is ; locking only leaves the page scrollable. */ html.menu-open, html.menu-open body { overflow: hidden; overscroll-behavior: none; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { top: 8px; left: 8px; z-index: 100000; width: auto; height: auto; padding: 12px 18px; clip: auto; color: var(--ps-navy); background: var(--ps-white); border-radius: 8px; box-shadow: var(--ps-shadow); } .ps-container { width: min(calc(100% - 40px), var(--ps-container)); margin-inline: auto; } .ps-section { padding: 104px 0; } .ps-section--soft { background: var(--ps-surface); } .ps-section--navy { color: var(--ps-white); background: var(--ps-navy); } .ps-section__head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 44px; } .ps-section__head-copy { max-width: 720px; } .ps-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--ps-blue); font-size: 16px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .ps-eyebrow::before { width: 22px; height: 3px; content: ""; background: currentColor; border-radius: 999px; } .ps-section--navy .ps-eyebrow, .ps-cta .ps-eyebrow { color: #8dccff; } .ps-title { margin: 0; color: var(--ps-navy); font-size: clamp(34px, 4vw, 54px); font-weight: 850; line-height: 1.2; letter-spacing: -0.045em; } .ps-section--navy .ps-title, .ps-cta .ps-title { color: var(--ps-white); } .ps-lead { max-width: 680px; margin: 20px 0 0; color: var(--ps-muted); font-size: clamp(20px, 2.4vw, 24px); line-height: 1.75; } .ps-section--navy .ps-lead, .ps-cta .ps-lead { color: #bfd0e7; } .ps-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 9px; padding: 13px 23px; color: var(--ps-white); background: var(--ps-blue); border: 1px solid var(--ps-blue); border-radius: 999px; font-size: 18px; font-weight: 800; line-height: 1.2; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .ps-button:hover { color: var(--ps-white); background: var(--ps-blue-dark); border-color: var(--ps-blue-dark); box-shadow: 0 12px 28px rgba(21, 111, 232, 0.22); transform: translateY(-2px); } .ps-button--outline { color: var(--ps-navy); background: transparent; border-color: #b9c9da; } .ps-button--outline:hover { color: var(--ps-blue); background: var(--ps-white); border-color: var(--ps-blue); } .ps-button--light { color: var(--ps-navy); background: var(--ps-white); border-color: var(--ps-white); } .ps-button--light:hover { color: var(--ps-navy); background: var(--ps-sky); border-color: var(--ps-sky); } .ps-button svg, .ps-text-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } .ps-text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ps-blue); font-weight: 800; } .ps-text-link:hover { color: var(--ps-blue-dark); } /* Header */ .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid rgba(220, 230, 241, 0.85); backdrop-filter: blur(16px); } .admin-bar .site-header { top: 32px; } /* Below 783px WordPress switches #wpadminbar to position: absolute, so it scrolls away and the sticky header must sit flush against the viewport. */ @media screen and (max-width: 782px) { .admin-bar .site-header { top: 0; } } .site-header__inner { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 28px; } .site-branding { display: flex; flex: 0 0 auto; align-items: center; } .custom-logo-link img { width: auto; max-height: 52px; } .site-branding__text { display: flex; align-items: center; gap: 11px; color: var(--ps-navy); font-size: 26px; font-weight: 900; letter-spacing: -0.045em; } .site-branding__mark { position: relative; display: grid; width: 40px; height: 40px; place-items: center; color: var(--ps-white); background: linear-gradient(145deg, #42b9ff, var(--ps-blue)); border-radius: 13px 13px 18px 13px; box-shadow: 0 8px 20px rgba(21, 111, 232, 0.22); font-size: 20px; } .site-branding__mark::after { position: absolute; right: -3px; bottom: 3px; width: 10px; height: 10px; content: ""; background: var(--ps-mint); border: 2px solid var(--ps-white); border-radius: 50%; } .site-nav { display: flex; align-items: center; gap: 24px; } .primary-menu, .primary-menu ul { display: flex; align-items: center; gap: 26px; padding: 0; margin: 0; list-style: none; } .primary-menu a { position: relative; display: block; padding: 29px 0; color: #31445f; font-size: 18px; font-weight: 750; } .primary-menu a::after { position: absolute; right: 0; bottom: 19px; left: 0; height: 3px; content: ""; background: var(--ps-blue); border-radius: 999px; transform: scaleX(0); transition: transform 180ms ease; } .primary-menu a:hover, .primary-menu .current-menu-item > a, .primary-menu .current_page_item > a { color: var(--ps-blue); } .primary-menu a:hover::after, .primary-menu .current-menu-item > a::after, .primary-menu .current_page_item > a::after { transform: scaleX(1); } .site-header__cta { min-height: 44px; padding: 10px 18px; } /* Only surfaces inside the mobile menu panel. */ .site-nav__cta { display: none; } /* Declared after .ps-button:hover so the channel colours survive hover. */ .site-nav__cta--band { background: var(--ps-band); border-color: var(--ps-band); } .site-nav__cta--band:hover { background: var(--ps-band-dark); border-color: var(--ps-band-dark); box-shadow: 0 12px 28px rgba(0, 132, 47, 0.24); } .site-nav__cta--youtube { background: var(--ps-youtube); border-color: var(--ps-youtube); } .site-nav__cta--youtube:hover { background: var(--ps-youtube-dark); border-color: var(--ps-youtube-dark); box-shadow: 0 12px 28px rgba(204, 0, 0, 0.24); } .menu-toggle { display: none; width: 46px; height: 46px; padding: 0; color: var(--ps-navy); background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: 12px; cursor: pointer; } .menu-toggle__bar, .menu-toggle::before, .menu-toggle::after { display: block; width: 20px; height: 2px; margin: 5px auto; content: ""; background: currentColor; border-radius: 999px; transition: transform 180ms ease, opacity 180ms ease; } .menu-toggle[aria-expanded="true"] .menu-toggle__bar { opacity: 0; } .menu-toggle[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); } /* Hero */ .ps-hero { position: relative; overflow: hidden; padding: 96px 0 112px; background: radial-gradient(circle at 78% 22%, rgba(90, 196, 255, 0.26), transparent 25%), radial-gradient(circle at 92% 78%, rgba(200, 245, 238, 0.7), transparent 23%), linear-gradient(145deg, #f9fcff 0%, #eef7ff 62%, #f7fffd 100%); } .ps-hero::before, .ps-hero::after { position: absolute; content: ""; border: 1px solid rgba(21, 111, 232, 0.12); border-radius: 50%; } .ps-hero::before { top: -230px; right: -120px; width: 650px; height: 650px; } .ps-hero::after { right: 240px; bottom: -240px; width: 460px; height: 460px; } .ps-hero__grid { position: relative; z-index: 1; display: grid; align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr); gap: 70px; } .ps-hero__title { max-width: 760px; margin: 0; color: var(--ps-navy); font-size: clamp(48px, 6.6vw, 82px); font-weight: 900; line-height: 1.08; letter-spacing: -0.065em; } .ps-hero__title strong { color: var(--ps-blue); font-weight: inherit; } .ps-hero__description { max-width: 640px; margin: 25px 0 0; color: #526680; font-size: clamp(22px, 2.4vw, 25px); line-height: 1.75; } .ps-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .ps-hero__trust { display: flex; flex-wrap: wrap; gap: 20px; padding: 0; margin: 32px 0 0; color: #536984; font-size: 17px; font-weight: 700; list-style: none; } .ps-hero__trust li { display: flex; align-items: center; gap: 7px; } .ps-hero__trust li::before { display: grid; width: 20px; height: 20px; place-items: center; color: var(--ps-white); content: "✓"; background: var(--ps-success); border-radius: 50%; font-size: 13px; } .ps-hero__visual { position: relative; min-height: 500px; } .ps-drop { position: absolute; inset: 18px 18px 45px 30px; overflow: hidden; background: linear-gradient(155deg, #62caff 0%, #1c80eb 48%, #0c4fae 100%); border-radius: 48% 52% 54% 46% / 38% 38% 62% 62%; box-shadow: 0 32px 70px rgba(13, 76, 158, 0.28); transform: rotate(5deg); } .ps-drop::before { position: absolute; top: 38px; left: 62px; width: 48%; height: 28%; content: ""; background: linear-gradient(145deg, rgba(255, 255, 255, 0.66), transparent); border-radius: 50%; filter: blur(2px); transform: rotate(-15deg); } .ps-drop::after { position: absolute; right: -45px; bottom: -35px; width: 230px; height: 230px; content: ""; background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; } .ps-drop__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px; color: var(--ps-white); text-align: center; transform: rotate(-5deg); } .ps-drop__small { margin-bottom: 6px; font-size: 17px; font-weight: 800; letter-spacing: 0.16em; opacity: 0.8; } .ps-drop__name { font-size: clamp(43px, 6vw, 71px); font-weight: 900; line-height: 1.05; letter-spacing: -0.06em; } .ps-drop__doctor { margin-top: 18px; font-size: 19px; font-weight: 750; opacity: 0.88; } .ps-float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 15px 18px; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 16px; box-shadow: var(--ps-shadow); color: var(--ps-navy); font-size: 17px; font-weight: 800; backdrop-filter: blur(10px); } .ps-float-card::before { display: grid; width: 34px; height: 34px; place-items: center; color: var(--ps-blue); background: var(--ps-sky); border-radius: 10px; } .ps-float-card--video { top: 8px; right: 0; } .ps-float-card--video::before { content: "▶"; font-size: 14px; } .ps-float-card--column { bottom: 30px; left: 0; } .ps-float-card--column::before { content: "✎"; font-size: 22px; } /* Cards and grids */ .ps-grid { display: grid; gap: 24px; } .ps-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ps-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-feature-card, .ps-card { overflow: hidden; background: var(--ps-white); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); box-shadow: 0 10px 34px rgba(12, 40, 81, 0.05); transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } a.ps-feature-card:hover, a.ps-card:hover { border-color: #b9d8fa; box-shadow: var(--ps-shadow); transform: translateY(-5px); } .ps-feature-card { padding: 32px; } .ps-feature-card__icon { display: grid; width: 54px; height: 54px; margin-bottom: 26px; place-items: center; color: var(--ps-blue); background: var(--ps-sky); border-radius: 17px; font-size: 26px; } .ps-feature-card h2, .ps-feature-card h3 { margin: 0 0 10px; color: var(--ps-navy); font-size: 26px; line-height: 1.35; letter-spacing: -0.03em; } .ps-feature-card p { margin: 0; color: var(--ps-muted); } .ps-channel-grid { align-items: stretch; } .ps-channel-card { display: flex; min-height: 100%; flex-direction: column; padding: 0; } .ps-channel-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(145deg, #f7f9fc, #e8eff7); border-bottom: 1px solid var(--ps-line); } .ps-channel-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 300ms ease; } .ps-channel-card__media--portrait img { object-position: center 18%; } .ps-channel-card__media--doctor { background: linear-gradient(145deg, #eef7ff, #d9edff); } .ps-channel-card__media--doctor img { object-fit: cover; object-position: center 21%; } .ps-channel-card:hover .ps-channel-card__media img { transform: scale(1.025); } .ps-channel-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px 30px 30px; } .ps-channel-card__body .ps-feature-card__icon { margin-bottom: 20px; } .ps-channel-card__body p { flex: 1; margin-bottom: 22px; } .ps-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(145deg, var(--ps-sky), var(--ps-sky-strong)); } .ps-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; } a.ps-card:hover .ps-card__media img { transform: scale(1.035); } .ps-card__placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--ps-blue); font-size: 50px; font-weight: 900; } .ps-card__play { position: absolute; top: 50%; left: 50%; display: grid; width: 58px; height: 58px; place-items: center; color: var(--ps-blue); background: rgba(255, 255, 255, 0.94); border-radius: 50%; box-shadow: 0 10px 24px rgba(7, 29, 61, 0.22); transform: translate(-50%, -50%); } .ps-card__play::before { margin-left: 3px; content: "▶"; font-size: 20px; } .ps-card__body { padding: 24px; } .ps-card__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; color: var(--ps-blue); font-size: 16px; font-weight: 800; } .ps-card__title { margin: 0; color: var(--ps-navy); font-size: 24px; font-weight: 850; line-height: 1.45; letter-spacing: -0.03em; } .ps-card__excerpt { display: -webkit-box; margin: 12px 0 0; overflow: hidden; color: var(--ps-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .ps-badge { display: inline-flex; align-items: center; padding: 5px 10px; color: var(--ps-blue); background: var(--ps-sky); border-radius: 999px; font-size: 14px; font-weight: 850; } /* Doctor section */ .ps-doctor { display: grid; align-items: center; grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr); gap: 76px; } .ps-doctor__portrait { position: relative; display: grid; min-height: 480px; overflow: hidden; place-items: center; color: var(--ps-white); background: radial-gradient(circle at 40% 27%, rgba(255, 255, 255, 0.32), transparent 23%), linear-gradient(145deg, #45b9fb, #125fca 72%); border-radius: var(--ps-radius-lg); box-shadow: var(--ps-shadow); } .ps-doctor__portrait img { width: 100%; height: 100%; object-fit: cover; } .ps-doctor__portrait--photo { background: linear-gradient(145deg, #eef7ff, #d9edff); } .ps-doctor__portrait--photo img { object-position: center top; } .ps-doctor__monogram { position: relative; font-size: 103px; font-weight: 900; letter-spacing: -0.1em; } .ps-doctor__monogram::after { position: absolute; right: -42px; bottom: -10px; color: var(--ps-mint); content: "●"; font-size: 34px; } .ps-doctor__content .ps-lead { margin-bottom: 28px; } .ps-check-list { display: grid; gap: 13px; padding: 0; margin: 26px 0 34px; list-style: none; } .ps-check-list li { display: flex; align-items: flex-start; gap: 12px; color: #3f526c; font-weight: 650; } .ps-check-list li::before { display: grid; flex: 0 0 auto; width: 24px; height: 24px; margin-top: 2px; place-items: center; color: var(--ps-success); content: "✓"; background: #e2f8f3; border-radius: 50%; font-size: 14px; font-weight: 900; } /* Reviews */ .ps-review-card { display: flex; min-height: 100%; flex-direction: column; padding: 30px; background: var(--ps-white); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); } .ps-review-card__stars { margin-bottom: 18px; color: #ffb224; font-size: 20px; letter-spacing: 0.08em; } .ps-review-card__quote { flex: 1; margin: 0; color: #31445f; font-size: 20px; line-height: 1.8; } .ps-review-card__person { display: flex; align-items: center; gap: 13px; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--ps-line); } .ps-review-card__avatar { display: grid; width: 46px; height: 46px; overflow: hidden; place-items: center; color: var(--ps-blue); background: var(--ps-sky); border-radius: 50%; font-weight: 900; } .ps-review-card__avatar img { width: 100%; height: 100%; object-fit: cover; } .ps-review-card__name { color: var(--ps-navy); font-size: 18px; font-weight: 850; } .ps-review-card__label { color: var(--ps-muted); font-size: 14px; } /* Page heroes and content */ .ps-page-hero { position: relative; overflow: hidden; padding: 88px 0 82px; background: linear-gradient(145deg, #f4f9ff, #eaf5ff); } .ps-page-hero::after { position: absolute; top: -220px; right: -120px; width: 520px; height: 520px; content: ""; border: 90px solid rgba(21, 111, 232, 0.05); border-radius: 50%; } .ps-page-hero__inner { position: relative; z-index: 1; max-width: var(--ps-measure); } .ps-page-hero h1 { margin: 0; color: var(--ps-navy); font-size: clamp(42px, 6vw, 66px); font-weight: 900; line-height: 1.15; letter-spacing: -0.055em; } .ps-page-hero p { max-width: 670px; margin: 20px 0 0; color: var(--ps-muted); font-size: 23px; } .entry-content { color: #354a65; font-size: 20px; } /* Left-aligned, not centred: the reading column shares its left edge with every .ps-page-hero / .ps-single-header on the site. */ .entry-content > * { max-width: var(--ps-measure); margin-right: auto; margin-left: 0; } .entry-content > .alignwide { max-width: var(--ps-container); } .entry-content > .alignfull { max-width: none; } .entry-content h2, .entry-content h3, .entry-content h4 { color: var(--ps-navy); line-height: 1.35; letter-spacing: -0.035em; } .entry-content h2 { margin-top: 2em; font-size: clamp(30px, 4vw, 42px); } .entry-content h3 { margin-top: 1.8em; font-size: 30px; } .entry-content p, .entry-content ul, .entry-content ol { margin-top: 1.2em; margin-bottom: 1.2em; } /* Buttons opt out: this selector outweighs .ps-button and would repaint them blue-on-blue with an underline. */ .entry-content a:not(.ps-button) { color: var(--ps-blue); text-decoration: underline; text-underline-offset: 3px; } .entry-content blockquote { padding: 8px 0 8px 26px; margin-top: 2em; margin-bottom: 2em; color: var(--ps-navy); border-left: 4px solid var(--ps-blue); font-size: 24px; font-weight: 700; } .entry-content .wp-block-image img { border-radius: var(--ps-radius); } .ps-prose-wrap { padding: 80px 0 104px; } .ps-content-grid { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 320px; gap: 70px; } .ps-content-grid .entry-content > * { max-width: none; } .ps-sidebar-card { position: sticky; top: 112px; padding: 28px; background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); } .ps-sidebar-card h2, .ps-sidebar-card h3 { margin: 0 0 10px; color: var(--ps-navy); font-size: 26px; line-height: 1.4; } .ps-sidebar-card p { margin: 0 0 20px; color: var(--ps-muted); } .ps-sidebar-card .ps-button { width: 100%; } .ps-sidebar-card .ps-button + .ps-button { margin-top: 10px; } /* CTA */ .ps-cta-wrap { padding: 0 0 104px; } .ps-cta { position: relative; display: grid; overflow: hidden; align-items: center; padding: 58px 64px; color: var(--ps-white); background: radial-gradient(circle at 92% 16%, rgba(94, 195, 255, 0.35), transparent 25%), linear-gradient(135deg, var(--ps-navy-strong), var(--ps-navy) 70%); border-radius: var(--ps-radius-lg); grid-template-columns: minmax(0, 1fr) auto; gap: 40px; } .ps-cta::after { position: absolute; right: -80px; bottom: -140px; width: 320px; height: 320px; content: ""; border: 52px solid rgba(255, 255, 255, 0.06); border-radius: 50%; } .ps-cta__content, .ps-cta__actions { position: relative; z-index: 1; } .ps-cta__actions { display: flex; flex-direction: column; gap: 10px; } /* Pagination and empty */ .navigation.pagination { margin-top: 54px; } .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .page-numbers { display: grid; min-width: 42px; height: 42px; padding: 0 12px; place-items: center; color: var(--ps-navy); background: var(--ps-white); border: 1px solid var(--ps-line); border-radius: 11px; font-weight: 800; } .page-numbers.current, .page-numbers:hover { color: var(--ps-white); background: var(--ps-blue); border-color: var(--ps-blue); } .ps-empty { padding: 52px; color: var(--ps-muted); background: var(--ps-surface); border: 1px dashed #bdcde0; border-radius: var(--ps-radius); text-align: center; } .ps-empty h2, .ps-empty h3 { margin: 0 0 8px; color: var(--ps-navy); } /* Footer */ .site-footer { color: #b9c9dd; background: var(--ps-navy-strong); } .site-footer__main { display: grid; padding: 72px 0 52px; grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: 70px; } .site-footer .site-branding__text { color: var(--ps-white); } .site-footer__about { max-width: 480px; margin: 20px 0 0; color: #aebfd4; } .site-footer__title { margin: 0 0 18px; color: var(--ps-white); font-size: 18px; font-weight: 850; } .site-footer__links { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; } .site-footer__links a:hover { color: var(--ps-white); } .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.11); font-size: 16px; } .site-footer__bottom p { margin: 0; } /* Single post */ /* .ps-single-header is itself a .ps-container, so the reading width lives on an inner wrapper -- capping the container would drag it away from the page's left edge. Same pattern as .ps-page-hero__inner. */ .ps-single-header { padding: 88px 0 52px; } .ps-single-header__inner { max-width: var(--ps-measure); } .ps-single-header h1 { margin: 14px 0 18px; color: var(--ps-navy); font-size: clamp(40px, 6vw, 64px); font-weight: 900; line-height: 1.2; letter-spacing: -0.055em; } .ps-single-header__meta { color: var(--ps-muted); font-size: 17px; } .ps-single-thumbnail { width: 100%; max-width: var(--ps-measure); max-height: 620px; margin: 0 auto 70px 0; object-fit: cover; border-radius: var(--ps-radius-lg); box-shadow: var(--ps-shadow); } .ps-single-footer { padding: 0 0 90px; } .ps-single-footer__inner { max-width: var(--ps-measure); padding-top: 26px; border-top: 1px solid var(--ps-line); } /* Adjacent-post navigation */ .ps-post-nav { padding: 0 0 90px; } .ps-post-nav__inner { display: grid; gap: 18px; max-width: var(--ps-measure); padding-top: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ps-line); } .ps-post-nav__link { display: flex; flex-direction: column; gap: 7px; padding: 20px 22px; background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius-sm); transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; } .ps-post-nav__link:hover { background: var(--ps-sky); border-color: var(--ps-sky-strong); transform: translateY(-2px); } /* Explicit column so a missing "previous" still leaves "next" on the right. */ .ps-post-nav__link--next { grid-column: 2; text-align: right; } .ps-post-nav__label { color: var(--ps-blue); font-size: 15px; font-weight: 800; } .ps-post-nav__title { display: -webkit-box; overflow: hidden; color: var(--ps-navy); -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 18px; font-weight: 750; line-height: 1.5; } .ps-post-nav__back { margin-top: 26px; } .ps-editorial-notice, .ps-health-notice, .ps-source-list { max-width: var(--ps-measure); padding: 26px 28px; margin: 0 auto 34px 0; border-radius: var(--ps-radius); } .ps-editorial-notice { color: #334e6f; background: var(--ps-sky); border: 1px solid var(--ps-sky-strong); } .ps-editorial-notice strong, .ps-health-notice strong { display: block; margin-bottom: 5px; color: var(--ps-navy); } /* Small print, not a warning banner: neutral surface instead of the amber callout, and a size below the body copy. #5c6b81 keeps 5.2:1 on --ps-surface so the disclaimer stays legible at this size. */ .ps-health-notice { padding: 20px 22px; color: #5c6b81; background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius-sm); font-size: 17px; line-height: 1.7; } .ps-health-notice strong { margin-bottom: 4px; color: #46566e; font-size: 15px; font-weight: 800; } .ps-source-list { margin-top: 45px; background: var(--ps-surface); border: 1px solid var(--ps-line); } /* Review detail ------------------------------------------------------------------------- */ .single-psg_review .ps-page-hero { padding: 72px 0 66px; } .single-psg_review .ps-page-hero h1 { font-size: clamp(34px, 4.4vw, 50px); } .single-psg_review .ps-page-hero p { max-width: none; font-size: 22px; } .ps-review-single { padding-top: 56px; } /* Long-form reading size: 19px/1.9 rather than the 17px/1.75 used by cards. */ .ps-review-single .entry-content { color: #33465e; font-size: 23px; line-height: 1.9; } .ps-review-single .entry-content p { margin-top: 1.15em; margin-bottom: 1.15em; } .ps-review-single .entry-content > p:first-of-type { color: var(--ps-navy); font-size: 25px; font-weight: 600; line-height: 1.75; } .ps-review-single .ps-single-thumbnail { margin-bottom: 44px; } .ps-review-byline { display: flex; align-items: center; gap: 14px; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--ps-line); } .ps-review-byline__avatar { display: grid; flex: 0 0 auto; width: 52px; height: 52px; place-items: center; color: var(--ps-blue); background: var(--ps-sky); border-radius: 50%; font-size: 24px; font-weight: 850; } .ps-review-byline__who { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; } .ps-review-byline__who strong { color: var(--ps-navy); font-size: 22px; font-weight: 850; letter-spacing: -0.02em; } .ps-review-byline__meta { color: var(--ps-muted); font-size: 17px; line-height: 1.5; } .ps-review-byline__source { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 9px 16px; color: var(--ps-blue); background: var(--ps-sky); border: 1px solid var(--ps-sky-strong); border-radius: 999px; font-size: 17px; font-weight: 800; transition: background 180ms ease, border-color 180ms ease; } .ps-review-byline__source:hover { background: var(--ps-sky-strong); border-color: #a8d8fb; } .ps-review-byline__source svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; } .ps-review-single .ps-health-notice { margin-top: 48px; } .ps-source-list h2 { margin: 0 0 17px; color: var(--ps-navy); font-size: 24px; } .ps-source-list ol { padding-left: 22px; margin: 0; } .ps-source-list li + li { margin-top: 16px; } .ps-source-list__type { display: inline-flex; padding: 3px 8px; margin-right: 6px; color: var(--ps-blue); background: var(--ps-white); border: 1px solid var(--ps-sky-strong); border-radius: 999px; font-size: 13px; font-weight: 850; } .ps-source-list a { color: var(--ps-blue); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; } .ps-review-card__source { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 17px; color: var(--ps-blue); font-size: 14px; font-weight: 800; } @media (max-width: 1080px) { .site-header__cta { display: none; } .primary-menu, .primary-menu ul { gap: 19px; } .ps-hero__grid { gap: 35px; grid-template-columns: minmax(0, 1fr) 400px; } .ps-hero__visual { min-height: 440px; } } @media (max-width: 900px) { /* backdrop-filter turns .site-header into the containing block for its position: fixed descendants, which collapses the nav panel to the header box. Keep the header opaque here so .site-nav can anchor to the viewport. */ .site-header { background: var(--ps-white); backdrop-filter: none; } .menu-toggle { display: block; } .site-nav { position: fixed; /* JS keeps --ps-nav-top in sync with the header's real bottom edge (header height + admin bar); the literal is the no-JS fallback. */ top: var(--ps-nav-top, 82px); right: 0; bottom: 0; left: 0; display: block; padding: 24px 20px calc(40px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--ps-white); opacity: 0; /* visibility keeps the closed menu out of the tab order. */ visibility: hidden; transform: translateY(-12px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; } .site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .primary-menu, .primary-menu ul { display: block; } .primary-menu li { border-bottom: 1px solid var(--ps-line); } .primary-menu a { padding: 17px 4px; font-size: 20px; } /* Nested items need to read as children once the row layout is gone. */ .primary-menu ul li:last-child { border-bottom: 0; } .primary-menu ul a { padding-left: 20px; color: var(--ps-muted); font-size: 19px; } .primary-menu a::after { display: none; } .site-nav__cta { display: flex; width: 100%; margin-top: 24px; } .site-nav__cta + .site-nav__cta { margin-top: 10px; } .ps-hero { padding-top: 72px; } .ps-hero__grid { grid-template-columns: 1fr; } .ps-hero__visual { width: min(100%, 560px); min-height: 480px; margin: 0 auto; } .ps-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-doctor { grid-template-columns: 1fr; gap: 48px; } .ps-doctor__portrait { width: min(100%, 520px); min-height: 430px; } .ps-content-grid { grid-template-columns: 1fr; gap: 40px; } .ps-sidebar-card { position: static; } .ps-cta { padding: 48px; grid-template-columns: 1fr; } .ps-cta__actions { flex-flow: row wrap; } .site-footer__main { grid-template-columns: 1.3fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 620px) { .ps-container { width: min(calc(100% - 30px), var(--ps-container)); } .ps-section { padding: 74px 0; } .ps-section__head { display: block; margin-bottom: 32px; } .ps-section__head .ps-text-link, .ps-section__head .ps-button { margin-top: 18px; } .site-header__inner { min-height: 72px; } .site-branding__text { font-size: 23px; } .site-branding__mark { width: 36px; height: 36px; } .site-nav { top: var(--ps-nav-top, 72px); } .ps-hero { padding: 60px 0 76px; } .ps-hero__title { font-size: clamp(44px, 14vw, 62px); } .ps-hero__actions .ps-button { width: 100%; } .ps-hero__trust { display: grid; gap: 10px; } .ps-hero__visual { min-height: 390px; } .ps-drop { inset: 20px 5px 35px 15px; } .ps-drop__content { padding: 45px; } .ps-float-card { padding: 12px; font-size: 14px; } .ps-grid--3, .ps-grid--2 { grid-template-columns: 1fr; } .ps-doctor__portrait { min-height: 360px; } .ps-page-hero { padding: 62px 0; } .ps-prose-wrap { padding: 58px 0 76px; } .single-psg_review .ps-page-hero { padding: 48px 0 44px; } .ps-review-single { padding-top: 36px; } .ps-review-single .entry-content { font-size: 22px; line-height: 1.85; } .ps-review-single .entry-content > p:first-of-type { font-size: 23px; } /* The source pill drops below the name instead of squeezing it. */ .ps-review-byline { flex-wrap: wrap; gap: 12px; } .ps-review-byline__source { width: 100%; justify-content: center; } .ps-post-nav__inner { grid-template-columns: minmax(0, 1fr); } .ps-post-nav__link--next { grid-column: 1; text-align: left; } .ps-cta-wrap { padding-bottom: 74px; } .ps-cta { padding: 38px 28px; border-radius: 25px; } .ps-cta__actions .ps-button { width: 100%; } .site-footer__main { padding-top: 55px; grid-template-columns: 1fr; gap: 38px; } .site-footer__brand { grid-column: auto; } .site-footer__bottom { display: block; } .site-footer__bottom p + p { margin-top: 6px; } .ps-single-header { padding-top: 62px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }