/* =============================================================================
Pixelfjord — site stylesheet
Palette: white base, strict gray transitions, deep-navy/cobalt accents,
water-gradient WOW sections.
============================================================================= */
:root {
/* Palette */
--pf-white: #FFFFFF;
--pf-paper: #FAFBFC;
--pf-mist: #F1F5F9;
--pf-cloud: #E5EBF2;
--pf-stone: #C8D2DE;
--pf-graphite: #6B7785;
--pf-ink: #1A1F2A;
--pf-ink-soft: #3F4858;
--pf-navy: #0E2A4D;
--pf-navy-deep: #061730;
--pf-steel: #1F4E89;
--pf-cobalt: #2563EB;
--pf-cyan: #0EA5E9;
--pf-cyan-soft: #38BDF8;
--pf-sun: #F59E0B;
--pf-rose: #E11D48;
--pf-success: #16A34A;
/* Type */
--pf-font-disp: 'Fraunces', 'Iowan Old Style', Cambria, Georgia, serif;
--pf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Layout */
--pf-radius-sm: 6px;
--pf-radius-md: 10px;
--pf-radius-lg: 18px;
--pf-shadow-1: 0 1px 2px rgba(14,42,77,.06), 0 0 0 1px rgba(14,42,77,.04);
--pf-shadow-2: 0 8px 24px -8px rgba(14,42,77,.18), 0 2px 6px rgba(14,42,77,.06);
--pf-shadow-3: 0 24px 60px -20px rgba(14,42,77,.35);
--pf-cont: 1240px;
}
/* -------------------------------------------------------------------------
Reset / base
------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--pf-font-body);
font-size: 15.5px;
line-height: 1.55;
color: var(--pf-ink);
background: var(--pf-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--pf-navy); text-decoration: none; transition: color .15s; }
a:hover { color: var(--pf-cobalt); }
h1, h2, h3, h4 { font-family: var(--pf-font-disp); font-weight: 600; color: var(--pf-ink); margin: 0 0 .4em; line-height: 1.12; letter-spacing: -.01em; }
h1 { font-size: clamp(34px, 4.5vw, 60px); }
h2 { font-size: clamp(28px, 3.2vw, 44px); }
h3 { font-size: 22px; }
p { margin: 0 0 .9em; }
em { font-style: italic; color: var(--pf-steel); }
.pf-container { max-width: var(--pf-cont); margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pf-skip {
position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.pf-skip:focus {
left: 12px; top: 12px; width: auto; height: auto; padding: 8px 14px; background: var(--pf-navy); color: #fff; border-radius: 6px; z-index: 999;
}
/* -------------------------------------------------------------------------
Eyebrows / common building blocks
------------------------------------------------------------------------- */
.pf-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--pf-font-body);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pf-cobalt);
margin-bottom: 14px;
}
.pf-eyebrow::before {
content: ''; width: 22px; height: 2px; background: linear-gradient(90deg, var(--pf-cyan), var(--pf-cobalt));
}
.pf-eyebrow--inverse { color: var(--pf-cyan-soft); }
.pf-eyebrow--inverse::before { background: linear-gradient(90deg, var(--pf-cyan-soft), #fff); }
.pf-section { padding: 70px 0; position: relative; }
.pf-section--snug { padding: 40px 0; }
.pf-section--gray { background: linear-gradient(180deg, var(--pf-white), var(--pf-mist)); }
.pf-section__head {
display: flex; align-items: end; justify-content: space-between; gap: 24px;
margin-bottom: 36px; flex-wrap: wrap;
}
.pf-section__head h2 { margin: 0; max-width: 18ch; }
.pf-section__sub { color: var(--pf-graphite); margin: 8px 0 0; max-width: 56ch; font-size: 15px; }
/* -------------------------------------------------------------------------
Buttons
------------------------------------------------------------------------- */
.pf-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 22px;
border-radius: 999px;
font-weight: 600;
font-size: 14px;
letter-spacing: .01em;
border: 1.5px solid transparent;
background: var(--pf-navy);
color: var(--pf-white);
transition: transform .12s, background .15s, color .15s, border-color .15s, box-shadow .2s;
cursor: pointer;
text-decoration: none;
line-height: 1;
}
.pf-btn:hover { background: var(--pf-cobalt); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,99,235,.25); }
.pf-btn--ghost { background: transparent; color: var(--pf-navy); border-color: var(--pf-stone); }
.pf-btn--ghost:hover { background: var(--pf-navy); color: var(--pf-white); border-color: var(--pf-navy); }
.pf-btn--cyan {
background: linear-gradient(135deg, var(--pf-cyan-soft), var(--pf-cobalt));
color: var(--pf-white);
}
.pf-btn--cyan:hover { box-shadow: 0 10px 26px rgba(14,165,233,.35); }
.pf-btn--inverse { background: var(--pf-white); color: var(--pf-navy); }
.pf-btn--inverse:hover { background: var(--pf-cyan); color: var(--pf-white); }
.pf-btn--lg { padding: 16px 32px; font-size: 15px; }
.pf-btn--sm { padding: 9px 16px; font-size: 13px; }
/* -------------------------------------------------------------------------
Top strip — chip-pill style
------------------------------------------------------------------------- */
.pf-topstrip {
background: linear-gradient(180deg, var(--pf-navy-deep), var(--pf-navy));
color: rgba(255,255,255,.92);
font-size: 12px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.pf-topstrip__row {
display: flex; align-items: center; gap: 12px;
padding: 8px 0;
flex-wrap: wrap;
}
.pf-topstrip__shop {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 500;
letter-spacing: .005em;
}
.pf-topstrip__dot {
width: 8px; height: 8px; border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34,197,94,.25);
animation: pf-pulse 2.4s ease-in-out infinite;
}
@keyframes pf-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
50% { box-shadow: 0 0 0 7px rgba(34,197,94,.06); }
}
.pf-topstrip__pill {
display: inline-flex; align-items: center;
padding: 4px 11px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
font-size: 11.5px;
letter-spacing: .01em;
}
.pf-topstrip__pill--gift {
color: #fff;
background: linear-gradient(135deg, rgba(37,99,235,.4), rgba(56,189,248,.32));
border-color: rgba(56,189,248,.42);
}
.pf-topstrip__link {
margin-left: auto;
color: var(--pf-cyan-soft);
font-weight: 600;
font-size: 12px;
letter-spacing: .03em;
}
.pf-topstrip__link:hover { color: #fff; }
/* -------------------------------------------------------------------------
Header — single-row with prose nav (v2 redesign)
------------------------------------------------------------------------- */
.pf-header {
background: var(--pf-white);
border-bottom: 1px solid var(--pf-cloud);
position: sticky; top: 0; z-index: 50;
}
.pf-header--v2 .pf-header__bar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 28px;
padding: 14px 24px 13px;
}
/* Brand block */
.pf-brand {
display: inline-flex; align-items: center; gap: 11px;
color: var(--pf-ink);
}
.pf-brand:hover { color: var(--pf-navy); }
.pf-brand__mark {
flex: none;
border-radius: 11px;
box-shadow: 0 4px 12px rgba(14,42,77,.18);
}
.pf-brand__word { display: flex; flex-direction: column; line-height: 1.05; }
.pf-brand__name {
font-family: var(--pf-font-disp);
font-size: 22px; font-weight: 600;
letter-spacing: -.018em;
}
.pf-brand__name em { color: var(--pf-cobalt); font-style: normal; }
.pf-brand__sub {
font-size: 10.5px;
color: var(--pf-graphite);
margin-top: 3px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 500;
}
/* Inline prose-style main nav */
.pf-mainnav {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap;
gap: 4px 6px;
font-family: var(--pf-font-disp);
font-size: 14.5px;
}
.pf-mainnav__link {
display: inline-block;
padding: 6px 8px;
font-style: italic;
font-weight: 500;
color: var(--pf-ink-soft);
border-radius: 4px;
transition: color .15s, background .15s;
position: relative;
}
.pf-mainnav__link:hover { color: var(--pf-cobalt); }
.pf-mainnav__link.is-active {
color: var(--pf-navy);
font-weight: 600;
}
.pf-mainnav__link.is-active::before {
content: '◆';
display: inline-block;
margin-right: 5px;
font-size: 8px;
color: var(--pf-cobalt);
vertical-align: middle;
transform: translateY(-2px);
}
.pf-mainnav__link--accent {
color: var(--pf-rose);
font-weight: 600;
}
.pf-mainnav__link--accent:hover { color: var(--pf-rose); }
.pf-mainnav__link--accent.is-active { color: var(--pf-rose); }
.pf-mainnav__link--accent.is-active::before { color: var(--pf-rose); }
.pf-mainnav__sep {
color: var(--pf-cloud);
font-size: 14px;
user-select: none;
}
/* Utility — search-icon, sjöstjärna, cart-chip */
.pf-utility { display: flex; align-items: center; gap: 8px; }
.pf-util-btn {
position: relative;
display: grid; place-items: center;
width: 40px; height: 40px;
border: 1px solid transparent;
background: transparent;
color: var(--pf-ink);
border-radius: 12px;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s, transform .2s;
}
.pf-util-btn:hover {
background: var(--pf-mist);
color: var(--pf-cobalt);
border-color: var(--pf-cloud);
}
.pf-util-btn--fav.has-items {
color: var(--pf-cobalt);
background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(56,189,248,.08));
}
.pf-util-btn--fav:hover { transform: rotate(-10deg); }
.pf-util-btn__count {
position: absolute;
top: 2px; right: 2px;
min-width: 17px; height: 17px;
padding: 0 4px;
font-size: 10.5px; font-weight: 700;
background: var(--pf-cobalt); color: #fff;
border-radius: 999px;
display: grid; place-items: center;
border: 2px solid #fff;
font-family: var(--pf-font-body);
}
/* Cart chip — distinctive horizontal pill with label + total */
.pf-cartchip {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 14px 7px 9px;
background: var(--pf-paper);
border: 1px solid var(--pf-cloud);
border-radius: 999px;
color: var(--pf-ink);
transition: border-color .15s, background .15s, transform .15s;
min-height: 40px;
}
.pf-cartchip:hover {
border-color: var(--pf-cobalt);
background: #fff;
transform: translateY(-1px);
}
.pf-cartchip.has-items {
background: linear-gradient(135deg, var(--pf-navy) 0%, var(--pf-steel) 100%);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 12px rgba(14,42,77,.2);
}
.pf-cartchip.has-items:hover { background: linear-gradient(135deg, var(--pf-navy) 0%, var(--pf-cobalt) 100%); }
.pf-cartchip__icon {
display: grid; place-items: center;
width: 26px; height: 26px;
border-radius: 8px;
background: rgba(255,255,255,.08);
flex: none;
}
.pf-cartchip:not(.has-items) .pf-cartchip__icon {
background: transparent;
color: var(--pf-graphite);
}
.pf-cartchip__body {
display: flex; flex-direction: column; line-height: 1.1;
font-family: var(--pf-font-body);
}
.pf-cartchip__label {
font-size: 11px; font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
opacity: .82;
}
.pf-cartchip__detail {
font-size: 12.5px; font-weight: 600;
margin-top: 2px;
letter-spacing: .005em;
}
.pf-cartchip:not(.has-items) .pf-cartchip__detail {
font-weight: 400;
color: var(--pf-graphite);
}
/* Search drawer (slide-down) — max-height transition for cross-browser support */
.pf-search-drawer {
max-height: 0;
overflow: hidden;
background: linear-gradient(180deg, #fff 0%, var(--pf-paper) 100%);
border-bottom: 1px solid transparent;
opacity: 0;
transition: max-height .3s cubic-bezier(.4,.0,.2,1), opacity .25s, border-color .3s;
}
.pf-search-drawer.is-open {
max-height: 220px;
opacity: 1;
border-bottom-color: var(--pf-cloud);
box-shadow: 0 8px 24px rgba(14,42,77,.06);
}
.pf-search-drawer__row {
padding: 22px 24px 26px;
}
.pf-search-drawer__form {
display: flex; align-items: center;
gap: 10px;
background: #fff;
border: 2px solid var(--pf-cloud);
border-radius: 12px;
padding: 6px 6px 6px 16px;
transition: border-color .15s, box-shadow .15s;
max-width: 720px;
margin: 0 auto;
}
.pf-search-drawer__form:focus-within {
border-color: var(--pf-cobalt);
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.pf-search-drawer__form svg {
color: var(--pf-graphite);
flex: none;
}
.pf-search-drawer__form input {
flex: 1;
border: 0; outline: 0;
font-size: 16.5px;
font-family: var(--pf-font-body);
padding: 12px 4px;
background: transparent;
color: var(--pf-ink);
}
.pf-search-drawer__form input::placeholder { color: var(--pf-graphite); }
.pf-search-drawer__close {
width: 36px; height: 36px;
border: 0; background: transparent;
color: var(--pf-graphite);
font-size: 18px;
cursor: pointer;
border-radius: 8px;
transition: background .15s, color .15s;
}
.pf-search-drawer__close:hover { background: var(--pf-mist); color: var(--pf-rose); }
.pf-search-drawer__suggest {
margin: 14px auto 0;
max-width: 720px;
font-size: 13px;
color: var(--pf-graphite);
text-align: center;
}
.pf-search-drawer__suggest span {
text-transform: uppercase;
letter-spacing: .12em;
font-size: 10.5px;
font-weight: 600;
color: var(--pf-navy);
margin-right: 8px;
}
.pf-search-drawer__suggest a {
color: var(--pf-cobalt);
font-weight: 500;
border-bottom: 1px dashed transparent;
transition: border-color .15s;
}
.pf-search-drawer__suggest a:hover { border-bottom-color: var(--pf-cobalt); }
/* Mobile-only nav drawer */
.pf-mobilenav {
display: none;
background: #fff;
border-top: 1px solid var(--pf-cloud);
}
.pf-mobilenav.is-open { display: block; }
.pf-mobilenav__list {
list-style: none; padding: 14px 0; margin: 0;
}
.pf-mobilenav__link {
display: block;
padding: 12px 24px;
font-family: var(--pf-font-disp);
font-style: italic;
font-size: 18px;
color: var(--pf-ink);
border-left: 3px solid transparent;
transition: background .12s, border-color .12s, color .12s;
}
.pf-mobilenav__link:hover {
background: var(--pf-mist);
border-left-color: var(--pf-cobalt);
color: var(--pf-cobalt);
}
.pf-mobilenav__link.is-active {
border-left-color: var(--pf-cobalt);
color: var(--pf-cobalt);
font-weight: 600;
}
/* Burger */
.pf-burger {
display: none;
width: 40px; height: 40px;
background: transparent; border: 0;
cursor: pointer;
flex-direction: column; align-items: center; justify-content: center; gap: 4px;
border-radius: 12px;
}
.pf-burger:hover { background: var(--pf-mist); }
.pf-burger span {
width: 22px; height: 2px;
background: var(--pf-ink);
border-radius: 2px;
transition: transform .2s, opacity .2s;
}
/* Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
.pf-mainnav { font-size: 13.5px; gap: 2px 4px; }
.pf-mainnav__link { padding: 6px 6px; }
}
@media (max-width: 960px) {
.pf-header--v2 .pf-header__bar { grid-template-columns: auto 1fr auto; gap: 14px; }
.pf-mainnav { display: none; }
.pf-burger { display: flex; }
.pf-cartchip__body { display: none; }
.pf-cartchip {
padding: 0;
width: 40px; height: 40px;
border-radius: 12px;
justify-content: center;
}
.pf-cartchip__icon { background: transparent; }
}
@media (max-width: 720px) {
.pf-topstrip__pill:nth-of-type(2),
.pf-topstrip__link { display: none; }
.pf-topstrip__shop { font-size: 11px; }
.pf-brand__sub { display: none; }
}
@media (max-width: 540px) {
.pf-header--v2 .pf-header__bar { padding: 11px 18px; gap: 8px; }
.pf-utility { gap: 4px; }
.pf-brand__mark { width: 30px; height: 30px; }
.pf-brand__name { font-size: 19px; }
.pf-search-drawer__form input { font-size: 15px; }
}
.pf-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pf-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pf-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* -------------------------------------------------------------------------
Flash
------------------------------------------------------------------------- */
.pf-flashes { padding: 14px 0 0; }
.pf-flash {
padding: 11px 16px;
border-radius: var(--pf-radius-md);
background: var(--pf-mist);
border-left: 3px solid var(--pf-cobalt);
color: var(--pf-ink-soft);
font-size: 14px;
margin-bottom: 8px;
}
.pf-flash--cart { border-left-color: var(--pf-success); }
.pf-flash--wishlist { border-left-color: var(--pf-rose); }
/* -------------------------------------------------------------------------
HOME — hero with water gradient
------------------------------------------------------------------------- */
.pf-hero {
position: relative;
background: var(--pf-white);
padding: 50px 0 70px;
overflow: hidden;
isolation: isolate;
}
.pf-hero::before {
content: '';
position: absolute;
inset: -12% -8% auto auto;
width: 60%;
height: 80%;
background:
radial-gradient(60% 60% at 70% 40%, rgba(56,189,248,.18), transparent 70%),
radial-gradient(50% 70% at 30% 70%, rgba(37,99,235,.12), transparent 70%);
z-index: 0;
pointer-events: none;
}
.pf-hero__row {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 48px;
align-items: center;
position: relative;
z-index: 1;
}
.pf-hero__copy h1 {
font-size: clamp(38px, 5vw, 64px);
letter-spacing: -.02em;
line-height: 1.04;
margin: 8px 0 18px;
}
.pf-hero__copy h1 em {
font-style: italic;
background: linear-gradient(90deg, var(--pf-cobalt), var(--pf-cyan));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.pf-hero__lead {
font-size: 17px; color: var(--pf-ink-soft); max-width: 56ch; margin: 0 0 28px; line-height: 1.55;
}
.pf-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pf-hero__meta {
margin-top: 36px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.pf-hero__meta-item {
padding: 16px 18px;
border: 1px solid var(--pf-cloud);
border-radius: var(--pf-radius-md);
background: var(--pf-white);
}
.pf-hero__meta-item strong {
display: block;
font-family: var(--pf-font-disp);
font-size: 22px;
color: var(--pf-navy);
letter-spacing: -.01em;
margin-bottom: 4px;
}
.pf-hero__meta-item span { font-size: 12.5px; color: var(--pf-graphite); display: block; line-height: 1.4; }
.pf-hero__visual {
position: relative;
border-radius: var(--pf-radius-lg);
overflow: hidden;
aspect-ratio: 5 / 6;
background: var(--pf-mist);
box-shadow: var(--pf-shadow-3);
isolation: isolate;
}
.pf-hero__visual img {
width: 100%; height: 100%;
object-fit: cover;
filter: contrast(1.02) saturate(1.05);
}
.pf-hero__visual::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 40%;
background: linear-gradient(180deg, transparent, rgba(6,23,48,.55) 80%);
pointer-events: none;
}
.pf-hero__quote {
position: absolute;
left: 24px; right: 24px; bottom: 22px;
z-index: 2;
color: #fff;
font-family: var(--pf-font-disp);
font-size: 17px;
line-height: 1.4;
text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.pf-hero__quote span {
display: block;
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
margin-top: 8px;
opacity: .82;
font-family: var(--pf-font-body);
font-weight: 500;
}
@media (max-width: 900px) {
.pf-hero__row { grid-template-columns: 1fr; gap: 30px; }
.pf-hero__meta { grid-template-columns: 1fr 1fr; }
}
/* -------------------------------------------------------------------------
Trust strip (USPs)
------------------------------------------------------------------------- */
.pf-trust {
padding: 28px 0;
border-top: 1px solid var(--pf-cloud);
border-bottom: 1px solid var(--pf-cloud);
background: var(--pf-paper);
}
.pf-trust__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.pf-trust__item {
display: flex; align-items: flex-start; gap: 12px;
padding: 4px 0;
}
.pf-trust__icon {
width: 38px; height: 38px;
background: var(--pf-mist);
border-radius: 10px;
display: grid; place-items: center;
color: var(--pf-cobalt);
flex: none;
}
.pf-trust__copy h3 { font-family: var(--pf-font-body); font-size: 14px; font-weight: 600; margin: 2px 0 4px; color: var(--pf-ink); }
.pf-trust__copy p { margin: 0; font-size: 12.5px; color: var(--pf-graphite); line-height: 1.45; }
@media (max-width: 720px) { .pf-trust__grid { grid-template-columns: 1fr 1fr; } }
/* -------------------------------------------------------------------------
WATER GRADIENT SECTIONS
------------------------------------------------------------------------- */
.pf-water {
position: relative;
overflow: hidden;
isolation: isolate;
color: var(--pf-mist);
padding: 88px 0 96px;
background:
radial-gradient(120% 80% at 20% 0%, #38BDF8 0%, transparent 50%),
radial-gradient(100% 80% at 100% 100%, #2563EB 0%, transparent 60%),
linear-gradient(160deg, #0E2A4D 0%, #061730 100%);
}
.pf-water--secondary {
background:
radial-gradient(80% 60% at 80% 10%, #0EA5E9 0%, transparent 55%),
radial-gradient(80% 80% at 20% 100%, #1F4E89 0%, transparent 70%),
linear-gradient(200deg, #061730 0%, #0E2A4D 60%, #1F4E89 100%);
}
.pf-water::before {
content: '';
position: absolute;
inset: auto 0 -1px 0;
height: 110px;
background:
url("data:image/svg+xml;utf8,") no-repeat center / cover;
z-index: 1;
pointer-events: none;
}
.pf-water::after {
content: '';
position: absolute;
inset: -1px 0 auto 0;
height: 110px;
background:
url("data:image/svg+xml;utf8,") no-repeat center / cover;
z-index: 1;
pointer-events: none;
}
.pf-water .pf-container { position: relative; z-index: 2; }
.pf-water h2 { color: #fff; }
.pf-water h2 em { font-style: italic; color: var(--pf-cyan-soft); }
.pf-water .pf-section__sub { color: rgba(245,247,250,.78); }
/* Water bubbles */
.pf-water-bubbles {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.pf-water-bubbles span {
position: absolute;
display: block;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(56,189,248,.0) 70%);
opacity: .35;
animation: pf-bubble 14s ease-in-out infinite;
}
.pf-water-bubbles span:nth-child(1) { width: 220px; height: 220px; left: 6%; top: 18%; animation-delay: -2s; }
.pf-water-bubbles span:nth-child(2) { width: 140px; height: 140px; left: 28%; top: 60%; animation-delay: -6s; }
.pf-water-bubbles span:nth-child(3) { width: 320px; height: 320px; right: 6%; top: 10%; animation-delay: -10s; opacity: .25; }
.pf-water-bubbles span:nth-child(4) { width: 180px; height: 180px; right: 22%;top: 70%; animation-delay: -1s; opacity: .3; }
@keyframes pf-bubble {
0%, 100% { transform: translate(0,0) scale(1); }
50% { transform: translate(20px, -22px) scale(1.06); }
}
/* Category cards inside water section */
.pf-channel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.pf-channel {
position: relative;
padding: 28px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--pf-radius-lg);
color: #fff;
backdrop-filter: blur(10px);
transition: transform .2s, background .2s, border-color .2s;
display: flex; flex-direction: column; min-height: 280px;
overflow: hidden;
}
.pf-channel:hover {
transform: translateY(-4px);
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.32);
}
.pf-channel__num {
font-family: var(--pf-font-disp);
font-size: 13px;
letter-spacing: .2em;
color: var(--pf-cyan-soft);
text-transform: uppercase;
margin-bottom: 10px;
}
.pf-channel__title {
font-family: var(--pf-font-disp);
font-size: 28px;
font-weight: 600;
margin: 0 0 8px;
line-height: 1.1;
color: #fff;
}
.pf-channel__count {
font-size: 12.5px;
letter-spacing: .04em;
color: rgba(255,255,255,.7);
}
.pf-channel__desc {
margin: 14px 0 18px;
font-size: 14px;
line-height: 1.6;
color: rgba(245,247,250,.85);
max-width: 36ch;
}
.pf-channel__cta {
margin-top: auto;
display: inline-flex; align-items: center; gap: 6px;
font-size: 13.5px; font-weight: 500;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,.4);
padding-bottom: 2px;
align-self: flex-start;
transition: color .15s, border-color .15s;
}
.pf-channel:hover .pf-channel__cta { color: var(--pf-cyan-soft); border-color: var(--pf-cyan-soft); }
.pf-channel__visual {
position: absolute;
inset: auto -10% -20% auto;
width: 70%;
aspect-ratio: 1;
border-radius: 50%;
background: linear-gradient(135deg, rgba(56,189,248,.5), rgba(37,99,235,.2));
filter: blur(40px);
opacity: .8;
z-index: -1;
}
@media (max-width: 900px) { .pf-channel-grid { grid-template-columns: 1fr; } }
/* Water section -- testimonials grid */
.pf-voices-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.pf-voice {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(10px);
border-radius: var(--pf-radius-lg);
padding: 26px 28px;
display: flex; flex-direction: column; gap: 14px;
}
.pf-voice__rating { display: flex; gap: 3px; color: var(--pf-sun); }
.pf-voice__rating svg { width: 14px; height: 14px; }
.pf-voice__quote {
font-family: var(--pf-font-disp);
font-size: 18px;
line-height: 1.5;
color: #fff;
margin: 0;
}
.pf-voice__author {
display: flex; align-items: center; gap: 12px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.14);
}
.pf-voice__avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pf-cyan-soft), var(--pf-cobalt));
display: grid; place-items: center;
color: #fff; font-weight: 700; font-size: 14px;
font-family: var(--pf-font-disp);
}
.pf-voice__meta strong { display: block; font-size: 13.5px; font-weight: 600; color: #fff; }
.pf-voice__meta span { display: block; font-size: 11.5px; color: rgba(255,255,255,.65); margin-top: 2px; }
@media (max-width: 900px) { .pf-voices-grid { grid-template-columns: 1fr; } }
/* -------------------------------------------------------------------------
Product cards
------------------------------------------------------------------------- */
.pf-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 22px;
}
.pf-scroller {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(232px, 244px);
gap: 18px;
overflow-x: auto;
padding: 4px 4px 22px;
scroll-snap-type: x mandatory;
scrollbar-color: var(--pf-cobalt) var(--pf-mist);
scrollbar-width: thin;
}
.pf-scroller > * { scroll-snap-align: start; }
.pf-scroller::-webkit-scrollbar { height: 8px; }
.pf-scroller::-webkit-scrollbar-track { background: var(--pf-mist); }
.pf-scroller::-webkit-scrollbar-thumb { background: var(--pf-cobalt); border-radius: 999px; }
.pf-card {
display: flex; flex-direction: column;
background: var(--pf-white);
border: 1px solid var(--pf-cloud);
container-type: inline-size;
container-name: pfcard;
border-radius: 16px;
overflow: hidden;
transition: transform .15s, box-shadow .2s, border-color .2s;
}
.pf-card:hover {
transform: translateY(-4px);
border-color: var(--pf-cobalt);
box-shadow: 0 14px 32px rgba(37,99,235,.14);
}
.pf-card__media {
position: relative;
aspect-ratio: 4 / 5;
background: linear-gradient(180deg, var(--pf-mist), var(--pf-cloud));
isolation: isolate;
overflow: hidden;
}
.pf-card__media::before {
content: '';
position: absolute;
inset: -14%;
background-image: var(--card-bg);
background-size: cover;
background-position: center;
filter: blur(22px) saturate(.7);
opacity: .35;
z-index: 0;
}
.pf-card__media-link {
position: absolute; inset: 0;
z-index: 2;
display: grid; place-items: center;
padding: 16px;
}
.pf-card__media img {
width: 100%; height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 20px rgba(14,42,77,.25));
transition: transform .3s;
}
.pf-card:hover .pf-card__media img { transform: scale(1.04); }
.pf-card__badges {
position: absolute; top: 10px; left: 10px;
display: flex; flex-direction: column; gap: 5px;
z-index: 3;
}
.pf-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.pf-badge--sale { background: var(--pf-rose); color: #fff; }
.pf-badge--new { background: var(--pf-cobalt); color: #fff; }
.pf-badge--in { background: var(--pf-success); color: #fff; }
.pf-card__star {
position: absolute; top: 12px; right: 12px;
z-index: 4;
width: 38px; height: 38px;
border-radius: 12px;
background: rgba(255,255,255,.94);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(14,42,77,.08);
color: var(--pf-cobalt);
display: grid; place-items: center;
cursor: pointer;
transition: color .18s, background .18s, transform .18s, box-shadow .18s;
}
.pf-card__star:hover {
color: var(--pf-cyan-soft);
background: #fff;
transform: rotate(-12deg) scale(1.06);
}
.pf-card__star.is-active {
color: #fff;
background: linear-gradient(135deg, var(--pf-cobalt) 0%, var(--pf-cyan-soft) 100%);
border-color: transparent;
box-shadow: 0 6px 14px rgba(37,99,235,.35);
}
.pf-card__star.is-active:hover { transform: rotate(15deg) scale(1.08); }
/* Wave SVG separator at the bottom of the card media area */
.pf-card__wave {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 28px;
z-index: 4;
pointer-events: none;
display: block;
}
.pf-card__wave path { fill: var(--pf-white); }
/* Old heart-style favorites button (kept for backward compat) */
.pf-card__wish {
position: absolute; top: 10px; right: 10px;
z-index: 3;
width: 34px; height: 34px;
display: grid; place-items: center;
background: rgba(255,255,255,.92);
border: 1px solid var(--pf-cloud);
border-radius: 50%;
color: var(--pf-graphite);
cursor: pointer;
transition: color .15s, background .15s;
}
.pf-card__wish:hover { color: var(--pf-rose); background: #fff; }
.pf-card__wish.is-active { color: var(--pf-rose); }
.pf-card__wish.is-active svg path { fill: currentColor; }
.pf-card__body {
position: relative;
padding: 16px 18px 18px 22px;
display: flex; flex-direction: column; gap: 6px;
flex: 1;
background: #fff;
}
/* Cobalt accent stripe down the left edge of the body */
.pf-card__body::before {
content: '';
position: absolute;
top: 14px; bottom: 14px; left: 10px;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg, var(--pf-cobalt) 0%, var(--pf-cyan-soft) 100%);
}
.pf-card__plat {
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
color: var(--pf-cobalt); font-weight: 700;
}
.pf-card__name {
font-family: var(--pf-font-body);
font-size: 14.5px; font-weight: 600;
color: var(--pf-ink); line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2; line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
}
.pf-card__name a { color: inherit; }
.pf-card__name a:hover { color: var(--pf-cobalt); }
.pf-card__teaser {
font-size: 12px;
color: var(--pf-graphite);
line-height: 1.45;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2; line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.9em;
}
.pf-card__priceblock {
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed var(--pf-cloud);
/* Default: stack vertically — price first, button below as a full-width pill.
Avoids any chance of overlap on narrow grid cells regardless of viewport. */
display: flex; flex-direction: column;
align-items: stretch;
gap: 10px;
}
.pf-card__pricerow {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.pf-card__price {
font-family: var(--pf-font-disp);
font-size: 22px; font-weight: 700;
color: var(--pf-cobalt);
letter-spacing: -.015em;
line-height: 1;
white-space: nowrap;
}
.pf-card__price-old {
font-size: 12.5px; color: var(--pf-graphite);
text-decoration: line-through;
font-weight: 500;
white-space: nowrap;
}
.pf-card__add {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 10px 16px 10px 18px;
border: 0; border-radius: 999px;
background: linear-gradient(135deg, var(--pf-cobalt) 0%, var(--pf-cyan-soft) 100%);
color: #fff;
font-family: var(--pf-font-body);
font-size: 13px; font-weight: 600;
letter-spacing: .01em;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(37,99,235,.28);
transition: transform .15s, box-shadow .2s, background .2s;
}
.pf-card__add:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(37,99,235,.4);
}
.pf-card__add svg { transition: transform .2s; flex-shrink: 0; }
.pf-card__add:hover svg { transform: translateX(3px); }
/* Legacy compact circular cart button (kept) */
.pf-card__row {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-top: auto; padding-top: 8px;
}
.pf-card__add--mini {
padding: 0;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--pf-navy);
color: #fff;
cursor: pointer;
transition: background .15s, transform .15s;
}
.pf-card__add--mini:hover { background: var(--pf-cobalt); transform: scale(1.06); }
/* Container query: when the card cell itself is wide enough, lay price and
button side by side. Otherwise keep them stacked. Independent of viewport. */
@container pfcard (min-width: 280px) {
.pf-card__priceblock {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.pf-card__pricerow { flex-direction: column; gap: 2px; align-items: flex-start; }
.pf-card__add { flex: 0 0 auto; }
}
@container pfcard (max-width: 230px) {
/* Very narrow grid cell: drop the trailing arrow and tighten the pill. */
.pf-card__add svg { display: none; }
.pf-card__add { padding: 10px 14px; }
.pf-card__price { font-size: 20px; }
}
/* Browsers without container query support — fall back to viewport breakpoints */
@supports not (container-type: inline-size) {
@media (min-width: 1100px) {
.pf-card__priceblock {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.pf-card__pricerow { flex-direction: column; gap: 2px; }
}
}
/* -------------------------------------------------------------------------
Welcome-gift section (homepage editorial block)
------------------------------------------------------------------------- */
.pf-gift {
position: relative;
padding: 70px 0;
background:
radial-gradient(ellipse at 90% 0%, rgba(56,189,248,.12), transparent 60%),
linear-gradient(180deg, var(--pf-paper) 0%, #fff 100%);
overflow: hidden;
}
.pf-gift::before {
/* controller photo wash on the right edge — gaming context */
content: '';
position: absolute;
top: 0; right: -120px;
width: 620px; height: 480px;
background: url('/img/gaming/controller-flat.jpg') center/cover no-repeat;
border-radius: 50%;
opacity: .45;
mix-blend-mode: multiply;
filter: saturate(.65) contrast(1.05);
pointer-events: none;
mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
}
.pf-gift > .pf-container { position: relative; z-index: 1; }
.pf-gift__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.pf-gift__copy h2 {
font-size: clamp(28px, 3.6vw, 42px);
letter-spacing: -.02em;
margin: 10px 0 18px;
}
.pf-gift__copy h2 em { color: var(--pf-cobalt); font-style: italic; }
.pf-gift__copy p {
font-size: 15px;
line-height: 1.75;
color: var(--pf-ink-soft);
margin: 0 0 16px;
}
.pf-gift__copy p strong { color: var(--pf-ink); font-weight: 600; }
.pf-gift__items {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.pf-gift__item {
position: relative;
background: #fff;
border: 1px solid var(--pf-cloud);
border-radius: 14px;
padding: 22px 20px 20px;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.pf-gift__item:hover {
border-color: var(--pf-cobalt);
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(37,99,235,.1);
}
.pf-gift__num {
position: absolute;
top: 16px; right: 16px;
font-family: var(--pf-font-disp);
font-size: 22px; font-weight: 600;
color: var(--pf-cobalt);
opacity: .35;
}
.pf-gift__item h3 {
font-family: var(--pf-font-body);
font-size: 14px;
font-weight: 700;
color: var(--pf-navy);
margin: 0 0 8px;
letter-spacing: -.005em;
}
.pf-gift__item p {
font-size: 12.5px;
color: var(--pf-ink-soft);
line-height: 1.55;
margin: 0;
}
@media (max-width: 900px) {
.pf-gift__row { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 540px) {
.pf-gift__items { grid-template-columns: 1fr; }
}
/* =========================================================================
GIFT BLOCKS for cloak host pages (Grandia, Prylar, Spelhälsning)
========================================================================= */
/* ---------- Grandia: "press-clip" horizontal banner ---------- */
.pf-gift-clip {
padding: 60px 0 70px;
background:
radial-gradient(ellipse at 88% 10%, rgba(56,189,248,.12), transparent 480px),
linear-gradient(180deg, #f7f4ec 0%, #efeae0 100%);
border-top: 1px solid var(--pf-cloud);
border-bottom: 1px solid var(--pf-cloud);
position: relative;
overflow: hidden;
}
.pf-gift-clip::before {
content: '';
position: absolute;
right: -100px; top: -80px;
width: 720px; height: 540px;
background: url('/img/gaming/cartridges-hero.jpg') center/cover no-repeat;
opacity: .32;
filter: saturate(.8) contrast(1.05);
mix-blend-mode: multiply;
border-radius: 50%;
pointer-events: none;
mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
}
.pf-gift-clip > .pf-container { position: relative; z-index: 1; }
.pf-gift-clip__inner {
display: grid;
grid-template-columns: 220px 1fr;
gap: 50px;
align-items: start;
position: relative;
}
.pf-gift-clip__seal {
position: sticky; top: 110px;
width: 200px; height: 200px;
border-radius: 50%;
background: var(--pf-navy);
color: #fff;
display: grid; place-items: center;
text-align: center;
box-shadow: 0 18px 40px rgba(14,42,77,.22), inset 0 0 0 6px rgba(255,255,255,.08);
overflow: hidden;
}
.pf-gift-clip__seal-line {
position: absolute; top: 26px;
font-family: 'Courier New', monospace;
font-size: 11px; letter-spacing: .28em;
color: rgba(255,255,255,.65);
}
.pf-gift-clip__seal-arc {
position: absolute; bottom: 22px;
font-family: 'Courier New', monospace;
font-size: 9.5px; letter-spacing: .14em;
color: rgba(255,255,255,.55);
width: 80%; line-height: 1.4;
}
.pf-gift-clip__seal-core {
font-family: var(--pf-font-disp);
font-size: 76px; font-weight: 600;
color: var(--pf-cyan-soft);
letter-spacing: -.04em;
line-height: 1;
}
.pf-gift-clip__body { max-width: 64ch; }
.pf-gift-clip__kicker {
font-family: 'Courier New', monospace;
font-size: 11px; letter-spacing: .2em;
text-transform: uppercase;
color: var(--pf-cobalt);
margin: 0 0 12px;
font-weight: 700;
}
.pf-gift-clip__h {
font-family: var(--pf-font-disp);
font-size: clamp(28px, 3.4vw, 38px);
line-height: 1.1;
color: var(--pf-navy);
margin: 0 0 18px;
letter-spacing: -.02em;
font-weight: 600;
}
.pf-gift-clip__h em { font-style: italic; color: var(--pf-cobalt); }
.pf-gift-clip__lede {
font-size: 17px;
line-height: 1.7;
color: var(--pf-ink);
margin: 0 0 26px;
}
.pf-gift-clip__list {
list-style: none; margin: 0 0 26px; padding: 0;
display: grid; gap: 14px;
}
.pf-gift-clip__list li {
display: grid;
grid-template-columns: 38px 1fr;
gap: 10px;
align-items: start;
background: #fff;
padding: 14px 18px;
border-radius: 10px;
border: 1px solid var(--pf-cloud);
box-shadow: 0 2px 0 rgba(14,42,77,.04);
}
.pf-gift-clip__no {
font-family: var(--pf-font-disp);
font-size: 22px; font-weight: 600;
color: var(--pf-cobalt);
line-height: 1;
}
.pf-gift-clip__list div { font-size: 14.5px; line-height: 1.55; color: var(--pf-ink-soft); }
.pf-gift-clip__list strong { color: var(--pf-navy); }
.pf-gift-clip__foot {
font-size: 13.5px;
color: var(--pf-graphite);
line-height: 1.65;
font-style: italic;
padding-top: 18px;
border-top: 1px dashed var(--pf-cloud);
}
@media (max-width: 880px) {
.pf-gift-clip__inner { grid-template-columns: 1fr; gap: 28px; }
.pf-gift-clip__seal { width: 140px; height: 140px; margin: 0 auto; position: static; }
.pf-gift-clip__seal-core { font-size: 56px; }
.pf-gift-clip__seal-line { top: 18px; font-size: 9.5px; }
.pf-gift-clip__seal-arc { bottom: 14px; font-size: 8.5px; }
}
/* ---------- Reusable essay block (Grandia + Prylar share this layout) ---------- */
.pf-gift-essay {
padding: 70px 0;
background: #fff;
}
.pf-gift-essay--alt {
background: var(--pf-paper);
border-top: 1px solid var(--pf-cloud);
}
.pf-gift-essay__grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 60px;
align-items: start;
}
.pf-gift-essay__aside {
position: sticky; top: 110px;
}
.pf-gift-essay__h {
font-family: var(--pf-font-disp);
font-size: 22px; font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.01em;
margin: 8px 0 14px;
line-height: 1.25;
}
.pf-gift-essay__claim {
font-size: 15px;
line-height: 1.65;
color: var(--pf-ink-soft);
padding-left: 14px;
border-left: 3px solid var(--pf-cobalt);
}
.pf-gift-essay__prose p {
font-size: 16px;
line-height: 1.8;
color: var(--pf-ink-soft);
margin: 0 0 16px;
max-width: 64ch;
}
.pf-gift-essay__prose strong { color: var(--pf-navy); }
.pf-gift-essay__sign {
font-family: 'Courier New', monospace;
font-size: 12.5px !important;
color: var(--pf-graphite) !important;
letter-spacing: .04em;
border-top: 1px dashed var(--pf-cloud);
padding-top: 18px;
margin-top: 22px !important;
}
@media (max-width: 880px) {
.pf-gift-essay__grid { grid-template-columns: 1fr; gap: 28px; }
.pf-gift-essay__aside { position: static; }
}
/* ---------- Prylar: "package label" sticker hero ---------- */
.pf-gift-label {
padding: 60px 0;
background:
linear-gradient(180deg, rgba(248,245,238,.72) 0%, rgba(248,245,238,.86) 100%),
url('/img/gaming/console-shelf.jpg') center/cover no-repeat;
position: relative;
}
.pf-gift-label::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 12% 18%, rgba(244,114,182,.10), transparent 460px),
radial-gradient(circle at 92% 82%, rgba(56,189,248,.10), transparent 480px);
pointer-events: none;
}
.pf-gift-label > .pf-container { position: relative; z-index: 1; }
.pf-gift-label__paper {
background: #fff;
border: 2px solid var(--pf-navy);
border-radius: 4px;
padding: 0;
position: relative;
box-shadow: 0 22px 48px rgba(14,42,77,.10);
overflow: hidden;
}
.pf-gift-label__perf {
height: 12px;
background-image: radial-gradient(circle at 6px 6px, #fff 4px, transparent 4.5px);
background-size: 14px 12px;
background-position: 0 0;
background-repeat: repeat-x;
background-color: var(--pf-navy);
}
.pf-gift-label__perf--top { border-bottom: 1px solid var(--pf-navy); }
.pf-gift-label__perf--bot { border-top: 1px solid var(--pf-navy); }
.pf-gift-label__rule {
background: var(--pf-navy);
color: rgba(255,255,255,.7);
font-family: 'Courier New', monospace;
font-size: 10.5px;
letter-spacing: .25em;
padding: 8px 0;
display: flex;
gap: 30px;
white-space: nowrap;
overflow: hidden;
text-transform: uppercase;
}
.pf-gift-label__rule span:nth-child(1) { padding-left: 30px; }
.pf-gift-label__grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 40px;
padding: 40px 44px 28px;
align-items: start;
}
.pf-gift-label__stamp {
display: inline-block;
font-family: 'Courier New', monospace;
font-size: 12px;
letter-spacing: .26em;
color: #fff;
background: var(--pf-cobalt);
padding: 6px 12px;
border-radius: 3px;
transform: rotate(-1.5deg);
margin-bottom: 14px;
font-weight: 700;
}
.pf-gift-label__h1 {
font-family: var(--pf-font-disp);
font-size: clamp(34px, 5vw, 56px);
line-height: 1.05;
letter-spacing: -.03em;
color: var(--pf-navy);
margin: 0 0 18px;
font-weight: 600;
}
.pf-gift-label__h1 em { font-style: italic; color: var(--pf-cobalt); }
.pf-gift-label__lede {
font-size: 16px; line-height: 1.7;
color: var(--pf-ink-soft);
margin: 0;
max-width: 50ch;
}
.pf-gift-label__lede strong { color: var(--pf-navy); }
.pf-gift-label__meta {
margin: 0;
display: grid;
gap: 12px;
background: var(--pf-paper);
padding: 22px;
border-radius: 6px;
border: 1px solid var(--pf-cloud);
}
.pf-gift-label__meta > div {
display: grid; grid-template-columns: 90px 1fr; gap: 12px;
font-family: 'Courier New', monospace;
font-size: 12.5px;
align-items: baseline;
}
.pf-gift-label__meta dt {
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pf-graphite);
font-size: 10.5px;
}
.pf-gift-label__meta dd {
color: var(--pf-navy);
font-weight: 600;
margin: 0;
font-family: var(--pf-font-disp);
letter-spacing: -.005em;
}
.pf-gift-label__cards {
list-style: none;
margin: 0;
padding: 0 44px 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.pf-gift-label__cards li {
position: relative;
padding: 24px 20px 22px;
border: 1.5px dashed var(--pf-cloud);
border-radius: 8px;
background: linear-gradient(180deg, #fff, var(--pf-paper));
}
.pf-gift-label__num {
position: absolute; top: -14px; left: 18px;
background: var(--pf-navy);
color: #fff;
font-family: var(--pf-font-disp);
font-size: 16px; font-weight: 600;
padding: 2px 12px;
border-radius: 3px;
letter-spacing: .04em;
}
.pf-gift-label__cards h3 {
font-family: var(--pf-font-disp);
font-size: 18px; font-weight: 600;
color: var(--pf-navy);
margin: 4px 0 8px;
letter-spacing: -.005em;
}
.pf-gift-label__cards p {
font-size: 14px;
line-height: 1.6;
color: var(--pf-ink-soft);
margin: 0;
}
@media (max-width: 880px) {
.pf-gift-label__grid { grid-template-columns: 1fr; gap: 24px; padding: 30px 22px 16px; }
.pf-gift-label__cards { grid-template-columns: 1fr; padding: 0 22px 30px; gap: 26px; }
.pf-gift-label__rule { font-size: 9.5px; letter-spacing: .18em; gap: 18px; }
}
/* ---------- Spelhälsning: typographic poster ---------- */
.pf-gift-poster {
padding: 70px 0 50px;
background:
linear-gradient(180deg, #fff 0%, var(--pf-paper) 100%);
border-bottom: 1px solid var(--pf-cloud);
position: relative;
overflow: hidden;
}
.pf-gift-poster::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(14,42,77,.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(14,42,77,.05) 1px, transparent 1px);
background-size: 32px 32px;
background-position: -1px -1px;
pointer-events: none;
opacity: .55;
}
.pf-gift-poster::after {
content: '';
position: absolute;
right: -140px; top: 40px;
width: 820px; height: 600px;
background: url('/img/gaming/controller-macro.jpg') center/cover no-repeat;
opacity: .28;
mix-blend-mode: multiply;
filter: saturate(.7) contrast(1.05);
border-radius: 50%;
pointer-events: none;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
}
.pf-gift-poster__wrap { position: relative; }
.pf-gift-poster__rail {
position: absolute;
top: -28px; right: 0;
display: flex; flex-direction: column; gap: 4px;
font-family: 'Courier New', monospace;
font-size: 10.5px;
letter-spacing: .18em;
color: var(--pf-graphite);
text-transform: uppercase;
text-align: right;
}
.pf-gift-poster__kicker {
font-family: 'Courier New', monospace;
font-size: 11.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--pf-cobalt);
font-weight: 700;
margin: 0 0 18px;
}
.pf-gift-poster__h {
font-family: var(--pf-font-disp);
font-size: clamp(60px, 12vw, 156px);
line-height: .9;
letter-spacing: -.05em;
color: var(--pf-navy);
margin: 0 0 28px;
font-weight: 600;
}
.pf-gift-poster__h em {
display: block;
font-style: italic;
color: var(--pf-cobalt);
font-weight: 400;
margin-top: -.08em;
}
.pf-gift-poster__sub {
max-width: 62ch;
font-size: 18px;
line-height: 1.6;
color: var(--pf-ink-soft);
margin: 0 0 32px;
}
.pf-gift-poster__chips {
list-style: none; padding: 0; margin: 0 0 38px;
display: flex; flex-wrap: wrap; gap: 18px 32px;
border-top: 1px dashed var(--pf-cloud);
border-bottom: 1px dashed var(--pf-cloud);
padding: 22px 0;
}
.pf-gift-poster__chips li {
font-family: 'Courier New', monospace;
font-size: 12.5px;
letter-spacing: .08em;
color: var(--pf-graphite);
text-transform: uppercase;
}
.pf-gift-poster__chips strong {
display: inline-block;
font-family: var(--pf-font-disp);
font-weight: 600;
font-size: 22px;
color: var(--pf-navy);
letter-spacing: -.01em;
margin-right: 8px;
}
.pf-gift-poster__photo {
display: grid; grid-template-columns: 280px 1fr; gap: 24px;
align-items: center;
background: #fff;
border: 1px solid var(--pf-cloud);
border-radius: 8px;
padding: 16px 20px 16px 16px;
margin-top: 12px;
}
.pf-gift-poster__photo img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 4px;
display: block;
filter: saturate(.85) contrast(1.04);
}
.pf-gift-poster__photo figcaption {
font-family: 'Courier New', monospace;
font-size: 12.5px;
line-height: 1.55;
letter-spacing: .03em;
color: var(--pf-graphite);
}
@media (max-width: 720px) {
.pf-gift-poster__rail { position: static; flex-direction: row; gap: 16px; flex-wrap: wrap; text-align: left; margin-bottom: 18px; }
.pf-gift-poster__photo { grid-template-columns: 1fr; padding: 14px; }
.pf-gift-poster__photo img { aspect-ratio: 16/9; }
}
/* ---------- Spelhälsning: 3 cards "exploded" ---------- */
.pf-gift-trio {
padding: 70px 0;
background: var(--pf-paper);
}
.pf-gift-trio__head { max-width: 60ch; margin-bottom: 32px; }
.pf-gift-trio__head h2 {
font-family: var(--pf-font-disp);
font-size: clamp(28px, 3.4vw, 38px);
color: var(--pf-navy);
margin: 8px 0 12px;
letter-spacing: -.02em;
font-weight: 600;
line-height: 1.15;
}
.pf-gift-trio__head h2 em { font-style: italic; color: var(--pf-cobalt); }
.pf-gift-trio__head p { font-size: 15.5px; line-height: 1.65; color: var(--pf-ink-soft); margin: 0; }
.pf-gift-trio__grid {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.pf-gift-trio__card {
background: #fff;
border: 1px solid var(--pf-cloud);
border-radius: 10px;
padding: 28px 26px 26px;
position: relative;
transition: transform .2s, box-shadow .2s;
}
.pf-gift-trio__card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 30px rgba(14,42,77,.08);
}
.pf-gift-trio__no {
position: absolute;
top: 14px; right: 18px;
font-family: var(--pf-font-disp);
font-size: 38px; font-weight: 600;
color: var(--pf-paper);
letter-spacing: -.04em;
line-height: 1;
-webkit-text-stroke: 1.5px var(--pf-cloud);
}
.pf-gift-trio__icon {
color: var(--pf-cobalt);
margin-bottom: 14px;
}
.pf-gift-trio__card h3 {
font-family: var(--pf-font-disp);
font-size: 20px; font-weight: 600;
color: var(--pf-navy);
margin: 0 0 4px;
letter-spacing: -.01em;
}
.pf-gift-trio__sub {
font-family: 'Courier New', monospace;
font-size: 11.5px;
color: var(--pf-graphite);
letter-spacing: .08em;
text-transform: uppercase;
margin: 0 0 14px;
}
.pf-gift-trio__card > p:last-child {
font-size: 14.5px;
line-height: 1.65;
color: var(--pf-ink-soft);
margin: 0;
}
@media (max-width: 880px) {
.pf-gift-trio__grid { grid-template-columns: 1fr; gap: 18px; }
}
/* ---------- Spelhälsning: 3-step how-to ---------- */
.pf-gift-howto {
padding: 70px 0;
background:
linear-gradient(180deg, rgba(14,42,77,.92), rgba(14,42,77,.96)),
url('/img/gaming/crt-neon.jpg') center/cover no-repeat;
color: #fff;
position: relative;
}
.pf-gift-howto::before {
/* horizontal scanline overlay — pure CRT vibe */
content: '';
position: absolute; inset: 0;
background-image: repeating-linear-gradient(
to bottom,
rgba(255,255,255,.0) 0,
rgba(255,255,255,.0) 2px,
rgba(255,255,255,.025) 2px,
rgba(255,255,255,.025) 3px
);
pointer-events: none;
}
.pf-gift-howto > .pf-container { position: relative; z-index: 1; }
.pf-gift-howto__wrap { max-width: 820px; margin: 0 auto; }
.pf-gift-howto .pf-eyebrow {
color: var(--pf-cyan-soft);
}
.pf-gift-howto__h {
font-family: var(--pf-font-disp);
font-size: clamp(30px, 3.6vw, 42px);
line-height: 1.15;
letter-spacing: -.02em;
margin: 8px 0 30px;
font-weight: 600;
color: #fff;
}
.pf-gift-howto__h em { font-style: italic; color: var(--pf-cyan-soft); }
.pf-gift-howto__steps {
list-style: none; padding: 0; margin: 0 0 30px;
display: grid; gap: 16px;
}
.pf-gift-howto__steps li {
display: grid;
grid-template-columns: 60px 1fr;
gap: 18px;
align-items: start;
padding: 22px;
background: rgba(255,255,255,.04);
border-radius: 8px;
border: 1px solid rgba(255,255,255,.08);
}
.pf-gift-howto__steps li > span {
font-family: var(--pf-font-disp);
font-size: 38px; font-weight: 600;
color: var(--pf-cyan-soft);
line-height: 1;
letter-spacing: -.03em;
}
.pf-gift-howto__steps h3 {
font-family: var(--pf-font-disp);
font-size: 18px; font-weight: 600;
margin: 0 0 6px;
color: #fff;
}
.pf-gift-howto__steps p {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: rgba(255,255,255,.72);
}
.pf-gift-howto__note {
font-size: 14px;
line-height: 1.7;
color: rgba(255,255,255,.65);
font-style: italic;
padding-top: 22px;
border-top: 1px dashed rgba(255,255,255,.15);
}
/* ---------- Spelhälsning: letters from customers ---------- */
.pf-gift-letters {
padding: 70px 0;
background: var(--pf-paper);
}
.pf-gift-letters__h {
font-family: var(--pf-font-disp);
font-size: clamp(28px, 3.4vw, 38px);
color: var(--pf-navy);
margin: 8px 0 32px;
letter-spacing: -.02em;
font-weight: 600;
line-height: 1.15;
}
.pf-gift-letters__h em { font-style: italic; color: var(--pf-cobalt); }
.pf-gift-letters__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.pf-gift-letter {
margin: 0;
background: #fff;
padding: 26px 24px 22px;
border-radius: 8px;
border: 1px solid var(--pf-cloud);
position: relative;
}
.pf-gift-letter::before {
content: '«';
position: absolute; top: 6px; left: 14px;
font-family: var(--pf-font-disp);
font-size: 56px; line-height: 1;
color: var(--pf-cobalt);
opacity: .25;
}
.pf-gift-letter blockquote {
font-family: var(--pf-font-disp);
font-size: 16px;
line-height: 1.6;
color: var(--pf-ink);
margin: 24px 0 16px;
padding: 0;
font-style: italic;
letter-spacing: -.005em;
}
.pf-gift-letter figcaption {
font-family: 'Courier New', monospace;
font-size: 12px;
color: var(--pf-graphite);
letter-spacing: .04em;
border-top: 1px dashed var(--pf-cloud);
padding-top: 12px;
}
.pf-gift-letter figcaption em { color: var(--pf-cobalt); font-style: normal; font-weight: 600; }
@media (max-width: 880px) {
.pf-gift-letters__grid { grid-template-columns: 1fr; }
}
/* ---------- Spelhälsning: more gestures ---------- */
.pf-gift-more {
padding: 70px 0;
background: #fff;
}
.pf-gift-more__wrap { max-width: 880px; margin: 0 auto; }
.pf-gift-more__h {
font-family: var(--pf-font-disp);
font-size: clamp(28px, 3.4vw, 38px);
color: var(--pf-navy);
margin: 8px 0 28px;
letter-spacing: -.02em;
font-weight: 600;
line-height: 1.15;
}
.pf-gift-more__h em { font-style: italic; color: var(--pf-cobalt); }
.pf-gift-more__list {
margin: 0;
display: grid; gap: 22px;
}
.pf-gift-more__list > div {
padding: 22px 24px;
background: var(--pf-paper);
border-radius: 8px;
border-left: 4px solid var(--pf-cobalt);
}
.pf-gift-more__list dt {
font-family: var(--pf-font-disp);
font-size: 18px; font-weight: 600;
color: var(--pf-navy);
margin: 0 0 8px;
letter-spacing: -.005em;
}
.pf-gift-more__list dd {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--pf-ink-soft);
}
/* ---------- Spelhälsning: photo strip between sections ---------- */
.pf-gift-strip {
padding: 60px 0;
background: #fff;
}
.pf-gift-strip__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 18px;
align-items: stretch;
}
.pf-gift-strip__cell {
margin: 0;
background: var(--pf-paper);
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--pf-cloud);
display: flex; flex-direction: column;
transition: transform .25s, box-shadow .25s;
}
.pf-gift-strip__cell:hover {
transform: translateY(-3px);
box-shadow: 0 18px 30px rgba(14,42,77,.10);
}
.pf-gift-strip__cell img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
filter: saturate(.92);
}
.pf-gift-strip__cell--wide img { aspect-ratio: 16/10; }
.pf-gift-strip__cell figcaption {
padding: 14px 16px 16px;
font-size: 13px;
line-height: 1.55;
color: var(--pf-ink-soft);
font-family: 'Courier New', monospace;
letter-spacing: .01em;
flex: 1;
}
.pf-gift-strip__cell figcaption span {
display: inline-block;
font-weight: 700;
color: var(--pf-cobalt);
letter-spacing: .12em;
text-transform: uppercase;
margin-right: 6px;
font-size: 11px;
}
@media (max-width: 880px) {
.pf-gift-strip__grid { grid-template-columns: 1fr; }
}
/* ---------- Inline image inside gift-essay prose ---------- */
.pf-gift-inline {
margin: 0 0 18px;
border-radius: 8px;
overflow: hidden;
background: var(--pf-paper);
border: 1px solid var(--pf-cloud);
}
.pf-gift-inline--right {
float: right;
width: 280px;
margin: 4px 0 18px 24px;
shape-outside: margin-box;
}
.pf-gift-inline img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
filter: saturate(.88);
}
.pf-gift-inline figcaption {
padding: 10px 14px 12px;
font-family: 'Courier New', monospace;
font-size: 12px;
line-height: 1.5;
color: var(--pf-graphite);
letter-spacing: .02em;
}
@media (max-width: 720px) {
.pf-gift-inline--right { float: none; width: 100%; margin: 0 0 18px; }
}
/* ---------- Spelhälsning: foot CTA ---------- */
.pf-gift-foot {
padding: 70px 0;
background:
radial-gradient(circle at 50% 0%, rgba(56,189,248,.10), transparent 360px),
var(--pf-paper);
border-top: 1px solid var(--pf-cloud);
}
.pf-gift-foot__wrap {
max-width: 600px; margin: 0 auto; text-align: center;
}
.pf-gift-foot h2 {
font-family: var(--pf-font-disp);
font-size: clamp(26px, 3vw, 34px);
color: var(--pf-navy);
margin: 8px 0 16px;
letter-spacing: -.02em;
font-weight: 600;
}
.pf-gift-foot h2 em { font-style: italic; color: var(--pf-cobalt); }
.pf-gift-foot p {
font-size: 15.5px;
line-height: 1.7;
color: var(--pf-ink-soft);
margin: 0 0 24px;
max-width: 50ch;
margin-left: auto; margin-right: auto;
}
.pf-gift-foot__cta {
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
/* =========================================================================
RESTORED BLOCKS (slider, journal grid, newsletter, footer, story)
========================================================================= */
/* ---------- Deal carousel (.pf-deal / .pf-slider / .pf-slide) ---------- */
.pf-deal {
padding: 70px 0 80px;
background: linear-gradient(180deg, #fff 0%, var(--pf-paper) 100%);
border-top: 1px solid var(--pf-cloud);
}
.pf-slider {
position: relative;
overflow: hidden;
border-radius: 14px;
background: #fff;
border: 1px solid var(--pf-cloud);
box-shadow: 0 18px 38px rgba(14,42,77,.06);
}
.pf-slider__track {
display: flex;
width: 100%;
transition: transform .6s cubic-bezier(.22,.6,.18,1);
will-change: transform;
}
.pf-slide {
flex: 0 0 100%;
min-width: 100%;
display: grid;
grid-template-columns: 5fr 6fr;
gap: 0;
align-items: stretch;
background: #fff;
}
.pf-slide__media {
position: relative;
background:
linear-gradient(180deg, rgba(14,42,77,.55), rgba(14,42,77,.85)),
var(--slide-bg) center/cover no-repeat,
var(--pf-navy);
min-height: 460px;
display: grid;
place-items: center;
overflow: hidden;
}
.pf-slide__media img {
width: 64%;
max-width: 320px;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 6px;
box-shadow: 0 22px 48px rgba(0,0,0,.45);
transform: rotate(-2deg);
}
.pf-slide__pct {
position: absolute;
top: 22px; left: 22px;
font-family: var(--pf-font-disp);
font-size: 38px; font-weight: 600;
color: #fff;
background: var(--pf-cobalt);
padding: 4px 16px 6px;
border-radius: 4px;
letter-spacing: -.02em;
line-height: 1;
box-shadow: 0 8px 22px rgba(37,99,235,.4);
z-index: 2;
}
.pf-slide__copy {
padding: 44px 48px 40px;
display: flex; flex-direction: column;
gap: 14px;
}
.pf-slide__tag {
font-family: 'Courier New', monospace;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--pf-cobalt);
font-weight: 700;
}
.pf-slide__claim {
font-family: var(--pf-font-disp);
font-size: clamp(26px, 2.6vw, 36px);
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.02em;
line-height: 1.15;
margin: 0;
}
.pf-slide__claim em { font-style: italic; color: var(--pf-cobalt); }
.pf-slide__sub {
font-size: 15px;
line-height: 1.65;
color: var(--pf-ink-soft);
margin: 0 0 6px;
max-width: 50ch;
}
.pf-slide__product {
margin: 4px 0 0;
padding-top: 14px;
border-top: 1px dashed var(--pf-cloud);
}
.pf-slide__product-plat {
font-family: 'Courier New', monospace;
font-size: 11.5px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pf-graphite);
margin: 0 0 4px;
}
.pf-slide__product-name {
font-family: var(--pf-font-disp);
font-size: 18px;
font-weight: 600;
color: var(--pf-navy);
margin: 0;
letter-spacing: -.005em;
}
.pf-slide__price {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
margin-top: 4px;
}
.pf-slide__price-now {
font-family: var(--pf-font-disp);
font-size: 28px; font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.01em;
}
.pf-slide__price-old {
font-size: 15px;
color: var(--pf-graphite);
text-decoration: line-through;
}
.pf-slide__saved {
font-family: 'Courier New', monospace;
font-size: 11.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pf-cobalt);
font-weight: 700;
}
.pf-slide__cta {
display: flex; gap: 10px;
flex-wrap: wrap;
margin-top: auto;
padding-top: 8px;
}
.pf-slider__arrow {
position: absolute;
top: 50%;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,.92);
border: 1px solid var(--pf-cloud);
color: var(--pf-navy);
display: grid; place-items: center;
cursor: pointer;
transform: translateY(-50%);
z-index: 3;
box-shadow: 0 8px 18px rgba(14,42,77,.12);
transition: background .15s, transform .15s;
}
.pf-slider__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.pf-slider__arrow--prev { left: 14px; }
.pf-slider__arrow--next { right: 14px; }
.pf-slider__arrow svg { width: 18px; height: 18px; }
.pf-slider__dots {
position: absolute;
bottom: 18px; left: 0; right: 0;
display: flex; justify-content: center; gap: 6px;
z-index: 3;
}
.pf-slider__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(14,42,77,.25);
border: none;
cursor: pointer;
padding: 0;
transition: background .15s, transform .15s;
}
.pf-slider__dot[aria-current="true"],
.pf-slider__dot.is-active {
background: var(--pf-cobalt);
transform: scale(1.3);
}
@media (max-width: 880px) {
.pf-slide { grid-template-columns: 1fr; }
.pf-slide__media { min-height: 320px; }
.pf-slide__copy { padding: 30px 26px 32px; }
.pf-slider__arrow { display: none; }
}
/* ---------- Journal grid (3-up cards) ---------- */
.pf-journal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
align-items: start;
}
.pf-journal {
background: #fff;
border: 1px solid var(--pf-cloud);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pf-journal:hover {
transform: translateY(-4px);
box-shadow: 0 18px 32px rgba(14,42,77,.10);
border-color: var(--pf-cobalt);
}
.pf-journal__media {
display: block;
overflow: hidden;
}
.pf-journal__media img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
display: block;
transition: transform .4s;
}
.pf-journal__media:hover img { transform: scale(1.04); }
.pf-journal__body {
padding: 22px 24px 24px;
display: flex; flex-direction: column;
gap: 10px;
flex: 1;
}
.pf-journal__meta {
font-family: 'Courier New', monospace;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--pf-graphite);
margin: 0;
font-weight: 700;
}
.pf-journal__title {
font-family: var(--pf-font-disp);
font-size: 20px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.01em;
line-height: 1.25;
margin: 0;
}
.pf-journal__title a { color: inherit; text-decoration: none; }
.pf-journal__title a:hover { color: var(--pf-cobalt); }
.pf-journal__lead {
font-size: 14.5px;
line-height: 1.65;
color: var(--pf-ink-soft);
margin: 0;
flex: 1;
}
.pf-journal__more {
font-family: 'Courier New', monospace;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pf-cobalt);
font-weight: 700;
text-decoration: none;
margin-top: 4px;
align-self: flex-start;
}
.pf-journal__more:hover { color: var(--pf-navy); }
@media (max-width: 880px) {
.pf-journal-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* ---------- Newsletter ---------- */
.pf-newsletter {
position: relative;
padding: 72px 0 80px;
background:
radial-gradient(80% 60% at 80% 0%, rgba(56,189,248,.18), transparent 60%),
linear-gradient(180deg, var(--pf-navy) 0%, #061730 100%);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.pf-newsletter__wave {
position: absolute;
top: -1px; left: 0; right: 0;
height: 60px;
background:
radial-gradient(50% 100% at 50% 0%, var(--pf-paper) 0%, transparent 100%);
z-index: 1;
pointer-events: none;
}
.pf-newsletter__row {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 50px;
align-items: center;
}
.pf-newsletter .pf-eyebrow--inverse {
color: var(--pf-cyan-soft);
}
.pf-newsletter__title {
font-family: var(--pf-font-disp);
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
color: #fff;
margin: 8px 0 14px;
}
.pf-newsletter__title em { font-style: italic; color: var(--pf-cyan-soft); }
.pf-newsletter__lead {
font-size: 15.5px;
line-height: 1.7;
color: rgba(245,247,250,.78);
margin: 0;
max-width: 50ch;
}
.pf-newsletter__form {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
margin: 0;
}
.pf-newsletter__form input[type="email"] {
grid-column: 1 / 2;
height: 52px;
padding: 0 18px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
color: #fff;
font-family: inherit;
font-size: 15px;
outline: none;
transition: border-color .2s, background .2s;
}
.pf-newsletter__form input[type="email"]::placeholder { color: rgba(245,247,250,.45); }
.pf-newsletter__form input[type="email"]:focus {
border-color: var(--pf-cyan-soft);
background: rgba(255,255,255,.10);
}
.pf-newsletter__form button[type="submit"] {
grid-column: 2 / 3;
height: 52px;
padding: 0 22px;
border-radius: 8px;
border: none;
background: var(--pf-cyan-soft);
color: var(--pf-navy);
font-family: var(--pf-font-disp);
font-weight: 600;
font-size: 15px;
cursor: pointer;
letter-spacing: -.005em;
transition: background .15s, transform .15s;
}
.pf-newsletter__form button[type="submit"]:hover {
background: #fff;
transform: translateY(-1px);
}
.pf-newsletter__small {
grid-column: 1 / -1;
font-family: 'Courier New', monospace;
font-size: 11.5px;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(245,247,250,.55);
margin: 4px 0 0;
}
@media (max-width: 880px) {
.pf-newsletter__row { grid-template-columns: 1fr; gap: 24px; }
.pf-newsletter__form { grid-template-columns: 1fr; }
.pf-newsletter__form button[type="submit"] { grid-column: 1; }
}
/* ---------- Footer ---------- */
.pf-footer {
background: #061730;
color: rgba(245,247,250,.7);
font-size: 14px;
line-height: 1.65;
}
.pf-footer a { color: rgba(245,247,250,.78); text-decoration: none; transition: color .15s; }
.pf-footer a:hover { color: var(--pf-cyan-soft); }
.pf-footer__top {
display: grid;
grid-template-columns: 1.1fr 2fr;
gap: 60px;
padding: 70px 24px 50px;
align-items: start;
}
.pf-footer__brand {
display: flex; flex-direction: column; gap: 16px;
}
.pf-footer__logo {
font-family: var(--pf-font-disp);
font-size: 26px;
font-weight: 600;
color: #fff;
letter-spacing: -.01em;
display: inline-block;
}
.pf-footer__logo em {
color: var(--pf-cyan-soft);
font-style: italic;
}
.pf-footer__pitch {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: rgba(245,247,250,.65);
max-width: 38ch;
}
.pf-footer__contact {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: grid; gap: 4px;
font-size: 13.5px;
font-family: 'Courier New', monospace;
}
.pf-footer__contact strong {
color: rgba(245,247,250,.9);
font-weight: 700;
}
.pf-footer__hours {
margin-top: 6px;
color: rgba(245,247,250,.55);
font-size: 12.5px;
letter-spacing: .04em;
}
.pf-footer__cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.pf-footer__col h3 {
font-family: var(--pf-font-disp);
font-size: 14px;
font-weight: 600;
color: #fff;
letter-spacing: .04em;
text-transform: uppercase;
margin: 0 0 14px;
}
.pf-footer__col ul {
list-style: none;
padding: 0;
margin: 0;
display: grid; gap: 8px;
}
.pf-footer__col a { font-size: 14px; }
.pf-footer__bottom {
border-top: 1px solid rgba(245,247,250,.08);
padding: 22px 0 30px;
}
.pf-footer__bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.pf-footer__copy {
margin: 0;
font-size: 12.5px;
color: rgba(245,247,250,.5);
font-family: 'Courier New', monospace;
letter-spacing: .02em;
}
.pf-footer__pay {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.pf-footer__pay li { display: flex; align-items: center; }
.pf-footer__pay img {
height: 22px;
width: auto;
display: block;
filter: grayscale(.4) brightness(1.2) opacity(.75);
transition: filter .15s;
}
.pf-footer__pay li:hover img { filter: grayscale(0) brightness(1) opacity(1); }
.pf-footer__pay-text {
font-family: 'Courier New', monospace;
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(245,247,250,.5);
margin-right: 6px;
}
@media (max-width: 880px) {
.pf-footer__top { grid-template-columns: 1fr; gap: 36px; padding: 50px 24px 40px; }
.pf-footer__cols { grid-template-columns: 1fr 1fr; gap: 24px; }
.pf-footer__bottom-row { flex-direction: column; align-items: flex-start; }
}
/* ---------- Story (legacy 2-column on home/om-oss; flow on journalen) ---------- */
.pf-story--legacy {
display: grid;
grid-template-columns: 5fr 6fr;
gap: 60px;
align-items: start;
padding: 70px 0;
}
.pf-story--legacy .pf-story__media {
position: sticky;
top: 110px;
}
.pf-story--legacy .pf-story__media img {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 22px 40px rgba(14,42,77,.10);
display: block;
}
.pf-story__copy {
display: flex; flex-direction: column;
gap: 16px;
}
.pf-story__copy h2 {
font-family: var(--pf-font-disp);
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.02em;
line-height: 1.1;
margin: 8px 0 6px;
}
.pf-story__copy h2 em { font-style: italic; color: var(--pf-cobalt); }
.pf-story__copy p {
font-size: 16px;
line-height: 1.75;
color: var(--pf-ink-soft);
margin: 0 0 4px;
max-width: 60ch;
}
.pf-story__copy p strong { color: var(--pf-navy); font-weight: 600; }
.pf-story__sign {
display: grid;
grid-template-columns: 64px 1fr;
gap: 16px;
align-items: center;
margin-top: 18px;
padding-top: 22px;
border-top: 1px dashed var(--pf-cloud);
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.55;
color: var(--pf-graphite);
}
.pf-story__sign img {
width: 64px; height: 64px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--pf-cloud);
}
.pf-story__sign strong {
display: block;
font-family: var(--pf-font-disp);
font-size: 16px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.005em;
margin-bottom: 2px;
}
@media (max-width: 880px) {
.pf-story--legacy { grid-template-columns: 1fr; gap: 28px; }
.pf-story--legacy .pf-story__media { position: static; }
.pf-story--legacy .pf-story__media img { aspect-ratio: 16/10; }
}
/* =========================================================================
CART PAGE (.pf-packsedel / .pf-manifest / .pf-fraktslip / .pf-blank-slip)
========================================================================= */
.pf-packsedel-wrap {
padding: 50px 0 90px;
background:
repeating-linear-gradient(0deg, rgba(14,42,77,.025) 0 1px, transparent 1px 28px),
var(--pf-paper);
min-height: 70vh;
}
/* ---------- Empty cart slip ---------- */
.pf-blank-slip {
max-width: 640px;
margin: 30px auto;
background: #fff;
border: 1px dashed var(--pf-cloud);
border-radius: 4px;
padding: 42px 44px 44px;
font-family: 'Courier New', monospace;
box-shadow: 0 14px 30px rgba(14,42,77,.05);
}
.pf-blank-slip__head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 18px;
border-bottom: 1px dashed var(--pf-cloud);
margin-bottom: 22px;
gap: 16px;
}
.pf-blank-slip__tag {
font-size: 11px;
letter-spacing: .18em;
font-weight: 700;
color: var(--pf-cobalt);
text-transform: uppercase;
}
.pf-blank-slip__ref {
font-size: 11.5px;
color: var(--pf-graphite);
letter-spacing: .04em;
}
.pf-blank-slip h1 {
font-family: var(--pf-font-disp);
font-size: clamp(24px, 2.6vw, 30px);
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.01em;
margin: 0 0 12px;
line-height: 1.2;
}
.pf-blank-slip p {
font-family: var(--pf-font-body, 'Inter', sans-serif);
font-size: 15px;
line-height: 1.7;
color: var(--pf-ink-soft);
margin: 0 0 22px;
}
.pf-blank-slip p a { color: var(--pf-cobalt); }
.pf-blank-slip__actions {
display: flex; gap: 10px; flex-wrap: wrap;
}
/* ---------- Packsedel (cart with items) ---------- */
.pf-packsedel {
position: relative;
background: #fff;
border: 1px solid var(--pf-cloud);
border-radius: 6px;
padding: 40px 44px 44px;
box-shadow: 0 18px 40px rgba(14,42,77,.07);
}
.pf-packsedel__head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 28px;
align-items: start;
padding-bottom: 24px;
border-bottom: 1px dashed var(--pf-cloud);
margin-bottom: 26px;
}
.pf-packsedel__stamp {
font-family: var(--pf-font-disp);
font-size: 28px;
font-weight: 700;
color: var(--pf-cobalt);
letter-spacing: .12em;
border: 3px solid var(--pf-cobalt);
padding: 8px 16px 6px;
border-radius: 4px;
transform: rotate(-6deg);
background: rgba(37,99,235,.05);
}
.pf-packsedel__meta { display: grid; gap: 4px; }
.pf-packsedel__kicker {
font-family: 'Courier New', monospace;
font-size: 11.5px;
letter-spacing: .18em;
font-weight: 700;
color: var(--pf-cobalt);
text-transform: uppercase;
margin: 0;
}
.pf-packsedel__title,
.pf-pack-title {
font-family: var(--pf-font-disp);
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.01em;
margin: 4px 0 0;
line-height: 1.2;
}
.pf-packsedel__title span {
display: inline-block;
font-family: 'Courier New', monospace;
font-size: .65em;
font-weight: 400;
color: var(--pf-graphite);
margin-left: 8px;
letter-spacing: .04em;
vertical-align: middle;
}
.pf-packsedel__sub {
font-size: 13.5px;
line-height: 1.6;
color: var(--pf-ink-soft);
margin: 6px 0 0;
max-width: 60ch;
}
.pf-packsedel__seal {
display: grid;
justify-items: end;
gap: 2px;
font-family: 'Courier New', monospace;
border: 1px dashed var(--pf-cloud);
padding: 10px 14px;
border-radius: 4px;
text-align: right;
}
.pf-packsedel__seal span {
font-size: 10.5px;
letter-spacing: .16em;
color: var(--pf-graphite);
text-transform: uppercase;
font-weight: 700;
}
.pf-packsedel__seal strong {
font-size: 22px;
font-weight: 700;
color: var(--pf-navy);
letter-spacing: .03em;
line-height: 1;
margin-top: 2px;
}
.pf-packsedel__seal em {
font-style: normal;
font-size: 11.5px;
color: var(--pf-graphite);
letter-spacing: .04em;
}
.pf-packsedel__grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 36px;
align-items: start;
}
/* ---------- Manifest (line items) ---------- */
.pf-manifest {
font-family: 'Courier New', monospace;
}
.pf-manifest__cols {
display: grid;
grid-template-columns: 44px 1fr 130px 130px 60px;
gap: 14px;
padding: 8px 0 12px;
border-bottom: 1px solid var(--pf-cloud);
font-size: 10.5px;
letter-spacing: .16em;
color: var(--pf-graphite);
text-transform: uppercase;
font-weight: 700;
}
.pf-manifest__row {
display: grid;
grid-template-columns: 44px 1fr 130px 130px 60px;
gap: 14px;
padding: 18px 0;
border-bottom: 1px dashed var(--pf-cloud);
align-items: center;
}
.pf-manifest__no {
font-size: 16px;
font-weight: 700;
color: var(--pf-cobalt);
letter-spacing: .05em;
}
.pf-manifest__title {
display: grid;
grid-template-columns: 64px 1fr;
gap: 14px;
align-items: center;
}
.pf-manifest__thumb {
display: block;
width: 64px; height: 64px;
border-radius: 4px;
overflow: hidden;
background: var(--pf-paper);
border: 1px solid var(--pf-cloud);
}
.pf-manifest__thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.pf-manifest__plat {
font-size: 10.5px;
letter-spacing: .14em;
color: var(--pf-graphite);
text-transform: uppercase;
display: block;
}
.pf-manifest__name {
font-family: var(--pf-font-disp);
font-size: 16px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.005em;
margin: 2px 0;
line-height: 1.25;
}
.pf-manifest__name a { color: inherit; text-decoration: none; }
.pf-manifest__name a:hover { color: var(--pf-cobalt); }
.pf-manifest__sn {
font-size: 11px;
color: var(--pf-graphite);
letter-spacing: .04em;
margin: 0;
}
.pf-manifest__price {
display: grid;
gap: 2px;
text-align: right;
font-family: var(--pf-font-disp);
font-size: 16px;
font-weight: 600;
color: var(--pf-navy);
}
.pf-manifest__price em {
font-style: normal;
font-family: 'Courier New', monospace;
font-size: 11px;
color: var(--pf-graphite);
font-weight: 400;
letter-spacing: .04em;
}
.pf-manifest__cancel { justify-self: end; }
.pf-manifest__cancel button {
background: none;
border: 1px solid var(--pf-cloud);
color: var(--pf-graphite);
font-family: 'Courier New', monospace;
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 3px;
cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
.pf-manifest__cancel button:hover {
color: #c1442e;
border-color: #c1442e;
background: rgba(193,68,46,.05);
}
.pf-manifest__foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0 0;
gap: 14px;
font-size: 13px;
color: var(--pf-ink-soft);
}
.pf-manifest__keep {
color: var(--pf-cobalt);
text-decoration: none;
font-weight: 700;
letter-spacing: .04em;
}
.pf-manifest__keep:hover { color: var(--pf-navy); }
.pf-manifest__foot strong { color: var(--pf-navy); font-weight: 700; }
/* ---------- Stepper (qty -/+) ---------- */
.pf-stepper {
display: inline-grid;
grid-template-columns: 30px 50px 30px;
align-items: center;
border: 1px solid var(--pf-cloud);
border-radius: 4px;
background: var(--pf-paper);
height: 32px;
overflow: hidden;
}
.pf-stepper button {
background: none;
border: none;
font-family: var(--pf-font-disp);
font-size: 18px;
font-weight: 600;
color: var(--pf-navy);
cursor: pointer;
height: 100%;
padding: 0;
transition: background .12s;
}
.pf-stepper button:hover { background: rgba(37,99,235,.08); color: var(--pf-cobalt); }
.pf-stepper input {
height: 100%;
border: none;
background: #fff;
text-align: center;
font-family: 'Courier New', monospace;
font-size: 14px;
font-weight: 700;
color: var(--pf-navy);
width: 100%;
border-left: 1px solid var(--pf-cloud);
border-right: 1px solid var(--pf-cloud);
-moz-appearance: textfield;
appearance: textfield;
outline: none;
}
.pf-stepper input::-webkit-outer-spin-button,
.pf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ---------- Fraktslip (right-column receipt) ---------- */
.pf-fraktslip {
position: relative;
background:
repeating-linear-gradient(0deg, transparent 0 28px, rgba(14,42,77,.04) 28px 29px),
#fff;
border: 1px solid var(--pf-cloud);
border-radius: 4px;
padding: 26px 26px 28px;
font-family: 'Courier New', monospace;
box-shadow: 0 12px 28px rgba(14,42,77,.07);
}
.pf-fraktslip__perforation {
position: absolute;
top: -1px; left: 14px; right: 14px;
height: 6px;
background:
radial-gradient(circle at 4px 6px, transparent 3px, var(--pf-paper) 3.5px) 0 -3px / 12px 12px repeat-x;
pointer-events: none;
}
.pf-fraktslip__head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 700;
color: var(--pf-graphite);
padding-bottom: 12px;
margin-bottom: 16px;
border-bottom: 1px dashed var(--pf-cloud);
}
.pf-fraktslip__brand { color: var(--pf-cobalt); }
.pf-fraktslip__progress {
margin: 0 0 18px;
}
.pf-fraktslip__bar {
height: 6px;
background: var(--pf-cloud);
border-radius: 999px;
overflow: hidden;
margin-bottom: 8px;
}
.pf-fraktslip__bar span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--pf-cobalt), var(--pf-cyan-soft));
border-radius: 999px;
transition: width .4s;
}
.pf-fraktslip__progress p {
font-size: 12px;
letter-spacing: .04em;
color: var(--pf-ink-soft);
margin: 0;
}
.pf-fraktslip__progress strong { color: var(--pf-navy); }
.pf-fraktslip__lines {
margin: 0 0 16px;
padding: 0 0 12px;
border-bottom: 1px dashed var(--pf-cloud);
display: grid;
gap: 8px;
}
.pf-fraktslip__lines > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
font-size: 13px;
}
.pf-fraktslip__lines dt {
color: var(--pf-ink-soft);
letter-spacing: .02em;
margin: 0;
}
.pf-fraktslip__lines dd {
color: var(--pf-navy);
font-weight: 700;
margin: 0;
}
.pf-fraktslip__free {
color: #1e7a3e;
font-weight: 700;
font-size: 11.5px;
letter-spacing: .12em;
text-transform: uppercase;
}
.pf-fraktslip__total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 0 18px;
border-bottom: 2px solid var(--pf-navy);
margin-bottom: 18px;
}
.pf-fraktslip__total span {
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--pf-graphite);
font-weight: 700;
}
.pf-fraktslip__total strong {
font-family: var(--pf-font-disp);
font-size: 26px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.01em;
}
.pf-fraktslip__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
background: var(--pf-cobalt);
color: #fff;
font-family: var(--pf-font-disp);
font-size: 15px;
font-weight: 600;
letter-spacing: -.005em;
padding: 14px 18px;
border-radius: 4px;
text-decoration: none;
transition: background .15s, transform .15s, box-shadow .15s;
box-shadow: 0 8px 22px rgba(37,99,235,.28);
}
.pf-fraktslip__cta:hover {
background: var(--pf-navy);
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(14,42,77,.32);
}
.pf-fraktslip__pay {
list-style: none;
margin: 18px 0 14px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
.pf-fraktslip__pay li {
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
color: var(--pf-graphite);
border: 1px solid var(--pf-cloud);
padding: 4px 8px;
border-radius: 3px;
background: var(--pf-paper);
}
.pf-fraktslip__note {
font-size: 11.5px;
line-height: 1.55;
color: var(--pf-graphite);
margin: 0;
text-align: center;
letter-spacing: .02em;
}
@media (max-width: 980px) {
.pf-packsedel { padding: 30px 24px; }
.pf-packsedel__head { grid-template-columns: 1fr; gap: 16px; }
.pf-packsedel__seal { justify-self: start; }
.pf-packsedel__grid { grid-template-columns: 1fr; gap: 26px; }
.pf-manifest__cols { display: none; }
.pf-manifest__row {
grid-template-columns: 44px 1fr;
grid-template-areas: 'no title title' 'qty qty price' 'cancel cancel cancel';
row-gap: 12px;
}
.pf-manifest__no { grid-area: no; }
.pf-manifest__title { grid-area: title; }
.pf-stepper { grid-area: qty; }
.pf-manifest__price { grid-area: price; }
.pf-manifest__cancel { grid-area: cancel; justify-self: start; }
}
/* =========================================================================
GLOBALS (breadcrumb, page-head, toolbar, empty, toast, prose)
========================================================================= */
.pf-bread {
font-family: 'Courier New', monospace;
font-size: 12px;
letter-spacing: .08em;
color: var(--pf-graphite);
margin: 0 0 18px;
}
.pf-bread a {
color: var(--pf-cobalt);
text-decoration: none;
}
.pf-bread a:hover { color: var(--pf-navy); }
.pf-bread .sep {
margin: 0 6px;
color: var(--pf-cloud);
}
.pf-page-head {
padding: 50px 0 30px;
background: var(--pf-paper);
border-bottom: 1px solid var(--pf-cloud);
}
.pf-page-head__row {
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: end;
}
.pf-page-head h1 {
font-family: var(--pf-font-disp);
font-size: clamp(34px, 4.2vw, 50px);
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.02em;
line-height: 1.05;
margin: 6px 0 12px;
}
.pf-page-head h1 em { font-style: italic; color: var(--pf-cobalt); }
.pf-page-head__sub {
font-size: 15.5px;
line-height: 1.7;
color: var(--pf-ink-soft);
max-width: 70ch;
margin: 0;
}
@media (max-width: 720px) {
.pf-page-head__row { grid-template-columns: 1fr; }
}
.pf-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 14px 0 22px;
border-bottom: 1px dashed var(--pf-cloud);
margin-bottom: 30px;
}
.pf-toolbar__count {
font-family: 'Courier New', monospace;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pf-graphite);
margin-right: auto;
}
.pf-toolbar__chip {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--pf-cloud);
color: var(--pf-ink-soft);
font-family: 'Courier New', monospace;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
transition: color .15s, border-color .15s, background .15s;
}
.pf-toolbar__chip:hover {
color: var(--pf-cobalt);
border-color: var(--pf-cobalt);
}
.pf-toolbar__chip.is-active {
color: #fff;
background: var(--pf-cobalt);
border-color: var(--pf-cobalt);
}
.pf-toolbar select {
height: 34px;
padding: 0 30px 0 12px;
border-radius: 4px;
border: 1px solid var(--pf-cloud);
background: #fff;
font-family: 'Courier New', monospace;
font-size: 12px;
color: var(--pf-ink);
letter-spacing: .04em;
cursor: pointer;
}
.pf-empty {
background: #fff;
border: 1px dashed var(--pf-cloud);
border-radius: 6px;
padding: 50px 40px;
text-align: center;
font-family: 'Courier New', monospace;
}
.pf-empty h2 {
font-family: var(--pf-font-disp);
font-size: 24px;
font-weight: 600;
color: var(--pf-navy);
margin: 0 0 10px;
letter-spacing: -.01em;
}
.pf-empty p {
font-family: var(--pf-font-body, 'Inter', sans-serif);
font-size: 14.5px;
line-height: 1.6;
color: var(--pf-ink-soft);
max-width: 50ch;
margin: 0 auto 22px;
}
.pf-empty .pf-btn { margin: 0 4px; }
.pf-toast {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 80;
background: var(--pf-navy);
color: #fff;
padding: 14px 18px;
border-radius: 6px;
box-shadow: 0 18px 38px rgba(14,42,77,.28);
font-size: 14px;
max-width: 360px;
line-height: 1.5;
transform: translateY(20px);
opacity: 0;
transition: opacity .25s, transform .25s;
pointer-events: none;
}
.pf-toast.is-visible,
.pf-toast[data-visible="1"] {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.pf-prose {
font-family: var(--pf-font-body, 'Inter', sans-serif);
font-size: 16px;
line-height: 1.75;
color: var(--pf-ink);
max-width: 70ch;
}
.pf-prose p {
margin: 0 0 16px;
}
.pf-prose p strong { color: var(--pf-navy); font-weight: 600; }
.pf-prose p em { font-style: italic; color: var(--pf-cobalt); }
.pf-prose a {
color: var(--pf-cobalt);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.pf-prose a:hover { color: var(--pf-navy); }
.pf-prose h2 {
font-family: var(--pf-font-disp);
font-size: 22px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.01em;
margin: 28px 0 12px;
line-height: 1.25;
}
.pf-prose h3 {
font-family: var(--pf-font-disp);
font-size: 18px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.005em;
margin: 22px 0 10px;
}
.pf-prose ul, .pf-prose ol {
margin: 0 0 16px;
padding-left: 22px;
}
.pf-prose li { margin-bottom: 6px; }
/* =========================================================================
CHECKOUT PAGE (.pf-kassa* / .pf-checkflow / .pf-formcard / .pf-paychoice
/ .pf-railcard / .pf-stamp-btn)
========================================================================= */
.pf-kassa-wrap {
padding: 40px 0 90px;
background:
repeating-linear-gradient(0deg, rgba(14,42,77,.025) 0 1px, transparent 1px 28px),
var(--pf-paper);
}
/* ----- Stepper 01-02-03 ----- */
.pf-checkflow {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 0 0 28px;
padding: 0;
counter-reset: step;
}
.pf-checkflow li {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: #fff;
border: 1px solid var(--pf-cloud);
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 12.5px;
color: var(--pf-graphite);
letter-spacing: .04em;
}
.pf-checkflow__no {
font-family: var(--pf-font-disp);
font-size: 22px;
font-weight: 700;
color: var(--pf-cloud);
line-height: 1;
letter-spacing: -.01em;
}
.pf-checkflow__lab { font-size: 13px; color: var(--pf-ink-soft); }
.pf-checkflow__lab em {
font-style: italic;
color: var(--pf-cobalt);
}
.pf-checkflow li.is-current {
border-color: var(--pf-cobalt);
background: rgba(37,99,235,.04);
box-shadow: 0 6px 16px rgba(37,99,235,.10);
}
.pf-checkflow li.is-current .pf-checkflow__no { color: var(--pf-cobalt); }
.pf-checkflow li.is-current .pf-checkflow__lab { color: var(--pf-navy); font-weight: 700; }
.pf-checkflow li.is-done .pf-checkflow__no { color: var(--pf-cobalt); }
.pf-checkflow li.is-done .pf-checkflow__lab { color: var(--pf-navy); }
/* ----- Page header ----- */
.pf-kassa-head { margin: 0 0 30px; }
.pf-kassa-head__kicker {
font-family: 'Courier New', monospace;
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--pf-cobalt);
font-weight: 700;
margin: 0 0 8px;
}
.pf-kassa-head__title {
font-family: var(--pf-font-disp);
font-size: clamp(30px, 4vw, 44px);
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.02em;
line-height: 1.1;
margin: 0 0 12px;
}
.pf-kassa-head__title em { font-style: italic; color: var(--pf-cobalt); }
.pf-kassa-head__sub {
font-size: 15px;
line-height: 1.7;
color: var(--pf-ink-soft);
margin: 0;
max-width: 70ch;
}
/* ----- 2-column layout ----- */
.pf-kassa {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 32px;
align-items: start;
}
.pf-kassa__main {
display: grid;
gap: 20px;
}
.pf-kassa__rail {
display: grid;
gap: 16px;
position: sticky;
top: 110px;
}
/* ----- Formcard fieldset ----- */
.pf-formcard {
background: #fff;
border: 1px solid var(--pf-cloud);
border-radius: 8px;
padding: 22px 26px 26px;
margin: 0;
position: relative;
}
.pf-formcard legend {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
padding: 0 8px;
margin-left: -8px;
}
.pf-formcard__no {
font-family: var(--pf-font-disp);
font-size: 18px;
font-weight: 700;
color: #fff;
background: var(--pf-cobalt);
width: 28px; height: 28px;
display: inline-grid;
place-items: center;
border-radius: 50%;
line-height: 1;
}
.pf-formcard__title {
font-family: var(--pf-font-disp);
font-size: 18px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.005em;
}
.pf-formcard__hint {
flex-basis: 100%;
font-family: 'Courier New', monospace;
font-size: 12px;
color: var(--pf-graphite);
letter-spacing: .02em;
margin-top: 4px;
margin-left: 38px;
}
.pf-formcard__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 18px;
}
.pf-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.pf-field--full { grid-column: 1 / -1; }
.pf-field--zip { grid-column: span 1; }
.pf-field--city { grid-column: span 3; }
.pf-field > span {
font-family: 'Courier New', monospace;
font-size: 11.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pf-graphite);
font-weight: 700;
}
.pf-field input {
height: 44px;
padding: 0 14px;
border-radius: 4px;
border: 1px solid var(--pf-cloud);
background: var(--pf-paper);
font-family: inherit;
font-size: 15px;
color: var(--pf-ink);
transition: border-color .15s, background .15s;
outline: none;
}
.pf-field input::placeholder { color: var(--pf-graphite); }
.pf-field input:focus {
border-color: var(--pf-cobalt);
background: #fff;
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
/* ----- Payment choice ----- */
.pf-formcard--pay .pf-paychoice {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.pf-paychoice__opt {
position: relative;
cursor: pointer;
}
.pf-paychoice__opt input {
position: absolute;
opacity: 0;
inset: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.pf-paychoice__inner {
display: grid;
grid-template-columns: 44px 1fr;
grid-template-rows: auto auto;
gap: 2px 14px;
align-items: center;
padding: 14px 16px;
border-radius: 6px;
border: 1px solid var(--pf-cloud);
background: var(--pf-paper);
transition: border-color .15s, background .15s, box-shadow .15s;
}
.pf-paychoice__icon {
grid-row: 1 / 3;
width: 44px; height: 44px;
border-radius: 50%;
background: #fff;
display: grid;
place-items: center;
color: var(--pf-cobalt);
border: 1px solid var(--pf-cloud);
}
.pf-paychoice__name {
font-family: var(--pf-font-disp);
font-size: 16px;
font-weight: 600;
color: var(--pf-navy);
}
.pf-paychoice__desc {
font-family: 'Courier New', monospace;
font-size: 11.5px;
color: var(--pf-graphite);
letter-spacing: .03em;
}
.pf-paychoice__opt input:checked + .pf-paychoice__inner {
border-color: var(--pf-cobalt);
background: #fff;
box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 8px 18px rgba(37,99,235,.10);
}
.pf-paychoice__opt input:checked + .pf-paychoice__inner .pf-paychoice__icon {
background: var(--pf-cobalt);
color: #fff;
border-color: var(--pf-cobalt);
}
.pf-paychoice__opt:hover .pf-paychoice__inner { border-color: var(--pf-cobalt); }
/* ----- Submit ----- */
.pf-kassa__submit {
background: #fff;
border: 1px dashed var(--pf-cloud);
border-radius: 6px;
padding: 24px;
text-align: center;
}
.pf-stamp-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 18px 36px;
background: var(--pf-cobalt);
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background .15s, transform .15s, box-shadow .15s;
box-shadow: 0 10px 26px rgba(37,99,235,.32);
font-family: var(--pf-font-disp);
}
.pf-stamp-btn:hover {
background: var(--pf-navy);
transform: translateY(-1px);
box-shadow: 0 14px 32px rgba(14,42,77,.38);
}
.pf-stamp-btn__lab {
font-size: 18px;
font-weight: 600;
letter-spacing: -.005em;
}
.pf-stamp-btn__sub {
font-family: 'Courier New', monospace;
font-size: 11.5px;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.85);
font-weight: 400;
}
.pf-kassa__legal {
font-family: 'Courier New', monospace;
font-size: 11.5px;
line-height: 1.65;
color: var(--pf-graphite);
margin: 14px 0 0;
max-width: 60ch;
margin-left: auto; margin-right: auto;
letter-spacing: .02em;
}
.pf-kassa__legal a { color: var(--pf-cobalt); }
/* ----- Railcard (summary) ----- */
.pf-railcard {
background: #fff;
border: 1px solid var(--pf-cloud);
border-radius: 8px;
padding: 22px 24px;
font-family: 'Courier New', monospace;
}
.pf-railcard > header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px dashed var(--pf-cloud);
}
.pf-railcard > header span {
font-family: var(--pf-font-disp);
font-size: 16px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.005em;
}
.pf-railcard > header small {
font-size: 11px;
letter-spacing: .08em;
color: var(--pf-graphite);
text-transform: uppercase;
font-weight: 700;
}
.pf-railcard__items {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: grid;
gap: 6px;
}
.pf-railcard__items li {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 10px;
font-size: 13px;
color: var(--pf-ink);
align-items: baseline;
}
.pf-railcard__item-name {
font-family: var(--pf-font-disp);
font-weight: 600;
color: var(--pf-navy);
font-size: 13.5px;
letter-spacing: -.005em;
}
.pf-railcard__item-qty { color: var(--pf-graphite); font-size: 12px; }
.pf-railcard__item-sum { color: var(--pf-navy); font-weight: 700; font-size: 13px; text-align: right; }
.pf-railcard__sub {
margin: 0 0 14px;
padding: 12px 0;
border-top: 1px dashed var(--pf-cloud);
border-bottom: 1px dashed var(--pf-cloud);
display: grid;
gap: 6px;
}
.pf-railcard__sub > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
font-size: 13px;
}
.pf-railcard__sub dt { color: var(--pf-ink-soft); margin: 0; }
.pf-railcard__sub dd { color: var(--pf-navy); font-weight: 700; margin: 0; }
.pf-railcard__total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 2px solid var(--pf-navy);
}
.pf-railcard__total span {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pf-graphite);
font-weight: 700;
}
.pf-railcard__total strong {
font-family: var(--pf-font-disp);
font-size: 24px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.01em;
}
.pf-railcard__eta {
font-size: 12px;
line-height: 1.55;
color: var(--pf-ink-soft);
margin: 0;
letter-spacing: .03em;
}
.pf-railcard__eta strong { color: var(--pf-navy); font-weight: 700; }
.pf-railcard--gift {
background:
radial-gradient(circle at 100% 0%, rgba(56,189,248,.08), transparent 70%),
#fff;
border: 1px dashed var(--pf-cobalt);
padding: 18px 22px;
position: relative;
}
.pf-railcard__star {
position: absolute;
top: 14px; right: 16px;
color: var(--pf-cobalt);
width: 22px; height: 22px;
display: inline-block;
}
.pf-railcard--gift h4 {
font-family: var(--pf-font-disp);
font-size: 15px;
font-weight: 600;
color: var(--pf-navy);
margin: 0 0 6px;
letter-spacing: -.005em;
padding-right: 30px;
}
.pf-railcard--gift p {
font-size: 12.5px;
line-height: 1.55;
color: var(--pf-ink-soft);
margin: 0;
}
@media (max-width: 980px) {
.pf-checkflow { grid-template-columns: 1fr; gap: 8px; }
.pf-kassa { grid-template-columns: 1fr; gap: 24px; }
.pf-kassa__rail { position: static; }
.pf-formcard__grid { grid-template-columns: 1fr 1fr; }
.pf-field--zip, .pf-field--city { grid-column: span 1; }
.pf-formcard--pay .pf-paychoice { grid-template-columns: 1fr; }
}
/* =========================================================================
ORDER RECEIPT (.pf-receipt* / .pf-tracker)
========================================================================= */
.pf-receipt-wrap {
padding: 50px 0 90px;
background:
repeating-linear-gradient(0deg, rgba(14,42,77,.025) 0 1px, transparent 1px 28px),
var(--pf-paper);
min-height: 70vh;
}
.pf-receipt {
max-width: 760px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--pf-cloud);
border-radius: 6px;
box-shadow: 0 20px 44px rgba(14,42,77,.10);
position: relative;
}
.pf-receipt__top {
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
padding: 36px 40px 24px;
border-bottom: 1px dashed var(--pf-cloud);
}
.pf-receipt__stamp {
font-family: var(--pf-font-disp);
font-size: 22px;
font-weight: 700;
color: #1e7a3e;
letter-spacing: .12em;
border: 3px solid #1e7a3e;
padding: 6px 14px;
border-radius: 4px;
transform: rotate(-4deg);
align-self: start;
background: rgba(30,122,62,.06);
height: max-content;
}
.pf-receipt__head { display: grid; gap: 6px; }
.pf-receipt__brand {
font-family: 'Courier New', monospace;
font-size: 11.5px;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 700;
color: var(--pf-cobalt);
margin: 0;
}
.pf-receipt__title {
font-family: var(--pf-font-disp);
font-size: clamp(26px, 3vw, 34px);
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.01em;
line-height: 1.2;
margin: 4px 0 6px;
}
.pf-receipt__lede {
font-size: 14.5px;
line-height: 1.6;
color: var(--pf-ink-soft);
margin: 0;
}
.pf-receipt__lede strong { color: var(--pf-navy); font-weight: 700; }
.pf-receipt__code {
display: grid;
gap: 4px;
padding: 22px 40px;
background: var(--pf-paper);
border-bottom: 1px dashed var(--pf-cloud);
font-family: 'Courier New', monospace;
text-align: center;
}
.pf-receipt__code span {
font-size: 10.5px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--pf-graphite);
font-weight: 700;
}
.pf-receipt__code strong {
font-family: var(--pf-font-disp);
font-size: 30px;
font-weight: 700;
color: var(--pf-navy);
letter-spacing: .12em;
line-height: 1;
padding: 2px 0;
}
.pf-receipt__code em {
font-style: normal;
font-size: 11px;
color: var(--pf-graphite);
letter-spacing: .04em;
}
.pf-receipt__perforation {
height: 8px;
background:
radial-gradient(circle at 6px 8px, var(--pf-paper) 4px, transparent 4.5px) 0 0 / 14px 14px repeat-x;
margin: 0 -1px;
}
.pf-receipt__body {
padding: 26px 40px 30px;
}
.pf-tracker {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 0;
margin: 0 0 26px;
font-family: 'Courier New', monospace;
}
.pf-tracker li {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 4px;
background: var(--pf-paper);
border: 1px solid var(--pf-cloud);
font-size: 12px;
color: var(--pf-graphite);
letter-spacing: .04em;
}
.pf-tracker li span {
font-family: var(--pf-font-disp);
font-size: 14px;
font-weight: 700;
color: var(--pf-cloud);
}
.pf-tracker li.is-done {
border-color: #1e7a3e;
background: rgba(30,122,62,.06);
color: #1e7a3e;
}
.pf-tracker li.is-done span { color: #1e7a3e; }
.pf-tracker li.is-active {
border-color: var(--pf-cobalt);
background: rgba(37,99,235,.06);
color: var(--pf-cobalt);
box-shadow: 0 4px 12px rgba(37,99,235,.10);
}
.pf-tracker li.is-active span { color: var(--pf-cobalt); }
.pf-receipt__lines {
margin: 0 0 22px;
padding: 0;
display: grid;
gap: 8px;
}
.pf-receipt__lines > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
font-family: 'Courier New', monospace;
font-size: 13.5px;
}
.pf-receipt__lines dt { color: var(--pf-ink-soft); margin: 0; }
.pf-receipt__lines dd { color: var(--pf-navy); font-weight: 700; margin: 0; }
.pf-receipt__lines--full { flex-direction: column; align-items: flex-start; gap: 4px; }
.pf-receipt__lines--full dd { font-weight: 400; color: var(--pf-ink); }
.pf-receipt__gift {
padding: 14px 18px;
border: 1px dashed var(--pf-cobalt);
border-radius: 4px;
background: rgba(37,99,235,.04);
font-size: 13.5px;
line-height: 1.6;
color: var(--pf-ink);
margin: 0;
}
.pf-receipt__gift strong { color: var(--pf-navy); font-weight: 700; }
.pf-receipt__foot {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
padding: 22px 40px 30px;
border-top: 1px dashed var(--pf-cloud);
}
.pf-receipt__print {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--pf-graphite);
font-family: 'Courier New', monospace;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
margin-left: auto;
transition: color .15s;
}
.pf-receipt__print:hover { color: var(--pf-cobalt); }
.pf-receipt--lost {
max-width: 600px;
margin: 0 auto;
background: #fff;
border: 1px dashed var(--pf-cloud);
border-radius: 6px;
padding: 40px 44px;
text-align: center;
}
.pf-receipt--lost h1 {
font-family: var(--pf-font-disp);
font-size: clamp(24px, 2.6vw, 30px);
color: var(--pf-navy);
margin: 12px 0 14px;
letter-spacing: -.01em;
}
.pf-receipt--lost p {
font-size: 14.5px;
line-height: 1.65;
color: var(--pf-ink-soft);
margin: 0 0 24px;
}
@media (max-width: 720px) {
.pf-receipt__top { grid-template-columns: 1fr; gap: 14px; padding: 26px 24px 18px; }
.pf-receipt__code { padding: 18px 24px; }
.pf-receipt__body { padding: 22px 24px; }
.pf-receipt__foot { padding: 18px 24px 26px; }
.pf-tracker { grid-template-columns: 1fr; }
}
/* =========================================================================
PRODUCT PAGE (.pf-product / .pf-gallery* / .pf-pdp*)
========================================================================= */
.pf-product {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 50px;
align-items: start;
margin-bottom: 50px;
}
/* ---------- Gallery ---------- */
.pf-gallery {
position: relative;
background:
var(--gallery-bg) center/cover no-repeat,
var(--pf-paper);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--pf-cloud);
isolation: isolate;
}
.pf-gallery::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.92));
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
z-index: 0;
}
.pf-gallery__main {
position: relative;
z-index: 1;
padding: 36px;
display: grid;
place-items: center;
min-height: 480px;
}
.pf-gallery__main img {
max-width: 100%;
max-height: 460px;
width: auto;
height: auto;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 26px 60px rgba(14,42,77,.18);
}
.pf-gallery__thumbs {
position: relative;
z-index: 1;
display: flex;
gap: 8px;
padding: 0 36px 30px;
flex-wrap: wrap;
}
.pf-gallery__thumb {
width: 64px; height: 64px;
padding: 0;
background: #fff;
border: 2px solid var(--pf-cloud);
border-radius: 4px;
overflow: hidden;
cursor: pointer;
transition: border-color .15s, transform .15s;
}
.pf-gallery__thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.pf-gallery__thumb:hover { border-color: var(--pf-cobalt); transform: translateY(-2px); }
.pf-gallery__thumb.is-active {
border-color: var(--pf-cobalt);
box-shadow: 0 0 0 2px rgba(37,99,235,.2);
}
/* ---------- PDP (product detail panel) ---------- */
.pf-pdp { display: flex; flex-direction: column; gap: 14px; }
.pf-pdp__plat {
font-family: 'Courier New', monospace;
font-size: 11.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--pf-cobalt);
font-weight: 700;
margin: 0;
}
.pf-pdp h1 {
font-family: var(--pf-font-disp);
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.02em;
line-height: 1.1;
margin: 0;
}
.pf-pdp__meta {
font-family: 'Courier New', monospace;
font-size: 12.5px;
line-height: 1.7;
color: var(--pf-ink-soft);
margin: 0;
letter-spacing: .03em;
}
.pf-pdp__meta strong { color: var(--pf-navy); font-weight: 700; }
.pf-pdp__pricebox {
background: var(--pf-paper);
border: 1px solid var(--pf-cloud);
border-radius: 8px;
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 6px;
}
.pf-pdp__price {
font-family: var(--pf-font-disp);
font-size: 36px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.02em;
line-height: 1;
}
.pf-pdp__price-old {
display: inline-block;
font-size: 16px;
color: var(--pf-graphite);
text-decoration: line-through;
margin-left: 12px;
font-weight: 400;
letter-spacing: 0;
}
.pf-pdp__shipinfo {
font-family: 'Courier New', monospace;
font-size: 11.5px;
color: var(--pf-graphite);
margin: 0;
letter-spacing: .04em;
line-height: 1.55;
}
.pf-pdp__buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.pf-pdp__buttons .pf-btn { flex: 1; min-width: 200px; }
.pf-pdp__facts {
list-style: none;
padding: 0;
margin: 6px 0 0;
display: grid;
gap: 8px;
border-top: 1px dashed var(--pf-cloud);
padding-top: 14px;
}
.pf-pdp__facts li {
font-size: 13px;
line-height: 1.6;
color: var(--pf-ink-soft);
font-family: 'Courier New', monospace;
letter-spacing: .02em;
}
.pf-pdp__facts strong { color: var(--pf-navy); font-weight: 700; }
.pf-pdp__desc {
margin: 30px 0 0;
padding: 30px 0 0;
border-top: 1px solid var(--pf-cloud);
max-width: 70ch;
}
.pf-pdp__desc h3 {
font-family: var(--pf-font-disp);
font-size: 22px;
font-weight: 600;
color: var(--pf-navy);
margin: 0 0 12px;
letter-spacing: -.005em;
}
.pf-pdp__desc p {
font-size: 15.5px;
line-height: 1.75;
color: var(--pf-ink);
margin: 0;
}
@media (max-width: 880px) {
.pf-product { grid-template-columns: 1fr; gap: 24px; }
.pf-gallery__main { padding: 24px; min-height: 320px; }
.pf-gallery__thumbs { padding: 0 24px 22px; }
}
/* =========================================================================
JOURNAL INDEX (.pf-journal-* / .pf-toc* / .pf-stories / .pf-story extras)
========================================================================= */
.pf-journal-head {
padding: 60px 0 40px;
background:
linear-gradient(180deg, var(--pf-paper) 0%, #fff 100%);
border-bottom: 1px solid var(--pf-cloud);
}
.pf-journal-eye {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
}
.pf-journal-eye__no {
font-family: var(--pf-font-disp);
font-size: 14px;
font-weight: 700;
color: var(--pf-cobalt);
letter-spacing: .12em;
}
.pf-journal-eye__date {
font-family: 'Courier New', monospace;
font-size: 12px;
color: var(--pf-graphite);
letter-spacing: .04em;
}
.pf-journal-h1 {
font-family: var(--pf-font-disp);
font-size: clamp(44px, 5.5vw, 64px);
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.025em;
line-height: 1.02;
margin: 0 0 18px;
font-style: italic;
}
.pf-journal-lede {
font-family: var(--pf-font-disp);
font-size: clamp(18px, 1.8vw, 21px);
line-height: 1.55;
color: var(--pf-ink);
margin: 0 0 24px;
max-width: 65ch;
font-weight: 400;
}
.pf-journal-meta {
display: flex;
gap: 28px;
flex-wrap: wrap;
font-family: 'Courier New', monospace;
font-size: 12.5px;
color: var(--pf-graphite);
letter-spacing: .04em;
padding-top: 18px;
border-top: 1px dashed var(--pf-cloud);
}
.pf-journal-meta strong { color: var(--pf-navy); font-weight: 700; }
.pf-journal-wrap {
padding: 50px 0 90px;
background: #fff;
}
.pf-journal-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 60px;
align-items: start;
}
/* ---------- TOC (sidebar) ---------- */
.pf-toc {
position: sticky;
top: 110px;
}
.pf-toc__inner {
background: var(--pf-paper);
border: 1px solid var(--pf-cloud);
border-radius: 8px;
padding: 22px 24px;
}
.pf-toc__kicker {
font-family: 'Courier New', monospace;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--pf-cobalt);
font-weight: 700;
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--pf-cloud);
}
.pf-toc__list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: toc;
}
.pf-toc__list li { margin-bottom: 12px; }
.pf-toc__list a {
display: grid;
grid-template-columns: 26px 1fr;
gap: 10px;
text-decoration: none;
align-items: start;
padding: 6px 0;
transition: transform .12s;
}
.pf-toc__list a:hover { transform: translateX(2px); }
.pf-toc__no {
font-family: var(--pf-font-disp);
font-size: 14px;
font-weight: 700;
color: var(--pf-cobalt);
letter-spacing: .04em;
}
.pf-toc__text {
display: grid;
gap: 2px;
}
.pf-toc__tag {
font-family: 'Courier New', monospace;
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pf-graphite);
font-weight: 700;
}
.pf-toc__title {
font-family: var(--pf-font-disp);
font-size: 14px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.005em;
line-height: 1.3;
}
.pf-toc__list a.is-active .pf-toc__title { color: var(--pf-cobalt); }
.pf-toc__feed {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--pf-cloud);
font-family: 'Courier New', monospace;
font-size: 11.5px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
color: var(--pf-cobalt);
text-decoration: none;
width: 100%;
}
.pf-toc__feed:hover { color: var(--pf-navy); }
/* ---------- Stories (articles flow) ---------- */
.pf-stories {
display: flex;
flex-direction: column;
gap: 60px;
}
.pf-stories .pf-story {
display: block;
padding: 0;
border-bottom: 1px dashed var(--pf-cloud);
padding-bottom: 50px;
}
.pf-stories .pf-story:last-child { border-bottom: none; padding-bottom: 0; }
.pf-story__hd { margin-bottom: 18px; }
.pf-story__tag {
font-family: 'Courier New', monospace;
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pf-cobalt);
font-weight: 700;
margin: 0 0 8px;
}
.pf-story__hd h2 {
font-family: var(--pf-font-disp);
font-size: clamp(28px, 3.4vw, 38px);
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.02em;
line-height: 1.15;
margin: 0;
}
.pf-stories .pf-story__media {
position: static;
margin: 0 0 22px;
}
.pf-stories .pf-story__media img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 8px;
display: block;
box-shadow: 0 14px 32px rgba(14,42,77,.10);
}
.pf-stories .pf-story__media figcaption {
font-family: 'Courier New', monospace;
font-size: 12px;
color: var(--pf-graphite);
margin-top: 8px;
letter-spacing: .03em;
font-style: italic;
}
.pf-story__body {
font-family: var(--pf-font-body, 'Inter', sans-serif);
font-size: 16px;
line-height: 1.78;
color: var(--pf-ink);
max-width: 68ch;
}
.pf-story__body p { margin: 0 0 18px; }
.pf-story__body p strong { color: var(--pf-navy); font-weight: 600; }
.pf-story__body p em { font-style: italic; color: var(--pf-cobalt); }
.pf-story__body a {
color: var(--pf-cobalt);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.pf-story__body h3 {
font-family: var(--pf-font-disp);
font-size: 20px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.005em;
margin: 26px 0 10px;
line-height: 1.3;
}
.pf-story__lede {
font-family: var(--pf-font-disp);
font-size: 19px;
line-height: 1.55;
color: var(--pf-navy);
font-weight: 400;
font-style: italic;
margin: 0 0 22px;
padding-left: 18px;
border-left: 3px solid var(--pf-cobalt);
}
@media (max-width: 880px) {
.pf-journal-layout { grid-template-columns: 1fr; gap: 30px; }
.pf-toc { position: static; }
}
/* =========================================================================
UTFÖRSÄLJNINGEN (.pf-mega-hero* / .pf-promise* / .pf-finalcta*)
========================================================================= */
.pf-mega-hero {
padding: 50px 0 70px;
background:
radial-gradient(60% 60% at 90% 0%, rgba(37,99,235,.08), transparent 70%),
linear-gradient(180deg, #fff 0%, var(--pf-paper) 100%);
border-bottom: 1px solid var(--pf-cloud);
}
.pf-mega-hero__row {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 50px;
align-items: start;
}
.pf-mega-hero__title {
font-family: var(--pf-font-disp);
font-size: clamp(40px, 5.4vw, 60px);
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.025em;
line-height: 1.04;
margin: 8px 0 18px;
}
.pf-mega-hero__title em { font-style: italic; color: var(--pf-cobalt); }
.pf-mega-hero__lead {
font-size: 16px;
line-height: 1.75;
color: var(--pf-ink-soft);
margin: 0 0 26px;
max-width: 60ch;
}
.pf-mega-hero__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 18px 0;
border-top: 1px dashed var(--pf-cloud);
border-bottom: 1px dashed var(--pf-cloud);
margin: 0 0 26px;
}
.pf-mega-hero__stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.pf-mega-hero__stat strong {
font-family: var(--pf-font-disp);
font-size: 22px;
font-weight: 700;
color: var(--pf-cobalt);
letter-spacing: -.01em;
line-height: 1;
}
.pf-mega-hero__stat span {
font-family: 'Courier New', monospace;
font-size: 11.5px;
color: var(--pf-graphite);
letter-spacing: .04em;
line-height: 1.5;
}
.pf-mega-hero__cta {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.pf-mega-hero__side {
background: #fff;
border: 1px dashed var(--pf-cobalt);
border-radius: 8px;
padding: 22px 26px;
margin: 0;
}
.pf-mega-hero__side h3 {
font-family: var(--pf-font-disp);
font-size: 16px;
font-weight: 600;
color: var(--pf-navy);
margin: 0 0 14px;
letter-spacing: -.005em;
padding-bottom: 10px;
border-bottom: 1px dashed var(--pf-cloud);
}
.pf-mega-hero__side ol {
padding-left: 0;
margin: 0;
list-style: none;
counter-reset: side;
display: grid;
gap: 10px;
}
.pf-mega-hero__side ol li {
counter-increment: side;
position: relative;
padding-left: 28px;
font-size: 13.5px;
line-height: 1.6;
color: var(--pf-ink-soft);
font-family: 'Courier New', monospace;
letter-spacing: .01em;
}
.pf-mega-hero__side ol li::before {
content: counter(side, decimal-leading-zero);
position: absolute;
left: 0; top: 1px;
font-family: var(--pf-font-disp);
font-size: 14px;
font-weight: 700;
color: var(--pf-cobalt);
letter-spacing: 0;
}
.pf-mega-hero__side ol li strong { color: var(--pf-navy); font-weight: 700; }
/* ---------- Promises ---------- */
.pf-promises {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.pf-promise {
background: #fff;
border: 1px solid var(--pf-cloud);
border-radius: 8px;
padding: 22px 24px 24px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pf-promise:hover {
border-color: var(--pf-cobalt);
box-shadow: 0 16px 32px rgba(14,42,77,.10);
transform: translateY(-2px);
}
.pf-promise__num {
font-family: var(--pf-font-disp);
font-size: 22px;
font-weight: 700;
color: var(--pf-cobalt);
letter-spacing: -.01em;
line-height: 1;
}
.pf-promise__title {
font-family: var(--pf-font-disp);
font-size: 17px;
font-weight: 600;
color: var(--pf-navy);
letter-spacing: -.005em;
line-height: 1.3;
margin: 0;
}
.pf-promise__body {
font-size: 13.5px;
line-height: 1.65;
color: var(--pf-ink-soft);
margin: 0;
}
/* ---------- Final CTA ---------- */
.pf-finalcta {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 40px;
align-items: center;
background:
radial-gradient(circle at 100% 0%, rgba(56,189,248,.10), transparent 60%),
var(--pf-paper);
border: 1px dashed var(--pf-cobalt);
border-radius: 10px;
padding: 36px 40px;
}
.pf-finalcta__cta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
@media (max-width: 880px) {
.pf-mega-hero__row { grid-template-columns: 1fr; gap: 30px; }
.pf-mega-hero__stats { grid-template-columns: 1fr; }
.pf-promises { grid-template-columns: 1fr 1fr; }
.pf-finalcta { grid-template-columns: 1fr; padding: 26px; gap: 20px; }
.pf-finalcta__cta { align-items: flex-start; }
}
@media (max-width: 560px) {
.pf-promises { grid-template-columns: 1fr; }
}
/* ---------- Cookie Banner ---------- */
.pf-cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--pf-navy-deep);
color: #fff;
z-index: 1000;
box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
border-top: 1px solid var(--pf-steel);
}
.pf-cookie-banner__row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 16px 24px;
flex-wrap: wrap;
}
.pf-cookie-banner__text p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,0.9);
}
.pf-cookie-banner__text a {
color: var(--pf-cyan-soft);
text-decoration: underline;
font-weight: 500;
}
.pf-cookie-banner__text a:hover {
color: #fff;
}
.pf-cookie-banner__actions {
flex-shrink: 0;
}
@media (max-width: 600px) {
.pf-cookie-banner__row {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
}
.pf-cookie-banner__actions {
align-self: flex-end;
}
}