/* ========================================================================== Ankhway Marketing — site styles Dark theme by default, light theme via [data-theme="light"] on . ========================================================================== */ /* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */ @font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Pixel Square"; src: url("../fonts/GeistPixel-Square.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } /* ---------- Design tokens ---------- */ :root { --bg: #1f2023; --fg: #fafafa; --fg-soft: rgba(250, 250, 250, 0.86); --card: #171717; --muted: #262626; --muted-a: rgba(38, 38, 38, 0.72); --muted-fg: #a3a3a3; --border: rgba(255, 255, 255, 0.1); --border-soft: rgba(255, 255, 255, 0.07); --input: rgba(255, 255, 255, 0.15); --primary: #e5e5e5; --primary-hover: #f5f5f5; --primary-fg: #171717; --accent: #262626; --ring: #737373; --ghost: rgba(255, 255, 255, 0.048); --ghost-hover: rgba(255, 255, 255, 0.08); --hatch: rgba(255, 255, 255, 0.1); --dot-rgb: 255, 255, 255; --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-pop: 0 24px 60px -24px rgba(0, 0, 0, 0.6); --success: #4ade80; --danger: #f87171; --warn: #fbbf24; --radius: 10px; --radius-md: 14px; --radius-lg: 16px; --container: 1152px; --header-h: 57px; --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-pixel: "Geist Pixel Square", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color-scheme: dark; } :root[data-theme="light"] { --bg: #ffffff; --fg: #0a0a0a; --fg-soft: rgba(10, 10, 10, 0.84); --card: #fafafa; --muted: #f4f4f5; --muted-a: rgba(244, 244, 245, 0.92); --muted-fg: #646464; --border: rgba(0, 0, 0, 0.1); --border-soft: rgba(0, 0, 0, 0.07); --input: rgba(0, 0, 0, 0.15); --primary: #171717; --primary-hover: #2e2e2e; --primary-fg: #fafafa; --accent: #f4f4f5; --ring: #a3a3a3; --ghost: rgba(0, 0, 0, 0.03); --ghost-hover: rgba(0, 0, 0, 0.06); --hatch: rgba(0, 0, 0, 0.08); --dot-rgb: 0, 0, 0; --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.18); --shadow-pop: 0 24px 60px -24px rgba(0, 0, 0, 0.25); --success: #15803d; --danger: #b91c1c; --warn: #a16207; color-scheme: light; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; } hr { border: 0; border-top: 1px solid var(--border); margin: 0; } ::selection { background: color-mix(in srgb, var(--fg) 22%, transparent); } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -64px; z-index: 300; padding: 8px 12px; border-radius: var(--radius); background: var(--primary); color: var(--primary-fg); font-size: 14px; font-weight: 500; transition: top 0.15s ease; } .skip-link:focus { top: 12px; } .muted { color: var(--muted-fg); } .link { color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent); text-underline-offset: 3px; } .link:hover { text-decoration-color: var(--fg); } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; } @media (min-width: 640px) { .container { padding-inline: 32px; } } .site { position: relative; flex: 1; display: flex; flex-direction: column; } main { position: relative; z-index: 1; flex: 1; } /* Decorative hatched rails on both sides of the content column */ .frame-rails { position: absolute; inset: 0; z-index: 0; display: none; justify-content: center; pointer-events: none; } .frame-rails .rail { width: 40px; flex-shrink: 0; border-inline: 1px solid var(--border-soft); background: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 8px); } .frame-rails .rail-mid { width: 100%; max-width: var(--container); flex-shrink: 0; } @media (min-width: 1240px) { .frame-rails { display: flex; } } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--border-soft); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); } .header-inner { height: 56px; display: flex; align-items: center; gap: 12px; } .brand { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-family: var(--font-pixel); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; color: var(--fg); } .brand svg { width: 24px; height: 24px; flex-shrink: 0; } .brand-sub { color: var(--muted-fg); } .brand:hover .brand-name { text-decoration: underline; text-underline-offset: 4px; } .main-nav { display: none; align-items: center; gap: 2px; margin-left: 16px; } .main-nav a { padding: 6px 10px; border-radius: 8px; font-size: 14px; color: var(--muted-fg); transition: color 0.15s, background-color 0.15s; } .main-nav a:hover { color: var(--fg); background: var(--ghost); } .main-nav a[aria-current="page"] { color: var(--fg); } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .header-actions .header-cta { display: none; } .header-actions .menu-toggle { width: 34px; height: 34px; padding: 0; } .menu-toggle svg { width: 17px; height: 17px; } .menu-toggle .icon-close { display: none; } .menu-toggle[aria-expanded="true"] .icon-close { display: block; } .menu-toggle[aria-expanded="true"] .icon-menu { display: none; } @media (min-width: 480px) { .header-actions .header-cta { display: inline-flex; } } @media (min-width: 1080px) { .main-nav { display: flex; } .header-actions .menu-toggle { display: none; } } .mobile-menu { border-top: 1px solid var(--border-soft); background: var(--bg); } .mobile-menu .container { padding-block: 16px 20px; } .mobile-menu nav ul { list-style: none; display: grid; gap: 2px; } .mobile-menu nav a { display: flex; justify-content: space-between; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--border-soft); font-size: 15px; } .mobile-menu nav a[aria-current="page"] { color: var(--fg); font-weight: 600; } @media (min-width: 1080px) { .mobile-menu { display: none !important; } } /* ---------- Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 11px; border: 1px solid transparent; border-radius: var(--radius); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, opacity 0.15s; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-btn); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn-secondary { background: var(--ghost); border-color: var(--input); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .btn-secondary:hover { background: var(--ghost-hover); } .btn-ghost { background: transparent; color: var(--muted-fg); } .btn-ghost:hover { background: var(--ghost); color: var(--fg); } .btn-lg { height: 40px; padding: 0 16px; font-size: 15px; } .btn-sm { height: 28px; padding: 0 9px; font-size: 13px; border-radius: 8px; } .btn-pill { border-radius: 999px; } .btn-block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .btn .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Typography helpers ---------- */ .eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-fg); } .display { max-width: 700px; font-family: var(--font-pixel); font-size: clamp(30px, 5.2vw, 48px); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; } .display .dim { color: var(--muted-fg); } .page-title { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; } .serif { font-family: var(--font-serif); font-weight: 400; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-soft); } .hero-bg { position: absolute; inset: 0; max-width: var(--container); margin-inline: auto; pointer-events: none; } .hero-bg canvas { width: 100%; height: 100%; } .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 50%, transparent 100%); } .hero > .container { position: relative; padding-block: 72px 76px; } @media (min-width: 640px) { .hero > .container { padding-block: 108px 112px; } } .hero--compact > .container { padding-block: 64px 56px; } @media (min-width: 640px) { .hero--compact > .container { padding-block: 88px 72px; } } .hero .eyebrow { margin-bottom: 20px; } .hero-lead { max-width: 672px; margin-top: 24px; color: var(--muted-fg); font-size: 16px; line-height: 1.6; text-wrap: pretty; } .hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Sections ---------- */ .section { border-bottom: 1px solid var(--border-soft); } .section--flush { border-bottom: 0; } .section-inner { padding-block: 36px; } .section-inner--lg { padding-block: 48px 64px; } @media (min-width: 640px) { .section-inner--lg { padding-block: 64px 80px; } } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .section-title { font-family: var(--font-serif); font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: -0.005em; } .section-title--lg { font-size: clamp(26px, 3.4vw, 32px); line-height: 1.15; } .section-desc { margin-top: 4px; color: var(--muted-fg); font-size: 14px; max-width: 620px; } .section-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--fg); } .section-link svg { width: 14px; height: 14px; } .section-link:hover { text-decoration: underline; text-underline-offset: 4px; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; color: var(--muted-fg); } .badge svg { width: 12px; height: 12px; } .badge-sponsored { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--card)); } .badge-pick { color: var(--fg); } /* ---------- Tool cards ---------- */ .grid-tools { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .grid-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .grid-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tool-card { display: flex; flex-direction: column; height: 100%; padding: 4px; border-radius: var(--radius-lg); background: var(--muted-a); transition: background-color 0.15s; } .tool-card:hover { background: color-mix(in srgb, var(--muted) 88%, var(--fg) 6%); } .tool-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 8px 12px; } .tool-card__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; line-height: 20px; } .tool-card__body { flex: 1; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: border-color 0.15s; } .tool-card:hover .tool-card__body { border-color: color-mix(in srgb, var(--fg) 22%, transparent); } .tool-card__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 16px; color: var(--muted-fg); } .tool-card__foot { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 12px; font-size: 12px; line-height: 16px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; } .tool-card__foot .pricing { text-transform: uppercase; letter-spacing: 0.025em; } .tool-card__foot .cat { overflow: hidden; text-overflow: ellipsis; } /* Monogram tile used instead of third-party logos */ .mono { --h: 220; flex-shrink: 0; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: radial-gradient(120% 120% at 0% 0%, hsl(var(--h) 65% 55% / 0.3), transparent 62%), var(--card); color: hsl(var(--h) 85% 80%); font-family: var(--font-pixel); font-size: 19px; line-height: 1; letter-spacing: -0.04em; } :root[data-theme="light"] .mono { background: radial-gradient(120% 120% at 0% 0%, hsl(var(--h) 75% 62% / 0.26), transparent 62%), var(--card); color: hsl(var(--h) 65% 30%); } .mono-lg { width: 64px; height: 64px; border-radius: 16px; font-size: 26px; } /* ---------- Frames (card wrapper with inner panel) ---------- */ .frame { padding: 4px; border-radius: var(--radius-lg); background: var(--muted-a); } .frame-head { padding: 10px 14px 10px; } .frame-title { font-size: 14px; font-weight: 600; } .frame-sub { margin-top: 2px; font-size: 13px; color: var(--muted-fg); } .frame-panel { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } @media (min-width: 640px) { .frame-panel--roomy { padding: 28px; } } .frame-panel + .frame-panel { margin-top: 4px; } .frame-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; font-size: 12.5px; color: var(--muted-fg); } .frame-foot a:hover { color: var(--fg); } /* ---------- Feature grid (home "How we curate") ---------- */ .features-grid { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--border); grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .feature { padding: 22px 20px 24px; background: var(--bg); } .feature-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--fg); } .feature-icon svg { width: 17px; height: 17px; } .feature h3 { margin-top: 16px; font-size: 15px; font-weight: 600; } .feature p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--muted-fg); } /* ---------- CTA banner ---------- */ .cta { position: relative; display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); } .cta-body { position: relative; z-index: 2; padding: 40px 24px 44px; } @media (min-width: 640px) { .cta-body { padding: 72px 48px; } } .cta .eyebrow { margin-bottom: 14px; } .cta-title { max-width: 520px; font-family: var(--font-serif); font-size: clamp(27px, 3.3vw, 34px); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; } .cta-title em { font-style: italic; color: var(--muted-fg); } .cta-text { max-width: 470px; margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--muted-fg); } .cta-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; } .cta-art { position: relative; min-height: 200px; order: -1; } .cta-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; image-rendering: pixelated; } .cta-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--card) 0%, transparent 55%); } @media (min-width: 900px) { .cta { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } .cta-art { order: 0; min-height: 100%; } .cta-art::after { background: linear-gradient(to right, var(--card) 0%, color-mix(in srgb, var(--card) 45%, transparent) 22%, transparent 55%); } } /* ---------- Footer ---------- */ .site-footer { position: relative; z-index: 1; overflow: hidden; border-top: 1px solid var(--border-soft); } .footer-main { display: grid; gap: 36px; padding-block: 48px 40px; } @media (min-width: 640px) { .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } } @media (min-width: 1024px) { .footer-main { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.75fr)); gap: 40px; } .footer-brand { grid-column: auto; } } .footer-brand p { max-width: 340px; margin-top: 16px; font-size: 14px; line-height: 1.55; letter-spacing: -0.01em; color: var(--muted-fg); } .footer-brand address { max-width: 340px; margin-top: 12px; font-size: 13px; font-style: normal; line-height: 1.6; color: var(--muted-fg); } .footer-col h2 { margin-bottom: 14px; font-size: 14px; font-weight: 600; } .footer-col ul { list-style: none; display: grid; gap: 9px; } .footer-col a { font-size: 14px; color: var(--muted-fg); transition: color 0.15s; } .footer-col a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 18px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--muted-fg); } .footer-bottom nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; } .footer-bottom a:hover { color: var(--fg); } .theme-toggle { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted-fg); } .theme-toggle:hover { color: var(--fg); background: var(--ghost); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } .footer-wordmark { position: relative; height: 104px; } @media (min-width: 768px) { .footer-wordmark { height: 144px; } } .footer-wordmark canvas { position: absolute; inset: 0; width: 100%; max-width: var(--container); height: 100%; margin-inline: auto; } .footer-wordmark::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, transparent 35%, var(--bg) 100%); } /* ---------- Forms ---------- */ .form-grid { display: grid; gap: 18px; } .form-row { display: grid; gap: 18px; } @media (min-width: 640px) { .form-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .field { display: grid; gap: 6px; align-content: start; } .label, .field > label, .field-meta > label { font-size: 13px; font-weight: 500; color: var(--fg); } .req { color: var(--muted-fg); font-weight: 400; } .input, .select, .textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--card); color: var(--fg); font-size: 14px; line-height: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: border-color 0.15s, box-shadow 0.15s; } .input, .select { height: 38px; } .textarea { min-height: 120px; resize: vertical; } .input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--muted-fg) 78%, transparent); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 28%, transparent); } .input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; } .select-sm { height: 32px; font-size: 13px; padding-block: 4px; } .field-hint { font-size: 12px; line-height: 1.45; color: var(--muted-fg); } .field-meta { display: flex; justify-content: space-between; gap: 12px; } .field-error { font-size: 12px; line-height: 1.45; color: var(--danger); } .field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); } .field.has-error .check input { border-color: var(--danger); } .counter { font-size: 12px; color: var(--muted-fg); font-variant-numeric: tabular-nums; } .counter.is-over { color: var(--danger); } .check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--fg-soft); cursor: pointer; } .check input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 16px; height: 16px; margin: 2px 0 0; display: grid; place-content: center; border: 1px solid var(--input); border-radius: 4px; background: var(--card); cursor: pointer; } .check input::after { content: ""; width: 9px; height: 9px; background: var(--primary-fg); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform 0.12s ease; } .check input:checked { background: var(--primary); border-color: var(--primary); } .check input:checked::after { transform: scale(1); } .check a { text-decoration: underline; text-underline-offset: 3px; } .hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .form-note { font-size: 12.5px; line-height: 1.5; color: var(--muted-fg); } .form-note a { text-decoration: underline; text-underline-offset: 3px; } .form-status:empty { display: none; } .form-status { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--danger) 8%, transparent); font-size: 13.5px; line-height: 1.5; color: var(--fg); } .form-success { text-align: center; padding: 28px 8px 20px; } .form-success .success-icon { width: 48px; height: 48px; margin: 0 auto 16px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--success) 45%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); } .form-success .success-icon svg { width: 22px; height: 22px; } .form-success h2 { font-family: var(--font-serif); font-size: 28px; font-weight: 400; } .form-success p { max-width: 440px; margin: 10px auto 0; color: var(--muted-fg); font-size: 14.5px; line-height: 1.6; } .form-success .form-actions { justify-content: center; margin-top: 22px; } /* ---------- Split layout (submit / contact) ---------- */ .split { display: grid; gap: 32px; padding-block: 48px 72px; } @media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; padding-block: 64px 96px; } .split-aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; } } .split-aside .eyebrow { margin-bottom: 10px; } .split-aside .page-title { font-size: clamp(28px, 3.4vw, 34px); } .split-aside > p { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--muted-fg); } .split-aside > p a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .aside-list { list-style: none; display: grid; gap: 12px; margin-top: 24px; } .aside-list li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.55; color: var(--muted-fg); } .aside-list li::before { content: ""; position: absolute; left: 3px; top: 0.55em; width: 7px; height: 7px; background: var(--fg); opacity: 0.55; } .aside-list strong { color: var(--fg); font-weight: 600; } .aside-box { margin-top: 24px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); font-size: 13.5px; line-height: 1.55; color: var(--muted-fg); } .aside-box a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .aside-box address { margin-top: 6px; font-style: normal; color: var(--fg); } /* ---------- Pixel bullet lists ---------- */ .list-pixel { list-style: none; display: grid; gap: 10px; } .list-pixel li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.6; color: var(--fg-soft); } .list-pixel li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 7px; height: 7px; background: var(--fg); opacity: 0.5; } .list-pixel--muted li { color: var(--muted-fg); font-size: 13.5px; } .list-pixel--warn li::before { background: var(--warn); opacity: 0.85; } /* ---------- Tool detail ---------- */ .tool-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-soft); } .tool-hero > .container { position: relative; padding-block: 36px 44px; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-fg); } .breadcrumb a:hover { color: var(--fg); } .breadcrumb [aria-current="page"] { color: var(--fg); } .tool-hero__row { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .tool-hero__id { display: flex; align-items: center; gap: 18px; min-width: 0; } .tool-hero h1 { font-family: var(--font-pixel); font-size: clamp(32px, 5vw, 50px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; } .tool-hero__dev { margin-top: 6px; font-size: 13.5px; color: var(--muted-fg); } .tool-hero__tagline { max-width: 660px; margin-top: 22px; font-size: 16.5px; line-height: 1.6; color: var(--muted-fg); } .tool-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .btn-visit { height: 38px; padding: 0 16px; border-radius: 999px; background: var(--fg); border-color: var(--fg); color: var(--bg); box-shadow: var(--shadow-btn); } .btn-visit:hover { opacity: 0.9; } .tool-layout { display: grid; gap: 20px; padding-block: 36px 24px; } @media (min-width: 1024px) { .tool-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding-block: 48px 32px; } } .tool-main { display: grid; gap: 20px; align-content: start; min-width: 0; } .tool-side { display: grid; gap: 20px; align-content: start; } @media (min-width: 1024px) { .tool-side { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } } .tool-about p { font-size: 15px; line-height: 1.75; color: var(--fg-soft); } .tool-about p + p { margin-top: 14px; } .tool-cols { display: grid; gap: 20px; } @media (min-width: 720px) { .tool-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .panel-title { margin-bottom: 14px; font-family: var(--font-serif); font-size: 22px; font-weight: 400; line-height: 1.2; } .kv { display: grid; } .kv-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; line-height: 1.45; } .kv-row:first-child { padding-top: 0; } .kv-row:last-child { padding-bottom: 0; border-bottom: 0; } .kv-row dt { flex-shrink: 0; color: var(--muted-fg); } .kv-row dd { text-align: right; overflow-wrap: anywhere; } .kv-row dd a { text-decoration: underline; text-underline-offset: 3px; } .tag-list { display: flex; flex-wrap: wrap; gap: 6px; } .tag { padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-fg); } .tool-actions { display: flex; flex-wrap: wrap; gap: 6px 16px; } .tool-actions a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted-fg); } .tool-actions a:hover { color: var(--fg); } .tool-actions svg { width: 13px; height: 13px; } .disclaimer-box { padding: 16px 18px; border: 1px dashed var(--border); border-radius: 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted-fg); } .disclaimer-box a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .tool-loading { padding-block: 120px; text-align: center; color: var(--muted-fg); } /* ---------- Legal / long-form documents ---------- */ .doc-hero { border-bottom: 1px solid var(--border-soft); } .doc-hero > .container { padding-block: 64px 44px; text-align: center; } @media (min-width: 640px) { .doc-hero > .container { padding-block: 88px 52px; } } .doc-hero .eyebrow { margin-bottom: 14px; } .doc-title { font-family: var(--font-serif); font-size: clamp(36px, 5.2vw, 52px); font-weight: 400; line-height: 1.04; letter-spacing: -0.015em; } .doc-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 18px; font-size: 13px; color: var(--muted-fg); } .doc-layout { display: grid; gap: 28px; padding-block: 40px 88px; } @media (min-width: 1024px) { .doc-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 64px; padding-block: 56px 112px; } } .doc-aside { min-width: 0; } @media (max-width: 1023px) { .doc-aside { order: -1; } } @media (min-width: 1024px) { .doc-aside { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto; scrollbar-width: thin; } } .toc { border: 1px solid var(--border); border-radius: 14px; background: var(--card); } .toc > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); } .toc > summary::-webkit-details-marker { display: none; } .toc > summary svg { width: 15px; height: 15px; transition: transform 0.15s; } .toc[open] > summary svg { transform: rotate(180deg); } .toc ol { list-style: none; padding: 0 14px 14px; } .toc a { display: block; padding: 5px 0 5px 12px; border-left: 1px solid var(--border); font-size: 13px; line-height: 1.4; color: var(--muted-fg); transition: color 0.12s, border-color 0.12s; } .toc a:hover { color: var(--fg); } .toc a.is-active { color: var(--fg); border-left-color: var(--fg); } @media (min-width: 1024px) { .toc { border: 0; background: transparent; } .toc > summary { padding: 0 0 12px; pointer-events: none; } .toc > summary svg { display: none; } .toc ol { padding: 0; } } .doc-related { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } .doc-related h2 { margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); } .doc-related ul { list-style: none; display: grid; gap: 6px; } .doc-related a { font-size: 13px; color: var(--muted-fg); } .doc-related a:hover { color: var(--fg); } .prose { max-width: 740px; font-size: 15.5px; line-height: 1.75; color: var(--fg-soft); } .prose > p { margin-bottom: 14px; } .prose .lead { font-size: 18px; line-height: 1.65; color: var(--fg); } .prose section { padding-top: 6px; } .prose section + section, .prose > p + section { margin-top: 36px; } .prose h2 { margin-bottom: 14px; font-family: var(--font-serif); font-size: 28px; font-weight: 400; line-height: 1.15; letter-spacing: -0.005em; color: var(--fg); scroll-margin-top: calc(var(--header-h) + 20px); } .prose h3 { margin: 24px 0 8px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--fg); } .prose p { margin: 0 0 14px; } .prose ul, .prose ol { margin: 0 0 16px; padding-left: 1.35em; } .prose li { margin: 6px 0; padding-left: 4px; } .prose li::marker { color: var(--muted-fg); } .prose a { color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent); text-underline-offset: 3px; } .prose a:hover { text-decoration-color: var(--fg); } .prose strong { color: var(--fg); font-weight: 600; } .prose .note { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); font-size: 14.5px; } .prose address { margin: 8px 0 16px; padding-left: 14px; border-left: 2px solid var(--border); font-style: normal; color: var(--fg); } .table-wrap { margin: 16px 0 20px; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; } .prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; } .prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .prose th { background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--fg); white-space: nowrap; } .prose tbody tr:last-child td { border-bottom: 0; } .prose code { padding: 1px 5px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); font-family: var(--font-mono); font-size: 0.86em; } /* ---------- Help center ---------- */ .help-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; } .help-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .help-card { display: flex; flex-direction: column; gap: 6px; min-height: 136px; padding: 16px 16px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); transition: border-color 0.15s, background-color 0.15s; } .help-card:hover { border-color: color-mix(in srgb, var(--fg) 26%, transparent); } .help-card h3 { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-serif); font-size: 19px; font-weight: 400; line-height: 1.2; } .help-card h3 svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 4px; color: var(--muted-fg); } .help-card p { font-size: 13px; line-height: 1.5; color: var(--muted-fg); } .help-card .updated { margin-top: auto; padding-top: 8px; font-size: 11.5px; color: var(--muted-fg); } .help-articles { display: grid; gap: 0; } .help-article { padding-block: 36px; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 16px); } .help-article .prose h2 { font-size: 30px; } .help-article .article-meta { margin-top: -6px; margin-bottom: 16px; font-size: 12px; color: var(--muted-fg); } /* ---------- About (letter) ---------- */ .letter-wrap { padding-block: 56px 88px; } .letter { position: relative; max-width: 840px; margin-inline: auto; padding: 40px 26px 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); box-shadow: var(--shadow-pop); transform: rotate(-0.35deg); } @media (min-width: 640px) { .letter { padding: 56px 64px 44px; } } .letter-date { text-align: right; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-fg); } .letter-body { margin-top: 20px; font-family: var(--font-serif); font-size: clamp(19px, 2.2vw, 22px); line-height: 1.55; color: var(--fg-soft); } .letter-body p + p { margin-top: 18px; } .hl { padding: 0 4px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 11%, transparent); color: var(--fg); } .letter-sign { margin-top: 36px; padding-top: 26px; border-top: 1px dashed var(--border); font-family: var(--font-serif); font-size: 20px; color: var(--fg-soft); } .signature { margin-top: 6px; font-family: var(--font-serif); font-size: 32px; font-style: italic; color: var(--fg); } .letter-sign .muted { margin-top: 6px; font-family: var(--font-sans); font-size: 13.5px; } .info-grid { display: grid; gap: 16px; } @media (min-width: 900px) { .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .info-card { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); } .info-card h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; line-height: 1.2; } .info-card p, .info-card address { margin-top: 8px; font-size: 14px; font-style: normal; line-height: 1.6; color: var(--muted-fg); } .info-card a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Marketing ---------- */ .services { display: grid; gap: 16px; } @media (min-width: 900px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .service { display: flex; flex-direction: column; } .service .frame-panel { flex: 1; display: flex; flex-direction: column; gap: 14px; } .service-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .service-num { font-family: var(--font-pixel); font-size: 13px; color: var(--muted-fg); } .service h3 { font-family: var(--font-serif); font-size: 27px; font-weight: 400; line-height: 1.12; } .service > .frame-panel > p { font-size: 14.5px; line-height: 1.65; color: var(--muted-fg); } .service .list-pixel { gap: 8px; } .service .list-pixel li { font-size: 14px; } .service-note { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted-fg); } .steps { display: grid; gap: 12px; } @media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .step { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); } .step-num { font-family: var(--font-pixel); font-size: 30px; line-height: 1; color: var(--muted-fg); } .step h3 { margin-top: 18px; font-size: 15px; font-weight: 600; } .step p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--muted-fg); } .principles { display: grid; gap: 12px; } @media (min-width: 900px) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .faq { border-top: 1px solid var(--border); } .faq details { border-bottom: 1px solid var(--border); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; list-style: none; cursor: pointer; font-size: 15.5px; font-weight: 500; } .faq summary::-webkit-details-marker { display: none; } .faq summary svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted-fg); transition: transform 0.15s; } .faq details[open] summary svg { transform: rotate(45deg); } .faq .faq-body { max-width: 760px; padding-bottom: 18px; font-size: 14.5px; line-height: 1.7; color: var(--muted-fg); } .faq .faq-body a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .two-col { display: grid; gap: 28px; } @media (min-width: 1024px) { .two-col { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 56px; } } /* ---------- Sitemap / 404 ---------- */ .sitemap-grid { display: grid; gap: 28px; padding-block: 44px 88px; } @media (min-width: 768px) { .sitemap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sitemap-grid h2 { margin-bottom: 12px; font-family: var(--font-serif); font-size: 24px; font-weight: 400; } .sitemap-grid ul { list-style: none; display: grid; gap: 8px; } .sitemap-grid a { font-size: 14.5px; color: var(--muted-fg); } .sitemap-grid a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; } .notfound .display { font-size: clamp(64px, 14vw, 140px); line-height: 0.95; } /* ---------- Cookie consent ---------- */ .cookie-banner { position: fixed; z-index: 120; left: 12px; right: 12px; bottom: 12px; max-width: 440px; box-shadow: var(--shadow-pop); animation: rise 0.25s ease-out; } @media (min-width: 640px) { .cookie-banner { left: 24px; right: auto; bottom: 24px; } } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .cookie-banner .frame-panel { padding: 18px; } .cookie-banner h2 { font-size: 15px; font-weight: 600; } .cookie-banner p { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--fg-soft); } .cookie-banner p a { text-decoration: underline; text-underline-offset: 3px; } .cookie-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .cookie-actions .btn-customize { grid-column: 1 / -1; } .cookie-dialog { width: min(540px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; background: transparent; color: var(--fg); } .cookie-dialog::backdrop { background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .cookie-dialog .frame-panel { padding: 20px; } .cookie-dialog h2 { font-family: var(--font-serif); font-size: 26px; font-weight: 400; } .cookie-dialog .intro { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--muted-fg); } .cookie-dialog .intro a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .pref-list { margin-top: 12px; } .pref { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border); } .pref:last-child { border-bottom: 0; } .pref h3 { font-size: 14px; font-weight: 600; } .pref p { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--muted-fg); } .pref .always { flex-shrink: 0; font-size: 12px; color: var(--muted-fg); padding-top: 2px; } .switch { position: relative; flex-shrink: 0; width: 38px; height: 22px; margin-top: 1px; } .switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .switch .track { position: absolute; inset: 0; border: 1px solid var(--input); border-radius: 999px; background: var(--muted); transition: background-color 0.15s, border-color 0.15s; } .switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg); transition: transform 0.15s; } .switch input:checked + .track { background: var(--fg); border-color: var(--fg); } .switch input:checked + .track::after { transform: translateX(16px); background: var(--bg); } .switch input:focus-visible + .track { outline: 2px solid var(--ring); outline-offset: 2px; } .switch input:disabled { cursor: not-allowed; } .switch input:disabled + .track { opacity: 0.6; } .dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; } .gpc-note { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; color: var(--muted-fg); } /* ---------- Utilities ---------- */ .mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .text-center { text-align: center; } .nowrap { white-space: nowrap; }