/** Shopify CDN: Minification failed Line 15:0 All "@import" rules must come first **/ /* Alps Goodness — Global Theme Styles File: assets/alps-goodness.css Paste into: Online Store > Themes > Edit Code > assets/alps-goodness.css Then add to your theme.liquid: {{ 'alps-goodness.css' | asset_url | stylesheet_tag }} Place the tag inside BEFORE the closing tag. */ body { visibility: visible; } /* ── Google Fonts ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap'); /* ── CSS Variables / Design Tokens ───────────────────────────────────────── */ :root { /* Brand colours */ --ag-green-dark: #1B4332; --ag-green: #2D6A4F; --ag-green-mid: #40916C; --ag-green-accent: #52B788; --ag-green-light: #B7E4C7; --ag-green-pale: #D8F3DC; --ag-green-bg: #EEF7F0; --ag-green-wash: #F0FBF4; /* Neutrals */ --ag-off-white: #FAFAF7; --ag-white: #FFFFFF; --ag-text-dark: #1B1B1B; --ag-text-mid: #374151; --ag-text-gray: #555555; --ag-text-light: #888888; --ag-border: #E8F5E9; --ag-bg-light: #F5F5F0; /* Accent */ --ag-orange: #F4A261; --ag-red: #EF4444; --ag-gold: #D4AF37; /* Typography */ --ag-font-serif: 'Playfair Display', Georgia, serif; --ag-font-sans: 'DM Sans', -apple-system, sans-serif; /* Spacing */ --ag-section-pad: clamp(60px, 7vw, 100px); --ag-inner-max: 1440px; --ag-content-max: 1200px; /* Radii */ --ag-radius-sm: 8px; --ag-radius-md: 14px; --ag-radius-lg: 20px; --ag-radius-xl: 28px; --ag-radius-full: 100px; /* Shadows */ --ag-shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --ag-shadow-md: 0 6px 24px rgba(0,0,0,0.10); --ag-shadow-lg: 0 16px 48px rgba(0,0,0,0.13); --ag-shadow-green: 0 8px 24px rgba(45,106,79,0.25); /* Transitions */ --ag-trans-fast: 0.15s ease; --ag-trans: 0.25s ease; --ag-trans-slow: 0.4s ease; } /* ── Base Reset ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--ag-font-sans); color: var(--ag-text-dark); background: var(--ag-off-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; } img, video, svg { max-width: 100%; height: auto; } a { color: inherit; } /* ── Shared Section Typography ───────────────────────────────────────────── */ .ag-section__eyebrow { display: inline-block; font-family: var(--ag-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ag-green-accent); margin-bottom: 10px; } .ag-section__title { font-family: var(--ag-font-serif); font-size: clamp(24px, 3vw, 40px); font-weight: 700; color: var(--ag-text-dark); margin: 0 0 10px; line-height: 1.15; } .ag-section__sub { font-family: var(--ag-font-sans); font-size: 15px; color: var(--ag-text-gray); margin: 0; max-width: 540px; } /* ── Global Button Styles ────────────────────────────────────────────────── */ .ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--ag-font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; border-radius: var(--ag-radius-full); padding: 13px 32px; border: 2px solid transparent; cursor: pointer; transition: all var(--ag-trans); line-height: 1; white-space: nowrap; } .ag-btn--primary { background: var(--ag-green); color: var(--ag-white); border-color: var(--ag-green); } .ag-btn--primary:hover { background: var(--ag-green-dark); border-color: var(--ag-green-dark); transform: translateY(-2px); box-shadow: var(--ag-shadow-green); } .ag-btn--ghost { background: transparent; color: var(--ag-green); border-color: var(--ag-green); } .ag-btn--ghost:hover { background: var(--ag-green); color: var(--ag-white); } .ag-btn--outline-green { background: transparent; color: var(--ag-green); border-color: var(--ag-green); } .ag-btn--outline-green:hover { background: var(--ag-green); color: var(--ag-white); } /* ── Utility Classes ─────────────────────────────────────────────────────── */ .ag-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Focus styles for accessibility */ :focus-visible { outline: 2px solid var(--ag-green); outline-offset: 3px; border-radius: 4px; } /* ── Skeleton loading shimmer ────────────────────────────────────────────── */ @keyframes ag-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .ag-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: ag-shimmer 1.5s infinite; border-radius: 6px; } /* ── Scroll-triggered fade-in animation ─────────────────────────────────── */ .ag-fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .ag-fade-in.is-visible { opacity: 1; transform: translateY(0); } /* ── RTE (rich text editor) styles ──────────────────────────────────────── */ .rte p { margin: 0 0 14px; } .rte p:last-child { margin-bottom: 0; } .rte a { color: var(--ag-green); text-decoration: underline; text-underline-offset: 2px; } .rte strong { font-weight: 700; } .rte em { font-style: italic; } .rte ul, .rte ol { padding-left: 20px; margin: 0 0 14px; } .rte li { margin-bottom: 6px; } /* ── Toast notification ──────────────────────────────────────────────────── */ .ag-toast { position: fixed; bottom: calc(70px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ag-green); color: #fff; font-family: var(--ag-font-sans); font-size: 14px; font-weight: 600; border-radius: var(--ag-radius-full); padding: 12px 24px; z-index: 500; white-space: nowrap; box-shadow: var(--ag-shadow-lg); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .ag-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } @media (min-width: 769px) { .ag-toast { bottom: 32px; } } /* ── Print / reduced motion ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }