@import url("/mac26.css"); /* ============================================================================ OpenCADs — Public marketing site · shared stylesheet Tech: standalone HTML/CSS/JS, no framework, no build step. Font: 'Manrope' (Google Fonts) — THỐNG NHẤT với app (index.html/appshell) để web↔app↔desktop dùng CHUNG 1 typography (hết "đổi font" khi marketing→app). This file is the SINGLE source of shared styles for every page under /site/. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); /* ---------------------------------------------------------------------------- DESIGN TOKENS (extracted from the Claude Design source). Inline styles in the page markup use literal values; these vars are provided for new/shared UI (footer, modal, badges, cards) so page agents stay on-palette. ---------------------------------------------------------------------------- */ :root { /* ★ macOS-2026: token marketing CŨ nay chỉ là BÍ DANH trỏ về /mac26.css (nạp qua @import ở đầu file). Không khai báo màu riêng ở đây nữa. */ --oc-blue: var(--mc-accent); --oc-blue-2: var(--mc-accent); --oc-blue-bright: var(--mc-accent-hi); --oc-blue-deep: var(--mc-accent-press); --oc-blue-ink: var(--mc-accent-press); --oc-navy: var(--mc-label); --oc-navy-2: var(--mc-label); --oc-navy-hero: var(--mc-label); --oc-green: var(--mc-success); --oc-orange: var(--mc-accent); --oc-purple: var(--mc-accent); --oc-pink: var(--mc-accent-hi); --oc-red: var(--mc-danger); --oc-ink: var(--mc-label); --oc-text: var(--mc-label-2); --oc-muted: var(--mc-label-3); --oc-muted-2: var(--mc-label-3); --oc-line: var(--mc-separator); --oc-line-2: var(--mc-separator-strong); --oc-bg: var(--mc-surface); --oc-bg-soft: var(--mc-surface); --oc-bg-tint: var(--mc-accent-soft); --oc-maxw: 1240px; --oc-pad-x: var(--mc-s6); --oc-radius: var(--mc-r-card); --oc-shadow: var(--mc-e3); --oc-font: var(--mc-font); } /* ---------------------------------------------------------------------------- BASE (from design ) — keep 1:1 ---------------------------------------------------------------------------- */ * { margin:0; padding:0; box-sizing:border-box; } body { font-family: var(--oc-font); -webkit-font-smoothing:antialiased; background:#fff; color:var(--oc-navy-2); } /* Contain stray horizontal overflow from the wide page CONTENT (the design has 1240px fixed grids + absolutely-positioned hero/world-map decorations). We use overflow-x:hidden on #site-main — SAFE here because the sticky header is a SIBLING of #site-main (in #site-header), not a descendant, so this does not break sticky. (We deliberately do NOT clip /, which would.) */ #site-main { overflow-x:hidden; } @keyframes ocFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} } @keyframes ocPulse { 0%,100%{ opacity:.45; transform:scale(1);} 50%{ opacity:.9; transform:scale(1.06);} } @keyframes ocDash { to { stroke-dashoffset:-24; } } /* ---------------------------------------------------------------------------- HEADER + MEGA-MENU (from design ) — desktop hover behaviour. The header markup itself ships in /site/_partials/header.html and is injected by site.js into . ---------------------------------------------------------------------------- */ .oc-mega { opacity:0; transform:translateX(-50%) translateY(-10px) scale(.985); pointer-events:none; transition:opacity .18s ease, transform .18s ease; /* never wider than the viewport (the design hard-codes up to 1360px) */ max-width:calc(100vw - 32px); } .oc-navitem:hover .oc-mega { opacity:1; transform:translateX(-50%) translateY(0) scale(1); pointer-events:auto; } .oc-navitem:hover .oc-chev { transform:rotate(180deg); } .oc-navitem:hover .oc-nav-link { color:var(--mc-accent); } .oc-cat { color:var(--mc-label); transition:background .12s, color .12s; } .oc-cat:hover { background:var(--mc-accent-soft); color:var(--mc-accent); } .oc-cat-active { background:var(--mc-accent-soft); color:var(--mc-accent); } .oc-appcard { transition:transform .15s ease, box-shadow .15s ease; } .oc-appcard:hover { transform:translateY(-4px); box-shadow:0 20px 48px rgba(11,99,255,.16); } .oc-ind { transition:background .12s; } .oc-ind:hover { background:var(--mc-fill); } /* The header markup uses position:sticky, but it sits inside the injection wrapper