/* * The Grand Escape — ShamanicAI Studio * Editorial warm-paper design system. Plain CSS, no build step. * * Display serif headings, mono eyebrow labels, amber accent. * All colours are oklch semantic tokens — never hardcode a colour below. */ /* ========================================================================== 1. Tokens ========================================================================== */ :root { --radius: 0.5rem; --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --font-display: "Instrument Serif", ui-serif, Georgia, serif; --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --background: oklch(0.982 0.006 85); --foreground: oklch(0.215 0.018 60); --card: oklch(0.995 0.004 85); --card-foreground: oklch(0.215 0.018 60); --surface: oklch(0.958 0.011 82); --surface-foreground: oklch(0.215 0.018 60); --primary: oklch(0.235 0.02 55); --primary-foreground: oklch(0.985 0.006 85); --secondary: oklch(0.945 0.012 82); --secondary-foreground: oklch(0.28 0.02 58); --muted: oklch(0.948 0.01 82); --muted-foreground: oklch(0.52 0.02 62); --accent: oklch(0.635 0.145 47); --accent-foreground: oklch(0.99 0.006 85); --border: oklch(0.895 0.012 78); --input: oklch(0.895 0.012 78); --ring: oklch(0.635 0.145 47); --shadow-paper: 0 1px 2px oklch(0.2 0.03 60 / 0.04), 0 12px 40px -18px oklch(0.2 0.03 60 / 0.16); --shadow-lift: 0 2px 4px oklch(0.2 0.03 60 / 0.06), 0 28px 60px -24px oklch(0.2 0.03 60 / 0.28); --container-max: 76rem; --container-pad: 1.5rem; } /* Dark palette, kept from the original design system. Add class="dark" to (or swap this block to a prefers-color-scheme media query) to use it. */ .dark { --background: oklch(0.17 0.012 60); --foreground: oklch(0.945 0.008 85); --card: oklch(0.215 0.014 60); --card-foreground: oklch(0.945 0.008 85); --surface: oklch(0.205 0.013 60); --surface-foreground: oklch(0.945 0.008 85); --primary: oklch(0.945 0.008 85); --primary-foreground: oklch(0.19 0.013 60); --secondary: oklch(0.26 0.014 60); --secondary-foreground: oklch(0.945 0.008 85); --muted: oklch(0.26 0.014 60); --muted-foreground: oklch(0.7 0.018 70); --accent: oklch(0.72 0.14 55); --accent-foreground: oklch(0.19 0.013 60); --border: oklch(1 0 0 / 12%); --input: oklch(1 0 0 / 16%); --ring: oklch(0.72 0.14 55); color-scheme: dark; } /* ========================================================================== 2. Reset + base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border); } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; margin: 0; } p, dl, dd, dt, figure { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; cursor: pointer; } ::selection { background-color: var(--accent); color: var(--accent-foreground); } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 3. Layout primitives ========================================================================== */ .page { display: flex; min-height: 100vh; flex-direction: column; } .page-main { flex: 1; } .container-page { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .rule-line { border-top: 1px solid var(--border); } /* Vertical rhythm. Each class maps to one section type in the design. */ .section { padding-block: 3rem; } .section-band { padding-block: 4rem; } .section-lead { padding-block: 4rem; } .section-hero { padding-top: 4rem; padding-bottom: 5rem; } .section-hero-detail { padding-top: 3.5rem; padding-bottom: 4rem; } @media (min-width: 40em) { .section-lead { padding-block: 6rem; } .section-hero { padding-top: 6rem; } .section-hero-detail { padding-top: 5rem; } } /* ========================================================================== 4. Typography helpers ========================================================================== */ .eyebrow { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .label-mono { overflow-wrap: break-word; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.06em; color: var(--muted-foreground); } .lede { margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.7; color: var(--muted-foreground); } .title-xl { margin-top: 1.5rem; font-size: 3rem; line-height: 1.03; } @media (min-width: 40em) { .title-xl { font-size: 3.75rem; } } .measure-2xl { max-width: 42rem; } .measure-3xl { max-width: 48rem; } /* ========================================================================== 5. Buttons + icons ========================================================================== */ .icon { width: 1rem; height: 1rem; flex: none; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; padding: 0.75rem 1.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap; } .btn-primary { background-color: var(--primary); color: var(--primary-foreground); transition: opacity 0.15s ease; } .btn-primary:hover { opacity: 0.9; } .btn-outline { border: 1px solid var(--input); transition: background-color 0.15s ease; } .btn-outline:hover { background-color: var(--surface); } .btn-static { border: 1px solid var(--input); color: var(--muted-foreground); } .btn-sm { padding: 0.5rem 1rem; } .btn-row { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .text-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; text-underline-offset: 4px; } .text-link:hover { text-decoration: underline; } /* ========================================================================== 6. Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background-color: color-mix(in oklab, var(--background) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .site-header__bar { display: flex; height: 4rem; align-items: center; justify-content: space-between; } .site-header__brand { display: flex; align-items: baseline; gap: 0.5rem; } .site-header__brand-name { font-family: var(--font-display); font-size: 1.25rem; line-height: 1; } .site-header__brand-tag { display: none; } .site-nav { display: none; align-items: center; gap: 2rem; } .site-nav a { font-size: 0.875rem; color: var(--muted-foreground); transition: color 0.15s ease; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--foreground); } .site-nav .btn { color: var(--primary-foreground); } .nav-toggle { display: inline-flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--border); } .nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } .mobile-nav { border-top: 1px solid var(--border); background-color: var(--background); } .mobile-nav[hidden] { display: none; } .mobile-nav__inner { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.25rem; } .mobile-nav a { font-size: 0.875rem; color: var(--muted-foreground); } .mobile-nav a[aria-current="page"] { color: var(--foreground); } .mobile-nav .btn { color: var(--primary-foreground); } @media (min-width: 40em) { .site-header__brand-tag { display: inline; } } @media (min-width: 48em) { .site-nav { display: flex; } .nav-toggle, .mobile-nav { display: none; } } /* ========================================================================== 7. Footer ========================================================================== */ .site-footer { margin-top: 6rem; border-top: 1px solid var(--border); background-color: var(--surface); } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: 3.5rem; } .site-footer__title { font-family: var(--font-display); font-size: 1.5rem; } .site-footer__blurb { margin-top: 0.75rem; max-width: 20rem; font-size: 0.875rem; color: var(--muted-foreground); } .site-footer__list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .site-footer__list a, .site-footer__list span { font-size: 0.875rem; color: var(--muted-foreground); transition: color 0.15s ease; } .site-footer__list a:hover { color: var(--foreground); } .site-footer__legal { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 1.5rem; } @media (min-width: 40em) { .site-footer__legal { flex-direction: row; align-items: center; justify-content: space-between; } } @media (min-width: 48em) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================================== 8. Section heading ========================================================================== */ .section-heading { max-width: 42rem; } .section-heading h2 { margin-top: 1.25rem; font-size: 2.25rem; line-height: 1.05; } .section-heading p { margin-top: 1.25rem; font-size: 1rem; line-height: 1.7; color: var(--muted-foreground); } @media (min-width: 40em) { .section-heading h2 { font-size: 3rem; } } /* ========================================================================== 9. Home hero ========================================================================== */ .hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 3rem; } .hero__title { margin-top: 1.5rem; font-size: 3rem; line-height: 1.02; } .hero__frame { min-width: 0; overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid var(--border); box-shadow: var(--shadow-lift); } .hero__frame img { height: 100%; width: 100%; object-fit: cover; } .stats { margin-top: 4rem; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding-top: 2.5rem; } .stats dd { margin-top: 0.5rem; font-family: var(--font-display); font-size: 2.25rem; } @media (min-width: 40em) { .hero__title { font-size: 3.75rem; } .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 64em) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .hero__title { font-size: 4.5rem; } } /* ========================================================================== 10. Game cards ========================================================================== */ .card-grid { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .game-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--border); background-color: var(--card); box-shadow: var(--shadow-paper); transition: box-shadow 0.2s ease; } a.game-card:hover { box-shadow: var(--shadow-lift); } .game-card--soon { cursor: default; user-select: none; } .game-card--soon:hover { box-shadow: var(--shadow-paper); } .game-card__media { aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--surface); } .game-card__media img { height: 100%; width: 100%; object-fit: cover; transition: transform 0.7s ease; } a.game-card:hover .game-card__media img { transform: scale(1.03); } .game-card--soon .game-card__media img { transform: scale(1.12); filter: blur(28px) saturate(0.85); pointer-events: none; } .game-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; } .game-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .game-card__status { border-radius: 9999px; border: 1px solid var(--border); padding: 0.25rem 0.75rem; } .game-card__title { margin-top: 1rem; font-size: 1.5rem; line-height: 1.2; } .game-card__summary { margin-top: 0.75rem; flex: 1; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); } .game-card__cta { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } a.game-card:hover .game-card__cta .icon, a.series-link:hover .icon { transform: translateX(0.25rem); } .game-card--soon .game-card__cta { color: var(--muted-foreground); } @media (min-width: 48em) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64em) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================================== 11. Game detail ========================================================================== */ .game-head { margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .game-head__title { font-size: 3rem; line-height: 1.03; } .game-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding-top: 2rem; } .game-facts dd { margin-top: 0.25rem; font-size: 0.875rem; } .game-shot { margin-top: 3rem; overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid var(--border); box-shadow: var(--shadow-lift); } .game-shot img { width: 100%; object-fit: cover; } .feature-grid { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2.5rem; row-gap: 2rem; } .feature { border-top: 1px solid var(--border); padding-top: 1.5rem; } .feature h3 { font-size: 1.5rem; } .feature p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); } .series-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; } .series-link { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .series-link--soon { cursor: default; color: var(--muted-foreground); } .series-link__title { font-family: var(--font-display); font-size: 1.875rem; } .series-link__status { display: inline-flex; align-items: center; gap: 0.5rem; } .series-link .icon { transition: transform 0.2s ease; } @media (min-width: 40em) { .game-head__title { font-size: 3.75rem; } .feature-grid, .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 48em) { .reason-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 64em) { .game-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } } /* ========================================================================== 12. Panels, contact, 404 ========================================================================== */ .panel { border-radius: var(--radius-2xl); border: 1px solid var(--border); background-color: var(--surface); padding: 2.5rem; } .panel h2 { margin-top: 1.25rem; max-width: 42rem; font-size: 2.25rem; line-height: 1.15; } .panel p { margin-top: 1.25rem; max-width: 36rem; color: var(--muted-foreground); } .panel .btn { margin-top: 2rem; } .reason-grid { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2.5rem; row-gap: 2rem; } .reason { border-top: 1px solid var(--border); padding-top: 1.5rem; } .reason p + p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); } .link-row { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; } .centered-page { display: flex; min-height: 70vh; align-items: center; justify-content: center; padding-inline: 1rem; text-align: center; } .centered-page__inner { max-width: 28rem; } .centered-page h1 { margin-top: 1rem; font-size: 2.25rem; } .centered-page p { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); } .centered-page .btn { margin-top: 1.5rem; } @media (min-width: 40em) { .panel { padding: 3.5rem; } .panel h2 { font-size: 3rem; } } /* ========================================================================== 13. Studio lead (about) ========================================================================== */ .studio-lead { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "mark" "copy"; align-items: center; gap: 2rem; } .studio-lead__mark { grid-area: mark; margin: 0; justify-self: center; width: min(100%, 16.5rem); overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid var(--border); background-color: oklch(1 0 0); box-shadow: var(--shadow-paper); animation: studio-mark-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; } .studio-lead__copy { grid-area: copy; min-width: 0; } .studio-lead__copy .title-xl { max-width: 28rem; } .studio-lead__copy .lede { max-width: 34rem; } .studio-lead__mark img { display: block; width: 100%; height: auto; } @keyframes studio-mark-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Side-by-side from tablet up: copy left, mark right */ @media (min-width: 40em) { .studio-lead { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "copy mark"; gap: 2.5rem; } .studio-lead__mark { justify-self: end; width: min(100%, 20rem); } .studio-lead__copy .title-xl { font-size: clamp(2.25rem, 4.2vw, 3.25rem); } } @media (min-width: 64em) { .studio-lead { gap: 3.5rem; } .studio-lead__mark { width: min(100%, 26rem); } }