/* ============================================= PENGUINSTONES — GLOBAL STYLES Replace entire contents of style.css with this ============================================= */ /* * Theme Name: GeneratePress Child * Template: generatepress */ /* ---- SELF-HOSTED FONTS (GDPR-clean — no external Google call) ---- Lilita One = headings / display (single weight 400 — its 400 IS the bold look). JetBrains Mono = body (variable woff2, real weight range 400–800). woff2 in /fonts; latin + latin-ext subsets cover our diacritics (Türkiye, São, Réunion, Ç/Å/ô, etc.). Ranges mirror Google's subsetting so latin-ext only loads when needed. */ @font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lilita-one-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lilita-one-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- DESIGN TOKENS ---- */ :root { /* Brand colors */ --ps-navy: #0f172a; --ps-navy-mid: #1e3a5f; --ps-blue: #2563eb; --ps-blue-light: #60a5fa; --ps-blue-pale: #eff6ff; --ps-orange: #f59e0b; --ps-orange-dark: #d97706; /* UI colors */ --ps-white: #ffffff; --ps-bg: #f8faff; --ps-bg-card: #ffffff; --ps-border: #e2e8f0; --ps-text: #1e293b; --ps-text-mid: #475569; --ps-text-light: #94a3b8; /* GeneratePress overrides */ --contrast: var(--ps-text); --contrast-2: var(--ps-text-mid); --contrast-3: var(--ps-text-light); --base: #dbeafe; --base-2: var(--ps-bg); --base-3: var(--ps-bg-card); --accent: var(--ps-blue); /* Typography (self-hosted — see @font-face above) */ --ps-font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ps-font-heading: 'Lilita One', system-ui, -apple-system, sans-serif; --ps-radius: 10px; --ps-shadow: 0 2px 16px rgba(15,23,42,0.08); /* ---- HOME-PAGE REDESIGN TOKENS ---- Yellow CTA, section accent colors, and medal tints used by page-home.php and the site-wide header/footer. Exact values provided in round-3 polish. */ --ps-yellow: #F7C32C; /* unified yellow CTA */ --ps-yellow-hover: #D9A815; /* slightly darker on hover */ --ps-yellow-ink: #ffffff; /* button text on yellow (white per Fix 3 contrast/weight pattern) */ --ps-teal: #37959B; /* Section 3 — How It Works background */ --ps-purple: #9381AA; /* Section 5 — Join Us background */ --ps-dark: #0a0a0a; /* Section 6 — Community Highlights background */ --ps-gold: #d4a017; /* 1st place */ --ps-silver: #c0c0c0; /* 2nd place */ --ps-bronze: #cd7f32; /* 3rd place */ } /* === Container overflow protection (round 40 — surgical replacement of round 39) === */ /* Round 39's universal cap (html/body max-width:100vw + overflow-x:hidden, */ /* * { max-width:100% }, img/video/iframe { max-width:100%; height:auto }) was */ /* REVERTED — it had cascading side effects: the mobile hamburger menu went */ /* invisible, Leaflet penguin pin markers disappeared on every map, and the */ /* single-stone page shrank below its normal mobile width. */ /* Diagnostic on iPhone 16 Pro / iOS 18 pinned the real culprits: .ps-section */ /* computed to 450px on a 402px viewport and .ps-section-inner to 418px. So we */ /* constrain ONLY those two containers — no `*`, no media cap, no html/body. */ /* (Lesson: diagnose the specific overflowing element first, fix it surgically; */ /* don't reach for broad cascading rules.) */ .ps-section { max-width: 100vw; box-sizing: border-box; overflow-x: hidden; } .ps-section-inner { max-width: 100%; box-sizing: border-box; } /* ---- BASE TYPOGRAPHY ---- */ body, input, textarea, select, button { font-family: var(--ps-font) !important; } body { font-size: 16px; line-height: 1.7; color: var(--ps-text); background-color: var(--ps-bg); /* Lilita One is single-weight; disable faux-bold/italic synthesis (inherits) so heading font-weights render its true 400 instead of a synthesized bold. JetBrains Mono is variable (400–800) so its real weights are unaffected. */ font-synthesis: none; } /* ---- HEADINGS ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--ps-font-heading) !important; font-weight: 400; /* Lilita One is 400-only — its 400 is the bold/display look */ line-height: 1.25; color: var(--ps-navy); letter-spacing: -0.3px; } h1 { font-size: clamp(28px, 4vw, 42px); } h2 { font-size: clamp(22px, 3vw, 32px); } h3 { font-size: clamp(18px, 2.5vw, 24px); } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } /* ---- LINKS ---- */ a { color: var(--ps-blue); } a:hover, a:focus { color: var(--ps-navy); } /* ---- SITE HEADER ---- */ .site-header { background: var(--ps-navy) !important; box-shadow: 0 2px 8px rgba(15,23,42,0.25); } .main-title a, .main-title a:hover { color: var(--ps-white) !important; font-family: var(--ps-font) !important; font-weight: 900; font-size: 22px; letter-spacing: -0.5px; } .site-description { color: rgba(255,255,255,0.6) !important; } /* ---- NAVIGATION ---- */ .main-navigation, .main-navigation ul ul { background: var(--ps-navy) !important; } .main-navigation .main-nav ul li a, .main-navigation .menu-toggle { color: rgba(255,255,255,0.85) !important; font-weight: 600; font-size: 15px; } .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a { color: var(--ps-orange) !important; } .main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--ps-orange) !important; } .main-navigation ul ul { background: var(--ps-navy-mid) !important; } /* ---- CONTENT AREA ---- */ .separate-containers .inside-article, .separate-containers .page-header, .one-container .container, .inside-page-header { background: var(--ps-bg-card) !important; border-radius: var(--ps-radius); box-shadow: var(--ps-shadow); } /* Hide entry title on homepage (we have our own hero) */ .home .entry-title { display: none; } /* Remove default article padding on homepage */ .home .inside-article { padding: 0 !important; background: transparent !important; box-shadow: none !important; } /* ---- BUTTONS ---- */ button, input[type="submit"], a.button, a.wp-block-button__link:not(.has-background) { font-family: var(--ps-font) !important; font-weight: 700; background: var(--ps-navy) !important; color: var(--ps-white) !important; border-radius: 8px !important; padding: 10px 22px !important; transition: background 0.2s, transform 0.1s; } button:hover, input[type="submit"]:hover, a.button:hover, a.wp-block-button__link:not(.has-background):hover { background: var(--ps-blue) !important; color: var(--ps-white) !important; } /* ---- FOOTER ---- */ .site-info { background: var(--ps-navy) !important; color: rgba(255,255,255,0.6) !important; font-size: 13px; } .site-info a { color: var(--ps-blue-light) !important; } /* ---- SIDEBAR ---- */ .sidebar .widget { background: var(--ps-bg-card) !important; border-radius: var(--ps-radius); box-shadow: var(--ps-shadow); } /* ============================================ HOMEPAGE SECTIONS ============================================ */ /* ---- HERO ---- */ .ps-hero { background: linear-gradient(135deg, var(--ps-navy) 0%, var(--ps-navy-mid) 50%, var(--ps-navy) 100%); color: var(--ps-white); text-align: center; padding: 64px 20px 52px; position: relative; overflow: hidden; } .ps-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,0.2) 0%, transparent 70%); pointer-events: none; } .ps-hero-inner { position: relative; max-width: 680px; margin: 0 auto; } .ps-hero-penguin { font-size: 56px; margin-bottom: 16px; display: block; animation: ps-bob 3s ease-in-out infinite; } @keyframes ps-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } .ps-hero-title { font-size: clamp(26px, 4vw, 40px) !important; font-weight: 900 !important; color: var(--ps-white) !important; margin: 0 0 16px !important; } .ps-hero-sub { font-size: 16px; color: rgba(255,255,255,0.75); margin: 0 0 36px; line-height: 1.6; } .ps-stats-row { display: inline-flex; align-items: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 20px 0; } .ps-stat { text-align: center; padding: 0 36px; } .ps-stat-number { display: block; font-size: 38px; font-weight: 900; color: var(--ps-blue-light); line-height: 1; margin-bottom: 4px; } .ps-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.6); font-weight: 600; } .ps-stat-divider { width: 1px; height: 48px; background: rgba(255,255,255,0.15); } /* ---- SECTIONS ---- */ .ps-section { padding: 52px 20px; } .ps-section-inner { max-width: 760px; margin: 0 auto; } .ps-section-light { background: var(--ps-bg); } .ps-section-white { background: var(--ps-white); } .ps-section-dark { background: var(--ps-navy); } .ps-section-goal { background: linear-gradient(135deg, var(--ps-navy-mid), var(--ps-navy)); } .ps-text-center { text-align: center; } .ps-section-title { font-size: clamp(20px, 3vw, 28px) !important; font-weight: 800 !important; color: var(--ps-navy) !important; margin-bottom: 20px !important; } .ps-section p { font-size: 15px; line-height: 1.75; color: var(--ps-text-mid); margin-bottom: 14px; } .ps-section p strong { color: var(--ps-text); } .ps-section a { color: var(--ps-blue); } .ps-white { color: var(--ps-white) !important; } .ps-white-sub { color: rgba(255,255,255,0.8) !important; font-size: 16px !important; } .ps-highlight-box { background: var(--ps-blue-pale); border-left: 4px solid var(--ps-blue); border-radius: 8px; padding: 14px 18px; margin-top: 24px; display: flex; align-items: center; gap: 12px; font-size: 15px; color: #1e40af; font-weight: 600; } .ps-highlight-icon { font-size: 24px; flex-shrink: 0; } /* ---- GOAL IMAGE ---- */ .ps-goal-image { max-width: 600px; width: 100%; border-radius: 12px; margin-bottom: 28px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } /* ---- GOAL COUNTER ---- */ .ps-goal-label { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.6); margin-bottom: 12px; font-weight: 600; } .ps-goal-number { font-size: clamp(32px, 5vw, 52px); font-weight: 900; color: var(--ps-blue-light); margin: 8px 0 16px; line-height: 1; } .ps-goal-minus { color: rgba(255,255,255,0.4); } .ps-goal-sub { font-size: 15px; color: rgba(255,255,255,0.75); } .ps-goal-sub strong { color: var(--ps-white); } /* ---- MAP ---- */ .ps-map-section { border-top: 3px solid var(--ps-navy-mid); } .ps-map-header { background: var(--ps-navy); color: var(--ps-white); text-align: center; padding: 20px; } .ps-map-header h2 { margin: 0 0 4px !important; font-size: 20px !important; color: var(--ps-white) !important; } .ps-map-header p { margin: 0 !important; font-size: 13px; color: rgba(255,255,255,0.6); } /* ---- BUTTONS ---- */ .ps-cta-buttons { margin: 24px 0 12px; } .ps-btn { display: inline-block; padding: 12px 28px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none !important; transition: all 0.2s; font-family: var(--ps-font); } .ps-btn:hover { opacity: 0.88; transform: translateY(-1px); } .ps-btn-primary { background: var(--ps-navy); color: var(--ps-white) !important; } .ps-btn-outline { background: transparent; color: var(--ps-navy) !important; border: 2px solid var(--ps-navy); } .ps-btn-outline:hover { background: var(--ps-navy); color: var(--ps-white) !important; } .ps-note { font-size: 12px !important; color: var(--ps-text-light) !important; margin-top: 8px; } /* ---- LATEST STONES GRID ---- */ .ps-stones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ps-stone-card { display: block; text-decoration: none !important; border-radius: var(--ps-radius); overflow: hidden; border: 1px solid var(--ps-border); transition: transform 0.2s, box-shadow 0.2s; background: var(--ps-white); } .ps-stone-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15,23,42,0.12); } .ps-stone-img { height: 160px; overflow: hidden; background: var(--ps-bg); } .ps-stone-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ps-stone-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; } .ps-stone-info { padding: 10px 12px 12px; } .ps-stone-num { display: block; font-weight: 800; font-size: 14px; color: var(--ps-navy); margin-bottom: 3px; } .ps-stone-loc { display: block; font-size: 12px; color: var(--ps-text-light); line-height: 1.4; } .ps-stone-loading { text-align: center; color: var(--ps-text-light); padding: 40px; grid-column: 1/-1; } /* ---- POPUP ---- */ .penguin-popup .leaflet-popup-content-wrapper { padding: 0 !important; border-radius: 8px !important; overflow: hidden; box-shadow: 0 4px 20px rgba(15,23,42,0.2) !important; } .penguin-popup .leaflet-popup-content { margin: 0 !important; width: auto !important; } /* ---- MOBILE ---- */ @media (max-width: 640px) { .ps-hero { padding: 40px 16px 36px; } .ps-stat { padding: 0 20px; } .ps-stat-number { font-size: 28px; } .ps-stones-grid { grid-template-columns: repeat(2, 1fr); } .ps-section { padding: 36px 16px; } } @media (max-width: 400px) { .ps-stones-grid { grid-template-columns: 1fr; } } /* ============================================ SINGLE STONE PAGE ============================================ */ .ss-wrap { background: var(--ps-bg); min-height: 60vh; } /* Hero — cropped-fill banner. fills the box with object-fit: cover so it reads like a polished hero (no letterbox). Overlay holds badges/title/ location on a bottom-up dark gradient. The overlay uses pointer-events:none so clicks pass through to the image (which opens the lightbox at index 0); interactive children (.ss-back) re-enable pointer-events explicitly. */ .ss-hero { position: relative; background: var(--ps-navy); overflow: hidden; aspect-ratio: 21 / 9; min-height: 420px; max-height: 70vh; /* Contained banner — mirrors .ss-content-inner sizing so the hero's left/ right edges line up with the body content. width:calc(100% - 40px) reproduces .ss-content's 20px horizontal padding on narrow viewports; max-width:1000px matches .ss-content-inner on wide viewports. */ width: calc(100% - 40px); max-width: 1000px; margin: 0 auto; } .ss-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; } .ss-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.4) 60%, transparent 100%); display: flex; align-items: flex-end; padding: 32px 24px 36px; pointer-events: none; } .ss-hero-overlay .ss-back { pointer-events: auto; } .ss-hero-inner { max-width: 860px; margin: 0 auto; width: 100%; } .ss-back { display: inline-block; color: rgba(255,255,255,0.7) !important; font-size: 13px; font-weight: 600; text-decoration: none !important; margin-bottom: 14px; transition: color 0.2s; } .ss-back:hover { color: white !important; } .ss-badges { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .ss-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: inline-block; } .ss-title { font-size: clamp(22px, 3.5vw, 36px) !important; font-weight: 900 !important; color: white !important; margin: 0 0 8px !important; line-height: 1.2 !important; } .ss-number { color: var(--ps-yellow); margin-right: 8px; } .ss-location { font-size: 14px; color: rgba(255,255,255,0.75); margin: 0; } /* Content layout */ .ss-content { padding: 36px 20px 60px; } .ss-content-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; } /* Sections */ .ss-section { margin-bottom: 32px; } .ss-section-title { font-size: 18px !important; font-weight: 800 !important; color: var(--ps-navy) !important; margin: 0 0 14px !important; padding-bottom: 10px; border-bottom: 2px solid var(--ps-border); } .ss-body { font-size: 15px; line-height: 1.8; color: var(--ps-text-mid); } /* Mini map */ .ss-mini-map { height: 280px; border-radius: var(--ps-radius); overflow: hidden; border: 1px solid var(--ps-border); } .ss-coords { font-size: 12px; color: var(--ps-text-light); margin-top: 8px; } .ss-coords a { color: var(--ps-blue); } /* Photo gallery */ .ss-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ss-gallery-item { display: block; aspect-ratio: 1; border-radius: var(--ps-radius); overflow: hidden; border: 1px solid var(--ps-border); transition: transform 0.15s, box-shadow 0.15s; } .ss-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .ss-gallery-item:hover { transform: translateY(-2px); box-shadow: var(--ps-shadow); } @media (max-width: 600px) { .ss-gallery { grid-template-columns: repeat(2, 1fr); } } /* Video — round 16 moved this block to render after the Location section and swapped the padding-bottom 56.25% trick for modern aspect-ratio. */ .ss-video { margin-top: 32px; } .ss-video-title { font-size: 18px; font-weight: 700; margin: 0 0 12px; } .ss-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--ps-radius); overflow: hidden; } .ss-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Sidebar cards */ .ss-card { background: var(--ps-white); border: 1px solid var(--ps-border); border-radius: var(--ps-radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--ps-shadow); } .ss-card-title { font-size: 14px !important; font-weight: 800 !important; color: var(--ps-navy) !important; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 16px !important; padding-bottom: 10px; border-bottom: 2px solid var(--ps-border); } /* Details list */ .ss-details { list-style: none; padding: 0; margin: 0; } .ss-details li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ps-border); font-size: 13px; gap: 8px; } .ss-details li:last-child { border-bottom: none; } .ss-detail-label { color: var(--ps-text-light); font-weight: 600; flex-shrink: 0; } .ss-detail-value { color: var(--ps-text); font-weight: 700; text-align: right; } .ss-detail-value a { color: var(--ps-blue); text-decoration: none; } .ss-badge-sm { font-size: 10px !important; padding: 2px 8px !important; } /* CTA card */ .ss-card-cta { background: var(--ps-navy); text-align: center; border-color: var(--ps-navy); } .ss-cta-penguin { font-size: 36px; margin-bottom: 8px; } .ss-card-cta h3 { color: white !important; font-size: 16px !important; margin: 0 0 8px !important; } .ss-card-cta p { color: rgba(255,255,255,0.7); font-size: 13px; margin: 0 0 16px; } .ss-cta-btn { width: 100%; box-sizing: border-box; background: var(--ps-blue) !important; } /* Mobile */ @media (max-width: 700px) { .ss-content-inner { grid-template-columns: 1fr; } .ss-hero { aspect-ratio: 4 / 3; min-height: 320px; } .ss-hero-overlay { padding: 24px 16px 24px; } } /* Round 41 — single-stone mobile width (surgical, diagnostic-driven). On iPhone 16 Pro (402px) the inset stacked: round-9 .site-content padding (24px each) + .ss-content padding (20px each) = 88px, leaving .ss-content-inner at just 314px (~78% of viewport). Zero the parent padding for single-stone and trim .ss-content to 12px → content-inner reaches ~378px (~12px gutter each side). Hero width tracks the new gutter so its edges still line up with .ss-content-inner (round 31's alignment). Desktop math is untouched. !important beats round-9's body:not()...:not() (0,3,1) specificity. */ @media (max-width: 600px) { body.single-stone .site-content, body.single-stone .inside-content { padding-left: 0 !important; padding-right: 0 !important; } .ss-content { padding-left: 12px; padding-right: 12px; } .ss-content-inner { margin-left: 0; margin-right: 0; max-width: 100%; } .ss-hero { width: calc(100% - 24px); } } /* ============================================ LIGHTBOX (single-stone featured + gallery) ============================================ */ .ss-lightbox { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.94); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; user-select: none; -webkit-tap-highlight-color: transparent; } .ss-lightbox.is-open { display: flex; } .ss-lightbox-stage { max-width: min(1200px, 100%); max-height: 100%; display: flex; align-items: center; justify-content: center; } .ss-lightbox-image { display: block; max-width: 100%; max-height: calc(100vh - 100px); width: auto; height: auto; object-fit: contain; border-radius: var(--ps-radius); box-shadow: 0 12px 60px rgba(0,0,0,0.6); background: #000; } .ss-lightbox-close, .ss-lightbox-prev, .ss-lightbox-next { position: absolute; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 26px; font-weight: 700; line-height: 1; padding: 0; transition: background 0.15s, color 0.15s, transform 0.15s, border-color 0.15s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ss-lightbox-close { top: 20px; right: 20px; } .ss-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); } .ss-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); } .ss-lightbox-close:hover, .ss-lightbox-prev:hover, .ss-lightbox-next:hover { background: var(--ps-yellow); color: var(--ps-navy); border-color: var(--ps-yellow); } .ss-lightbox-close:hover { transform: scale(1.08); } .ss-lightbox-prev:hover { transform: translateY(-50%) scale(1.08); } .ss-lightbox-next:hover { transform: translateY(-50%) scale(1.08); } .ss-lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #ffffff; font-weight: 700; font-size: 13px; background: rgba(15, 23, 42, 0.7); padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ss-gallery-item { cursor: zoom-in; } @media (max-width: 600px) { .ss-lightbox { padding: 10px; } .ss-lightbox-image { max-height: calc(100vh - 80px); border-radius: 6px; } .ss-lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; font-size: 22px; } .ss-lightbox-prev { left: 8px; width: 40px; height: 40px; font-size: 22px; } .ss-lightbox-next { right: 8px; width: 40px; height: 40px; font-size: 22px; } .ss-lightbox-counter { bottom: 12px; font-size: 12px; } } /* ============================================ SUBMIT STONE FORM ============================================ */ .ss-form-header { margin-bottom: 32px; } .ss-form-header h1 { font-size: clamp(24px,3vw,32px) !important; color: var(--ps-navy) !important; margin-bottom: 8px !important; } .ss-form-header p { color: var(--ps-text-mid); font-size: 16px; } .ss-form-errors { background: #FEE2E2; border: 1px solid #FCA5A5; border-radius: 8px; padding: 14px 18px; margin-bottom: 24px; color: #991B1B; font-size: 14px; } .ss-form-errors ul { margin: 8px 0 0 16px; padding: 0; } .ss-form-section { background: var(--ps-white); border: 1px solid var(--ps-border); border-radius: var(--ps-radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--ps-shadow); } .ss-form-section-title { font-size: 14px !important; font-weight: 800 !important; color: var(--ps-navy) !important; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 18px !important; padding-bottom: 10px; border-bottom: 2px solid var(--ps-border); } .ss-field { margin-bottom: 16px; } .ss-field:last-child { margin-bottom: 0; } .ss-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ps-text); margin-bottom: 6px; } .ss-required { color: #ef4444; } .ss-optional { color: var(--ps-text-light); font-weight: 400; } .ss-field input[type="text"], .ss-field input[type="email"], .ss-field input[type="number"], .ss-field input[type="url"], .ss-field select, .ss-field textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--ps-border); border-radius: 8px; font-family: var(--ps-font); font-size: 14px; color: var(--ps-text); background: var(--ps-bg); box-sizing: border-box; transition: border-color 0.2s; -webkit-appearance: none; } .ss-field input:focus, .ss-field select:focus, .ss-field textarea:focus { outline: none; border-color: var(--ps-blue); background: var(--ps-white); } .ss-field textarea { resize: vertical; min-height: 100px; } .ss-hint { font-size: 12px !important; color: var(--ps-text-light) !important; margin-top: 6px !important; } .ss-hint a { color: var(--ps-blue); } .ss-form-row { display: grid; gap: 16px; } .ss-form-row-half { grid-template-columns: 1fr 1fr; } /* File Upload */ .ss-file-upload { position: relative; } .ss-field input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; } /* Round 47c: visually hide the Photos file input's native "Choose Files / no files selected" chrome while keeping it functional, focusable, submittable, and linked to .ss-file-label (for="ss-photos"). WCAG/WP visually-hidden pattern — NOT display:none. Scoped to the submit form's photos input only. */ .ss-file-upload input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ss-file-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--ps-border); border-radius: 8px; padding: 28px; cursor: pointer; transition: border-color 0.2s, background 0.2s; background: var(--ps-bg); } .ss-file-label:hover { border-color: var(--ps-blue); background: var(--ps-blue-pale); } .ss-file-icon { font-size: 32px; } .ss-file-text { font-weight: 700; font-size: 14px; color: var(--ps-navy); } .ss-file-hint { font-size: 12px; color: var(--ps-text-light); } .ss-file-preview { position: relative; border-radius: 8px; overflow: hidden; } .ss-file-preview img { width: 100%; max-height: 260px; object-fit: cover; display: block; border-radius: 8px; } .ss-file-remove { position: absolute; top: 8px; right: 8px; background: rgba(15,23,42,0.75); color: white; border: none; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: var(--ps-font); } /* Submit */ .ss-form-submit { text-align: center; padding: 8px 0 24px; } .ss-submit-btn { font-size: 16px !important; padding: 14px 40px !important; } .ss-note { font-size: 12px; color: var(--ps-text-light); margin-top: 10px; } /* Success */ .ss-form-success { text-align: center; padding: 60px 20px; } .ss-success-icon { font-size: 64px; margin-bottom: 16px; } .ss-form-success h2 { color: var(--ps-navy) !important; margin-bottom: 12px !important; } .ss-form-success p { color: var(--ps-text-mid); margin-bottom: 24px; } @media (max-width: 600px) { .ss-form-row-half { grid-template-columns: 1fr; } .ss-form-section { padding: 16px; } } /* Photo grid */ .ss-photo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; } .ss-photo-thumb { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 1; } .ss-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ss-photo-num { position: absolute; bottom: 4px; left: 4px; background: rgba(15,23,42,0.75); color: white; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; } /* Stone-number availability indicator (sits under the Stone Number input) */ .ss-num-status { padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; margin-top: 6px; } .ss-num-checking { background: #FEF3C7; color: #92400E; } .ss-num-available { background: #D1FAE5; color: #065F46; } .ss-num-taken { background: #FEE2E2; color: #991B1B; } /* GPS status */ .ss-gps-status { padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-top: 10px; } .ss-gps-loading { background: #FEF3C7; color: #92400E; } .ss-gps-success { background: #D1FAE5; color: #065F46; } .ss-gps-none { background: #EFF6FF; color: #1E40AF; } /* Map picker */ .ss-map-picker { height: 300px; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--ps-border); margin-top: 10px; } /* Use-my-location button (sits above the map picker) */ .ss-btn-location { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px; background: var(--ps-blue-pale); color: var(--ps-blue); border: 1.5px solid var(--ps-blue); border-radius: 8px; font-family: var(--ps-font); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; } .ss-btn-location:hover:not(:disabled) { background: var(--ps-blue); color: var(--ps-white); } .ss-btn-location:disabled { opacity: 0.6; cursor: wait; } /* Coords display */ .ss-coords-display { background: var(--ps-bg); border: 1.5px solid var(--ps-border); border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--ps-text); margin-bottom: 0; } @media (max-width: 500px) { .ss-photo-grid { grid-template-columns: repeat(3, 1fr); } } /* Photo thumb states */ .ss-photo-thumb.ss-photo-main { outline: 3px solid var(--ps-blue); } .ss-photo-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.7); } /* Upload status */ .ss-upload-status { padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-top: 10px; } .ss-uploading { background: #FEF3C7; color: #92400E; } .ss-upload-done { background: #D1FAE5; color: #065F46; } /* Spinner */ .ss-photo-uploading { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background: var(--ps-bg); } .ss-spinner { width:24px; height:24px; border:3px solid var(--ps-border); border-top-color:var(--ps-blue); border-radius:50%; animation:ss-spin 0.7s linear infinite; } @keyframes ss-spin { to { transform: rotate(360deg); } } /* Remove button */ .ss-photo-remove { position:absolute; top:4px; left:4px; background:rgba(239,68,68,0.85); color:white; border:none; border-radius:4px; width:20px; height:20px; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; } /* ============================================ STONE ARCHIVE PAGE ============================================ */ /* #content.site-content is display:flex (GeneratePress). As the single flex child, .as-wrap must be told to fill the row — without flex-grow/width it shrinks to its content's intrinsic width (the /stones/ table is wide so it looked full; the /contributor/ leaderboard rows collapse, so its banner shrank to ~540px = "half width"). flex:1 1 100% makes it fill regardless of content; min-width:0 lets wide inner content stay contained. Width-axis only — no media query, so mobile is unchanged. */ .as-wrap { background: var(--ps-bg); min-height: 60vh; flex: 1 1 100%; min-width: 0; } /* Header */ .as-header { background: linear-gradient(135deg, var(--ps-navy) 0%, var(--ps-navy-mid) 100%); color: var(--ps-white); padding: 36px 20px 28px; text-align: center; } .as-header-inner { max-width: 1000px; margin: 0 auto; } .as-title { font-size: clamp(24px, 4vw, 36px) !important; font-weight: 900 !important; color: var(--ps-white) !important; margin: 0 0 6px !important; } .as-subtitle { color: rgba(255,255,255,0.75); font-size: 15px; margin: 0; } .as-subtitle strong { color: var(--ps-blue-light); } /* Sticky filter bar */ .as-filters { position: sticky; top: 0; z-index: 30; background: var(--ps-white); border-bottom: 1px solid var(--ps-border); box-shadow: 0 2px 8px rgba(15,23,42,0.06); } .as-filters-inner { max-width: 1000px; margin: 0 auto; padding: 14px 20px; display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 12px; align-items: end; } .as-filter { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .as-filter-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ps-text-light); } .as-filter input[type="search"], .as-filter select { width: 100%; padding: 9px 12px; border: 1.5px solid var(--ps-border); border-radius: 8px; font-family: var(--ps-font); font-size: 14px; color: var(--ps-text); background: var(--ps-bg); box-sizing: border-box; transition: border-color 0.2s, background 0.2s; -webkit-appearance: none; appearance: none; } .as-filter input[type="search"]:focus, .as-filter select:focus { outline: none; border-color: var(--ps-blue); background: var(--ps-white); } .as-filter select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .as-filter-actions { flex-direction: row; align-items: stretch; gap: 8px; } .as-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 8px; font-family: var(--ps-font); font-weight: 700; font-size: 14px; text-decoration: none !important; border: 1.5px solid transparent; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; } .as-btn-primary { background: var(--ps-navy); color: var(--ps-white) !important; } .as-btn-primary:hover { background: var(--ps-blue); } .as-btn-reset { background: transparent; color: var(--ps-text-mid) !important; border-color: var(--ps-border); } .as-btn-reset:hover { border-color: var(--ps-navy); color: var(--ps-navy) !important; } /* Content */ .as-content { padding: 24px 20px 60px; } .as-content-inner { max-width: 1000px; margin: 0 auto; } /* ============================================ Search results (search.php) — reuses the archive's full-width .as-wrap + .as-content / .as-content-inner column; this styles the generic result list (stones + pages). Mobile-safe: max-width only, no fixed widths, so the ≤600px .as-content gutter override still applies. ============================================ */ .ps-search-summary { color: var(--ps-text-mid); font-size: 15px; margin: 0 0 20px; } .ps-search-list { list-style: none; margin: 0; padding: 0; } .ps-search-item { background: var(--ps-white); border: 1px solid var(--ps-border); border-radius: var(--ps-radius); box-shadow: var(--ps-shadow); padding: 20px 24px; margin-bottom: 16px; } .ps-search-item:last-child { margin-bottom: 0; } .ps-search-item-type { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ps-teal); margin-bottom: 6px; } .ps-search-item-title { margin: 0 0 8px; font-size: 20px; line-height: 1.3; } .ps-search-item-title a { color: var(--ps-navy); text-decoration: none; } .ps-search-item-title a:hover { color: var(--ps-teal); } .ps-search-item-excerpt { color: var(--ps-text-mid); font-size: 15px; line-height: 1.6; margin: 0; } @media (max-width: 600px) { .ps-search-item { padding: 16px 16px; } } /* List header row (desktop) */ .as-list-head { display: grid; grid-template-columns: 80px 1fr 160px 130px 120px; gap: 16px; padding: 10px 18px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ps-text-light); border-bottom: 1px solid var(--ps-border); } /* List */ .as-list { list-style: none; padding: 0; margin: 0; background: var(--ps-white); border: 1px solid var(--ps-border); border-radius: var(--ps-radius); overflow: hidden; box-shadow: var(--ps-shadow); } .as-list-head + .as-list { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; } /* Round 44 final: the grid moved from .as-row-link onto .as-row so the link can become a stretched overlay (whole row → stone page) while the "Hidden by" contributor link stays independently clickable. */ .as-row { border-bottom: 1px solid var(--ps-border); position: relative; display: grid; grid-template-columns: 80px 1fr 160px 130px 120px; gap: 16px; align-items: center; padding: 14px 18px; color: var(--ps-text); transition: background 0.15s; } .as-row:last-child { border-bottom: none; } .as-row:hover { background: var(--ps-blue-pale); } .as-row-link { /* transparent overlay covering the row */ position: absolute; inset: 0; z-index: 0; text-decoration: none !important; } .as-col-num { font-weight: 800; color: var(--ps-navy); font-size: 14px; } .as-col-loc { min-width: 0; } .as-loc-main { display: block; font-weight: 700; color: var(--ps-text); font-size: 15px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-loc-sub { display: block; font-size: 12px; color: var(--ps-text-light, #64748b); line-height: 1.3; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-loc-sub-link { /* sits above the stretched overlay so it's clickable */ position: relative; z-index: 1; color: var(--ps-teal, #37959B); font-weight: 600; text-decoration: none; } .as-loc-sub-link:hover { text-decoration: underline; } .as-col-country { font-size: 14px; color: var(--ps-text-mid); } .as-col-type, .as-col-status { font-size: 12px; } .as-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; line-height: 1.4; white-space: nowrap; } /* Pagination */ .as-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 28px; } .as-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ps-border); background: var(--ps-white); color: var(--ps-text) !important; font-weight: 700; font-size: 14px; text-decoration: none !important; transition: background 0.15s, color 0.15s, border-color 0.15s; } .as-pagination .page-numbers:hover { background: var(--ps-blue-pale); border-color: var(--ps-blue-light); } .as-pagination .page-numbers.current { background: var(--ps-navy); color: var(--ps-white) !important; border-color: var(--ps-navy); } .as-pagination .page-numbers.dots { border-color: transparent; background: transparent; } /* Empty state */ .as-empty { text-align: center; padding: 60px 20px; background: var(--ps-white); border: 1px solid var(--ps-border); border-radius: var(--ps-radius); box-shadow: var(--ps-shadow); } .as-empty-icon { font-size: 48px; margin-bottom: 12px; } .as-empty h2 { color: var(--ps-navy) !important; margin: 0 0 8px !important; } .as-empty p { color: var(--ps-text-mid); margin: 0 0 20px; } /* Mobile */ @media (max-width: 760px) { .as-filters-inner { grid-template-columns: 1fr 1fr; gap: 10px; } .as-filter-search { grid-column: 1 / -1; } .as-filter-actions { grid-column: 1 / -1; flex-direction: row; } .as-btn { flex: 1; } .as-list-head { display: none; } .as-list { background: transparent; border: none; box-shadow: none; border-radius: 0; } .as-row { background: var(--ps-white); border: 1px solid var(--ps-border); border-radius: var(--ps-radius); margin-bottom: 10px; box-shadow: var(--ps-shadow); grid-template-columns: auto 1fr; grid-template-areas: "num loc" "num country" "type status"; gap: 6px 14px; padding: 14px 16px; } .as-col-num { grid-area: num; font-size: 18px; align-self: start; padding-top: 2px; } .as-col-loc { grid-area: loc; } .as-col-country { grid-area: country; font-size: 13px; color: var(--ps-text-light); } .as-col-type { grid-area: type; } .as-col-status { grid-area: status; justify-self: end; } .as-loc-main { white-space: normal; } .as-loc-sub { white-space: normal; } .as-pagination .page-numbers { min-width: 34px; height: 34px; font-size: 13px; padding: 0 8px; } } @media (max-width: 420px) { .as-filters-inner { grid-template-columns: 1fr; } } /* ============================================ CUSTOM FOOTER ============================================ */ .pf-footer { background: #000000; color: rgba(255,255,255,0.7); font-family: var(--ps-font); /* Side padding (24px) matches .ph-section so footer + home sections hit the same visible content width at <1148px viewports. */ padding: 48px 24px 32px; border-top: 1px solid rgba(255,255,255,0.06); /* z-index 1000 keeps the footer above any Leaflet pane (see leaflet rules further down). Header has the same treatment via .ps-h. */ position: relative; z-index: 1000; } .pf-footer-inner { /* 1000px matches the site-wide content convention used by .as-content-inner / .ss-content-inner / single-stone's hero — the home sections nominally cap at 1100px but render narrower because GP's `#page.grid-container` constrains them. 1000px gives the footer the same visible width as the rest of the site. */ max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; align-items: center; } /* Brand column */ .pf-tagline { margin: 0 0 12px; font-size: 15px; color: rgba(255,255,255,0.85); font-style: italic; line-height: 1.5; } .pf-copy { margin: 0; font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; } .pf-copy a { color: var(--ps-blue-light); text-decoration: none; } .pf-copy a:hover { color: var(--ps-white); } /* Search column */ .pf-search { display: flex; align-items: stretch; width: 100%; max-width: 320px; margin: 0 auto; /* Bumped from 0.06/0.08 — needed slightly more contrast against the new pure-black footer background. */ background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; overflow: hidden; transition: border-color 0.15s, background 0.15s; } .pf-search:focus-within { border-color: var(--ps-yellow); background: rgba(255,255,255,0.10); } .pf-search input[type="search"] { flex: 1; background: transparent; border: 0; outline: none; color: var(--ps-white); font-family: var(--ps-font); font-size: 14px; padding: 10px 16px; } .pf-search input[type="search"]::placeholder { color: rgba(255,255,255,0.45); } .pf-search button { background: transparent; border: 0; color: var(--ps-yellow); padding: 0 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .pf-search button:hover { color: var(--ps-yellow-hover); } /* Links column */ .pf-col-links { justify-self: end; } .pf-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .pf-links a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 600; text-decoration: none; transition: color 0.15s; } .pf-links a:hover { color: var(--ps-yellow); } /* Mobile */ @media (max-width: 760px) { .pf-footer { padding: 36px 18px 28px; } .pf-footer-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; } .pf-col-links { justify-self: stretch; } .pf-links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 18px; align-items: center; } .pf-search { max-width: 100%; } } /* ============================================ SITE-WIDE HEADER (penguinstones redesign) Used by header.php. Transparent on the home page so it floats over the night-sky hero; solid dark on all other pages. ============================================ */ /* Site-wide header — solid black, sticky to viewport top, sits above any Leaflet pane (z-index 1000, see fix 3). The legacy .ps-h-on-hero modifier is intentionally not styled — round-5 dropped the transparent variant. `.ps-h-solid` is now a no-op class kept only because the markup still ships it. */ .site-header, .ps-h { position: sticky !important; top: 0; left: 0; right: 0; z-index: 1000; background-color: #000000 !important; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: var(--ps-font); } .ps-h-inner { max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Brand wordmark */ .ps-h-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ps-white); text-decoration: none; font-weight: 900; letter-spacing: 0.5px; font-size: 18px; } .ps-h-brand:hover { color: var(--ps-yellow); } .ps-h-brand-mark { font-size: 22px; line-height: 1; } .ps-h-brand-text { text-transform: uppercase; font-family: var(--ps-font-heading); } /* Desktop nav */ .ps-h-nav { display: flex; align-items: center; gap: 8px; } .ps-h-link { color: var(--ps-white); text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: 0.6px; padding: 10px 14px; border-radius: 6px; transition: color 0.15s, background 0.15s; } .ps-h-link:hover { color: var(--ps-yellow); } /* Yellow CTA — used in both desktop nav and mobile panel. Text color + weight set by the shared rule further down. */ .ps-h-cta { background: var(--ps-yellow); padding: 10px 20px; border-radius: 6px; font-size: clamp(14px, 1.1vw, 16px); box-shadow: 0 4px 14px rgba(247,195,44,0.28); } .ps-h-cta:hover { background: var(--ps-yellow-hover); transform: translateY(-1px); } /* Hamburger */ .ps-h-burger { display: none; width: 42px; height: 42px; background: transparent; border: 0; cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center; padding: 0; } .ps-h-burger span { display: block; width: 24px; height: 2.5px; background: var(--ps-white); border-radius: 2px; transition: transform 0.18s; } .ps-h-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .ps-h-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .ps-h-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Mobile panel */ .ps-h-mobile { display: flex; flex-direction: column; gap: 4px; padding: 12px 18px 20px; background: var(--ps-navy); border-top: 1px solid rgba(255,255,255,0.06); } .ps-h-mobile[hidden] { display: none; } .ps-h-mobile-link { color: var(--ps-white); text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: 0.6px; padding: 14px 12px; border-radius: 8px; } .ps-h-mobile-link:hover { background: rgba(255,255,255,0.06); color: var(--ps-yellow); } .ps-h-mobile-link.ps-h-cta { text-align: center; background: var(--ps-yellow); color: var(--ps-yellow-ink); margin: 6px 0 10px; } @media (max-width: 760px) { .ps-h-nav { display: none; } .ps-h-burger { display: flex; } .ps-h-inner { padding: 14px 18px; } } /* On the home page, our hero sits at the top of the page. The GP parent adds a `#page > #content` wrapper with a max-width container — strip those constraints so the sections go truly edge-to-edge. */ /* Home page: kill horizontal scroll that any rounding artifact could produce. The actual section-width constraint was .ph-home (see its rule) — none of the GP wrappers needed overriding. */ body.home, body.page-template-page-home { overflow-x: hidden; } body.home .inside-article, body.page-template-page-home .inside-article { padding: 0 !important; background: transparent !important; box-shadow: none !important; } /* Round 5: the header is solid + sticky now (no longer floating over the hero), so the negative-margin overlap is gone. We override .ph-hero's own padding-top here to preserve the round-2 clearance (~100px desktop, ~70px mobile) between the header bottom and the H1. */ body.page-template-page-home #section-hero { padding-top: 100px; } @media (max-width: 760px) { body.page-template-page-home #section-hero { padding-top: 70px; } } /* ============================================ PAGE-HOME (penguinstones redesign) Used by page-home.php. All section classes use the .ph- prefix. ============================================ */ .ph-home { font-family: var(--ps-font); color: var(--ps-white); background: var(--ps-navy); /* Round 8: this wrapper was the actual section-width constraint — not any GP container. Forcing 100% lets every .ph-section inside span the full viewport. Confirmed via DOM trace: .ph-home was 1148px inside a 1456px .site-content. */ max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .ph-section { /* Sections are simple full-width block elements; the parent GP wrappers are forced to 100% on body.home (see override block further down), so .ph-section naturally fills the viewport. */ width: 100%; max-width: 100%; position: relative; padding: 100px 24px; } /* Unified H2 for ALL sections (excludes the hero H1). White on every section background — round 3 standardized this so the title rhythm matches. The --light modifier is now a no-op kept only for safety where it's already in the markup. */ .ph-section-title { font-size: clamp(28px, 3.5vw, 44px) !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 1.5rem !important; color: #ffffff !important; text-align: center; } .ph-section-title--light { color: #ffffff !important; } /* ---- Yellow CTA button (the unified home-page button) ---- */ .ph-btn { display: inline-block; background: var(--ps-yellow); text-decoration: none !important; text-transform: uppercase; font-size: clamp(16px, 1.4vw, 19px); padding: 14px 32px; border-radius: 6px; border: 0; box-shadow: 0 6px 18px rgba(247,195,44,0.28); transition: transform 0.15s, box-shadow 0.15s, background 0.15s; cursor: pointer; } .ph-btn:hover { background: var(--ps-yellow-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(217,168,21,0.35); } .ph-btn-on-dark { box-shadow: 0 6px 22px rgba(0,0,0,0.35); } /* White ink + extra-bold weight on every yellow CTA, every state. !important is intentional — overrides any parent/theme rule that might slip a darker color or lighter weight in (e.g. GP default link colors). */ .ph-btn, .ph-btn:link, .ph-btn:visited, .ph-btn:hover, .ph-btn:active, .ph-btn:focus, .ps-h-cta, .ps-h-cta:link, .ps-h-cta:visited, .ps-h-cta:hover, .ps-h-cta:active, .ps-h-cta:focus { color: #ffffff !important; font-weight: 900 !important; letter-spacing: 0.03em; } /* ---- SECTION 1: Hero ---- */ .ph-hero { min-height: 560px; padding: 160px 24px 80px; background-size: cover; background-position: center; background-color: #0b1530; text-align: center; } .ph-hero-overlay { position: absolute; inset: 0; /* Lightened: the home-page-1.webp hero already has a gradient baked in, so a light bottom-weighted wash is enough to keep the white headline legible without double-darkening the image. */ background: linear-gradient(180deg, rgba(11,21,48,0.10) 0%, rgba(11,21,48,0.22) 60%, rgba(11,21,48,0.40) 100%); pointer-events: none; } .ph-hero-inner { position: relative; max-width: 1100px; margin: 0 auto; } .ph-hero-title { /* Cap at 50px so "PLACE A PENGUIN. START AN ADVENTURE." fits on one line at common desktop widths (1200-1440px). On <=700px viewports we expose the .ph-hero-break
so it wraps after "PENGUIN." */ font-size: clamp(28px, 5vw, 50px); font-weight: 900; text-transform: uppercase; letter-spacing: 1px; line-height: 1.1; color: var(--ps-white); margin: 0 0 22px; } .ph-hero-break { display: none; } @media (max-width: 700px) { .ph-hero-break { display: inline; } } .ph-hero-sub { font-size: clamp(16px, 1.8vw, 22px); text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,0.9); line-height: 1.6; max-width: 820px; margin: 0 auto 56px; font-weight: 600; } .ph-counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 900px; margin: 0 auto 48px; } .ph-counter { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 26px 18px; backdrop-filter: blur(8px); } .ph-counter-num { display: block; font-size: clamp(32px, 4.5vw, 56px); font-weight: 900; color: var(--ps-yellow); line-height: 1; margin-bottom: 8px; } .ph-counter-link { text-decoration: none; color: inherit; display: block; transition: transform 0.15s ease, opacity 0.15s ease; } .ph-counter-link:hover, .ph-counter-link:focus-visible { transform: translateY(-2px); opacity: 0.85; } .ph-counter-link:focus-visible { outline: 2px solid var(--ps-yellow, #F7C32C); outline-offset: 4px; border-radius: 4px; } .ph-counter-label { display: block; font-size: clamp(13px, 1.3vw, 17px); font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; color: rgba(255,255,255,0.85); } @media (max-width: 700px) { .ph-hero { min-height: 480px; padding: 130px 18px 60px; } .ph-counters { grid-template-columns: 1fr; gap: 12px; max-width: 360px; } .ph-counter { padding: 20px 16px; } .ph-counter-num { font-size: 32px; } } /* ---- SECTION 2: The Goal ---- */ .ph-goal { padding: 140px 24px; background-size: cover; background-position: center; background-color: #0b1530; text-align: center; } .ph-goal-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,21,48,0.55), rgba(11,21,48,0.85)); pointer-events: none; } .ph-goal-inner { position: relative; max-width: 820px; margin: 0 auto; } .ph-bignum { font-size: clamp(60px, 11vw, 140px); font-weight: 900; color: var(--ps-yellow); line-height: 1; margin: 0 0 18px; letter-spacing: -2px; } .ph-goal-sub { font-size: clamp(15px, 1.6vw, 18px); text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.85); margin: 0 0 36px; font-weight: 700; } .ph-goal-feet { display: block; margin: 1.5rem auto; max-width: 120px; height: auto; } @media (max-width: 600px) { .ph-goal { padding: 100px 18px; } .ph-goal-feet { max-width: 80px; } } /* ---- SECTION 3: How It Works ---- 4 cells: per-step label on top, transparent icon below. Each cell uses its own how-it-works-{1..4}.webp icon. Layout: 4 columns ≥1024px, 2x2 on smaller. */ .ph-how { background: var(--ps-teal); text-align: center; padding: 100px 24px 80px; } .ph-how-inner { max-width: 1100px; margin: 0 auto; } .ph-how .ph-section-title { color: var(--ps-white); } .ph-how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; margin: 0 0 48px; } .ph-how-cell { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ps-white); } .ph-how-label { margin: 0 0 18px; font-size: clamp(13px, 1.3vw, 16px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; line-height: 1.35; color: var(--ps-white); } .ph-how-icon { display: block; width: 100%; max-width: 200px; height: auto; } @media (max-width: 1023px) { .ph-how-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } .ph-how-icon { max-width: 180px; } } @media (max-width: 500px) { .ph-how { padding: 80px 18px 60px; } .ph-how-grid { gap: 28px 16px; margin-bottom: 36px; } .ph-how-icon { max-width: 140px; } .ph-how-label { margin-bottom: 12px; } } /* ---- SECTION 4: Latest Stones ---- */ .ph-latest { /* Round 12: switched from pure black (round 10) to teal to match the How It Works section above. The two sections will visually merge into one continuous teal band — intentional per round-12 spec. */ background-color: var(--ps-teal) !important; text-align: center; } .ph-latest .ph-section-title { color: var(--ps-white); } .ph-latest-inner { max-width: 1100px; margin: 0 auto; } .ph-stones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 0 40px; text-align: left; } .ph-stone-card { display: block; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; text-decoration: none !important; color: var(--ps-white); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .ph-stone-card:hover { transform: translateY(-4px); border-color: var(--ps-yellow); box-shadow: 0 14px 30px rgba(0,0,0,0.35); } .ph-stone-img { aspect-ratio: 4 / 3; background: #1f2937; overflow: hidden; } .ph-stone-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ph-stone-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; color: rgba(255,255,255,0.5); } .ph-stone-info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; } .ph-stone-num { font-size: 13px; font-weight: 800; color: var(--ps-yellow); letter-spacing: 0.4px; } .ph-stone-loc { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.9); line-height: 1.4; } .ph-stone-loading { grid-column: 1 / -1; padding: 40px; color: rgba(255,255,255,0.6); font-size: 15px; } @media (max-width: 760px) { .ph-stones-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .ph-stones-grid { grid-template-columns: 1fr; } } /* ---- SECTION 5: Join Us ---- Solid purple background + transparent overlay icon (want-to-joint-us-1.webp) centered under the content. Vertical stack: heading → button → note → icon. */ .ph-join { background: var(--ps-purple); padding: 110px 24px 90px; text-align: center; } .ph-join-inner { max-width: 720px; margin: 0 auto; position: relative; } .ph-join-note { margin: 18px 0 0; font-size: 13px; font-style: italic; color: rgba(255,255,255,0.8); letter-spacing: 0.3px; } .ph-join-image { display: block; width: 100%; max-width: 320px; height: auto; margin: 48px auto 0; } @media (max-width: 600px) { .ph-join { padding: 80px 18px 60px; } .ph-join-image { max-width: 220px; margin-top: 36px; } } /* ---- SECTION 6: Community Highlights ---- */ .ph-community { background: var(--ps-dark); padding: 100px 24px; } .ph-community-inner { max-width: 1100px; margin: 0 auto; } .ph-community-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0 0 36px; } .ph-card { background: #131313; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px 28px 32px; } .ph-card-title { margin: 0 0 22px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.6px; color: var(--ps-yellow); } /* Heading-as-link (Top 3 contributors → /contributor/): inherit the title's color + no underline, so it's clickable with no visual change. */ .ph-card-title a { color: inherit; text-decoration: none; } .ph-card-title a:hover { text-decoration: underline; } .ph-card-empty { color: rgba(255,255,255,0.5); font-size: 14px; margin: 0; } /* Top contributors */ .ph-contrib-list { list-style: none; padding: 0; margin: 0; } .ph-contrib { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .ph-contrib:last-child { border-bottom: 0; } .ph-contrib-avatar { width: 36px; display: inline-flex; } .ph-contrib-avatar svg { width: 36px; height: 48px; } .ph-contrib-name { font-size: 16px; font-weight: 700; color: var(--ps-white); } .ph-contrib-count { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.6); } /* Top countries pie */ .ph-pie-wrap { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; } .ph-pie { width: 160px; height: 160px; border-radius: 50%; box-shadow: 0 6px 20px rgba(0,0,0,0.5); } .ph-pie-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .ph-pie-legend li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.85); } .ph-pie-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 12px; } .ph-pie-flag { font-size: 16px; line-height: 1; } .ph-pie-country { font-weight: 600; flex: 1; } .ph-pie-count { font-weight: 800; color: var(--ps-yellow); } @media (max-width: 760px) { .ph-community-row { grid-template-columns: 1fr; } .ph-pie-wrap { grid-template-columns: 120px 1fr; gap: 16px; } .ph-pie { width: 120px; height: 120px; } } /* Newest placer card */ .ph-newest { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 36px; padding: 22px 28px; background: #131313; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; max-width: 460px; margin-left: auto; margin-right: auto; } .ph-newest-avatar { width: 48px; display: inline-flex; } .ph-newest-avatar svg { width: 48px; height: 64px; } .ph-newest-text { text-align: left; } .ph-newest-label { margin: 0 0 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ps-yellow); } .ph-newest-name { margin: 0; font-size: 18px; font-weight: 800; color: var(--ps-white); } /* Bottom stat row */ .ph-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; } .ph-stat { text-align: center; padding: 24px 16px; background: #131313; border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; } .ph-stat-num { display: block; font-size: clamp(22px, 3vw, 32px); font-weight: 900; color: var(--ps-yellow); line-height: 1.1; margin-bottom: 6px; } .ph-stat-flag { margin-right: 6px; } .ph-stat-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,0.65); } @media (max-width: 600px) { .ph-stats-row { grid-template-columns: 1fr; } .ph-newest { flex-direction: column; text-align: center; } .ph-newest-text { text-align: center; } } /* ---- SECTION 7: Support ---- */ .ph-support { padding: 150px 24px; min-height: 360px; background-size: cover; background-position: center; background-color: #0b1530; text-align: center; display: flex; align-items: center; justify-content: center; } .ph-support-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,21,48,0.25), rgba(11,21,48,0.45)); pointer-events: none; } .ph-support-inner { position: relative; } @media (max-width: 600px) { .ph-support { padding: 110px 18px; min-height: 280px; } } /* ============================================ R4 UNIFIED SECTION INNER Sections span the full viewport (see body.home #page override above); their content is constrained + centered at 1100px by this single rule. Round-1/2 per-section max-widths (820, 720, etc.) are deliberately overridden here so the H2 / number / grid columns all share the same left/right gutter on desktop. Mobile keeps the original 18px outer gutter from .ph-section's own padding — we zero out inner padding under 600px to avoid double-padding. ============================================ */ .ph-section-inner, .ph-hero-inner, .ph-goal-inner, .ph-how-inner, .ph-latest-inner, .ph-join-inner, .ph-community-inner, .ph-support-inner { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } @media (max-width: 600px) { .ph-section-inner, .ph-hero-inner, .ph-goal-inner, .ph-how-inner, .ph-latest-inner, .ph-join-inner, .ph-community-inner, .ph-support-inner { padding-left: 0; padding-right: 0; } } /* Per-section margin tweak: THE GOAL H2 sits closer to the big number. */ .ph-goal .ph-section-title { margin-bottom: 1rem !important; } /* ============================================ LEAFLET z-INDEX CAP Leaflet's default panes (200–700) and controls (1000+) climb above simple-themed headers and footers, causing markers / popups to overlap site chrome when the user scrolls. Pin the map container low and cap pane / control stacks below 1000 so the sticky header + footer (z-index: 1000) win. ============================================ */ .leaflet-container { z-index: 1; } .leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 400 !important; } /* ============================================ ROUND 37 — DEFINITIVE mobile horizontal-overflow fix (root cause found). The round-36 on-device diagnostic returned 75 overflowing elements, ALL inside .ps-section on the submit page. The actual culprits: Leaflet TILES (img.leaflet-tile) and the .leaflet-proxy, positioned via transform: translate3d(192px…) / translate3d(512px…) scale(2) — a 256px tile starting at 192px reaches 448px, and the proxy reaches ~1024px, both far past a 360–380px phone's right edge. They escaped the map container and widened .ps-section; every other "overflowing" element just inherited that widened width. Leaflet's own CSS sets `.leaflet-container { overflow: hidden }`, but iOS Safari (WebKit) lets transform-positioned descendants paint OUTSIDE an ancestor's overflow:hidden — so the round-36 `overflow-x: clip` on the grandparent (#content / .ps-section) didn't catch it either. `contain: layout paint` declares a real containment boundary that WebKit honors even for transformed descendants. NOTE: deliberately NOT `size` (that would make Leaflet measure the container as 0×0 and break the map); `layout paint` leaves the box size intact, so Leaflet sizes/pans normally and popups still auto-pan into view. This is the PRIMARY fix; round 36's #content/.ps-section clip stays as belt-and-suspenders. */ .ss-map-picker, .leaflet-container { overflow: hidden !important; max-width: 100% !important; contain: layout paint; } /* Geolocation button — same compact pill as Leaflet's built-in controls. */ .ps-locate-btn { background: #ffffff; border: 1px solid #ccc; width: 34px; height: 34px; border-radius: 4px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; margin: 10px 0 0 10px; box-shadow: 0 1px 5px rgba(0,0,0,0.2); } .ps-locate-btn:hover { background: #f5f5f5; } /* ============================================ R7 MOBILE BACKGROUND IMAGES Below 768px, switch hero / goal / support from `cover` (crops most of the image) to `100% auto` (whole image visible, anchored to top of the section). Section background-color fills any vertical space the image doesn't reach — sampled against the image edges so the seam is imperceptible. Sections will be a bit taller on mobile as a result. ============================================ */ @media (max-width: 768px) { .ph-hero, .ph-goal, .ph-support { background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; } .ph-hero { background-color: #0a1e4a; } /* night-sky edge */ .ph-goal { background-color: #000000; } /* world-map edge */ .ph-support { background-color: #1a1a1a; } /* stones-photo edge */ } /* ============================================ R9 Fix 1a — revert hero to cover on mobile Round 7 set all three sections to `100% auto`. Hero now wants cover again (image should fill the section). Goal + support unchanged. ============================================ */ @media (max-width: 768px) { .ph-hero { background-size: cover !important; background-position: center center !important; } } /* ============================================ R10 Fix 1 — hero H1 mobile: two lines, comfortable size Round 9 forced single-line at 13px (unreadable). Now we let it wrap naturally at ~22px so "PLACE A PENGUIN." sits on line 1 and "START AN ADVENTURE." on line 2 — the natural break point at this font size. ============================================ */ @media (max-width: 600px) { .ph-hero h1, .ph-hero .ph-hero-title { font-size: clamp(20px, 5.5vw, 24px) !important; white-space: normal !important; line-height: 1.2; letter-spacing: 0.01em; } .ph-hero-break { display: none !important; } } /* ============================================ R9 Fix 2 — shared inner-page centering Every page except the home gets a 1100px centered content column with 40px / 24px padding. Map page + Stones archive opt out because they render their own full-width chrome (.ps-page-header / .ps-page-body). ============================================ */ body:not(.home):not(.page-template-page-home) .site-content, body:not(.home):not(.page-template-page-home) .inside-content { max-width: 1100px; margin: 0 auto; padding: 40px 24px; } body.page-template-page-map .site-content, body.page-template-page-map .inside-content, body.post-type-archive-stone .site-content, body.post-type-archive-stone .inside-content, /* Search results (search.php) opt out too, so they mirror the /stones/ archive: full-width band + the .as-wrap{flex:1 1 100%} child that fixes the half-width flex bug. No-sidebar layout is forced in search.php. */ body.search .site-content, body.search .inside-content, /* /contributor/ archive opts out too, so it mirrors the /stones/ archive: a full-width band + a .as-content/.as-content-inner 1000px centered column. */ body.post-type-archive-contributor .site-content, body.post-type-archive-contributor .inside-content, /* Single contributor profile (/contributor/{slug}/) opts out too, so it mirrors the archive: full-width band + .as-content/.as-content-inner 1000px centered column. Its .as-wrap (round 44 markup) fills the flex #content via the shared .as-wrap{flex:1 1 100%} rule. */ body.single-contributor .site-content, body.single-contributor .inside-content, /* FAQ + Privacy Policy + About share the archive's exact .site-content width rule, so their .as-wrap banner spans the same width as the /stones/ archive. The page templates inject these body classes via body_class (they bind by slug, so WP omits them otherwise). The header stacks via the .as-wrap wrapper (round 53); the body stays a centered .ps-section-inner column. */ body.page-template-page-faq .site-content, body.page-template-page-faq .inside-content, body.page-template-page-privacy-policy .site-content, body.page-template-page-privacy-policy .inside-content, body.page-template-page-about .site-content, body.page-template-page-about .inside-content { max-width: 100%; padding: 0; } /* ============================================ R9 Fix 3 + 4 — shared .ps-page-header / .ps-page-body Black banner used by /map/ (page-map.php) and /stones/ archive (archive-stone.php). Title styling mirrors the unified .ph-section-title from round 3 so map/archive headings rhyme with home-page H2s. ============================================ */ .ps-page-header { background-color: #000000; padding: 60px 24px; text-align: center; width: 100%; } .ps-page-header-inner { max-width: 1100px; margin: 0 auto; } .ps-page-title { color: #ffffff; text-transform: uppercase; font-size: clamp(28px, 3.5vw, 44px); font-weight: 900; letter-spacing: 0.01em; margin: 0; } .ps-page-subtitle { color: #ffffff; font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; margin: 0.5rem 0 0; text-transform: uppercase; letter-spacing: 0.02em; } /* Round 13: full-page map. The 1400px cap from round 11 is gone — map fills the viewport minus the sticky header height. */ .ps-page-body--map { width: 100%; margin: 0; padding: 0; } .ps-page-body--map #penguinstones-map { width: 100%; height: calc(100vh - 80px); min-height: 500px; display: block; } @media (max-width: 600px) { .ps-page-body--map #penguinstones-map { height: calc(100vh - 60px); } } body.page-template-page-map .pf-footer { margin-top: 0; } /* ============================================ R10 Fix 5a — Map page brute-force width override Same pattern that fixed the home page in round 8, scoped to the map template. GP's #page / .grid-container constrains the map to its content-width unless we override every plausible wrapper. ============================================ */ body.page-template-page-map, body.page-template-page-map #page, body.page-template-page-map .site, body.page-template-page-map .site-content, body.page-template-page-map .inside-content, body.page-template-page-map main, body.page-template-page-map .grid-container, body.page-template-page-map .container { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ============================================ R12 Fix 2 — Submit a Stone centering (widened selector net) Round 11's body.page-template-page-submit-stone selector didn't match whatever WP actually puts on the body. Using [class*="submit-stone"] and [class*="submit-a-stone"] catches every plausible variant. ============================================ */ body[class*="submit-stone"] #page, body[class*="submit-stone"] .site, body[class*="submit-stone"] .site-content, body[class*="submit-stone"] .inside-content, body[class*="submit-stone"] main, body[class*="submit-stone"] article, body[class*="submit-stone"] .grid-container, body[class*="submit-stone"] .container, body[class*="submit-stone"] .entry-content, body[class*="submit-a-stone"] #page, body[class*="submit-a-stone"] .site, body[class*="submit-a-stone"] .site-content, body[class*="submit-a-stone"] .inside-content, body[class*="submit-a-stone"] main, body[class*="submit-a-stone"] article, body[class*="submit-a-stone"] .grid-container, body[class*="submit-a-stone"] .container, body[class*="submit-a-stone"] .entry-content { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body[class*="submit-stone"] .ps-section-inner, body[class*="submit-a-stone"] .ps-section-inner { max-width: 700px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px; padding-right: 24px; } /* Round 18: the R11 .ps-stone-hidden-by-name + .ps-stone-instagram rules were removed when Hidden-by moved back inside the Stone Details list. The new .ss-detail-hidden-by-link rule below replaces them. */ .ss-detail-hidden-by-link { color: var(--ps-yellow, #F7C32C); font-weight: 700; text-decoration: none; } .ss-detail-hidden-by-link:hover { text-decoration: underline; } /* ============================================ R12 Fix 3a — All Stones archive header centering Redundant with the base .ps-page-header rules but spelled out per round-12 spec so it's obvious if a future round-9 cleanup ever drops them. The stones grid below is already centered via .as-content-inner. ============================================ */ .ps-page-header--stones { text-align: center; } .ps-page-header--stones .ps-page-header-inner { max-width: 1100px; margin: 0 auto; } body.page-template-page-submit-stone .ps-section { margin-left: auto !important; margin-right: auto !important; } /* ============================================ R16 — Ko-fi support card (sidebar variant of .ss-card-cta) Reuses .ss-card + .ss-card-cta base structure; the --kofi modifier swaps the dark navy background for the stones photo with a darkening overlay so white text + yellow button read cleanly. ============================================ */ .ss-card-cta--kofi { position: relative; color: #ffffff; background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url("/wp-content/themes/generatepress-child/images/support-bg-stones.webp"); background-size: cover; background-position: center; border-color: transparent; overflow: hidden; } .ss-card-cta--kofi h3, .ss-card-cta--kofi p { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } .ss-card-cta--kofi .ss-cta-btn { background: var(--ps-yellow, #F7C32C) !important; color: #ffffff !important; font-weight: 900 !important; text-transform: uppercase; } .ss-card-cta--kofi .ss-cta-btn:hover { background: var(--ps-yellow-hover, #D9A815) !important; } /* Round 18: removed the R17 standalone .ps-stone-hidden-by / .ps-stone-hidden-icon block — Hidden by moved back inside the Stone Details list (.ss-details li). */ /* ============================================ R17 CONTRIBUTORS — Leaderboard page ============================================ */ .ps-leaderboard { padding: 60px 24px; background: #ffffff; } .ps-leaderboard-inner { max-width: 900px; margin: 0 auto; } .ps-leaderboard-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .ps-leaderboard-row { display: grid; grid-template-columns: 50px 60px 1fr auto; align-items: center; gap: 16px; padding: 12px 16px; background: #f7f7f7; border-radius: 8px; font-size: 15px; } .ps-leaderboard-row.is-podium { background: linear-gradient(90deg, #fff8e1 0%, #f7f7f7 100%); border-left: 4px solid var(--ps-yellow, #F7C32C); } .ps-leaderboard-row.is-podium-1 { border-left-color: #d4a017; } /* gold */ .ps-leaderboard-row.is-podium-2 { border-left-color: #c0c0c0; } /* silver */ .ps-leaderboard-row.is-podium-3 { border-left-color: #cd7f32; } /* bronze */ .ps-leaderboard-rank { font-weight: 900; color: #999; font-size: 16px; } .ps-leaderboard-icon img { width: 48px; height: 48px; border-radius: 50%; display: block; object-fit: cover; background: #e9ecef; } .ps-leaderboard-name { font-weight: 600; } .ps-leaderboard-stats { font-size: 14px; color: #555; text-align: right; white-space: nowrap; } .ps-leaderboard-empty { text-align: center; padding: 40px; color: #999; } @media (max-width: 600px) { .ps-leaderboard-row { grid-template-columns: 36px 44px 1fr; font-size: 14px; } .ps-leaderboard-stats { grid-column: 2 / -1; text-align: left; } } /* ============================================ R17 CONTRIBUTORS — home Section 6 Top 3 + Newest Placer Replaces the round-1 .ph-contrib silhouette pattern with real circular avatar images (real or default penguin-avatar.webp). Used by page-home. ============================================ */ .ph-contributor { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .ph-contributor:last-child { border-bottom: 0; } .ph-contributor-icon { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.08); } .ph-contributor--1 { box-shadow: inset 4px 0 0 #d4a017; padding-left: 12px; } .ph-contributor--2 { box-shadow: inset 4px 0 0 #c0c0c0; padding-left: 12px; } .ph-contributor--3 { box-shadow: inset 4px 0 0 #cd7f32; padding-left: 12px; } .ph-contributor-name { font-size: 16px; font-weight: 700; color: var(--ps-white); text-decoration: none; transition: color 0.2s; } .ph-contributor-name:hover { color: var(--ps-yellow, #F7C32C); } .ph-contributor-count { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.6); white-space: nowrap; } /* Newest placer avatar — switched from SVG silhouette to real image. */ .ph-newest-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; background: rgba(255,255,255,0.08); } /* ============================================ R19 — Single Stone description overflow guard Migrated content sometimes contains long unbroken token strings (leftover plugin class names with HTML stripped). Without these rules the column stretches sideways and breaks the sidebar layout. Actual class on the description block is .ss-body (see single-stone.php) — selectors below also cover .entry-content for any GP-wrapped content and the body.single-stone scope as a catch-all. ============================================ */ .single-stone .ss-body, .single-stone .ss-body p, .single-stone .entry-content, .single-stone .entry-content p { overflow-wrap: anywhere; word-wrap: break-word; word-break: break-word; hyphens: auto; max-width: 100%; } /* Inline links / raw URLs inside the description shouldn't push the column wider either. break-all is acceptable for URL-shaped text. */ .single-stone .ss-body a, .single-stone .entry-content a { overflow-wrap: anywhere; word-break: break-all; } /* ============================================ Round 42 — content-page mobile padding (surgical, diagnostic-driven). On iPhone 16 Pro (402px) the stones archive + leaderboard were cramped to ~306px content. The inset STACKED: #content.site-content keeps 24px each side (round-9's main rule wins — its 'archive/map exemption' at (0,2,1) is too low-specificity to beat the (0,3,1) :not():not() main selector) PLUS the page section padding 24px (.ps-page-header banner, .ps-leaderboard, and archive's .as-content at 20px). Trim all of these to 12px on mobile. #content.site-content is SCOPED to archive + leaderboard, NOT global: - the homepage is EXCLUDED from round-9 and renders edge-to-edge full-bleed, so a global #content padding would inset its hero/section backgrounds. - the map page manages its own #content; left untouched. ID-level (1,2,1) specificity beats round-9's (0,3,1) and GeneratePress. This block is intentionally at end-of-file so it wins source-order over the base .ps-page-header / .as-content / .ps-leaderboard rules (equal specificity). Pairs with round 41 (single-stone .ss-content 12px): single-stone, archive, and leaderboard now all sit at a consistent ~12px mobile gutter. ============ */ @media (max-width: 600px) { /* outer GP wrapper — only on the listing pages that stack a section inside it */ body.post-type-archive-stone #content.site-content, body.page-template-page-leaderboard #content.site-content { padding-left: 12px; padding-right: 12px; } /* shared black banner (archive + leaderboard + map) */ .ps-page-header { padding-left: 12px; padding-right: 12px; } /* inner list/content sections */ .as-content { padding-left: 12px; padding-right: 12px; } .ps-leaderboard { padding-left: 12px; padding-right: 12px; } } /* ROUND 43 homepage "Explore the map" lazy teaser (.ph-mapteaser / .ph-map*) was removed in round 46 — the homepage no longer has a map section. */ /* ============ ROUND 44 — Contributor refactor UI ============ */ /* Submit form: email-first contributor lookup */ .ss-contributor-banner { margin-top: 8px; padding: 9px 12px; border-radius: 8px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: 13px; font-weight: 600; line-height: 1.4; } .ss-contributor-banner a#ss-notme { color: #047857; text-decoration: underline; font-weight: 700; white-space: nowrap; } .ss-field-hint { margin: 5px 0 0; font-size: 12px; color: var(--ps-text-light, #64748b); } input.ss-field-locked { background: #f1f5f9 !important; color: #475569 !important; cursor: not-allowed; } /* Contributor pages (single + archive) */ .ps-page-header--contributor { text-align: center; } .pc-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; display: block; border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 4px 14px rgba(0,0,0,0.2); } .pc-content { padding: 40px 24px; } .pc-content-inner { max-width: 1100px; margin: 0 auto; } .pc-bio { max-width: 720px; margin: 0 auto 32px; text-align: center; color: var(--ps-navy, #0f172a); line-height: 1.6; } .pc-stones-grid { margin-top: 8px; } .pc-empty { text-align: center; color: var(--ps-text-light, #64748b); padding: 30px 0; } .pc-back { text-align: center; margin-top: 30px; } .pc-back a { font-weight: 700; color: var(--ps-teal, #37959B); } .ps-leaderboard-name-link { color: inherit; text-decoration: none; } .ps-leaderboard-name-link:hover { text-decoration: underline; } .pc-archive-content { /* reuses .ps-leaderboard styling */ } /* Mobile gutter — same surgical pattern as round 41/42 (single-stone / archive / leaderboard). Contributor single + archive are singular/archive bodies that inherit round-9's 24px .site-content; trim to a 12px gutter. */ @media (max-width: 600px) { body.single-contributor #content.site-content, body.post-type-archive-contributor #content.site-content { padding-left: 12px; padding-right: 12px; } .pc-content { padding-left: 12px; padding-right: 12px; } } /* ============================================================ ROUND 44 final — Contributor identity/profile page (single-contributor.php): back link, profile header (avatar + name + stats + optional public bio) on the black .ps-page-header banner, then a placeholder Badges grid in the white area below. ============================================================ */ /* Back link above the banner, aligned with the banner's content edge */ .pc-backlink-row { max-width: 1100px; margin: 0 auto; padding: 20px 24px 0; } .pc-backlink-row .pc-back { margin-top: 0; /* override older centered .pc-back */ text-align: left; display: inline-block; font-weight: 700; color: var(--ps-teal, #37959B); text-decoration: none; } .pc-backlink-row .pc-back:hover { text-decoration: underline; } /* Profile header: avatar left, text right (desktop) */ .pc-profile-header { text-align: left; } .pc-profile-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 28px; } .pc-profile-avatar { flex: 0 0 auto; } .pc-profile-header .pc-avatar { margin: 0; width: 96px; height: 96px; } .pc-avatar-placeholder { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.12); font-size: 44px; line-height: 1; } .pc-profile-text { min-width: 0; } .pc-profile-name { margin: 0; } /* Stats row (on the black banner) */ .pc-stats { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 16px; } .pc-stat { display: flex; flex-direction: column; line-height: 1.1; } .pc-stat-num { color: #ffffff; font-size: clamp(26px, 3vw, 36px); font-weight: 900; } .pc-stat-label { color: rgba(255,255,255,0.75); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; } /* Public bio (below the stats, still on the banner) */ .pc-profile-header .pc-bio { max-width: 640px; margin: 16px 0 0; text-align: left; color: rgba(255,255,255,0.92); line-height: 1.6; font-weight: 500; } /* Badges (placeholder achievement grid) */ .pc-badges-section { margin-top: 8px; } .pc-badges-heading { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; color: var(--ps-navy, #0f172a); margin: 0 0 18px; } .pc-badges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* No frame/box — badges sit cleanly; the grid gap provides spacing. */ .pc-badge { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 8px; text-align: center; } /* Uniform 160px icon slot so all badge cells line up (all badges are images now). */ .pc-badge-icon { line-height: 1; height: 160px; display: flex; align-items: center; justify-content: center; } .pc-badge-name { font-size: 13px; font-weight: 700; color: var(--ps-navy, #0f172a); } .pc-badge-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ps-text-light, #64748b); } /* Image-based badge (e.g. First Stone). Reset the parent .pc-badge-icon's grayscale/opacity so an EARNED badge shows in full color; the greying is controlled per-state on the img itself (--locked = unearned). */ .pc-badge-icon--img { filter: none; opacity: 1; line-height: 0; font-size: 0; } .pc-badge-img { width: 160px; height: 160px; display: block; } .pc-badge-img--locked { filter: grayscale(1); opacity: 0.4; } @media (max-width: 600px) { .pc-backlink-row { padding: 16px 12px 0; } .pc-profile-header { text-align: center; } .pc-profile-inner { flex-direction: column; text-align: center; gap: 16px; } .pc-stats { justify-content: center; gap: 28px; } .pc-profile-header .pc-bio { text-align: center; margin-left: auto; margin-right: auto; } .pc-badges-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .pc-badge { padding: 6px; } .pc-badge-icon { height: 130px; } .pc-badge-img { width: 130px; height: 130px; } } /* ============ ROUND 46 — #section-support mobile framing ============ The R7 rule (≤768px, ~line 2069) shows the support photo at `100% auto` anchored top, leaving a #1a1a1a background-color band below the image — the "empty gap" before the footer that the user saw on iPhone 16 Pro. On ≤600px we instead let the photo COVER the (taller) section as a deliberate backdrop, which removes the band entirely and frames the penguins a touch high so they don't slice mid-body. `!important` is required to beat R7's `!important` background-size/position. Scoped to .ph-support only; the base rule's flex centering keeps the Ko-fi button centered. Desktop (>600px) is untouched, and 601–768px keeps R7's behavior (this round only targets ≤600px per spec). ==== */ @media (max-width: 600px) { .ph-support { min-height: 420px; padding-top: 56px; padding-bottom: 56px; background-size: cover !important; /* override R7 `100% auto` */ background-position: center 35% !important; /* override R7 `center top`; frame penguins */ } } /* ============================================================ Legal / static content pages (.ps-legal) — Privacy Policy (page-privacy-policy.php) and any future About/Terms page. Left-aligned prose inside the shared .ps-section-inner 760px column, on the black .ps-page-header banner. Scoped to .ps-legal so it never touches the centered homepage .ps-section copy. Mirrors the content-page guidance in CLAUDE.md ("Future content pages"). ============ */ .ps-legal .ps-section-inner { text-align: left; } .ps-legal h2 { font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; color: var(--ps-navy); margin: 36px 0 12px; line-height: 1.3; } .ps-legal h2:first-of-type { margin-top: 0; } .ps-legal p { font-size: 15px; line-height: 1.75; color: var(--ps-text-mid); margin: 0 0 16px; overflow-wrap: anywhere; word-break: break-word; } .ps-legal p strong { color: var(--ps-text); } .ps-legal ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; } .ps-legal li { font-size: 15px; line-height: 1.7; color: var(--ps-text-mid); margin: 0 0 8px; overflow-wrap: anywhere; word-break: break-word; } .ps-legal a { color: var(--ps-teal, #37959B); text-decoration: underline; font-weight: 600; } /* Mobile gutter — same surgical pattern as round 41/42 (single-stone / archive / leaderboard). The page-privacy-policy.php template stacks a .ps-section inside #content, which otherwise inherits round-9's 24px .site-content padding; trim to a 12px gutter. ID-level (1,2,1) beats round-9's (0,3,1) + GP. Scoped to the named-template body class. ====== */ @media (max-width: 600px) { body.page-template-page-privacy-policy #content.site-content { padding-left: 12px; padding-right: 12px; } .ps-legal.ps-section { padding-left: 12px; padding-right: 12px; } } /* ============================================================ FAQ page (.ps-faq) — page-faq.php. Same shared chrome as the legal page (black .ps-page-header banner + .ps-section-inner 760px column), but BRAND-STYLED, not the plain .ps-legal style: question headings in the unified brand yellow (var(--ps-yellow)), answers in the darkest body-text token, plus a 3-up penguin-type image row. ============ */ .ps-faq .ps-section-inner { text-align: left; } .ps-faq h2 { color: var(--ps-yellow); font-weight: 800; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; margin: 40px 0 12px; } .ps-faq h2:first-of-type { margin-top: 0; } .ps-faq p { font-size: 15px; line-height: 1.75; color: var(--ps-text); margin: 0 0 16px; overflow-wrap: anywhere; word-break: break-word; } .ps-faq p strong { color: var(--ps-text); font-weight: 700; } .ps-faq ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; } .ps-faq li { font-size: 15px; line-height: 1.7; color: var(--ps-text); margin: 0 0 8px; overflow-wrap: anywhere; word-break: break-word; } /* 3-up type-image row — equal display height via object-fit: cover so the mixed jpg/webp sources line up regardless of intrinsic aspect ratio. */ .ps-faq-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 32px 0; } .ps-faq-type { margin: 0; text-align: center; } .ps-faq-type img { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 10px; } .ps-faq-type figcaption { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--ps-text); } /* Mobile — same surgical gutter pattern as the other content pages (round 41/42), plus the type row collapses to a single column. ==== */ @media (max-width: 600px) { body.page-template-page-faq #content.site-content { padding-left: 12px; padding-right: 12px; } .ps-faq.ps-section { padding-left: 12px; padding-right: 12px; } .ps-faq-types { grid-template-columns: 1fr; gap: 16px; } .ps-faq-type img { height: 220px; } } /* ============================================================ ROUND 53 — supersedes the rounds 50/51 header attempts. The real bug was DOM nesting, not width or sidebar: GeneratePress's #content.site-content is a flex container, and these page templates emitted the .ps-page-header and the .ps-section as TWO direct children → two flex columns side-by-side (50/50 split, title left-aligned). The /stones/ archive wraps its header + body in ONE child (.as-wrap) so it stacks. Fix is purely structural: the templates now wrap header + body in .as-wrap too (mirroring archive-stone.php), so the header stacks above the body and centers via the base .ps-page-header rules — no width/sidebar overrides needed. Removed here: round 51's brute-force #page/.grid-container/.container width override and its .ps-section-inner !important cap (base .ps-section-inner already does max-width:760px; margin:0 auto). The round-50 .site-content opt-out below is KEPT so these pages share the archive's exact .site-content width rule. The no-sidebar generate_sidebar_layout filters were removed from the templates (the archive uses none). ============================================ */ /* ============================================================ About page (.ps-about) — page-about.php. Same brand treatment as .ps-faq (yellow H2 / dark body text, same type scale + spacing), plus a float-left illustration the text wraps beside, and a responsive CTA button row. ====== */ .ps-about .ps-section-inner { text-align: left; } .ps-about h2 { color: var(--ps-yellow); font-weight: 800; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; margin: 40px 0 12px; clear: both; /* a heading never sits beside the float */ } .ps-about h2:first-of-type { margin-top: 0; } .ps-about p { font-size: 15px; line-height: 1.75; color: var(--ps-text); margin: 0 0 16px; overflow-wrap: anywhere; word-break: break-word; } .ps-about p strong { color: var(--ps-text); font-weight: 700; } /* Float-left illustration — body paragraphs wrap beside it on desktop. */ .ps-about-figure--left { float: left; width: 100%; max-width: 260px; margin: 4px 26px 14px 0; } .ps-about-figure--left img { display: block; width: 100%; height: auto; border-radius: 12px; } /* CTA row — wraps on narrow widths; brand-styled .ps-btn (yellow + white ink, matching .ph-btn), with a teal --kofi accent to set the support link apart. */ .ps-about-cta { clear: both; display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; } .ps-about-cta .ps-btn { background: var(--ps-yellow); color: #ffffff !important; text-transform: uppercase; font-weight: 800; border-radius: 6px; border: 0; box-shadow: 0 6px 18px rgba(247,195,44,0.28); transition: transform 0.15s, box-shadow 0.15s, background 0.15s, opacity 0.15s; } .ps-about-cta .ps-btn:hover { background: var(--ps-yellow-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(217,168,21,0.35); opacity: 1; } .ps-about-cta .ps-btn--kofi { background: var(--ps-teal); box-shadow: 0 6px 18px rgba(55,149,155,0.28); } .ps-about-cta .ps-btn--kofi:hover { background: #2c7a7f; /* darker teal */ box-shadow: 0 10px 24px rgba(55,149,155,0.40); } /* Mobile — figure stacks full-width-ish centered above the text; same gutter pattern as the other content pages; CTA buttons go full-width. */ @media (max-width: 600px) { body.page-template-page-about #content.site-content { padding-left: 12px; padding-right: 12px; } .ps-about.ps-section { padding-left: 12px; padding-right: 12px; } .ps-about-figure--left { float: none; max-width: 320px; margin: 0 auto 18px; } .ps-about-cta .ps-btn { flex: 1 1 100%; text-align: center; } } /* ============================================================ ROUND 54 — match the /stones/ archive's centered content width. The archive centers its content at .as-content-inner { max-width: 1000px } (style.css:927), inside .as-content's 20px L/R padding. Align the three info pages to that EXACT width for BOTH the banner inner (.ps-page-header-inner, base 1100px) and the body inner (.ps-section-inner, base 760px), so banner + body line up with each other and with the archive's content column. Desktop-only by construction: max-width caps width on wide viewports and has NO effect below ~1000px, so the ≤600px mobile-gutter overrides above are untouched and mobile rendering is unchanged. The 20px / 24px L/R padding on the .ps-section / .ps-page-header parents supplies the gutter (matching the archive's 20px). Scoped to the three page-template body classes so the global .ps-section-inner (homepage 760px) and .ps-page-header-inner (1100px banners) are unaffected; (0,2,1) specificity beats the (0,1,0) base rules. ========== */ body.page-template-page-faq .ps-page-header-inner, body.page-template-page-privacy-policy .ps-page-header-inner, body.page-template-page-about .ps-page-header-inner, body.page-template-page-faq .ps-section-inner, body.page-template-page-privacy-policy .ps-section-inner, body.page-template-page-about .ps-section-inner { max-width: 1000px; margin-left: auto; margin-right: auto; }