/* ITCONSULTING design tokens */ :root{--surface:#f4f7fb;--surface-raised:#ffffff;--surface-sunken:#e8eef7;--ink:#0b1a2e;--ink-muted:#4a5a70;--line:#d5deea;--line-strong:#7b8aa0;--brand:#1453cc;--brand-strong:#0e3f9e;--on-brand:#ffffff;--brand-soft:#dde8fc;--accent:#38bdf8;--on-accent:#04212e;--night:#07183a;--on-night:#eef3fb;--on-night-muted:#a9b8d0;--night-line:#1f3561;--focus:#1453cc;--shadow-card:0 1px 2px rgba(11,26,46,0.06), 0 12px 32px rgba(20,83,204,0.12);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--font-sans:"Be Vietnam Pro", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace} /* ITCONSULTING — shared component styles. Every value is a token. */ .itc-root { font-family: var(--font-sans); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; } .itc-root *, .itc-root *::before, .itc-root *::after { box-sizing: border-box; } .itc-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Eyebrow label */ .itc-eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); display: inline-flex; align-items: center; gap: var(--space-2); } .itc-eyebrow::before { content: ""; width: var(--space-2); height: var(--space-2); background: var(--accent); border-radius: var(--radius-sm); } /* Button */ .itc-btn { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 15px/20px var(--font-sans); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .itc-btn--primary { background: var(--brand); color: var(--on-brand); } .itc-btn--primary:hover { background: var(--brand-strong); } .itc-btn:hover .itc-arrow { transform: translateX(3px); } .itc-btn .itc-arrow { transition: transform .2s; } .itc-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .itc-btn--ghost:hover { border-color: var(--ink); } .itc-btn--on-night { background: var(--on-night); color: var(--night); } .itc-btn .itc-arrow { font-family: var(--font-mono); font-weight: 500; } /* Service card */ .itc-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); transition: box-shadow .25s, border-color .25s, transform .25s; } .itc-card:hover { box-shadow: var(--shadow-card); border-color: var(--brand); transform: translateY(-4px); } .itc-card__code { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; color: var(--brand); } .itc-card__title { margin: var(--space-3) 0 var(--space-2); font-size: 19px; line-height: 28px; font-weight: 600; color: var(--ink); } .itc-card__text { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); } .itc-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); padding: 0; list-style: none; } .itc-card__tags li { font-size: 13px; line-height: 20px; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--ink); } /* Motion: scroll reveal. Add class "itc-js" to from script so content stays visible without JS. */ .itc-js .itc-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); } .itc-js .itc-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .itc-root *, .itc-root *::before, .itc-root *::after { animation: none !important; transition: none !important; } .itc-js .itc-reveal { opacity: 1; transform: none; } }