/* ========================================================================== AddressPro landing page — Anchor Software design system. The page markup carries its layout as inline styles, exactly as it came out of the design package. This file supplies the three things inline styles cannot express: 1. the design-system tokens (--navy-900, --shadow-lg, --font-display, ...) 2. :hover / :focus states 3. the off-screen honeypot and a couple of small-screen corrections Anything in section 2 needs !important. An inline style beats a stylesheet rule no matter how specific the selector, so a plain `.btn:hover {}` would silently lose to the element's own `style="background:#3F2C86"`. ========================================================================== */ /* ========================================================================== 1. Design tokens — Anchor Software design system ========================================================================== */ /* --- Color System --- Light, airy, precise. White/off-white base; navy for text; blue primary accent; gold sparingly. */ :root { /* Brand palette (base values) */ --navy-900: #00050E; /* deepest — primary headings, logo mark */ --navy-800: #0B1220; --navy-700: #1A1F2B; /* softened charcoal — body headings */ --navy-600: #2C3444; --navy-500: #47506380; --blue-700: #1E6FA8; /* pressed / hover-dark */ --blue-600: #2A87C8; --blue-500: #349AD8; /* PRIMARY accent */ --blue-400: #5FB0E1; --blue-300: #A7D3EF; --blue-100: #E4F1FB; /* tint surface */ --blue-50: #F2F8FD; --gold-600: #D4AC0C; --gold-500: #F4C91A; /* highlight / badge accent — use sparingly */ --gold-200: #FBECA6; --gold-100: #FDF6D6; /* Neutrals */ --white: #FFFFFF; --gray-50: #F7F8FA; /* app / page base off-white */ --gray-100: #F0F2F5; /* raised light surface */ --gray-200: #E6E9EF; /* hairline dividers, subtle borders */ --gray-300: #D4D9E2; --gray-400: #B4BCCA; --gray-500: #8892A4; /* muted text, placeholders */ --gray-600: #5C6678; /* secondary text */ --gray-700: #3A4252; /* Semantic status */ --success-500: #2E9E6B; --success-100: #E4F5EC; --warning-500: #E0A21A; --warning-100: #FDF3DA; --danger-500: #D6474A; --danger-100: #FBE7E7; --info-500: #349AD8; --info-100: #E4F1FB; /* Semantic aliases */ --bg-page: var(--gray-50); --bg-page-alt: var(--white); --surface-card: var(--white); --surface-raised: var(--white); --surface-sunken: var(--gray-100); --surface-tint: var(--blue-50); --text-strong: var(--navy-900); --text-heading: var(--navy-700); --text-body: var(--navy-600); --text-muted: var(--gray-600); --text-subtle: var(--gray-500); --text-on-accent: var(--white); --text-link: var(--blue-600); --text-link-hover:var(--blue-700); --accent: var(--blue-500); --accent-hover: var(--blue-600); --accent-active: var(--blue-700); --accent-soft: var(--blue-100); --highlight: var(--gold-500); --border-subtle: var(--gray-200); --border-default: var(--gray-300); --border-strong: var(--gray-400); --border-focus: var(--blue-500); --divider: var(--gray-200); } /* --- Typography --- Sora = display/headings, Manrope = body/UI, JetBrains Mono = data values. The webfonts themselves are loaded by a in index.php's rather than an @import here, so the browser can start fetching them without first parsing this file. Every stack falls back to a system font, so the page still reads correctly on a host with no outbound internet access. */ :root { --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif; --font-sans: 'Manrope', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale (rem, 16px base) */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.125rem; /* 18 */ --text-lg: 1.375rem; /* 22 */ --text-xl: 1.75rem; /* 28 */ --text-2xl: 2.25rem; /* 36 */ --text-3xl: 3rem; /* 48 */ --text-4xl: 3.75rem; /* 60 */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-extra: 800; /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Letter spacing */ --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-caps: 0.12em; } /* --- Spacing (4px base grid) --- */ :root { --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-12: 6rem; /* 96 */ --container-sm: 640px; --container-md: 960px; --container-lg: 1200px; --container-xl: 1360px; } /* --- Effects: radii, shadows, borders, motion --- Depth comes from soft shadows on light surfaces, never dark boxes. */ :root { /* Corner radii — rounded, friendly, crisp */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; /* Soft, layered shadows (cool navy-tinted, low opacity) */ --shadow-xs: 0 1px 2px rgba(16, 27, 51, 0.06); --shadow-sm: 0 1px 3px rgba(16, 27, 51, 0.08), 0 1px 2px rgba(16, 27, 51, 0.04); --shadow-md: 0 4px 12px rgba(16, 27, 51, 0.08), 0 2px 4px rgba(16, 27, 51, 0.05); --shadow-lg: 0 12px 28px rgba(16, 27, 51, 0.10), 0 4px 8px rgba(16, 27, 51, 0.05); --shadow-xl: 0 24px 56px rgba(16, 27, 51, 0.14), 0 8px 16px rgba(16, 27, 51, 0.06); --shadow-focus: 0 0 0 3px rgba(52, 154, 216, 0.28); /* Borders */ --border-width: 1px; /* Motion */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; } /* ========================================================================== 2. Page base — carried over verbatim from the design package ========================================================================== */ html { scroll-behavior: smooth; } body { margin: 0; background: var(--white); color: var(--text-body); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } a { color: #3F2C86; text-decoration: none; } a:hover { color: #349AD8; } summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } @keyframes apFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ========================================================================== 3. Interaction states The design package expressed these as style-hover="" / style-focus="" attributes. They become real pseudo-class rules here, and every one needs !important to outrank the element's own inline style attribute. ========================================================================== */ /* Solid purple buttons: nav CTA, hero CTA, overview CTA, form submit. */ .ap-btn-primary:hover, .ap-btn-primary:focus-visible { background: #31226b !important; color: #fff !important; } /* The larger CTAs also lift a pixel on hover. */ .ap-btn-lift:hover, .ap-btn-lift:focus-visible { transform: translateY(-1px) !important; } /* "Explore features" — the outlined secondary button in the hero. */ .ap-btn-secondary:hover, .ap-btn-secondary:focus-visible { background: var(--gray-50) !important; } /* Feature cards rise and deepen their shadow on hover. */ .ap-card-hover:hover { box-shadow: var(--shadow-lg) !important; transform: translateY(-3px) !important; } /* Demo form inputs take a purple ring on focus. */ .ap-input:focus { border-color: #3F2C86 !important; box-shadow: 0 0 0 3px rgba(63, 44, 134, 0.18) !important; } /* Keyboard focus needs to be visible on every interactive element, including the ones whose hover state is purely decorative. */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #349AD8; outline-offset: 3px; border-radius: 4px; } /* ========================================================================== 4. Form plumbing ========================================================================== */ /* The honeypot. Positioned off-screen rather than display:none on purpose — plenty of bots know to skip display:none fields, far fewer bother to check whether a field is merely parked outside the viewport. */ .ap-honeypot { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; } /* A field that failed server-side validation, so the visitor can see which box to fix without reading the message twice. */ .ap-input.ap-input-error { border-color: var(--danger-500) !important; } /* Disabled state for the submit button while a request is in flight. */ .ap-submit:disabled { opacity: 0.7; cursor: default; } .ap-submit:disabled:hover { transform: none !important; background: #3F2C86 !important; } /* ========================================================================== 5. Small-screen corrections The layout is fluid by design (clamp + flex-wrap), so this is only about the two places where a fixed value would otherwise overflow. ========================================================================== */ @media (max-width: 640px) { /* The hero stat card hangs off the left edge of its image. At phone widths there is no gutter left for it to hang into. */ .ap-stat-card { left: 0 !important; right: 0 !important; bottom: -16px !important; } /* Which means the hero image needs room underneath it for the card. */ .ap-hero-media { margin-bottom: 48px; } } /* The design sizes the hero and demo columns with min-width:300px, which plus the 20px side padding needs 340px of viewport. Below that the columns are clipped by the wrapper's overflow-x:hidden and the text becomes unreachable. This only engages under 340px — every width the design lays out correctly is left exactly as authored. */ @media (max-width: 340px) { [style*="min-width:300px"], [style*="min-width:290px"] { min-width: 0 !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }