/* BugOut - landing page. * * Style: claymorphism, which is what the game's own buttons already are - a * face sitting on a lip, soft double shadows, generous radii. The palette is * NOT a stock one: every value below is lifted from `design_tokens.dart`, so * the site and the app are the same product rather than two that share a name. * * Direction: every inset, edge and offset uses a LOGICAL property * (inline-start/end, not left/right). That is the whole RTL implementation - * `dir="rtl"` on mirrors the page with no second stylesheet and no * per-rule overrides, which is the only version of this that survives edits. */ :root { /* --- Brand, from DesignTokens ------------------------------------- */ --brand: #FE8E02; --brand-deep: #E06E00; /* Darker than the app's own `brandInk` (#C25C00), and deliberately so. * This is the colour every small warm label uses - the eyebrow, the stat * numbers, the store note, every link - and measured against the tightest * ground it sits on (#FFF3E3) the app's value comes out at 3.98:1, under * the 4.5:1 the rest of this product holds itself to. #A34D00 is the same * hue at 5.3:1. */ --brand-ink: #A34D00; --brand-wash: #FFF3E3; --coin: #FEDA03; --coin-rim: #A86E00; --heart: #FF5F70; --blue: #2F9BE3; /* --- Ground and ink ------------------------------------------------ */ --bg: #FFFCF7; --bg-alt: #FFF6EA; --card: #FFFFFF; --ink: #16233B; --ink-soft: #4B5A73; --line: #F0E3D2; /* --- Clay --------------------------------------------------------- */ --lip: #F3E0C9; --shadow-soft: 0 10px 30px rgba(93, 62, 20, .10); --shadow-lift: 0 18px 44px rgba(93, 62, 20, .16); --radius: 22px; --radius-lg: 30px; /* --- Rhythm (density 4/10: standard marketing spacing) ------------- */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --wrap: 1140px; --ease: cubic-bezier(.22, 1, .36, 1); } /* The game ships Day and Night; the site follows the reader's system in the * same spirit. Only the tokens change - no rule below re-specifies a colour. */ @media (prefers-color-scheme: dark) { :root { --bg: #14100C; --bg-alt: #1B1610; --card: #221B14; --ink: #FBF3E7; --ink-soft: #C3B4A1; --line: #33291E; --lip: #3A2D1D; --brand-wash: #2A1E10; /* On a dark ground the burnt version is the one that fails - 3.91:1 on * the card. The brand orange itself passes at 7.36:1, so in Night the * accent simply becomes the brand. */ --brand-ink: #FE8E02; --shadow-soft: 0 10px 30px rgba(0, 0, 0, .45); --shadow-lift: 0 18px 44px rgba(0, 0, 0, .55); } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Baloo Bhaijaan 2', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s2); font-weight: 800; letter-spacing: -.01em; } h1 { font-size: clamp(2.1rem, 6vw, 3.9rem); } h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); } h3 { font-size: 1.15rem; margin-bottom: var(--s1); } p { margin: 0 0 var(--s2); } a { color: var(--brand-ink); } /* Never removed, only restyled - a keyboard user has no other cue. */ :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; } .wrap { width: min(100% - var(--s4), var(--wrap)); margin-inline: auto; } .skip { position: absolute; inset-inline-start: var(--s2); inset-block-start: -100px; z-index: 50; padding: var(--s1) var(--s3); background: var(--card); border-radius: 999px; box-shadow: var(--shadow-lift); font-weight: 700; text-decoration: none; transition: inset-block-start .18s var(--ease); } .skip:focus { inset-block-start: var(--s2); } /* ---------------------------------------------------------------- header */ .site-head { position: sticky; inset-block-start: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-block-end: 1px solid transparent; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .site-head.stuck { border-block-end-color: var(--line); box-shadow: 0 6px 24px rgba(93, 62, 20, .06); } .head-inner { display: flex; align-items: center; gap: var(--s3); padding-block: var(--s2); } .brand { flex: 0 0 auto; line-height: 0; } .brand img { width: 132px; } .head-nav { display: none; gap: var(--s3); margin-inline-start: auto; font-weight: 600; } .head-nav a { color: var(--ink-soft); text-decoration: none; padding-block: 6px; border-block-end: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); } .head-nav a:hover { color: var(--ink); border-block-end-color: var(--brand); } .head-actions { display: flex; align-items: center; gap: var(--s2); margin-inline-start: auto; } .head-nav + .head-actions { margin-inline-start: 0; } .lang { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: var(--s2); border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font-weight: 700; font-size: .95rem; text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); } .lang:hover { border-color: var(--brand); transform: translateY(-1px); } .lang svg { width: 18px; height: 18px; } /* ---------------------------------------------------------------- buttons */ /* The game's button, rebuilt for the web: a face on a coloured lip that the * face sinks into when pressed. Height, not shadow, is what makes it read as * a physical object. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding-inline: var(--s4); border: 0; border-radius: 16px; font: inherit; font-weight: 800; font-size: 1.02rem; text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .btn svg { width: 20px; height: 20px; } .btn-primary { background: linear-gradient(180deg, #FFA836, var(--brand)); color: #2A1500; box-shadow: 0 5px 0 var(--brand-deep), var(--shadow-soft); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--brand-deep), var(--shadow-lift); } .btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--brand-deep); } .btn-ghost { background: var(--card); color: var(--ink); box-shadow: 0 5px 0 var(--lip), var(--shadow-soft); } .btn-ghost:hover { transform: translateY(-2px); } .btn-ghost:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--lip); } /* Not a button. It is a status, and it says so rather than pretending to be * clickable - see `button()` in build.py. */ .btn-soon { background: var(--brand-wash); color: var(--brand-ink); border: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent); cursor: default; font-weight: 700; } .head-actions .btn { min-height: 44px; padding-inline: var(--s3); font-size: .95rem; } /* The header's status badge is desktop-only. On a 375 px screen it wrapped * onto five lines and pushed the header past the viewport - a horizontal * scrollbar on a landing page, caused by a label that the hero repeats two * hundred pixels further down anyway. */ @media (max-width: 699px) { .head-actions .btn-soon { display: none; } } /* ------------------------------------------------------------------- hero */ .hero { position: relative; padding-block: var(--s6) var(--s7); background: radial-gradient(60% 55% at 50% 0%, var(--brand-wash), transparent 70%), var(--bg); overflow: hidden; } .hero-inner { display: grid; gap: var(--s5); align-items: center; } .eyebrow { display: inline-block; margin: 0 0 var(--s2); padding: 6px var(--s2); border-radius: 999px; background: var(--card); box-shadow: var(--shadow-soft); color: var(--brand-ink); font-weight: 700; font-size: .92rem; } .lede { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--ink-soft); max-width: 62ch; } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-block-start: var(--s3); } /* The store position, said once, as a sentence. Not a button - there is * nothing to press yet, and dressing it as one spends a click for nothing. */ .soon-note { flex-basis: 100%; margin: 0; color: var(--brand-ink); font-weight: 700; font-size: .95rem; } .soon-note::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: var(--brand); vertical-align: middle; } .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-block-start: var(--s5); padding: 0; list-style: none; } .stats li { padding: var(--s2) var(--s3); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-soft); } .stat-value { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--brand-ink); } .stat-label { display: block; font-size: .9rem; color: var(--ink-soft); } /* The phone. A clay slab with the screenshot inset, tilted just enough to * read as an object rather than as a pasted rectangle. */ .phone { position: relative; width: min(300px, 78vw); margin-inline: auto; padding: 12px; border-radius: 42px; background: linear-gradient(160deg, #FFFFFF, #F3E7D6); box-shadow: var(--shadow-lift), inset 0 2px 0 rgba(255, 255, 255, .9); } @media (prefers-color-scheme: dark) { .phone { background: linear-gradient(160deg, #3A2E22, #241C14); } } .phone img { border-radius: 32px; } .hero-shot .phone { transform: rotate(-2.5deg); } .phone-sm { width: min(230px, 66vw); padding: 9px; border-radius: 32px; } .phone-sm img { border-radius: 24px; } /* Decorative creatures. Purely ornamental, so they are aria-hidden and the * drift stops entirely under reduced motion. */ /* Scenery, and only where there is room to be scenic. Below the tablet * breakpoint the copy fills the width and a drifting bug lands on top of a * headline instead of beside it. */ .hero-bugs { display: none; position: absolute; inset: 0; pointer-events: none; } @media (min-width: 900px) { .hero-bugs { display: block; } } .hero-bugs img { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); width: 44px; /* Low enough to stay behind the copy it drifts past. These are scenery - * if one of them competes with a headline, the headline loses. */ opacity: .38; animation: drift 9s var(--d) ease-in-out infinite alternate; } @keyframes drift { from { transform: translate3d(0, 0, 0) rotate(-6deg); } to { transform: translate3d(0, -22px, 0) rotate(8deg); } } /* ------------------------------------------------------------------ bands */ .band { padding-block: var(--s7); } .band.tinted { background: var(--bg-alt); } .section-lede { max-width: 60ch; color: var(--ink-soft); margin-block-end: var(--s5); } .grid { display: grid; gap: var(--s3); padding: 0; margin: 0; list-style: none; } .card { padding: var(--s4); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-soft); border: 1px solid var(--line); } .card p { color: var(--ink-soft); margin: 0; } .card-plain { background: transparent; box-shadow: none; border-style: dashed; } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-block-end: var(--s2); border-radius: 15px; background: var(--brand-wash); color: var(--brand-ink); } .card-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; } .card-icon.small { width: 38px; height: 38px; border-radius: 12px; } .card-icon.small svg { width: 20px; height: 20px; } .story-card { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); } .story-card img { width: 100%; } .story-card figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--s5) var(--s4) var(--s4); background: linear-gradient(transparent, rgba(10, 6, 2, .82)); color: #FFF7EA; font-size: clamp(1rem, 2.2vw, 1.35rem); font-weight: 600; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); } .shot { text-align: center; align-self: start; } .shot h3 { margin-block-start: var(--s3); } .shot p { color: var(--ink-soft); font-size: .95rem; } .cta-card { padding: var(--s6) var(--s4); border-radius: var(--radius-lg); text-align: center; background: radial-gradient(80% 120% at 50% 0%, #FFD9A6, transparent 70%), var(--card); box-shadow: var(--shadow-lift); border: 1px solid var(--line); } @media (prefers-color-scheme: dark) { .cta-card { background: radial-gradient(80% 120% at 50% 0%, #3A2A16, transparent 70%), var(--card); } } .cta-card p { color: var(--ink-soft); max-width: 48ch; margin-inline: auto; } .cta-card .hero-cta { justify-content: center; } /* ---------------------------------------------------------------- footer */ .site-foot { padding-block: var(--s5); border-block-start: 1px solid var(--line); background: var(--bg-alt); } .foot-inner { display: grid; gap: var(--s3); } .foot-logo { width: 120px; margin-block-end: var(--s1); } .site-foot p { color: var(--ink-soft); font-size: .92rem; margin: 0; } .foot-rights { align-self: end; } /* ------------------------------------------------------------ responsive */ @media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.screens { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.access { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-inner { grid-template-columns: 1fr auto; align-items: end; } } @media (min-width: 1000px) { .head-nav { display: flex; } .hero-inner { grid-template-columns: 1.05fr .95fr; } .hero { padding-block: var(--s7); } .grid.features { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.screens { grid-template-columns: repeat(4, minmax(0, 1fr)); } .phone { width: 320px; } } /* ------------------------------------------------------------ reveal */ /* Scroll reveal, hand-rolled rather than pulled from a library: one * IntersectionObserver and one transition is the whole effect, and it costs * the page no third-party JavaScript. `.reveal` only becomes invisible once * the script confirms it can restore it - so with JS off, or if the observer * throws, the content is simply there. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--reveal-delay, 0ms); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .hero-bugs img { animation: none; } .btn, .lang, .head-nav a { transition: none; } .btn-primary:hover, .btn-ghost:hover, .lang:hover { transform: none; } }