, so an
unqualified .gk-btn--sm would pad that wrapper and leave dead space around
the visible button. Block buttons are styled through .wp-block-button__link. */
a.gk-btn,
button.gk-btn,
.wp-block-button .wp-block-button__link,
.wp-block-button__link.wp-element-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-text);
font-weight: 700;
font-size: 16px;
line-height: 1;
padding: 17px 28px;
border: 1.5px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
text-decoration: none;
transition: transform .16s var(--ease-out), background .16s, box-shadow .16s, border-color .16s, color .16s;
}
a.gk-btn:active,
button.gk-btn:active,
.wp-block-button .wp-block-button__link:active {
transform: translateY(1px);
}
a.gk-btn--navy,
button.gk-btn--navy,
.wp-block-button:not(.is-style-ghost):not(.is-style-ondark) .wp-block-button__link {
background: var(--navy-800);
color: #fff;
border-color: var(--navy-800);
box-shadow: 0 1px 2px rgba(10, 26, 79, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
}
a.gk-btn--navy:hover,
button.gk-btn--navy:hover,
.wp-block-button:not(.is-style-ghost):not(.is-style-ondark) .wp-block-button__link:hover {
background: var(--navy-700);
border-color: var(--navy-700);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 10px 24px -10px rgba(10, 26, 79, .45);
text-decoration: underline;
text-underline-offset: 3px;
}
a.gk-btn--ghost,
button.gk-btn--ghost,
.wp-block-button.is-style-ghost .wp-block-button__link {
background: #fff;
color: var(--navy-800);
border-color: var(--border-strong);
box-shadow: none;
}
a.gk-btn--ghost:hover,
button.gk-btn--ghost:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
background: #fff;
color: var(--navy-800);
border-color: var(--navy-800);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
text-decoration: none;
}
a.gk-btn--ondark,
button.gk-btn--ondark,
.wp-block-button.is-style-ondark .wp-block-button__link {
background: #fff;
color: var(--navy-800);
border-color: #fff;
}
a.gk-btn--ondark:hover,
button.gk-btn--ondark:hover,
.wp-block-button.is-style-ondark .wp-block-button__link:hover {
background: var(--ice-100);
color: var(--navy-800);
border-color: var(--ice-100);
transform: translateY(-1px);
text-decoration: none;
}
a.gk-btn--sm,
button.gk-btn--sm {
padding: 13px 22px;
font-size: 14.5px;
}
a.gk-btn--block,
button.gk-btn--block {
width: 100%;
}
/* ---------- header / nav ---------- */
.gk-header {
position: sticky;
top: 0;
z-index: 60;
border-bottom: 1px solid var(--line);
transition: box-shadow .25s;
}
/* The frosted pane lives on a pseudo-element, not on .gk-header itself:
backdrop-filter makes an element a containing block for position:fixed
descendants, which would trap core/navigation's mobile overlay inside the
82px header instead of letting it cover the viewport. */
.gk-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgba(255, 255, 255, .9);
-webkit-backdrop-filter: saturate(150%) blur(12px);
backdrop-filter: saturate(150%) blur(12px);
}
.gk-header.scrolled {
box-shadow: 0 6px 24px -12px rgba(10, 26, 79, .18);
}
/* Logged-in only: WP's admin bar is fixed at 32px from 783px up, so a header
stuck to top:0 scrolls underneath it. Below 783px the bar is absolute and
scrolls away, so the default offset is already right there. */
@media screen and (min-width: 783px) {
body.admin-bar .gk-header {
top: 32px;
}
}
/* The header is a core/group with a flex layout, so WP already emits
display:flex + align-items:center. These rules pin the row height and
neutralise the default block margins (figure, nav, ul) that would otherwise
push the logo, menu and actions off the shared centre line. */
.gk-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
height: var(--gk-nav-h);
}
.gk-header__inner > * {
margin-block: 0;
align-self: center;
}
.gk-header__logo {
margin: 0;
display: flex;
align-items: center;
}
.gk-header__logo a,
.gk-header__logo img {
display: block;
}
.gk-header__logo img {
height: 38px;
width: auto;
max-width: none;
}
.gk-header__logo a:hover {
opacity: 1;
text-decoration: none;
}
/* core/navigation renders
› container div › ul › li › a. */
.gk-nav {
font-weight: 600;
font-size: 15px;
color: var(--navy-800);
white-space: nowrap;
}
.gk-nav .wp-block-navigation__container {
align-items: center;
gap: 30px;
margin: 0;
padding: 0;
}
.gk-nav .wp-block-navigation-item {
margin: 0;
}
/* Nav + phone links: no underline ever — a 2px ice rule slides in from the left.
The rule is anchored to the bottom of the link box, so the two kinds of link
have to agree on how tall that box is or their rules sit on different lines.
Left to themselves they do not: a nav item is as tall as its 15px text at the
theme's line-height, while the phone link is as tall as its 16px handset
glyph, which overrides the 14.5px text. That is a 3.6px disagreement, and
because both are centred on the same flex axis it shows up as the phone rule
riding high. An explicit line-height settles it — it clears the glyph, so
both boxes come out at 6 + 22 + 6. */
.gk-nav .wp-block-navigation-item__content,
.gk-header__tel a {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 0;
line-height: 22px;
color: var(--navy-800);
opacity: .82;
text-decoration: none;
transition: opacity .14s;
}
.gk-nav .wp-block-navigation-item__content::after,
.gk-header__tel a::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 0;
height: 2px;
background: var(--ice-600);
transition: right .22s var(--ease-out);
}
.gk-nav .wp-block-navigation-item__content:hover,
.gk-nav .wp-block-navigation-item__content:focus,
.gk-header__tel a:hover {
opacity: 1;
color: var(--navy-800);
text-decoration: none;
}
.gk-nav .wp-block-navigation-item__content:hover::after,
.gk-nav .wp-block-navigation-item__content:focus-visible::after,
.gk-header__tel a:hover::after {
right: 0;
}
/* Phone number: a plain paragraph so it stays editable; the handset glyph is
a CSS mask so no inline SVG (and no HTML block) is needed. */
.gk-header__tel {
margin: 0;
font-family: var(--font-mono);
font-size: 14.5px;
font-weight: 700;
line-height: 1;
}
.gk-header__tel a::before {
content: "";
flex: none;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: var(--gk-phone-mask) center / contain no-repeat;
mask: var(--gk-phone-mask) center / contain no-repeat;
}
.gk-header__actions {
display: flex;
align-items: center;
gap: 20px;
}
.gk-header__actions > * {
margin-block: 0;
}
.gk-header__actions .wp-block-buttons {
margin: 0;
}
.wp-block-button.gk-btn--sm .wp-block-button__link {
padding: 13px 22px;
font-size: 14.5px;
}
/* core/navigation's overlay is only wanted at the design's own breakpoint,
not at WP's hardcoded 600px — hide both toggles and re-enable them below. */
.gk-header .wp-block-navigation__responsive-container-open,
.gk-header .wp-block-navigation__responsive-container-close {
display: none;
padding: 0;
cursor: pointer;
}
/* The panel's own CTA is a navigation-link so it stays a native block; it only
exists for the mobile disclosure, where it renders as a full-width button. */
.gk-nav .gk-nav__cta {
display: none;
}
/* Scrim behind the open mobile panel. The design puts it at z-index 55, one
below the sticky header, so the nav row stays crisp above it — which is
exactly what a pseudo-element on gives us without extra markup. */
body:has(.gk-header .wp-block-navigation__responsive-container.is-menu-open)::before {
content: "";
position: fixed;
inset: 0;
z-index: 55;
background: rgba(16, 28, 70, .16);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
/* ---------- hero ---------- */
/* Both pages run the same hero now — the pool page only releases the H1's
nowrap, since "En pool. Byggd för din tomt." is meant to wrap. */
.gk-hero,
.gk-pool-hero {
position: relative;
padding: clamp(48px, 9vw, 112px) 0 clamp(56px, 10vw, 124px);
background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
overflow: hidden;
}
.gk-hero__grid {
display: grid;
grid-template-columns: 1.02fr .98fr;
gap: clamp(44px, 6vw, 84px);
align-items: center;
}
.gk-hero h1,
.gk-pool-hero h1 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -.02em;
line-height: 1;
font-size: clamp(31px, 4.4vw, 58px);
color: var(--navy-800);
margin: clamp(16px, 2.4vw, 26px) 0 0;
white-space: nowrap;
}
/* The pool H1 is broken by hand into exactly three lines, so it must be free to
keep them. The last line holds together on non-breaking spaces rather than a
nowrap span — plain text survives a round trip through the block editor,
inline markup inside a heading does not reliably. */
.gk-pool-hero h1 {
white-space: normal;
}
.gk-hero .gk-lead,
.gk-pool-hero .gk-lead {
font-size: clamp(16.5px, 1.5vw, 19px);
max-width: 470px;
margin: clamp(18px, 2.4vw, 28px) 0 0;
}
.gk-hero .wp-block-buttons,
.gk-pool-hero .wp-block-buttons {
gap: 14px;
margin-top: clamp(28px, 3.4vw, 40px);
}
.gk-hero .gk-ticks {
margin-top: clamp(34px, 4.4vw, 54px);
gap: clamp(11px, 1.2vw, 14px);
}
.gk-hero__media {
position: relative;
}
.gk-hero__frame {
position: relative;
aspect-ratio: 4 / 3.9;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 40px 90px -32px rgba(10, 26, 79, .4), 0 4px 12px -4px rgba(10, 26, 79, .12);
}
.gk-hero__frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* The design dropped both the inner light-line overlay and the floating
"Hembesök & offert" note — the photograph carries the frame on its own. */
/* ---------- trust strip ---------- */
.gk-trust {
background: #fff;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.gk-trust__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.gk-trust__cell {
display: flex;
align-items: center;
gap: 16px;
padding: clamp(24px, 3vw, 36px);
}
.gk-trust__cell + .gk-trust__cell {
border-left: 1px solid var(--line);
}
/* The icon tile is drawn as a pseudo-element on the cell that owns it, so the
templates can stay pure core blocks — an inline would need a core/html
block, which shows as raw markup in the block editor. .gk-icon-tile is kept
for the legacy patterns in patterns/ that still ship their own markup. */
.gk-icon-tile,
.gk-trust__cell::before,
.gk-step .gk-step__label::before,
.gk-val .gk-val__label::before {
content: "";
width: 44px;
height: 44px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--gk-icon) center / 21px 21px no-repeat var(--ice-50);
border: 1px solid var(--ice-100);
color: var(--navy-800);
}
.gk-icon--pin { --gk-icon: var(--gk-icon-pin); }
.gk-icon--card { --gk-icon: var(--gk-icon-card); }
.gk-icon--shield { --gk-icon: var(--gk-icon-shield); }
.gk-icon--gem { --gk-icon: var(--gk-icon-gem); }
.gk-icon--check { --gk-icon: var(--gk-icon-check); }
.gk-icon--home { --gk-icon: var(--gk-icon-home); }
.gk-icon--doc { --gk-icon: var(--gk-icon-doc); }
.gk-icon--tool { --gk-icon: var(--gk-icon-tool); }
.gk-trust__cell .t {
font-weight: 700;
font-size: 15px;
color: var(--navy-800);
}
.gk-trust__cell .s {
font-size: 13.5px;
color: var(--steel-600);
margin-top: 2px;
}
/* ---------- section lead ---------- */
.gk-seclead h2 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -.015em;
line-height: 1.04;
font-size: clamp(28px, 3.4vw, 42px);
color: var(--navy-800);
margin: clamp(14px, 1.8vw, 20px) 0 0;
}
.gk-seclead p {
margin: clamp(15px, 1.9vw, 22px) 0 0;
}
/* ---------- process steps ---------- */
.gk-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 2.6vw, 32px);
margin-top: clamp(48px, 6vw, 72px);
}
.gk-step {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(26px, 3vw, 38px) clamp(24px, 2.8vw, 34px) clamp(28px, 3.2vw, 40px);
box-shadow: var(--shadow-sm);
transition: transform .22s var(--ease-out), box-shadow .22s;
}
.gk-step:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
/* Scoped through .gk-step rather than written flat: .gk-step p below is (0,1,1)
and would otherwise win the tie and hand the label the body-copy size. */
.gk-step .gk-step__label {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
line-height: 1.55;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ice-600);
margin: 0;
}
/* The label row leads with the same 44px glyph tile the trust strip and the
pool value cards use — it replaced the "01/02/03" counter the earlier pass
drew here, so the three sections now share one card vocabulary. The tile is a
pseudo-element (see .gk-icon-tile above), which keeps the label plain text in
the editor; --gk-icon is inherited from the .gk-icon--* class on the card. */
.gk-step h3 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
font-size: 20px;
line-height: 1.15;
color: var(--navy-800);
margin: 18px 0 12px;
}
.gk-step p {
color: var(--steel-600);
font-size: 15.5px;
line-height: 1.7;
margin: 0;
text-wrap: pretty;
}
/* ---------- reference grid ---------- */
.gk-jobs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 2.4vw, 28px);
margin-top: clamp(48px, 6vw, 72px);
}
.gk-job {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .22s var(--ease-out), box-shadow .22s;
}
.gk-job:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.gk-job__media,
.gk-job figure.wp-block-image {
margin: 0;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.gk-job__media img,
.gk-job figure.wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s var(--ease-out);
}
.gk-job:hover img {
transform: scale(1.04);
}
/* The caption used to be a solid band below the photo, which cost every card a
fixed strip of chrome and made the grid read as six boxes. It now floats on
the image as a frosted plate, so the photographs run edge to edge and the
cards read as pictures first. */
.gk-job__meta {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 18px;
background: rgba(255, 255, 255, .92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .6);
border-radius: 12px;
box-shadow: 0 12px 28px -12px rgba(10, 26, 79, .35);
}
/* The plate is only as wide as the card, so the longest street names have to be
allowed to truncate rather than push the place name off the right edge. */
.gk-job__meta .t {
font-weight: 700;
font-size: 14px;
color: var(--navy-800);
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gk-job__meta .s {
font-family: var(--font-mono);
font-size: 11px;
color: var(--steel-500);
margin-top: 3px;
}
.gk-jobs-foot {
margin: clamp(30px, 3.6vw, 44px) 0 0;
font-size: 15.5px;
color: var(--steel-600);
text-align: center;
}
/* ---------- partner row ---------- */
.gk-partners {
background: #fff;
border-top: 1px solid var(--line);
padding: clamp(38px, 5vw, 56px) 0;
}
.gk-partners__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
/* nowrap: the three marks read as one row or not at all — below 620px the
label moves above them and the row centres instead of breaking. */
.gk-partners__logos {
display: flex;
align-items: center;
gap: clamp(20px, 4vw, 56px);
flex-wrap: nowrap;
}
.gk-partners__logos img {
height: clamp(22px, 3.2vw, 34px);
width: auto;
display: block;
opacity: .9;
transition: opacity .2s;
}
/* The logos are links now; leaving the anchor inline would hang a 7px descender
gap under the row and push the whole band out of line with the design. */
.gk-partners__logos a {
display: block;
}
.gk-partners__logos a:hover img {
opacity: 1;
}
.gk-partners .gk-eyebrow,
.gk-partners .is-style-eyebrow {
letter-spacing: .16em;
}
/* ---------- booking ---------- */
.gk-boka {
background: var(--paper);
border-top: 1px solid var(--line);
padding: clamp(72px, 12vw, 150px) 0;
}
.gk-boka__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(48px, 7vw, 80px);
align-items: center;
}
.gk-boka h2 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -.015em;
line-height: 1.04;
font-size: clamp(28px, 3.4vw, 42px);
color: var(--navy-800);
margin: clamp(14px, 1.8vw, 20px) 0 0;
}
.gk-boka__intro {
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.7;
color: var(--steel-600);
margin: clamp(18px, 2.2vw, 26px) 0 0;
max-width: 440px;
text-wrap: pretty;
}
.gk-boka .gk-ticks {
margin-top: clamp(26px, 3vw, 36px);
gap: 14px;
}
.gk-person {
margin-top: clamp(34px, 4vw, 48px);
display: flex;
align-items: center;
gap: 16px;
}
.gk-person__photo {
width: 64px;
height: 64px;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
margin: 0;
}
.gk-person__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gk-person__name {
font-weight: 700;
font-size: 15.5px;
color: var(--navy-800);
}
.gk-person__role {
font-size: 13.5px;
color: var(--steel-600);
margin-top: 2px;
}
.gk-boka__callout {
margin-top: 40px;
font-size: 15px;
color: var(--steel-600);
}
/* ---------- booking form ---------- */
.gk-form {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(24px, 3.6vw, 44px);
box-shadow: var(--shadow-lg);
}
.gk-form label {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--navy-800);
margin: 0 0 7px;
}
.gk-form input,
.gk-form select,
.gk-form textarea {
width: 100%;
box-sizing: border-box;
font-family: var(--font-text);
font-size: 15px;
color: var(--ink);
background: #fff;
padding: 13px 14px;
/* Explicit, so the select (whose native line-height differs per platform)
ends up exactly as tall as the inputs beside it. */
line-height: 1.4;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
outline: none;
transition: border-color .13s, box-shadow .13s;
}
.gk-form textarea {
resize: vertical;
min-height: 84px;
}
/* Drop the native control art (which sizes and colours itself per platform)
and draw our own chevron, so the select matches the text fields exactly. */
.gk-form select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
padding-right: 42px;
background-image: var(--gk-icon-chevron);
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 17px 17px;
}
/* Firefox keeps a focus ring on the option text; ours lives on the box. */
.gk-form select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 var(--ink);
}
.gk-form select::-ms-expand {
display: none;
}
.gk-form input::placeholder,
.gk-form textarea::placeholder {
color: var(--steel-400);
}
.gk-form input:hover,
.gk-form select:hover,
.gk-form textarea:hover {
border-color: var(--border-strong);
}
.gk-form input:focus,
.gk-form select:focus,
.gk-form textarea:focus {
border-color: var(--ice-600);
box-shadow: var(--shadow-focus);
}
.gk-form__field {
margin-bottom: 20px;
}
.gk-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.gk-form__fineprint {
font-family: var(--font-mono);
font-size: 12px;
color: var(--steel-600);
text-align: center;
margin: 14px 0 0;
}
.gk-form__error {
margin: 0 0 18px;
font-size: 14px;
color: var(--danger-600);
}
/* GDPR consent. Checkbox and label sit on a shared baseline rather than
centred, so the box lines up with the first line of a label that wraps. */
.gk-form__consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 4px 0 18px;
}
.gk-form__consent input[type="checkbox"] {
width: 17px;
height: 17px;
flex: 0 0 auto;
margin: 2px 0 0;
accent-color: var(--navy-800);
}
.gk-form__consent label {
font-size: 13px;
line-height: 1.5;
color: var(--steel-600);
}
.gk-form__consent a {
color: var(--navy-800);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Honeypot — off-screen, never focusable by keyboard. */
.gk-form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.gk-form[data-state="sent"] .gk-form__body {
display: none;
}
.gk-form__thanks {
display: none;
text-align: center;
padding: 38px 10px;
}
.gk-form[data-state="sent"] .gk-form__thanks {
display: block;
}
.gk-form__thanks .gk-icon-check {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--success-100);
color: var(--success-600);
display: grid;
place-items: center;
margin: 0 auto 18px;
animation: gk-pop .45s var(--ease-out);
}
.gk-form__thanks h3 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
font-size: 24px;
color: var(--navy-800);
}
.gk-form__thanks p {
color: var(--steel-600);
line-height: 1.55;
margin: 10px 0 0;
}
@keyframes gk-pop {
0% { transform: scale(.5); opacity: 0; }
60% { transform: scale(1.08); }
100% { transform: scale(1); opacity: 1; }
}
/* ---------- pool page ---------- */
/* The pool hero is the landing hero — see the shared rules above. */
/* Section rhythm modifiers. The pool page runs three sections back to back
(cards → gallery → Niveko) that read as one movement, so only the first
carries top padding and the gap between the cards and the gallery is
deliberately tighter than the standard section rhythm. */
.gk-pool-intro {
padding: clamp(40px, 8vw, 100px) 0 clamp(32px, 5vw, 64px);
}
.gk-section--flush-top {
padding-top: 0;
}
.gk-vals {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 2.6vw, 32px);
margin-top: clamp(48px, 6vw, 72px);
}
.gk-val {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(26px, 3vw, 38px) clamp(24px, 2.8vw, 34px) clamp(28px, 3.2vw, 40px);
box-shadow: var(--shadow-sm);
transition: transform .22s var(--ease-out), box-shadow .22s;
}
.gk-val:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
/* The tile now leads a label row (Design / Kvalitet / Service) instead of
floating alone above the heading — the same label + glyph line the process
steps use, so the two pages' cards read as one component. */
.gk-val .gk-val__label {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
line-height: 1.55;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ice-600);
margin: 0;
}
.gk-val .gk-icon-tile,
.gk-val .gk-val__label::before {
background-size: 22px 22px;
}
/* :root prefix because the label carries the tile as a pseudo-element, which
makes the h3 the card's second DOM child — and global styles would otherwise
hand it the blockGap via `:root :where(.is-layout-flow) > *` at (0,2,0). */
:root .gk-val h3 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
font-size: 20px;
line-height: 1.15;
color: var(--navy-800);
margin: 18px 0 12px;
}
.gk-val p {
color: var(--steel-600);
font-size: 15.5px;
line-height: 1.7;
margin: 0;
text-wrap: pretty;
}
/* The gallery sits in its own section directly under the value cards, and the
gap between the two is owned by .gk-pool-intro's bottom padding — a margin
here would stack on top of it and break the deliberate tight coupling.
:root prefix: the gallery is the only child of its wrapper, so global styles
would otherwise reach it via `:root :where(.is-layout-flow) > :first-child`. */
:root .gk-poolgal {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(24px, 2.4vw, 28px);
margin-top: 0;
}
.gk-poolgal figure {
margin: 0;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
transition: transform .22s var(--ease-out), box-shadow .22s;
}
.gk-poolgal figure:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.gk-poolgal img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gk-poolgal .is-tall {
grid-row: span 2;
min-height: 520px;
}
.gk-poolgal .is-sq {
aspect-ratio: 4 / 3;
}
.gk-niveko {
background: var(--navy-800);
color: #fff;
border-radius: var(--radius-xl);
padding: clamp(44px, 6.5vw, 80px) clamp(28px, 7vw, 84px);
}
.gk-niveko__grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
min-width: 0;
gap: clamp(40px, 6vw, 70px);
align-items: center;
}
.gk-niveko h2 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
font-size: clamp(26px, 3vw, 38px);
letter-spacing: -.015em;
line-height: 1.06;
color: #fff;
margin: clamp(14px, 1.8vw, 20px) 0 0;
}
/* The eyebrow is a paragraph here (core/paragraph with the block style), so the
body-copy rules have to step around it or they'd win on specificity. */
.gk-niveko p:not(.is-style-eyebrow) {
color: var(--navy-100);
font-size: 16.5px;
line-height: 1.75;
margin: clamp(18px, 2vw, 24px) 0 0;
text-wrap: pretty;
}
.gk-niveko p:not(.is-style-eyebrow) + p {
margin-top: 18px;
}
.gk-niveko .gk-eyebrow,
.gk-niveko .is-style-eyebrow {
color: var(--ice-300);
}
/* Partner requirement: the Niveko mark has to sit on white. */
.gk-niveko__logobox {
background: #fff;
border-radius: var(--radius-lg);
padding: clamp(24px, 3vw, 36px);
display: grid;
place-items: center;
margin: 0;
min-width: 0;
}
/* Fluid rather than a fixed 90px height: the mark is wordmark-wide, so pinning
its height overflowed the white box once the column narrowed. Capped at 340px
so it still reads as a partner credit and not a banner on a wide screen. */
.gk-niveko__logobox img {
width: 100%;
max-width: 340px;
height: auto;
display: block;
}
/* The CTA band closes the page rather than running into the footer, so it is
fenced on both sides and floats clear of the footer below it. */
.gk-pool-cta {
background: var(--paper);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: clamp(64px, 11vw, 130px);
text-align: center;
}
.gk-pool-cta h2 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -.015em;
line-height: 1.04;
font-size: clamp(28px, 3.4vw, 42px);
color: var(--navy-800);
margin: clamp(14px, 1.8vw, 20px) 0 0;
}
.gk-pool-cta p:not(.is-style-eyebrow) {
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.7;
color: var(--steel-600);
max-width: 520px;
margin: clamp(15px, 1.9vw, 22px) auto 0;
text-wrap: pretty;
}
.gk-pool-cta .wp-block-buttons {
justify-content: center;
gap: 14px;
margin-top: clamp(26px, 3.2vw, 36px);
}
/* ---------- editorial pages (page.html) ----------
The prose column is what every non-designed page falls back to: legal text,
integritetspolicy, anything the client writes later. */
/* Deliberately quieter than the marketing heroes. A full-bleed navy slab
reads as a campaign; these are reference pages someone opens to look
something up, so the header is a masthead over the text, not a stage. */
.gk-page-hero {
background: var(--paper);
color: var(--navy-900);
/* Optically balanced, not numerically. The title is all caps, so the ink
starts ~6px below the top of its line box (Archivo's ascender clears the
cap height) and the baseline sits ~8px above the bottom. The top padding
carries the extra 2px so the band looks even. */
padding: clamp(30px, 3.7vw, 48px) 0 clamp(28px, 3.5vw, 46px);
border-bottom: 1px solid var(--line);
}
/* Same measure as the body below, so the title's left edge lines up with the
text rather than with the wider marketing wrap. */
.gk-page-hero .gk-wrap {
--gk-wrap-max: 840px;
}
.gk-page-hero .wp-block-post-title,
.gk-page-hero h1 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -.02em;
line-height: 1.06;
font-size: clamp(28px, 3.8vw, 42px);
color: var(--navy-800);
max-width: 18ch;
margin: 0;
}
.gk-page-hero .gk-eyebrow,
.gk-page-hero .is-style-eyebrow {
color: var(--steel-500);
margin-bottom: 14px;
}
/* Narrower measure than the site wrap — long-form text wants ~70 characters,
not the 1200px the marketing sections use. */
.gk-page__body {
--gk-wrap-max: 840px;
padding-top: clamp(36px, 4.6vw, 56px);
padding-bottom: clamp(64px, 9vw, 116px);
}
/* post-content's flow rule is (0,2,0), so the prose rhythm has to match that
specificity to own the spacing. */
:root .gk-prose > * {
margin: 0;
}
:root .gk-prose > * + * {
margin-top: 20px;
}
.gk-prose p,
.gk-prose li {
font-size: 16.5px;
line-height: 1.75;
color: var(--steel-600);
text-wrap: pretty;
}
.gk-prose strong {
color: var(--navy-800);
font-weight: 700;
}
.gk-prose a:not(.wp-block-button__link) {
color: var(--navy-800);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.gk-prose a:not(.wp-block-button__link):hover {
color: var(--ice-700);
}
.gk-prose > .is-style-lede {
max-width: none;
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.65;
color: var(--ink);
}
/* A hairline above each section heading does the sectioning work that a legal
page needs — no numbering, no cards, just a clear break. */
:root .gk-prose h2 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -.01em;
line-height: 1.1;
font-size: clamp(19px, 2vw, 23px);
color: var(--navy-800);
margin-top: clamp(44px, 5vw, 64px);
padding-top: clamp(28px, 3.2vw, 38px);
border-top: 1px solid var(--line);
}
:root .gk-prose h2 + * {
margin-top: 16px;
}
.gk-prose ul {
list-style: none;
padding-left: 0;
display: grid;
gap: 10px;
}
.gk-prose ul li {
position: relative;
padding-left: 26px;
}
.gk-prose ul li::before {
content: "";
position: absolute;
left: 2px;
top: .72em;
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--ice-300);
}
.gk-prose .gk-prose__note {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .04em;
color: var(--steel-500);
margin-top: clamp(44px, 5vw, 64px);
padding-top: 22px;
border-top: 1px solid var(--line);
}
/* ---------- 404 ----------
Reuses the page masthead so a dead link still lands on something that reads
as the site. Nothing here holds the page open — the sticky-footer rule on
.wp-site-blocks does that for every short page. */
.gk-404 > .wp-block-buttons {
margin-top: clamp(24px, 3vw, 32px);
}
/* Same hairline-above-a-section idea the prose pages use, so the secondary
links read as an afterthought rather than a second call to action. */
.gk-404__more {
margin-top: clamp(44px, 5vw, 64px);
padding-top: clamp(22px, 2.4vw, 28px);
border-top: 1px solid var(--line);
}
.gk-404__links {
list-style: none;
padding-left: 0;
margin: 14px 0 0;
display: flex;
flex-wrap: wrap;
gap: 10px clamp(20px, 3vw, 34px);
}
.gk-404__links a {
font-weight: 700;
color: var(--navy-800);
text-decoration: none;
text-underline-offset: 3px;
}
.gk-404__links a:hover {
text-decoration: underline;
}
/* ---------- footer ---------- */
.gk-footer {
background: var(--navy-900);
color: var(--navy-200);
}
.gk-footer a {
color: inherit;
opacity: .85;
text-decoration: none;
transition: opacity .14s, color .14s;
}
.gk-footer a:hover {
opacity: 1;
color: #fff;
text-decoration: none;
}
.gk-footer .gk-eyebrow,
.gk-footer .is-style-eyebrow {
color: var(--ice-300);
}
/* Column band — core/columns, so the sizing lives in each column's flex-basis
(1.4fr / 1fr → 58.33% / 41.67%) and we only own the rhythm. */
.gk-footer__top.wp-block-columns {
gap: clamp(32px, 4vw, 48px);
padding: clamp(56px, 8vw, 80px) 0 clamp(40px, 6vw, 56px);
margin-bottom: 0;
align-items: flex-start;
}
.gk-footer__logo {
margin: 0;
}
/* The logo sits in a link, so the .gk-footer a fade would dim it to 85% —
the mark is meant to read as solid white. */
.gk-footer__logo a {
opacity: 1;
}
.gk-footer__logo img {
height: 46px;
width: auto;
max-width: none;
display: block;
}
.gk-footer__tagline {
max-width: 250px;
margin: 18px 0 0;
font-size: 14px;
line-height: 1.6;
}
/* core/social-links in the "logos only" style, re-boxed to the design's
rounded translucent squares. The extra class selectors are there purely to
out-specify WP's own is-style-logos-only rules. */
.gk-footer__social.wp-block-social-links {
gap: 14px;
margin: 24px 0 0;
padding-left: 0;
}
.gk-footer__social.wp-block-social-links.is-style-logos-only .wp-block-social-link {
width: 40px;
height: 40px;
/* The base border-box rule keys off a gk- class, which core's social link
doesn't carry — without this the 1px border pushes the tile to 42px. */
box-sizing: border-box;
margin: 0;
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .14);
color: #fff;
}
.gk-footer__social.wp-block-social-links.is-style-logos-only .wp-block-social-link:hover {
background: rgba(255, 255, 255, .16);
transform: none;
}
.gk-footer__social .wp-block-social-link a {
padding: 0;
opacity: 1;
color: inherit;
}
.gk-footer__social.wp-block-social-links.is-style-logos-only .wp-block-social-link svg {
width: 18px;
height: 18px;
}
.gk-footer__list.wp-block-list {
margin: 16px 0 0;
padding-left: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 13px;
font-size: 14px;
}
.gk-footer__list.wp-block-list li {
margin: 0;
}
.gk-footer__bottom {
border-top: 1px solid rgba(255, 255, 255, .1);
padding: 20px 0;
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 12.5px;
}
.gk-footer__bottom p {
margin: 0;
font-size: inherit;
}
/* Right-hand cluster. The cross-page "Pooler" link that used to sit here is
gone — the nav already carries it, and the colophon reads cleaner as one
line. The group stays as the slot any future legal links would share. */
.gk-footer__legal {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
/* ---------- scroll reveal ---------- */
.gk-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
transition-delay: var(--gk-delay, 0s);
}
.gk-reveal.is-in {
opacity: 1;
transform: none;
}
/* Stagger cards across a row. Kept in CSS rather than inline `--gk-delay`
styles so the block editor doesn't flag the template markup as invalid. */
.gk-steps > .gk-reveal:nth-child(3n + 2),
.gk-jobs > .gk-reveal:nth-child(3n + 2),
.gk-vals > .gk-reveal:nth-child(3n + 2),
.gk-poolgal > .gk-reveal:nth-child(3n + 2) {
--gk-delay: .1s;
}
.gk-steps > .gk-reveal:nth-child(3n + 3),
.gk-jobs > .gk-reveal:nth-child(3n + 3),
.gk-vals > .gk-reveal:nth-child(3n + 3),
.gk-poolgal > .gk-reveal:nth-child(3n + 3) {
--gk-delay: .2s;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.gk-reveal {
opacity: 1;
transform: none;
transition: none;
}
.gk-step,
.gk-job,
.gk-job img,
.gk-val,
.gk-poolgal figure,
a.gk-btn,
button.gk-btn,
.wp-block-button .wp-block-button__link {
transition: none;
}
}
/* ==========================================================================
Core-block plumbing — WP's own block CSS fights the layout above.
========================================================================== */
/* Groups used purely as layout containers must not inherit WP's flow margins. */
.gk-hero__grid > *,
.gk-boka__grid > *,
.gk-niveko__grid > *,
.gk-trust__grid > *,
.gk-steps > *,
.gk-jobs > *,
.gk-vals > *,
.gk-poolgal > *,
.gk-trust__cell > *,
.gk-partners__inner > *,
.gk-partners__logos > *,
.gk-person > * {
margin-block: 0;
}
/* core/image wraps its , and core's own `.wp-block-image img`
rules tie on specificity with the component rules above. Doubling the class
settles it in this stylesheet's favour wherever the frame owns the sizing. */
.gk-person__photo.wp-block-image img,
.gk-partners__logos .wp-block-image img {
max-width: none;
}
.gk-person__photo.wp-block-image img {
width: 100%;
height: 100%;
}
.gk-niveko__logobox.wp-block-image img {
width: 100%;
max-width: 340px;
height: auto;
}
.gk-partners__logos .wp-block-image img {
width: auto;
height: clamp(22px, 3.2vw, 34px);
}
/* With blockGap at 0 the flex-layout blocks lose their gap too. Buttons are the
only one WP lays out for us, so give the row the design's 14px back. */
.wp-block-buttons {
gap: 14px;
margin: 0;
}
/* Core's block library ships flow margins of its own that theme.json can't
reach. Every one of these is positioned by this stylesheet instead. */
.wp-block-columns {
margin-bottom: 0;
}
figure.wp-block-image {
margin: 0;
}
/* core/image inside our fixed-ratio frames must fill them. */
.gk-hero__frame .wp-block-image {
margin: 0;
height: 100%;
width: 100%;
}
.gk-hero__frame .wp-block-image img {
height: 100%;
}
/* The gallery figures take their height from the grid row (.is-tall spans two,
.is-sq is aspect-ratio'd), so they must not be forced to 100% — only the
images inside them. Core's `.wp-block-image img { height: auto }` ties with
`.gk-poolgal img` on specificity, hence the doubled class. */
.gk-poolgal .wp-block-image {
margin: 0;
width: 100%;
/* The base border-box rule keys off a gk- class, which core/image's figure
doesn't carry — without this its 1px border lands outside the grid track. */
box-sizing: border-box;
}
.gk-poolgal .wp-block-image img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
/* Global styles emit `:root :where(.is-layout-flow) > * { margin-block-start }`
at specificity (0,1,0). On the front end this stylesheet is printed after
them, so a single-class component rule wins the tie. Inside the editor canvas
the order is reversed — the theme sheet is injected before global styles — and
every (0,1,0) top margin below silently collapsed to the blockGap value.
Restating them with a :root prefix takes them to (0,2,0), which wins in both
places. Values are identical to the originals; this only settles the tie.
Component rules that already carry a type selector are (0,1,1) and are fine. */
:root .gk-steps,
:root .gk-jobs,
:root .gk-vals {
margin-top: clamp(48px, 6vw, 72px);
}
:root .gk-person {
margin-top: clamp(34px, 4vw, 48px);
}
:root .gk-jobs-foot {
margin-top: clamp(30px, 3.6vw, 44px);
}
:root .gk-boka__callout {
margin-top: clamp(28px, 3.4vw, 40px);
}
:root .gk-boka__intro {
margin-top: clamp(18px, 2.2vw, 26px);
}
:root .gk-footer__tagline {
margin-top: 18px;
}
:root .gk-footer__list.wp-block-list {
margin-top: 16px;
}
:root .gk-form__fineprint {
margin-top: 14px;
}
:root .gk-person__role {
margin-top: 2px;
}
/* Same story from the other end: the pool CTA is the last block inside ,
and global styles zero a flow layout's last child with
`:root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }`. */
:root .gk-pool-cta {
margin-bottom: clamp(64px, 11vw, 130px);
}
/* Eyebrow / lede paragraph styles need to beat theme.json's paragraph base. */
p.is-style-eyebrow {
font-family: var(--font-mono);
font-size: clamp(10.5px, 1.3vw, 12px);
font-weight: 700;
letter-spacing: clamp(.1em, .45vw, .18em);
text-transform: uppercase;
color: var(--ice-700);
}
/* Lists rendered via core/list keep the tick treatment. */
ul.gk-ticks {
padding-left: 0;
list-style: none;
}
/* Root padding is 0 so the landing sections can bleed edge-to-edge and let
.gk-wrap own the gutter. Templates that just drop constrained content into
(page, index, 404) need that gutter put back. */
main:not(:has(> .alignfull)) {
padding-inline: clamp(22px, 5vw, 40px);
}
/* The nav template part wraps everything in an extra empty group. */
.gk-header > .wp-block-group:empty {
display: none;
}
/* ---------- responsive ----------
Fluid first: the clamp()ed paddings, gaps and type sizes above do most of the
work on their own. These four breakpoints only handle what a clamp can't —
grids collapsing, the nav folding into a disclosure, and the two cuts of
content the design makes on small screens. */
@media (max-width: 1080px) {
.gk-jobs {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 880px) {
.gk-hero__grid,
.gk-boka__grid,
.gk-niveko__grid {
grid-template-columns: 1fr;
gap: 56px;
}
/* Stacked, the hero's copy sits above the photograph rather than beside it,
and a left-ragged column under a full-width image reads as an accident.
Centring the whole block — and letting the H1 grow, since it now has the
full width instead of half of it — makes the stack look intended. */
.gk-hero__grid {
gap: 40px;
}
.gk-hero__grid > .wp-block-group:first-child {
text-align: center;
}
.gk-hero h1,
.gk-pool-hero h1 {
font-size: clamp(36px, 7vw, 52px);
}
.gk-hero .gk-lead,
.gk-pool-hero .gk-lead {
margin-left: auto;
margin-right: auto;
}
.gk-hero .wp-block-buttons,
.gk-pool-hero .wp-block-buttons {
justify-content: center;
}
/* The tick list centres as a block but keeps its rows left-aligned — centred
ticks would leave every glyph on a different x. */
.gk-hero .gk-ticks {
width: fit-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.gk-boka__grid {
gap: 36px;
}
.gk-steps,
.gk-vals,
.gk-trust__grid {
grid-template-columns: 1fr;
}
/* :root prefix to match the base rule, which needs (0,2,0) to beat global
styles — without it this never applied and the gallery stayed two-up. */
:root .gk-poolgal {
grid-template-columns: 1fr;
}
.gk-trust__cell + .gk-trust__cell {
border-left: none;
border-top: 1px solid var(--line);
}
.gk-hero h1 {
white-space: normal;
}
.gk-poolgal .is-tall {
min-height: 340px;
}
/* core/columns only stacks at WP's 781px; bring it to the design's own
breakpoint so the two footer bands never sit cramped side by side. */
.gk-footer__top.wp-block-columns {
flex-wrap: wrap !important;
}
/* --- nav folds into the disclosure --- */
/* The desktop CTA disappears; its job is taken by the last item in the
panel, a navigation-link carrying .gk-nav__cta. */
.gk-header__actions .wp-block-buttons {
display: none;
}
/* The nav sits between the logo and the actions on desktop. Collapsed, its
burger belongs at the far right of the row, next to the phone number —
otherwise the close button, which we park over the burger, would land on
top of the phone link. */
.gk-header__inner {
gap: 20px;
}
/* Growing the logo box soaks up the row's free space, so the phone number
and the burger stay together at the right instead of being spread apart
by the group's space-between. (flex-grow rather than an auto margin:
core's `figure.wp-block-image { margin: 0 }` out-specifies a plain
.gk-header__logo margin rule.) */
.gk-header__logo {
flex-grow: 1;
}
.gk-header__actions {
order: 2;
}
.gk-header .gk-nav {
order: 3;
}
.gk-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: #fff;
border: 1px solid var(--border-strong);
border-radius: 10px;
color: var(--navy-800);
transition: border-color .14s;
}
.gk-header .wp-block-navigation__responsive-container-open:not(.always-shown):hover {
border-color: var(--navy-800);
}
.gk-header .gk-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none;
}
/* Core's overlay is a full-viewport fixed modal. The design wants a panel
that drops out of the nav bar, so it is re-anchored to .gk-header (the
sticky ancestor) — overflow has to go back to visible or the close button,
which we pull up into the nav row, would be clipped away. */
/* core makes .wp-block-navigation position:relative for submenus. This menu
is flat, and leaving it relative would make the collapsed — all of
44px wide — the panel's containing block. */
.gk-header .gk-nav {
position: static;
}
/* Core locks the page by putting overflow:hidden on while its overlay
is open. That kills position:sticky on the header — it drops back to the
top of the document, dragging this panel with it, and the focus core moves
into the menu then scrolls the whole page up to follow. The design never
locks scrolling (its scrim is decorative), so give the root its scrolling
back and the header stays put. */
html.has-modal-open {
overflow: visible;
}
.gk-header .wp-block-navigation__responsive-container.is-menu-open {
position: absolute;
top: var(--gk-nav-h);
left: 0;
right: 0;
bottom: auto;
z-index: 1;
display: block;
overflow: visible;
background: #fff;
border-bottom: 1px solid var(--line);
box-shadow: 0 32px 56px -24px rgba(10, 26, 79, .28);
padding: 6px var(--gk-wrap-pad) 24px;
}
.gk-header:has(.wp-block-navigation__responsive-container.is-menu-open)::before {
background: #fff;
}
.gk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.gk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
max-width: none;
width: 100%;
/* Core reserves 56px here for its own close button, which we have moved
up into the nav row — reclaim it or the first link floats. */
padding-top: 0;
}
.gk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
position: static;
margin-top: 0;
}
.gk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
margin-top: 0;
}
.gk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
display: block;
width: 100%;
}
.gk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
/* The base border-box rule keys off a gk- class, which core's link does
not carry — without this the padding is added to the 100% and every
row, the CTA worst of all, overshoots the panel. */
box-sizing: border-box;
padding: 16px 2px;
font-size: 16px;
font-weight: 600;
/* The desktop rule pins line-height so the sliding underline lines up
with the phone number's. There is no underline in this panel, so give
the rows the body's line-height back rather than inherit a constraint
that exists for a different reason. */
line-height: 1.55;
opacity: 1;
border-bottom: 1px solid var(--line);
}
.gk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
content: none;
}
/* The panel's own call to action. */
.gk-nav .gk-nav__cta {
display: block;
}
.gk-header .wp-block-navigation__responsive-container.is-menu-open .gk-nav__cta .wp-block-navigation-item__content {
justify-content: center;
margin-top: 18px;
padding: 17px 28px;
border: 1.5px solid var(--navy-800);
border-radius: var(--radius-md);
background: var(--navy-800);
color: #fff;
font-weight: 700;
line-height: 1;
}
/* Core's close button is already absolute; pulling it up by half the row
height plus half its own lands it exactly where the burger was, so the
icon reads as a hamburger toggling into a cross. */
.gk-header .wp-block-navigation__responsive-container-close {
display: grid;
place-items: center;
position: absolute;
top: calc((var(--gk-nav-h) + 44px) / -2);
right: var(--gk-wrap-pad);
width: 44px;
height: 44px;
background: #fff;
border: 1px solid var(--border-strong);
border-radius: 10px;
color: var(--navy-800);
}
.gk-header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open {
visibility: hidden;
}
}
@media (max-width: 620px) {
/* Below 620 the clamps have bottomed out and the sections still breathe like
a desktop page — a flat 48px is what the stacked rhythm actually wants. */
.gk-section {
padding: 48px 0;
}
.gk-section--flush-top {
padding-top: 0;
}
.gk-hero,
.gk-pool-hero {
padding-bottom: 40px;
}
.gk-boka {
padding: 56px 0;
}
/* :root prefix to match the base rule's specificity — see the note there. */
:root .gk-pool-cta {
margin-bottom: 48px;
}
/* The navy panel spans the gutters and drops its radius — at this width the
inset card reads as a cramped box rather than a feature. */
.gk-niveko {
margin-inline: calc(-1 * var(--gk-wrap-pad));
border-radius: 0;
padding: 64px var(--gk-wrap-pad);
}
.gk-jobs {
grid-template-columns: 1fr;
}
/* Stacked, six reference cards is a scroll marathon — the design shows three. */
.gk-jobs > .gk-job:nth-child(n + 4) {
display: none;
}
.gk-partners__inner {
justify-content: center;
}
/* Stacked under the label the row takes the full bleed, gutters included —
three marks at this size need every pixel. space-evenly rather than
space-between: the marks have no shared baseline box, so equal air around
them sits better than two of them pinned to the edges, and with the
distribution doing the spacing the explicit gap only fights it. */
.gk-partners__logos {
width: calc(100% + 2 * var(--gk-wrap-pad));
margin-inline: calc(-1 * var(--gk-wrap-pad));
justify-content: space-evenly;
gap: 0;
}
/* The three marks total ~10.4:1, so 6.4vw of height leaves roughly 20px of
air in each of the four slots at 375px — and still clears the 12px floor
at 320px. Reads larger than the desktop 3.2vw clamp does down here. */
.gk-partners__logos img,
.gk-partners__logos .wp-block-image img {
height: clamp(18px, 6.4vw, 28px);
}
}
@media (max-width: 520px) {
:root {
--gk-nav-h: 70px;
}
.gk-header__tel {
display: none;
}
.gk-hero .wp-block-button,
.gk-pool-hero .wp-block-button,
.gk-pool-cta .wp-block-button {
width: 100%;
}
.gk-hero .wp-block-button__link,
.gk-pool-hero .wp-block-button__link,
.gk-pool-cta .wp-block-button__link {
width: 100%;
}
/* The form is the widest thing on the page down here; letting it span the
gutters buys the fields ~40px and stops the card from looking squeezed. */
.gk-form {
margin-inline: calc(-1 * var(--gk-wrap-pad));
border-radius: 0;
border-left: none;
border-right: none;
}
.gk-form__row {
grid-template-columns: 1fr;
gap: 0;
}
/* Stacked, the colophon is the last thing on the page and should read as
fine print — centred, smaller and dimmed rather than a two-column band. */
.gk-footer__bottom {
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 24px 0 28px;
font-size: 11.5px;
letter-spacing: .04em;
opacity: .6;
}
}