/* Simply360 website semantic classes (s360-*) — generated vocabulary CSS */ .s360-hero { padding: calc(var(--tsk-spacing-2xl, 64px) * 1.4) var(--tsk-spacing-md, 24px); background-color: var(--tsk-color-background, #f4f6f8); text-align: center; } .s360-section { padding: var(--tsk-spacing-2xl, 64px) var(--tsk-spacing-md, 24px); } .s360-section-alt { --s360-tone-bg: var(--tsk-tone-muted-bg, var(--tsk-color-background, #f4f6f8)); --s360-tone-fg: var(--tsk-tone-muted-fg, var(--tsk-color-text, #17202a)); --s360-tone-fg-muted: var(--tsk-tone-muted-fg-muted, var(--tsk-color-text-secondary, #4a5565)); --s360-tone-border: var(--tsk-tone-muted-border, var(--tsk-color-border, rgba(23, 32, 42, 0.12))); --s360-tone-link-current: var(--tsk-tone-muted-link, var(--tsk-color-primary-700, var(--tsk-color-primary, #2563eb))); --tsk-color-text: var(--s360-tone-fg); --tsk-color-text-secondary: var(--s360-tone-fg-muted); --tsk-color-border: var(--s360-tone-border); background-color: var(--s360-tone-bg); color: var(--s360-tone-fg); } [data-s360-tone] { --s360-tone-bg: var(--tsk-tone-default-bg, var(--tsk-color-surface, #ffffff)); --s360-tone-fg: var(--tsk-tone-default-fg, var(--tsk-color-text, #17202a)); --s360-tone-fg-muted: var(--tsk-tone-default-fg-muted, var(--tsk-color-text-secondary, #4a5565)); --s360-tone-border: var(--tsk-tone-default-border, var(--tsk-color-border, rgba(23, 32, 42, 0.12))); --s360-tone-link-current: var(--tsk-tone-default-link, var(--tsk-color-primary-700, var(--tsk-color-primary, #2563eb))); --tsk-color-background: var(--s360-tone-bg); --tsk-color-surface: var(--s360-tone-bg); --tsk-color-text: var(--s360-tone-fg); --tsk-color-text-secondary: var(--s360-tone-fg-muted); --tsk-color-border: var(--s360-tone-border); background-color: var(--s360-tone-bg); color: var(--s360-tone-fg); } [data-s360-tone='muted'] { --s360-tone-bg: var(--tsk-tone-muted-bg, var(--tsk-color-background, #f4f6f8)); --s360-tone-fg: var(--tsk-tone-muted-fg, var(--tsk-color-text, #17202a)); --s360-tone-fg-muted: var(--tsk-tone-muted-fg-muted, var(--tsk-color-text-secondary, #4a5565)); --s360-tone-border: var(--tsk-tone-muted-border, var(--tsk-color-border, rgba(23, 32, 42, 0.12))); --s360-tone-link-current: var(--tsk-tone-muted-link, var(--tsk-color-primary-700, var(--tsk-color-primary, #2563eb))); } [data-s360-tone='inverted'] { --s360-tone-bg: var(--tsk-tone-inverted-bg, #17202a); --s360-tone-fg: var(--tsk-tone-inverted-fg, #ffffff); --s360-tone-fg-muted: var(--tsk-tone-inverted-fg-muted, rgba(255, 255, 255, 0.78)); --s360-tone-border: var(--tsk-tone-inverted-border, rgba(255, 255, 255, 0.22)); --s360-tone-link-current: var(--tsk-tone-inverted-link, #dbeafe); } [data-s360-tone='brand'] { --s360-tone-bg: var(--tsk-tone-brand-bg, var(--tsk-color-primary, #2563eb)); --s360-tone-fg: var(--tsk-tone-brand-fg, var(--tsk-color-primary-contrast, #ffffff)); --s360-tone-fg-muted: var(--tsk-tone-brand-fg-muted, rgba(255, 255, 255, 0.82)); --s360-tone-border: var(--tsk-tone-brand-border, rgba(255, 255, 255, 0.26)); --s360-tone-link-current: var(--tsk-tone-brand-link, var(--tsk-color-primary-contrast, #ffffff)); } /* These are the only layout containers that set an explicit width, so they are the only ones where an authored horizontal padding is added OUTSIDE the box under the default content-box sizing — overflowing a phone viewport by twice that padding. Scoped to the two container classes rather than a global universal-selector reset, which would silently resize every other element on every existing site. */ .s360-inner { box-sizing: border-box; width: 100%; max-width: var(--tsk-container-width, 64rem); margin-left: auto; margin-right: auto; } .s360-inner-narrow { box-sizing: border-box; width: 100%; max-width: 46rem; margin-left: auto; margin-right: auto; } .s360-stack { display: flex; flex-direction: column; gap: var(--tsk-spacing-md, 20px); } .s360-center { text-align: center; } .s360-stack.s360-center { align-items: center; } /* A centred stack (align-items: center) shrinks a width-less child to its content, and a grid of image-only cards has no content width, so it collapsed to zero and hid the section. Grids always fill the stack. */ .s360-grid-2, .s360-grid-3, .s360-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tsk-spacing-lg, 28px); align-items: start; box-sizing: border-box; width: 100%; } /* Stays content-sized so a centred stack can centre the button cluster. */ .s360-actions { display: flex; flex-wrap: wrap; gap: var(--tsk-spacing-sm, 12px); align-items: center; } @media (min-width: 768px) { .s360-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s360-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .s360-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } } .s360-gap-sm { gap: var(--tsk-spacing-sm, 12px); } .s360-gap-md { gap: var(--tsk-spacing-md, 20px); } .s360-gap-lg { gap: var(--tsk-spacing-xl, 40px); } /* Long authored words and URLs must not widen centered stacks or grid cells. */ .s360-heading-1, .s360-heading-2, .s360-heading-3, .s360-lede, .s360-body, .s360-eyebrow, .s360-aside, .s360-text-link { overflow-wrap: anywhere; } .s360-heading-1 { font-family: var(--tsk-font-heading, inherit); font-weight: var(--tsk-heading-1-weight, var(--tsk-font-heading-weight, 700)); font-size: var(--tsk-heading-1-size, clamp(2rem, 1.25rem + 2.5vw, 3rem)); line-height: 1.15; color: var(--tsk-heading-1-color, var(--tsk-color-text, #17202a)); margin: 0; } .s360-heading-2 { font-family: var(--tsk-font-heading, inherit); font-weight: var(--tsk-heading-2-weight, var(--tsk-font-heading-weight, 600)); font-size: var(--tsk-heading-2-size, 1.5rem); line-height: 1.25; color: var(--tsk-heading-2-color, var(--tsk-color-text, #17202a)); margin: 0; } .s360-heading-3 { font-family: var(--tsk-font-heading, inherit); font-weight: var(--tsk-heading-3-weight, var(--tsk-font-heading-weight, 600)); font-size: var(--tsk-heading-3-size, 1.25rem); line-height: 1.3; color: var(--tsk-heading-3-color, var(--tsk-color-text, #17202a)); margin: 0; } .s360-lede { font-family: var(--tsk-font-body, inherit); font-weight: var(--tsk-font-body-weight, 400); font-size: 1.125rem; line-height: 1.75; color: var(--tsk-color-text-secondary, #4a5565); max-width: 44rem; margin: 0; } .s360-body { font-family: var(--tsk-font-body, inherit); font-weight: var(--tsk-font-body-weight, 400); font-size: 1rem; line-height: 1.75; color: var(--tsk-color-text-secondary, #4a5565); margin: 0; } .s360-eyebrow { font-size: 0.75rem; font-weight: var(--tsk-eyebrow-weight, 600); letter-spacing: var(--tsk-eyebrow-letter-spacing, 0.12em); text-transform: var(--tsk-eyebrow-case, uppercase); color: var(--tsk-eyebrow-color, var(--s360-tone-link-current, var(--tsk-color-primary-600, var(--tsk-color-primary, #2563eb)))); margin: 0; } .s360-aside { font-family: var(--tsk-font-heading, inherit); font-style: italic; font-weight: 400; font-size: 0.9375rem; line-height: 1.5; color: var(--tsk-color-text-secondary, #4a5565); margin: 0; } .s360-type-display, .s360-type-product-ui, .s360-type-caption, .s360-emphasis { overflow-wrap: anywhere; } .s360-type-display { font-family: var(--tsk-font-heading, inherit); font-size: clamp(3.5rem, 7vw, 9rem); line-height: 1; } .s360-type-product-ui { font-family: var(--tsk-font-body, inherit); font-size: 0.9375rem; line-height: 1.4; } .s360-type-caption { font-family: var(--tsk-font-body, inherit); font-size: 0.75rem; line-height: 1.4; } .s360-emphasis { font-family: inherit; font-style: italic; font-weight: 700; } .s360-card { box-sizing: border-box; background-color: var(--tsk-color-surface, #ffffff); border: 1px solid var(--tsk-color-border, rgba(23, 32, 42, 0.12)); border-radius: var(--tsk-radius-card, 12px); padding: var(--tsk-spacing-lg, 28px); } .s360-badge { display: inline-flex; align-items: center; width: max-content; border-radius: 999px; border: 1px solid var(--tsk-color-border, rgba(23, 32, 42, 0.12)); padding: 4px 10px; color: var(--s360-tone-link-current, var(--tsk-color-primary, #2563eb)); font-size: 0.8125rem; font-weight: 700; } .s360-panel-accent { background-color: var(--tsk-color-primary-100, #dbeafe); border-radius: var(--tsk-radius-card, 12px); padding: var(--tsk-spacing-xl, 40px) var(--tsk-spacing-lg, 28px); } .s360-panel-accent .s360-heading-1, .s360-panel-accent .s360-heading-2, .s360-panel-accent .s360-heading-3 { color: var(--tsk-color-primary-800, #1e3a8a); } .s360-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--tsk-radius-button, 8px); background-color: var(--tsk-color-primary, #2563eb); color: var(--tsk-color-primary-contrast, #ffffff); font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; } .s360-button:hover { background-color: var(--tsk-color-primary-600, var(--tsk-color-primary, #2563eb)); } .s360-button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--tsk-radius-button, 8px); background-color: transparent; color: var(--s360-tone-link-current, var(--tsk-color-primary-700, var(--tsk-color-primary, #2563eb))); font-weight: 600; text-decoration: none; border: 1px solid var(--s360-tone-link-current, var(--tsk-color-primary, #2563eb)); cursor: pointer; } .s360-button-secondary:hover { background-color: var(--tsk-color-primary-50, #eff6ff); } .s360-text-link { color: var(--s360-tone-link-current, var(--tsk-color-primary-700, var(--tsk-color-primary, #2563eb))); text-decoration: underline; text-underline-offset: 2px; } .s360-nav { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: var(--tsk-spacing-sm, 12px); width: 100%; color: var(--tsk-color-text, #17202a); font-family: var(--tsk-font-body, inherit); } .s360-nav[data-s360-nav-arrangement='vertical'] { align-items: stretch; } .s360-nav[data-s360-nav-align='center'] { justify-content: center; } .s360-nav[data-s360-nav-align='end'] { justify-content: flex-end; } .s360-nav[data-s360-nav-align='between'] { justify-content: space-between; } .s360-nav[data-s360-nav-sticky='true'] { position: sticky; top: 0; z-index: 30; background-color: var(--tsk-color-surface, #ffffff); } /* Shrinking sticky nav: data-s360-nav-shrink is the author toggle (Studio only offers it once sticky is on); data-s360-nav-shrunk is the runtime STATE headerShrinkRuntime toggles on scroll, past/below a hysteresis band so it cannot flicker. Every rule below is scoped under one of the two, so a site that never enables the toggle can never match any of them. Native sticky positioning (above) already reserves the nav's flow space, so shrinking its padding/font-size here causes no compensating spacer/jump. */ .s360-nav[data-s360-nav-shrunk='true'] { gap: calc(var(--tsk-spacing-sm, 12px) * 0.65); } .s360-nav-list, .s360-nav-sublist { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .s360-nav[data-s360-nav-arrangement='vertical'] .s360-nav-list { flex-direction: column; align-items: stretch; } .s360-nav-sublist { flex-direction: column; align-items: stretch; } .s360-nav-item { position: relative; min-width: 0; } .s360-nav-subitem { width: 100%; } .s360-nav-has-children { display: flex; align-items: center; } /* border-box: an is content-box and a