/* Adjustments that exist only because the design now runs as a page template inside an Assemble child theme. Loaded last, after home.css. The ported section styles (fonts, tokens, base, components, home) are kept byte-identical to the standalone theme so they can be re-synced; everything integration-specific belongs in this file. */ /* ---------------------------------------------------------- Page content */ /* Whatever is typed into the page itself renders below the designed sections. It is arbitrary editor output, so it gets the measure and the link styling the rest of the page uses rather than the bare element defaults. */ .sn-page-content > .sn-container > * { max-width: var(--sn-measure); } .sn-page-content > .sn-container > * + * { margin-top: var(--sn-gap-md); } .sn-page-content a:not(.sn-btn) { color: var(--sn-accent-soft); } .sn-page-content ul, .sn-page-content ol { padding-left: 1.25em; } .sn-page-content li + li { margin-top: var(--sn-gap-xs); } .sn-page-content img, .sn-page-content figure, .sn-page-content .alignwide, .sn-page-content .alignfull { max-width: 100%; height: auto; } /* ---------------------------------------------------------- Footer social */ /* The mark is now a link. Its SVG carries LinkedIn's own brand fill rather than currentColor, so it cannot take the hover colour the footer's text links use — opacity gives the same feedback without repainting the logo. */ .sn-footer__social-link { display: inline-flex; transition: opacity var(--sn-duration-fast) var(--sn-ease); } .sn-footer__social-link:hover, .sn-footer__social-link:focus-visible { opacity: 0.7; } /* ------------------------------------------- Default page template (StarNav Page) Interior pages carry the same chrome as the home design but no designed sections: a title band, then the editor's content. The header here is the solid sticky variant, so it takes its own space and nothing has to reserve room for it. */ /* `.sn-header` is `position: sticky`, but both base.css and Assemble's modules.css set `overflow-x: hidden` on . That makes the body a scroll container, and a sticky element resolves against its nearest scroll container — the body, which never scrolls, so the header just scrolls away with the page. `clip` does the same job of hiding horizontal overflow without creating a scroll container. `!important` is here only to beat Assemble's own `!important` on the same property. A browser without `overflow: clip` drops this declaration and keeps today's behaviour, so nothing regresses. The home template is unaffected either way: its header is `position: fixed`. */ body.sn-chrome { overflow-x: clip !important; } /* The solid header only carries a hairline border at rest; once the page has scrolled under it, it earns the same blur the overlay variant gets. */ .sn-header:not(.sn-header--overlay).is-stuck { background-color: color-mix(in srgb, var(--sn-bg) 92%, transparent); backdrop-filter: blur(12px); box-shadow: 0 1px 24px color-mix(in srgb, var(--sn-bg-deep) 55%, transparent); } .sn-page-hero { padding-block: var(--sn-section-md) var(--sn-section-sm); border-bottom: var(--sn-border-width) solid var(--sn-border); background-image: linear-gradient(180deg, var(--sn-bg-deep) 0%, var(--sn-bg) 100%); } /* With a featured image behind it the band grows and the gradient gives way to the artwork, which brings its own scrim. */ .sn-page-hero--image { padding-block: var(--sn-section-lg); border-bottom-color: transparent; background-image: none; } .sn-page-hero .sn-tagline { margin-bottom: var(--sn-gap-sm); } .sn-page-hero__title { max-width: 20ch; } .sn-page-hero__text { max-width: var(--sn-measure); margin-top: var(--sn-gap-md); color: var(--sn-text-muted); font-size: var(--sn-size-medium); } /* Editor output is arbitrary, so it gets the reading measure rather than the full 1280px container the designed sections are laid out on. */ .sn-page-body .sn-prose { max-width: var(--sn-measure); } .sn-page-body .sn-prose > .alignwide, .sn-page-body .sn-prose > .alignfull { max-width: none; } .sn-page-links { margin-top: var(--sn-gap-lg); display: flex; gap: var(--sn-gap-sm); font-size: var(--sn-size-small); } /* ------------------------------------------------ Parent-theme chrome mode */ /* Added to when `starnav_home_use_theme_chrome` is filtered to true, so the sections render between Assemble's header and footer instead of the design's own. */ /* The hero reserves room for the design's overlay header, which is not on the page in this mode — Assemble's standard header takes its own space in the flow. Raise this to the header's height if you run Assemble with a transparent/fixed header that overlaps the content. */ body.sn-chrome-theme { --sn-header-height: 0px; } /* base.css paints the whole document in the design's dark ground. In this mode the parent's header and footer are on the page too, so the dark ground is pulled back to the sections themselves. */ body.sn-chrome-theme .sn-main { background-color: var(--sn-bg); } /* Assemble wraps page templates in its own containers; the sections are full-bleed by design and must not be constrained or padded by them. */ body.sn-chrome-theme .edgtf-content, body.sn-chrome-theme .edgtf-content-inner, body.sn-chrome-theme .edgtf-full-width, body.sn-chrome-theme .edgtf-full-width-inner { padding: 0; margin: 0; max-width: none; }