/* ==========================================================================
Property Poker Network
Shared visual system for every public marketing page.
========================================================================== */
/*
"The Seasons" (Bold) is PPN's licensed display serif (brand-reference.md
§2), not self-hosted yet, since the licensed webfont files haven't been
obtained from the foundry. --display already lists "The Seasons" first
below, so there is nothing else to change once it's ready: with no
matching @font-face registered, browsers silently skip it and fall
through to the next name in the stack.
Until then, every page loads Google's "Playfair Display" (see the
tags in each page's ) as an interim stand-in, a bold,
high-contrast editorial serif in the same spirit as The Seasons,
rather than every headline sitewide quietly falling all the way back
to plain Georgia. It sits second in --display below, so it's a no-op
the moment the real licensed font is dropped in.
When the licensed .woff2 files are in hand: drop them in site/fonts/,
uncomment this block, confirm the filenames/weights match, and remove
the Playfair Display tags from each page's .
@font-face {
font-family: "The Seasons";
src: url("fonts/TheSeasons-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
*/
:root {
--paper: #f8f5ef;
--paper-deep: #eee8de;
--white: #fffdf9;
--ink: #22191a;
--ink-soft: #655b5b;
--wine: #751515;
--wine-dark: #2a1114;
--wine-mid: #4b1115;
--red: #cf5153;
--gold: #e9c46d;
--gold-light: #f5e6b3;
--brown: #715734;
--line: rgba(42, 17, 20, 0.15);
--line-light: rgba(255, 255, 255, 0.16);
--nicky-cyan: #47ded8;
--nicky-orange: #ffc228;
--nicky-red: #ff4f58;
--display: "The Seasons", "Playfair Display", Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
--body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--container: 1200px;
--side: clamp(20px, 4vw, 56px);
--section: clamp(76px, 9vw, 132px);
--shadow: 0 30px 80px rgba(28, 8, 11, 0.2);
/* Soft pastel tints for info-card backgrounds only, mixed from existing brand tokens,
deliberately distinct from the Nicky charity sub-palette (brand-reference.md §1c),
which stays reserved for charity-pillar content. */
--tint-wine: color-mix(in srgb, var(--red) 14%, var(--white));
--tint-gold: color-mix(in srgb, var(--gold) 22%, var(--white));
--tint-brown: color-mix(in srgb, var(--brown) 16%, var(--white));
--tint-neutral: var(--paper-deep);
}
/* Reset and accessibility */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
overflow-x: hidden;
background: var(--paper);
color: var(--ink);
font-family: var(--body);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
body.menu-is-open {
overflow: hidden;
}
img,
svg {
display: block;
max-width: 100%;
}
button,
input,
textarea,
select {
font: inherit;
}
a {
color: inherit;
}
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
}
h1,
h2,
h3 {
font-family: var(--display);
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.035em;
}
h1 {
font-size: clamp(3.6rem, 8vw, 7.8rem);
}
h2 {
font-size: clamp(2.6rem, 5vw, 5.35rem);
}
h3 {
font-size: clamp(1.45rem, 2vw, 2rem);
}
::selection {
background: var(--gold);
color: var(--wine-dark);
}
:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 4px;
}
.skip-link {
position: fixed;
left: 16px;
top: 12px;
z-index: 200;
padding: 10px 16px;
background: var(--gold);
color: var(--wine-dark);
font-weight: 800;
transform: translateY(-150%);
}
.skip-link:focus {
transform: translateY(0);
}
.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;
}
.container {
width: min(100%, var(--container));
margin-inline: auto;
padding-inline: var(--side);
}
.section {
padding-block: var(--section);
}
.eyebrow {
margin-bottom: 22px;
color: var(--wine);
font-size: 0.73rem;
font-weight: 800;
letter-spacing: 0.16em;
line-height: 1.25;
text-transform: uppercase;
}
.eyebrow--light {
color: var(--gold);
}
.section-heading {
max-width: 760px;
margin-bottom: clamp(42px, 6vw, 72px);
}
.section-heading h2 {
margin-bottom: 24px;
}
.section-heading > p:last-child {
max-width: 590px;
color: var(--ink-soft);
font-size: clamp(1rem, 1.6vw, 1.16rem);
}
.section-heading--center {
margin-inline: auto;
text-align: center;
}
.section-heading--center > p:last-child {
margin-inline: auto;
}
.button-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 22px;
margin-top: 36px;
}
.button {
display: inline-flex;
min-height: 54px;
align-items: center;
justify-content: center;
padding: 14px 25px;
border: 1px solid transparent;
border-radius: 100px;
font-size: 0.83rem;
font-weight: 800;
letter-spacing: 0.04em;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}
.button:hover {
transform: translateY(-2px);
}
.button--small {
min-height: 42px;
padding: 12px 19px;
}
.button--gold {
background: var(--gold);
color: var(--wine-dark);
}
.button--gold:hover {
background: var(--gold-light);
}
.button--light {
background: var(--white);
color: var(--wine-dark);
}
.button--ink {
background: var(--wine-dark);
color: var(--white);
}
.button--ink:hover {
background: var(--wine);
}
.button--outline {
background: transparent;
border-color: rgba(255, 255, 255, 0.45);
color: var(--white);
}
.button--outline:hover {
background: rgba(255, 255, 255, 0.12);
border-color: var(--white);
}
.button--block {
width: 100%;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 3px;
border-bottom: 1px solid currentColor;
color: var(--wine);
font-size: 0.86rem;
font-weight: 800;
text-decoration: none;
transition: gap 180ms ease;
}
.text-link:hover {
gap: 12px;
}
.text-link--light {
color: var(--white);
}
.empty-state {
padding: 28px;
border: 1px dashed var(--line);
color: var(--ink-soft);
}
/* Header */
.site-header {
position: sticky;
top: 0;
z-index: 100;
min-height: 84px;
border-bottom: 1px solid rgba(233, 196, 109, 0.24);
color: var(--white);
}
/* The header's blur/background lives on a pseudo-element rather than the
header itself. backdrop-filter (like transform/filter) makes the element
it's applied to a containing block for position:fixed descendants -
with it on .site-header directly, the mobile nav's position:fixed
dropdown was sizing itself against the ~84px header box instead of the
viewport, collapsing to a sliver with no backdrop behind most of its
content. Keeping the visual effect on ::before instead avoids that. */
.site-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: #2a1114;
background-image: linear-gradient(90deg, #2a1114 0%, #3a1217 58%, #241012 100%);
backdrop-filter: blur(16px);
}
.site-header-inner {
width: min(100%, var(--container));
min-height: 84px;
margin-inline: auto;
padding-inline: var(--side);
display: flex;
align-items: center;
justify-content: space-between;
gap: 34px;
}
.site-brand {
display: inline-flex;
flex: none;
align-items: center;
gap: 13px;
color: var(--white);
text-decoration: none;
}
.brand-monogram {
color: var(--red);
font-family: var(--body);
font-size: 1.45rem;
font-weight: 900;
letter-spacing: -0.06em;
}
.brand-name {
padding-left: 13px;
border-left: 1px solid var(--line-light);
font-family: Arial, Helvetica, sans-serif;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.11em;
line-height: 1.25;
text-transform: uppercase;
}
.site-navigation {
display: flex;
align-items: center;
gap: 30px;
}
.site-navigation ul {
display: flex;
align-items: center;
gap: 28px;
list-style: none;
}
.site-navigation ul a {
position: relative;
padding-block: 8px;
color: rgba(255, 253, 249, 0.82);
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.01em;
text-decoration: none;
}
.site-navigation ul a::after {
content: "";
position: absolute;
right: 0;
bottom: 3px;
left: 0;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: right;
transition: transform 180ms ease;
}
.site-navigation ul a:hover,
.site-navigation ul a.is-active {
color: var(--white);
}
.site-navigation ul a:hover::after,
.site-navigation ul a.is-active::after {
transform: scaleX(1);
transform-origin: left;
}
/* Four CTA pills (Join the Community, Become a sponsor, Donate a prize,
Next event) plus five nav links don't fit one row in the 1200px
container without overflowing - even with white-space: nowrap forcing
each pill to stay on one line, there simply isn't room for four pills.
Per brand-reference.md §7a ("one accent leads per screen" - never two
interactive accents competing at once), the fix is restraint, not a
width hack: above the mobile breakpoint, only the single highest-
priority CTA (Next event - ticket sales) stays a filled pill, and the
other three drop back to plain text links, same treatment the old
"Member sign in" link used. Below 820px the nav stacks vertically (see
.site-navigation's mobile rules) where there's no width pressure, so
all four stay full buttons there. */
@media (min-width: 821px) {
.site-navigation .join-community-link,
.site-navigation .sponsor-link,
.site-navigation .donate-prize-link {
min-height: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--gold);
font-family: Arial, Helvetica, sans-serif;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.site-navigation .join-community-link:hover,
.site-navigation .sponsor-link:hover,
.site-navigation .donate-prize-link:hover {
background: transparent;
border-color: transparent;
color: var(--gold-light);
transform: none;
}
}
/* Between the mobile hamburger breakpoint (820px) and desktop (~1150px),
five nav links plus three secondary CTA links (demoted to plain text
above) still don't fit the 1200px container's available width, even
with the existing Tablet breakpoint's gap reduction below. Isolated to
its own range/rules rather than widening the Tablet breakpoint, so it
doesn't also pull in that block's unrelated grid-column rules early. */
@media (min-width: 821px) and (max-width: 1150px) {
/* The "Property Poker Network" wordmark next to the PPN monogram is the
single biggest reclaimable chunk of header width in this range - the
monogram alone still identifies the brand, same tradeoff already made
below 520px (see .brand-name's other display:none rule). */
.brand-name {
display: none;
}
.site-header-inner {
gap: 14px;
padding-inline: 20px;
}
.site-navigation {
gap: 10px;
}
.site-navigation ul {
gap: 9px;
}
.site-navigation ul a {
font-size: 0.7rem;
}
.site-navigation .join-community-link,
.site-navigation .sponsor-link,
.site-navigation .donate-prize-link {
font-size: 0.62rem;
letter-spacing: 0.03em;
}
.site-navigation .button--light {
min-height: 38px;
padding: 10px 16px;
}
}
.menu-button {
display: none;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid var(--line-light);
border-radius: 50%;
background: transparent;
color: var(--white);
}
.menu-button > span:not(.visually-hidden) {
display: block;
width: 19px;
height: 1px;
margin: 5px auto;
background: currentColor;
transition: transform 180ms ease;
}
.menu-button[aria-expanded="true"] > span:nth-last-child(2) {
transform: translateY(3px) rotate(45deg);
}
.menu-button[aria-expanded="true"] > span:last-child {
transform: translateY(-3px) rotate(-45deg);
}
/* Home hero */
.home-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 82% 22%, rgba(207, 81, 83, 0.18), transparent 29%),
var(--wine-dark);
color: var(--white);
}
.home-hero-copy {
position: relative;
z-index: 2;
padding-top: clamp(72px, 9vw, 128px);
max-width: 1040px;
}
.home-hero h1 {
max-width: 980px;
font-size: clamp(5.4rem, 10.5vw, 10.8rem);
letter-spacing: -0.055em;
}
.home-hero h1 em {
color: var(--gold);
font-weight: inherit;
}
.home-hero-lead {
max-width: 610px;
margin-top: 32px;
color: rgba(255, 255, 255, 0.73);
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
line-height: 1.65;
}
/* The hero's two stories, side by side: past events (fan, left) and the
next-event invitation (right). "Discover our journey. Receive your
invitation. Join the next table." */
.hero-story {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.2fr 1fr;
align-items: start;
gap: clamp(32px, 5vw, 72px);
margin-top: clamp(56px, 9vw, 104px);
padding-bottom: clamp(48px, 7vw, 88px);
}
/* Signature Playing Card Gallery, a fanned "hand" of past PPN events, the
homepage's signature visual. Cards show real photography or, lacking
that, an illustrated card back, never a broken/generic image. */
.event-fan {
position: relative;
}
.event-fan-list {
display: flex;
align-items: flex-end;
justify-content: flex-start;
list-style: none;
}
.event-fan-card {
--fan-rotate: 0deg;
--fan-lift: 0px;
position: relative;
flex: none;
width: clamp(160px, 16vw, 224px);
aspect-ratio: 3 / 4.3;
overflow: hidden;
border-radius: 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: var(--shadow);
background: var(--wine-mid);
transform: translateY(var(--fan-lift)) rotate(var(--fan-rotate));
transform-origin: bottom center;
transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 320ms ease;
}
.event-fan-card + .event-fan-card {
margin-left: -30px;
}
.event-fan-card:nth-child(1) {
--fan-rotate: -18deg;
--fan-lift: 10px;
z-index: 1;
}
.event-fan-card:nth-child(2) {
--fan-rotate: -1deg;
--fan-lift: -10px;
z-index: 2;
}
.event-fan-card:nth-child(3) {
--fan-rotate: 16deg;
--fan-lift: 12px;
z-index: 3;
}
/* Photo/back-card hover only deepens the shadow, the flip itself (on the
.event-fan-flip button inside) is the hover feedback, so the outer card
doesn't also lift/rotate on top of it (one effect per element). */
.event-fan-card--photo:hover,
.event-fan-card--back:hover,
.event-fan-card--photo:has(.is-flipped),
.event-fan-card--back:has(.is-flipped) {
z-index: 9;
box-shadow: 0 40px 90px rgba(28, 8, 11, 0.34);
}
/* Flip mechanism: a real