/* ============================================================ FarmakoMed — Global Styles ============================================================ */ /* Font loading moved to a non-blocking in each page's (see fonts preconnect/swap snippet) to avoid a render-blocking @import in the critical CSS path. */ /* ── CSS Variables ──────────────────────────────────────── */ :root { --color-bg: #F9FAFB; --color-bg-alt: #F1F5F9; --color-surface: #FFFFFF; --color-primary: #2563EB; --color-primary-dark: #1D4ED8; --color-primary-soft: #DBEAFE; --color-accent: #22C55E; --color-accent-soft: #DCFCE7; --color-text: #0F172A; --color-text-secondary: #475569; --color-text-muted: #64748B; --color-border: #E2E8F0; --color-border-strong: #CBD5E1; --font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14); --transition: 200ms ease; --transition-slow: 350ms ease; --nav-height: 68px; --container-max: 1120px; --container-pad: clamp(1rem, 5vw, 2rem); } /* ── Reset ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-family); font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } img, svg { display: block; max-width: 100%; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; } /* ── Typography ─────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; color: var(--color-text); font-weight: 700; } h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); letter-spacing: -0.015em; } h3 { font-size: clamp(1.1rem, 2.5vw, 1.375rem); letter-spacing: -0.01em; } h4 { font-size: 1.125rem; font-weight: 600; } p { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } .text-primary { color: var(--color-primary); } .text-accent { color: var(--color-accent); } .text-center { text-align: center; } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* ── Layout ─────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .section { padding: clamp(3rem, 8vw, 5rem) 0; } .section-sm { padding: clamp(2rem, 5vw, 3rem) 0; } .section-alt { background: var(--color-bg-alt); } .section-header { text-align: center; max-width: 640px; margin: 0 auto clamp(2rem, 5vw, 3.5rem); } .section-header p { margin-top: 0.75rem; font-size: 1.0625rem; } .section-label { display: inline-block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.75rem; } /* Grid helpers */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } } /* Flex helpers */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .gap-sm { gap: 0.5rem; } .gap-md { gap: 1rem; } .gap-lg { gap: 1.5rem; } /* Spacing */ .mt-sm { margin-top: 0.5rem; } .mt-md { margin-top: 1rem; } .mt-lg { margin-top: 1.5rem; } .mt-xl { margin-top: 2rem; } .mt-2xl { margin-top: 3rem; } .mb-sm { margin-bottom: 0.5rem; } .mb-md { margin-bottom: 1rem; } .mb-lg { margin-bottom: 1.5rem; } .mb-xl { margin-bottom: 2rem; } /* ── Buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6875rem 1.375rem; border-radius: var(--radius-md); font-size: 0.9375rem; font-weight: 600; line-height: 1; cursor: pointer; border: 2px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); white-space: nowrap; text-decoration: none; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); } .btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); } .btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); } .btn-accent { background: #15803D; color: #fff; border-color: #15803D; } .btn-accent:hover { background: #166534; border-color: #166534; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35); } .btn-lg { padding: 0.875rem 1.875rem; font-size: 1rem; border-radius: var(--radius-lg); } .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; } /* ── Badges / Tags ──────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 500; } .badge-primary { background: var(--color-primary-soft); color: var(--color-primary); } .badge-accent { background: var(--color-accent-soft); color: #166534; } .badge-gray { background: var(--color-bg-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border); } .badge-soon { background: #FEF3C7; color: #92400E; } /* ── Cards ───────────────────────────────────────────────── */ .card { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); padding: 1.5rem; transition: box-shadow var(--transition), transform var(--transition); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* ── Icon Box ────────────────────────────────────────────── */ .icon-box { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.375rem; flex-shrink: 0; color: var(--color-primary); } .icon-box svg { display: block; } .icon-box-primary { background: var(--color-primary-soft); } .icon-box-accent { background: var(--color-accent-soft); } .icon-box-gray { background: var(--color-bg-alt); } /* ── Check list ──────────────────────────────────────────── */ .check-list { display: flex; flex-direction: column; gap: 0.625rem; } .check-list li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; color: var(--color-text-secondary); } .check-list li::before { content: ''; width: 20px; height: 20px; min-width: 20px; background: var(--color-accent-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3E%3Cpath fill-rule='evenodd' d='M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-size: 13px; background-repeat: no-repeat; background-position: center; margin-top: 1px; } /* ── Page hero ──────────────────────────────────────────── */ .page-hero { background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-accent-soft) 100%); padding: clamp(3rem, 8vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem); text-align: center; } .page-hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); } .page-hero p { margin-top: 1rem; font-size: 1.0625rem; max-width: 600px; margin-left: auto; margin-right: auto; } /* ── Divider ─────────────────────────────────────────────── */ .divider { height: 1px; background: var(--color-border); margin: 0; } /* ── Visually hidden (accessibility) ────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Skip link ───────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: 0.5rem 1rem; background: var(--color-primary); color: #fff; border-radius: var(--radius-sm); font-size: 0.875rem; transition: top 0.15s; } .skip-link:focus { top: 0.5rem; } /* ── Gradient text ───────────────────────────────────────── */ .gradient-text { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Announce bar ────────────────────────────────────────── */ .announce-bar { background: linear-gradient(90deg, var(--color-primary) 0%, #1e40af 100%); color: #fff; text-align: center; font-size: 0.875rem; padding: 0.5rem 1rem; font-weight: 500; } .announce-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .announce-bar a:hover { text-decoration: none; } /* ── Main content flex grow ─────────────────────────────── */ main { flex: 1; } /* ══════════════════════════════════════════════════════════ APOTHECARY STYLE SYSTEM Playfair Display for display headings · understated hero · ruled section labels · left-border card hover accent ══════════════════════════════════════════════════════════ */ /* ── Display headings: Playfair Display ─────────────────── */ h1, .page-hero h1, .home-hero-content h1, .section-header h2, .section-header h3 { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 700; } /* ── Page hero: replace gradient with clean white + border ─ */ .page-hero { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem); } .page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.025em; } /* ── Home hero: remove gradient, clean white ─────────────── */ .home-hero { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } /* ── Section label: hairline rule prefix ─────────────────── */ .section-label { display: inline-flex; align-items: center; gap: 0.625rem; } .section-label::before { content: ''; display: block; width: 20px; height: 2px; background: var(--color-primary); border-radius: 1px; flex-shrink: 0; } /* ── Cards: left-border accent on hover ─────────────────── */ .card, .feature-card, .privacy-principle, .timeline-item, .plan-card, .download-card, .faq-item { border-left-width: 3px; border-left-style: solid; border-left-color: transparent; transition: border-left-color var(--transition), box-shadow var(--transition), transform var(--transition); } .card:hover, .feature-card:hover, .privacy-principle:hover, .timeline-item:hover, .download-card:hover { border-left-color: var(--color-primary); } .plan-card:not(.featured):hover { border-left-color: var(--color-primary); } .plan-card.featured { border-left-color: var(--color-primary); } .faq-item.open { border-left-color: var(--color-primary); } /* ── Feature category labels: serif + left rule ─────────── */ .feature-category-label { font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--color-text); border-bottom: none; border-left: 3px solid var(--color-primary); padding-left: 0.75rem; padding-bottom: 0; margin-bottom: 1rem; } /* ── Platform icon: size SVG correctly ───────────────────── */ .platform-icon { font-size: 3rem; line-height: 1; color: var(--color-primary); display: flex; align-items: center; justify-content: center; } .platform-icon svg { width: 48px; height: 48px; display: block; } /* ── Announce bar: solid, no gradient ───────────────────── */ .announce-bar { background: var(--color-primary); } /* ── plan-card.featured: reconcile border-width with apothecary ── */ .plan-card.featured { border: 2px solid var(--color-primary); border-left-width: 3px; } /* ══════════════════════════════════════════════════════════ BACKGROUND — Option 2 + 1 layered Depth gradient (base) + dot grid (texture) + hero glow ══════════════════════════════════════════════════════════ */ body { /* Layer 1 (top): dot grid at 3% opacity, 22px pitch */ background-image: radial-gradient(circle, rgba(37,99,235,0.035) 1px, transparent 1px), /* Layer 2: hero blue glow, top-centre */ radial-gradient(ellipse 75% 45% at 50% 0%, rgba(37,99,235,0.055) 0%, transparent 60%), /* Layer 3: accent green warmth, bottom */ radial-gradient(ellipse 70% 35% at 60% 100%, rgba(34,197,94,0.04) 0%, transparent 55%), /* Layer 4: depth gradient base */ linear-gradient(180deg, #EDF3FF 0%, #F4F7FB 15%, #F9FAFB 40%, #F9FAFB 68%, #F2FCF5 100% ); background-size: 22px 22px, 100% 100%, 100% 100%, 100% 100%; background-attachment: local, fixed, fixed, fixed; } /* Nav: frosted glass so dots/gradient show through on scroll */ .site-nav { background: rgba(244,247,251,0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Home hero: transparent so body gradient reads through */ .home-hero { background: transparent; } /* Page heroes on inner pages: transparent, keep border */ .page-hero { background: transparent; } /* Section-alt: semi-transparent so gradient still bleeds through */ .section-alt { background: rgba(241,245,249,0.65); } /* Cards lift off the textured background cleanly */ .card, .feature-card, .privacy-principle, .plan-card, .download-card, .faq-item, .timeline-item, .interest-form, .full-compare { background: rgba(255,255,255,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Solid white on hover so content is fully readable */ .card:hover, .feature-card:hover, .privacy-principle:hover, .plan-card:hover, .download-card:hover { background: rgba(255,255,255,0.98); } /* Trust bar and footer stay fully opaque dark */ .trust-bar, .site-footer { background: #0F172A; }