/* ================================================================ AICA — Production Stylesheet File: aica.css Purpose: Single canonical stylesheet for the aica.in marketing site (Home + Patient + Clinic + Pharmacist + any future pages). Version: 1.0 Deployment: link this file in every page's as Sections in this file: §01 Font imports + CSS reset §02 Design tokens (colours, radii, shadows, typography) §03 Base typography + a11y focus rings §04 Layout scaffolding + max-width wrapper §05 Top navigation (sticky, blurred) §06 Hero section + phone mockup §07 Section defaults (plain / alt / dark) §08 Buttons §09 Compare block (before / after) §10 Feature grid §11 Journey strip §12 Stats band §13 Pull quote §14 CTA bar §15 Footer §16 Utility classes §17 Reduced-motion + print §18 Legal — DPDP / cookie banner shell ================================================================ */ /* ================================================================ §01 Font imports + CSS reset ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,900&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } img, picture, svg, video { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } /* ================================================================ §02 Design tokens ================================================================ */ :root { /* --- Surfaces --- */ --bg-page: #FBFCFD; --bg-soft: #F2F5FA; --bg-deep: #E5EBF2; --surface: #FFFFFF; --surface-alt: #F6F8FC; /* --- Brand navy scale --- */ --primary: #1B4F8C; --primary-dark: #0F3766; --primary-soft: #E2EBF6; --primary-tint: #C3D6EE; --primary-grad: linear-gradient(135deg, #1B4F8C 0%, #2E6FAE 50%, #3E8FBF 100%); --hero-grad: linear-gradient(140deg, #0E2238 0%, #1B4F8C 55%, #2E6FAE 100%); /* --- Accents --- */ --accent: #3E8FBF; --accent-soft: #DCEEF7; --success: #157C5C; --success-soft: #DAF0E5; --warning: #B86F00; --warning-soft: #FCEFD3; --critical: #BC2E2E; --critical-soft: #F9DFDF; /* --- Text --- */ --text-1: #0E2238; --text-2: #5A6B85; --text-3: #8B98AE; --text-4: #B5BFCF; --text-invert: #FFFFFF; /* --- Borders --- */ --line: rgba(14, 34, 56, 0.08); --line-strong: rgba(14, 34, 56, 0.14); /* --- Radii --- */ --r-xs: 10px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* --- Shadows --- */ --shadow-card: 0 1px 2px rgba(14, 34, 56, 0.04), 0 4px 18px rgba(14, 34, 56, 0.05); --shadow-card-hover: 0 8px 22px rgba(14, 34, 56, 0.10), 0 24px 50px rgba(14, 34, 56, 0.10); --shadow-fab: 0 4px 14px rgba(27, 79, 140, 0.28), 0 16px 40px rgba(27, 79, 140, 0.18); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* --- Typography stacks --- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace; --font-serif: 'Fraunces', Georgia, serif; /* --- Layout constants --- */ --wrap-max: 1280px; --wrap-pad: 28px; --nav-h: 64px; --focus-ring: 0 0 0 3px rgba(27, 79, 140, 0.35); } /* ================================================================ §03 Base typography + a11y focus rings ================================================================ */ html, body { font-family: var(--font-sans); color: var(--text-1); background: var(--bg-page); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01', 'cv11'; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; } /* Skip-to-content link for keyboard users (WCAG 2.1) */ .skip-link { position: absolute; top: -60px; left: 12px; background: var(--primary); color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 200; transition: top 0.2s ease; font-size: 14px; font-weight: 600; } .skip-link:focus { top: 12px; } /* ================================================================ §04 Layout scaffolding ================================================================ */ .wrap { max-width: var(--wrap-max); margin: 0 auto; padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); } /* ================================================================ §05 Top navigation ================================================================ */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(251, 252, 253, 0.78); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); } .nav-wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 32px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.4px; font-size: 12px; text-transform: uppercase; color: var(--primary-dark); } .brand .brand-dot { width: 28px; height: 28px; border-radius: 8px; background: var(--primary-grad); display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 2px 6px rgba(27, 79, 140, 0.3); } .brand .brand-name { font-size: 14px; font-weight: 800; color: var(--text-1); letter-spacing: -0.2px; text-transform: none; } .nav-links { display: flex; gap: 4px; margin-left: auto; } .nav-links a { padding: 8px 14px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: background 0.15s ease, color 0.15s ease; } .nav-links a:hover, .nav-links a.active { background: var(--primary-soft); color: var(--primary-dark); } .nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: var(--primary-grad); color: #fff; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; box-shadow: 0 2px 8px rgba(27, 79, 140, 0.22); transition: filter 0.15s ease, transform 0.12s ease; } .nav-cta:hover { filter: brightness(1.05); transform: translateY(-1px); } /* Mobile nav toggle (hamburger — hidden by default; JS toggles .nav-open) */ .nav-toggle { display: none; margin-left: auto; padding: 8px; border-radius: 8px; color: var(--text-1); } @media (max-width: 780px) { .nav-links, .nav-cta { display: none; } .nav-toggle { display: inline-flex; } .nav.nav-open .nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: rgba(251, 252, 253, 0.98); padding: 12px 28px 20px; gap: 4px; border-bottom: 1px solid var(--line); } .nav.nav-open .nav-cta { display: inline-flex; margin: 12px 28px 0; } } /* ================================================================ §06 Hero section + phone mockup ================================================================ */ .hero { padding: 80px 28px 60px; max-width: var(--wrap-max); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; } @media (max-width: 940px) { .hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 22px 40px; } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--primary-soft); color: var(--primary-dark); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 22px; } .eyebrow .eb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); } .hero h1 { font-family: var(--font-serif); font-size: 64px; font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; color: var(--text-1); margin-bottom: 22px; } .hero h1 em { font-style: italic; font-weight: 500; color: var(--primary-dark); background: linear-gradient(135deg, #2E6FAE, #3E8FBF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @media (max-width: 940px) { .hero h1 { font-size: 44px; } } @media (max-width: 480px) { .hero h1 { font-size: 36px; } } .hero .lead { font-size: 19px; color: var(--text-2); line-height: 1.55; max-width: 520px; margin-bottom: 32px; } .hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; } /* Phone-mockup iframe holder (used to embed the actual app UI) */ .phone-mock { position: relative; width: 408px; height: 862px; max-width: 100%; margin: 0 auto; } .phone-mock::before { content: ''; position: absolute; inset: 0; border-radius: 56px; background: #0E2238; box-shadow: var(--shadow-card-hover), 0 40px 90px rgba(14, 34, 56, 0.18); } .phone-mock iframe { position: absolute; top: 9px; left: 9px; right: 9px; bottom: 9px; width: calc(100% - 18px); height: calc(100% - 18px); border: none; border-radius: 48px; background: var(--bg-page); } .phone-mock-tag { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--line); padding: 6px 14px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-2); box-shadow: var(--shadow-card); white-space: nowrap; } @media (max-width: 940px) { .phone-mock { transform: scale(0.85); transform-origin: top center; margin-bottom: -120px; } } /* ================================================================ §07 Section defaults ================================================================ */ .section { max-width: var(--wrap-max); margin: 0 auto; padding: 80px 28px; } .section h2 { font-family: var(--font-serif); font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-1); margin-bottom: 14px; } @media (max-width: 640px) { .section h2 { font-size: 32px; } .section { padding: 56px 22px; } } .section .sub { font-size: 17px; color: var(--text-2); max-width: 660px; line-height: 1.6; margin-bottom: 40px; } .section-tag { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--primary); margin-bottom: 14px; display: inline-block; } .section.alt { background: var(--bg-soft); max-width: none; padding-left: 28px; padding-right: 28px; } .section.alt > .inner { max-width: var(--wrap-max); margin: 0 auto; } .section.dark { background: var(--hero-grad); color: #fff; max-width: none; padding-left: 28px; padding-right: 28px; } .section.dark > .inner { max-width: var(--wrap-max); margin: 0 auto; } .section.dark h2 { color: #fff; } .section.dark .sub { color: rgba(255, 255, 255, 0.78); } .section.dark .section-tag { color: #85B7EB; } /* ================================================================ §08 Buttons ================================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 700; letter-spacing: -0.1px; transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.15s ease, background 0.15s ease; cursor: pointer; border: none; font-family: inherit; } .btn-primary { background: var(--primary-grad); color: #fff; box-shadow: var(--shadow-fab); } .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); } .btn-ghost { background: var(--surface); color: var(--text-1); border: 1px solid var(--line-strong); } .btn-ghost:hover { background: var(--surface-alt); border-color: var(--primary-tint); } .btn-sm { padding: 10px 16px; font-size: 13px; } .btn-lg { padding: 16px 26px; font-size: 15.5px; } /* ================================================================ §09 Compare block (before / after) ================================================================ */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 860px) { .compare { grid-template-columns: 1fr; } } .compare-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px; box-shadow: var(--shadow-card); } .compare-col.before { border-color: var(--critical-soft); } .compare-col.after { background: linear-gradient(160deg, #F2F5FA, #FFFFFF); border-color: var(--primary-tint); } .compare-col h3 { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; font-family: var(--font-mono); } .compare-col.before h3 { color: var(--critical); } .compare-col.after h3 { color: var(--primary); } .compare-col h4 { font-family: var(--font-serif); font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; margin-bottom: 22px; } .pain-list { list-style: none; display: flex; flex-direction: column; gap: 14px; } .pain-list li { display: flex; gap: 12px; font-size: 15px; color: var(--text-2); line-height: 1.5; } .pain-list .x { width: 22px; height: 22px; border-radius: 50%; background: var(--critical-soft); color: var(--critical); display: grid; place-items: center; flex-shrink: 0; font-weight: 800; font-size: 14px; } .pain-list .check { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; } .pain-list strong { color: var(--text-1); font-weight: 700; } /* ================================================================ §10 Feature grid ================================================================ */ .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1000px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 660px) { .feat-grid { grid-template-columns: 1fr; } } .feat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--shadow-card); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--primary-tint); } .feat-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-dark); display: grid; place-items: center; margin-bottom: 18px; } .feat-icon.warning { background: var(--warning-soft); color: var(--warning); } .feat-icon.success { background: var(--success-soft); color: var(--success); } .feat-icon.accent { background: var(--accent-soft); color: var(--accent); } .feat-icon.critical { background: var(--critical-soft); color: var(--critical); } .feat h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 8px; line-height: 1.25; } .feat p { font-size: 14.5px; color: var(--text-2); line-height: 1.55; } /* ================================================================ §11 Journey strip ================================================================ */ .journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: stretch; position: relative; } @media (max-width: 1000px) { .journey { grid-template-columns: repeat(2, 1fr); } } .journey-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 18px; box-shadow: var(--shadow-card); position: relative; } .journey-step .js-num { font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--primary); display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); background: var(--primary-soft); margin-bottom: 12px; } .journey-step h4 { font-size: 15px; font-weight: 700; letter-spacing: -0.1px; margin-bottom: 6px; line-height: 1.3; } .journey-step p { font-size: 12.5px; color: var(--text-3); line-height: 1.5; } /* ================================================================ §12 Stats band ================================================================ */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 18px; } } .stat { padding: 24px 20px; border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); } .stat .stat-num { font-family: var(--font-serif); font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #fff; margin-bottom: 8px; } .stat .stat-num em { font-style: normal; font-size: 28px; opacity: 0.8; } .stat .stat-label { font-size: 13.5px; color: rgba(255, 255, 255, 0.78); line-height: 1.5; } /* ================================================================ §13 Pull quote ================================================================ */ .quote { max-width: 880px; margin: 0 auto; text-align: center; padding: 60px 28px; } .quote q { font-family: var(--font-serif); font-size: 32px; font-weight: 500; line-height: 1.35; letter-spacing: -0.4px; color: var(--text-1); display: inline-block; } .quote q::before { content: '\201C'; } .quote q::after { content: '\201D'; } .quote .author { font-size: 13px; font-weight: 700; color: var(--text-3); margin-top: 22px; letter-spacing: 0.4px; text-transform: uppercase; font-family: var(--font-mono); } /* ================================================================ §14 CTA bar ================================================================ */ .cta-bar { background: var(--hero-grad); color: #fff; padding: 60px 28px; } .cta-bar > .inner { max-width: 980px; margin: 0 auto; text-align: center; } .cta-bar h2 { font-family: var(--font-serif); font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.4px; color: #fff; margin-bottom: 14px; } .cta-bar p { font-size: 17px; color: rgba(255, 255, 255, 0.78); max-width: 600px; margin: 0 auto 26px; line-height: 1.55; } .cta-bar .btn-primary { background: #fff; color: var(--primary-dark); } .cta-bar .btn-primary:hover { filter: none; background: #F8FAFD; } .cta-bar .btn-ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.2); } .cta-bar .btn-ghost:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.3); } /* ================================================================ §15 Footer ================================================================ */ .footer { background: #0A1827; color: rgba(255, 255, 255, 0.65); padding: 50px 28px 40px; font-size: 13px; } .footer > .inner { max-width: var(--wrap-max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; justify-content: space-between; } .footer .footer-brand { display: flex; flex-direction: column; gap: 12px; } .footer .footer-brand .brand { color: #fff; } .footer .footer-brand .brand .brand-name { color: #fff; } .footer .footer-brand p { font-size: 12.5px; max-width: 340px; line-height: 1.6; } .footer .footer-links { display: grid; grid-template-columns: repeat(3, auto); gap: 16px 56px; } .footer .footer-links h5 { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; } .footer .footer-links a { display: block; color: rgba(255, 255, 255, 0.7); padding: 4px 0; font-size: 13px; } .footer .footer-links a:hover { color: #fff; } .footer .copy { width: 100%; padding-top: 30px; margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; } /* ================================================================ §16 Utility classes (small, focused) ================================================================ */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mono { font-family: var(--font-mono); } .serif { font-family: var(--font-serif); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; } .mb-5 { margin-bottom: 48px; } .hide-sm { } @media (max-width: 640px) { .hide-sm { display: none !important; } } .only-sm { display: none; } @media (max-width: 640px) { .only-sm { display: initial; } } /* Screen-reader-only content (WCAG) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Colour-coded pills (used inline anywhere) */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; background: var(--primary-soft); color: var(--primary-dark); } .pill.success { background: var(--success-soft); color: var(--success); } .pill.warning { background: var(--warning-soft); color: var(--warning); } .pill.critical { background: var(--critical-soft); color: var(--critical); } .pill.accent { background: var(--accent-soft); color: var(--accent); } /* ================================================================ §17 Reduced-motion + print ================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } @media print { html, body { background: #fff; color: #000; } .nav, .cta-bar, .footer { display: none !important; } .hero, .section { padding: 20px 0; break-inside: avoid; } .phone-mock { display: none; } a[href]:after { content: ' (' attr(href) ')'; font-size: 10px; color: #666; } } /* ================================================================ §18 DPDP / cookie banner shell (Content is populated by JS; styles here so it renders correctly the first time it appears.) ================================================================ */ .cookie { position: fixed; bottom: 20px; left: 20px; right: 20px; max-width: 640px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card-hover); padding: 20px 24px; border-radius: var(--r-lg); z-index: 150; display: none; } .cookie.is-visible { display: block; } .cookie h4 { font-size: 15px; font-weight: 800; margin-bottom: 6px; color: var(--text-1); } .cookie p { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-bottom: 14px; } .cookie .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; } .cookie .cookie-actions .btn { padding: 10px 18px; font-size: 13px; } /* ================================================================ End of aica.css ================================================================ */