/* File Convert — theme layer. Loads after form.css/pages.css and re-points the existing custom properties at a semantic scale, so every page written against --ink/--body/--surface picks up dark mode without being touched. Two things own the theme: - javascripts/theme-boot.js stamps data-theme on before first paint - prefers-color-scheme is the fallback when nothing has been chosen Everything here is generic UI: a neutral ramp, a red primary that already matched the brand, and the motion used by the hero. */ :root { /* Neutral ramp. Warm-neutral rather than blue-grey so the dark hero reads as ink rather than navy. */ --n-50: #fafafa; --n-100: #f5f5f5; --n-200: #e5e5e5; --n-300: #d4d4d4; --n-400: #a3a3a3; --n-500: #737373; --n-600: #525252; --n-700: #404040; --n-800: #262626; --n-900: #171717; --n-950: #0a0a0a; /* Primary. Unchanged from the original brand red — it already sat where a conversion-service accent wants to be. */ --primary: #e5322d; --primary-100: #ffe4e3; --primary-200: #ffc9c7; --primary-300: #ff9d99; --primary-400: #f76a65; --primary-500: #e5322d; --primary-600: #c9261f; --primary-700: #ab1f19; /* Semantic surfaces + text, light theme. */ --t-surface: #ffffff; --t-elevated: #f5f5f5; --t-accented: #ededed; --t-border: #e5e9ef; --t-border-strong: #ccd4de; --t-highlighted: #171717; --t-default: #404040; --t-muted: #737373; /* #a3a3a3 was 2.52:1 on white — used as text at ~33 sites, mostly 10-12px, where the large-text exemption does not apply. */ --t-dimmed: #6e6e6e; --hero-from: var(--n-900); --hero-via: var(--n-800); --hero-to: var(--n-950); --hero-glow: rgba(190, 60, 55, 0.30); --hero-ink: #ffffff; --hero-body: var(--n-300); --hero-faint: var(--n-400); --ring-soft: rgba(255, 255, 255, 0.05); --ring-soft-2: rgba(255, 255, 255, 0.07); --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lift-hover: 0 12px 30px rgba(0, 0, 0, 0.45); --shadow-xl: 0 20px 45px rgba(10, 10, 10, 0.12); --radius-xl: 16px; --radius-2xl: 24px; } /* Re-point the original variables. Written once here so no page needs editing. */ :root { --brand: var(--primary-500); --brand-dark: var(--primary-600); --brand-darker: var(--primary-700); --brand-tint: rgba(229, 50, 45, 0.07); --brand-ring: rgba(229, 50, 45, 0.28); --ink: var(--t-highlighted); --ink-strong: var(--t-highlighted); --body: var(--t-default); --muted: var(--t-muted); --faint: var(--t-dimmed); --border: var(--t-border); --border-strong: var(--t-border-strong); --surface: var(--t-surface); --surface-alt: var(--t-elevated); --surface-tint: var(--n-50); } /* ------------------------------------------------------------------ * * Dark theme * ------------------------------------------------------------------ */ :root[data-theme="dark"] { --t-surface: #171717; --t-elevated: #262626; --t-accented: #2f2f2f; --t-border: #2e2e2e; --t-border-strong: #3d3d3d; --t-highlighted: #fafafa; --t-default: #d4d4d4; --t-muted: #a3a3a3; --t-dimmed: #949494; --brand-tint: rgba(229, 50, 45, 0.14); --brand-ring: rgba(229, 50, 45, 0.42); --surface-tint: #1c1c1c; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 2px 10px rgba(0, 0, 0, 0.45); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-menu: 0 8px 28px rgba(0, 0, 0, 0.6); --shadow-xl: 0 20px 45px rgba(0, 0, 0, 0.5); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-surface: #171717; --t-elevated: #262626; --t-accented: #2f2f2f; --t-border: #2e2e2e; --t-border-strong: #3d3d3d; --t-highlighted: #fafafa; --t-default: #d4d4d4; --t-muted: #a3a3a3; --t-dimmed: #949494; --brand-tint: rgba(229, 50, 45, 0.14); --brand-ring: rgba(229, 50, 45, 0.42); --surface-tint: #1c1c1c; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 2px 10px rgba(0, 0, 0, 0.45); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-menu: 0 8px 28px rgba(0, 0, 0, 0.6); --shadow-xl: 0 20px 45px rgba(0, 0, 0, 0.5); } } body { background: var(--t-surface); color: var(--t-default); } /* ------------------------------------------------------------------ * * Theme toggle button * ------------------------------------------------------------------ */ .themetoggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: inherit; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .themetoggle:hover { background: rgba(255, 255, 255, 0.10); } .site-header--dark .themetoggle { color: var(--n-200); } .themetoggle__sun { display: none; } .themetoggle__moon { display: inline-block; } :root[data-theme="dark"] .themetoggle__sun { display: inline-block; } :root[data-theme="dark"] .themetoggle__moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .themetoggle__sun { display: inline-block; } :root:not([data-theme="light"]) .themetoggle__moon { display: none; } } /* ------------------------------------------------------------------ * * Dark sticky header * ------------------------------------------------------------------ */ .site-header--dark { background: linear-gradient(45deg, rgba(38, 38, 38, 0.92), rgba(23, 23, 23, 0.92)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .site-header--dark .brand, .site-header--dark .nav-links > li > a, .site-header--dark .mega-toggle, .site-header--dark .nav-links__link, .site-header--dark .nav-auth__login, .site-header--dark .nav-toggle { color: #ffffff; } .site-header--dark .nav-links > li > a:hover, .site-header--dark .mega-toggle:hover, .site-header--dark .nav-auth__login:hover { color: #ffffff; background: rgba(255, 255, 255, 0.10); } /* ------------------------------------------------------------------ * * Hero * ------------------------------------------------------------------ */ .vhero { position: relative; isolation: isolate; overflow: hidden; padding: 88px 0 168px; background: linear-gradient(135deg, var(--hero-from), var(--hero-via) 50%, var(--hero-to)); } /* Off-centre warm glow behind the format cards. */ .vhero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 70% 50% at 70% -10%, var(--hero-glow), transparent); } /* Faint engineering grid. */ .vhero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M60 0H0v60' fill='none' stroke='%23fff' stroke-width='.5'/%3E%3C/svg%3E"); } .vhero__inner { display: grid; gap: 40px; align-items: center; width: min(100% - 48px, 1240px); margin: 0 auto; } @media (min-width: 1024px) { .vhero__inner { grid-template-columns: 1.1fr 1fr; gap: 64px; } } .vhero__copy { text-align: center; } @media (min-width: 1024px) { .vhero__copy { text-align: left; } } .vhero__title { margin: 0; font-size: clamp(30px, 5vw, 50px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--hero-ink); } .vhero__lede { margin-top: 20px; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; color: var(--hero-body); } .vhero__meta { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 13px; color: var(--hero-faint); } @media (min-width: 1024px) { .vhero__meta { justify-content: flex-start; } } .vhero__meta i { color: var(--primary-400); } /* ------------------------------------------------------------------ * * Format card trio: FROM -> operation -> TO * ------------------------------------------------------------------ */ .fxtrio { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; } /* Orbiting rings sit behind the cards. */ .fxtrio__orbit { position: absolute; border-radius: 50%; pointer-events: none; } .fxtrio__orbit--slow { width: 300px; height: 300px; border: 1px solid var(--ring-soft); animation: fx-orbit 26s linear infinite; } .fxtrio__orbit--fast { width: 214px; height: 214px; border: 1px solid var(--ring-soft-2); animation: fx-orbit 16s linear infinite reverse; } .fxtrio__glow { position: absolute; width: 160px; height: 160px; border-radius: 50%; background: rgba(229, 50, 45, 0.15); filter: blur(48px); pointer-events: none; } .fxtrio__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; } @media (min-width: 640px) { .fxtrio__row { gap: 16px; } } /* The format cards themselves. */ .fxcard { position: relative; display: flex; align-items: center; justify-content: center; width: 96px; height: 108px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 14px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-lift); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--n-200); cursor: pointer; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } @media (min-width: 640px) { .fxcard { width: 112px; height: 120px; } } .fxcard:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.20); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-lift-hover); } .fxcard__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 0 8px; } .fxcard__icon { font-size: 28px; transition: transform 0.3s ease; } .fxcard:hover .fxcard__icon { transform: scale(1.1); } .fxcard__label { max-width: 100%; overflow: hidden; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-overflow: ellipsis; white-space: nowrap; color: var(--n-100); } .fxcard__caret { position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: var(--n-500); transition: color 0.2s ease; } .fxcard:hover .fxcard__caret { color: var(--n-300); } /* The output card wears the accent. */ .fxcard--out { border-color: rgba(229, 50, 45, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 32px rgba(190, 50, 50, 0.18); } /* * The pulse is a second, stronger glow faded in and out behind the card. * * Animating the card's own box-shadow would be simpler to write, but shadows * cannot be composited — the browser repaints the element on every frame, for * an animation that never stops, on the hero of ~950 pages. Cross-fading a * pseudo-element's opacity is GPU-composited and costs nothing per frame. */ .fxcard--out::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 8px 38px rgba(220, 80, 80, 0.30); opacity: 0; pointer-events: none; animation: fx-out-pulse 4s ease-in-out infinite; } .fxcard--out:hover { border-color: rgba(229, 50, 45, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 38px rgba(220, 80, 80, 0.32); } .fxcard--out .fxcard__icon { color: var(--primary-200); } .fxcard--out .fxcard__label { color: var(--primary-100); } .fxcard--out .fxcard__caret { color: rgba(255, 157, 153, 0.6); } /* Connector: line, operation dial, line. */ .fxlink { display: flex; flex-direction: column; align-items: center; gap: 8px; } .fxlink__row { display: flex; align-items: center; } .fxlink__wire { position: relative; width: 20px; height: 1px; overflow: hidden; background: linear-gradient(to right, var(--n-700), rgba(229, 50, 45, 0.7)); } .fxlink__wire--out { background: linear-gradient(to right, rgba(229, 50, 45, 0.7), var(--n-700)); } @media (min-width: 640px) { .fxlink__wire { width: 28px; } } .fxlink__wire::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, transparent, var(--primary-300), transparent); animation: fx-sweep 2.4s ease-in-out infinite; } .fxlink__op { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 4px; border: 1px solid rgba(229, 50, 45, 0.4); border-radius: 50%; background: rgba(229, 50, 45, 0.15); color: var(--primary-300); font-size: 14px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .fxlink__op i { animation: fx-spin 5s linear infinite; } .fxlink__caption { font-size: 10px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--n-400); } /* ------------------------------------------------------------------ * * Dropzone card, lifted over the hero's bottom edge * ------------------------------------------------------------------ */ .liftcard { position: relative; z-index: 10; width: min(100% - 32px, 680px); margin: -120px auto 40px; padding: 34px 24px; border: 1px solid var(--t-border); border-radius: var(--radius-2xl); background: var(--t-surface); box-shadow: var(--shadow-xl); text-align: center; transition: border-color 0.3s ease, box-shadow 0.3s ease; } @media (min-width: 640px) { .liftcard { padding: 40px; } } .liftcard:hover { border-color: var(--t-border-strong); } /* ------------------------------------------------------------------ * * Section band shared by the catalog / security / API rows * ------------------------------------------------------------------ */ .band { width: min(100% - 48px, 1240px); margin: 0 auto; } .band__grid { display: grid; gap: 40px 80px; } @media (min-width: 1024px) { .band__grid { grid-template-columns: 2fr 1fr; } } .band__title { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--t-highlighted); } .band__title i { font-size: 14px; color: var(--primary-500); } .band__lede { max-width: 36rem; margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--t-muted); } .band__rule { width: min(100% - 48px, 760px); height: 1px; margin: 48px auto; background: linear-gradient(to right, transparent, var(--t-border), transparent); border: 0; } /* Feature list with tinted icon chips. */ .banlist { margin-top: 20px; display: grid; gap: 12px; } .banlist li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--t-muted); } .banlist__chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; border-radius: var(--radius); background: rgba(229, 50, 45, 0.10); color: var(--primary-500); font-size: 12px; } .banlist strong { font-weight: 500; color: var(--t-highlighted); } /* ------------------------------------------------------------------ * * Terminal-chrome code card * ------------------------------------------------------------------ */ .termcard { margin-top: 20px; overflow: hidden; border: 1px solid var(--t-border); border-radius: 12px; background: var(--surface-tint); box-shadow: var(--shadow-sm); } .termcard__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--t-border); background: var(--t-elevated); } .termcard__dots { display: flex; align-items: center; gap: 6px; } .termcard__dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--t-accented); box-shadow: inset 0 0 0 1px var(--t-border); } .termcard__name, .termcard__type { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--t-dimmed); } .termcard__name { margin-left: 8px; text-transform: uppercase; } .termcard pre { margin: 0; padding: 16px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.7; color: var(--t-muted); } /* ------------------------------------------------------------------ * * Category chips + extension chips (format catalog) * ------------------------------------------------------------------ */ .catchips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 12px; } .catchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; font-size: 12px; color: var(--t-muted); cursor: pointer; transition: color 0.15s ease; } .catchip i { font-size: 11px; color: var(--t-dimmed); transition: color 0.15s ease; } .catchip__name { font-weight: 500; } .catchip__count { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; color: var(--t-dimmed); } .catchip:hover { color: var(--t-highlighted); } .catchip:hover i { color: var(--t-muted); } /* Active state. `aria-selected` is only valid on tab/option/row-ish elements, so a chip rendered as a link marks itself with `aria-current` instead — both are styled here so a page can use whichever suits its markup. */ .catchip[aria-selected="true"], .catchip[aria-current="true"], .catchip[aria-current="page"] { color: var(--primary-600); } .catchip[aria-selected="true"] i, .catchip[aria-current="true"] i, .catchip[aria-current="page"] i { color: var(--primary-500); } :root[data-theme="dark"] .catchip[aria-selected="true"], :root[data-theme="dark"] .catchip[aria-current="true"], :root[data-theme="dark"] .catchip[aria-current="page"] { color: var(--primary-300); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .catchip[aria-selected="true"], :root:not([data-theme="light"]) .catchip[aria-current="true"], :root:not([data-theme="light"]) .catchip[aria-current="page"] { color: var(--primary-300); } } .extgrid { display: flex; flex-wrap: wrap; gap: 6px; } .extchip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--t-elevated); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--t-highlighted); transition: color 0.15s ease, background-color 0.15s ease; } .extchip:hover { background: var(--brand-tint); color: var(--primary-600); } :root[data-theme="dark"] .extchip:hover { color: var(--primary-300); } /* FROM -> TO pair links. */ .pairlink { display: block; color: var(--t-muted); transition: color 0.15s ease; } .pairlink + .pairlink { margin-top: 10px; } .pairlink__row { display: flex; align-items: center; gap: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--t-highlighted); } .pairlink__row i { font-size: 11px; color: var(--t-dimmed); } .pairlink__note { margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--t-muted); } .pairlink:hover { color: var(--primary-500); } .pairlink:hover .pairlink__row { color: var(--primary-600); } :root[data-theme="dark"] .pairlink:hover .pairlink__row { color: var(--primary-300); } /* Small caps label used above chip groups. */ .minilabel { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-dimmed); } /* ------------------------------------------------------------------ * * Motion * ------------------------------------------------------------------ */ @keyframes fx-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fx-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes fx-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fx-out-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { /* The pulse moved to .fxcard--out::after; its declared opacity is 0, so stopping the animation leaves the glow hidden rather than frozen at half-brightness. */ .fxtrio__orbit, .fxlink__wire::after, .fxlink__op i, .fxcard--out::after { animation: none !important; } .fxcard, .fxcard__icon, .liftcard { transition: none !important; } } /* Media-query twins for the two hover overrides declared above with only the [data-theme] half. See the note in pages.css. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .extchip:hover, :root:not([data-theme="light"]) .pairlink:hover .pairlink__row { color: var(--primary-300); } }