/* ================================================ The ROSE Promise — Premium Design System v2 "Love in action" — warm, blooming, family-care aesthetic ================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Playfair+Display:ital,wght@0,700;0,800;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap'); :root { /* Palette */ --bg: #FBF9F6; --bg-warm: #F4EEE6; --bg-card: #FFFFFF; --bg-rose: #FDF5F2; --text: #1C1917; --text-muted: #6B6058; --text-light: #9D8F86; --accent: #B5484A; --accent-dark: #8E3032; --accent-light: #D96D6F; --accent-glow: rgba(181,72,74,0.18); --sage: #6D8B74; --sage-light: #EAF0EB; --gold: #C9943C; --gold-light: #FBF0DD; --border: #E4DDD6; --border-light: #EDE8E2; --white: #FFFFFF; --shadow-sm: 0 1px 3px rgba(28,25,23,0.06), 0 1px 2px rgba(28,25,23,0.04); --shadow-md: 0 4px 16px rgba(28,25,23,0.08), 0 2px 4px rgba(28,25,23,0.04); --shadow-lg: 0 12px 40px rgba(28,25,23,0.12), 0 4px 8px rgba(28,25,23,0.06); --shadow-accent: 0 8px 32px rgba(181,72,74,0.22); /* Typography */ --font-hero: 'DM Serif Display', 'Playfair Display', Georgia, serif; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* Layout */ --max-w: 1140px; --gap-section: 6rem; --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; } /* NOTE: overflow-x lives on only. Putting it on too makes body a second scroll container (double scrollbars / mobile snap-back). */ body { font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- Vibrant flower background (fixed, full-bleed) ---- */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: url('floral-bg.png') center center / cover no-repeat; filter: saturate(1.24) contrast(1.05) brightness(1.02); transform-origin: center; animation: bgIntro 1.7s cubic-bezier(0.16,1,0.3,1) both; will-change: transform, opacity; } /* Poppy opening: blooms bloom in with a soft zoom */ @keyframes bgIntro { 0% { opacity: 0; transform: scale(1.16); } 100% { opacity: 1; transform: scale(1); } } /* Light veil so blooms stay vivid but content stays readable */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse 125% 95% at 50% 38%, rgba(252,249,246,0.28) 0%, rgba(252,249,246,0.15) 55%, rgba(250,246,242,0.05) 100%); animation: veilIntro 1.4s ease-out both; } @keyframes veilIntro { from { opacity: 0; } to { opacity: 1; } } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; } /* ---- Utilities ---- */ .eyebrow { font-size: 0.70rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.5rem; } .eyebrow::before { content: ''; display: inline-block; width: 20px; height: 1.5px; background: currentColor; flex-shrink: 0; } .muted { color: var(--text-muted); } .small { font-size: 0.875rem; } .container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.75rem; } .section { padding: var(--gap-section) 0; background: rgba(255,255,255,0.70); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); } .section-sm { padding: 3rem 0; } .divider { border: none; border-top: 1px solid var(--border); margin: 0; } /* ================================================ Navigation — Glassmorphism ================================================ */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(251,249,246,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(228,221,214,0.6); transition: background 0.3s, box-shadow 0.3s; } .nav.scrolled { background: rgba(251,249,246,0.95); box-shadow: 0 1px 20px rgba(28,25,23,0.08); } .nav__row { display: flex; align-items: center; justify-content: space-between; height: 4rem; } .nav__logo { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.5rem; color: var(--text); transition: color 0.2s; } .nav__logo:hover { color: var(--accent); } .rose-icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; display: block; filter: drop-shadow(0 1px 3px rgba(181,72,74,0.3)); } .nav__links { display: flex; align-items: center; gap: 0.25rem; } .nav__link { font-size: 0.875rem; font-weight: 500; color: var(--text-muted); padding: 0.5rem 0.875rem; border-radius: 6px; transition: color 0.15s, background 0.15s; } .nav__link:hover { color: var(--text); background: var(--bg-warm); } .nav__link.active { color: var(--accent); background: var(--bg-rose); font-weight: 600; } .nav__phone { font-size: 0.8125rem; font-weight: 600; color: var(--white); background: var(--accent); padding: 0.5rem 1rem; border-radius: 6px; margin-left: 0.5rem; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; box-shadow: 0 2px 8px rgba(181,72,74,0.25); display: inline-flex; align-items: center; gap: 0.375rem; } .nav__phone:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(181,72,74,0.35); } .nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.25rem; height: 2.25rem; padding: 5px; border-radius: 6px; transition: background 0.15s; } .nav__toggle:hover { background: var(--bg-warm); } .nav__toggle span { display: block; height: 1.75px; background: var(--text); border-radius: 2px; transition: transform 0.25s, opacity 0.2s; } .nav__mobile { display: none; flex-direction: column; border-top: 1px solid var(--border); padding: 0.75rem 0 1rem; gap: 0.25rem; } .nav__mobile.open { display: flex; } .nav__mobile-link { padding: 0.625rem 0.75rem; font-size: 0.9375rem; font-weight: 500; color: var(--text-muted); border-radius: 6px; transition: color 0.15s, background 0.15s; } .nav__mobile-link:hover { color: var(--text); background: var(--bg-warm); } .nav__mobile-link:last-child { color: var(--white); background: var(--accent); font-weight: 600; text-align: center; margin-top: 0.5rem; border-radius: 6px; } @media (max-width: 720px) { .nav__links { display: none; } .nav__toggle { display: flex; } } /* ================================================ Buttons ================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.625rem; font-size: 0.9rem; font-weight: 600; line-height: 1; border-radius: var(--radius-sm); transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1); letter-spacing: 0.01em; } .btn-primary { background: var(--accent); color: var(--white); box-shadow: 0 2px 12px rgba(181,72,74,0.3); } .btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(181,72,74,0.4); } .btn-primary:active { transform: translateY(0); } .btn-outline { border: 1.75px solid var(--text); color: var(--text); background: transparent; } .btn-outline:hover { background: var(--text); color: var(--white); transform: translateY(-1px); } .btn-sage { background: var(--sage); color: var(--white); box-shadow: 0 2px 12px rgba(109,139,116,0.25); } .btn-sage:hover { background: #5a7561; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(109,139,116,0.4); } .btn-ghost { font-size: 0.875rem; font-weight: 600; color: var(--accent); padding: 0; display: inline-flex; align-items: center; gap: 0.375rem; transition: gap 0.2s, opacity 0.15s; } .btn-ghost::after { content: '→'; } .btn-ghost:hover { gap: 0.625rem; opacity: 0.8; } /* ================================================ Hero — Rich gradient + image + stats ================================================ */ .hero { position: relative; padding: 5.5rem 0 6rem; overflow: hidden; background: linear-gradient(100deg, rgba(255,251,247,0.80) 0%, rgba(255,251,247,0.50) 38%, rgba(255,250,246,0.10) 68%, rgba(255,250,246,0) 100%); } /* Decorative blobs */ .hero::before { content: ''; position: absolute; top: -80px; right: -120px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(181,72,74,0.07) 0%, transparent 70%); pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: -100px; left: -80px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(109,139,116,0.07) 0%, transparent 70%); pointer-events: none; } .hero__layout { display: grid; grid-template-columns: 1fr 420px; gap: 5rem; align-items: center; position: relative; z-index: 1; } .hero__eyebrow { margin-bottom: 1.5rem; } .hero__h1 { font-family: var(--font-hero); font-size: clamp(2.875rem, 6.5vw, 5.25rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 13ch; margin-bottom: 1.625rem; color: var(--text); text-shadow: 0 1px 22px rgba(255,251,247,0.7), 0 1px 3px rgba(255,251,247,0.55); } .hero__h1 em { font-style: italic; color: var(--accent-dark); background: linear-gradient(135deg, var(--accent-dark), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__sub { font-size: 1.0625rem; color: var(--text-muted); max-width: 46ch; line-height: 1.85; margin-bottom: 2.5rem; font-weight: 400; text-shadow: 0 1px 12px rgba(255,251,247,0.75); } .hero__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .hero__or { font-size: 0.875rem; color: var(--text-muted); } .hero__or a { font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; transition: color 0.15s; } .hero__or a:hover { color: var(--accent); } /* ---- Hero trust badges (below buttons) ---- */ .hero__trust { display: flex; gap: 1.5rem; margin-top: 2.25rem; flex-wrap: wrap; } .trust-badge { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); } .trust-badge__icon { width: 30px; height: 30px; border-radius: 50%; background: var(--white); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; box-shadow: var(--shadow-sm); } /* ================================================ Photo frame — premium ================================================ */ .hero__frame-wrap { position: relative; z-index: 1; } /* Floating stat chips */ .hero__stat { position: absolute; background: var(--white); border-radius: var(--radius); padding: 0.75rem 1rem; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 0.625rem; z-index: 10; animation: floatChip 4s ease-in-out infinite; } .hero__stat--1 { top: -18px; left: -28px; animation-delay: 0s; } .hero__stat--2 { bottom: 24px; right: -22px; animation-delay: 2s; } .hero__stat__num { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: var(--accent); line-height: 1; } .hero__stat__label { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); line-height: 1.3; max-width: 7ch; } @keyframes floatChip { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } .photo-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(228,221,214,0.6); } .photo-frame::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); border: 2px solid rgba(255,255,255,0.6); z-index: 5; pointer-events: none; } .photo-frame__inner { aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(160deg, #EAE0D6 0%, #D4C8BC 100%); position: relative; } .photo-frame__inner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .photo-frame:hover .photo-frame__inner img { transform: scale(1.03); } .photo-frame__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem; } .photo-frame__placeholder-line { width: 32px; height: 1.5px; background: var(--border); } .photo-frame__placeholder-text { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; } .photo-frame__caption { margin-top: 0.875rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); text-align: center; } /* ================================================ Stats / trust bar ================================================ */ .stats-bar { background: rgba(255,255,255,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: 2.25rem 0; } .stats-bar__inner { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; } .stat-item { flex: 1; min-width: 160px; max-width: 240px; text-align: center; padding: 0.75rem 2rem; border-right: 1px solid var(--border-light); position: relative; } .stat-item:last-child { border-right: none; } .stat-item__num { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 0.375rem; letter-spacing: -0.02em; } .stat-item__label { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; line-height: 1.4; } /* ================================================ Mission strip ================================================ */ .mission { padding: 4rem 0; background: linear-gradient(135deg, #1C1917 0%, #2D2420 100%); position: relative; overflow: hidden; } .mission::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 300px; background: radial-gradient(ellipse, rgba(181,72,74,0.12) 0%, transparent 70%); pointer-events: none; } .mission__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; } .mission__badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-light); background: rgba(181,72,74,0.15); border: 1px solid rgba(181,72,74,0.3); padding: 0.35rem 0.875rem; border-radius: 999px; } .mission__quote { font-family: var(--font-hero); font-style: italic; font-size: clamp(1.25rem, 2.8vw, 1.75rem); color: rgba(255,255,255,0.92); max-width: 56ch; line-height: 1.55; } .mission__author { font-size: 0.8125rem; color: rgba(255,255,255,0.45); font-weight: 500; letter-spacing: 0.06em; } /* ================================================ Services preview (homepage) ================================================ */ .svcs-hdr { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 1rem; margin-bottom: 0; } .svcs-hdr__h2 { font-size: clamp(1.625rem, 3.5vw, 2.25rem); letter-spacing: -0.02em; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-top: 2rem; } .svc-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 2rem 1.75rem 2.25rem; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease, border-color 0.25s; cursor: default; position: relative; overflow: hidden; } .svc-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 60%); opacity: 0; transition: opacity 0.3s; } .svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(181,72,74,0.2); } .svc-card:hover::before { opacity: 1; } .svc-card__icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.375rem; position: relative; } .svc-card__icon svg { flex-shrink: 0; } .svc-card__icon--rose { background: var(--bg-rose); color: var(--accent); } .svc-card__icon--sage { background: var(--sage-light); color: var(--sage); } .svc-card__icon--gold { background: var(--gold-light); color: var(--gold); } .svc-card__num { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; margin-bottom: 1rem; opacity: 0.7; } .svc-card__title { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 0.75rem; line-height: 1.25; } .svc-card__desc { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.75; } /* ================================================ Page header (inner pages) ================================================ */ .page-hdr { padding: 4rem 0 3.5rem; background: linear-gradient(180deg, rgba(255,252,248,0.80) 0%, rgba(255,252,248,0.60) 100%); border-bottom: 1px solid rgba(228,221,214,0.6); position: relative; overflow: hidden; } .page-hdr::after { content: ''; position: absolute; top: -60px; right: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(181,72,74,0.06) 0%, transparent 70%); pointer-events: none; } .breadcrumb { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; position: relative; z-index: 1; } .breadcrumb a { transition: color 0.15s; } .breadcrumb a:hover { color: var(--accent); } .page-hdr__h1 { font-family: var(--font-hero); font-size: clamp(2.125rem, 4.5vw, 3.25rem); letter-spacing: -0.025em; max-width: 18ch; line-height: 1.07; position: relative; z-index: 1; } .page-hdr__sub { margin-top: 1.125rem; font-size: 1.0625rem; color: var(--text-muted); max-width: 52ch; line-height: 1.8; position: relative; z-index: 1; } /* ================================================ About page ================================================ */ .founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } .founder-label { font-size: 0.70rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; } .founder-label::before { content: ''; width: 20px; height: 1.5px; background: currentColor; } .founder-h2 { font-family: var(--font-hero); font-size: clamp(1.625rem, 3.5vw, 2.25rem); margin-bottom: 1.625rem; letter-spacing: -0.02em; line-height: 1.15; } .founder-body { font-size: 1rem; color: var(--text-muted); line-height: 1.9; } .founder-body p + p { margin-top: 1.375rem; } .founder-img { aspect-ratio: 3 / 4; background: linear-gradient(160deg, var(--bg-warm) 0%, #E8DDD4 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: var(--text-muted); text-align: center; padding: 2rem; box-shadow: var(--shadow-md); } /* Values grid */ .values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .values-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem; } .values-hdr h2 { font-family: var(--font-hero); font-size: clamp(1.625rem, 3.5vw, 2.25rem); letter-spacing: -0.02em; } .val-item { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 2.25rem 2rem; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s; } .val-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .val-item__num { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; opacity: 0.7; } .val-item__title { font-family: var(--font-display); font-size: 1.1875rem; margin-bottom: 0.75rem; } .val-item__desc { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.75; } /* ================================================ Services page ================================================ */ .service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.375rem; } .svc-item { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 2.25rem 2rem; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, border-color 0.25s; position: relative; overflow: hidden; } .svc-item::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: var(--radius) var(--radius) 0 0; opacity: 0; transition: opacity 0.25s; } .svc-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(181,72,74,0.15); } .svc-item:hover::after { opacity: 1; } .svc-item__icon { width: 32px; height: 32px; color: var(--accent); margin-bottom: 1.25rem; display: block; flex-shrink: 0; } .svc-item__title { font-family: var(--font-display); font-size: 1.3125rem; margin-bottom: 0.875rem; letter-spacing: -0.01em; } .svc-item__desc { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 1.375rem; } .svc-item__for-label { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.375rem; } .svc-item__for-text { font-size: 0.875rem; color: var(--text); line-height: 1.6; background: var(--bg-warm); padding: 0.625rem 0.875rem; border-radius: var(--radius-sm); border-left: 3px solid var(--accent); font-weight: 500; } /* ================================================ CTA banner — premium dark ================================================ */ .cta-dark { background: linear-gradient(135deg, #1C1917 0%, #2A1F1D 50%, #1C1917 100%); padding: 5rem 0; position: relative; overflow: hidden; } .cta-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 300px at 20% 50%, rgba(181,72,74,0.12) 0%, transparent 70%), radial-gradient(ellipse 400px 200px at 80% 60%, rgba(109,139,116,0.08) 0%, transparent 70%); pointer-events: none; } /* Decorative grid lines */ .cta-dark::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } .cta-dark__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; } .cta-dark__badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 1rem; } .cta-dark__h2 { font-family: var(--font-hero); font-size: clamp(1.625rem, 3.5vw, 2.5rem); color: #F8F5F2; margin-bottom: 0.625rem; letter-spacing: -0.02em; } .cta-dark__sub { color: rgba(255,255,255,0.5); font-size: 0.9375rem; line-height: 1.7; max-width: 44ch; } /* ================================================ Contact page ================================================ */ .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5.5rem; align-items: start; } .contact-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.625rem; } .contact-phone { font-family: var(--font-hero); font-size: clamp(2rem, 4vw, 2.875rem); font-weight: 700; color: var(--accent); letter-spacing: -0.025em; line-height: 1; margin-bottom: 0.625rem; } .contact-phone a { transition: opacity 0.15s; } .contact-phone a:hover { opacity: 0.8; } .contact-avail { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 2.75rem; } .steps { display: flex; flex-direction: column; } .step { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border-light); } .step:first-child { border-top: 1px solid var(--border-light); } .step__num { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; flex-shrink: 0; box-shadow: 0 2px 8px rgba(181,72,74,0.3); } .step__title { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.375rem; } .step__desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.7; } /* Contact form */ .form-panel { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-md); } .form-section-label { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 700; color: var(--text); margin-bottom: 1.75rem; letter-spacing: -0.01em; } .contact-form { display: flex; flex-direction: column; gap: 1.25rem; } .field { display: flex; flex-direction: column; gap: 0.4rem; } .label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; } .label-opt { font-weight: 400; color: var(--text-light); } .input, .textarea { width: 100%; padding: 0.8125rem 1rem; font-size: 0.9375rem; font-family: var(--font-body); color: var(--text); background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); outline: none; appearance: none; transition: border-color 0.2s, box-shadow 0.2s; } .input:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(181,72,74,0.1); } .textarea { resize: vertical; min-height: 8rem; line-height: 1.6; } .input::placeholder, .textarea::placeholder { color: #C2B8B0; } .btn-submit { width: 100%; justify-content: center; padding: 0.9375rem; } .form-note { font-size: 0.8125rem; color: var(--text-light); text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.375rem; } .form-success { display: none; padding: 2.5rem 2rem; border: 1.5px solid var(--sage); border-radius: var(--radius); text-align: center; background: var(--sage-light); } .form-success.visible { display: block; } .form-success__title { font-family: var(--font-display); font-size: 1.375rem; margin-bottom: 0.5rem; color: var(--sage); } .areas { border-top: 1px solid var(--border-light); padding: 2.25rem 0; background: var(--bg-warm); } .areas__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.75rem; } .areas__list { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.8; } /* ================================================ Footer — rich dark ================================================ */ .footer { background: #181412; color: #7A6E6A; padding: 4rem 0 2.25rem; position: relative; overflow: hidden; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,72,74,0.4), transparent); } .footer::after { content: ''; position: absolute; bottom: -120px; right: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(181,72,74,0.05) 0%, transparent 70%); pointer-events: none; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3.5rem; padding-bottom: 3rem; border-bottom: 1px solid #242020; margin-bottom: 1.75rem; position: relative; z-index: 1; } .footer__brand { font-family: var(--font-display); font-size: 1.125rem; color: #F0ECE8; margin-bottom: 0.875rem; display: flex; align-items: center; gap: 0.5rem; font-weight: 800; } .footer .rose-icon { color: var(--accent); } .footer__tagline { font-size: 0.875rem; line-height: 1.8; max-width: 28ch; } .footer__hd { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--border); margin-bottom: 1.125rem; } .footer__links { display: flex; flex-direction: column; gap: 0.6rem; } .footer__link { font-size: 0.875rem; transition: color 0.15s; } .footer__link:hover { color: #F0ECE8; } .footer__contact { display: flex; flex-direction: column; gap: 0.6rem; } .footer__contact-row { font-size: 0.875rem; line-height: 1.65; } .footer__contact-row a { transition: color 0.15s; } .footer__contact-row a:hover { color: #F0ECE8; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; flex-wrap: wrap; gap: 0.5rem; position: relative; z-index: 1; } /* ================================================ Animations ================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes floatChip { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-7px); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } /* Nav entrance */ .nav { animation: slideDown 0.5s cubic-bezier(0.16,1,0.3,1) both; } /* Hero stagger */ .hero__eyebrow { animation: fadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.05s both; } .hero__h1 { animation: fadeUp 0.65s cubic-bezier(0.16,1,0.3,1) 0.15s both; } .hero__sub { animation: fadeUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.28s both; } .hero__actions { animation: fadeUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.40s both; } .hero__trust { animation: fadeUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.52s both; } .hero__frame-wrap { animation: fadeIn 1s ease 0.2s both; } /* Inner page header */ .page-hdr .breadcrumb { animation: fadeUp 0.45s ease 0.05s both; } .page-hdr .page-hdr__h1 { animation: fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.12s both; } .page-hdr .page-hdr__sub { animation: fadeUp 0.55s ease 0.22s both; } /* Scroll reveal */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--d, 0) * 100ms); } [data-reveal].visible { opacity: 1; transform: none; } [data-delay="1"] { --d: 1; } [data-delay="2"] { --d: 2; } [data-delay="3"] { --d: 3; } [data-delay="4"] { --d: 4; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1; transform: none; } .hero__stat { animation: none; } } /* ================================================ Responsive ================================================ */ @media (max-width: 960px) { .hero__layout { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; } .hero__layout > * { min-width: 0; } .hero__frame-wrap { max-width: 320px; } .hero__h1 { max-width: 22ch; } } @media (max-width: 860px) { .founder-grid { grid-template-columns: 1fr; gap: 2.5rem; } .contact-layout { grid-template-columns: 1fr; gap: 3.5rem; } .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } .stats-bar__inner { gap: 0; } .stat-item { min-width: 50%; border-right: none; border-bottom: 1px solid var(--border-light); } .stat-item:nth-child(odd) { border-right: 1px solid var(--border-light); } } @media (max-width: 640px) { :root { --gap-section: 4rem; } .services-grid { grid-template-columns: 1fr; } .service-list { grid-template-columns: 1fr; } .values-grid { grid-template-columns: 1fr; } .hero__h1 { font-size: clamp(2.1rem, 8.5vw, 3rem); max-width: 100%; overflow-wrap: break-word; } .hero__sub { font-size: 1rem; max-width: 100%; } /* keep butterflies off the headline on small screens */ .flutter--1, .flutter--2, .flutter--6 { display: none; } .hero__actions { flex-direction: column; align-items: flex-start; gap: 0.875rem; } .footer__grid { grid-template-columns: 1fr; gap: 2rem; } .cta-dark__inner { flex-direction: column; align-items: flex-start; } .hero__frame-wrap { max-width: 260px; } .hero__stat--1 { top: -12px; left: -10px; } .hero__stat--2 { bottom: 10px; right: -10px; } .stat-item { min-width: 100%; border-right: none; } .form-panel { padding: 1.75rem 1.375rem; } } @media (max-width: 480px) { .hero__trust { gap: 1rem; } .hero__stat { padding: 0.5rem 0.75rem; } .hero__stat__num { font-size: 1.125rem; } } /* ================================================ FLORAL SYSTEM — "vibrant flowers bringing life" Hand-coded SVG blooms + butterflies. Drop-in art slots (.bloom-art) left for generated imagery. ================================================ */ /* Petal palette (layered on the warm base) */ :root { --petal-rose: #E4767B; --petal-coral: #F0936F; --petal-gold: #F2C14E; --petal-lilac: #C99BD6; --petal-blush: #F4B8C1; --stem: #6D8B74; --stem-deep: #4E6B57; } /* Sticky nav stays above the fixed floral background */ .nav { z-index: 100; } /* ---- Butterflies & birds ---- */ .flutter { position: absolute; width: 46px; height: 46px; z-index: 3; pointer-events: none; color: var(--petal-lilac); filter: drop-shadow(0 4px 6px rgba(28,25,23,0.14)); animation: drift 14s ease-in-out infinite; } .flutter svg { width: 100%; height: 100%; } .flutter__wing { transform-box: fill-box; transform-origin: center; animation: flap 0.5s ease-in-out infinite; } .flutter--1 { top: 12%; left: 6%; color: var(--petal-rose); animation-delay: 0s; animation-duration: 16s; } .flutter--2 { top: 26%; right: 12%; color: var(--petal-gold); animation-delay: -4s; animation-duration: 13s; width: 38px; height: 38px; } .flutter--3 { top: 58%; left: 14%; color: var(--petal-lilac); animation-delay: -8s; animation-duration: 18s; width: 30px; height: 30px; } .flutter--4 { top: 44%; right: 22%; color: var(--petal-coral); animation-delay: -6s; animation-duration: 15s; width: 34px; height: 34px; } .flutter--5 { top: 68%; right: 30%; color: var(--petal-rose); animation-delay: -11s; animation-duration: 17s; width: 28px; height: 28px; } .flutter--6 { top: 20%; left: 30%; color: var(--petal-lilac); animation-delay: -2s; animation-duration: 14s; width: 26px; height: 26px; } .flutter__wing--r { animation-name: flapR; } @keyframes flap { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(62deg); } } @keyframes flapR { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(-62deg); } } /* soft bird glide in the hero sky */ .bird { position: absolute; z-index: 3; color: var(--text-light); opacity: 0.55; pointer-events: none; animation: birdGlide 22s linear infinite; } .bird svg { width: 100%; height: 100%; } .bird--1 { top: 16%; width: 30px; height: 30px; animation-delay: 0s; } .bird--2 { top: 22%; width: 22px; height: 22px; animation-delay: -11s; opacity: 0.4; } @keyframes birdGlide { 0% { transform: translateX(-8vw) translateY(0); } 50% { transform: translateX(55vw) translateY(-14px); } 100% { transform: translateX(112vw) translateY(4px); } } @keyframes drift { 0% { transform: translate(0, 0) rotate(-4deg); } 25% { transform: translate(26px, -20px) rotate(6deg); } 50% { transform: translate(52px, 6px) rotate(-3deg); } 75% { transform: translate(20px, 24px) rotate(5deg); } 100% { transform: translate(0, 0) rotate(-4deg); } } /* ---- White doves: opening flight (one-shot) ---- */ .dove { position: absolute; width: 66px; z-index: 3; pointer-events: none; opacity: 0; animation: doveFly 7s cubic-bezier(0.37,0,0.63,1) 0.4s 1 forwards; } .dove svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgba(28,25,23,0.12)); } .dove__wing { transform-box: fill-box; transform-origin: 70% 90%; animation: doveFlap 0.55s ease-in-out infinite; } .dove--1 { top: 30%; width: 70px; animation-delay: 0.4s; } .dove--2 { top: 46%; width: 52px; animation-delay: 1.3s; } .dove--3 { top: 18%; width: 44px; animation-delay: 2.1s; opacity: 0; } @keyframes doveFly { 0% { transform: translate(-22vw, 30px) scale(0.9); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(42vw, -34px) scale(1); opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(102vw, -70px) scale(0.82); opacity: 0; } } @keyframes doveFlap { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(20deg); } } /* Poetic caption — "a touch of new life" */ .bloom-caption { position: absolute; z-index: 4; bottom: 1.75rem; left: 50%; transform: translateX(-50%); font-family: var(--font-hero); font-style: italic; font-size: clamp(1.25rem, 3vw, 2rem); color: var(--accent-dark); text-align: center; white-space: nowrap; text-shadow: 0 2px 12px rgba(251,249,246,0.9); pointer-events: none; } .bloom-caption::before, .bloom-caption::after { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--accent-light); vertical-align: middle; margin: 0 0.75rem; opacity: 0.6; } /* ---- Brand tagline "Love in action" ---- */ .nav__logo-wrap { display: flex; flex-direction: column; line-height: 1; } .nav__tagline { font-family: var(--font-body); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-top: 2px; } .footer__tagline-brand { font-family: var(--font-hero); font-style: italic; font-size: 0.9375rem; color: var(--accent-light); margin: 0.25rem 0 0.75rem; } /* ================================================ IN LOVING MEMORY — Calendar page ================================================ */ .memory-hdr { text-align: center; background: linear-gradient(180deg, rgba(255,252,248,0.82) 0%, rgba(255,252,248,0.60) 100%); } .memory-hdr .page-hdr__h1 { max-width: none; margin: 0 auto; } .memory-hdr .page-hdr__sub { margin-left: auto; margin-right: auto; } .memory-hdr__ribbon { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--petal-lilac); background: rgba(201,155,214,0.12); border: 1px solid rgba(201,155,214,0.32); padding: 0.4rem 1rem; border-radius: 999px; margin-bottom: 1.5rem; } .memory-intro { max-width: 60ch; margin: 0 auto 3.5rem; text-align: center; font-size: 1.0625rem; line-height: 1.9; color: var(--text-muted); } .memory-intro em { color: var(--accent); font-style: italic; } /* Year masthead above the calendar */ .cal-year { text-align: center; margin-bottom: 2.75rem; } .cal-year__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--petal-lilac); } .cal-year__num { font-family: var(--font-hero); font-size: clamp(2.25rem, 5vw, 3.25rem); color: var(--text); line-height: 1.05; margin-top: 0.25rem; } .cal-year__rule { width: 54px; height: 2px; background: var(--accent-light); border: none; margin: 1rem auto 0; opacity: 0.6; } /* The calendar grid — twelve month pages */ .calendar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .cal-month { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s; display: flex; flex-direction: column; } .cal-month:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } /* Month masthead + spiral binding */ .cal-month__top { position: relative; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: #fff; text-align: center; padding: 1.35rem 0.75rem 0.9rem; } .cal-month__top::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 7px; background-image: radial-gradient(circle, rgba(255,255,255,0.85) 0 2.6px, transparent 3.1px); background-size: 20px 7px; background-repeat: repeat-x; background-position: center; opacity: 0.55; } .cal-month__name { font-family: var(--font-hero); font-size: 1.4rem; line-height: 1; display: block; } .cal-month__glyph { margin-top: 0.4rem; opacity: 0.65; } .cal-month__glyph svg { width: 13px; height: 13px; display: inline-block; } /* Portrait / photo panel */ .cal-month__photo { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(160deg, var(--bg-warm) 0%, #E7DCEB 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; } .cal-month__photo img { width: 100%; height: 100%; object-fit: cover; } .cal-month__empty { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; color: var(--text-light); } .cal-month__empty svg { width: 30px; height: 30px; color: var(--petal-lilac); opacity: 0.7; } .cal-month__empty span { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; } /* Footer of each month page */ .cal-month__foot { padding: 0.9rem 1rem 1.1rem; text-align: center; border-top: 1px solid var(--border-light); flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; } .cal-month__honoree { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; } .cal-month__years { font-size: 0.75rem; font-weight: 600; color: var(--petal-lilac); } .cal-month__nominate { font-size: 0.75rem; font-weight: 600; color: var(--accent); transition: opacity 0.15s; } .cal-month__nominate:hover { opacity: 0.75; } /* Current month highlight */ .cal-month--now { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow), var(--shadow-md); } .cal-month__badge { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; background: #fff; color: var(--accent); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.22rem 0.5rem; border-radius: 999px; box-shadow: var(--shadow-sm); } /* Tribute submission form */ .tribute { background: rgba(244,238,230,0.74); backdrop-filter: blur(9px) saturate(1.05); -webkit-backdrop-filter: blur(9px) saturate(1.05); border-top: 1px solid var(--border); } .tribute__inner { max-width: 680px; margin: 0 auto; } .tribute__head { text-align: center; margin-bottom: 2.5rem; } .tribute__head h2 { font-family: var(--font-hero); font-size: clamp(1.625rem, 3.5vw, 2.25rem); margin-bottom: 0.75rem; } .tribute__head p { color: var(--text-muted); max-width: 48ch; margin: 0 auto; line-height: 1.8; } .tribute .form-panel { padding: 2.5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 980px) { .calendar-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .calendar-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; } } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } .tribute .form-panel { padding: 1.75rem 1.375rem; } .bloom-caption { bottom: 1.25rem; font-size: 1.125rem; } } /* Keep the calendar a 2-column GRID on phones (not a 1-column list) */ @media (max-width: 480px) { .calendar-grid { gap: 0.7rem; } .cal-month__top { padding: 1rem 0.4rem 0.7rem; } .cal-month__name { font-size: 1.08rem; } .cal-month__foot { padding: 0.7rem 0.5rem 0.85rem; } .cal-month__nominate { font-size: 0.68rem; } .cal-month__empty span { font-size: 0.55rem; } .cal-month__badge { font-size: 0.45rem; padding: 0.18rem 0.4rem; } } @media (prefers-reduced-motion: reduce) { .flutter, .flutter__wing, .bird, .dove, .dove__wing, body::before, body::after { animation: none !important; } .dove { opacity: 0; } /* skip the opening flight entirely */ } /* ================================================ Legal pages (Privacy, Terms) ================================================ */ .legal { max-width: 760px; } .legal h2 { font-family: var(--font-hero); font-size: 1.5rem; letter-spacing: -0.01em; margin: 2.75rem 0 1rem; } .legal h2:first-of-type { margin-top: 0; } .legal p, .legal li { color: var(--text-muted); line-height: 1.85; font-size: 0.975rem; margin-bottom: 1rem; } .legal ul { padding-left: 1.25rem; list-style: disc; margin-bottom: 1.25rem; } .legal li { margin-bottom: 0.5rem; } .legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .legal__updated { font-size: 0.85rem; color: var(--text-light); margin-bottom: 2.25rem; } .footer__legal a { transition: color 0.15s; } .footer__legal a:hover { color: #F0ECE8; }