:root { color-scheme: light; --ink: oklch(23% .035 258); --paper: oklch(97% .018 89); --cream: oklch(92% .035 86); --red: oklch(50% .19 27); --line: color-mix(in oklch, var(--ink) 20%, transparent); }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.5; } a { color: inherit; } main { overflow: hidden; }
.site-nav, .hero, .game, .outlook, footer { padding-inline: clamp(1.5rem, 6vw, 7rem); } .site-nav { display: flex; justify-content: space-between; align-items: baseline; padding-block: 1.5rem; font-family: "Trebuchet MS", sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .08em; } .wordmark { text-decoration: none; } .wordmark span { color: var(--red); } .nav-link { text-underline-offset: .28em; }
.hero { min-height: min(760px, calc(100svh - 4.3rem)); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(180px, .8fr); align-items: center; gap: 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .intro, .game-header > p, .status, footer, .privacy-kicker { font-family: "Trebuchet MS", sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .intro { margin: 0 0 1.2rem; color: var(--red); } h1, h2 { font-weight: 400; line-height: .93; letter-spacing: -.035em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(3.8rem, 8vw, 7.6rem); max-width: 9ch; } .lead { max-width: 38rem; margin: 2rem 0 1.7rem; font-size: clamp(1.05rem, 1.7vw, 1.35rem); } .text-link { font-family: "Trebuchet MS", sans-serif; font-weight: 700; text-underline-offset: .32em; } .text-link span { color: var(--red); font-size: 1.4em; vertical-align: -.06em; }
.suits { position: relative; min-height: 300px; transform: rotate(-9deg); } .suits span { position: absolute; font-size: clamp(5rem, 11vw, 10rem); line-height: 1; } .suits span:nth-child(1) { top: 2%; left: 3%; } .suits span:nth-child(2) { top: 24%; right: 3%; color: var(--red); } .suits span:nth-child(3) { bottom: 2%; left: 24%; } .suits span:nth-child(4) { bottom: 8%; right: 20%; color: var(--red); }
.game { padding-block: clamp(5rem, 11vw, 10rem); background: var(--ink); color: var(--paper); } .game-header { max-width: 60rem; } .game-header > p { margin: 0 0 1rem; color: oklch(80% .08 80); } .game h2 { font-size: clamp(3.7rem, 9vw, 8rem); } .game-description { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: clamp(2rem, 8vw, 9rem); max-width: 61rem; margin: 3rem 0 3.5rem; } .game-description p { margin: 0; font-size: clamp(1.1rem, 1.8vw, 1.45rem); } .game-description .status { color: oklch(85% .025 255); line-height: 1.65; }
.card-table { position: relative; min-height: clamp(260px, 29vw, 420px); background: oklch(32% .045 166); overflow: hidden; border: 1px solid oklch(58% .06 161); box-shadow: inset 0 0 0 1rem oklch(27% .04 164); } .card-table::before, .card-table::after { content: ""; position: absolute; width: 19rem; height: 19rem; border: 1px solid oklch(55% .06 160); border-radius: 50%; } .card-table::before { top: -12rem; left: -5rem; } .card-table::after { bottom: -15rem; right: -4rem; } .playing-card { position: absolute; display: flex; flex-direction: column; justify-content: space-between; width: clamp(5.2rem, 9vw, 8.5rem); aspect-ratio: .7; padding: .55em; background: var(--paper); border-radius: .18rem; box-shadow: .65rem .9rem 1.4rem oklch(17% .03 165 / .35); font-family: "Trebuchet MS", sans-serif; font-size: clamp(1.2rem, 2vw, 2rem); } .playing-card span { align-self: flex-end; font-size: 1.8em; } .card-one { left: 13%; top: 22%; transform: rotate(-15deg); } .card-two { left: 34%; top: 11%; transform: rotate(-3deg); color: var(--red); } .card-three { right: 30%; top: 19%; transform: rotate(9deg); } .card-four { right: 10%; top: 31%; transform: rotate(19deg); color: var(--red); }
.outlook { padding-block: clamp(6rem, 14vw, 13rem); max-width: 70rem; } .outlook p { margin: 0 0 1rem; color: var(--red); font-family: "Trebuchet MS", sans-serif; font-size: .9rem; font-weight: 700; } .outlook h2 { font-size: clamp(2.8rem, 6vw, 5.5rem); max-width: 14ch; } footer { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--line); } footer p { margin: 0; } footer a { text-underline-offset: .3em; }
@media (prefers-reduced-motion: no-preference) { .hero-copy { animation: rise .75s cubic-bezier(.16, 1, .3, 1) both; } .suits { animation: deal 1s .12s cubic-bezier(.16, 1, .3, 1) both; } @keyframes rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } } @keyframes deal { from { opacity: 0; transform: translateX(2rem) rotate(4deg); } to { opacity: 1; transform: rotate(-9deg); } } }
@media (max-width: 700px) { .hero { grid-template-columns: 1fr; padding-block: 5.5rem 2rem; min-height: auto; } .suits { min-height: 210px; max-width: 280px; justify-self: end; width: 100%; } .game-description { grid-template-columns: 1fr; } .game-description .status { max-width: 34rem; } .card-table { margin-inline: -1.5rem; } } @media (max-width: 420px) { body { font-size: 16px; } }