/* Archivo — SIL OFL 1.1. License: /assets/fonts/Archivo-OFL.txt */ @font-face { font-family: "Archivo"; src: url("../assets/fonts/Archivo-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../assets/fonts/Archivo-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../assets/fonts/Archivo-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../assets/fonts/Archivo-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../assets/fonts/Archivo-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../assets/fonts/Archivo-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../assets/fonts/Archivo-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../assets/fonts/Archivo-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* UtilityDark / UtilityLight, from the daysoff palette. Dark is the default; light applies when the system prefers light, or when the switch was used (saved as data-theme on by js/boot.js — that choice then wins). */ :root { --bg: #1d1d1d; --panel: #2b2b2b; --line: #4d4946; --fg: #cdbeab; --fg-bold: #d9d9d9; --fg-2: #c4b098; --muted: #817464; --accent: #ee6e39; --red: #cc433d; --green: #819f84; --yellow: #e8a655; --blue: #9eb2c9; --purple: #cf95f9; --on-color: #1d1d1d; --on-themes-color: rgba(29, 29, 29, 0.55); --radius: 0.75ch; --shadow: 0 1.5ch 4ch rgba(34, 34, 34, 0.51); --shadow-float: 0 0.5ch 12ch rgb(0 0 0 / 0.55); --bg-clear: rgb(29 29 29 / 0); --halo: rgb(19 19 19 / 1); --mono: ui-monospace, "SF Mono", Menlo, monospace; color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f5efe8; --panel: #dfd5c9; --line: #a6a19b; --fg: #1d1d1d; --fg-bold: #2b2b2b; --fg-2: #5a5651; --muted: #7c7874; --accent: #e2532d; --red: #991c17; --green: #617763; --yellow: #e89632; --blue: #62788b; --purple: #9960b7; --on-color: #f5efe8; --on-themes-color: rgba(242, 232, 219, 0.75); --shadow: 0 2ch 6ch rgb(0 0 0 / 0.18); --shadow-float: 0 0.5ch 12ch rgb(0 0 0 / 0.22); --bg-clear: rgb(245 239 232 / 0); --halo: rgb(245 239 232 / 0.93); color-scheme: light; } } :root[data-theme="light"] { --bg: #f5efe8; --panel: #dfd5c9; --line: #a6a19b; --fg: #1d1d1d; --fg-bold: #2b2b2b; --fg-2: #5a5651; --muted: #7c7874; --accent: #e2532d; --red: #991c17; --green: #617763; --yellow: #e89632; --blue: #62788b; --purple: #9960b7; --on-color: #f5efe8; --on-themes-color: rgba(242, 232, 219, 0.75); --shadow: 0 2ch 6ch rgb(0 0 0 / 0.18); --shadow-float: 0 0.5ch 12ch rgb(0 0 0 / 0.22); --bg-clear: rgb(245 239 232 / 0); --halo: rgb(245 239 232 / 0.93); color-scheme: light; } * { box-sizing: border-box; } /* sticky nav is ~6.6ch tall; anchor scrolls stop below it with room to breathe */ html { scroll-behavior: smooth; scroll-padding-top: 9ch; } html, body { margin: 0; } body { font: 1rem/1.5 "Archivo", -apple-system, system-ui, "Segoe UI", sans-serif; background: var(--bg); color: var(--fg); min-height: 100svh; transition: background-color 0.3s ease, color 0.3s ease; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { color: var(--fg-bold); margin: 0; font-weight: 600; } img { max-width: 100%; height: auto; display: block; } .faq-clip code { background: var(--bg); border: 1px solid var(--line); } code { font-family: var(--mono); font-size: 0.9375em; padding: 0.1em 0.35em; border-radius: 6px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .wrap { max-width: 118ch; margin: 0 auto; padding: 0 3ch; } /* structural labels are set as code comments — the page reads like a preview */ .eyebrow { font-family: var(--mono); font-size: 0.875rem; font-weight: 500; color: var(--muted); margin: 0 0 1.25ch; } /* ---- nav ---- */ .nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); transition: background-color 0.3s ease, border-color 0.3s ease; } .nav-inner { display: flex; align-items: center; gap: 3ch; padding: 1.25ch 3ch; max-width: 118ch; margin: 0 auto; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 1ch; font-size: 1.25rem; font-weight: 700; color: var(--fg-bold); letter-spacing: -0.02em; } .brand:hover { text-decoration: none; } .brand img { width: 3.5ch; height: 3.5ch; } .brand-text { color: var(--fg-bold); font-size: 1.325rem; } .nav-links { display: flex; gap: 2.5ch; flex: 1; font-size: 0.9375rem; justify-content: flex-end; margin-inline-end: 1ch; } .nav-links a { color: var(--fg-2); font-weight: 500; } .nav-links a:hover { color: var(--fg-bold); text-decoration: none; } @media (max-width: 700px) { .nav-links { display: none; } .nav-inner { justify-content: space-between; } } /* appearance switch: sun | moon pill, knob glides to the one in use */ .theme-switch { position: relative; display: flex; width: 9ch; height: 4ch; padding: 0 0.4ch; border-radius: 999px; cursor: pointer; background: var(--panel); border: 1px solid var(--line); -webkit-tap-highlight-color: transparent; transition: background-color 0.3s ease, border-color 0.3s ease; flex: none; align-items: center; justify-content: center; } .theme-switch svg { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; height: 65%; color: var(--muted); transition: color 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .theme-switch .knob { position: absolute; top: 0.3ch; left: 0.3ch; width: calc(50% - 0.4ch); height: calc(100% - 0.5ch); border-radius: 999px; background: var(--yellow); transition: transform 0.4s cubic-bezier(0.3, 1.15, 0.64, 1), background-color 0.3s ease; } .theme-switch.dark .knob { transform: translateX(100%); background: var(--purple); } .theme-switch.dark .icon-moon { color: var(--on-color); transform: rotate(-15deg); } .theme-switch.dark .icon-sun { transform: rotate(-90deg) scale(0.85); } .theme-switch.light .icon-sun { color: var(--on-color); transform: rotate(0deg) scale(1); } .theme-switch.light .icon-moon { transform: rotate(30deg) scale(0.85); } /* ---- hero ---- */ .hero { position: relative; padding: 5ch 0 5ch; } .hero-center { max-width: 78ch; margin: 0 auto; padding: 0 3ch; text-align: center; position: relative; z-index: 2; } .hero h1 { font-size: clamp(3.5rem, 6vw, 4.25rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; } .hero h1 .hl { color: var(--accent); } .hero-L1 { font-size: 80%; } .hero .tagline { margin: 1.5ch auto 0; font-size: 1.25rem; color: var(--fg-2); font-weight: 400; } .cta-row { margin-top: 3.5ch; display: flex; flex-direction: column; align-items: center; gap: 1.25ch; } .cta { display: inline-flex; align-items: center; gap: 1.25ch; font-size: 0.85rem; font-weight: 600; padding: 1.25ch 1.5ch; border-radius: var(--radius); background: var(--bg); color: var(--fg-2); border: 1px solid var(--line); } .cta svg { height: 2ch; } /* Official badge: Apple asks for at least 40px tall and clear space around it. */ .cta-badge { display: inline-block; line-height: 0; } .cta-badge img { height: 50px !important; width: auto !important; } .cta-note { font-size: 0.875rem; color: var(--muted); } /* ---- hero screenshot: the real Quick Look panel ---- */ .hero-shot { max-width: 92ch; margin: 6ch auto 0; padding: 0 3ch; } .hero-shot img { box-shadow: 0 0.5ch 6ch rgba(0, 0, 0, 0.5); border-radius: 18px; } /* ---- full-viewport theme field: rows drift sideways on scroll; the copy sits on a solid dark center that fades out toward the cards ---- */ /* overflow-x only: rows clip at the viewport edges, cards may bleed vertically */ .field { position: relative; overflow-x: clip; min-height: 75svh; display: grid; grid-template-columns: 100%; place-items: center; padding: 1.5ch 0 2ch; } /* in flow (not absolute) so the field grows to contain the rows; both children share the grid cell, the copy overlays centered */ .field-rows { grid-area: 1 / 1; z-index: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 6svh; } .field-row { display: flex; justify-content: flex-start; gap: 2.5ch; width: 100%; will-change: transform; } .field-copy { max-width: 60svw; grid-area: 1 / 1; justify-self: center; position: relative; z-index: 2; text-align: center; padding: 5ch 6.5ch; background: var(--on-themes-color); border: 1px solid var(--line); border-radius: 2.5ch; transition: background-color 0.3s ease, border-color 0.3s ease; } /* halo between the rows and the card: a blurred rounded rectangle in the bg color, shaped like the card and slightly larger, feathering out over the rows */ .field::after { content: ""; position: absolute; z-index: 1; pointer-events: none; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100svw, 80ch); height: 45ch; border-radius: 5ch; background: var(--halo); filter: blur(40px) opacity(0.95); } .field-copy h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; } .field-copy .h2-sub { display: block; font-size: 0.55em; margin-top: 0.35em; } .lettered b { font-weight: inherit; } .lettered b:nth-child(1) { color: var(--accent); } .lettered b:nth-child(2) { color: var(--yellow); } .lettered b:nth-child(3) { color: var(--green); } .lettered b:nth-child(4) { color: var(--blue); } .lettered b:nth-child(5) { color: var(--purple); } .lettered b:nth-child(6) { color: var(--red); } .lettered-alt b { font-weight: inherit; } .lettered-alt b:nth-child(1) { color: var(--accent); } .lettered-alt b:nth-child(2) { color: var(--yellow); } .lettered-alt b:nth-child(3) { color: var(--green); } .lettered-alt b:nth-child(4) { color: var(--blue); } .lettered-alt b:nth-child(5) { color: var(--purple); } .lettered-alt b:nth-child(6) { color: var(--red); } .lettered-alt b:nth-child(7) { color: var(--accent); } .lettered-alt b:nth-child(8) { color: var(--yellow); } .lettered-alt b:nth-child(9) { color: var(--green); } .lettered-alt b:nth-child(10) { color: var(--blue); } .lettered-alt b:nth-child(11) { color: var(--purple); } .field-copy p { color: var(--fg-2); margin: 1.75ch auto 0; max-width: 44ch; font-size: 1.0625rem; text-wrap: pretty; } .field-copy p.eyebrow { color: var(--muted); margin: 0 0 1.5ch; } @media (max-width: 700px) { .field { min-height: 80svh; } .field-copy { padding: 6ch 2ch; max-width: 80svw; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---- theme cards: CodeLook's SwiftUI card layout rebuilt in DOM by js/cards.js (sizes and theme colors are set inline there) ---- */ .card-wrapper { display: flex; flex-direction: column; align-items: center; gap: 0.9ch; flex: none; /* each card is its own small compositor layer, so the row's loop-wrap is pure matrix math — iOS purges stale regions of one big painted row layer while idle, and the wrap landed on them as a black flash */ transform: translateZ(0); } .card { position: relative; flex-shrink: 0; } .card-bg { display: flex; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; } .card-bg .gutter { background: var(--gutter-bg); flex-shrink: 0; } .card-bg .divider { background: var(--separator); flex-shrink: 0; } .card-bg .editor { flex: 1; background: var(--editor-bg); } .skeleton { position: absolute; top: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; } .skeleton-grid { display: grid; align-content: center; } .line-number { display: flex; align-items: center; justify-content: center; } .line-number .pill { border-radius: var(--block-radius); background: var(--line-number-color); } .code-row { display: flex; align-items: center; } .b { flex-shrink: 0; border-radius: var(--block-radius); } .theme-name { text-align: center; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--fg-2); text-transform: capitalize; } /* ---- fast section: word flies through, screenshot zooms open ---- */ .fast { position: relative; min-height: 30svh; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: visible; margin-block-start: 0; } @media (max-width: 700px) { .fast { min-height: 20svh; padding: 0 0 2ch; margin-block: 8ch; } } /* the words hide behind the screenshot and slide out to its sides */ .fast-words { position: absolute; inset: 0px; z-index: 1; pointer-events: none; font-size: clamp(2.5rem, 3.5svw, 3.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; font-family: var(--mono); font-weight: 500; } .fast-words span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; will-change: transform; } .fw-super { color: var(--fg-bold); } .fw-fast { font-style: italic; color: var(--accent); } .fast-shot { position: relative; z-index: 2; max-width: min(62ch, 52svw); padding: 0 3ch; will-change: transform, opacity; } /* small screens: the words go above and below instead, so the shot can be wide */ @media (max-width: 700px) { .fast-shot { max-width: 92vw; } } .fast-shot img { max-height: 32ch; width: auto; filter: drop-shadow(0 1.5ch 2.5ch rgb(0 0 0 / 0.5)); } /* ---- alternating feature panels ---- */ .panels { display: flex; flex-direction: column; gap: 4ch; padding: 5ch 3ch; } .panel { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3.5ch; border-radius: 2.5ch; padding: 4ch 3ch; background: color-mix(in srgb, var(--tint) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--tint) 22%, var(--line)); overflow: hidden; transition: background-color 0.3s ease, border-color 0.3s ease; } #accuracy, #bigfiles { grid-template-columns: 3fr 2.5fr; } #fonts.panel { padding-inline-end: 0; } .panel.flip { grid-template-columns: 1.25fr 1fr; } .panel.flip .panel-copy { order: 2; } .panel.flip .panel-media { order: 1; } .panel-copy h2 { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; margin-bottom: 1ch; } .panel-copy p { color: var(--fg-2); font-size: 1.0313rem; text-wrap: balance; margin: 0; } .panel-copy-sub { display: flex; flex-direction: column; gap: 1ch; } .panel-copy p.eyebrow { margin: 0 0 1.25ch; } .panel-copy .fine { font-size: 0.875rem; color: var(--muted); margin-block-start: 1ch; } #fonts .panel-media { transform: translateX(12px); border-top-right-radius: 0; border-bottom-right-radius: 0; max-height: 35ch; } #fonts .panel-media img { border-radius: 12px; } #theming .panel-media img { border-radius: 9px; } .panel-media img { box-shadow: var(--shadow); } #system .panel-media img { border-radius: 8px; } .panel-media .plain img { border-radius: 14px; } .caption { margin: 1.5ch 0 0; font-size: 0.875rem; color: var(--muted); text-align: center; } @media (max-width: 960px) { .panel, .panel.flip, #accuracy, #bigfiles { grid-template-columns: 1fr; padding: 3.5ch; } .panel.flip .panel-copy { order: 1; } .panel.flip .panel-media { order: 2; } } /* light/dark screenshot pair: the visible one follows the page appearance */ .pair { position: relative; } .pair img { transition: opacity 0.45s ease; } .pair img.dark { position: absolute; inset: 0; opacity: 1; } .pair img.light { opacity: 0; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .pair img.dark { opacity: 0; } :root:not([data-theme="dark"]) .pair img.light { opacity: 1; } } :root[data-theme="light"] .pair img.dark { opacity: 0; } :root[data-theme="light"] .pair img.light { opacity: 1; } /* ---- section headers ---- */ .section-head { text-align: center; max-width: 72ch; margin: 0 auto; padding: 0 3ch; } .section-head h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.025em; text-wrap: balance; } .section-head p { color: var(--fg-2); margin: 1.5ch auto 0; max-width: 58ch; text-wrap: pretty; } .section-head p.eyebrow { color: var(--muted); margin: 0 auto 1.5ch; } /* ---- languages ---- */ .langs { padding-block: 4ch 8ch; } .lang-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25ch; max-width: 84ch; margin: 3.5ch auto 0; padding: 0 3ch; } .lang-chip { display: inline-flex; align-items: center; gap: 0.75ch; padding: 0.9ch 1.75ch; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); transition: background-color 0.3s ease, border-color 0.3s ease; } .lang-chip img { width: 1.25em; height: 1.25em; flex-shrink: 0; } .lang-chip code { font-size: 0.9375rem; color: var(--fg-bold); } /* ---- FAQ ---- */ .faq { padding: 4ch 0 7ch; } .faq-list { max-width: 78ch; margin: 4ch auto 0; padding: 0 3ch; display: flex; flex-direction: column; gap: 1.5ch; } .faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: 1.25ch; transition: background-color 0.3s ease, border-color 0.3s ease; } .faq-q { margin: 0; padding: 0; } .faq-q button { position: relative; width: 100%; padding: 2ch 5ch 2ch 2.5ch; border: none; border-radius: 1.25ch; background: none; font: inherit; font-weight: 600; color: var(--fg-bold); text-align: left; cursor: pointer; } .faq-q button[aria-expanded="true"] { color: var(--accent); } .faq-q button::before, .faq-q button::after { content: ""; position: absolute; top: 50%; right: 2.5ch; width: 1.4ch; height: 2px; border-radius: 1px; background: var(--muted); transition: transform 0.22s ease; } .faq-q button::before { transform: translateY(-50%); } .faq-q button::after { transform: translateY(-50%) rotate(90deg); } .faq-q button[aria-expanded="true"]::before { transform: translateY(-50%) rotate(45deg); } .faq-q button[aria-expanded="true"]::after { transform: translateY(-50%) rotate(135deg); } .faq-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.22s ease, visibility 0.22s; } .faq-body.open { grid-template-rows: 1fr; visibility: visible; } .faq-clip { min-height: 0; overflow: hidden; } .faq-item .a { padding: 0 2.5ch 2.5ch; color: var(--fg-2); } .faq-item .a p { margin: 0 0 1ch; } .faq-item .a p:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .faq-body, .faq-q button::after { transition-duration: 0s; } } /* ---- closing CTA ---- */ .closing { padding: 2ch 0 8ch; } .closing-card { text-align: center; border-radius: 2.5ch; padding: 7ch 3ch; background: color-mix(in srgb, var(--accent) 0.5%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 2.5%, var(--line)); transition: background-color 0.3s ease, border-color 0.3s ease; } .closing-card img { width: 11ch; height: 11ch; margin: 0 auto 1.5ch; } .closing-card h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); letter-spacing: -0.025em; } .closing-card h2 span { color: var(--accent); } .closing-card p { color: var(--fg-2); margin: 1.5ch auto 0; max-width: 52ch; } .closing-card .cta-row { margin-top: 3.5ch; } /* ---- footer ---- */ footer { padding: 3.5ch 0 5ch; color: var(--muted); } footer a { color: var(--fg-2); } .foot-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5ch; font-size: 0.875rem; } .foot-links { display: flex; gap: 2ch; } .foot-legal { margin-top: 3ch; font-size: 0.75rem; color: var(--muted); line-height: 1.6; } .foot-legal h4 { font-size: 0.75rem; font-weight: 600; color: var(--fg-2); margin: 2ch 0 0.5ch; } .foot-legal h4:first-child { margin-top: 0; } .foot-legal p { margin: 0 0 0.75ch; } /* ---- contact: footer trigger + modal form (js/contact.js) ---- */ .foot-contact { padding: 0; border: none; background: none; font: inherit; font-size: 0.875rem; color: var(--fg-2); cursor: pointer; } .foot-contact:hover { text-decoration: underline; } /* the page holds still while the modal is up (scroll.js also stands down) */ body:has(dialog[open]) { overflow: hidden; } .contact-modal { width: min(92vw, 62ch); max-height: 88svh; margin: auto; padding: 4ch 4.5ch; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 2.5ch; box-shadow: var(--shadow-float); overscroll-behavior: contain; } .contact-modal[open] { opacity: 0; transform: translateY(2ch) scale(0.98); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.3, 1.15, 0.64, 1); } .contact-modal.show { opacity: 1; transform: none; } .contact-modal::backdrop { background: rgb(0 0 0 / 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s ease; } .contact-modal.show::backdrop { opacity: 1; } .contact-modal h2 { font-size: 1.75rem; letter-spacing: -0.02em; } .modal-close { position: absolute; top: 1.75ch; right: 1.75ch; z-index: 1; display: flex; align-items: center; justify-content: center; width: 4ch; height: 4ch; padding: 0; border: none; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; } .modal-close:hover { color: var(--fg-bold); background: var(--panel); } .modal-close svg { width: 2ch; height: 2ch; } /* form and sent views share one grid cell: the modal keeps its height while they crossfade, so success never makes the dialog jump */ .modal-stack { display: grid; } .modal-stack > * { grid-area: 1 / 1; } .modal-view-form { transition: opacity 0.3s ease, transform 0.3s ease; } .contact-modal.sent .modal-view-form { opacity: 0; transform: translateY(-1ch); } .modal-view-sent { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4ch 0; opacity: 0; transform: translateY(1.5ch); transition: opacity 0.35s ease 0.1s, transform 0.4s cubic-bezier(0.3, 1.15, 0.64, 1) 0.1s; } .contact-modal.sent .modal-view-sent { opacity: 1; transform: none; } .sent-badge { width: 7ch; height: 7ch; color: var(--green); transform: scale(0.6); transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.64, 1) 0.15s; } .contact-modal.sent .sent-badge { transform: scale(1); } .modal-view-sent h2 { margin-top: 2ch; } .modal-view-sent p { color: var(--fg-2); margin: 1ch 0 0; } .sent-close { margin-top: 3ch; padding: 1.1ch 2.5ch; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--fg-2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .sent-close:hover { color: var(--fg-bold); border-color: var(--muted); } /* ---- the form itself ---- */ .cform { display: flex; flex-direction: column; gap: 1.75ch; margin-top: 2.5ch; } .hp { display: none; } .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75ch; } .f-field > label, .f-subject legend { display: block; margin-bottom: 0.6ch; padding: 0; font-size: 0.875rem; font-weight: 500; color: var(--fg-2); } .cform input[type="text"], .cform input[type="email"], .cform textarea { width: 100%; padding: 1.1ch 1.5ch; font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.2s ease, background-color 0.3s ease; } .cform input:focus-visible, .cform textarea:focus-visible { outline: none; } .cform input[type="text"]:focus, .cform input[type="email"]:focus, .cform textarea:focus { border-color: var(--accent); } .f-field.invalid input, .f-field.invalid textarea { border-color: var(--red); } .cform ::placeholder { color: var(--muted); opacity: 1; } .cform textarea { resize: vertical; min-height: 10ch; } /* error messages slide open under their field, FAQ-style */ .f-err-slot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; } .f-field.invalid .f-err-slot { grid-template-rows: 1fr; } .f-err-clip { min-height: 0; overflow: hidden; } .f-err { margin: 0; padding-top: 0.6ch; font-size: 0.8125rem; color: var(--red); } /* subject radios styled as lang-chip pills */ .f-subject { border: none; margin: 0; padding: 0; } .subject-chips { display: flex; flex-wrap: wrap; gap: 1.25ch; } .subject-chip { position: relative; display: inline-flex; align-items: center; padding: 0.9ch 1.75ch; border-radius: 999px; cursor: pointer; font-size: 0.9375rem; font-weight: 500; color: var(--fg-2); background: var(--panel); border: 1px solid var(--line); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .subject-chip input { position: absolute; opacity: 0; pointer-events: none; } .subject-chip:hover { color: var(--fg-bold); } .subject-chip:has(input:checked) { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); border-color: var(--accent); color: var(--fg-bold); } .subject-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; } /* bug-report details slide in under the subject when Bug Report is picked */ .debug-slot { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.3s ease, visibility 0.3s; } .debug-slot.open { grid-template-rows: 1fr; visibility: visible; } .debug-clip { min-height: 0; overflow: hidden; } .debug-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5ch; padding-top: 1.75ch; } .debug-grid .f-note { grid-column: 1 / -1; margin: 0; font-size: 0.8125rem; color: var(--muted); } .send-row { display: flex; flex-direction: column; align-items: flex-start; } .send-row .f-err { padding: 0 0 1.25ch; } .cform-send { padding: 1.25ch 2.75ch; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--on-color); background: var(--accent); border: none; border-radius: var(--radius); cursor: pointer; transition: background-color 0.2s ease, opacity 0.2s ease; } .cform-send:hover { background: color-mix(in srgb, var(--accent) 85%, var(--fg-bold)); } .cform-send:disabled { opacity: 0.65; cursor: default; } @media (max-width: 540px) { .contact-modal { padding: 3ch 2.5ch; } .f-row, .debug-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .contact-modal[open], .contact-modal::backdrop, .modal-view-form, .modal-view-sent, .sent-badge, .f-err-slot, .debug-slot { transition-duration: 0s; } }