/* ============================================================ AI ARCHITECT STUDIO — Webfonts ------------------------------------------------------------ Headline face: Montserrat (geometric sans, full Vietnamese subset). This is a SUBSTITUTE for the studio's production display face — see readme.md "Fonts" note. Swap the @import below for local @font-face binaries when available. Body face: Arial-class system stack (see typography.css) — intentionally NOT a webfont, per brand spec (Arial-class, 10–11pt equivalent). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap&subset=vietnamese,latin,latin-ext'); /* ============================================================ AI ARCHITECT STUDIO — Color System ------------------------------------------------------------ Editorial premium-tech. Composition ratio 65 / 15 / 12 / 8: 65% near-black ground · 15% panel/surface · 12% ink (text) · 8% GOLD (accent ceiling — never exceed). Gold is an accent only. NEVER use gold as body text on light. ============================================================ */ :root { /* ---- Ground / near-black scale ---------------------------- */ --aas-black: #050505; /* canonical background */ --aas-ink-900: #0a0a0a; --aas-ink-850: #0d0d0d; --aas-panel: #111111; /* raised panel / card ground */ --aas-panel-hi: #161616; /* hover / elevated panel */ --aas-line: #262626; /* hairline on dark */ --aas-line-soft: #1c1c1c; /* ---- Ink (text on dark) ----------------------------------- */ --aas-white: #f6f4f0; /* headline white (warm) */ --aas-fg-1: #e8e6e1; /* primary text */ --aas-fg-2: #a3a099; /* secondary text */ --aas-fg-3: #6f6c66; /* muted labels / captions */ --aas-fg-4: #4a4844; /* faint / disabled */ /* ---- Gold (the single accent) ----------------------------- */ --aas-gold: #e6b261; /* canonical accent gold */ --aas-gold-hi: #f0d090; /* highlight / gradient top */ --aas-gold-lo: #b8842f; /* shadow / gradient bottom */ --aas-gold-deep: #8a6222; /* deep gold for rules on light*/ --aas-gold-metal: linear-gradient(140deg, #f0d090 0%, #e6b261 42%, #b8842f 100%); /* @kind color */ /* ---- Cream (secondary line — course/community only) ------- */ --aas-cream: #efe7d7; --aas-cream-deep: #d9c8a8; /* ---- Light ground (rare — day-render panels, docs) -------- */ --aas-paper: #f2f0ea; --aas-paper-ink: #1a1a1a; /* ============================================================ SEMANTIC ALIASES — reference these in components. ============================================================ */ --bg-page: var(--aas-black); --bg-surface: var(--aas-panel); --bg-surface-hi: var(--aas-panel-hi); --bg-inverse: var(--aas-paper); --text-heading: var(--aas-white); --text-body: var(--aas-fg-1); --text-muted: var(--aas-fg-2); --text-label: var(--aas-fg-3); --text-faint: var(--aas-fg-4); --text-on-light: var(--aas-paper-ink); --accent: var(--aas-gold); --accent-hi: var(--aas-gold-hi); --accent-metal: var(--aas-gold-metal); --rule: var(--aas-line); --rule-soft: var(--aas-line-soft); --rule-gold: var(--aas-gold); /* chip / caption ground floating over imagery */ --chip-bg: rgba(5, 5, 5, 0.62); --chip-border: rgba(230, 178, 97, 0.28); } /* ============================================================ AI ARCHITECT STUDIO — Typography ------------------------------------------------------------ Headlines: Montserrat, ALL CAPS, wide tracking. Written as CONCLUSIONS (statements), not topic labels. Body: Arial-class, small & clean (10–11pt equivalent). Eyebrows / labels / chips: caps, heavy tracking, small. ============================================================ */ :root { /* ---- Families -------------------------------------------- */ --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-body: Arial, 'Helvetica Neue', Helvetica, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ---- Weights --------------------------------------------- */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-black: 800; /* @kind font */ /* ---- Display scale (headline conclusions) ---------------- */ --fs-display: clamp(2.6rem, 5.2vw, 4.25rem); /* @kind font */ --fs-h1: clamp(2.0rem, 3.8vw, 3.0rem); /* @kind font */ --fs-h2: clamp(1.55rem, 2.6vw, 2.15rem); /* @kind font */ --fs-h3: 1.25rem; /* @kind font */ /* ---- Body scale (Arial-class, small) --------------------- */ --fs-lead: 1.0625rem; /* @kind font */ --fs-body: 0.9375rem; /* @kind font */ --fs-body-sm: 0.8125rem; /* @kind font */ --fs-caption: 0.6875rem; /* @kind font */ /* ---- Label / eyebrow scale ------------------------------- */ --fs-eyebrow: 0.75rem; /* @kind font */ --fs-label: 0.625rem; /* @kind font */ /* ---- Line heights ---------------------------------------- */ --lh-tight: 1.04; /* @kind font */ --lh-heading: 1.14; /* @kind font */ --lh-body: 1.62; /* @kind font */ --lh-label: 1.2; /* @kind font */ /* ---- Tracking (letter-spacing) --------------------------- */ --ls-display: 0.01em; /* @kind font */ --ls-heading: 0.015em; /* @kind font */ --ls-body: 0.005em; /* @kind font */ --ls-eyebrow: 0.26em; /* @kind font */ --ls-label: 0.34em; /* @kind font */ --ls-wordmark: 0.42em; /* @kind font */ } /* ---- Optional utility classes (components use tokens) ------ */ .aas-display { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--text-heading); } .aas-eyebrow { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); } .aas-label { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; } .aas-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-body); } /* ============================================================ AI ARCHITECT STUDIO — Spacing & Layout ------------------------------------------------------------ Generous whitespace is a brand signature. Base unit 4px. ============================================================ */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ---- Marketing-asset frame inset (the thin outer border) - */ --frame-inset: 28px; /* padding from card edge to content */ --frame-inset-lg:44px; /* ---- Layout ---------------------------------------------- */ --container: 1200px; --container-wide:1440px; --gutter: 24px; /* ---- Radii (restrained — the brand is squared, editorial) - */ --radius-0: 0; /* default — hard corners */ --radius-sm: 2px; --radius-md: 4px; --radius-chip:2px; /* caption chips */ --radius-pill:999px; /* AI badge / round dividers only */ } /* ============================================================ AI ARCHITECT STUDIO — Effects: borders, rules, shadows, overlays, motion. ------------------------------------------------------------ The system leans on THIN GOLD RULES and hairline borders, not heavy shadows. Elevation is expressed with faint borders + near-black panel shifts, occasionally a soft ambient glow. ============================================================ */ :root { /* ---- Borders / hairlines --------------------------------- */ --border-hair: 1px solid var(--rule); --border-soft: 1px solid var(--rule-soft); --border-gold: 1px solid var(--rule-gold); --border-gold-soft: 1px solid rgba(230, 178, 97, 0.28); /* @kind other */ /* thin gold divider rule (horizontal) */ --rule-thickness: 1px; /* @kind other */ /* the double-frame lockup (logo & marketing frame) */ --frame-line: 1px solid rgba(230, 178, 97, 0.55); /* @kind other */ /* ---- Shadows (used sparingly) ---------------------------- */ --shadow-none: none; --shadow-panel: 0 1px 0 rgba(255,255,255,0.02) inset, 0 24px 60px -30px rgba(0,0,0,0.9); --shadow-lift: 0 30px 80px -40px rgba(0,0,0,0.95); --glow-gold: 0 0 0 1px rgba(230,178,97,0.35), 0 12px 40px -18px rgba(230,178,97,0.35); /* ---- Image treatment ------------------------------------- */ /* protection gradient so caption chips read over imagery */ --img-scrim: linear-gradient(180deg, rgba(5,5,5,0) 46%, rgba(5,5,5,0.72) 100%); /* @kind other */ --img-scrim-top:linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0) 34%); /* @kind other */ --img-radius: var(--radius-0); /* ---- Motion ---------------------------------------------- */ /* editorial = calm. Ease in-out, no bounce. Fades & slow reveals. */ --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-base: 240ms; /* @kind other */ --dur-slow: 520ms; /* @kind other */ /* interaction states */ --hover-lift: var(--bg-surface-hi); /* panel lightens on hover */ --press-dim: 0.86; /* @kind other */ }