/* Valatika — temporary landing page Design tokens lifted verbatim from the Claude Design source. */ :root { --bg: #00281A; --panel: #00311Ccc; --panel-solid: #00381F; --deep: #0B5844; --line: #ffffff1f; --line-soft: #ffffff12; --line-strong: #ffffff2e; --wash: #ffffff08; --white: #ffffff; --text: #E4F2EB; --text-bright: #F1FBF6; --copy: #C9E2D6; --muted: #B9D6C9; --muted-2: #9DBBAF; --muted-3: #7FAF9C; --footer-fg: #6E9C8A; --accent: #12A594; --accent-hover: #16BBA8; --mint: #6FD3AC; --mint-light: #A8ECD0; --green: #187E5F; --amber: #F2C14E; --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --radius: 16px; --radius-sm: 10px; --radius-md: 12px; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); } body { min-height: 100vh; background: radial-gradient(120% 80% at 78% -10%, var(--deep) 0%, rgba(11, 88, 68, 0) 60%), var(--bg); background-attachment: fixed; font-family: var(--sans); color: var(--text); padding: 0 24px 64px; -webkit-font-smoothing: antialiased; } a { color: var(--mint); text-decoration: none; } a:hover { color: var(--mint-light); } ::selection { background: var(--green); color: var(--text-bright); } .shell { max-width: 1060px; margin: 0 auto; } /* One language visible at a time. Set on before paint, so no flash. */ html[data-lang="en"] .i18n-nl, html[data-lang="nl"] .i18n-en { display: none; } /* Skip link — keyboard users land on the content, not the language toggle. */ .skip { position: absolute; left: -9999px; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--accent); color: var(--bg); font-weight: 700; } .skip:focus { left: 24px; top: 24px; z-index: 10; color: var(--bg); } :where(a, button, input, summary):focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; } /* ---------- header ---------- */ .masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 0 8px; } .wordmark { display: flex; align-items: baseline; gap: 10px; } .wordmark b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--white); } .wordmark span { font-family: var(--mono); font-size: 11px; color: var(--muted-3); } .langswitch { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-solid); } .langswitch button { border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: transparent; color: var(--muted-2); transition: background 120ms ease, color 120ms ease; } .langswitch button[aria-pressed="true"] { background: var(--accent); color: var(--bg); } /* ---------- hero ---------- */ .hero { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: center; padding: 48px 0 8px; } .hero h1 { margin: 0 0 18px; font-size: clamp(34px, 6vw, 58px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; color: var(--white); text-wrap: balance; } .hero .lede { margin: 0 0 14px; font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 46ch; text-wrap: pretty; } .hero .sub { margin: 0; font-size: 17px; line-height: 1.5; color: var(--muted-3); max-width: 46ch; } .hero .sub em { color: var(--mint); font-style: normal; font-weight: 600; } .pill-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #F2C14E1a; border: 1px solid #F2C14E4d; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--amber); margin-bottom: 22px; white-space: nowrap; } .portrait { margin: 0; } .portrait > div { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-solid); padding: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); animation: sway 6s ease-in-out infinite; } /* height:auto is load-bearing — the img height attribute is a presentational hint, and without this it wins and stretches the giraffe. */ .portrait img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); } @keyframes sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } } /* ---------- panels ---------- */ .panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .panel-pad { padding: 24px; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line-soft); } .panel-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; font-family: var(--mono); color: var(--mint); } .panel-head span { font-family: var(--mono); font-size: 12px; color: var(--muted-3); } /* ---------- progress list ---------- */ .progress { margin: 56px 0 0; overflow: hidden; } .progress-rows { margin: 0; } .progress-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line-soft); } .progress-row:last-child { border-bottom: 0; } .progress-row dt { font-size: 17px; font-weight: 600; color: var(--text-bright); } .progress-row dd { margin: 3px 0 0; font-size: 15px; color: var(--muted-2); } .tag { font-family: var(--mono); font-size: 12px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; } .tag-green { background: #187E5F33; border: 1px solid #187E5F80; color: var(--mint); } .tag-amber { background: #F2C14E1a; border: 1px solid #F2C14E4d; color: var(--amber); } .tag-neutral { background: #ffffff0f; border: 1px solid var(--line); color: var(--muted-2); } /* ---------- two-up cards ---------- */ .duo { margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .card-title { margin: 0 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--white); } .card-intro { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--muted); } .signup { border: 1px solid #187E5F80; border-radius: var(--radius); background: linear-gradient(180deg, #0B584433, var(--panel-solid)); padding: 24px; } /* ---------- form ---------- */ .form { display: flex; gap: 10px; flex-wrap: wrap; } .form input[type="email"] { flex: 1 1 200px; min-width: 0; font-family: inherit; font-size: 16px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--bg); color: var(--text-bright); } .form input[type="email"]::placeholder { color: var(--muted-3); } .form button { border: 0; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; padding: 12px 20px; border-radius: var(--radius-sm); background: var(--accent); color: var(--bg); transition: background 120ms ease; } .form button:hover:not(:disabled) { background: var(--accent-hover); } .form button:disabled { opacity: 0.6; cursor: progress; } /* Honeypot — hidden from people, irresistible to bots. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm); background: #187E5F2e; border: 1px solid #187E5F80; font-size: 16px; line-height: 1.5; color: #DCF0E7; } .notice-error { background: #F2C14E1a; border-color: #F2C14E4d; color: var(--amber); } .notice .mark { font-size: 22px; line-height: 1; color: var(--mint); } .notice-error .mark { color: var(--amber); } .microcopy { margin: 14px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--muted-3); } .microcopy a { color: var(--muted-3); text-decoration: underline; text-underline-offset: 2px; } .microcopy a:hover { color: var(--mint); } /* ---------- contact ---------- */ .contact-list { display: grid; gap: 12px; } .contact-list + .contact-list { margin-top: 12px; } .contact-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--wash); transition: border-color 120ms ease, background 120ms ease; } .contact-list a:hover { border-color: #187E5F80; background: #187E5F1f; } .contact-list .who { font-size: 17px; font-weight: 600; color: var(--text-bright); } .contact-list .how { font-family: var(--mono); font-size: 14px; color: var(--mint); overflow-wrap: anywhere; text-align: right; } .card-foot { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted-2); } /* ---------- story ---------- */ .story { margin: 24px 0 0; } .story-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; border: 0; background: transparent; cursor: pointer; font-family: inherit; text-align: left; padding: 0; color: inherit; } .story-toggle .headline { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--white); } .story-toggle .tease { display: block; margin-top: 4px; font-size: 16px; color: var(--muted-2); } .story-toggle .chip { font-family: var(--mono); font-size: 12px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--mint); white-space: nowrap; } .story-body { display: grid; gap: 18px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-soft); max-width: 72ch; } .story-body p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--copy); } .story-body strong { color: var(--mint); font-weight: 700; } [hidden] { display: none !important; } /* ---------- footer ---------- */ .colophon { margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--footer-fg); } .colophon a { color: var(--footer-fg); text-decoration: underline; text-underline-offset: 2px; } .colophon a:hover { color: var(--mint); } /* ---------- prose (privacy / confirmation pages) ---------- */ .prose { max-width: 68ch; margin: 48px auto 0; } .prose h1 { margin: 0 0 8px; font-size: clamp(30px, 5vw, 44px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; color: var(--white); } .prose h2 { margin: 32px 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--white); } .prose p, .prose li { font-size: 17px; line-height: 1.65; color: var(--copy); } .prose ul { padding-left: 20px; } .prose li { margin-bottom: 6px; } .prose .stamp { font-family: var(--mono); font-size: 12px; color: var(--muted-3); } /* ---------- responsive ---------- */ @media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 8px; } .portrait { order: -1; max-width: 420px; } .duo { grid-template-columns: 1fr; } .progress { margin: 40px 0 0; } } @media (max-width: 560px) { body { padding: 0 16px 48px; } .masthead { padding: 20px 0 4px; } .hero .lede { font-size: 18px; } .progress-row { grid-template-columns: 1fr; gap: 10px; } .progress-row .tag { justify-self: start; } .panel-head, .progress-row { padding-left: 18px; padding-right: 18px; } .panel-pad, .signup { padding: 20px; } .contact-list a { flex-direction: column; align-items: flex-start; gap: 6px; } .contact-list .how { text-align: left; } .story-toggle { flex-direction: column; align-items: flex-start; gap: 14px; } .form button { flex: 1 1 100%; } .colophon { flex-direction: column; gap: 6px; } } @media (prefers-reduced-motion: reduce) { .portrait > div { animation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; } }