/* YYUKA Studio — site styles Black and white only. Airy, classical, Aegean: hairline rules, generous space, serif headings, and interlacing bands that echo the studio mark. Patterns are SVG masks, so they take the ink colour in either theme. No web fonts and nothing loaded from another domain: the only script on the page is the inline theme toggle, allowed by its hash in the CSP. */ /* ------------------------------------------------------------------ tokens */ /* Dark is the site's own default, not the operating system's preference, so the palette below is the dark one and light is the opt-in. The theme button writes data-theme on ; nothing here reads prefers-color-scheme. */ :root { --paper: #0b0b0b; --paper-2: #131312; --ink: #eeeeea; --ink-2: #c2c2bd; --ink-3: #909089; --rule: #333331; --rule-2: #212120; color-scheme: dark; --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --measure: 36rem; --wide: 62rem; --step: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); --fade: 900ms; } :root[data-theme="light"] { --paper: #ffffff; --paper-2: #fbfbfa; --ink: #111111; --ink-2: #414141; --ink-3: #6f6f6f; --rule: #d6d6d4; --rule-2: #ebebe9; color-scheme: light; } /* The cross-fade. The script adds `theming` to only while a switch is running, so this never touches hover states or the first paint — a global transition left on permanently would make every hover feel a second late. */ :root.theming, :root.theming *, :root.theming *::before, :root.theming *::after { transition: background-color var(--fade) ease, color var(--fade) ease, border-color var(--fade) ease, outline-color var(--fade) ease, fill var(--fade) ease, stroke var(--fade) ease, opacity var(--fade) ease, text-decoration-color var(--fade) ease !important; } @media (prefers-reduced-motion: reduce) { :root.theming, :root.theming *, :root.theming *::before, :root.theming *::after { transition: none !important; } } /* ------------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.7 var(--sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--rule); } a:hover { text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--paper); color: var(--ink); padding: 0.6rem 1rem; border: 1px solid var(--ink); text-decoration: none; } .muted { color: var(--ink-3); } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; padding: 0.1em 0.35em; border: 1px solid var(--rule-2); background: var(--paper-2); } /* ---------------------------------------------------------- pattern bands */ .band { height: 16px; background-color: var(--ink); opacity: 0.22; -webkit-mask-image: url(pattern-band.38188568e2.svg); mask-image: url(pattern-band.38188568e2.svg); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 40px 16px; mask-size: 40px 16px; } /* ------------------------------------------------------------------ header */ .site-head { max-width: var(--wide); margin: 0 auto; padding: 1.75rem 1.5rem 0; } .head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem 2rem; padding-bottom: 1.35rem; } .brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--ink); text-decoration: none; } /* The two logo files are stacked and cross-faded by opacity rather than swapped with display, so the mark changes with the rest of the page instead of popping halfway through the fade. */ .brand-mark { position: relative; width: 36px; height: 36px; display: block; flex: none; } .brand-mark img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } svg.brand-mark { width: 36px; height: 36px; display: block; flex: none; } .brand-mark .mark-light { opacity: 0; } .brand-mark .mark-dark { opacity: 1; } :root[data-theme="light"] .brand-mark .mark-light { opacity: 1; } :root[data-theme="light"] .brand-mark .mark-dark { opacity: 0; } /* ------------------------------------------------------------ theme toggle */ .theme-toggle { appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: -6px 0; border: 1px solid transparent; background: transparent; color: var(--ink-3); cursor: pointer; flex: none; } .theme-toggle:hover { color: var(--ink); border-color: var(--rule); } .theme-toggle svg { position: absolute; width: 19px; height: 19px; display: block; } /* Show the icon for the theme the button switches *to*: a sun while the page is dark, a moon while it is light. Cross-faded, like the logo. */ .theme-toggle .icon-sun { opacity: 1; } .theme-toggle .icon-moon { opacity: 0; } :root[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; } :root[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; } .brand-name { font: 400 1.1rem/1 var(--serif); letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; } .brand-name em { font-style: italic; text-transform: none; letter-spacing: 0.04em; color: var(--ink-3); margin-left: 0.5em; } .site-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.6rem; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; } .site-nav a { color: var(--ink-2); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; } .site-nav a:hover { color: var(--ink); border-bottom-color: var(--rule); } .site-nav a.current { color: var(--ink); border-bottom-color: var(--ink); } .site-nav .lang { color: var(--ink-3); border-left: 1px solid var(--rule); padding-left: 1.6rem; margin-left: -0.7rem; } /* -------------------------------------------------------------------- page */ .page { max-width: var(--wide); margin: 0 auto; padding: var(--step) 1.5rem 4.5rem; } .page > h1 { font: 400 clamp(2rem, 1.5rem + 2vw, 2.75rem)/1.15 var(--serif); letter-spacing: -0.01em; margin: 0 0 1.75rem; max-width: var(--measure); } h2 { font: 400 clamp(1.3rem, 1.15rem + 0.7vw, 1.55rem)/1.3 var(--serif); margin: 3.25rem 0 1rem; padding-top: 1.75rem; border-top: 1px solid var(--rule-2); max-width: var(--measure); position: relative; } h2::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: var(--ink); } .page > h2:first-of-type { border-top: none; padding-top: 0; margin-top: 2.5rem; } .page > h2:first-of-type::before { display: none; } h3 { font: 600 1.0625rem/1.4 var(--sans); margin: 2rem 0 0.6rem; } p { max-width: var(--measure); margin: 0 0 1.15rem; } .lead { font: 400 clamp(1.0625rem, 1rem + 0.45vw, 1.25rem)/1.6 var(--serif); color: var(--ink-2); max-width: 40rem; margin-bottom: 2.25rem; } .bullets { max-width: var(--measure); margin: 0 0 1.5rem; padding-left: 1.2rem; } .bullets li { margin-bottom: 0.65rem; } .bullets li::marker { color: var(--ink-3); } .bullets strong { font-weight: 600; } /* -------------------------------------------------------------------- hero */ .hero { margin-bottom: 3.25rem; } .hero h1 { font: 400 clamp(2.4rem, 1.6rem + 3.4vw, 3.6rem)/1.05 var(--serif); letter-spacing: 0.01em; margin: 0 0 1rem; } .hero-sub { font: 400 clamp(1.0625rem, 1rem + 0.55vw, 1.35rem)/1.55 var(--serif); color: var(--ink-2); max-width: 32rem; margin: 0; } /* --------------------------------------------------------------- ornament */ .ornament { color: var(--ink); opacity: 0.3; margin: 3rem 0; max-width: var(--measure); } .ornament svg { display: block; width: 100%; height: auto; max-width: 20rem; } /* -------------------------------------------------------------- game card */ .gamecard { position: relative; background: var(--paper-2); border: 1px solid var(--rule); padding: 2rem 2.25rem; margin: 0 0 1.75rem; max-width: 50rem; } .gamecard::before, .gamecard::after { content: ""; position: absolute; width: 22px; height: 22px; background-color: var(--ink); opacity: 0.5; -webkit-mask-image: url(pattern-key.8a9d5f171b.svg); mask-image: url(pattern-key.8a9d5f171b.svg); -webkit-mask-size: contain; mask-size: contain; } .gamecard::before { top: 7px; left: 7px; } .gamecard::after { bottom: 7px; right: 7px; transform: rotate(180deg); } .gamecard-title { font: 400 1.6rem/1.2 var(--serif); margin: 0 0 0.6rem; } .gamecard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 0.8125rem; margin: 0 0 1.25rem; max-width: none; } .gamecard-meta .sep { color: var(--ink-3); } .gamecard-meta .muted { letter-spacing: 0.06em; text-transform: uppercase; } .pill { display: inline-block; padding: 0.2em 0.75em; border: 1px solid var(--ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .gamecard-summary { margin-bottom: 1.35rem; } .gamecard-features { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: var(--measure); } .gamecard-features li { position: relative; padding-left: 1.35rem; margin-bottom: 0.6rem; font-size: 0.9375rem; line-height: 1.6; } .gamecard-features li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border: 1px solid var(--ink); transform: rotate(45deg); } .gamecard-announce { font-size: 0.9375rem; border-top: 1px solid var(--rule-2); padding-top: 1.15rem; margin-bottom: 0; } @media (max-width: 34rem) { .gamecard { padding: 1.5rem 1.35rem; } } /* ------------------------------------------------------------------ facts */ .facts { margin: 0 0 1.75rem; max-width: 42rem; border-top: 1px solid var(--rule); } .fact { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 0.25rem 1.75rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule-2); } .fact dt { color: var(--ink-3); font-size: 0.8125rem; letter-spacing: 0.07em; text-transform: uppercase; padding-top: 0.18em; } .fact dd { margin: 0; } @media (max-width: 34rem) { .fact { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ table */ .table-wrap { overflow-x: auto; margin: 0 0 1.75rem; max-width: 46rem; } table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.9375rem; } thead th { text-align: start; font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 0 1.25rem 0.6rem 0; border-bottom: 1px solid var(--ink); } tbody td { padding: 0.85rem 1.25rem 0.85rem 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; line-height: 1.6; } tbody tr td:first-child { width: 12rem; } thead th:last-child, tbody td:last-child { padding-right: 0; } /* ------------------------------------------------------------------- note */ .note { max-width: var(--measure); margin: 0 0 1.75rem; padding: 1.1rem 1.35rem; border: 1px solid var(--rule); border-left: 3px solid var(--ink); background: var(--paper-2); font-size: 0.9375rem; line-height: 1.65; } /* ------------------------------------------------------------------ button */ .cta-row { margin: 0 0 1.75rem; } .btn { display: inline-block; padding: 0.7rem 1.6rem; border: 1px solid var(--ink); color: var(--ink); background: transparent; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; } .btn:hover { background: var(--ink); color: var(--paper); } /* ---------------------------------------------------------------- contacts */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; max-width: 42rem; margin: 0 0 2rem; } .contact-card { position: relative; background: var(--paper-2); border: 1px solid var(--rule); padding: 1.5rem 1.6rem; } .contact-card::before { content: ""; position: absolute; top: 7px; left: 7px; width: 20px; height: 20px; background-color: var(--ink); opacity: 0.45; -webkit-mask-image: url(pattern-key.8a9d5f171b.svg); mask-image: url(pattern-key.8a9d5f171b.svg); -webkit-mask-size: contain; mask-size: contain; } .contact-card h3 { margin: 0 0 0.6rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding-left: 1.9rem; } .contact-card .mail { margin: 0 0 0.6rem; font: 400 1.125rem/1.4 var(--serif); } .contact-card .mail a { word-break: break-word; } .contact-card .muted { margin: 0; font-size: 0.9375rem; line-height: 1.6; } /* --------------------------------------------------------------------- faq */ .faq { max-width: 44rem; margin: 0 0 2rem; border-top: 1px solid var(--rule); } .faq-item { border-bottom: 1px solid var(--rule-2); } .faq-item summary { cursor: pointer; padding: 1rem 2.25rem 1rem 0; position: relative; font-weight: 500; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font: 400 1.25rem/1 var(--serif); color: var(--ink-3); } .faq-item[open] summary::after { content: "\2212"; } .faq-body { padding: 0 0 1.15rem; } .faq-body p { margin: 0; color: var(--ink-2); } /* ----------------------------------------------------------------- updated */ .updated { margin-top: 3rem; padding-top: 1.35rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } /* ------------------------------------------------------------------ footer */ .site-foot { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem 3.5rem; font-size: 0.8125rem; } .site-foot .band { margin-bottom: 1.75rem; } .foot-top { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; justify-content: space-between; margin-bottom: 1.5rem; } .foot-links, .foot-social { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; } .foot-links a, .foot-social a { color: var(--ink-2); text-decoration: none; } .foot-links a:hover, .foot-social a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; } .foot-legal { margin: 0; color: var(--ink-2); line-height: 1.9; max-width: none; letter-spacing: 0.02em; } /* ------------------------------------------------------------------- print */ @media print { .site-head, .site-foot, .skip, .band, .ornament { display: none; } body { background: #fff; color: #000; } .page { max-width: none; } .faq-body { display: block; } }