/** Shopify CDN: Minification failed Line 148:0 All "@import" rules must come first **/ /* ========================================================================== axiVEND Shared Design System Version: 1.0.0 Targets: axiVEND.com (WordPress) + axiVEND.store (Shopify) Audience: PhD-level researchers, lab managers Last updated: 2025 ========================================================================== TABLE OF CONTENTS ───────────────── 1. Custom Properties (Design Tokens) 2. Google Fonts Import 3. CSS Reset & Base 4. Typography — Base Rules 5. Links 6. Buttons 7. Card Component 8. Header Component 9. Footer Component 10. Utility Classes 11. Responsive Breakpoints ========================================================================== */ /* ========================================================================== 1. CUSTOM PROPERTIES (DESIGN TOKENS) All brand values live here. Reference these variables throughout both platforms. Never hard-code a hex value outside this block. ========================================================================== */ :root { /* ── Brand Colors ──────────────────────────────────────────────────────── */ --navy: #0D2F5E; /* Primary brand; headers, nav, footer backgrounds */ --navy-dark: #081E3F; /* Hover states on navy elements; footer deep bg */ --sky: #1A8FD1; /* Links, secondary CTAs, info highlights */ --sky-hover: #1478B5; /* Hover state for sky-colored links */ --teal: #00B5B8; /* Primary CTA buttons, accent borders, badges */ --teal-hover: #009A9D; /* Hover state for teal buttons */ --white: #FFFFFF; /* Pure white — text on dark, card backgrounds */ --light-bg: #F4F7FB; /* Section backgrounds, alternating rows */ --text: #1C2B3A; /* Primary body text — deep blue-black */ --muted: #5A7184; /* Secondary text, captions, placeholder copy */ --border: #D6E1ED; /* Subtle card and input borders */ --error: #C0392B; /* Validation errors, destructive states */ --success: #1A7A4A; /* Confirmation, positive states */ /* ── Typography ────────────────────────────────────────────────────────── */ --font-heading: 'Lexend', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Type scale — fluid-friendly fixed steps */ --text-xs: 0.75rem; /* 12px — fine print, footnotes */ --text-sm: 0.875rem; /* 14px — captions, labels */ --text-base: 1rem; /* 16px — body copy */ --text-md: 1.125rem; /* 18px — lead/intro paragraphs */ --text-lg: 1.25rem; /* 20px — card headings, nav items */ --text-xl: 1.5rem; /* 24px — h4 */ --text-2xl: 1.875rem; /* 30px — h3 */ --text-3xl: 2.25rem; /* 36px — h2 */ --text-4xl: 3rem; /* 48px — h1, hero titles */ --text-hero: 3.75rem; /* 60px — hero display (desktop) */ /* Line heights */ --leading-tight: 1.2; /* Headings */ --leading-snug: 1.35; /* Subheadings, cards */ --leading-normal: 1.6; /* Body copy */ --leading-loose: 1.75; /* Small text for legibility */ /* ── Spacing Scale ─────────────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ── Layout ────────────────────────────────────────────────────────────── */ --container-max: 1200px; /* Max content width */ --container-wide: 1440px; /* Full-bleed sections cap */ --container-narrow: 760px; /* Long-form article text */ --gutter: var(--space-6); /* Default horizontal page padding */ /* ── Borders & Radii ───────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* Pill shapes */ --border-width: 1px; --border-width-accent: 4px; /* Teal left-border on cards */ /* ── Shadows ───────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(13, 47, 94, 0.06); --shadow-sm: 0 2px 8px rgba(13, 47, 94, 0.08); --shadow-md: 0 4px 16px rgba(13, 47, 94, 0.12); --shadow-lg: 0 8px 32px rgba(13, 47, 94, 0.16); /* ── Motion ────────────────────────────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ── Header/Nav ────────────────────────────────────────────────────────── */ --header-height: 68px; --topbar-height: 36px; --header-total-height: calc(var(--header-height) + var(--topbar-height)); --z-header: 1000; --z-dropdown: 1010; --z-overlay: 900; } /* ========================================================================== 2. GOOGLE FONTS IMPORT Load all three font families from Google Fonts CDN. Place this block in on both platforms — do not rely on @import inside CSS files (degrades performance). WordPress: add to wp_enqueue_scripts or header.php Shopify: add to theme.liquid The @import below is a CSS fallback only — remove it if you use the approach (recommended). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@600;700&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap'); /* ========================================================================== 3. CSS RESET & BASE Minimal reset. Preserves browser accessibility defaults where possible. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* Prevent font-size inflation on mobile */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Smooth scroll for anchor navigation */ scroll-behavior: smooth; /* Account for sticky header when jumping to anchors */ scroll-padding-top: var(--header-total-height); } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--text); background-color: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Remove default list styling (restore in prose contexts if needed) */ ul, ol { list-style: none; } /* Normalize images */ img, video, svg { display: block; max-width: 100%; height: auto; } /* Inherit font for form elements */ input, button, textarea, select { font: inherit; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ========================================================================== 4. TYPOGRAPHY — BASE RULES Headings use Lexend (600/700). Body uses Inter (400/500). Scale is designed for PhD-level technical readers: clear hierarchy, generous leading, no decorative weight. ========================================================================== */ /* ── Heading Base ─────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--navy); /* Prevent orphaned single words on narrow viewports */ text-wrap: balance; } /* ── h1 — Page & Hero Titles ─────────────────────────────────────────────── */ h1 { font-size: var(--text-4xl); /* 48px desktop */ font-weight: var(--weight-bold); letter-spacing: -0.02em; margin-bottom: var(--space-6); } /* ── h2 — Section Headings ───────────────────────────────────────────────── */ h2 { font-size: var(--text-3xl); /* 36px */ font-weight: var(--weight-bold); letter-spacing: -0.015em; margin-bottom: var(--space-5); } /* ── h3 — Sub-section / Card Group Labels ────────────────────────────────── */ h3 { font-size: var(--text-2xl); /* 30px */ font-weight: var(--weight-semibold); letter-spacing: -0.01em; margin-bottom: var(--space-4); } /* ── h4 — Card Headings, Sidebar Titles ─────────────────────────────────── */ h4 { font-size: var(--text-xl); /* 24px */ font-weight: var(--weight-semibold); margin-bottom: var(--space-3); } /* ── h5 — Micro Labels ──────────────────────────────────────────────────── */ h5 { font-size: var(--text-lg); /* 20px */ font-weight: var(--weight-semibold); margin-bottom: var(--space-2); } /* ── h6 — Fine Labels, Table Captions ──────────────────────────────────── */ h6 { font-size: var(--text-base); /* 16px */ font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: var(--space-2); } /* ── Paragraph ──────────────────────────────────────────────────────────── */ p { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); max-width: var(--container-narrow); /* ~65-char measure for readability */ margin-bottom: var(--space-4); } /* Lead paragraph — intro text under section headings */ p.lead { font-size: var(--text-md); /* 18px */ font-weight: var(--weight-medium); color: var(--muted); line-height: var(--leading-snug); } /* ── Lists ──────────────────────────────────────────────────────────────── */ /* Prose lists — re-enable styling for content list contexts */ .prose ul, .prose ol, .entry-content ul, .entry-content ol, .rte ul, /* Shopify RTE (rich text editor) */ .rte ol { list-style: revert; padding-left: var(--space-6); margin-bottom: var(--space-4); } .prose li, .entry-content li, .rte li { font-size: var(--text-base); line-height: var(--leading-normal); margin-bottom: var(--space-2); color: var(--text); } /* ── Monospace / Technical Data ─────────────────────────────────────────── */ /* Used for assay IDs, probe sequences, instrument specs, part numbers */ code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; /* Slightly smaller — mono reads large */ font-weight: var(--weight-regular); } code { background-color: var(--light-bg); color: var(--navy); padding: 0.15em 0.4em; border-radius: var(--radius-sm); border: var(--border-width) solid var(--border); } pre { background-color: var(--navy); color: var(--teal); padding: var(--space-6); border-radius: var(--radius-md); overflow-x: auto; margin-bottom: var(--space-6); line-height: var(--leading-loose); } pre code { background: none; border: none; padding: 0; color: inherit; } /* ── Small & Caption Text ──────────────────────────────────────────────── */ small, .caption { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-loose); } /* Spec labels — for instrument parameter tables */ .spec-label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; } /* ── Blockquote ─────────────────────────────────────────────────────────── */ blockquote { border-left: var(--border-width-accent) solid var(--teal); padding: var(--space-4) var(--space-6); margin: var(--space-8) 0; background-color: var(--light-bg); border-radius: 0 var(--radius-md) var(--radius-md) 0; } blockquote p { font-size: var(--text-md); font-style: italic; color: var(--navy); margin-bottom: var(--space-2); } blockquote cite { font-size: var(--text-sm); color: var(--muted); font-style: normal; font-weight: var(--weight-medium); } /* ========================================================================== 5. LINKS ========================================================================== */ a { color: var(--sky); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--transition-fast); } a:hover { color: var(--sky-hover); text-decoration-thickness: 2px; } a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--radius-sm); text-decoration: none; } /* Inline links within body copy */ .prose a, .entry-content a, .rte a { font-weight: var(--weight-medium); } /* Nav links — override base underline */ nav a { text-decoration: none; color: inherit; } /* ========================================================================== 6. BUTTONS Three variants: primary (teal fill), secondary (navy outline), ghost (white outline for dark backgrounds). Usage: Get Quote View Resources ========================================================================== */ /* ── Button Base ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-heading); /* Lexend gives buttons crisp weight */ font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1; letter-spacing: 0.01em; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); -webkit-user-select: none; user-select: none; } .btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .btn:active { transform: translateY(1px); } /* ── Primary Button — Teal Fill ─────────────────────────────────────────── */ /* Use for primary actions: Get Quote, Request Demo, Order Now */ .btn-primary { background-color: var(--teal); border-color: var(--teal); color: var(--white); } .btn-primary:hover { background-color: var(--teal-hover); border-color: var(--teal-hover); color: var(--white); box-shadow: var(--shadow-md); } /* ── Secondary Button — Navy Outline ────────────────────────────────────── */ /* Use for secondary actions: Learn More, View Datasheet, Compare */ .btn-secondary { background-color: transparent; border-color: var(--navy); color: var(--navy); } .btn-secondary:hover { background-color: var(--navy); color: var(--white); box-shadow: var(--shadow-sm); } /* ── Ghost Button — White Outline (for dark backgrounds) ────────────────── */ /* Use inside navy/teal sections: hero banners, dark footers */ .btn-ghost { background-color: transparent; border-color: rgba(255, 255, 255, 0.7); color: var(--white); } .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.12); border-color: var(--white); color: var(--white); } /* ── Button Sizes ────────────────────────────────────────────────────────── */ .btn-sm { font-size: var(--text-sm); padding: var(--space-2) var(--space-4); } .btn-lg { font-size: var(--text-md); padding: var(--space-4) var(--space-8); border-radius: var(--radius-lg); } /* ── Disabled State ──────────────────────────────────────────────────────── */ .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ========================================================================== 7. CARD COMPONENT Used for: application use-case cards, product category cards, instrument feature blocks. Anatomy: - White background, subtle shadow - Teal left-border accent (--border-width-accent = 4px) - Optional badge/tag - Heading (h4 size) - Body text - CTA link (sky colored) HTML structure:
Genomics

Targeted Gene Expression

Quantify 800 genes simultaneously...

Explore Application →
========================================================================== */ .card { position: relative; display: flex; flex-direction: column; background-color: var(--white); border-radius: var(--radius-lg); border: var(--border-width) solid var(--border); border-left: var(--border-width-accent) solid var(--teal); /* Signature accent */ box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-left-color: var(--teal-hover); } /* ── Card Image (optional, for product category cards) ───────────────────── */ .card-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--border-width) solid var(--border); } /* ── Card Body — primary content area ───────────────────────────────────── */ .card-body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; /* Push CTA to bottom when cards are equal height */ gap: var(--space-3); } /* ── Card Tag / Badge ────────────────────────────────────────────────────── */ .card-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--teal-hover); background-color: rgba(0, 181, 184, 0.08); border: 1px solid rgba(0, 181, 184, 0.25); padding: 0.2em 0.6em; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.08em; align-self: flex-start; } /* ── Card Title ─────────────────────────────────────────────────────────── */ .card-title { font-family: var(--font-heading); font-size: var(--text-xl); /* 24px */ font-weight: var(--weight-semibold); color: var(--navy); line-height: var(--leading-snug); margin: 0; text-wrap: balance; } /* ── Card Text ──────────────────────────────────────────────────────────── */ .card-text { font-size: var(--text-base); color: var(--muted); line-height: var(--leading-normal); margin: 0; max-width: none; /* Override prose max-width inside cards */ flex: 1; /* Expand to fill available space */ } /* ── Card CTA Link ──────────────────────────────────────────────────────── */ .card-cta { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--sky); text-decoration: none; letter-spacing: 0.01em; margin-top: var(--space-2); transition: color var(--transition-fast), gap var(--transition-fast); align-self: flex-start; } .card-cta::after { content: '→'; transition: transform var(--transition-fast); } .card-cta:hover { color: var(--sky-hover); gap: var(--space-2); } .card-cta:hover::after { transform: translateX(3px); } /* ── Card Grid — standard 3-up layout ───────────────────────────────────── */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; } /* ========================================================================== 8. HEADER COMPONENT Structure: ┌──────────────────────────────────────────────────────────────────────┐ │ Top Bar: phone number (left) axiVEND.store link (right) │ --topbar-height: 36px ├──────────────────────────────────────────────────────────────────────┤ │ Logo (left) Nav Links (center) [Get Quote] (right) │ --header-height: 68px └──────────────────────────────────────────────────────────────────────┘ Sticky behavior: header sticks to top on scroll. A thin teal bottom border appears when the page is scrolled (added via JS class .scrolled). HTML structure: ========================================================================== */ /* ── Header Shell ────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; left: 0; right: 0; z-index: var(--z-header); background-color: var(--navy); transition: box-shadow var(--transition-base); } /* Elevated shadow on scroll — add .scrolled via JS on window scroll */ .site-header.scrolled { box-shadow: 0 2px 20px rgba(13, 47, 94, 0.4); } /* ── Top Bar ─────────────────────────────────────────────────────────────── */ .header-topbar { height: var(--topbar-height); background-color: var(--navy-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; } .header-topbar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .topbar-phone, .topbar-store-link { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.75); text-decoration: none; letter-spacing: 0.01em; transition: color var(--transition-fast); } .topbar-phone:hover, .topbar-store-link:hover { color: var(--teal); } .topbar-store-link { font-weight: var(--weight-medium); } /* ── Main Header Row ─────────────────────────────────────────────────────── */ .header-main { height: var(--header-height); display: flex; align-items: center; } .header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-8); width: 100%; } /* ── Logo ────────────────────────────────────────────────────────────────── */ .header-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .header-logo img { height: 36px; width: auto; } /* ── Primary Navigation ──────────────────────────────────────────────────── */ .header-nav { display: flex; justify-content: center; } .header-nav ul { display: flex; align-items: center; gap: var(--space-8); list-style: none; } .header-nav a { font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-semibold); color: rgba(255, 255, 255, 0.85); text-decoration: none; letter-spacing: 0.01em; padding: var(--space-2) 0; position: relative; transition: color var(--transition-fast); } /* Teal underline indicator on hover/active */ .header-nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background-color: var(--teal); transform: scaleX(0); transition: transform var(--transition-base); transform-origin: left; } .header-nav a:hover, .header-nav a[aria-current="page"] { color: var(--white); } .header-nav a:hover::after, .header-nav a[aria-current="page"]::after { transform: scaleX(1); } /* ── CTA Button ──────────────────────────────────────────────────────────── */ .header-cta { flex-shrink: 0; } /* ── Mobile Menu Toggle ──────────────────────────────────────────────────── */ .header-menu-toggle { display: none; /* Hidden on desktop — shown via media query */ flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .header-menu-toggle span { display: block; width: 100%; height: 2px; background-color: var(--white); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-fast); } /* Animated to X when open */ .header-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .header-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .header-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ── Mobile Nav Drawer ───────────────────────────────────────────────────── */ .header-mobile-nav { display: none; flex-direction: column; background-color: var(--navy-dark); padding: var(--space-4) var(--gutter); border-top: 1px solid rgba(255, 255, 255, 0.08); } .header-mobile-nav.is-open { display: flex; } .header-mobile-nav a { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-semibold); color: rgba(255, 255, 255, 0.85); text-decoration: none; padding: var(--space-4) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: color var(--transition-fast); } .header-mobile-nav a:last-child { border-bottom: none; } .header-mobile-nav a:hover { color: var(--teal); } /* ========================================================================== 9. FOOTER COMPONENT Structure: 3-column grid on dark navy background. Col 1 — Logo + tagline Col 2 — Quick links: Services | Instruments | Applications | Resources Col 3 — Contact info + link to axiVEND.store Bottom bar: copyright + legal links. HTML structure: ========================================================================== */ /* ── Footer Shell ────────────────────────────────────────────────────────── */ .site-footer { background-color: var(--navy); color: rgba(255, 255, 255, 0.8); } /* ── Main Footer Area ────────────────────────────────────────────────────── */ .footer-main { padding: var(--space-16) 0 var(--space-12); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* ── 3-Column Grid ───────────────────────────────────────────────────────── */ .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--space-12); align-items: start; } /* ── Footer Column Base ──────────────────────────────────────────────────── */ .footer-col { display: flex; flex-direction: column; gap: var(--space-4); } /* ── Col 1: Brand ────────────────────────────────────────────────────────── */ .footer-logo { display: inline-block; text-decoration: none; margin-bottom: var(--space-2); } .footer-logo img { height: 34px; width: auto; } .footer-tagline { font-size: var(--text-base); color: rgba(255, 255, 255, 0.6); line-height: var(--leading-snug); max-width: 26ch; /* Keep tagline compact — one crisp line */ margin: 0; } /* ── Col 2: Nav ──────────────────────────────────────────────────────────── */ /* Heading shared across Col 2 and Col 3 */ .footer-heading { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--teal); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-2); } .footer-nav ul { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; } .footer-nav a { font-size: var(--text-base); color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color var(--transition-fast); } .footer-nav a:hover { color: var(--teal); } /* ── Col 3: Contact ──────────────────────────────────────────────────────── */ .footer-contact address { font-style: normal; display: flex; flex-direction: column; gap: var(--space-2); } .footer-contact address a { font-size: var(--text-base); color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color var(--transition-fast); } .footer-contact address a:hover { color: var(--teal); } .footer-store-link { margin-top: var(--space-4); align-self: flex-start; } /* ── Footer Bottom Bar ───────────────────────────────────────────────────── */ .footer-bottom { background-color: var(--navy-dark); padding: var(--space-4) 0; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } .footer-legal { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.45); margin: 0; max-width: none; } .footer-bottom nav { display: flex; gap: var(--space-6); } .footer-bottom nav a { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.45); text-decoration: none; transition: color var(--transition-fast); } .footer-bottom nav a:hover { color: rgba(255, 255, 255, 0.8); } /* ========================================================================== 10. UTILITY CLASSES Shared helpers used on both platforms. ========================================================================== */ /* ── Container ───────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } .container-narrow { max-width: var(--container-narrow); } .container-wide { max-width: var(--container-wide); } /* ── Section Padding ─────────────────────────────────────────────────────── */ .section { padding-top: var(--space-20); padding-bottom: var(--space-20); } .section-sm { padding-top: var(--space-12); padding-bottom: var(--space-12); } /* ── Background Variants ─────────────────────────────────────────────────── */ .bg-white { background-color: var(--white); } .bg-light { background-color: var(--light-bg); } .bg-navy { background-color: var(--navy); color: var(--white); } .bg-navy-dark { background-color: var(--navy-dark); color: var(--white); } .bg-teal { background-color: var(--teal); color: var(--white); } /* Text colors */ .text-navy { color: var(--navy); } .text-sky { color: var(--sky); } .text-teal { color: var(--teal); } .text-muted { color: var(--muted); } .text-white { color: var(--white); } /* ── Visually Hidden (Accessibility) ─────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ── Skip Link ───────────────────────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: var(--space-6); z-index: 9999; padding: var(--space-3) var(--space-6); background-color: var(--teal); color: var(--white); font-weight: var(--weight-semibold); text-decoration: none; border-radius: 0 0 var(--radius-md) var(--radius-md); transition: top var(--transition-fast); } .skip-link:focus { top: 0; } /* ── Divider ─────────────────────────────────────────────────────────────── */ hr { border: none; border-top: var(--border-width) solid var(--border); margin: var(--space-8) 0; } /* Teal accent divider */ .divider-teal { border-top-color: var(--teal); border-top-width: 2px; } /* ── Badge / Tag ─────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 0.2em 0.65em; border-radius: var(--radius-full); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .badge-teal { background-color: rgba(0, 181, 184, 0.12); color: var(--teal-hover); border: 1px solid rgba(0, 181, 184, 0.3); } .badge-navy { background-color: rgba(13, 47, 94, 0.08); color: var(--navy); border: 1px solid rgba(13, 47, 94, 0.2); } .badge-sky { background-color: rgba(26, 143, 209, 0.1); color: var(--sky-hover); border: 1px solid rgba(26, 143, 209, 0.25); } /* ========================================================================== 11. RESPONSIVE BREAKPOINTS Three tiers: Mobile: < 768px — single column, stacked layout Tablet: 768px–1024px — two-column, condensed nav Desktop: > 1024px — full three-column, sticky header fully visible Strategy: mobile-first base styles above, overrides here. ========================================================================== */ /* ── TABLET: 768px – 1024px ─────────────────────────────────────────────── */ @media screen and (max-width: 1024px) { /* Typography scale down */ h1 { font-size: var(--text-3xl); } /* 36px */ h2 { font-size: var(--text-2xl); } /* 30px */ h3 { font-size: var(--text-xl); } /* 24px */ /* Nav: collapse center links, show menu toggle */ .header-nav { display: none; } .header-menu-toggle { display: flex; } .header-inner { grid-template-columns: auto 1fr auto; } /* Card grid: 2 columns on tablet */ .card-grid { grid-template-columns: repeat(2, 1fr); } /* Footer: 2-column on tablet (brand spans, then 2 columns) */ .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); } .footer-brand { grid-column: 1 / -1; /* Brand spans full width on tablet */ } /* Section padding reduction */ .section { padding-top: var(--space-16); padding-bottom: var(--space-16); } } /* ── MOBILE: < 768px ────────────────────────────────────────────────────── */ @media screen and (max-width: 767px) { /* Typography further scale down */ h1 { font-size: var(--text-2xl); letter-spacing: -0.01em; } /* 30px */ h2 { font-size: var(--text-xl); } /* 24px */ h3 { font-size: var(--text-lg); } /* 20px */ h4 { font-size: var(--text-md); } /* 18px */ /* Paragraph width: full on mobile */ p { max-width: 100%; } /* Container: tighter gutter on mobile */ :root { --gutter: var(--space-4); /* 16px on mobile vs 24px desktop */ } /* Header: hide topbar phone on smallest screens */ .topbar-phone { display: none; } .header-topbar .container { justify-content: flex-end; } /* Card grid: single column on mobile */ .card-grid { grid-template-columns: 1fr; } /* Footer: full single column */ .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); } .footer-brand { grid-column: auto; } .footer-tagline { max-width: 100%; } /* Footer bottom: stack on mobile */ .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); } /* Section padding: tighter on mobile */ .section { padding-top: var(--space-12); padding-bottom: var(--space-12); } .section-sm { padding-top: var(--space-8); padding-bottom: var(--space-8); } /* Buttons: full-width on mobile for primary CTAs */ .btn-block-mobile { width: 100%; justify-content: center; } /* Header total height on mobile — remove topbar or make it smaller */ :root { --topbar-height: 0px; /* Effectively hidden on small mobile */ --header-total-height: var(--header-height); } } /* ── LARGE DESKTOP: > 1440px ────────────────────────────────────────────── */ @media screen and (min-width: 1441px) { /* Fluid type: slightly larger at wide viewports */ h1 { font-size: var(--text-hero); } /* 60px at max width */ /* Hero displays can be pushed wider on ultra-wide screens */ :root { --gutter: var(--space-8); /* 32px gutter on wide screens */ } } /* ========================================================================== END OF FILE axivend-shared.css — axiVEND Design System v1.0.0 Apply globally on both axiVEND.com (WordPress) and axiVEND.store (Shopify) ========================================================================== */