/* --------------------------------------------------------------- * textualize.io — landing page stylesheet. * * Same design system as ishmael.textualize.io: Catppuccin Latte * (light) and Mocha (dark), Inter for UI type, Literata for prose. * data-theme on drives the swap; a pre-paint script in * index.html sets it before first frame. * ------------------------------------------------------------- */ /* ---- Fonts ---------------------------------------------------- */ @font-face { font-family: "Inter"; src: url("/assets/fonts/InterVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2-variations"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "Literata"; src: url("/assets/fonts/Literata.woff2") format("woff2-variations"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Literata"; src: url("/assets/fonts/Literata-Italic.woff2") format("woff2-variations"); font-weight: 200 900; font-style: italic; font-display: swap; } /* ---- Theme tokens -------------------------------------------- */ :root { /* Catppuccin Latte */ --ctp-mauve: #8839ef; --ctp-blue: #1e66f5; --ctp-green: #40a02b; --bg: #eff1f5; --bg-elevated: #e6e9ef; --surface: #ccd0da; --rule: #bcc0cc; --text: #4c4f69; --text-dim: #6c6f85; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-serif: "Literata", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color-scheme: light; } /* Mocha. Reached two ways: an explicit data-theme="dark" pick, or — with JS disabled — the OS preference via the media query below. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --ctp-mauve: #cba6f7; --ctp-blue: #89b4fa; --ctp-green: #a6e3a1; --bg: #1e1e2e; --bg-elevated: #181825; --surface: #313244; --rule: #45475a; --text: #cdd6f4; --text-dim: #bac2de; color-scheme: dark; } } :root[data-theme="dark"] { --ctp-mauve: #cba6f7; --ctp-blue: #89b4fa; --ctp-green: #a6e3a1; --bg: #1e1e2e; --bg-elevated: #181825; --surface: #313244; --rule: #45475a; --text: #cdd6f4; --text-dim: #bac2de; color-scheme: dark; } /* ---- Base ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.65; font-optical-sizing: auto; display: flex; flex-direction: column; min-height: 100vh; } /* ---- Theme toggle --------------------------------------------- */ /* Floating top-right pill; the sun/moon glyphs swap via CSS keyed off data-theme, so the JS only flips the attribute. */ .theme-toggle { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 10; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--rule); background: var(--bg-elevated); color: var(--text-dim); border-radius: 999px; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .theme-toggle:hover { color: var(--text); border-color: var(--ctp-mauve); } .theme-toggle-icon { width: 1rem; height: 1rem; display: none; } :root[data-theme="dark"] .theme-toggle-icon-sun { display: block; } :root[data-theme="light"] .theme-toggle-icon-moon { display: block; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-toggle-icon-moon { display: block; } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle-icon-sun { display: block; } } /* ---- Panels ---------------------------------------------------- */ /* Two doors, side by side: Ishmael on the left, Textual on the right. Each is a bordered card and one big anchor — art, title, summary, and a quiet destination line. The pair centres in the viewport; on narrow viewports the cards stack. */ .panels { width: 100%; max-width: 88rem; margin: auto; /* centres the pair in the flex body */ padding: 3.5rem 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 3rem 3.5rem; color: var(--text); text-decoration: none; border: 1px solid var(--rule); border-radius: 14px; transition: border-color 200ms ease; } .panel:hover { border-color: var(--panel-accent); } /* Fixed-height art slot so the two titles sit on the same line regardless of each image's aspect ratio. The Ishmael art is composited onto the theme background colours, so the panel keeps the plain page background (no hover wash — it would reveal the bitmap's rectangle). */ .panel-art { height: min(44vh, 28rem); width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 2.25rem; } .panel-art img { max-width: 100%; max-height: 100%; width: auto; height: auto; } /* Theme-matched art: both variants ship in the DOM and CSS shows the one matching data-theme — no JS in the swap path. */ .art-dark { display: none; } :root[data-theme="dark"] .art-light { display: none; } :root[data-theme="dark"] .art-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .art-light { display: none; } :root:not([data-theme]) .art-dark { display: block; } } .panel-eyebrow { font-family: var(--font-ui); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 0.75rem; } .panel h2 { font-weight: 400; font-size: 3rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); margin: 0 0 1.25rem; transition: color 200ms ease; } /* Each title set in its product's voice: Ishmael in the Literata it writes with, Textual in the monospace it renders in. */ .panel--ishmael h2 { font-family: var(--font-serif); } .panel--textual h2 { font-family: var(--font-mono); font-size: 2.6rem; } .panel-summary { max-width: 26rem; font-size: 1.05rem; line-height: 1.65; color: var(--text); margin: 0 0 1.75rem; text-wrap: pretty; } /* Destination line — quiet until the panel is hovered, when it (and the title) take the panel's accent: mauve for Ishmael, green for Textual, matching each product's brand. */ .panel-cta { font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; color: var(--text-dim); transition: color 200ms ease; } .panel--ishmael { --panel-accent: var(--ctp-mauve); } .panel--textual { --panel-accent: var(--ctp-green); } .panel:hover h2, .panel:hover .panel-cta, .panel:focus-visible h2, .panel:focus-visible .panel-cta { color: var(--panel-accent); } .panel:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 4px; } .panel-cta-arrow { display: inline-block; transition: transform 200ms ease; } .panel:hover .panel-cta-arrow { transform: translateX(0.25em); } /* ---- Narrow viewports ------------------------------------------ */ @media (max-width: 48rem) { .panels { grid-template-columns: 1fr; padding: 4.5rem 1rem 1.5rem; /* top clears the floating theme toggle */ } .panel { padding: 2.5rem 1.25rem 3rem; } .panel-art { height: min(38vh, 22rem); } .panel h2 { font-size: 2.4rem; } .panel--textual h2 { font-size: 2.1rem; } }