/* ============================================================ AKOPYAN AGENCY — Design tokens (colors, type, spacing, effects, base, component states). Compiled from the claude.ai/design design system into one standalone file. Cinzel + Mulish are loaded from Google Fonts in . ============================================================ */ /* ---------------- COLORS ---------------- */ :root { --navy-50: #eef2f4; --navy-100: #d6dfe3; --navy-200: #aec0c8; --navy-300: #7e97a3; --navy-400: #4f6e7c; --navy-500: #2f5263; --navy-600: #284857; --navy-700: #213e4e; /* brand primary */ --navy-800: #1a313d; --navy-900: #12232c; --gold-50: #f7f2e9; --gold-100: #ede2cc; --gold-200: #dcc9a1; --gold-300: #cbb084; --gold-400: #bca072; /* brand accent */ --gold-500: #a88a57; --gold-600: #8c7144; --gold-700: #6e5836; --neutral-0: #ffffff; --neutral-50: #f7f8f9; --neutral-100: #eef1f2; --neutral-200: #dee3e6; --neutral-300: #c3cbd0; --neutral-400: #9aa6ad; --neutral-500: #6e7b83; --neutral-600: #515d64; --neutral-700: #3b454b; --neutral-800: #262d32; --neutral-900: #161a1d; --success-500: #2e7d5b; --success-50: #e7f2ec; --warning-500: #c8893b; --warning-50: #f8efe1; --danger-500: #b3473c; --danger-50: #f7e8e6; --info-500: #356b85; --info-50: #e6eef2; --text-strong: var(--navy-900); --text-body: var(--neutral-700); --text-muted: var(--neutral-500); --text-on-dark: var(--neutral-0); --text-on-dark-muted: var(--navy-200); --text-accent: var(--gold-700); --text-link: var(--navy-700); --surface-page: var(--neutral-0); --surface-subtle: var(--neutral-50); --surface-card: var(--neutral-0); --surface-inset: var(--neutral-100); --surface-dark: var(--navy-700); --surface-darkest: var(--navy-900); --surface-accent-tint: var(--gold-50); --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--neutral-400); --border-on-dark: rgba(255,255,255,0.16); --border-accent: var(--gold-400); --brand-primary: var(--navy-700); --brand-accent: var(--gold-400); --focus-ring: var(--gold-400); --overlay-navy: rgba(18,35,44,0.66); } /* ---------------- TYPOGRAPHY ---------------- */ :root { --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif; --font-body: "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --text-4xl: 4rem; --text-5xl: 5.5rem; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-display: 0.06em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.22em; --font-heading: var(--font-body); --font-display-accent: var(--font-display); --font-eyebrow: var(--font-display); --weight-heading: var(--fw-bold); --weight-body: var(--fw-regular); } /* ---------------- SPACING / LAYOUT ---------------- */ :root { --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6rem; --space-12: 8rem; --section-py: clamp(4rem, 8vw, 8rem); --section-gap: clamp(2.5rem, 5vw, 4.5rem); --content-max: 1200px; --content-narrow: 760px; --content-wide: 1360px; --gutter: clamp(1.25rem, 4vw, 3rem); --radius-none: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-pill: 999px; --border-hairline: 1px; --border-thick: 2px; --rule-accent: 3px; --z-base: 1; --z-sticky-nav: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; } /* ---------------- EFFECTS ---------------- */ :root { --shadow-xs: 0 1px 2px rgba(18,35,44,0.06); --shadow-sm: 0 1px 3px rgba(18,35,44,0.08), 0 1px 2px rgba(18,35,44,0.04); --shadow-md: 0 4px 12px rgba(18,35,44,0.08), 0 2px 4px rgba(18,35,44,0.04); --shadow-lg: 0 12px 28px rgba(18,35,44,0.12), 0 4px 8px rgba(18,35,44,0.05); --shadow-xl: 0 24px 56px rgba(18,35,44,0.16); --shadow-card-hover: 0 16px 36px rgba(18,35,44,0.14); --shadow-focus: 0 0 0 3px rgba(188,160,114,0.45); --shadow-inset: inset 0 1px 2px rgba(18,35,44,0.06); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --duration-fast: 140ms; --duration-base: 240ms; --duration-slow: 420ms; --duration-reveal: 720ms; --transition-colors: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); --transition-transform: transform var(--duration-base) var(--ease-out); --transition-all: all var(--duration-base) var(--ease-standard); --img-scrim: linear-gradient(180deg, rgba(18,35,44,0.20) 0%, rgba(18,35,44,0.72) 100%); --img-scrim-side: linear-gradient(90deg, rgba(18,35,44,0.85) 0%, rgba(18,35,44,0.35) 60%, rgba(18,35,44,0) 100%); } /* ---------------- BASE ELEMENTS ---------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-regular); line-height: var(--leading-normal); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-heading); color: var(--text-strong); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); } h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); letter-spacing: var(--tracking-normal); } .ds-display { font-family: var(--font-display-accent); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--text-strong); } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--text-link); text-decoration: none; transition: var(--transition-colors); } a:hover { color: var(--gold-600); } strong { font-weight: var(--fw-bold); color: var(--text-strong); } img { max-width: 100%; display: block; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } ::selection { background: var(--gold-200); color: var(--navy-900); } .ds-eyebrow { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: 0; color: var(--navy-500); } .ds-rule { width: 56px; height: var(--rule-accent); background: var(--gold-400); border: 0; margin: var(--space-4) 0; } .ds-container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } /* ---------------- COMPONENT STATES ---------------- */ .ds-btn { -webkit-tap-highlight-color: transparent; isolation: isolate; } .ds-btn--primary:hover { background: var(--navy-600) !important; border-color: var(--navy-600) !important; box-shadow: var(--shadow-md) !important; transform: translateY(-2px); } .ds-btn--primary:active { background: var(--navy-800) !important; transform: translateY(0); box-shadow: var(--shadow-sm) !important; } .ds-btn--accent:hover { background: var(--gold-500) !important; border-color: var(--gold-500) !important; box-shadow: var(--shadow-md) !important; transform: translateY(-2px); } .ds-btn--accent:active { background: var(--gold-600) !important; transform: translateY(0); box-shadow: var(--shadow-sm) !important; } .ds-btn--secondary:hover { border-color: var(--navy-300) !important; box-shadow: var(--shadow-md) !important; transform: translateY(-2px); } .ds-btn--secondary:active{ transform: translateY(0); box-shadow: var(--shadow-sm) !important; } .ds-btn--ghost:hover { background: var(--navy-50) !important; box-shadow: var(--shadow-sm) !important; } .ds-btn:focus-visible { box-shadow: var(--shadow-focus); outline: none; } .ds-btn--flow { position: relative; } .ds-btn--flow > * { position: relative; z-index: 1; } .ds-btn--flow::before { content: ""; position: absolute; inset: 0; z-index: 0; transform: translateX(-101%); transition: transform var(--duration-slow) var(--ease-out); } .ds-btn--flow:hover::before { transform: translateX(0); } .ds-btn--flow.ds-btn--primary::before { background: var(--navy-600); } .ds-btn--flow.ds-btn--accent::before { background: var(--gold-500); } .ds-btn--flow.ds-btn--secondary::before { background: var(--navy-50); } .ds-btn--flow.ds-btn--ghost::before { background: var(--navy-50); } .ds-btn--flow.ds-btn--primary:hover { background: var(--navy-700) !important; border-color: var(--navy-700) !important; } .ds-btn--flow.ds-btn--accent:hover { background: var(--gold-400) !important; border-color: var(--gold-400) !important; } .ds-btn--flow.ds-btn--secondary:hover { background: var(--surface-card) !important; } .ds-btn--flow.ds-btn--ghost:hover { background: transparent !important; } .ds-btn__arrow { display: inline-flex; align-items: center; } .ds-btn__label { display: inline-flex; transition: transform var(--duration-base) var(--ease-out); } .ds-btn__arrow--in { position: absolute; left: 0.9em; opacity: 0; transform: translateX(-7px); transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-out); } .ds-btn__arrow--out { margin-left: 0.1em; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); } .ds-btn--flow:hover .ds-btn__arrow--in { opacity: 1; transform: translateX(0); } .ds-btn--flow:hover .ds-btn__label { transform: translateX(9px); } .ds-btn--flow:hover .ds-btn__arrow--out { transform: translateX(10px); opacity: 0; } .ds-btn--flow:active { transform: translateY(0); box-shadow: var(--shadow-sm) !important; } @media (prefers-reduced-motion: reduce) { .ds-btn--flow::before { transition: none; } .ds-btn__arrow--in, .ds-btn__label, .ds-btn__arrow--out { transition: none; } } .ds-card--interactive { transition: var(--transition-all); } .ds-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover) !important; border-color: var(--gold-300) !important; } .ds-service:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg) !important; } .ds-service:hover .ds-service__num { color: var(--gold-500) !important; } .ds-clientlogo img { filter: grayscale(1); opacity: 0.55; transition: filter var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard); } .ds-clientlogo:hover img { filter: grayscale(0); opacity: 1; } .ds-input:focus, .ds-textarea:focus, .ds-select:focus { border-color: var(--gold-400) !important; box-shadow: var(--shadow-focus); outline: none; } .ds-input::placeholder, .ds-textarea::placeholder { color: var(--neutral-400); } .ds-checkbox:checked { background: var(--navy-700) !important; border-color: var(--navy-700) !important; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; } .ds-checkbox:focus-visible { box-shadow: var(--shadow-focus); outline: none; } /* ---- Logo marquee ---- */ .ds-marquee { position: relative; overflow: hidden; width: 100%; } .ds-marquee__viewport { display: flex; } .ds-marquee__track { display: flex; flex: 0 0 auto; align-items: center; width: max-content; animation: ds-marquee-scroll var(--ds-marquee-speed, 42s) linear infinite; } .ds-marquee:hover .ds-marquee__track { animation-play-state: paused; } @keyframes ds-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ds-marquee__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 clamp(1.75rem, 4vw, 3.75rem); } @media (prefers-reduced-motion: reduce) { .ds-marquee__track { animation: none; } .ds-marquee__viewport { overflow-x: auto; scrollbar-width: none; } .ds-marquee__viewport::-webkit-scrollbar { display: none; } }