/* ============================================================================ Investment Node — design system Loaded after Bulma to override defaults via custom properties + targeted selectors. Light scheme by default, dark scheme via [data-theme="dark"] on . The toggle persists in localStorage. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap'); :root { /* ---- palette ---- */ --in-indigo-50: #EEF2FF; --in-indigo-100: #E0E7FF; --in-indigo-300: #A5B4FC; --in-indigo-500: #6366F1; --in-indigo-600: #4F46E5; --in-indigo-700: #4338CA; --in-indigo-900: #312E81; --in-emerald-50: #ECFDF5; --in-emerald-500: #10B981; --in-emerald-600: #059669; --in-amber-50: #FFFBEB; --in-amber-500: #F59E0B; --in-rose-50: #FFF1F2; --in-rose-500: #F43F5E; --in-rose-600: #E11D48; --in-slate-0: #FFFFFF; --in-slate-25: #FCFCFD; --in-slate-50: #F8FAFC; --in-slate-100: #F1F5F9; --in-slate-200: #E2E8F0; --in-slate-300: #CBD5E1; --in-slate-400: #94A3B8; --in-slate-500: #64748B; --in-slate-600: #475569; --in-slate-700: #334155; --in-slate-800: #1E293B; --in-slate-900: #0F172A; --in-slate-950: #020617; /* ---- semantic ---- */ --in-bg: var(--in-slate-50); --in-surface: var(--in-slate-0); --in-surface-2: var(--in-slate-100); --in-border: var(--in-slate-200); --in-border-strong: var(--in-slate-300); --in-text: var(--in-slate-800); --in-text-muted: var(--in-slate-500); --in-text-soft: var(--in-slate-400); --in-link: var(--in-indigo-600); --in-accent: var(--in-indigo-600); --in-accent-hover: var(--in-indigo-700); --in-accent-soft: var(--in-indigo-50); --in-success: var(--in-emerald-600); --in-success-soft: var(--in-emerald-50); --in-warning: var(--in-amber-500); --in-warning-soft: var(--in-amber-50); --in-danger: var(--in-rose-600); --in-danger-soft: var(--in-rose-50); /* ---- elevation ---- */ --in-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04); --in-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06), 0 1px 3px 0 rgba(15, 23, 42, 0.05); --in-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --in-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05); --in-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.05); --in-shadow-glow: 0 0 0 1px var(--in-indigo-100), 0 8px 24px -8px rgba(79, 70, 229, 0.35); /* ---- radii ---- */ --in-radius-xs: 4px; --in-radius-sm: 6px; --in-radius-md: 10px; --in-radius-lg: 14px; --in-radius-xl: 20px; --in-radius-pill: 999px; /* ---- type ---- */ --in-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --in-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace; /* ---- bulma overrides (keep all Bulma components themed) ---- */ --bulma-primary-h: 239; --bulma-primary-s: 84%; --bulma-primary-l: 67%; --bulma-link-h: 239; --bulma-link-s: 84%; --bulma-link-l: 67%; --bulma-info-h: 217; --bulma-info-s: 91%; --bulma-info-l: 60%; --bulma-success-h: 158; --bulma-success-s: 64%; --bulma-success-l: 40%; --bulma-warning-h: 38; --bulma-warning-s: 92%; --bulma-warning-l: 50%; --bulma-danger-h: 350; --bulma-danger-s: 84%; --bulma-danger-l: 50%; --bulma-family-primary: var(--in-font-sans); --bulma-family-secondary: var(--in-font-sans); --bulma-family-code: var(--in-font-mono); --bulma-radius-small: var(--in-radius-xs); --bulma-radius: var(--in-radius-sm); --bulma-radius-medium: var(--in-radius-md); --bulma-radius-large: var(--in-radius-lg); --bulma-body-background-color: var(--in-bg); --bulma-body-color: var(--in-text); --bulma-text: var(--in-text); --bulma-text-strong: var(--in-slate-900); --bulma-text-weak: var(--in-text-muted); --bulma-background: var(--in-surface-2); --bulma-border: var(--in-border); --bulma-border-weak: var(--in-border); } /* ---- dark mode tokens ---- */ :root[data-theme="dark"] { --in-bg: var(--in-slate-950); --in-surface: var(--in-slate-900); --in-surface-2: var(--in-slate-800); --in-border: var(--in-slate-800); --in-border-strong: var(--in-slate-700); --in-text: var(--in-slate-100); --in-text-muted: var(--in-slate-400); --in-text-soft: var(--in-slate-500); --in-link: var(--in-indigo-300); --in-accent: var(--in-indigo-500); --in-accent-hover: var(--in-indigo-300); --in-accent-soft: rgba(99, 102, 241, 0.12); --in-success-soft: rgba(16, 185, 129, 0.12); --in-warning-soft: rgba(245, 158, 11, 0.12); --in-danger-soft: rgba(244, 63, 94, 0.12); --in-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.3); --in-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.4); --in-shadow-md: 0 4px 8px -2px rgba(0,0,0,0.45); --in-shadow-lg: 0 12px 20px -6px rgba(0,0,0,0.5); --in-shadow-xl: 0 24px 40px -10px rgba(0,0,0,0.55); --in-shadow-glow: 0 0 0 1px rgba(99,102,241,0.3), 0 8px 24px -8px rgba(99,102,241,0.4); --bulma-body-background-color: var(--in-bg); --bulma-body-color: var(--in-text); --bulma-scheme-main: var(--in-surface); --bulma-scheme-main-bis: var(--in-surface-2); --bulma-text: var(--in-text); --bulma-text-strong: var(--in-slate-50); --bulma-text-weak: var(--in-text-muted); --bulma-background: var(--in-surface-2); --bulma-border: var(--in-border); --bulma-border-weak: var(--in-border); } /* ============================================================================ GLOBAL ============================================================================ */ html { background: var(--in-bg); color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { font-family: var(--in-font-sans); font-feature-settings: 'cv11','ss01','cv02'; background: var(--in-bg); color: var(--in-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .title, .subtitle, h1, h2, h3, h4, h5, h6 { color: var(--in-slate-900); letter-spacing: -0.02em; } html[data-theme="dark"] .title, html[data-theme="dark"] .subtitle, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--in-slate-50); } .title.is-1, .title.is-2 { font-weight: 800; } .title.is-3, .title.is-4, .title.is-5 { font-weight: 700; } a { color: var(--in-link); transition: color 120ms ease; } a:hover { color: var(--in-accent-hover); } ::selection { background: var(--in-indigo-100); color: var(--in-indigo-900); } /* ============================================================================ NAV ============================================================================ */ .in-navbar { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.78); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--in-border); height: 60px; display: flex; align-items: center; padding: 0 24px; } html[data-theme="dark"] .in-navbar { background: rgba(15, 23, 42, 0.72); border-bottom-color: var(--in-border); } .in-navbar-inner { width: 100%; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 24px; } .in-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--in-slate-900); text-decoration: none; letter-spacing: -0.01em; } html[data-theme="dark"] .in-brand { color: var(--in-slate-50); } .in-brand:hover { color: var(--in-accent); } .in-brand-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--in-indigo-500) 0%, var(--in-indigo-700) 100%); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; box-shadow: var(--in-shadow-sm); } .in-nav-links { display: flex; align-items: center; gap: 4px; margin-left: 12px; } .in-nav-link { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--in-radius-sm); color: var(--in-text-muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 120ms ease; } .in-nav-link:hover { background: var(--in-surface-2); color: var(--in-text); } .in-nav-link.is-active { background: var(--in-accent-soft); color: var(--in-accent); } .in-nav-spacer { flex: 1; } .in-nav-actions { display: flex; align-items: center; gap: 8px; } .in-icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--in-radius-sm); background: transparent; border: 1px solid var(--in-border); color: var(--in-text-muted); cursor: pointer; transition: all 120ms ease; } .in-icon-btn:hover { background: var(--in-surface-2); color: var(--in-text); border-color: var(--in-border-strong); } .in-icon-btn svg { width: 16px; height: 16px; } html[data-theme="dark"] .in-theme-toggle .sun { display: block; } html[data-theme="dark"] .in-theme-toggle .moon { display: none; } .in-theme-toggle .sun { display: none; } .in-theme-toggle .moon { display: block; } .in-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border-radius: var(--in-radius-sm); font-size: 14px; font-weight: 600; text-decoration: none; transition: all 140ms ease; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .in-btn-primary { background: var(--in-accent); color: #fff; box-shadow: var(--in-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.15); } .in-btn-primary:hover { background: var(--in-accent-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--in-shadow-md), inset 0 1px 0 rgba(255,255,255,0.15); } .in-btn-ghost { background: transparent; color: var(--in-text); border-color: var(--in-border); } .in-btn-ghost:hover { background: var(--in-surface-2); color: var(--in-text); border-color: var(--in-border-strong); } .in-btn-lg { height: 44px; padding: 0 22px; font-size: 15px; border-radius: var(--in-radius-md); } /* ============================================================================ LANDING / HERO ============================================================================ */ .in-hero { position: relative; padding: 96px 24px 120px; text-align: center; overflow: hidden; isolation: isolate; } .in-hero::before { content: ""; position: absolute; inset: -200px -100px auto -100px; height: 700px; z-index: -1; background: radial-gradient(ellipse 800px 400px at 30% 20%, rgba(99, 102, 241, 0.18), transparent 60%), radial-gradient(ellipse 700px 350px at 75% 30%, rgba(16, 185, 129, 0.12), transparent 60%), radial-gradient(ellipse 600px 300px at 50% 80%, rgba(236, 72, 153, 0.08), transparent 60%); filter: blur(20px); } html[data-theme="dark"] .in-hero::before { background: radial-gradient(ellipse 800px 400px at 30% 20%, rgba(99, 102, 241, 0.25), transparent 60%), radial-gradient(ellipse 700px 350px at 75% 30%, rgba(16, 185, 129, 0.18), transparent 60%); } .in-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--in-radius-pill); background: var(--in-surface); border: 1px solid var(--in-border); color: var(--in-text-muted); font-size: 13px; font-weight: 500; box-shadow: var(--in-shadow-xs); } .in-hero-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--in-emerald-500); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); } .in-hero h1 { margin: 24px auto 0; max-width: 880px; font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; color: var(--in-slate-900); } html[data-theme="dark"] .in-hero h1 { color: var(--in-slate-50); } .in-hero h1 .in-grad { background: linear-gradient(135deg, var(--in-indigo-600) 0%, var(--in-emerald-500) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .in-hero-sub { margin: 22px auto 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--in-text-muted); } .in-hero-cta { display: inline-flex; gap: 12px; margin-top: 36px; } .in-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; max-width: 720px; margin: 56px auto 0; padding-top: 28px; border-top: 1px solid var(--in-border); } .in-stat-num { font-family: var(--in-font-mono); font-size: 28px; font-weight: 700; color: var(--in-slate-900); letter-spacing: -0.02em; } html[data-theme="dark"] .in-stat-num { color: var(--in-slate-50); } .in-stat-label { margin-top: 4px; font-size: 13px; color: var(--in-text-muted); } .in-features { max-width: 1120px; margin: 80px auto 96px; padding: 0 24px; } .in-features-head { text-align: center; max-width: 640px; margin: 0 auto 56px; } .in-features-head h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -0.025em; color: var(--in-slate-900); } html[data-theme="dark"] .in-features-head h2 { color: var(--in-slate-50); } .in-features-head p { margin-top: 14px; font-size: 16px; color: var(--in-text-muted); } .in-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .in-feature { background: var(--in-surface); border: 1px solid var(--in-border); border-radius: var(--in-radius-lg); padding: 28px; transition: all 220ms ease; } .in-feature:hover { transform: translateY(-3px); box-shadow: var(--in-shadow-lg); border-color: var(--in-indigo-300); } .in-feature-icon { width: 44px; height: 44px; border-radius: var(--in-radius-md); background: var(--in-accent-soft); color: var(--in-accent); display: grid; place-items: center; margin-bottom: 16px; } .in-feature-icon svg { width: 22px; height: 22px; } .in-feature h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; color: var(--in-slate-900); } html[data-theme="dark"] .in-feature h3 { color: var(--in-slate-50); } .in-feature p { font-size: 14px; line-height: 1.55; color: var(--in-text-muted); margin: 0; } /* ============================================================================ AUTH ============================================================================ */ .in-auth-page { min-height: calc(100vh - 60px); display: grid; place-items: center; padding: 48px 16px; position: relative; isolation: isolate; } .in-auth-page::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 600px 300px at 30% 20%, rgba(99, 102, 241, 0.10), transparent 60%), radial-gradient(ellipse 500px 250px at 70% 80%, rgba(16, 185, 129, 0.08), transparent 60%); } .in-auth-card { width: 100%; max-width: 420px; background: var(--in-surface); border: 1px solid var(--in-border); border-radius: var(--in-radius-lg); padding: 36px 32px; box-shadow: var(--in-shadow-lg); } .in-auth-mark { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; } .in-auth-mark .in-brand-mark { width: 36px; height: 36px; font-size: 15px; } .in-auth-mark span { font-weight: 700; font-size: 16px; color: var(--in-slate-900); } html[data-theme="dark"] .in-auth-mark span { color: var(--in-slate-50); } .in-auth-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; color: var(--in-slate-900); text-align: center; } html[data-theme="dark"] .in-auth-card h1 { color: var(--in-slate-50); } .in-auth-card .in-auth-help { font-size: 13px; color: var(--in-text-muted); text-align: center; margin-bottom: 24px; } .in-auth-card .field { margin-bottom: 14px; } .in-auth-card .label { font-size: 13px; font-weight: 600; color: var(--in-text); margin-bottom: 6px; } .in-auth-card .input, .in-input { background: var(--in-surface); border: 1px solid var(--in-border-strong); border-radius: var(--in-radius-sm); height: 42px; padding: 0 12px; color: var(--in-text); font-size: 14px; transition: all 140ms ease; box-shadow: none; } .in-auth-card .input:focus, .in-input:focus { border-color: var(--in-accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.18); } .in-auth-cross { margin-top: 18px; text-align: center; font-size: 13px; color: var(--in-text-muted); } /* ============================================================================ DASHBOARD ============================================================================ */ main.section { padding: 32px 24px; } main.section > .container { max-width: 1280px; } .in-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--in-border); } .in-page-title { display: flex; flex-direction: column; gap: 4px; } .in-page-title h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--in-slate-900); margin: 0; } html[data-theme="dark"] .in-page-title h1 { color: var(--in-slate-50); } .in-page-title .in-crumbs { font-size: 12px; color: var(--in-text-soft); text-transform: uppercase; letter-spacing: 0.06em; } .in-user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--in-surface); border: 1px solid var(--in-border); border-radius: var(--in-radius-pill); font-size: 13px; color: var(--in-text); } .in-user-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--in-emerald-500); box-shadow: 0 0 0 3px rgba(16,185,129,0.18); } /* tab bar */ .tabs.is-app-tabs { margin: 0 0 24px; border-bottom: none; } .tabs.is-app-tabs ul { display: inline-flex; gap: 2px; padding: 4px; background: var(--in-surface-2); border-radius: var(--in-radius-md); border: 1px solid var(--in-border); width: auto; } .tabs.is-app-tabs li { margin: 0; } .tabs.is-app-tabs li a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--in-radius-sm); font-size: 13px; font-weight: 600; color: var(--in-text-muted); border: none; background: transparent; text-decoration: none; transition: all 140ms ease; } .tabs.is-app-tabs li a:hover { color: var(--in-text); background: var(--in-surface); } .tabs.is-app-tabs li.is-active a { background: var(--in-surface); color: var(--in-accent); box-shadow: var(--in-shadow-xs); border: none; } /* card / box */ .box { background: var(--in-surface); border: 1px solid var(--in-border); border-radius: var(--in-radius-lg); box-shadow: var(--in-shadow-xs); padding: 22px; } .box .title { color: var(--in-slate-900); } html[data-theme="dark"] .box .title { color: var(--in-slate-50); } /* notification - softer */ .notification { border-radius: var(--in-radius-md); border: 1px solid var(--in-border); background: var(--in-surface); color: var(--in-text); padding: 12px 16px; } .notification.is-light.is-info, .notification.is-info.is-light { background: var(--in-accent-soft); border-color: rgba(99,102,241,0.25); color: var(--in-indigo-700); } html[data-theme="dark"] .notification.is-light.is-info, html[data-theme="dark"] .notification.is-info.is-light { color: var(--in-indigo-300); } .notification.is-light.is-success, .notification.is-success.is-light { background: var(--in-success-soft); border-color: rgba(16,185,129,0.30); color: var(--in-emerald-600); } .notification.is-light.is-warning, .notification.is-warning.is-light { background: var(--in-warning-soft); border-color: rgba(245,158,11,0.35); color: #92400E; } .notification.is-light.is-danger, .notification.is-danger.is-light { background: var(--in-danger-soft); border-color: rgba(244,63,94,0.30); color: var(--in-rose-600); } /* tag - keep small */ .tag { border-radius: var(--in-radius-pill); font-weight: 500; font-size: 12px; padding: 0 10px; height: 22px; } .tag.is-light { background: var(--in-surface-2); color: var(--in-text); border: 1px solid var(--in-border); } /* button polish */ .button.is-primary { background: var(--in-accent); border-color: var(--in-accent); font-weight: 600; border-radius: var(--in-radius-sm); transition: all 140ms ease; box-shadow: var(--in-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12); } .button.is-primary:hover { background: var(--in-accent-hover); border-color: var(--in-accent-hover); transform: translateY(-1px); box-shadow: var(--in-shadow-md); } .button.is-primary:active { transform: translateY(0); } .button.is-light { background: var(--in-surface); border: 1px solid var(--in-border); color: var(--in-text); font-weight: 500; border-radius: var(--in-radius-sm); } .button.is-light:hover { background: var(--in-surface-2); border-color: var(--in-border-strong); color: var(--in-text); } .button.is-danger.is-light { background: var(--in-danger-soft); color: var(--in-rose-600); border-color: rgba(244,63,94,0.30); } /* form inputs - unified */ .input, .select select, .textarea { background: var(--in-surface); border: 1px solid var(--in-border-strong); color: var(--in-text); border-radius: var(--in-radius-sm); box-shadow: none; transition: all 140ms ease; } .input:focus, .select select:focus, .textarea:focus { border-color: var(--in-accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.18); } .label { color: var(--in-text); font-weight: 600; font-size: 13px; } /* tables */ .table { background: transparent; color: var(--in-text); } .table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--in-text-soft); font-weight: 600; border-bottom: 1px solid var(--in-border); padding: 10px 12px; } .table td { border-bottom: 1px solid var(--in-border); color: var(--in-text); padding: 12px; vertical-align: middle; } .table tbody tr:hover { background: var(--in-surface-2); } .table tbody tr:last-child td { border-bottom: none; } td.is-numeric, th.is-numeric { font-family: var(--in-font-mono); text-align: right; } /* skeleton shimmer */ .skeleton, .skeleton-line { background: linear-gradient(90deg, var(--in-surface-2) 0%, var(--in-border) 50%, var(--in-surface-2) 100%); background-size: 200% 100%; animation: in-shimmer 1.6s infinite linear; border-radius: var(--in-radius-sm); height: 12px; margin: 6px 0; } @keyframes in-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* pulse highlight when fields pre-filled */ .pulse-highlight { animation: in-pulse 1.2s ease-out 1; } @keyframes in-pulse { 0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.5); } 100% { box-shadow: 0 0 0 18px rgba(99,102,241,0); } } /* toast region tweak */ #app-toast-region { position: fixed; top: 80px; right: 24px; z-index: 50; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } #app-toast-region .notification { pointer-events: auto; min-width: 260px; box-shadow: var(--in-shadow-lg); animation: in-toast-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.4); } @keyframes in-toast-in { from { opacity: 0; transform: translateX(20px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } /* skip link tidy */ .skip-to-content { position: absolute; top: -40px; left: 0; background: var(--in-accent); color: #fff; padding: 8px 16px; z-index: 100; border-radius: 0 0 var(--in-radius-sm) 0; text-decoration: none; font-size: 13px; } .skip-to-content:focus { top: 0; color: #fff; } /* accessibility focus ring */ :focus-visible { outline: 2px solid var(--in-accent); outline-offset: 2px; border-radius: var(--in-radius-xs); } /* footer */ .in-footer { border-top: 1px solid var(--in-border); padding: 28px 24px; font-size: 13px; color: var(--in-text-muted); text-align: center; } .in-footer a { color: var(--in-text-muted); } .in-footer a:hover { color: var(--in-accent); } /* responsive */ @media (max-width: 720px) { .in-nav-links { display: none; } .in-hero { padding: 64px 16px 80px; } .in-hero-cta { flex-direction: column; width: 100%; max-width: 280px; } .in-hero-cta .in-btn { width: 100%; } .in-features { margin: 56px auto 64px; } main.section { padding: 20px 12px; } .in-page-head { flex-direction: column; align-items: flex-start; } }