/* TenancyKit marketing site - Mobile-first - Light/dark via prefers-color-scheme - Tweak palette in :root vars */ /* Local subset fallback for Material Symbols */ @font-face { font-family: "Material Symbols Rounded Subset"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("/assets/fonts/material-symbols-rounded.woff2") format("woff2"); } :root { --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; /* App-ish palette (tweak freely) */ --accent: #5b7cff; /* primary */ --accent-2: #7c4dff; /* secondary */ --success: #23c483; /* Light theme defaults */ --bg: #f7f8ff; --surface: rgba(255, 255, 255, 0.92); --surface-2: rgba(245, 247, 255, 0.92); --card: #ffffff; --text: #0b1020; --muted: #4a5568; --border: rgba(17, 24, 39, 0.10); --shadow: 0 16px 50px rgba(17, 24, 39, 0.10); --radius-lg: 20px; --radius-md: 14px; --radius-sm: 12px; --container: 1120px; /* Motion + micro-interaction tuning */ --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 140ms; --dur-med: 220ms; --dur-slow: 680ms; } /* Theme overrides - Default: light - System dark: applies when there's no forced light override - Forced themes: set via [data-theme] on */ :root[data-theme="dark"] { --bg: #060812; /* Dark mode surfaces are intentionally more opaque to avoid background gradients showing through (which can look like sections are overlapping). */ --surface: rgba(12, 14, 28, 0.88); --surface-2: rgba(255, 255, 255, 0.07); /* Cards should be more opaque than general surfaces to avoid gradient bleed */ --card: rgba(12, 14, 28, 0.94); --text: #eef2ff; --muted: rgba(238, 242, 255, 0.75); --border: rgba(255, 255, 255, 0.10); /* Keep shadows tight in dark mode so they don't 'bleed' into the next section */ --shadow: 0 10px 22px rgba(0, 0, 0, 0.32); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #060812; /* Dark mode surfaces are intentionally more opaque to avoid background gradients showing through (which can look like sections are overlapping). */ --surface: rgba(12, 14, 28, 0.88); --surface-2: rgba(255, 255, 255, 0.07); /* Cards should be more opaque than general surfaces to avoid gradient bleed */ --card: rgba(12, 14, 28, 0.94); --text: #eef2ff; --muted: rgba(238, 242, 255, 0.75); --border: rgba(255, 255, 255, 0.10); /* Keep shadows tight in dark mode so they don't 'bleed' into the next section */ --shadow: 0 10px 22px rgba(0, 0, 0, 0.32); } } * { box-sizing: border-box; } html, body { height: 100%; } html { /* Prevent horizontal "jump" when pages differ in scroll height (scrollbar appears/disappears). */ scrollbar-gutter: stable; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); } .container { width: min(var(--container), calc(100% - 2rem)); margin-inline: auto; } /* Navbar */ .nav { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid var(--border); } .nav__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; padding: 0.9rem 0; } .brand { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 700; letter-spacing: -0.02em; } .brand__logo { width: 40px; height: 40px; display: block; } .brand__mark { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; box-shadow: 0 10px 24px rgba(91,124,255,0.25); font-size: 0.95rem; } .nav__toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 0.55rem 0.9rem; font-weight: 600; transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .nav__toggle .material-symbols-rounded { font-size: 20px; } .nav__links { grid-column: 1 / -1; display: none; list-style: none; padding: 0.5rem 0 0; margin: 0; gap: 0.25rem; } .nav__links[data-open="true"] { display: grid; } .nav__link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.85rem; border-radius: 999px; border: 1px solid transparent; color: var(--muted); font-weight: 600; transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .nav__linkIcon { font-size: 18px; line-height: 1; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-standard); } .nav__link.is-active { color: var(--text); background: var(--surface-2); border-color: var(--border); text-decoration: none; } .nav__link:hover, .nav__link:focus-visible { color: var(--text); background: var(--surface-2); border-color: var(--border); text-decoration: none; transform: translateY(-1px); } .nav__link:hover .nav__linkIcon, .nav__link:focus-visible .nav__linkIcon { transform: scale(1.08); } /* Dropdown */ .nav__dropdown { position: relative; } .nav__dropdownToggle { width: 100%; /* Reset button defaults so it matches normal nav links */ font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; background: transparent; border: 1px solid transparent; /* nav__link handles border/active states */ cursor: pointer; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.4rem; } .nav__dropdownToggle .material-symbols-rounded { font-size: 20px; } .nav__dropdownToggle .nav__linkIcon { font-size: 18px; } .nav__chevron { margin-left: auto; } .nav__dropdownMenu { display: none; list-style: none; margin: 0; padding: 0.35rem; border: 1px solid var(--border); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); } .nav__dropdownMenu[data-open="true"] { display: grid; } .nav__dropdownLink { display: flex; align-items: center; gap: 0.45rem; width: 100%; padding: 0.65rem 0.75rem; border-radius: 12px; color: var(--muted); font-weight: 600; transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .nav__dropdownIcon { font-size: 18px; line-height: 1; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-standard); } .nav__dropdownLink:hover { background: var(--surface-2); color: var(--text); text-decoration: none; transform: translateX(2px); } .nav__dropdownLink:hover .nav__dropdownIcon, .nav__dropdownLink:focus-visible .nav__dropdownIcon { transform: scale(1.08); } .nav__dropdownLink.is-active { color: var(--text); background: var(--surface-2); text-decoration: none; } @media (min-width: 860px) { .nav__dropdownMenu { position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 220px; z-index: 20; } .nav__dropdownToggle { width: auto; } } /* PDF embed: hide on small screens where iOS often shows only first page */ .pdf-embed { display: none; } .pdf-embed__hint { display: block; } .pdf-embed__fallback { display: none; } @media (min-width: 860px) { .pdf-embed { display: block; } .pdf-embed__hint { display: none; } .pdf-embed__fallback { display: block; } } .nav__theme { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; } .nav__theme:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); } .nav__theme:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, white); outline-offset: 2px; } :where(.btn, .nav__link, .nav__dropdownLink, .nav__toggle, .nav__theme, a.card, .footer__link):focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, white); outline-offset: 2px; } .material-symbols-rounded { /* Material Symbols are ligature-based: the text content (e.g. "dark_mode") is rendered as an icon when this font is applied. */ font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 24px; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; /* Reserve space so icons don't cause layout shift before the font loads (otherwise the text "expand_more" briefly renders and changes widths). */ display: inline-block; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; overflow: hidden; vertical-align: middle; } .nav__theme .material-symbols-rounded { font-size: 20px; line-height: 1; display: block; } .nav__cta { display: none; } @media (min-width: 860px) { .nav__inner { grid-template-columns: auto 1fr auto; } .nav__toggle { display: none; } .nav__links { display: flex; grid-column: auto; justify-content: center; align-items: center; padding: 0; gap: 0.25rem; } .nav__cta { display: inline-flex; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 999px; padding: 0.85rem 1.15rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 700; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,0.08); transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard); } .btn .material-symbols-rounded { font-size: 20px; line-height: 1; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-standard); } .btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,0.12); } .btn:hover .material-symbols-rounded, .btn:focus-visible .material-symbols-rounded { transform: translateX(1px) scale(1.06); } .btn:active { transform: translateY(0); } .btn--primary { border-color: rgba(91,124,255,0.35); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, white), var(--accent-2)); background-size: 180% 180%; background-position: 0% 50%; color: white; box-shadow: 0 18px 45px rgba(91,124,255,0.22); transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), background-position var(--dur-slow) var(--ease-standard); } .btn--primary:hover, .btn--primary:focus-visible { background-position: 100% 50%; } .btn--ghost { background: transparent; } .btn--sm { padding: 0.65rem 0.9rem; font-size: 0.95rem; } /* Hero */ .hero { position: relative; padding: 3.4rem 0 1.6rem; } /* Top-only gradient background (avoid repeating/banding down the page) */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1200px 600px at 20% -10%, rgba(91,124,255,0.12), transparent 55%), radial-gradient(1000px 520px at 90% 0%, rgba(124,77,255,0.10), transparent 60%), radial-gradient(800px 500px at 60% 40%, rgba(35,196,131,0.08), transparent 55%); } @media (prefers-color-scheme: dark) { .hero::before { background: /* Fade the whole hero glow into the page background to avoid a visible edge line. */ linear-gradient(to bottom, transparent 0%, var(--bg) 92%), radial-gradient(1200px 600px at 20% -10%, rgba(91,124,255,0.22), transparent 55%), radial-gradient(1000px 520px at 90% 0%, rgba(124,77,255,0.18), transparent 60%), radial-gradient(800px 500px at 60% 40%, rgba(35,196,131,0.10), transparent 55%); } } .hero__inner { position: relative; z-index: 1; display: grid; gap: 1rem; } .hero__inner--with-media { align-items: center; } .hero__content { max-width: 68ch; display: grid; gap: 0.85rem; } /* Non-home pages: let hero copy use full container width */ .hero:not(.hero--home) .hero__content { max-width: none; } @media (min-width: 980px) { .hero__inner--with-media { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 1.25rem; } .hero:not(.hero--home) .hero__inner--with-media { grid-template-columns: 1fr; } } .hero__media { margin: 0; justify-self: center; align-self: center; margin-inline: auto; width: min(250px, 100%); transform: rotate(2deg); transform-origin: 50% 50%; } .hero__mediaImage { display: block; width: 100%; height: auto; border-radius: 10px; } .hero__mediaTrigger { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; } .hero__mediaTrigger:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, white); outline-offset: 2px; border-radius: 10px; } @media (max-width: 979px) { .hero__media { justify-self: center; width: min(320px, 100%); transform: none; } } .eyebrow { margin: 0; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--muted) 80%, var(--text)); font-size: 0.78rem; } .hero__title { margin: 0; letter-spacing: -0.04em; line-height: 1.05; font-size: clamp(2.1rem, 4.6vw, 3.6rem); } .hero__tagline { margin: 0; max-width: 62ch; color: var(--muted); font-size: 1.05rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.45rem; } .hero__actions .btn:first-child { position: relative; } .hero__actions .btn:first-child::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; background: radial-gradient(50% 60% at 50% 50%, rgba(91,124,255,0.24), transparent 90%); filter: blur(8px); opacity: 0; transition: opacity var(--dur-med) var(--ease-standard); } .hero__actions .btn:first-child:hover::after, .hero__actions .btn:first-child:focus-visible::after { opacity: 1; } .hero__glow { position: absolute; inset: -60px 0 auto 0; height: 260px; background: radial-gradient(closest-side, rgba(91,124,255,0.16), transparent 70%); filter: blur(12px); } .main { padding: 1.6rem 0 4rem; } /* Sections + components */ .section { position: relative; margin-top: 3rem; /* extra breathing room so shadows never visually collide */ padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: border-color var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard), background-color var(--dur-med) var(--ease-standard); } .section--flat { background: transparent; border: none; box-shadow: none; padding: 0; } .section--split { display: grid; gap: 1rem; align-items: start; } @media (min-width: 920px) { .section--split { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 1.2rem; } .section--split-reverse .section__content { order: 2; } .section--split-reverse .visual-panel { order: 1; } } .visual-panel { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow); padding: 1rem; } .visual-panel__label { margin: 0 0 0.75rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: color-mix(in srgb, var(--muted) 82%, var(--text)); } .visual-stack { display: grid; gap: 0.6rem; } .visual-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 0.7rem 0.75rem; } .visual-card__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .visual-card__head .material-symbols-rounded { font-size: 18px; } .visual-card__title { margin: 0; font-size: 0.95rem; font-weight: 700; } .visual-card__text { margin: 0; font-size: 0.9rem; color: var(--muted); } .visual-kpis { margin-top: 0.75rem; display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-pill { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); padding: 0.5rem 0.6rem; } .kpi-pill strong { display: block; font-size: 0.95rem; line-height: 1.2; } .kpi-pill span { display: block; margin-top: 0.15rem; font-size: 0.82rem; color: var(--muted); } @media (max-width: 520px) { .visual-kpis { grid-template-columns: 1fr; } } .guide-cta__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .h2 { margin: 0 0 0.5rem; font-size: 1.35rem; letter-spacing: -0.02em; } .p { margin: 0.25rem 0 0; color: var(--muted); } .grid { display: grid; gap: 1rem; } .screenshot-gallery { display: grid; gap: 0.8rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .screenshot-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 860px) { .screenshot-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .screenshot-gallery__item { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 0; cursor: zoom-in; overflow: hidden; box-shadow: var(--shadow); transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); } .screenshot-gallery__item img { display: block; width: 100%; height: auto; } .screenshot-gallery__item:hover, .screenshot-gallery__item:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 18px 42px rgba(0,0,0,0.16), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--border)); } .lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; opacity: 0; transition: opacity var(--dur-med) var(--ease-standard); } .lightbox[hidden] { display: none; } .lightbox__backdrop { position: absolute; inset: 0; border: 0; background: rgba(5, 8, 20, 0.78); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--dur-med) var(--ease-standard); } .lightbox__figure { position: relative; z-index: 1; margin: 0; width: min(1100px, calc(100% - 1.5rem)); display: grid; place-items: center; opacity: 0; transform: scale(0.58); transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1), opacity 420ms var(--ease-standard); } .lightbox__img { display: block; grid-area: 1 / 1; position: relative; z-index: 1; width: 100%; height: auto; max-height: calc(100vh - 2rem); object-fit: contain; border-radius: 0; opacity: 0; transform: scale(0.35); filter: blur(8px) saturate(0.78); transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 420ms var(--ease-standard), filter 620ms var(--ease-standard); will-change: transform, opacity; } .lightbox__img--ghost { z-index: 2; pointer-events: none; } .lightbox[data-open="true"] { opacity: 1; } .lightbox[data-open="true"] .lightbox__backdrop { opacity: 1; } .lightbox[data-open="true"] .lightbox__figure { opacity: 1; transform: scale(1); } .lightbox[data-open="true"] .lightbox__img { opacity: 1; transform: scale(1); filter: none; } .lightbox[data-open="true"] .lightbox__img[data-slide] { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms var(--ease-standard); } .lightbox[data-open="true"] .lightbox__img[data-slide="out-left"] { opacity: 0.28; transform: translateX(-34%); } .lightbox[data-open="true"] .lightbox__img[data-slide="out-right"] { opacity: 0.28; transform: translateX(34%); } .lightbox[data-open="true"] .lightbox__img[data-slide="in-left"] { opacity: 1; transform: translateX(-34%); } .lightbox[data-open="true"] .lightbox__img[data-slide="in-right"] { opacity: 1; transform: translateX(34%); } .lightbox[data-open="true"] .lightbox__img[data-slide="center"] { opacity: 1; transform: translateX(0); } .lightbox__close { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 3; width: 38px; height: 38px; border-radius: 999px; border: 0; background: rgba(10, 12, 24, 0.58); color: #fff; display: grid; place-items: center; cursor: pointer; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(10, 12, 24, 0.58); color: #fff; display: grid; place-items: center; cursor: pointer; } .lightbox__nav[hidden] { display: none !important; } .lightbox__nav--prev { left: 0.55rem; } .lightbox__nav--next { right: 0.55rem; } .lightbox__nav .material-symbols-rounded, .lightbox__close .material-symbols-rounded { font-size: 24px; } @media (prefers-reduced-motion: reduce) { .lightbox, .lightbox__backdrop, .lightbox__figure, .lightbox__img, .lightbox[data-open="true"] .lightbox__img[data-slide] { transition: none !important; } .lightbox__figure { transform: none; } .lightbox__img, .lightbox[data-open="true"] .lightbox__img { transform: none; filter: none; opacity: 1; } } @media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } } .card { display: block; /* cards are sometimes , sometimes
*/ padding: 1.1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), background-color var(--dur-med) var(--ease-standard); } /* Clickable cards should look clickable. */ a.card { cursor: pointer; } a.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 20px 52px rgba(0,0,0,0.13), 0 0 0 1px color-mix(in srgb, var(--accent) 26%, var(--border)), 0 0 28px color-mix(in srgb, var(--accent) 18%, transparent); text-decoration: none; } .section > h2.h2 { position: relative; padding-bottom: 0.45rem; margin-bottom: 0.65rem; } .section--split .section__content > h2.h2 { position: relative; padding-bottom: 0.45rem; margin-bottom: 0.65rem; } .section > h2.h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 132px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 78%, white), transparent); opacity: 0.9; } .section--split .section__content > h2.h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 132px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 78%, white), transparent); opacity: 0.9; } .list { margin: 0.75rem 0 0; padding-left: 1.35rem; } .list--icons { list-style: none; padding-left: 0; } .list--icons li { display: flex; align-items: flex-start; gap: 0.55rem; } .list--icons .material-symbols-rounded { font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 0.22rem; color: color-mix(in srgb, var(--accent) 72%, var(--text)); } .list li + li { margin-top: 0.35rem; } @media (prefers-reduced-motion: reduce) { .nav__link, .nav__dropdownLink, .nav__toggle, .nav__linkIcon, .nav__dropdownIcon, .btn, .btn .material-symbols-rounded, .btn--primary, .section, .card, .hero__actions .btn:first-child::after { transition: none !important; } .nav__link:hover, .nav__dropdownLink:hover, .btn:hover, a.card:hover { transform: none; } } .card__cta { margin-top: 0.75rem; font-weight: 700; color: color-mix(in srgb, var(--text) 70%, var(--muted)); } .card:hover .card__cta { color: var(--text); } .card__title { margin: 0 0 0.25rem; font-weight: 800; letter-spacing: -0.02em; } .card__titleIcon { margin-right: 0.4rem; vertical-align: -3px; /* Override base icon box to prevent glyph edge clipping in card titles */ width: 1.5rem; height: 1.5rem; line-height: 1.5rem; overflow: visible; } .card__text { margin: 0; color: var(--muted); } .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; padding: 0.15rem 0.4rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); } /* Footer */ .footer { border-top: 1px solid var(--border); padding: 2.25rem 0; background: color-mix(in srgb, var(--bg) 74%, transparent); } .footer__inner { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } @media (min-width: 720px) { .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; } /* Desktop: copyright left, links right (always). */ .footer__brand { order: 1; text-align: left; } .footer__links { order: 2; margin-left: auto; justify-content: flex-end; } } .footer__brand { margin: 0; color: var(--muted); } .footer__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; } /* Match copyright typography (size + weight). */ .footer__link { color: var(--muted); font-weight: inherit; font-size: inherit; } .footer__link:hover { color: var(--text); } /* Utility */ .small { font-size: 0.95rem; color: var(--muted); }