/* --------------------------------------------------------------------- AIOSEO Design System - Foundations Tokens captured from aioseo.com (marketing) and the Account portal. Source files: aioseo-account-demo/src/assets/main.css and aioseo-ai-grader-poc/src/app/globals.css --------------------------------------------------------------------- */ @font-face { font-family: "Proxima Nova"; font-style: normal; font-weight: 300; font-display: fallback; src: url("./fonts/ProximaNova-Light.woff2") format("woff2"); } @font-face { font-family: "Proxima Nova"; font-style: normal; font-weight: 400; font-display: fallback; src: url("./fonts/ProximaNova-Regular.woff2") format("woff2"); } @font-face { font-family: "Proxima Nova"; font-style: normal; font-weight: 600; font-display: fallback; src: url("./fonts/ProximaNova-Semibold.woff2") format("woff2"); } @font-face { font-family: "Proxima Nova"; font-style: normal; font-weight: 700; font-display: fallback; src: url("./fonts/ProximaNova-Bold.woff2") format("woff2"); } :root { /* -- BRAND BLUE (primary action / link / focus) ------------------- */ --color-brand-blue: #005AE0; --color-brand-blue-darker: #004F9D; --color-brand-blue-lighter: #1A82EA; --color-brand-blue-50: #80ACF0; --color-brand-blue-25: #BFD6F7; --color-brand-blue-10: #E6EEFC; --color-brand-blue-5: #F2F7FD; /* -- BRAND GREEN (success, primary CTA "Get AIOSEO") ------------- */ --color-brand-green: #00AA63; --color-brand-green-darker: #15955F; --color-brand-green-lighter: #07C575; --color-brand-green-pale: #97D5C2; --color-brand-green-bg: #DAF1EA; --color-brand-green-5: #E6F7EF; /* -- INK / NAVY NEUTRAL SCALE ------------------------------------ */ --color-ink: #141B38; /* brand-navy - body text, headlines */ --color-ink-80: #2C324C; --color-ink-60: #434960; /* brand-navy-60 - secondary text */ --color-ink-40: #8C8F9A; /* brand-navy-40 - tertiary text */ --color-ink-20: #D0D1D7; /* input border */ --color-ink-15: #DCDDE1; --color-ink-10: #E8E8EB; --color-ink-5: #F3F4F5; --color-ink-3: #F9F9FA; /* Aliases used in the account portal */ --color-brand-navy: #141B38; --color-brand-navy-60: #434960; --color-brand-navy-40: #8C8F9A; --color-text-primary: #181D27; --color-text-secondary: #434960; --color-text-muted: #717680; --color-text-light: #8C8F9A; /* -- STATUS / ACCENTS ------------------------------------------- */ --color-brand-red: #DF2A4A; --color-brand-red-darker: #AB2039; --color-brand-orange: #F18200; --color-brand-orange-darker: #D4790D; --color-brand-orange-bg: #FFE8CC; --color-brand-amber: #F18200; --color-brand-highlight: #FFF280; --color-brand-highlight-pale:#FFF9CF; /* -- SURFACES --------------------------------------------------- */ --color-bg-primary: #FFFFFF; --color-bg-light: #F2F7FD; --color-bg-info: #E6EEFC; --color-bg-addons: #F8FAFE; --color-bg-upgrade: #EAF1FC; --color-border: #E6EEFC; --color-border-input: #D0D1D7; --color-border-upgrade:#D5E4FF; /* -- TYPOGRAPHY ------------------------------------------------- */ --font-heading: "Proxima Nova", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Proxima Nova", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Marketing scale (aioseo.com) */ --text-h0: 52px; --text-h0-lh: 1.05; --text-h0-ls: -0.015em; --text-h1: 42px; --text-h1-lh: 1.10; --text-h1-ls: -0.010em; --text-h2: 36px; --text-h2-lh: 1.15; --text-h3: 23px; --text-h3-lh: 1.30; --text-h4: 20px; --text-h4-lh: 1.35; /* Account-portal scale */ --text-display-lg: 48px; --text-display-lg-lh: 60px; --text-display-sm: 30px; --text-display-sm-lh: 38px; --text-section: 32px; --text-section-lh: 40px; --text-xl: 20px; --text-xl-lh: 30px; --text-body: 15px; --text-body-lh: 22.5px; --text-credits: 24px; /* -- RADII ------------------------------------------------------ */ --radius-control: 5px; /* buttons + inputs (tight) */ --radius-card: 8px; /* small cards (marketing) */ --radius-card-sm: 5px; /* card radius used by the portal */ --radius-card-lg: 12px; /* hero / banner cards */ --radius-pill: 9999px; /* -- SHADOWS ---------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(10, 13, 18, 0.05); --shadow-soft: 0 5px 10px rgba(0, 90, 224, 0.06); --shadow-card: 0 5px 10px rgba(0, 90, 224, 0.06); --shadow-card-marketing: 0 2px 8px rgba(20, 27, 56, 0.06), 0 24px 48px -16px rgba(20, 27, 56, 0.08); --shadow-deep: 0 10px 30px rgba(20, 27, 56, 0.10); --shadow-lift-green: 0 10px 24px -8px rgba(0, 170, 99, 0.45); --shadow-lift-blue: 0 10px 24px -8px rgba(0, 90, 224, 0.45); /* Skeuomorphic inset (icon boxes, addon tiles) */ --shadow-skeuomorphic: 0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05); /* -- EASINGS ---------------------------------------------------- */ --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* -- SUB-BRAND: SEOBOOST ---------------------------------------- */ /* Sister product. Used when designing SEOBoost surfaces. */ /* See: assets/sub-brands/seoboost/README.md */ --sb-navy: #043282; /* deep navy, primary brand color */ --sb-blue: #005AE0; /* mid blue, wordmark + mark */ --sb-blue-bright: #1A82EA; /* bright accent + CTA color */ --sb-navy-10: #E6EBF3; /* soft navy wash for hero bg */ --sb-blue-10: #E6EEFC; --sb-blue-5: #F2F7FD; /* -- LAYOUT ----------------------------------------------------- */ --container-content: 950px; --container-wide: 1110px; --container-marketing: 1200px; } /* --- SEMANTIC ELEMENT STYLES ------------------------------------- */ html, body { background: #FFFFFF; color: var(--color-ink); font-family: var(--font-body); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-ink); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; margin: 0; } h1 { font-size: var(--text-h1); line-height: var(--text-h1-lh); letter-spacing: var(--text-h1-ls); } h2 { font-size: var(--text-h2); line-height: var(--text-h2-lh); } h3 { font-size: var(--text-h3); line-height: var(--text-h3-lh); } h4 { font-size: var(--text-h4); line-height: var(--text-h4-lh); } p { margin: 0; } a { color: var(--color-brand-blue); text-decoration: none; transition: opacity 0.2s; } a:hover { opacity: 0.85; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } /* Focus ring (brand blue) */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--color-brand-blue); outline-offset: 2px; border-radius: 2px; }