/* what-are-you-do-ing — static site (landing + legal) */
:root {
--green: #00ff7f;
--green-dark: #22c55e;
--green-dim: rgba(0, 255, 127, 0.4);
--black: #000000;
--surface: #0a0a0a;
--card: #111111;
--card-hover: #1a1a1a;
--border: #242424;
--muted: #444444;
--subtle: #777777;
--foreground: #f0f0f0;
--font-ui: "Zen Maru Gothic", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--max-width: 1100px;
--legal-max: 720px;
}
/* Light theme — white + yellow counterpart to the black + green default.
Toggled by js/i18n.js, which sets data-theme="light" on . */
:root[data-theme="light"] {
--green: #ca8a04;
--green-dark: #a16207;
--green-dim: rgba(234, 179, 8, 0.30);
--black: #ffffff;
--surface: #f7f7f5;
--card: #ffffff;
--card-hover: #f0f0ee;
--border: #e3e1da;
--muted: #a8a8a2;
--subtle: #6b6b66;
--foreground: #1a1a17;
}
:root[data-theme="light"] .site-header {
background: rgba(255, 255, 255, 0.85);
}
:root[data-theme="light"] .legal p,
:root[data-theme="light"] .legal li {
color: #33312a;
}
/* Cards use a hard-coded dark gradient (#161616) that turns text unreadable on
a light background — fall back to the themed surface in light mode. */
:root[data-theme="light"] .card {
background: var(--card);
}
:root[data-theme="light"] .card__icon {
background: var(--green-dim);
}
:root[data-theme="light"] .card h3 {
color: var(--foreground);
}
:root[data-theme="light"] .card:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(202, 138, 4, 0.2);
}
/* Theme toggle button (injected into the nav by i18n.js). */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-left: 0.25rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--card);
color: var(--green);
font-size: 15px;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease;
}
.theme-toggle:hover {
background: var(--card-hover);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.6;
color: var(--foreground);
background: var(--black);
-webkit-font-smoothing: antialiased;
}
a {
color: var(--green);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img,
svg {
max-width: 100%;
height: auto;
}
/* ── Layout ─────────────────────────────────────────────────── */
.container {
width: min(100% - 2rem, var(--max-width));
margin-inline: auto;
}
.container--narrow {
width: min(100% - 2rem, var(--legal-max));
margin-inline: auto;
}
/* ── Header ─────────────────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 0;
}
.brand {
display: flex;
align-items: center;
gap: 0.65rem;
color: var(--green);
font-family: var(--font-mono);
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
}
.brand:hover {
text-decoration: none;
opacity: 0.9;
}
.brand__logo {
width: 36px;
height: 36px;
flex-shrink: 0;
}
.nav {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.nav a {
color: var(--subtle);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
}
.nav a:hover {
color: var(--green);
text-decoration: none;
}
.nav__cta {
padding: 0.45rem 0.9rem;
background: var(--green);
color: var(--black) !important;
border-radius: 6px;
font-weight: 700;
}
.nav__cta:hover {
background: var(--green-dark);
text-decoration: none;
}
/* Language switcher */
/* ── Language switcher (accordion) ──────────────────────────── */
.lang-switcher {
position: relative;
}
.lang-switcher__toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.55rem;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 700;
color: var(--subtle);
background: var(--card);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
transition: border-color 0.18s, color 0.18s;
}
.lang-switcher__toggle:hover {
color: var(--foreground);
border-color: var(--green-dim);
}
.lang-switcher__toggle[aria-expanded="true"] {
color: var(--green);
border-color: var(--green);
}
.lang-switcher__chevron {
transition: transform 0.2s ease;
}
.lang-switcher__toggle[aria-expanded="true"] .lang-switcher__chevron {
transform: rotate(180deg);
}
.lang-switcher__panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 132px;
display: flex;
flex-direction: column;
padding: 0.25rem;
background: var(--card);
border: 1px solid var(--green);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(0, 255, 127, 0.06);
opacity: 0;
transform: translateY(-6px) scale(0.98);
transform-origin: top right;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 40;
}
.lang-switcher.is-open .lang-switcher__panel {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.lang-switcher__panel button {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.45rem 0.6rem;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
color: var(--foreground);
background: transparent;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: left;
transition: background 0.15s, color 0.15s;
}
.lang-switcher__panel button:hover {
background: rgba(0, 255, 127, 0.08);
color: var(--green);
}
.lang-switcher__panel button.is-active {
color: var(--green);
font-weight: 700;
}
.lang-switcher__panel button.is-active::after {
content: "✓";
margin-left: 0.5rem;
color: var(--green);
}
/* ── Hero ───────────────────────────────────────────────────── */
.hero {
position: relative;
padding: 5rem 0 4rem;
overflow: hidden;
}
.hero__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 255, 127, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 127, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: linear-gradient(to bottom, black 40%, transparent);
pointer-events: none;
}
.hero__content {
position: relative;
}
.hero__badge {
display: inline-block;
margin-bottom: 1.25rem;
padding: 0.35rem 0.75rem;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--green);
background: rgba(0, 255, 127, 0.08);
border: 1px solid rgba(0, 255, 127, 0.25);
border-radius: 4px;
}
.hero h1 {
margin: 0 0 1rem;
font-family: var(--font-mono);
font-size: clamp(1.75rem, 5vw, 2.75rem);
font-weight: 700;
line-height: 1.2;
background: linear-gradient(135deg, var(--green), var(--green-dark));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero__tagline {
margin: 0 0 0.5rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--foreground);
}
.hero__desc {
margin: 0 0 2rem;
max-width: 36rem;
color: var(--subtle);
font-size: 1.05rem;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.75rem 1.35rem;
font-family: var(--font-ui);
font-size: 0.9rem;
font-weight: 700;
border-radius: 8px;
border: none;
cursor: pointer;
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
}
.btn--primary {
background: var(--green);
color: var(--black);
}
.btn--primary:hover {
background: var(--green-dark);
text-decoration: none;
}
.btn--outline {
background: transparent;
color: var(--foreground);
border: 1px solid var(--border);
}
.btn--outline:hover {
border-color: var(--green);
color: var(--green);
text-decoration: none;
}
/* ── Sections ─────────────────────────────────────────────────── */
.section {
padding: 4rem 0;
}
.section--surface {
background: var(--surface);
border-block: 1px solid var(--border);
}
.section__label {
margin: 0 0 0.5rem;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--green);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.section h2 {
margin: 0 0 2rem;
font-size: 1.65rem;
font-weight: 700;
}
/* ── Cards grid ───────────────────────────────────────────────── */
.grid {
display: grid;
gap: 1.25rem;
}
.grid--2 {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid--3 {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card {
padding: 1.35rem;
background: linear-gradient(145deg, #161616, var(--card));
border: 1px solid var(--border);
border-radius: 12px;
transition: border-color 0.15s;
}
.card:hover {
border-color: rgba(0, 255, 127, 0.35);
}
.card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
margin-bottom: 0.85rem;
font-family: var(--font-mono);
font-size: 1rem;
color: var(--green);
background: rgba(0, 255, 127, 0.1);
border-radius: 8px;
}
.card h3 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
}
.card p {
margin: 0;
font-size: 0.9rem;
color: var(--subtle);
}
/* ── Compare (SNS vs us) ──────────────────────────────────────── */
.compare {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.compare__col {
padding: 1.5rem;
border-radius: 12px;
border: 1px solid var(--border);
}
.compare__col--old {
background: var(--card);
}
.compare__col--new {
background: linear-gradient(145deg, rgba(0, 255, 127, 0.06), var(--card));
border-color: rgba(0, 255, 127, 0.35);
box-shadow: 0 0 40px rgba(0, 255, 127, 0.06);
}
.compare h3 {
margin: 0 0 1rem;
font-size: 1rem;
}
.compare ul {
margin: 0;
padding-left: 1.2rem;
color: var(--subtle);
font-size: 0.9rem;
}
.compare li + li {
margin-top: 0.45rem;
}
/* ── Pricing ──────────────────────────────────────────────────── */
.pricing {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pricing__plan {
padding: 1.75rem;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--card);
}
.pricing__plan--pro {
border-color: var(--green);
box-shadow: 0 0 30px rgba(0, 255, 127, 0.1);
}
.pricing__name {
margin: 0 0 0.25rem;
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--green);
}
.pricing h3 {
margin: 0 0 0.5rem;
font-size: 1.35rem;
}
.pricing__price {
margin: 0 0 1.25rem;
font-size: 1.75rem;
font-weight: 700;
}
.pricing__price span {
font-size: 0.85rem;
font-weight: 400;
color: var(--subtle);
}
.pricing ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9rem;
color: var(--subtle);
}
.pricing li {
padding: 0.4rem 0;
border-top: 1px solid var(--border);
}
.pricing li::before {
content: "› ";
color: var(--green);
font-family: var(--font-mono);
}
/* ── Git terminology table ────────────────────────────────────── */
.table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 10px;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
th,
td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
th {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--green);
background: var(--card);
}
td code {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--green);
}
tr:last-child td {
border-bottom: none;
}
/* ── Legal pages ──────────────────────────────────────────────── */
.legal {
padding: 3rem 0 4rem;
}
.legal h1 {
margin: 0 0 0.35rem;
font-family: var(--font-mono);
font-size: 1.65rem;
color: var(--green);
}
.legal__meta {
margin: 0 0 2.5rem;
font-size: 0.85rem;
color: var(--muted);
}
.legal h2 {
margin: 2rem 0 0.75rem;
font-size: 1.15rem;
}
.legal h3 {
margin: 1.25rem 0 0.5rem;
font-size: 1rem;
}
.legal p,
.legal li {
color: #ccc;
font-size: 0.95rem;
}
.legal ul,
.legal ol {
padding-left: 1.35rem;
}
.legal li + li {
margin-top: 0.35rem;
}
.legal .notice {
margin: 1.5rem 0;
padding: 1rem 1.15rem;
font-size: 0.875rem;
color: var(--subtle);
background: var(--card);
border-left: 3px solid var(--green);
border-radius: 0 8px 8px 0;
}
/* ── Imprint / Contact + Support pages ────────────────────────── */
/* Green accent bar on section headings for these two pages. */
body[data-page="imprint"] .legal h2,
body[data-page="support"] .legal h2 {
position: relative;
padding-left: 0.85rem;
font-family: var(--font-mono);
font-size: 1.05rem;
letter-spacing: 0.01em;
}
body[data-page="imprint"] .legal h2::before,
body[data-page="support"] .legal h2::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
bottom: 0.15em;
width: 3px;
border-radius: 2px;
background: linear-gradient(var(--green), var(--green-dark));
}
/* Imprint: lift each "heading + block" into a card. :has() lets us do this
without touching the markup. */
body[data-page="imprint"] .legal h2 + p {
margin: 0.5rem 0 1.25rem;
padding: 0.9rem 1.1rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--foreground);
}
/* Email + Google Maps links render as inline chips. */
body[data-page="imprint"] a[data-config-href="email"],
body[data-page="imprint"] a[data-config-href="maps"],
body[data-page="support"] a[data-config-href="email"] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.7rem;
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--green);
background: rgba(0, 255, 127, 0.08);
border: 1px solid var(--green-dim);
border-radius: 999px;
transition: background 0.15s ease, transform 0.15s ease;
}
body[data-page="imprint"] a[data-config-href="email"]:hover,
body[data-page="imprint"] a[data-config-href="maps"]:hover,
body[data-page="support"] a[data-config-href="email"]:hover {
text-decoration: none;
background: rgba(0, 255, 127, 0.16);
transform: translateY(-1px);
}
/* Support: turn each "Q
answer" paragraph into a FAQ card. */
body[data-page="support"] .legal p:has(strong) {
margin: 0.85rem 0;
padding: 1.1rem 1.25rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
transition: border-color 0.15s ease, background 0.15s ease;
}
body[data-page="support"] .legal p:has(strong):hover {
border-color: var(--green-dim);
background: var(--card-hover);
}
body[data-page="support"] .legal p strong {
display: block;
margin-bottom: 0.4rem;
color: var(--green);
font-size: 1rem;
}
body[data-page="support"] .legal p:has(strong) br {
display: none;
}
/* ── Footer ───────────────────────────────────────────────────── */
.site-footer {
margin-top: 2rem;
padding: 2.5rem 0;
border-top: 1px solid var(--border);
background: var(--surface);
}
.site-footer__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.site-footer__links {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
}
.site-footer__links a {
font-size: 0.875rem;
color: var(--subtle);
}
.site-footer__links a:hover {
color: var(--green);
}
.site-footer__copy {
margin: 0;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--muted);
}
/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
.nav__text-hide {
display: none;
}
.hero {
padding-top: 3.5rem;
}
.site-header__inner {
flex-wrap: wrap;
}
}
/* ════════════════════════════════════════════════════════════════
Enhancements — polish layer (cards, pricing, motion)
════════════════════════════════════════════════════════════════ */
/* Cards: lift + green glow on hover, animated icon */
.card {
position: relative;
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
border-color: var(--green);
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 255, 127, 0.15);
}
.card__icon {
transition: transform 0.25s ease, background 0.25s ease;
}
.card:hover .card__icon {
transform: scale(1.12) rotate(-4deg);
background: rgba(0, 255, 127, 0.18);
}
/* Section labels: terminal-style accent */
.section__label {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.section__label::before {
content: "";
width: 18px;
height: 1px;
background: var(--green);
}
/* Pricing: featured Pro plan with badge + gradient sheen */
.pricing__plan {
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pricing__plan:hover {
transform: translateY(-3px);
}
.pricing__plan--pro {
position: relative;
background: linear-gradient(160deg, rgba(0, 255, 127, 0.06), var(--card) 60%);
box-shadow: 0 0 40px rgba(0, 255, 127, 0.12);
overflow: hidden;
}
.pricing__plan--pro::before {
content: "★ POPULAR";
position: absolute;
top: 0.9rem;
right: -2.4rem;
transform: rotate(38deg);
padding: 0.2rem 2.6rem;
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--black);
background: var(--green);
}
.pricing__plan--pro .pricing__price span:first-child {
font-size: 1.75rem;
font-weight: 700;
color: var(--foreground);
}
/* Primary button: subtle pulse glow */
.btn--primary {
transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 255, 127, 0.35);
}
/* Comparison columns accent */
.compare__col--new {
border-color: rgba(0, 255, 127, 0.4) !important;
box-shadow: 0 0 24px rgba(0, 255, 127, 0.06);
}
/* Reveal-on-scroll (progressively enhanced; no-JS shows everything) */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.card:hover, .pricing__plan:hover, .btn--primary:hover { transform: none; }
html { scroll-behavior: auto; }
}