/* ========================================================================== GAME FACE — marketing landing page. Separate from style.css (which dresses the legal/support pages and must keep working untouched). Shares the same Casino Noir tokens so the two never drift apart visually. Type: Anton for display, Manrope for UI — the faces the app itself ships (mobile/src/theme.ts). The brand book still names Cinzel for display; the product moved to Anton and the site follows the product. ========================================================================== */ /* Self-hosted faces — see the note in index.html's for why these are not coming from Google Fonts. swap keeps text visible while they load. */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/anton-400.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/manrope-400.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/manrope-700.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/manrope-800.woff2') format('woff2'); } :root { --felt: #0b3d2e; --felt-lit: #11593f; --ink: #050f0b; --ink-deep: #030907; --cream: #f4efe6; --cream-dim: rgba(244, 239, 230, 0.7); /* 0.45 measured 4.05:1 on the footer's ink-deep ground — under AA. 0.55 is 5.6:1 and clears it with headroom. */ --cream-faint: rgba(244, 239, 230, 0.55); --gold: #e9c46a; --gold-hi: #f4d780; --gold-deep: #b8860b; --hairline: rgba(233, 196, 106, 0.22); --shell: min(1180px, 92vw); --display: "Anton", "Arial Narrow", Impact, sans-serif; --ui: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; margin: 0; } html { scroll-behavior: smooth; /* The nav is fixed, so an un-padded anchor jump parks the section heading underneath it. One line, fixes every in-page link. */ scroll-padding-top: 92px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--ink); color: var(--cream); font: 400 17px/1.65 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Display type ------------------------------------------------------------ */ .display { font-family: var(--display); font-weight: 400; /* Anton is a single ultra-bold weight */ text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.06; /* Anton's own line box is tall; see theme.ts */ } .eyebrow { font: 700 12px/1 var(--ui); letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); } /* Gold foil, used sparingly — the brand rule is noir with sharp gold. */ .foil { background: linear-gradient(172deg, var(--gold-hi) 0%, var(--gold) 42%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Nav --------------------------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; gap: 28px; padding: 16px max(24px, 4vw); transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease; border-bottom: 1px solid transparent; } .nav.stuck { background: rgba(3, 9, 7, 0.82); backdrop-filter: blur(14px); border-bottom-color: var(--hairline); } .nav__mark { display: flex; align-items: center; gap: 11px; margin-right: auto; } .nav__mark img { width: 34px; height: 34px; } .nav__name { font-family: var(--display); font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; } .nav__links { display: flex; gap: 26px; font: 700 12px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); } .nav__links a:hover { color: var(--gold-hi); } /* Below 820px the section anchors go, but Support stays — hiding the whole row left a phone visitor with no navigation at all and no menu to open. */ @media (max-width: 820px) { .nav__links > a:not([href="support.html"]) { display: none; } .nav__links { gap: 0; } } /* Hero -------------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; } .hero__bg { position: absolute; inset: 0; background: url("assets/art/room-yacht.jpg") center 46% / cover no-repeat; transform: scale(1.08); will-change: transform; } /* Two scrims: a vertical one to seat the type, a radial one to focus the table. */ .hero__scrim { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 62%, transparent 0%, rgba(3, 9, 7, 0.55) 62%, rgba(3, 9, 7, 0.94) 100%), linear-gradient(180deg, rgba(3, 9, 7, 0.86) 0%, rgba(3, 9, 7, 0.24) 34%, rgba(3, 9, 7, 0.72) 78%, var(--ink) 100%); } /* WebGL dust sits between scrim and type. Purely decorative — the page is complete and correct if the canvas never initialises. */ /* An explicit box, not just inset:0. A canvas with no CSS size falls back to its own 300x150 intrinsic size, so clientWidth read the BITMAP rather than the hero — and hero.js's resize() then set the bitmap from clientWidth, doubling it on every resize event. */ #dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hero__inner { position: relative; z-index: 2; width: var(--shell); text-align: center; padding: 120px 0 90px; } .hero__mark { width: 108px; height: 108px; margin: 0 auto 26px; filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.7)); } .hero h1 { font-size: clamp(54px, 11.5vw, 132px); margin: 0 0 4px; } .hero h1 .line2 { display: block; } .hero__sub { max-width: 34ch; margin: 22px auto 0; font-size: clamp(17px, 2.1vw, 21px); line-height: 1.55; color: var(--cream-dim); text-wrap: balance; } .hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; } /* Store badges — deliberately NOT links. The app is not on either store yet and a badge that looks tappable would be a promise we cannot keep. */ .badge { display: flex; align-items: center; gap: 11px; padding: 12px 20px; border-radius: 12px; border: 1px solid var(--hairline); background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(6px); } .badge svg { width: 22px; height: 22px; fill: var(--cream); flex: none; } .badge__text { text-align: left; line-height: 1.25; } .badge__top { font: 700 9px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .badge__store { font: 700 15px/1.2 var(--ui); color: var(--cream); } .scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; font: 700 10px/1 var(--ui); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream-faint); display: flex; flex-direction: column; align-items: center; gap: 10px; } .scrollcue span:last-child { width: 1px; height: 42px; background: linear-gradient(180deg, var(--gold), transparent); } /* Section furniture ------------------------------------------------------- */ section { position: relative; } .shell { width: var(--shell); margin: 0 auto; } .band { padding: clamp(84px, 12vw, 150px) 0; } .band--felt { background: radial-gradient(90% 120% at 50% 0%, rgba(17, 89, 63, 0.5) 0%, transparent 62%), var(--ink); } .sec-head { max-width: 660px; } .sec-head--mid { margin: 0 auto; text-align: center; } .sec-head h2 { font-size: clamp(34px, 5.6vw, 62px); margin: 14px 0 0; } .sec-head p { margin-top: 18px; color: var(--cream-dim); font-size: clamp(16px, 1.9vw, 19px); } .rule-gold { width: 88px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin: 26px 0 0; } .sec-head--mid .rule-gold { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* Pillars ----------------------------------------------------------------- */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 62px; } @media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } } .pillar { border: 1px solid var(--hairline); border-radius: 16px; background: linear-gradient(168deg, rgba(17, 89, 63, 0.28), rgba(0, 0, 0, 0.34)); padding: 34px 30px 32px; } .pillar__ico { width: 40px; height: 40px; margin-bottom: 20px; stroke: var(--gold); fill: none; stroke-width: 1.4; } .pillar h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; font-size: 25px; line-height: 1.2; } .pillar p { margin-top: 12px; color: var(--cream-dim); font-size: 16px; } /* Rooms rail -------------------------------------------------------------- */ .rooms { display: flex; gap: 20px; overflow-x: auto; padding: 56px max(24px, 4vw) 20px; scroll-snap-type: x mandatory; } .rooms::-webkit-scrollbar { height: 6px; } .rooms::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; } .room { position: relative; flex: 0 0 clamp(240px, 30vw, 330px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; scroll-snap-align: center; border: 1px solid var(--hairline); } .room img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); } .room:hover img { transform: scale(1.06); } .room__cap { position: absolute; inset: auto 0 0 0; padding: 46px 22px 20px; background: linear-gradient(180deg, transparent, rgba(3, 9, 7, 0.92)); } .room__cap b { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.09em; font-size: 21px; } .room__cap span { font-size: 13px; color: var(--cream-dim); } /* Steps ------------------------------------------------------------------- */ .steps { counter-reset: s; margin-top: 58px; display: grid; gap: 2px; } .step { display: grid; grid-template-columns: 74px 1fr; gap: 26px; align-items: start; padding: 30px 4px; border-top: 1px solid var(--hairline); } .step:last-child { border-bottom: 1px solid var(--hairline); } .step__n { counter-increment: s; font-family: var(--display); font-size: 40px; color: rgba(233, 196, 106, 0.32); line-height: 1; } .step__n::before { content: counter(s, decimal-leading-zero); } .step h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; font-size: 24px; } .step p { margin-top: 8px; color: var(--cream-dim); max-width: 62ch; } @media (max-width: 620px) { .step { grid-template-columns: 52px 1fr; gap: 16px; } .step__n { font-size: 28px; } } /* Screens ----------------------------------------------------------------- */ .screens { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-top: 60px; } .phone { width: 236px; border-radius: 34px; padding: 9px; background: linear-gradient(160deg, #2a2f2c, #0b0e0d); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(244, 239, 230, 0.08); } .phone img { border-radius: 26px; width: 100%; } .phone__cap { margin-top: 14px; text-align: center; font: 700 10px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-faint); } /* Trust ------------------------------------------------------------------- */ .trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 56px; } @media (max-width: 780px) { .trust { grid-template-columns: 1fr; } } .trust__card { border: 1px solid var(--hairline); border-radius: 16px; padding: 30px 28px; background: rgba(0, 0, 0, 0.32); } .trust__card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; font-size: 22px; color: var(--gold-hi); } .trust__card p { margin-top: 10px; color: var(--cream-dim); font-size: 16px; } .trust__card a { color: var(--gold-hi); border-bottom: 1px solid var(--hairline); } .trust__card a:hover { border-bottom-color: var(--gold-hi); } /* Closing band ------------------------------------------------------------ */ .closer { position: relative; padding: clamp(96px, 14vw, 170px) 0; text-align: center; overflow: hidden; } .closer__bg { position: absolute; inset: 0; background: url("assets/art/casino-entrance.jpg") center / cover no-repeat; opacity: 0.42; } .closer__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink), rgba(3, 9, 7, 0.62) 42%, var(--ink)); } .closer .shell { position: relative; z-index: 2; } .closer h2 { font-size: clamp(40px, 8vw, 92px); } .closer p { margin: 20px auto 0; max-width: 44ch; color: var(--cream-dim); } /* Footer ------------------------------------------------------------------ */ .foot { border-top: 1px solid var(--hairline); padding: 54px 0 64px; background: var(--ink-deep); } .foot__grid { display: flex; flex-wrap: wrap; gap: 40px 64px; justify-content: space-between; } .foot__mark { display: flex; align-items: center; gap: 12px; } .foot__mark img { width: 40px; height: 40px; } .foot__mark b { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: 0.12em; text-transform: uppercase; } .foot__links { display: flex; flex-wrap: wrap; gap: 12px 30px; font: 700 12px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); } .foot__links a:hover { color: var(--gold-hi); } .foot__legal { margin-top: 42px; padding-top: 26px; border-top: 1px solid rgba(233, 196, 106, 0.12); font-size: 13px; color: var(--cream-faint); line-height: 1.7; } .foot__legal a { color: var(--cream-dim); border-bottom: 1px solid var(--hairline); } /* Reveal on scroll. Scoped under .js — a class set by an inline script in . Without JavaScript (or if hero.js fails to load) .rise is never hidden in the first place, so a dead script cannot leave the page blank. */ .js .rise { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .js .rise.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; transition: none; } .hero__bg { transform: none; } .room img { transition: none; } }