/* ------------------------------------------------------- didiaoapi landing page — design tokens from jiojio brand ------------------------------------------------------- */ /* [hidden] must win over any display rule (applied globally) */ [hidden] { display: none !important; } /* ---- token layer ---- */ :root { /* Surfaces */ --bg: #FAF8F2; --surface: #FFFFFF; --surface-2: #F3F1E9; --border: #E0DDD1; --border-strong: #C2BFB2; /* Text */ --text: #16140F; --text-2: #6B675C; --text-3: #9B978B; --text-4: #C2BFB2; /* Accent */ --accent: #A07E58; --accent-tint: #E6DACB; --fawn-deep: #7A5E3E; --danger: #C4453C; --danger-tint: #FCEEED; --success: #788C5D; --success-tint: #E8EDDF; /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 9999px; /* Shadow */ --sh-xs: 0 1px 2px rgba(20,20,19,.04); --sh-sm: 0 2px 8px rgba(20,20,19,.06); --sh-md: 0 4px 16px rgba(20,20,19,.12); /* Type */ --font-sans: "DM Sans", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif; --font-serif: "Source Serif 4", "Noto Serif SC", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; /* Logo seal text fill */ --seal-inner: #FAF8F2; --seal-bg: #7A5E3E; } /* dark theme — toggled via data-theme="dark" on */ [data-theme="dark"] { --bg: #2D271C; --surface: #362F24; --surface-2: #3E372B; --border: #483F33; --border-strong: #554C40; --text: #F3EEE2; --text-2: #B0A898; --text-3: #7F7869; --text-4: #554C40; --accent: #A07E58; --accent-tint: #473923; --danger-tint: #3A1E1B; --success-tint:#232C1C; --sh-xs: 0 1px 2px rgba(0,0,0,.30); --sh-sm: 0 2px 8px rgba(0,0,0,.40); --sh-md: 0 4px 16px rgba(0,0,0,.50); /* In dark mode: seal bg = Fawn Main, inner letter = Bark */ --seal-bg: #A07E58; --seal-inner: #2D271C; } /* ---- reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; min-height: 100vh; } /* ---- focus ring ---- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } /* ---- layout ---- */ .container { max-width: 720px; margin: 0 auto; padding: 0 16px; } /* ---- header ---- */ .site-header { padding: 24px 0; border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; } .brand-lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; } .brand-seal { flex-shrink: 0; display: block; width: 40px; height: 40px; } .brand-divider { width: 1px; height: 28px; background: var(--border-strong); flex-shrink: 0; } .brand-wordmark { font-family: var(--font-sans); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); } /* ---- header controls (lang + theme toggles) ---- */ .header-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .header-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: transparent; color: var(--text-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; cursor: pointer; white-space: nowrap; transition: color 120ms ease, border-color 120ms ease; } .header-btn:hover { color: var(--text); border-color: var(--border-strong); } .header-btn svg { width: 14px; height: 14px; flex-shrink: 0; } /* ---- hero ---- */ .hero { padding: 80px 0 72px; border-bottom: 1px solid var(--border); } .hero-headline { font-family: var(--font-serif); font-weight: 300; font-size: clamp(22px, 5vw, 36px); line-height: 1.3; letter-spacing: -0.02em; color: var(--text); margin-bottom: 40px; max-width: 26ch; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1; padding: 12px 24px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; white-space: nowrap; } .btn-primary { background: var(--accent); color: #FFFFFF; border-color: var(--accent); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--fawn-deep); border-color: var(--fawn-deep); box-shadow: var(--sh-sm); } .btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); } /* ---- contact section ---- */ .contact-section { padding: 80px 0; } .section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; font-variant-numeric: tabular-nums; } .section-title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(24px, 4vw, 32px); letter-spacing: -0.02em; color: var(--text); margin-bottom: 24px; line-height: 1.2; } /* contact toggle button — appears below section title */ .contact-toggle { margin-bottom: 32px; } /* contact form wrapper — animated expand/collapse via JS max-height */ .contact-form-wrapper { overflow: hidden; transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1); } /* ---- form ---- */ .contact-form { display: flex; flex-direction: column; gap: 20px; max-width: 480px; padding-bottom: 4px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: 14px; font-weight: 500; color: var(--text-2); } .form-field .field-hint { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; } .form-field input, .form-field textarea { font-family: var(--font-sans); font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; width: 100%; transition: border-color 120ms ease, box-shadow 120ms ease; appearance: none; -webkit-appearance: none; } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-4); } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .form-field textarea { resize: vertical; min-height: 120px; } /* honeypot — hidden from sighted users; present in DOM for bots. display:none inputs are NOT disabled: they are still included in form.elements and submitted in form data. */ .hp-field { display: none; } /* ---- form submission state ---- */ .form-status { font-size: 14px; padding: 12px 16px; border-radius: var(--r-md); display: none; margin-top: 4px; } .form-status.success { display: block; background: var(--success-tint); color: var(--success); border: 1px solid var(--success); } .form-status.error { display: block; background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger); } /* ---- mailto fallback ---- */ .contact-alt { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-2); } .contact-alt a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; transition: border-color 120ms ease; } .contact-alt a:hover { border-bottom-color: var(--accent); } /* ---- footer ---- */ .site-footer { border-top: 1px solid var(--border); padding: 28px 0; } .site-footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .footer-copy { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .footer-email { font-family: var(--font-mono); font-size: 12px; color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; font-variant-numeric: tabular-nums; transition: border-color 120ms ease; } .footer-email:hover { border-bottom-color: var(--accent); } /* ---- responsive ---- */ @media (max-width: 480px) { .hero { padding: 56px 0 48px; } .contact-section { padding: 56px 0; } .hero-actions { flex-direction: column; align-items: flex-start; } .btn { width: 100%; justify-content: center; } .contact-form { max-width: 100%; } .site-footer .container { flex-direction: column; align-items: flex-start; } }