:root { color-scheme: dark; /* Brand-neutral tokens: keep components consistent across every app page. */ --color-ink: #f4f1ea; --color-muted: #aeb8c3; --color-paper: #10151a; --color-surface: #192129; --color-accent: #82b5ff; --color-accent-contrast: #10151a; --color-line: #35414c; --shadow-card: 0 .5rem 2rem rgba(0, 0, 0, .2); --shadow-card-hover: 0 1rem 2.5rem rgba(0, 0, 0, .34); --radius-card: 1.25rem; --radius-control: 999px; --grid-columns: repeat(2, minmax(0, 1fr)); --grid-gap: 1rem; --space-page-y: 4.5rem; --space-section: 1rem; } /* A light variant can be enabled later by adding data-theme="light" to . */ [data-theme="light"] { color-scheme: light; --color-ink: #17212b; --color-muted: #5e6a75; --color-paper: #f7f4ee; --color-surface: #fffdf8; --color-accent: #2859a6; --color-accent-contrast: #ffffff; --color-line: #e5ddd0; --shadow-card: 0 .5rem 2rem rgba(23, 33, 43, .04); --shadow-card-hover: 0 1rem 2.5rem rgba(23, 33, 43, .1); } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; color: var(--color-ink); background: radial-gradient(circle at 80% 5%, #223a4d 0, transparent 28rem), var(--color-paper); font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .shell { width: min(100% - 2rem, 68rem); margin: 0 auto; padding: var(--space-page-y) 0 5rem; } .site-header { margin-bottom: var(--space-section); } .brand-lockup { --hero-height: clamp(17.5rem, 36vw, 21.5rem); display: grid; grid-template-columns: var(--grid-columns); align-items: stretch; min-height: var(--hero-height); gap: var(--grid-gap); } .brand-copy { align-self: start; min-width: 0; max-width: 42rem; } .brand-name { margin: 0 0 1rem; color: var(--color-ink); font-family: "Roboto Condensed", Impact, sans-serif; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: .1em; line-height: 1; } .character { display: block; width: auto; height: var(--hero-height); max-width: 100%; object-fit: contain; object-position: bottom; justify-self: center; } .character-404 { height: 14rem; margin-top: 2rem; } .eyebrow, .card-kicker { color: var(--color-accent); font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; } .eyebrow { margin: 0 0 .75rem; } h1, h2 { line-height: 1.1; letter-spacing: -.03em; } h1 { max-width: 12ch; margin: 0 0 1rem; font-size: clamp(2.5rem, 7vw, 4.75rem); } h2 { margin: .55rem 0 .75rem; font-size: clamp(1.75rem, 4vw, 2.4rem); } .lede { max-width: 34rem; margin: 0; color: var(--color-muted); font-size: 1.15rem; } .cards { display: grid; grid-template-columns: var(--grid-columns); gap: var(--grid-gap); } .card { display: flex; flex-direction: column; min-height: 13rem; padding: 1.75rem; color: inherit; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease; } .card:hover, .card:focus-within { transform: translateY(-.2rem); box-shadow: var(--shadow-card-hover); } .card p { max-width: 28rem; margin: 0 0 2rem; color: var(--color-muted); } .card-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; margin-top: auto; white-space: nowrap; } .card-actions a { color: var(--color-accent); font-weight: 700; text-decoration: none; } .card-actions a:hover, .card-actions a:focus-visible { text-decoration: underline; text-underline-offset: .2em; } .card-actions .separator { color: var(--color-muted); } @media (max-width: 640px) { :root { --grid-columns: 1fr; } .brand-lockup { --hero-height: auto; gap: 1rem; } .brand-copy { text-align: center; } .brand-copy h1 { margin-inline: auto; } .lede { margin-inline: auto; } .character { height: clamp(11.5rem, 50vw, 15.5rem); justify-self: center; margin-top: -.5rem; } .card-actions { gap: .25rem; font-size: .9rem; } .shell { padding-top: 3rem; } .card { min-height: auto; } } .app-shell { width: min(100% - 2rem, 58rem); margin: 0 auto; padding: 2rem 0 4rem; } .app-nav { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 4rem; } .app-nav a { color: var(--color-ink); font-weight: 750; text-decoration: none; } .app-nav a:first-child { font-family: "Roboto Condensed", Impact, sans-serif; letter-spacing: .07em; text-transform: uppercase; } .app-nav a:hover, .app-nav a:focus-visible { color: var(--color-accent); } .app-main { max-width: 44rem; } .policy-page { max-width: 48rem; } .policy-page h2 { margin-top: 2rem; } .support-page { max-width: 48rem; } .support-page h2 { margin-top: 2rem; } .policy-meta { color: var(--color-muted); font-size: .95rem !important; } .product-hero { display: grid; grid-template-columns: var(--grid-columns); align-items: center; gap: var(--grid-gap); max-width: none; } .product-copy { min-width: 0; } .product-hero .logo { justify-self: center; margin: 0; } .app-main h1 { max-width: none; font-size: clamp(2.6rem, 7vw, 5rem); } .app-main p { color: var(--color-muted); font-size: 1.1rem; } .button { display: inline-block; margin: 1rem 1rem 0 0; padding: .7rem 1rem; color: var(--color-accent-contrast); background: var(--color-accent); border-radius: var(--radius-control); font-weight: 750; text-decoration: none; } .button:hover, .button:focus-visible { filter: brightness(.94); } .logo { width: min(100%, 15rem); height: auto; margin: 1rem 0 1.5rem; border-radius: 1rem; } .logo-pawn { width: min(100%, 7.5rem); } .footer-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 4rem; font-size: .95rem; } .footer-links a { color: var(--color-muted); } .footer-links span { color: var(--color-muted); } .site-footer { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; color: var(--color-muted); font-size: .9rem; } .site-footer a { color: var(--color-muted); } .site-footer a:hover, .site-footer a:focus-visible { color: var(--color-accent); } /* Home */ .home-shell { width: min(100% - 2rem, 74rem); } .home-hero { min-height: 38rem; padding-bottom: 4rem; } .site-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 4.5rem; } .wordmark { color: var(--color-ink); font-family: "Roboto Condensed", Impact, sans-serif; font-size: 1.2rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; } .site-nav-links { display: flex; gap: 1.25rem; } .site-nav-links a { color: var(--color-muted); font-size: .9rem; font-weight: 700; text-decoration: none; } .site-nav-links a:hover, .site-nav-links a:focus-visible { color: var(--color-ink); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(16rem, .95fr); align-items: center; gap: 3rem; } .hero-copy h1 { max-width: 10ch; margin-bottom: 1.25rem; font-size: clamp(3.25rem, 7vw, 6.4rem); } .hero-copy .lede { max-width: 36rem; font-size: clamp(1.05rem, 1.8vw, 1.25rem); } .hero-actions, .community-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; } .text-link { color: var(--color-ink); font-weight: 750; text-decoration-color: var(--color-accent); text-decoration-thickness: .14em; text-underline-offset: .28em; } .text-link:hover, .text-link:focus-visible { color: var(--color-accent); } .hero-portrait { position: relative; align-self: stretch; min-height: 28rem; overflow: hidden; background: linear-gradient(145deg, #82b5ff 0%, #d4e4f7 100%); border: 1px solid rgba(244, 241, 234, .2); border-radius: 2rem; box-shadow: var(--shadow-card-hover); } .hero-portrait::after { position: absolute; inset: auto -4rem -3rem; height: 8rem; background: rgba(16, 21, 26, .16); border-radius: 50%; content: ""; filter: blur(1rem); } .hero-portrait img { position: absolute; right: 4%; bottom: -2%; width: min(94%, 28rem); height: 102%; object-fit: contain; object-position: bottom; filter: drop-shadow(1.5rem 1.2rem 0 rgba(16, 21, 26, .12)); } .portrait-caption { position: absolute; z-index: 1; top: 1.1rem; right: 1.25rem; color: #10151a; font-family: "Roboto Condensed", Impact, sans-serif; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .product-section { padding: 4rem 0 2rem; } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.75rem; } .section-heading h2, .community-section h2 { max-width: 14ch; margin: 0; font-size: clamp(2.25rem, 5vw, 4.25rem); } .section-heading > p { max-width: 19rem; margin: 0 0 .3rem; color: var(--color-muted); } .product-grid { display: grid; grid-template-columns: var(--grid-columns); gap: 1rem; } .product-card { display: grid; grid-template-rows: 16rem auto; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease; } .product-card:hover, .product-card:focus-within { transform: translateY(-.25rem); box-shadow: var(--shadow-card-hover); } .product-art { position: relative; display: grid; place-items: center; overflow: hidden; } .product-art::after { position: absolute; width: 14rem; height: 14rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; content: ""; } .product-art img { position: relative; z-index: 1; max-height: 12rem; object-fit: contain; } .product-art-puck { background: linear-gradient(135deg, #3d6e96, #172b3c); } .product-art-puck img { width: min(80%, 15rem); filter: drop-shadow(.7rem .7rem 0 rgba(0, 0, 0, .12)); } .product-art-pawnd { background: linear-gradient(135deg, #79654b, #242c34); } .product-art-pawnd img { height: 14rem; max-height: none; transform: translateY(2rem); filter: drop-shadow(.8rem .8rem 0 rgba(0, 0, 0, .22)); } .product-card-body { display: flex; flex-direction: column; min-height: 15rem; padding: 1.6rem; } .product-card h3 { margin: .55rem 0 .65rem; font-size: clamp(1.75rem, 3vw, 2.4rem); letter-spacing: -.03em; line-height: 1.1; } .product-card p { margin: 0 0 2rem; color: var(--color-muted); } .community-section { margin-top: 5rem; padding: clamp(2rem, 5vw, 4rem); background: linear-gradient(120deg, #15202a, #202d37); border: 1px solid var(--color-line); border-radius: 1.5rem; } .community-section > p:not(.eyebrow) { max-width: 36rem; margin: 1rem 0 0; color: var(--color-muted); font-size: 1.1rem; } .button-secondary { color: var(--color-ink); background: transparent; border: 1px solid var(--color-line); } .button-secondary:hover, .button-secondary:focus-visible { background: rgba(244, 241, 234, .08); filter: none; } @media (max-width: 640px) { .product-hero { grid-template-columns: 1fr; gap: 1.5rem; } .product-hero .logo { grid-row: 1; } .product-copy { grid-row: 2; } } /* Keep home overrides after their desktop declarations. */ @media (max-width: 640px) { .home-hero { min-height: 0; padding-bottom: 2.5rem; } .site-nav { padding-bottom: 3.5rem; } .wordmark { font-size: .86rem; letter-spacing: .08em; white-space: nowrap; } .site-nav-links { gap: .8rem; } .site-nav-links a { font-size: .8rem; } .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } .hero-copy { text-align: left; } .hero-copy h1 { margin-inline: 0; } .hero-portrait { min-height: 23rem; } .section-heading { display: block; } .section-heading > p { margin-top: 1rem; } .product-card { grid-template-rows: 13rem auto; } .community-section { margin-top: 3rem; } }