/* Theme Name: GeneratePress Child Theme URI: https://generatepress.com Description: Observer network child theme. Site-specific values live in observer-config.php — this file is identical on every Observer site. Author: ObserverCrew Template: generatepress Version: 1.0.0 */ /* ========================================================================== Observer network — shared child theme Every colour below resolves through a --obs-* custom property that functions.php emits into from observer-config.php. The fallbacks after each comma are FilmObserver's values, and exist only so the site still renders if the config file is missing — they are never the values a configured site uses. Do not hardcode a colour in this file. That is the one rule that keeps it shareable across sites. ========================================================================== */ /* ========================================================================== Surfaces — pinned from the config, not from GeneratePress GP compiles its own colours (body background, the article container, link colour) into a stylesheet it stores in the database and, depending on the css_print_method setting, writes out to a FILE. That file does not reliably regenerate when the options change programmatically: a site can sit with a correct dark config and a stylesheet from hours earlier still painting a white article box on a black page. This stylesheet is enqueued AFTER GP's, so pinning the same surfaces here — at equal specificity, later in the cascade — makes the rendered site follow observer-config.php whatever state GP's compiled CSS is in. ========================================================================== */ body { background-color: var(--obs-page-bg, #f6f4f3); color: var(--obs-ink, #1a1d24); } /* GP's own selector list for the content container, matched so this overrides it rather than fighting only part of it. */ .inside-article, .inside-page-header, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .container, .inside-right-sidebar, .inside-left-sidebar { background-color: var(--obs-content-bg, #ffffff); } /* GP compiles link_color as a literal hardcoded "a{color:#1e73be}" rule rather than routing it through the --accent variable, so setting --accent alone does not touch it. Override the element directly, site-wide. */ a { color: var(--obs-accent, #48111b); transition: color 0.15s ease; } a:hover, .entry-meta a:hover { color: var(--obs-accent-light, #6e1b29); } /* ========================================================================== Header — centred logo with the search trigger pinned right functions.php moves GP's search-modal trigger into the header via generate_after_logo. The icon is absolutely positioned so it can never push the logo off-centre or wrap onto its own line. ========================================================================== */ header.site-header .inside-header { display: flex !important; justify-content: center; align-items: center; position: relative; flex-wrap: nowrap; padding-top: 22px; padding-bottom: 22px; } header.site-header .inside-header .site-logo { max-width: calc(100% - 90px); text-align: center; flex: 0 1 auto; } /* Sizing uses height as the primary bound, not width. WordPress stores width="0" height="0" for some SVG logos, which collapses width:auto to zero and makes the logo disappear; a definite height plus the real viewBox ratio lets the browser derive the width and ignore the broken intrinsic size. Both values come from observer-config.php. */ header.site-header .inside-header .site-logo img { height: var(--obs-logo-height, clamp(76px, 11vw, 132px)); aspect-ratio: var(--obs-logo-ratio, 904.167 / 402.062); width: auto; max-width: 100%; display: inline-block; } header.site-header .inside-header span.menu-bar-item { position: absolute !important; right: 20px; top: 50%; transform: translateY(-50%); margin: 0 !important; display: flex !important; align-items: center; justify-content: center; width: clamp(38px, 4.5vw, 54px); height: clamp(38px, 4.5vw, 54px); z-index: 5; } header.site-header .inside-header span.menu-bar-item a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; color: var(--base-3, #fff); } header.site-header .inside-header span.menu-bar-item .gp-icon { display: flex !important; align-items: center; justify-content: center; line-height: 1; } /* The trigger contains TWO SVGs: a magnifier (modal closed) and an X (modal open). Show only the magnifier by default, swapping when aria-expanded flips. */ header.site-header .inside-header span.menu-bar-item svg { display: block; width: clamp(20px, 2.2vw, 28px) !important; height: clamp(20px, 2.2vw, 28px) !important; flex-shrink: 0; } header.site-header .inside-header span.menu-bar-item svg + svg { display: none !important; } header.site-header .inside-header span.menu-bar-item a[aria-expanded="true"] svg:first-of-type { display: none !important; } header.site-header .inside-header span.menu-bar-item a[aria-expanded="true"] svg + svg { display: block !important; } @media (max-width: 768px) { header.site-header .inside-header { padding-left: 16px; padding-right: 16px; box-sizing: border-box; } header.site-header .inside-header span.menu-bar-item { right: 12px; } } /* ========================================================================== Archive / category / tag / search / author — card grid These page types share the same post-list markup, so one treatment covers all three. body:is(...) keeps specificity identical to body.archive. ========================================================================== */ body:is(.archive, .search-results, .author) .site-main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; padding: 0 1.25rem; } @media (max-width: 600px) { body:is(.archive, .search-results, .author) .site-main { grid-template-columns: 1fr; gap: 1.5rem; padding: 0 1rem; } } /* Anything that is not a post card — pagination, the search page header — spans the full row instead of being squeezed into one grid cell. */ body:is(.archive, .search-results, .author) .site-main > *:not(article) { grid-column: 1 / -1; } body:is(.archive, .search-results, .author) article.post { background: var(--obs-card-bg, #fff); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(26, 29, 36, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } body:is(.archive, .search-results, .author) article.post:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(26, 29, 36, 0.14); } body:is(.archive, .search-results, .author) article.post .inside-article { display: flex; flex-direction: column; height: 100%; padding: 0; } /* Source order is title/meta first, then image — flex order flips it visually so the image reads first without altering the underlying markup. */ body:is(.archive, .search-results, .author) article .entry-header { order: 2; padding: 1.1rem 1.25rem 0; } body:is(.archive, .search-results, .author) article .post-image { order: 1; margin: 0; } body:is(.archive, .search-results, .author) article .entry-summary { order: 3; padding: 0.5rem 1.25rem 1.25rem; flex-grow: 1; } /* Card footer (category, tags, "Leave a comment") dropped — too much clutter at card size. The category still shows on the single post. */ body:is(.archive, .search-results, .author) footer.entry-meta { display: none; } body:is(.archive, .search-results, .author) .post-image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; display: block; } body:is(.archive, .search-results, .author) .entry-title { font-size: 1.15rem; line-height: 1.35; margin: 0 0 0.4rem; } body:is(.archive, .search-results, .author) .entry-title a { color: var(--obs-ink, #1a1d24); } body:is(.archive, .search-results, .author) .entry-title a:hover { color: var(--obs-accent, #48111b); } body:is(.archive, .search-results, .author) header .entry-meta { font-size: 0.8rem; color: var(--obs-muted, #6b6b72); text-transform: uppercase; letter-spacing: 0.03em; } body:is(.archive, .search-results, .author) .entry-summary p { font-size: 0.93rem; color: var(--obs-ink, #1a1d24); opacity: 0.85; } body:is(.archive, .search-results, .author) .read-more { color: var(--obs-accent, #48111b); font-weight: 600; } /* ========================================================================== Single post ========================================================================== */ body.single .entry-title { font-size: 2.1rem; line-height: 1.25; letter-spacing: -0.01em; } /* :not(.gop-section, .gop-section *) exempts the Observer Crew Picks cross-promo block throughout this section — it is self-themed via its own inline custom properties and must not inherit article styling. */ body.single .featured-image img, body.single .post-image img, body.single .entry-content img:not(.gop-section, .gop-section *) { border-radius: 16px; box-shadow: 0 8px 24px rgba(26, 29, 36, 0.15); } body.single .entry-meta { color: var(--obs-muted, #6b6b72); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; } body.single .entry-content { font-size: 1.08rem; line-height: 1.75; color: var(--obs-ink, #1a1d24); } body.single .entry-content p { margin-bottom: 1.4em; } body.single .entry-content h2:not(.gop-section, .gop-section *), body.single .entry-content h3:not(.gop-section, .gop-section *) { color: var(--obs-ink, #1a1d24); margin-top: 1.8em; } body.single .entry-content a:not(.gop-section, .gop-section *) { color: var(--obs-accent, #48111b); } body.single .entry-content a:not(.gop-section, .gop-section *):hover { color: var(--obs-accent-light, #6e1b29); } body.single .entry-content blockquote:not(.gop-section, .gop-section *) { border-left: 4px solid var(--obs-accent, #48111b); background: var(--obs-page-bg, #f6f4f3); padding: 1rem 1.5rem; border-radius: 0 10px 10px 0; font-style: italic; color: var(--obs-ink, #1a1d24); } /* ---- Category and tag pills ---- GP injects a folder/tag glyph before each group. In icon-font mode that is a ::before pseudo-element; in SVG mode (which these sites use, since the header search trigger requires it) it is a real inline that content:none cannot touch. Both are suppressed. */ body.single footer.entry-meta .cat-links:before, body.single footer.entry-meta .tags-links:before { content: none; } body.single footer.entry-meta .cat-links .gp-icon, body.single footer.entry-meta .tags-links .gp-icon { display: none; } /* WordPress separates each link with a literal ", " text node — fine as text, cramped between pills. font-size:0 on the wrapper collapses those nodes; the pills restore their own size and are spaced by flex gap instead. */ body.single footer.entry-meta .cat-links, body.single footer.entry-meta .tags-links { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0; } body.single footer.entry-meta .cat-links { margin-right: 0.5rem; margin-bottom: 0.5rem; } body.single footer.entry-meta .cat-links a, body.single footer.entry-meta .tags-links a { display: inline-block; background: var(--obs-accent, #48111b); color: #fff; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } body.single footer.entry-meta .cat-links a:hover, body.single footer.entry-meta .tags-links a:hover { background: var(--obs-accent-light, #6e1b29); } /* ---- Prev/next navigation ---- Was two plain stacked links. The "Previous"/"Next" labels come from ::before so the markup needs no change. GP adds its own chevron before .prev/.next from two possible sources depending on icon mode — kill both. */ body.single .post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 2.5rem 0 0.5rem; } @media (max-width: 600px) { body.single .post-navigation { grid-template-columns: 1fr; } } body.single .post-navigation .nav-next { text-align: right; } body.single .post-navigation .prev::before, body.single .post-navigation .next::before { content: none; } body.single .post-navigation .nav-previous .gp-icon, body.single .post-navigation .nav-next .gp-icon { display: none; } body.single .post-navigation .nav-previous::before, body.single .post-navigation .nav-next::before { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--obs-accent, #48111b); margin-bottom: 0.4rem; } body.single .post-navigation .nav-previous::before { content: "← Previous"; } body.single .post-navigation .nav-next::before { content: "Next →"; } body.single .post-navigation .prev, body.single .post-navigation .next { display: block; } body.single .post-navigation a { display: block; color: var(--obs-ink, #1a1d24); font-weight: 600; font-size: 0.98rem; line-height: 1.4; } body.single .post-navigation a:hover { color: var(--obs-accent, #48111b); } /* The Observer Crew Picks block renders inside .entry-content but themes itself from its own inline custom properties. The rules above exclude it via :not(); what remains is inherited (not directly overridden) properties like line-height leaking into small elements that set none of their own. Reset the inheritance chain right at the boundary. */ body.single .entry-content .gop-section { font-size: initial; line-height: initial; color: initial; } /* observer-author-box-v2 */ /* ---- Author box --------------------------------------------------------- The box is a GenerateBlocks Element (content.json -> elements[1], hooked to generate_after_content), so its markup lives in the database and only its skin belongs to us. The gb-*- selectors below are those Element ids: they are stable because every Observer site imports the same Element, but they are the one place in this stylesheet coupled to the database. Sites that ship framing art for the avatar (RetroObserver's TV) set 'author_art' in observer-config.php, which adds .observer-author-art to the body. Without it the avatar stays a plain round image, so nothing here changes for a site that ships no art. ------------------------------------------------------------------------ */ .gb-container-f6bb5a30 { /* Overrides the Element's own blue and its hard 244deg gradient split, both of which are baked into the block attributes. */ background: var(--obs-card-bg, #16161a) !important; border: 1px solid var(--obs-border, #2a2a31) !important; border-radius: 16px; padding: 24px 28px !important; margin-top: 36px !important; color: var(--obs-ink, #f5f5f7) !important; } .gb-container-f6bb5a30 > .gb-inside-container { padding: 0 !important; max-width: none !important; } .gb-container-f6bb5a30 .gb-grid-wrapper-34cbeae9 { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 26px; margin-left: 0 !important; } .gb-container-f6bb5a30 .gb-grid-column-85b282e0 { flex: 0 0 auto !important; width: auto !important; padding-left: 0 !important; } .gb-container-f6bb5a30 .gb-grid-column-a94fbc86 { flex: 1 1 auto !important; width: auto !important; padding-left: 0 !important; /* Without this a long bio refuses to wrap and pushes the card wider. */ min-width: 0; } /* The Element reserves a 50% column for social buttons that GenerateBlocks omits entirely when the author has no social user-meta filled in, which leaves half the box empty. Collapse the inner grid and let the name and bio use the full width; the column reappears on its own if a button renders. */ .gb-container-f6bb5a30 .gb-grid-wrapper-e1860b0a { display: block !important; margin-left: 0 !important; } .gb-container-f6bb5a30 .gb-grid-column-8ff377db { width: 100% !important; padding-left: 0 !important; } .gb-container-f6bb5a30 .gb-grid-column-0e0989ff:not(:has(a.gb-button)) { display: none !important; } .gb-headline-0d5ba9b3 { color: var(--obs-accent, #b3110e) !important; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px !important; font-weight: 700 !important; margin: 0 0 4px !important; } .gb-headline-c69ebc2f { color: var(--obs-ink, #f5f5f7) !important; font-size: 26px !important; line-height: 1.2 !important; margin: 0 !important; } .gb-headline-44d3ac19 { color: var(--obs-muted, #a0a0aa) !important; font-size: 14px !important; line-height: 1.65 !important; margin: 10px 0 0 !important; max-width: 62ch; } /* ---- Avatar framed in the site's art ------------------------------------ The photo sits UNDER the art, not on top of it. retro-tv.png has its screen knocked out to transparency, so the artwork's own bezel does the masking — which is the only way the crop follows the screen's real curve. Matching that curve with border-radius was tried and does not work: the corners stay squarer than the drawing and the photo visibly laps over the bezel. Because the art masks it, the photo is sized slightly LARGER than the aperture (a ~1% bleed on each edge) so no seam shows where the two meet. The aperture percentages come from the artwork's own viewBox: screen x=400.6 y=126.3 w=141.1 h=101.9 within 364.2 40 213.4 244.4. Different art means re-measuring them. The art is a PNG rather than the source SVG deliberately: retro-tv.svg is 4271 paths and 724KB, and painting it at this size froze the renderer outright. This PNG is 12KB and paints instantly. ------------------------------------------------------------------------ */ .observer-author-art .gb-container-85b282e0 > .gb-inside-container { position: relative; width: 132px; aspect-ratio: 213.4 / 244.4; margin: 0; padding: 0 !important; } .observer-author-art .gb-container-85b282e0 img.dynamic-author-image { position: absolute; left: 16.1%; top: 34.4%; width: 68.1%; height: 43.6%; /* Overrides .dynamic-author-image-rounded. No radius is needed at all now — the artwork above supplies the shape. */ border-radius: 0 !important; object-fit: cover; z-index: 0; } /* Scanlines, clipped to the aperture and sitting above the photo but below the art. Faint on purpose: at 132px this should read as CRT texture rather than as an effect laid over someone's face. */ .observer-author-art .gb-container-85b282e0 > .gb-inside-container::before { content: ""; position: absolute; left: 16.1%; top: 34.4%; width: 68.1%; height: 43.6%; pointer-events: none; z-index: 1; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 3px ); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45); } /* The artwork itself, painted last so its bezel masks everything under it. The fallback URL is relative to this stylesheet, so it resolves inside the theme without PHP building one; a site with different art overrides --obs-author-art from observer-config.php instead. */ .observer-author-art .gb-container-85b282e0 > .gb-inside-container::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: var(--obs-author-art, url("assets/retro-tv.png")) center / contain no-repeat; } @media (max-width: 600px) { .gb-container-f6bb5a30 { padding: 22px 20px !important; } .gb-container-f6bb5a30 .gb-grid-wrapper-34cbeae9 { flex-direction: column !important; align-items: center !important; text-align: center; gap: 14px; } .gb-headline-44d3ac19 { max-width: none; } } /* observer-about-v1 */ /* ---- Staff directory (About Us template) -------------------------------- Mirrors GameObserver's About page: sections from the ACF 'staff_types' repeater, each holding a grid of staff cards with headshot, name, role, article count and bio. The class names (.author_grid, .author-content, .highlight, .avatar-link) are kept from GameObserver deliberately, so the two sites' About pages stay recognisably the same component even though the skins differ. ------------------------------------------------------------------------ */ .obs-staff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 0 0 2.75rem; } h3.author_list { margin: 2.25rem 0 1.1rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--obs-accent, #b3110e); } .author_grid { padding: 1.5rem; text-align: center; height: 100%; position: relative; overflow: hidden; border: 1px solid var(--obs-border, #2a2a31); border-radius: 16px; /* GameObserver uses a nebula gradient here; the equivalent gesture on this site is a single warm bloom off the accent, kept much fainter. */ background: radial-gradient(ellipse at 100% 0%, rgba(var(--obs-accent-rgb, 179, 17, 14), 0.10) 0%, rgba(var(--obs-accent-rgb, 179, 17, 14), 0) 55%), var(--obs-card-bg, #16161a); } /* GameObserver scatters starfield dots over the card. The CRT equivalent is a scanline wash — barely visible, but it ties the card to the screens above. */ .author_grid::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.022) 0 1px, rgba(255, 255, 255, 0) 1px 4px ); } .author_grid > * { position: relative; z-index: 1; } .author_grid .avatar-link { display: block; width: 128px; margin: 0 auto 0.9rem; } /* No art configured: a plain round headshot, as on GameObserver. */ .author_grid .avatar-link img.avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; margin: 0 auto; display: block; } /* With art: the same aperture as the author box and author archive. Repeated rather than shared because each placement sets its own size, and a single rule would need the size hoisted into a variable for no real gain. */ .observer-author-art .author_grid .obs-author-screen { display: block; position: relative; width: 128px; aspect-ratio: 213.4 / 244.4; line-height: 0; } .observer-author-art .author_grid .obs-author-screen img.avatar { position: absolute; left: 16.1%; top: 34.4%; width: 68.1%; height: 43.6%; border-radius: 0; object-fit: cover; z-index: 0; } .observer-author-art .author_grid .obs-author-screen::before { content: ""; position: absolute; left: 16.1%; top: 34.4%; width: 68.1%; height: 43.6%; pointer-events: none; z-index: 1; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 3px ); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45); } .observer-author-art .author_grid .obs-author-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: var(--obs-author-art, url("assets/retro-tv.png")) center / contain no-repeat; } .author_grid .author-content h5 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; } .author_grid .author-content h5 a { color: var(--obs-ink, #f5f5f7); text-decoration: none; } .author_grid .author-content h5 a:hover { color: var(--obs-accent, #b3110e); } .author_grid .author-content h4 { margin: 0 0 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--obs-muted, #a0a0aa); } .author_grid .author-content span.highlight { display: inline-block; background: rgba(var(--obs-accent-rgb, 179, 17, 14), 0.12); color: var(--obs-accent-light, #d4342f); border: 1px solid rgba(var(--obs-accent-rgb, 179, 17, 14), 0.28); padding: 4px 10px; margin: 0 4px 10px 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; border-radius: 20px; } .author_grid .author-content p { margin: 0 0 0.75rem; font-size: 0.85rem; line-height: 1.55; color: var(--obs-muted, #a0a0aa); } .obs-staff-links { display: flex; justify-content: center; gap: 12px; } .obs-staff-links a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--obs-muted, #a0a0aa); border: 1px solid var(--obs-border, #2a2a31); transition: color 0.15s ease, border-color 0.15s ease; } .obs-staff-links a:hover { color: var(--obs-accent, #b3110e); border-color: var(--obs-accent, #b3110e); } .obs-staff-links svg { width: 15px; height: 15px; fill: currentColor; display: block; } @media (max-width: 600px) { .obs-staff-grid { grid-template-columns: 1fr; gap: 1.25rem; } } body.page-template-about-us .site-main { padding: 0 1.75rem; } @media (max-width: 600px) { body.page-template-about-us .site-main { padding: 0 1.5rem; } }