) will otherwise push the track past 1fr and overflow the page. This
one line prevents the single most common responsive bug in CSS grid. */
.pf-grid > *,
.pf-split > *,
.pf-shell > * { min-width: 0; }
@media (max-width: 1100px) {
.pf-grid--4 { --pf-cols: 3; }
}
@media (max-width: 900px) {
.pf-grid--3, .pf-grid--4 { --pf-cols: 2; }
}
@media (max-width: 620px) {
.pf-grid--2, .pf-grid--3, .pf-grid--4 { --pf-cols: 1; }
}
/**
* Facet
*
* ...
*
* One clipped corner, sized by --pf-cut. This is the framework's signature
* shape; used on every card it becomes wallpaper, so reserve it for the
* element you want read first. Set --pf-cut: 0 to remove the effect globally
* without touching a component rule.
*
* Note that clip-path cuts everything, including outlines and box-shadows.
* A focus ring on a clipped element is clipped too, which is why interactive
* facet cards keep their ring on an inner element.
*/
/* Brand mark inside a nav or footer lockup. Sized in rem so it tracks the
surrounding text rather than a fixed pixel box. */
.pf-logo {
width: 2.1rem;
height: 2.1rem;
flex: none;
}
.pf-logo--sm { width: 1.6rem; height: 1.6rem; }
/**
* Standalone lockup
*
* PolyFish
*
* The brand mark and wordmark outside a nav or footer - sign-in screens,
* receipts, standalone panels.
*/
.pf-lockup {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--pf-text);
font-family: var(--pf-font-display);
font-size: 1.15rem;
font-weight: 800;
letter-spacing: -0.02em;
text-decoration: none;
}
.pf-lockup:hover { color: var(--pf-text); }
/* Brand tints, for the places the mark's own colours belong: a logo well, a
brand pill, the footer lockup. Everything else uses the accent roles. */
.pf-brand-well {
background: color-mix(in srgb, var(--pf-brand) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--pf-brand) 40%, transparent);
}
.pf-fg-brand { color: var(--pf-brand-2); }
.pf-brand-rule { border-inline-start: 2px solid var(--pf-brand); padding-inline-start: var(--pf-space-4); }
/* Column span helpers for grid children. */
.pf-span-full { grid-column: 1 / -1; }
/**
* Stretched link
*
*
* Title
* Body copy stays selectable.
*
*
* Makes a whole card clickable from one anchor without wrapping the card in
* it. The card needs a positioning context - add .pf-relative. Text inside
* stays selectable, unlike a card-wide anchor, and there is still only one
* tab stop.
*/
.pf-stretched-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.pf-facet {
clip-path: polygon(0 0, calc(100% - var(--pf-cut)) 0, 100% var(--pf-cut), 100% 100%, 0 100%);
}
.pf-facet--sw {
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pf-cut) 100%, 0 calc(100% - var(--pf-cut)));
}
/* ==========================================================================
#BUTTONS
========================================================================== */
/**
* Button
*
* Get the files
*
*
* Variants: --secondary (outline) --ghost (bare) --orange (secondary accent)
* Sizes: --sm --lg --block (full width) --square (no pill radius)
* States: [disabled] and [aria-disabled="true"] both dim and block pointers
*
* The three local properties (--pf-btn-bg/-fg/-border) exist so a variant is
* three declarations instead of a re-specification of the base. Padding is in
* em, so a size variant only changes font-size and the shape follows.
*/
.pf-btn {
--pf-btn-bg: var(--pf-accent);
--pf-btn-fg: var(--pf-base-950);
--pf-btn-border: var(--pf-accent);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--pf-space-2);
background: var(--pf-btn-bg);
color: var(--pf-btn-fg);
border: 1.5px solid var(--pf-btn-border);
border-radius: var(--pf-radius-pill);
font-family: var(--pf-font-body);
font-size: var(--pf-text-sm);
font-weight: 600;
line-height: 1;
padding: 0.82em 1.5em;
text-decoration: none;
cursor: pointer;
transition: transform var(--pf-speed) var(--pf-ease),
background-color var(--pf-speed) var(--pf-ease),
border-color var(--pf-speed) var(--pf-ease),
color var(--pf-speed) var(--pf-ease);
}
.pf-btn:hover { background: var(--pf-hue-1-deep); border-color: var(--pf-hue-1-deep); color: var(--pf-base-950); }
.pf-btn:active { transform: translateY(1px); }
.pf-btn--secondary {
--pf-btn-bg: transparent;
--pf-btn-fg: var(--pf-text);
--pf-btn-border: var(--pf-border-strong);
}
.pf-btn--secondary:hover {
background: var(--pf-hue-1-wash);
border-color: var(--pf-accent);
color: var(--pf-base-50);
}
.pf-btn--ghost {
--pf-btn-bg: transparent;
--pf-btn-fg: var(--pf-text-muted);
--pf-btn-border: transparent;
}
.pf-btn--ghost:hover { background: var(--pf-surface); border-color: transparent; color: var(--pf-base-50); }
.pf-btn--accent-2 {
--pf-btn-bg: var(--pf-accent-2);
--pf-btn-border: var(--pf-accent-2);
}
.pf-btn--accent-2:hover { background: var(--pf-hue-2-deep); border-color: var(--pf-hue-2-deep); }
/**
* Icon-only button
*
*
*
* A square target with no text, which means aria-label is not optional - an
* icon button without one announces as "button" and nothing else.
*/
.pf-btn--icon {
width: 2.75rem;
height: 2.75rem;
padding: 0;
border-radius: 50%;
font-size: var(--pf-text-lg);
line-height: 1;
}
.pf-btn--icon.pf-btn--square { border-radius: var(--pf-radius); }
.pf-btn--icon.pf-btn--sm { width: 2.25rem; height: 2.25rem; font-size: var(--pf-text-base); }
/* A button that looks like a link but is still a button, for actions that do
not navigate. Never use an without an href for this. */
.pf-btn--link {
--pf-btn-bg: transparent;
--pf-btn-fg: var(--pf-accent);
--pf-btn-border: transparent;
padding-inline: 0.35em;
text-decoration: underline;
text-underline-offset: 0.22em;
}
.pf-btn--link:hover { background: none; border-color: transparent; color: var(--pf-text); }
/**
* Busy state
*
*
*
* Driven by aria-busy so the visual and the announced state come from one
* attribute. The spinner is a pseudo-element, so no markup changes when the
* state flips.
*/
.pf-btn[aria-busy="true"] { pointer-events: none; opacity: 0.75; }
.pf-btn[aria-busy="true"]::before {
content: "";
width: 1em;
height: 1em;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
animation: pf-btn-spin 0.7s linear infinite;
}
@keyframes pf-btn-spin { to { transform: rotate(1turn); } }
.pf-btn--sm { font-size: var(--pf-text-xs); padding: 0.65em 1.15em; }
.pf-btn--lg { font-size: var(--pf-text-base); padding: 0.95em 2em; }
.pf-btn--block { display: flex; width: 100%; }
.pf-btn--square { border-radius: var(--pf-radius); }
.pf-btn[disabled],
.pf-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
/* ==========================================================================
#PILLS, MARKERS, FOCUS
========================================================================== */
/**
* .pf-mark and .pf-dot are the small shapes used in place of tracked-out
* capital labels: a clipped triangle and a circle, both sized in em so they
* scale with whatever text they sit beside.
*
* The focus ring uses :focus-visible, so it appears for keyboard users and
* stays out of the way of mouse clicks. It is declared with :where() to keep
* specificity at zero, which means a component can override it without an
* !important arms race.
*
* The reduced-motion block at the end is a blunt instrument by design: it
* neutralises every transition and animation in every module at once, so a
* new component cannot forget to honour the preference.
*/
.pf-pill {
display: inline-flex;
align-items: center;
gap: var(--pf-space-2);
background: var(--pf-surface);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-pill);
color: var(--pf-text-muted);
font-size: var(--pf-text-xs);
font-weight: 500;
padding: 0.4em 0.9em;
}
.pf-pill--accent { background: var(--pf-hue-1-wash); border-color: rgba(143, 224, 106, 0.35); color: var(--pf-hue-1); }
.pf-pill--accent-2 { background: var(--pf-hue-2-wash); border-color: rgba(229, 177, 137, 0.35); color: var(--pf-hue-2); }
/* Small triangle used instead of a tracked-out caps label. */
.pf-mark {
display: inline-block;
width: 0.6em;
height: 0.6em;
background: var(--pf-accent);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
flex: none;
}
.pf-mark--accent-2 { background: var(--pf-accent-2); }
.pf-dot {
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: var(--pf-accent);
flex: none;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--pf-focus);
outline-offset: 2px;
border-radius: var(--pf-radius-sm);
}
.pf-skip {
position: absolute;
inset-inline-start: var(--pf-space-4);
top: -4rem;
z-index: 100;
background: var(--pf-hue-1);
color: var(--pf-base-950);
border-radius: var(--pf-radius);
padding: 0.7em 1.2em;
font-weight: 600;
text-decoration: none;
transition: top var(--pf-speed) var(--pf-ease);
}
.pf-skip:focus { top: var(--pf-space-4); color: var(--pf-base-950); }
/**
* Scroll lock, set by the optional script while a drawer is open.
*
* overflow: hidden on rather than , and no position:fixed: the
* fixed-body trick loses the scroll position and jumps the page to the top
* on close, which on a long list is the most annoying possible outcome.
*/
.pf-scroll-lock {
overflow: hidden;
/* Compensate for the scrollbar the lock removes, so the page does not
shift sideways as the drawer opens on a desktop. */
scrollbar-gutter: stable;
}
.pf-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/**
* Touch targets.
*
* A 12px small button is about 28px tall, which is under every published
* minimum for a finger. Rather than inflate every button on every device,
* raise the floor only where the pointer is coarse - phones, tablets and
* touch laptops - so mouse users keep the tighter rhythm.
*/
/**
* Touch behaviour.
*
* touch-action: manipulation removes the 300ms click delay that older mobile
* browsers add while they wait to see if a tap is a double-tap to zoom. The
* tap highlight is toned down rather than removed - removing it entirely
* leaves a touch with no feedback at all until the next paint.
*/
:where(a, button, label, summary, [role="button"]) {
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(143, 224, 106, 0.18);
}
@media (pointer: coarse) {
.pf-btn,
.pf-nav__links a,
.pf-footer__links a,
.pf-sidenav__links a,
.pf-breadcrumb a,
.pf-social a,
.pf-totop {
min-height: 44px;
}
.pf-btn { display: inline-flex; align-items: center; }
.pf-nav__links a,
.pf-footer__links a,
.pf-sidenav__links a { display: flex; align-items: center; }
.pf-choice input { width: 1.25rem; height: 1.25rem; }
/**
* iOS Safari zooms the page when a field smaller than 16px receives focus,
* and it does not zoom back out. Any font-size below 16px on a text input
* is therefore a layout bug on the most common phone in the world. The
* floor is applied only on touch pointers, so a desktop keeps the tighter
* scale it was designed with.
*/
.pf-input,
.pf-select,
.pf-textarea,
.pf-input--sm,
.pf-select--sm { font-size: 16px; }
}
/**
* Short landscape viewports - a phone turned sideways, a 1024x600 laptop.
* Vertical rhythm tuned for a tall screen eats the whole viewport here, so
* the section and hero padding is capped rather than scaled.
*/
@media (max-height: 640px) and (orientation: landscape) {
:root {
--pf-section-pad: clamp(2rem, 6vh, 3.5rem);
--pf-gap-lg: clamp(1.5rem, 4vw, 2.5rem);
}
}
/**
* prefers-contrast: more. Users who ask the OS for stronger contrast get
* solid borders instead of the hairlines, and muted text moves up to the
* full-strength colour.
*/
@media (prefers-contrast: more) {
:root {
--pf-border: rgba(232, 240, 246, 0.55);
--pf-border-strong: var(--pf-accent);
--pf-text-muted: #d3e2ec;
}
.pf-card, .pf-plan, .pf-alert, .pf-table-wrap, .pf-code { border-width: 2px; }
}
/**
* Windows High Contrast / forced-colors.
*
* The OS replaces every colour with its own palette, which erases anything
* expressed as a background rather than a border - buttons flatten into the
* page and the facet corner disappears. Reinstating a border and honouring
* the system keywords keeps the interface legible there.
*/
@media (forced-colors: active) {
.pf-btn,
.pf-card,
.pf-plan,
.pf-alert,
.pf-input,
.pf-select,
.pf-textarea,
.pf-code { border: 1px solid ButtonBorder; }
.pf-btn { forced-color-adjust: none; background: ButtonFace; color: ButtonText; }
.pf-mark, .pf-dot { forced-color-adjust: none; background: CanvasText; }
:where(a, button, input, select, textarea, summary):focus-visible { outline-color: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
}
/* ===== PolyFishCSS-Grid.css ===== */
/*! PolyFishCSS-Grid.css | v1.0.0-rc.2-rc.1-rc.1-rc.1-rc.1-rc.1 | polyfish.org | MIT
*
* A twelve-column responsive grid, for the times when the Core primitives
* (.pf-grid, .pf-split, .pf-shell) are not enough and you want explicit
* control per breakpoint.
*
* Depends on: PolyFishCSS-Core.css (gutter and space tokens).
* Load order: after Core, before Utilities.
*
* CONTENTS
* 1. Rows and columns
* 2. Column widths, offsets and order
* 3. Breakpoint variants
* 4. Row gutters and alignment
*
* WHEN NOT TO USE IT
* Most layouts do not need a column system. `.pf-grid--3` is one class and
* handles its own breakpoints; `.pf-row` plus `.pf-col-md-4` is two classes
* per child and handles them by hand. Reach for this when the design really
* does change proportion per breakpoint - an 8/4 split that becomes 7/5
* before it stacks - and use the primitives everywhere else.
*
* MARKUP
*
* main
* aside
*
*
* BREAKPOINTS
* sm 576px md 768px lg 992px xl 1200px xxl 1400px
* Mobile first: an unprefixed class applies at every width, a prefixed one
* applies from that width up.
*/
@layer polyfish.core, polyfish.grid, polyfish.headers, polyfish.content, polyfish.forms, polyfish.components, polyfish.footers, polyfish.space, polyfish.effects, polyfish.utilities, polyfish.fonts, polyfish.compat;
/* ==========================================================================
CASCADE LAYER
==========================================================================
Everything below sits in `polyfish.grid`. The layer order is declared in
every module, so it holds no matter which order you link the files in.
Why this matters to you: unlayered CSS beats layered CSS regardless of
specificity. Your own stylesheet overrides any framework rule with a plain
class selector — no `!important`, no specificity arms race, no worrying
about whether Utilities loaded last.
If you want your CSS layered too, name a layer after the framework's:
@layer polyfish, app;
@layer app { .card { background: rebeccapurple; } }
========================================================================== */
@layer polyfish.grid {
/* ==========================================================================
#ROWS AND COLUMNS
========================================================================== */
/**
* The row is a twelve-track grid rather than a float or flexbox row, so
* columns line up vertically as well as horizontally and a short column does
* not drag the next one up into the gap beside it.
*/
.pf-row {
--pf-row-cols: 12;
display: grid;
grid-template-columns: repeat(var(--pf-row-cols), minmax(0, 1fr));
column-gap: var(--pf-gutter-x, var(--pf-gap));
row-gap: var(--pf-gutter-y, var(--pf-gap));
}
/* A column with no width takes an equal share of what is left. */
.pf-col { grid-column: span 1; }
.pf-col-auto { grid-column: auto; }
/* Every column child gets the overflow guard, for the same reason Core's
primitives do: a wide table or a long word must not stretch its track. */
.pf-row > * { min-width: 0; }
/* ==========================================================================
#COLUMN WIDTHS, OFFSETS AND ORDER
========================================================================== */
.pf-col-1 { grid-column: span 1; }
.pf-col-2 { grid-column: span 2; }
.pf-col-3 { grid-column: span 3; }
.pf-col-4 { grid-column: span 4; }
.pf-col-5 { grid-column: span 5; }
.pf-col-6 { grid-column: span 6; }
.pf-col-7 { grid-column: span 7; }
.pf-col-8 { grid-column: span 8; }
.pf-col-9 { grid-column: span 9; }
.pf-col-10 { grid-column: span 10; }
.pf-col-11 { grid-column: span 11; }
.pf-col-12 { grid-column: span 12; }
.pf-offset-0 { margin-inline-start: 0; }
.pf-offset-1 { margin-inline-start: calc(100% / 12 * 1 + var(--pf-gutter-x, var(--pf-gap)) * 1 / 12); }
.pf-offset-2 { margin-inline-start: calc(100% / 12 * 2 + var(--pf-gutter-x, var(--pf-gap)) * 2 / 12); }
.pf-offset-3 { margin-inline-start: calc(100% / 12 * 3 + var(--pf-gutter-x, var(--pf-gap)) * 3 / 12); }
.pf-offset-4 { margin-inline-start: calc(100% / 12 * 4 + var(--pf-gutter-x, var(--pf-gap)) * 4 / 12); }
.pf-offset-5 { margin-inline-start: calc(100% / 12 * 5 + var(--pf-gutter-x, var(--pf-gap)) * 5 / 12); }
.pf-offset-6 { margin-inline-start: calc(100% / 12 * 6 + var(--pf-gutter-x, var(--pf-gap)) * 6 / 12); }
.pf-offset-7 { margin-inline-start: calc(100% / 12 * 7 + var(--pf-gutter-x, var(--pf-gap)) * 7 / 12); }
.pf-offset-8 { margin-inline-start: calc(100% / 12 * 8 + var(--pf-gutter-x, var(--pf-gap)) * 8 / 12); }
.pf-offset-9 { margin-inline-start: calc(100% / 12 * 9 + var(--pf-gutter-x, var(--pf-gap)) * 9 / 12); }
.pf-offset-10 { margin-inline-start: calc(100% / 12 * 10 + var(--pf-gutter-x, var(--pf-gap)) * 10 / 12); }
.pf-offset-11 { margin-inline-start: calc(100% / 12 * 11 + var(--pf-gutter-x, var(--pf-gap)) * 11 / 12); }
.pf-order-first { order: -1; }
.pf-order-last { order: 13; }
.pf-order-1 { order: 1; }
.pf-order-2 { order: 2; }
.pf-order-3 { order: 3; }
.pf-order-4 { order: 4; }
.pf-order-5 { order: 5; }
.pf-order-6 { order: 6; }
.pf-order-7 { order: 7; }
.pf-order-8 { order: 8; }
.pf-order-9 { order: 9; }
.pf-order-10 { order: 10; }
.pf-order-11 { order: 11; }
.pf-order-12 { order: 12; }
/* ==========================================================================
#BREAKPOINT VARIANTS
========================================================================== */
@media (min-width: 576px) {
.pf-col-sm-auto { grid-column: auto; }
.pf-col-sm-1 { grid-column: span 1; }
.pf-col-sm-2 { grid-column: span 2; }
.pf-col-sm-3 { grid-column: span 3; }
.pf-col-sm-4 { grid-column: span 4; }
.pf-col-sm-5 { grid-column: span 5; }
.pf-col-sm-6 { grid-column: span 6; }
.pf-col-sm-7 { grid-column: span 7; }
.pf-col-sm-8 { grid-column: span 8; }
.pf-col-sm-9 { grid-column: span 9; }
.pf-col-sm-10 { grid-column: span 10; }
.pf-col-sm-11 { grid-column: span 11; }
.pf-col-sm-12 { grid-column: span 12; }
.pf-offset-sm-1 { margin-inline-start: calc(100% / 12 * 1 + var(--pf-gutter-x, var(--pf-gap)) * 1 / 12); }
.pf-offset-sm-2 { margin-inline-start: calc(100% / 12 * 2 + var(--pf-gutter-x, var(--pf-gap)) * 2 / 12); }
.pf-offset-sm-3 { margin-inline-start: calc(100% / 12 * 3 + var(--pf-gutter-x, var(--pf-gap)) * 3 / 12); }
.pf-offset-sm-4 { margin-inline-start: calc(100% / 12 * 4 + var(--pf-gutter-x, var(--pf-gap)) * 4 / 12); }
.pf-offset-sm-5 { margin-inline-start: calc(100% / 12 * 5 + var(--pf-gutter-x, var(--pf-gap)) * 5 / 12); }
.pf-offset-sm-6 { margin-inline-start: calc(100% / 12 * 6 + var(--pf-gutter-x, var(--pf-gap)) * 6 / 12); }
.pf-offset-sm-7 { margin-inline-start: calc(100% / 12 * 7 + var(--pf-gutter-x, var(--pf-gap)) * 7 / 12); }
.pf-offset-sm-8 { margin-inline-start: calc(100% / 12 * 8 + var(--pf-gutter-x, var(--pf-gap)) * 8 / 12); }
.pf-offset-sm-9 { margin-inline-start: calc(100% / 12 * 9 + var(--pf-gutter-x, var(--pf-gap)) * 9 / 12); }
.pf-offset-sm-10 { margin-inline-start: calc(100% / 12 * 10 + var(--pf-gutter-x, var(--pf-gap)) * 10 / 12); }
.pf-offset-sm-11 { margin-inline-start: calc(100% / 12 * 11 + var(--pf-gutter-x, var(--pf-gap)) * 11 / 12); }
.pf-offset-sm-0 { margin-inline-start: 0; }
.pf-order-sm-1 { order: 1; }
.pf-order-sm-2 { order: 2; }
.pf-order-sm-3 { order: 3; }
.pf-order-sm-4 { order: 4; }
.pf-order-sm-5 { order: 5; }
.pf-order-sm-6 { order: 6; }
.pf-order-sm-7 { order: 7; }
.pf-order-sm-8 { order: 8; }
.pf-order-sm-9 { order: 9; }
.pf-order-sm-10 { order: 10; }
.pf-order-sm-11 { order: 11; }
.pf-order-sm-12 { order: 12; }
}
@media (min-width: 768px) {
.pf-col-md-auto { grid-column: auto; }
.pf-col-md-1 { grid-column: span 1; }
.pf-col-md-2 { grid-column: span 2; }
.pf-col-md-3 { grid-column: span 3; }
.pf-col-md-4 { grid-column: span 4; }
.pf-col-md-5 { grid-column: span 5; }
.pf-col-md-6 { grid-column: span 6; }
.pf-col-md-7 { grid-column: span 7; }
.pf-col-md-8 { grid-column: span 8; }
.pf-col-md-9 { grid-column: span 9; }
.pf-col-md-10 { grid-column: span 10; }
.pf-col-md-11 { grid-column: span 11; }
.pf-col-md-12 { grid-column: span 12; }
.pf-offset-md-1 { margin-inline-start: calc(100% / 12 * 1 + var(--pf-gutter-x, var(--pf-gap)) * 1 / 12); }
.pf-offset-md-2 { margin-inline-start: calc(100% / 12 * 2 + var(--pf-gutter-x, var(--pf-gap)) * 2 / 12); }
.pf-offset-md-3 { margin-inline-start: calc(100% / 12 * 3 + var(--pf-gutter-x, var(--pf-gap)) * 3 / 12); }
.pf-offset-md-4 { margin-inline-start: calc(100% / 12 * 4 + var(--pf-gutter-x, var(--pf-gap)) * 4 / 12); }
.pf-offset-md-5 { margin-inline-start: calc(100% / 12 * 5 + var(--pf-gutter-x, var(--pf-gap)) * 5 / 12); }
.pf-offset-md-6 { margin-inline-start: calc(100% / 12 * 6 + var(--pf-gutter-x, var(--pf-gap)) * 6 / 12); }
.pf-offset-md-7 { margin-inline-start: calc(100% / 12 * 7 + var(--pf-gutter-x, var(--pf-gap)) * 7 / 12); }
.pf-offset-md-8 { margin-inline-start: calc(100% / 12 * 8 + var(--pf-gutter-x, var(--pf-gap)) * 8 / 12); }
.pf-offset-md-9 { margin-inline-start: calc(100% / 12 * 9 + var(--pf-gutter-x, var(--pf-gap)) * 9 / 12); }
.pf-offset-md-10 { margin-inline-start: calc(100% / 12 * 10 + var(--pf-gutter-x, var(--pf-gap)) * 10 / 12); }
.pf-offset-md-11 { margin-inline-start: calc(100% / 12 * 11 + var(--pf-gutter-x, var(--pf-gap)) * 11 / 12); }
.pf-offset-md-0 { margin-inline-start: 0; }
.pf-order-md-1 { order: 1; }
.pf-order-md-2 { order: 2; }
.pf-order-md-3 { order: 3; }
.pf-order-md-4 { order: 4; }
.pf-order-md-5 { order: 5; }
.pf-order-md-6 { order: 6; }
.pf-order-md-7 { order: 7; }
.pf-order-md-8 { order: 8; }
.pf-order-md-9 { order: 9; }
.pf-order-md-10 { order: 10; }
.pf-order-md-11 { order: 11; }
.pf-order-md-12 { order: 12; }
}
@media (min-width: 992px) {
.pf-col-lg-auto { grid-column: auto; }
.pf-col-lg-1 { grid-column: span 1; }
.pf-col-lg-2 { grid-column: span 2; }
.pf-col-lg-3 { grid-column: span 3; }
.pf-col-lg-4 { grid-column: span 4; }
.pf-col-lg-5 { grid-column: span 5; }
.pf-col-lg-6 { grid-column: span 6; }
.pf-col-lg-7 { grid-column: span 7; }
.pf-col-lg-8 { grid-column: span 8; }
.pf-col-lg-9 { grid-column: span 9; }
.pf-col-lg-10 { grid-column: span 10; }
.pf-col-lg-11 { grid-column: span 11; }
.pf-col-lg-12 { grid-column: span 12; }
.pf-offset-lg-1 { margin-inline-start: calc(100% / 12 * 1 + var(--pf-gutter-x, var(--pf-gap)) * 1 / 12); }
.pf-offset-lg-2 { margin-inline-start: calc(100% / 12 * 2 + var(--pf-gutter-x, var(--pf-gap)) * 2 / 12); }
.pf-offset-lg-3 { margin-inline-start: calc(100% / 12 * 3 + var(--pf-gutter-x, var(--pf-gap)) * 3 / 12); }
.pf-offset-lg-4 { margin-inline-start: calc(100% / 12 * 4 + var(--pf-gutter-x, var(--pf-gap)) * 4 / 12); }
.pf-offset-lg-5 { margin-inline-start: calc(100% / 12 * 5 + var(--pf-gutter-x, var(--pf-gap)) * 5 / 12); }
.pf-offset-lg-6 { margin-inline-start: calc(100% / 12 * 6 + var(--pf-gutter-x, var(--pf-gap)) * 6 / 12); }
.pf-offset-lg-7 { margin-inline-start: calc(100% / 12 * 7 + var(--pf-gutter-x, var(--pf-gap)) * 7 / 12); }
.pf-offset-lg-8 { margin-inline-start: calc(100% / 12 * 8 + var(--pf-gutter-x, var(--pf-gap)) * 8 / 12); }
.pf-offset-lg-9 { margin-inline-start: calc(100% / 12 * 9 + var(--pf-gutter-x, var(--pf-gap)) * 9 / 12); }
.pf-offset-lg-10 { margin-inline-start: calc(100% / 12 * 10 + var(--pf-gutter-x, var(--pf-gap)) * 10 / 12); }
.pf-offset-lg-11 { margin-inline-start: calc(100% / 12 * 11 + var(--pf-gutter-x, var(--pf-gap)) * 11 / 12); }
.pf-offset-lg-0 { margin-inline-start: 0; }
.pf-order-lg-1 { order: 1; }
.pf-order-lg-2 { order: 2; }
.pf-order-lg-3 { order: 3; }
.pf-order-lg-4 { order: 4; }
.pf-order-lg-5 { order: 5; }
.pf-order-lg-6 { order: 6; }
.pf-order-lg-7 { order: 7; }
.pf-order-lg-8 { order: 8; }
.pf-order-lg-9 { order: 9; }
.pf-order-lg-10 { order: 10; }
.pf-order-lg-11 { order: 11; }
.pf-order-lg-12 { order: 12; }
}
@media (min-width: 1200px) {
.pf-col-xl-auto { grid-column: auto; }
.pf-col-xl-1 { grid-column: span 1; }
.pf-col-xl-2 { grid-column: span 2; }
.pf-col-xl-3 { grid-column: span 3; }
.pf-col-xl-4 { grid-column: span 4; }
.pf-col-xl-5 { grid-column: span 5; }
.pf-col-xl-6 { grid-column: span 6; }
.pf-col-xl-7 { grid-column: span 7; }
.pf-col-xl-8 { grid-column: span 8; }
.pf-col-xl-9 { grid-column: span 9; }
.pf-col-xl-10 { grid-column: span 10; }
.pf-col-xl-11 { grid-column: span 11; }
.pf-col-xl-12 { grid-column: span 12; }
.pf-offset-xl-1 { margin-inline-start: calc(100% / 12 * 1 + var(--pf-gutter-x, var(--pf-gap)) * 1 / 12); }
.pf-offset-xl-2 { margin-inline-start: calc(100% / 12 * 2 + var(--pf-gutter-x, var(--pf-gap)) * 2 / 12); }
.pf-offset-xl-3 { margin-inline-start: calc(100% / 12 * 3 + var(--pf-gutter-x, var(--pf-gap)) * 3 / 12); }
.pf-offset-xl-4 { margin-inline-start: calc(100% / 12 * 4 + var(--pf-gutter-x, var(--pf-gap)) * 4 / 12); }
.pf-offset-xl-5 { margin-inline-start: calc(100% / 12 * 5 + var(--pf-gutter-x, var(--pf-gap)) * 5 / 12); }
.pf-offset-xl-6 { margin-inline-start: calc(100% / 12 * 6 + var(--pf-gutter-x, var(--pf-gap)) * 6 / 12); }
.pf-offset-xl-7 { margin-inline-start: calc(100% / 12 * 7 + var(--pf-gutter-x, var(--pf-gap)) * 7 / 12); }
.pf-offset-xl-8 { margin-inline-start: calc(100% / 12 * 8 + var(--pf-gutter-x, var(--pf-gap)) * 8 / 12); }
.pf-offset-xl-9 { margin-inline-start: calc(100% / 12 * 9 + var(--pf-gutter-x, var(--pf-gap)) * 9 / 12); }
.pf-offset-xl-10 { margin-inline-start: calc(100% / 12 * 10 + var(--pf-gutter-x, var(--pf-gap)) * 10 / 12); }
.pf-offset-xl-11 { margin-inline-start: calc(100% / 12 * 11 + var(--pf-gutter-x, var(--pf-gap)) * 11 / 12); }
.pf-offset-xl-0 { margin-inline-start: 0; }
.pf-order-xl-1 { order: 1; }
.pf-order-xl-2 { order: 2; }
.pf-order-xl-3 { order: 3; }
.pf-order-xl-4 { order: 4; }
.pf-order-xl-5 { order: 5; }
.pf-order-xl-6 { order: 6; }
.pf-order-xl-7 { order: 7; }
.pf-order-xl-8 { order: 8; }
.pf-order-xl-9 { order: 9; }
.pf-order-xl-10 { order: 10; }
.pf-order-xl-11 { order: 11; }
.pf-order-xl-12 { order: 12; }
}
@media (min-width: 1400px) {
.pf-col-xxl-auto { grid-column: auto; }
.pf-col-xxl-1 { grid-column: span 1; }
.pf-col-xxl-2 { grid-column: span 2; }
.pf-col-xxl-3 { grid-column: span 3; }
.pf-col-xxl-4 { grid-column: span 4; }
.pf-col-xxl-5 { grid-column: span 5; }
.pf-col-xxl-6 { grid-column: span 6; }
.pf-col-xxl-7 { grid-column: span 7; }
.pf-col-xxl-8 { grid-column: span 8; }
.pf-col-xxl-9 { grid-column: span 9; }
.pf-col-xxl-10 { grid-column: span 10; }
.pf-col-xxl-11 { grid-column: span 11; }
.pf-col-xxl-12 { grid-column: span 12; }
.pf-offset-xxl-1 { margin-inline-start: calc(100% / 12 * 1 + var(--pf-gutter-x, var(--pf-gap)) * 1 / 12); }
.pf-offset-xxl-2 { margin-inline-start: calc(100% / 12 * 2 + var(--pf-gutter-x, var(--pf-gap)) * 2 / 12); }
.pf-offset-xxl-3 { margin-inline-start: calc(100% / 12 * 3 + var(--pf-gutter-x, var(--pf-gap)) * 3 / 12); }
.pf-offset-xxl-4 { margin-inline-start: calc(100% / 12 * 4 + var(--pf-gutter-x, var(--pf-gap)) * 4 / 12); }
.pf-offset-xxl-5 { margin-inline-start: calc(100% / 12 * 5 + var(--pf-gutter-x, var(--pf-gap)) * 5 / 12); }
.pf-offset-xxl-6 { margin-inline-start: calc(100% / 12 * 6 + var(--pf-gutter-x, var(--pf-gap)) * 6 / 12); }
.pf-offset-xxl-7 { margin-inline-start: calc(100% / 12 * 7 + var(--pf-gutter-x, var(--pf-gap)) * 7 / 12); }
.pf-offset-xxl-8 { margin-inline-start: calc(100% / 12 * 8 + var(--pf-gutter-x, var(--pf-gap)) * 8 / 12); }
.pf-offset-xxl-9 { margin-inline-start: calc(100% / 12 * 9 + var(--pf-gutter-x, var(--pf-gap)) * 9 / 12); }
.pf-offset-xxl-10 { margin-inline-start: calc(100% / 12 * 10 + var(--pf-gutter-x, var(--pf-gap)) * 10 / 12); }
.pf-offset-xxl-11 { margin-inline-start: calc(100% / 12 * 11 + var(--pf-gutter-x, var(--pf-gap)) * 11 / 12); }
.pf-offset-xxl-0 { margin-inline-start: 0; }
.pf-order-xxl-1 { order: 1; }
.pf-order-xxl-2 { order: 2; }
.pf-order-xxl-3 { order: 3; }
.pf-order-xxl-4 { order: 4; }
.pf-order-xxl-5 { order: 5; }
.pf-order-xxl-6 { order: 6; }
.pf-order-xxl-7 { order: 7; }
.pf-order-xxl-8 { order: 8; }
.pf-order-xxl-9 { order: 9; }
.pf-order-xxl-10 { order: 10; }
.pf-order-xxl-11 { order: 11; }
.pf-order-xxl-12 { order: 12; }
}
/* ==========================================================================
#ROW GUTTERS AND ALIGNMENT
========================================================================== */
/**
* Gutters are two custom properties, so a row can be tightened or opened up
* without a modifier per size:
* no gutters at all
* wide columns, tight rows
*/
.pf-g-0 { --pf-gutter-x: 0; --pf-gutter-y: 0; }
.pf-g-1 { --pf-gutter-x: var(--pf-space-1); --pf-gutter-y: var(--pf-space-1); }
.pf-g-2 { --pf-gutter-x: var(--pf-space-2); --pf-gutter-y: var(--pf-space-2); }
.pf-g-3 { --pf-gutter-x: var(--pf-space-3); --pf-gutter-y: var(--pf-space-3); }
.pf-g-4 { --pf-gutter-x: var(--pf-space-4); --pf-gutter-y: var(--pf-space-4); }
.pf-g-5 { --pf-gutter-x: var(--pf-space-5); --pf-gutter-y: var(--pf-space-5); }
.pf-g-6 { --pf-gutter-x: var(--pf-space-6); --pf-gutter-y: var(--pf-space-6); }
.pf-gx-0 { --pf-gutter-x: 0; }
.pf-gx-2 { --pf-gutter-x: var(--pf-space-2); }
.pf-gx-4 { --pf-gutter-x: var(--pf-space-4); }
.pf-gx-6 { --pf-gutter-x: var(--pf-space-6); }
.pf-gy-0 { --pf-gutter-y: 0; }
.pf-gy-2 { --pf-gutter-y: var(--pf-space-2); }
.pf-gy-4 { --pf-gutter-y: var(--pf-space-4); }
.pf-gy-6 { --pf-gutter-y: var(--pf-space-6); }
/* Alignment within the row. align-* is the cross axis, justify-* the main. */
.pf-row--top { align-items: start; }
.pf-row--middle { align-items: center; }
.pf-row--bottom { align-items: end; }
.pf-row--stretch { align-items: stretch; }
/* Equal-height children regardless of content, for card rows. */
.pf-row--equal > * { display: flex; }
.pf-row--equal > * > * { flex: 1; }
/**
* Auto-columns: n equal tracks with no per-child classes, the shorthand for
* the common case.
* three equal columns
*/
.pf-row-cols-1 { --pf-row-cols: 1; }
.pf-row-cols-2 { --pf-row-cols: 2; }
.pf-row-cols-3 { --pf-row-cols: 3; }
.pf-row-cols-4 { --pf-row-cols: 4; }
.pf-row-cols-6 { --pf-row-cols: 6; }
.pf-row-cols-1 > *, .pf-row-cols-2 > *, .pf-row-cols-3 > *,
.pf-row-cols-4 > *, .pf-row-cols-6 > * { grid-column: span 1; }
@media (min-width: 576px) {
.pf-row-cols-sm-1 { --pf-row-cols: 1; }
.pf-row-cols-sm-2 { --pf-row-cols: 2; }
.pf-row-cols-sm-3 { --pf-row-cols: 3; }
.pf-row-cols-sm-4 { --pf-row-cols: 4; }
.pf-row-cols-sm-6 { --pf-row-cols: 6; }
}
@media (min-width: 768px) {
.pf-row-cols-md-1 { --pf-row-cols: 1; }
.pf-row-cols-md-2 { --pf-row-cols: 2; }
.pf-row-cols-md-3 { --pf-row-cols: 3; }
.pf-row-cols-md-4 { --pf-row-cols: 4; }
.pf-row-cols-md-6 { --pf-row-cols: 6; }
}
@media (min-width: 992px) {
.pf-row-cols-lg-1 { --pf-row-cols: 1; }
.pf-row-cols-lg-2 { --pf-row-cols: 2; }
.pf-row-cols-lg-3 { --pf-row-cols: 3; }
.pf-row-cols-lg-4 { --pf-row-cols: 4; }
.pf-row-cols-lg-6 { --pf-row-cols: 6; }
}
@media (min-width: 1200px) {
.pf-row-cols-xl-1 { --pf-row-cols: 1; }
.pf-row-cols-xl-2 { --pf-row-cols: 2; }
.pf-row-cols-xl-3 { --pf-row-cols: 3; }
.pf-row-cols-xl-4 { --pf-row-cols: 4; }
.pf-row-cols-xl-6 { --pf-row-cols: 6; }
}
}
/* ===== PolyFishCSS-Headers.css ===== */
/*! PolyFishCSS-Headers.css | v1.0.0-rc.2-rc.1-rc.1-rc.1-rc.1-rc.1 | polyfish.org | MIT
*
* Everything above the fold: announcement bar, sticky navigation, hero
* variants, interior page headers and breadcrumbs. Needs no script - the
* mobile menu is a checkbox and a sibling selector.
*
* Depends on: PolyFishCSS-Core.css (tokens, buttons, container).
* Load order: Core -> Headers -> Content -> Footers -> Utilities.
* Utilities must come last; several of its helpers rely on being
* the later rule when specificity ties with a component.
*
* CONTENTS
* 1. Announcement bar
* 2. Navigation
* 3. Hero
* 4. Interior page header + breadcrumbs
*
* CONVENTIONS
* .pf-block component root
* .pf-block__element part of a component, never used alone
* .pf-block--modifier variant, always applied alongside the root class
*
* Components read role tokens (--pf-accent, --pf-surface, --pf-border) and
* never raw palette values, which is what makes a theme a handful of
* redeclared properties rather than a fork. See docs/tokens for the list.
*
* BROWSER BASELINE
* Custom properties, grid, gap, clamp(), clip-path, :focus-visible.
* Roughly Chrome 105 / Safari 15.4 / Firefox 103 and newer. Later features
* (color-mix, animation-timeline) are used only behind @supports or with a
* declared fallback, so nothing breaks on older engines - it just does less.
*/
@layer polyfish.core, polyfish.grid, polyfish.headers, polyfish.content, polyfish.forms, polyfish.components, polyfish.footers, polyfish.space, polyfish.effects, polyfish.utilities, polyfish.fonts, polyfish.compat;
/* ==========================================================================
CASCADE LAYER
==========================================================================
Everything below sits in `polyfish.headers`. The layer order is declared in
every module, so it holds no matter which order you link the files in.
Why this matters to you: unlayered CSS beats layered CSS regardless of
specificity. Your own stylesheet overrides any framework rule with a plain
class selector — no `!important`, no specificity arms race, no worrying
about whether Utilities loaded last.
If you want your CSS layered too, name a layer after the framework's:
@layer polyfish, app;
@layer app { .card { background: rebeccapurple; } }
========================================================================== */
@layer polyfish.headers {
/* ==========================================================================
#ANNOUNCEMENT BAR
========================================================================== */
/**
* Top bar
*
*
*
* Variant: --green fills with the accent and recolours its own links.
* Sits above .pf-nav in the markup so the sticky navigation scrolls over it.
*/
.pf-topbar {
background: var(--pf-base-900);
border-bottom: 1px solid var(--pf-border);
color: var(--pf-text-muted);
font-size: var(--pf-text-xs);
}
.pf-topbar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--pf-space-3);
padding-block: 0.65rem;
text-align: center;
}
.pf-topbar a { font-weight: 500; }
.pf-topbar--accent { background: var(--pf-hue-1); border-color: transparent; color: var(--pf-base-950); }
.pf-topbar--accent a { color: var(--pf-base-950); text-decoration-color: rgba(0, 16, 58, 0.5); }
/* ==========================================================================
#NAVIGATION
========================================================================== */
/**
* Navigation
*
*
*
* Brand
*
*
*
*
*
*
*
*
* Variants: --static (scrolls away) --flush (transparent, over a photo hero)
*
* ORDER MATTERS. The checkbox must precede .pf-nav__menu, because the open
* state is expressed as :checked ~ .pf-nav__menu and the subsequent-sibling
* combinator only looks forward. Move the input and the menu stops opening.
*
* Mark the current page with aria-current on its link; the underline is
* styled off that attribute rather than a modifier class, so the
* accessibility hint and the visual state cannot drift apart.
*/
.pf-nav {
position: sticky;
top: 0;
z-index: 50;
background: var(--pf-bg); /* fallback where color-mix is unsupported */
background: color-mix(in srgb, var(--pf-bg) 88%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--pf-border);
}
.pf-nav--static { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pf-nav--flush { background: transparent; border-bottom-color: transparent; }
.pf-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pf-space-5);
min-height: 4.5rem;
}
.pf-nav__brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--pf-text);
font-family: var(--pf-font-display);
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.02em;
text-decoration: none;
flex: none;
}
.pf-nav__brand:hover { color: var(--pf-text); }
.pf-nav__brand img,
.pf-nav__brand svg { width: 2.1rem; height: 2.1rem; }
.pf-nav__brand small {
align-self: center;
color: var(--pf-text-muted);
font-family: var(--pf-font-mono);
font-size: 0.62rem;
font-weight: 400;
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-pill);
padding: 0.1rem 0.5rem;
}
.pf-nav__menu {
display: flex;
align-items: center;
gap: var(--pf-space-6);
margin-inline-start: auto;
}
.pf-nav__links {
display: flex;
align-items: center;
gap: var(--pf-space-5);
margin: 0;
}
.pf-nav__links a {
color: var(--pf-text-muted);
font-size: var(--pf-text-base);
font-weight: 500;
text-decoration: none;
padding-block: 0.4rem;
position: relative;
}
.pf-nav__links a:hover { color: var(--pf-base-50); }
.pf-nav__links a[aria-current] { color: var(--pf-base-50); }
.pf-nav__links a[aria-current]::after {
content: "";
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: -0.15rem;
height: 2px;
background: var(--pf-accent);
}
.pf-nav__actions {
display: flex;
align-items: center;
gap: var(--pf-space-3);
}
/**
* The checkbox is visually hidden but not display:none - it has to stay
* focusable so the menu is reachable by keyboard. The label is its accessible
* hit area and carries a visually-hidden text node for screen readers.
*/
.pf-nav__checkbox { position: absolute; opacity: 0; pointer-events: none; }
.pf-nav__burger {
display: none;
width: 2.75rem;
height: 2.75rem;
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius);
cursor: pointer;
place-items: center;
}
.pf-nav__burger span,
.pf-nav__burger span::before,
.pf-nav__burger span::after {
display: block;
width: 1.1rem;
height: 2px;
background: var(--pf-text);
content: "";
transition: transform var(--pf-speed) var(--pf-ease), opacity var(--pf-speed) var(--pf-ease);
}
.pf-nav__burger span::before { transform: translateY(-6px); }
.pf-nav__burger span::after { transform: translateY(4px); }
.pf-nav__checkbox:focus-visible + .pf-nav__burger { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
@media (max-width: 860px) {
.pf-nav__burger { display: grid; }
.pf-nav__menu {
position: absolute;
inset: 100% 0 auto;
display: grid;
gap: var(--pf-space-4);
background: var(--pf-base-900);
border-bottom: 1px solid var(--pf-border);
padding: var(--pf-space-5) var(--pf-gutter) var(--pf-space-6);
/* A long menu on a short phone has to scroll rather than run off the
bottom of the screen with no way to reach the last item. dvh, not vh,
because vh on mobile is the viewport with the address bar hidden. */
max-height: calc(100dvh - 4.5rem);
overflow-y: auto;
overscroll-behavior: contain;
padding-bottom: max(var(--pf-space-6), env(safe-area-inset-bottom));
visibility: hidden;
opacity: 0;
transform: translateY(-0.5rem);
transition: opacity var(--pf-speed) var(--pf-ease), transform var(--pf-speed) var(--pf-ease),
visibility var(--pf-speed);
}
.pf-nav__checkbox:checked ~ .pf-nav__menu { visibility: visible; opacity: 1; transform: none; }
.pf-nav__checkbox:checked ~ .pf-nav__burger span { background: transparent; }
.pf-nav__checkbox:checked ~ .pf-nav__burger span::before { transform: rotate(45deg); }
.pf-nav__checkbox:checked ~ .pf-nav__burger span::after { transform: rotate(-45deg); }
.pf-nav__links { flex-direction: column; align-items: stretch; gap: var(--pf-space-1); }
.pf-nav__links a { font-size: var(--pf-text-lg); padding-block: 0.5rem; }
.pf-nav__actions { flex-direction: column; align-items: stretch; }
.pf-nav__inner { position: relative; }
}
/* ==========================================================================
#HERO
========================================================================== */
/**
* Hero
*
*
*
*
* ...
* ...
* ...
* ...
*
* ...
*
*
*
* Variants: --split (copy + media) --center (one column) --photo (image bg)
*
* The triangle mesh is a masked pseudo-element, not an image: no extra
* request, and it recolours with the theme because the SVG is a data URI
* built from the accent. The mask fades it out before it reaches the copy,
* which is what keeps the headline legible without a scrim.
*
* For --photo, set the image on the section itself:
*
*/
.pf-hero {
position: relative;
overflow: hidden;
background: var(--pf-bg);
padding-block: clamp(5.5rem, 13vw, 11rem);
}
.pf-hero::before {
content: "";
position: absolute;
inset: -20% -10% auto;
height: 150%;
background-image: var(--pf-mesh);
background-position: center top;
-webkit-mask-image: radial-gradient(120% 80% at 78% 0%, #000 0%, transparent 68%);
mask-image: radial-gradient(120% 80% at 78% 0%, #000 0%, transparent 68%);
pointer-events: none;
}
.pf-hero > * { position: relative; }
.pf-hero__inner { display: grid; gap: var(--pf-space-5); }
.pf-hero--center .pf-hero__inner { justify-items: center; text-align: center; }
.pf-hero--center .pf-hero__lede { margin-inline: auto; }
.pf-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--pf-space-2);
background: var(--pf-surface);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-pill);
color: var(--pf-text-muted);
font-size: var(--pf-text-xs);
padding: 0.45rem 0.95rem;
width: fit-content;
}
.pf-hero__title {
font-size: var(--pf-text-5xl);
line-height: var(--pf-leading-tight);
letter-spacing: -0.038em;
max-width: 15ch;
}
.pf-hero--center .pf-hero__title { max-width: 20ch; }
.pf-hero__lede {
color: var(--pf-text-muted);
font-size: var(--pf-text-xl);
line-height: 1.55;
max-width: 52ch;
}
.pf-hero__actions { display: flex; flex-wrap: wrap; gap: var(--pf-space-3); margin-top: var(--pf-space-2); }
.pf-hero__meta {
display: flex;
flex-wrap: wrap;
gap: var(--pf-space-2) var(--pf-space-5);
margin-top: var(--pf-space-4);
color: var(--pf-text-muted);
font-size: var(--pf-text-sm);
}
.pf-hero__meta li { display: flex; align-items: center; gap: 0.5rem; }
/* Split hero: copy left, artwork or code sample right. */
.pf-hero--split .pf-hero__inner {
grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
gap: var(--pf-gap-lg);
align-items: center;
}
.pf-hero__media {
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-lg);
background: var(--pf-base-900);
overflow: hidden;
box-shadow: var(--pf-lift);
}
.pf-hero__media img { width: 100%; }
/**
* The ::after gradient sits at z-index 0 and the hero's children are lifted to
* 1. Without that explicit lift the pseudo-element paints over the copy,
* because positioned siblings paint in document order and ::after comes last.
*/
.pf-hero--photo { --pf-hero-image: none; }
.pf-hero--photo::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(to right, var(--pf-base-800) 12%, rgba(0, 15, 63, 0.72) 55%, rgba(0, 8, 35, 0.85)),
var(--pf-hero-image);
background-size: cover;
background-position: center;
z-index: 0;
}
.pf-hero--photo > * { z-index: 1; }
/* ==========================================================================
#PAGE HEADER + BREADCRUMBS
========================================================================== */
/**
* Page header
*
*
*
*
* ...
* ...
*
*
*
* Shorter than a hero, because the visitor has already arrived. The
* breadcrumb separator is a ::before on each item after the first, so it is
* never selected when the text is copied.
*/
.pf-pagehead {
border-bottom: 1px solid var(--pf-border);
padding-block: clamp(4rem, 8vw, 6.5rem);
background: linear-gradient(var(--pf-base-900), var(--pf-bg));
}
.pf-pagehead__inner { display: grid; gap: var(--pf-space-3); }
.pf-pagehead__title { font-size: var(--pf-text-4xl); max-width: 18ch; }
.pf-pagehead__lede { color: var(--pf-text-muted); font-size: var(--pf-text-lg); line-height: 1.6; max-width: 58ch; }
.pf-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pf-space-2);
color: var(--pf-text-muted);
font-size: var(--pf-text-sm);
margin: 0;
}
.pf-breadcrumb li { display: flex; align-items: center; gap: var(--pf-space-2); }
.pf-breadcrumb li + li::before { content: "/"; color: rgba(169, 188, 216, 0.5); }
.pf-breadcrumb a { text-decoration: none; }
}
/* ===== PolyFishCSS-Content.css ===== */
/*! PolyFishCSS-Content.css | v1.0.0-rc.2-rc.1-rc.1-rc.1-rc.1-rc.1 | polyfish.org | MIT
*
* The body of a page: sections, cards, feature and pricing grids, stats,
* tables, alerts, code blocks, forms, accordions, sidebar navigation,
* galleries, steps and closing CTA bands. The largest module, and the one
* most pages need.
*
* Depends on: PolyFishCSS-Core.css.
* Load order: Core -> Headers -> Content -> Footers -> Utilities.
*
* CONTENTS
* 1. Sections
* 2. Cards
* 3. Pricing / plan cards
* 4. Stats
* 5. Tables
* 6. Alerts and notes
* 7. Code
* 8. Forms
* 9. Accordion
* 10. Sidebar navigation
* 11. Gallery tiles
* 12. Steps
* 13. CTA band
*
* CONVENTIONS
* .pf-block / .pf-block__element / .pf-block--modifier.
* Components read role tokens, never palette values. See docs/tokens.
*
* NO BEHAVIOUR
* Nothing here needs JavaScript. The accordion is a native , the
* tables scroll rather than collapse, and the forms are styled controls, not
* replacements for them. If a component would need state, it is not in this
* file - that is the line the framework holds.
*/
@layer polyfish.core, polyfish.grid, polyfish.headers, polyfish.content, polyfish.forms, polyfish.components, polyfish.footers, polyfish.space, polyfish.effects, polyfish.utilities, polyfish.fonts, polyfish.compat;
/* ==========================================================================
CASCADE LAYER
==========================================================================
Everything below sits in `polyfish.content`. The layer order is declared in
every module, so it holds no matter which order you link the files in.
Why this matters to you: unlayered CSS beats layered CSS regardless of
specificity. Your own stylesheet overrides any framework rule with a plain
class selector — no `!important`, no specificity arms race, no worrying
about whether Utilities loaded last.
If you want your CSS layered too, name a layer after the framework's:
@layer polyfish, app;
@layer app { .card { background: rebeccapurple; } }
========================================================================== */
@layer polyfish.content {
/* ==========================================================================
#SECTIONS
========================================================================== */
/**
* Section
*
*
*
*
* Label
* Heading
* One line of context.
*
* ...
*
*
*
* Variants: --tight --roomy --vast --alt (deep bg) --raised (surface bg)
*
* Vertical rhythm is a token, not a hardcoded clamp: each variant simply
* redeclares --pf-section-pad, so a page's whole rhythm can be shifted by
* setting that property once on a wrapper. Adjacent sections get a hairline
* rule between them, which is why --alt reads as a band rather than a box.
*/
.pf-section { padding-block: var(--pf-section-pad); }
.pf-section.pf-section--tight { --pf-section-pad: clamp(2rem, 4vw, 3rem); }
/* Give a section room to breathe. Use --roomy for a whole page's rhythm and
--vast for the one or two sections that carry the argument. */
.pf-section.pf-section--roomy { --pf-section-pad: clamp(4.5rem, 11vw, 9rem); }
.pf-section.pf-section--vast { --pf-section-pad: clamp(6rem, 16vw, 13rem); }
.pf-section.pf-section--alt { background: var(--pf-base-900); }
.pf-section.pf-section--raised { background: var(--pf-surface); }
.pf-section + .pf-section { border-top: 1px solid var(--pf-border); }
.pf-section__head {
display: grid;
gap: var(--pf-space-3);
margin-bottom: var(--pf-section-head-gap, var(--pf-gap-lg));
max-width: 62ch;
}
.pf-section__head--center { margin-inline: auto; justify-items: center; text-align: center; }
.pf-section--roomy > * > .pf-section__head,
.pf-section--vast > * > .pf-section__head { --pf-section-head-gap: var(--pf-space-8); }
/**
* Eyebrow
*
* Sentence case with a small triangle, rather than the tracked-out capitals
* every SaaS page uses. Caps at 12px are measurably slower to read and the
* marker does the same job of signalling "label, not heading".
*/
.pf-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--pf-space-2);
color: var(--pf-accent);
font-family: var(--pf-font-mono);
font-size: var(--pf-text-sm);
font-weight: 500;
}
.pf-lede {
color: var(--pf-text-muted);
font-size: var(--pf-text-xl);
line-height: 1.55;
max-width: 58ch;
}
.pf-muted { color: var(--pf-text-muted); }
/**
* Prose rhythm.
*
* Long-form pages were relying on default paragraph margins, which are
* tighter than the rest of the framework's spacing and made documentation
* feel cramped next to the marketing pages. This sets the vertical rhythm
* from the space scale like everything else.
*/
.pf-prose > * + * { margin-top: var(--pf-space-5); }
.pf-prose > h2 { margin-top: var(--pf-space-8); }
.pf-prose > h3 { margin-top: var(--pf-space-7); }
.pf-prose > h2 + *,
.pf-prose > h3 + * { margin-top: var(--pf-space-4); }
.pf-prose > hr { margin-block: var(--pf-space-8); }
.pf-prose > .pf-table-wrap,
.pf-prose > .pf-code,
.pf-prose > .pf-alert { margin-top: var(--pf-space-6); }
/* ==========================================================================
#CARDS
========================================================================== */
/**
* Card
*
*
* 01
* Title
* Body copy.
* ...
*
*
* Variants: --facet (clipped corner) --accent --flat --link
*
* The card is a flex column so __foot can take margin-top:auto and pin itself
* to the bottom, which is what keeps a row of cards with uneven copy from
* ending on ragged buttons.
*
* --link turns the whole card into an anchor. Put the on the card itself
* rather than nesting one inside: nested interactive elements are invalid and
* make the card a keyboard trap of two tab stops for one destination.
*/
.pf-card {
display: flex;
flex-direction: column;
gap: var(--pf-space-3);
/* Padding scales with the viewport: 20px on a phone where every pixel of
line length counts, 32px on a desktop where air is the point. */
background: var(--pf-surface);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-lg);
padding: clamp(1.5rem, 3vw, 2.5rem);
transition: border-color var(--pf-speed) var(--pf-ease), background-color var(--pf-speed) var(--pf-ease);
}
.pf-card__title { font-size: var(--pf-text-xl); line-height: 1.25; }
.pf-card__body { color: var(--pf-text-muted); line-height: 1.65; }
.pf-card__foot { margin-top: auto; padding-top: var(--pf-space-4); }
.pf-card > p { max-width: none; }
.pf-card--facet {
border-radius: var(--pf-radius);
clip-path: polygon(0 0, calc(100% - var(--pf-cut)) 0, 100% var(--pf-cut), 100% 100%, 0 100%);
}
.pf-card--accent { border-color: var(--pf-border-strong); background: var(--pf-hue-1-wash); }
.pf-card--flat { background: none; }
.pf-card--link { text-decoration: none; color: inherit; }
.pf-card--link:hover { border-color: var(--pf-border-strong); background: var(--pf-surface-raised); color: inherit; }
.pf-card__icon {
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
background: var(--pf-hue-1-wash);
border: 1px solid rgba(143, 224, 106, 0.3);
border-radius: var(--pf-radius);
color: var(--pf-accent);
font-family: var(--pf-font-mono);
font-size: var(--pf-text-sm);
}
.pf-card__icon--accent-2 {
background: var(--pf-hue-2-wash);
border-color: rgba(229, 177, 137, 0.3);
color: var(--pf-accent-2);
}
/* Feature list — compact, icon optional */
.pf-feature { display: grid; gap: var(--pf-space-2); }
.pf-feature h3 { font-size: var(--pf-text-lg); }
.pf-feature p { color: var(--pf-text-muted); font-size: var(--pf-text-base); line-height: 1.6; max-width: 46ch; }
/**
* Checklist
*
*
* - An item
*
*
* Two-column grid per item so the marker stays put and wrapped lines align to
* the text, not under the bullet. The marker is a clipped triangle rather
* than a character, so it never renders as a missing glyph.
*/
.pf-checks { display: grid; gap: var(--pf-space-2); margin: 0; }
.pf-checks li {
display: grid;
grid-template-columns: 1.1rem 1fr;
gap: var(--pf-space-3);
align-items: start;
color: var(--pf-text-muted);
font-size: var(--pf-text-base);
line-height: 1.6;
}
.pf-checks li::before {
content: "";
width: 0.7rem;
height: 0.7rem;
margin-top: 0.45em;
background: var(--pf-accent);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pf-checks--accent-2 li::before { background: var(--pf-accent-2); }
.pf-checks--muted li::before { background: var(--pf-text-muted); }
/* ==========================================================================
#PLAN CARDS
========================================================================== */
/**
* Plan card
*
*
* Most picked
* Team
* $49 per month
* ...
* ...
*
*
* The featured variant is a border and a gradient wash, not a scale
* transform: growing the middle card breaks the shared baseline and makes the
* other two look like mistakes.
*/
.pf-plan {
position: relative;
display: flex;
flex-direction: column;
gap: var(--pf-space-4);
background: var(--pf-surface);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-lg);
padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
.pf-plan--featured {
border-color: var(--pf-accent);
background: linear-gradient(180deg, var(--pf-hue-1-wash), transparent 55%), var(--pf-surface);
}
.pf-plan__name { font-size: var(--pf-text-lg); }
.pf-plan__note { color: var(--pf-text-muted); font-size: var(--pf-text-sm); }
.pf-plan__price {
display: flex;
align-items: baseline;
gap: 0.35rem;
font-family: var(--pf-font-display);
font-size: var(--pf-text-3xl);
font-weight: 700;
letter-spacing: -0.03em;
}
.pf-plan__price span { color: var(--pf-text-muted); font-family: var(--pf-font-body); font-size: var(--pf-text-sm); font-weight: 400; }
.pf-plan__badge {
position: absolute;
top: var(--pf-space-4);
inset-inline-end: var(--pf-space-4);
background: var(--pf-accent);
border-radius: var(--pf-radius-pill);
color: var(--pf-base-950);
font-size: var(--pf-text-xs);
font-weight: 600;
padding: 0.25rem 0.7rem;
}
.pf-plan__foot { margin-top: auto; padding-top: var(--pf-space-2); }
/* ==========================================================================
#STATS
========================================================================== */
/**
* Stat row
*
*
* -
* 99.98%
* Availability
*
*
*
* A rule on the left rather than a box around each figure: four bordered
* cards in a row read as navigation, four rules read as one set of numbers.
* Auto-fit means three stats and five stats both look deliberate.
*/
.pf-stats {
display: grid;
gap: var(--pf-gap);
grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
margin: 0;
}
.pf-stat { display: grid; gap: 0.15rem; border-inline-start: 2px solid var(--pf-border-strong); padding-inline-start: var(--pf-space-4); }
.pf-stat__value {
font-family: var(--pf-font-display);
font-size: var(--pf-text-3xl);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
}
.pf-stat__label { color: var(--pf-text-muted); font-size: var(--pf-text-sm); }
/* ==========================================================================
#TABLES
========================================================================== */
/**
* Table
*
*
*
* Header Row Value
*
*
* The wrapper is required: it is what makes a wide table scroll horizontally
* instead of squeezing columns into unreadable slivers on a phone. min-width
* on the table is what forces that scroll rather than allowing the squeeze.
*
* data-pf="yes" / "no" colours a cell without inventing a class per state,
* which keeps comparison tables from sprouting a dozen modifiers.
*
* Always use scope on header cells. It costs nothing and it is the difference
* between a screen reader announcing a table and reading a wall of numbers.
*/
.pf-table-wrap {
overflow-x: auto;
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius);
}
.pf-table { font-size: var(--pf-text-base); line-height: 1.55; min-width: 34rem; }
.pf-table th,
.pf-table td { padding: 0.85rem 1rem; text-align: start; vertical-align: top; }
.pf-table thead th {
background: var(--pf-base-900);
color: var(--pf-base-50);
font-family: var(--pf-font-body);
font-size: var(--pf-text-xs);
font-weight: 600;
white-space: nowrap;
}
.pf-table tbody tr + tr { border-top: 1px solid var(--pf-border); }
.pf-table tbody td { color: var(--pf-text-muted); }
.pf-table tbody th { font-weight: 500; }
.pf-table--zebra tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
/* Density, borders and interaction. --hover is for tables whose rows lead
somewhere; on a static table it promises a click that never happens. */
.pf-table--compact th,
.pf-table--compact td { padding: 0.5rem 0.7rem; font-size: var(--pf-text-xs); }
.pf-table--roomy th,
.pf-table--roomy td { padding: 1.1rem 1.25rem; }
.pf-table--bordered th,
.pf-table--bordered td { border: 1px solid var(--pf-border); }
.pf-table--hover tbody tr:hover { background: var(--pf-surface-raised); }
.pf-table--fixed { table-layout: fixed; }
/* Sticky header for long tables. The wrapper needs a max-height for this to
do anything - without a scroll container there is nothing to stick to. */
.pf-table-wrap--tall { max-height: 26rem; overflow: auto; }
.pf-table--sticky thead th {
position: sticky;
top: 0;
z-index: 1;
}
/**
* Stacking table
*
*
* Check Status
* api-gateway
* Healthy
*
*
*
*
* Below 620px each row becomes a card and each cell shows its column name
* from data-pf-label. The alternative is horizontal scrolling, which works
* but makes a six-column table genuinely tedious on a phone.
*
* Use it when rows are records to read. Keep the scrolling wrapper when the
* table is a grid to compare across - stacking destroys column alignment,
* which is the entire point of a comparison table.
*
* The header row is hidden with the same technique as .pf-visually-hidden
* rather than display:none, so the column names stay in the accessibility
* tree and the table is still announced as a table.
*/
@media (max-width: 620px) {
.pf-table--stack,
.pf-table--stack tbody,
.pf-table--stack tr,
.pf-table--stack td,
.pf-table--stack th { display: block; }
.pf-table--stack { min-width: 0; }
.pf-table--stack thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.pf-table--stack tbody tr {
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius);
margin-bottom: var(--pf-space-3);
padding: var(--pf-space-2) var(--pf-space-4);
}
.pf-table--stack tbody tr + tr { border-top: 1px solid var(--pf-border); }
.pf-table--stack tbody th,
.pf-table--stack tbody td {
display: flex;
justify-content: space-between;
gap: var(--pf-space-4);
padding-inline: 0;
text-align: end;
}
.pf-table--stack tbody th { text-align: end; }
.pf-table--stack tbody [data-pf-label]::before {
content: attr(data-pf-label);
color: var(--pf-text-muted);
font-size: var(--pf-text-xs);
font-weight: 500;
text-align: start;
padding-inline-end: var(--pf-space-3);
}
.pf-table--stack tbody td + td,
.pf-table--stack tbody th + td { border-top: 1px solid var(--pf-border); }
}
.pf-table caption {
caption-side: bottom;
color: var(--pf-text-muted);
font-size: var(--pf-text-xs);
padding-top: var(--pf-space-3);
text-align: start;
}
.pf-table td[data-pf="yes"] { color: var(--pf-accent); }
.pf-table td[data-pf="no"] { color: rgba(169, 188, 216, 0.55); }
/* ==========================================================================
#ALERTS AND QUOTES
========================================================================== */
/**
* Alert
*
*
* Careful
* What to do about it.
*
*
* Variants: --info --success --warn --danger
*
* Colour is carried by a left rule and a wash rather than a filled block, so
* an alert can sit inside prose without shouting. Nothing here conveys
* meaning by colour alone - the title does that - which is what keeps the
* component usable for colour-blind readers.
*/
.pf-alert {
display: grid;
gap: var(--pf-space-2);
background: var(--pf-surface);
border: 1px solid var(--pf-border);
border-inline-start: 3px solid var(--pf-accent);
border-radius: var(--pf-radius);
padding: var(--pf-space-4) var(--pf-space-5);
font-size: var(--pf-text-base);
}
.pf-alert__title { font-family: var(--pf-font-body); font-size: var(--pf-text-base); font-weight: 600; color: var(--pf-text); }
.pf-alert p { color: var(--pf-text-muted); line-height: 1.65; max-width: none; }
.pf-alert--info { border-left-color: var(--pf-base-600); }
.pf-alert--success { border-left-color: var(--pf-hue-1-deep); background: var(--pf-hue-1-wash); }
.pf-alert--warn { border-left-color: var(--pf-hue-2); background: var(--pf-hue-2-wash); }
.pf-alert--danger { border-left-color: #e08f8f; background: rgba(224, 143, 143, 0.1); }
.pf-quote {
border-inline-start: 2px solid var(--pf-accent-2);
padding-inline-start: var(--pf-space-5);
font-size: var(--pf-text-lg);
line-height: 1.5;
}
.pf-quote footer { color: var(--pf-text-muted); font-size: var(--pf-text-sm); margin-top: var(--pf-space-3); }
/* ==========================================================================
#CODE
========================================================================== */
/**
* Code block
*
*
*
* <div>
*
*
* Highlighting classes (.pf-tag, .pf-attr, .pf-str, .pf-comment) are applied
* by hand or by whatever highlighter you already run. The framework ships the
* four colours and no tokeniser, because shipping one would mean shipping
* JavaScript.
*/
.pf-code {
background: var(--pf-base-900);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius);
overflow: hidden;
}
.pf-code__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pf-space-3);
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid var(--pf-border);
color: var(--pf-text-muted);
font-family: var(--pf-font-mono);
font-size: var(--pf-text-xs);
padding: 0.5rem 0.9rem;
}
/**
* Copy button and sortable header
*
* Both elements are created by polyfish.js, not by you. They are styled here
* so the optional script never has to inject styles - a script that writes
* CSS is a script that fights your Content-Security-Policy.
*
* Without the script neither element exists, and nothing looks unfinished.
*/
.pf-code__copy {
background: var(--pf-surface-raised);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-sm);
color: var(--pf-text-muted);
cursor: pointer;
font-family: var(--pf-font-body);
font-size: var(--pf-text-xs);
padding: 0.2rem 0.6rem;
min-height: 1.75rem;
}
.pf-code__copy:hover { border-color: var(--pf-border-strong); color: var(--pf-text); }
.pf-th-sort {
display: inline-flex;
align-items: center;
gap: 0.4em;
background: none;
border: 0;
color: inherit;
cursor: pointer;
font: inherit;
padding: 0;
}
.pf-th-sort::after {
content: "";
width: 0.5em;
height: 0.5em;
background: currentColor;
opacity: 0.35;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
[aria-sort="ascending"] .pf-th-sort::after { opacity: 1; }
[aria-sort="descending"] .pf-th-sort::after { opacity: 1; transform: rotate(180deg); }
.pf-code pre {
margin: 0;
overflow-x: auto;
padding: var(--pf-space-4) var(--pf-space-5);
line-height: 1.7;
tab-size: 2;
}
.pf-code code { color: var(--pf-base-50); font-size: var(--pf-text-sm); }
.pf-code .pf-tag { color: var(--pf-accent); }
.pf-code .pf-attr { color: var(--pf-accent-2); }
.pf-code .pf-str { color: #d9e4ff; }
.pf-code .pf-comment { color: rgba(169, 188, 216, 0.65); }
/* ==========================================================================
#FORMS
========================================================================== */
/**
* Field
*
*
*
*
* Where the receipt goes.
*
*
* Every control needs a real