/* ========================= 1. CSS Reset + Base Setup ========================= */ /* Root tokens: colors, typography, spacing, layout */ :root { /* Color palette */ --color-bg-light: #fdfaf5; --color-bg-dark: #0b0b09; --color-surface: #ffffff; --color-surface-muted: #f3eee5; --color-text-main: #17130f; --color-text-muted: #5f564b; --color-text-inverse: #fdfaf5; --color-primary: #355834; /* Verdance green */ --color-primary-soft: #4b7a4a; --color-primary-muted: #d9e3d8; --color-accent-gold: #c29b4f; --color-accent-rust: #b0563b; --color-border-subtle: #e1d7c7; --color-border-strong: #b39c7b; --color-badge-bg: #efe4cf; /* Feedback */ --color-success: #2f855a; --color-warning: #dd6b20; --color-error: #c53030; /* Typography */ --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-heading: "FKGroteskNeue", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-size-xs: 0.8125rem; /* 13px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.375rem; /* 22px */ --font-size-2xl: 1.75rem; /* 28px */ --font-size-3xl: 2.25rem; /* 36px */ --line-height-normal: 1.6; --line-height-heading: 1.2; --letter-spacing-tight: -0.01em; --letter-spacing-wide: 0.12em; /* Spacing scale */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* Layout */ --container-max: 1200px; --container-padding: 1.25rem; /* 20px mobile */ --nav-height: 3.5rem; /* Radius + shadow */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 15, 0.12); /* Borders */ --border-subtle: 1px solid var(--color-border-subtle); --border-strong: 1px solid var(--color-border-strong); /* Focus */ --focus-outline: 2px solid var(--color-accent-gold); /* Transitions */ --transition-fast: 150ms ease-out; --transition-base: 200ms ease-out; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Anchor scroll offset */ [id] { scroll-margin-top: var(--nav-height); } /* Auto dark mode (system preference) */ @media (prefers-color-scheme: dark) { :root { --color-bg-light: #050605; --color-bg-dark: #050605; --color-surface: #151713; --color-surface-muted: #121310; --color-text-main: #f6efe5; --color-text-muted: #ccc0b2; --color-text-inverse: #050605; --color-primary: #7cc58a; --color-primary-soft: #5ea56b; --color-primary-muted: #283429; --color-accent-gold: #e1bd6b; --color-accent-rust: #e27c5b; --color-border-subtle: #32352b; --color-border-strong: #5b5f4a; --color-badge-bg: #2b3023; --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.45); } } /* Manual theme override with data attribute on */ [data-color-scheme="dark"] { --color-bg-light: #050605; --color-bg-dark: #050605; --color-surface: #151713; --color-surface-muted: #121310; --color-text-main: #f6efe5; --color-text-muted: #ccc0b2; --color-text-inverse: #050605; --color-primary: #7cc58a; --color-primary-soft: #5ea56b; --color-primary-muted: #283429; --color-accent-gold: #e1bd6b; --color-accent-rust: #e27c5b; --color-border-subtle: #32352b; --color-border-strong: #5b5f4a; --color-badge-bg: #2b3023; --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.45); } [data-color-scheme="light"] { /* Revert to light defaults if needed */ } /* Base HTML/body */ html { font-size: 100%; scroll-behavior: smooth; } body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-text-main); background-color: var(--color-bg-light); } /* Accessibility focus */ :focus-visible { outline: var(--focus-outline); outline-offset: 3px; } /* Links */ a { color: inherit; text-decoration: none; } a:focus-visible { outline-offset: 3px; } /* Images */ img { max-width: 100%; display: block; } /* Lists */ ul, ol { list-style: none; } /* ========================= 2. Layout Helpers ========================= */ .container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-padding); } .section { padding-block: var(--space-2xl); } .section--tight { padding-block: var(--space-xl); } /* Flex helpers */ .flex { display: flex; } .flex--center { justify-content: center; align-items: center; } .flex--between { justify-content: space-between; align-items: center; } /* Grid helper for cards */ .grid { display: grid; gap: var(--space-lg); } /* ========================= 3. Typography ========================= */ h1, h2, h3, h4 { font-family: var(--font-family-heading); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-tight); color: var(--color-text-main); } h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); margin-bottom: var(--space-md); } h4 { font-size: var(--font-size-lg); } p { margin-bottom: var(--space-sm); color: var(--color-text-muted); } .lead { font-size: var(--font-size-lg); color: var(--color-text-main); } /* Small, meta text */ .text-sm { font-size: var(--font-size-sm); } /* ========================= 6. Buttons & Badges ========================= */ .btn { display: inline-flex; align-items: center; justify-content: center; width: fit-content; gap: var(--space-xs); border-radius: 999px; border: none; cursor: pointer; padding: 0.6rem 1.3rem; font-size: var(--font-size-sm); font-weight: 500; text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); } .btn--primary { background-color: var(--color-primary); color: var(--color-text-inverse); box-shadow: 0 10px 22px rgba(53, 88, 52, 0.4); } .btn--wide { min-width: 14rem; /* tweak to taste: 12–16rem */ width: 100%; max-width: 20rem; } /* Smaller shadow for header CTA */ .site-header .navbar__cta.btn.btn--primary { box-shadow: 0 4px 10px rgba(53, 88, 52, 0.25) !important; } .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(53, 88, 52, 0.5); background-color: var(--color-primary-soft); } .btn--ghost { background-color: transparent; color: var(--color-primary); border: 1px solid rgba(53, 88, 52, 0.4); } .btn--ghost:hover { background-color: rgba(53, 88, 52, 0.06); } /* ========================= 4. Navbar (mobile-first) ========================= */ .site-header { position: sticky; top: 0; z-index: 50; background-color: rgba(253, 250, 245, 0.96); backdrop-filter: blur(10px); border-bottom: var(--border-subtle); } [data-color-scheme="dark"] .site-header, @media (prefers-color-scheme: dark) { .site-header { background-color: rgba(5, 6, 5, 0.96); } } .navbar { height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; } .navbar__brand { display: inline-flex; align-items: center; gap: var(--space-xs); } .navbar__title { font-family: var(--font-family-heading); font-size: var(--font-size-base); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; } .navbar__logo { display: block; height: calc(var(--nav-height) - 0.75rem); width: auto; max-width: 200px; } .navbar__right { display: flex; align-items: center; gap: var(--space-sm); } .navbar__links { position: fixed; inset-inline: 0; top: var(--nav-height); background-color: var(--color-surface); border-bottom: var(--border-subtle); display: none; flex-direction: column; padding: var(--space-md) var(--container-padding) var(--space-lg); gap: var(--space-md); margin-inline: var(--space-md); } .navbar__links a { padding-block: var(--space-xs); font-size: var(--font-size-sm); } .navbar__links--open { display: flex; } /* Hamburger button */ .navbar__toggle { background: none; border: none; padding: var(--space-xs); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .navbar__toggle-line { width: 20px; height: 2px; border-radius: 999px; background-color: var(--color-text-main); position: relative; } .navbar__toggle-line::before, .navbar__toggle-line::after { content: ""; position: absolute; width: 20px; height: 2px; border-radius: 999px; background-color: var(--color-text-main); left: 0; } .navbar__toggle-line::before { top: -6px; } .navbar__toggle-line::after { top: 6px; } /* CTA button in header */ .navbar__cta { display: none; /* hidden on mobile; appears on larger screens */ } /* ========================= 5. Hero (mobile-first) ========================= */ .hero { padding-block: var(--space-2xl); color: var(--color-text-main); background-color: #e4eee4; } .hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2xl); } .hero__copy { width: 100%; max-width: 34rem; } .hero__title { margin-bottom: var(--space-sm); } .hero__subtitle { margin-bottom: var(--space-md); } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); } .hero__meta-item { font-size: var(--font-size-xs); color: var(--color-text-muted); } .hero__note { margin-bottom: 0; } /* Hero actions */ .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); margin-bottom: var(--space-lg); } .hero__meta, .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; } /* Hero media (image) */ .hero__media { display: none; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); background: radial-gradient(circle at 0% 0%, #f5e5c4, #1d2a1c); position: relative; width: 100%; aspect-ratio: 16 / 9; } .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ========================= 7. “Why Verdance” / Feature cards ========================= */ .features { background-color: var(--color-surface-muted); } .features__grid { display: grid; gap: var(--space-lg); } .feature-card { background-color: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-lg); border: var(--border-subtle); box-shadow: 0 10px 24px rgba(17, 24, 17, 0.06); } .feature-card__eyebrow { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-accent-gold); margin-bottom: var(--space-xs); } .feature-card__title { margin-bottom: var(--space-xs); } .feature-card__body { font-size: var(--font-size-sm); } /* ========================= 8. Timeline / Heritage section ========================= */ .heritage { background-color: var(--color-bg-dark); color: var(--color-text-inverse); } .heritage .section-heading { color: var(--color-text-inverse); } .heritage__grid { display: grid; gap: var(--space-xl); } .heritage__intro { max-width: 34rem; } .heritage__timeline { border-left: 1px solid rgba(226, 210, 186, 0.5); padding-left: var(--space-md); } .timeline-item { position: relative; padding-bottom: var(--space-md); margin-bottom: var(--space-md); } .timeline-item::before { content: ""; position: absolute; left: -0.53rem; top: 0.15rem; width: 9px; height: 9px; border-radius: 999px; background-color: var(--color-accent-gold); } .timeline-item__year { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: rgba(244, 231, 205, 0.88); margin-bottom: var(--space-2xs); } .timeline-item__title { font-size: var(--font-size-sm); color: var(--color-text-inverse); margin-bottom: var(--space-2xs); } /* ========================= 9. Who For ========================= */ .who-for { text-align: center; margin-top: 0; padding-block: var(--space-2xl); color: var(--color-text-main); } .who-for > .container { max-width: 40rem; margin-inline: auto; padding-inline: var(--container-padding); } .who-for-wrapper { max-width: 40rem; background-color: var(--color-surface-elevated, #ffffff); border-radius: var(--radius-lg); border: 1px solid var(--color-border-subtle, #e2e2e2); box-shadow: var(--shadow-soft); padding: var(--space-xl); } .who-for-inner { max-width: 60rem; padding: 0; text-align: left; } .who-for__title { margin-bottom: var(--space-md); } .who-for__list { display: grid; gap: var(--space-sm); padding-left: 1.25rem; list-style: disc; } .who-for__item { font-size: var(--font-size-sm); color: var(--color-text-main); } /* ========================= 9. Problems ========================= */ .problems { background-color: var(--color-surface-muted); } .problems__grid { display: grid; gap: var(--space-lg); } .problem-card { background-color: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-lg); border: var(--border-subtle); box-shadow: 0 10px 24px rgba(17, 24, 17, 0.06); min-height: 150px; } .problem-card__title { margin-bottom: var(--space-xs); } .problem-card__body { font-size: var(--font-size-sm); } /* ========================= 9. Solutions ========================= */ .solutions { background-color: var(--color-surface); } .solutions__grid { display: grid; gap: var(--space-lg); } .solution-card { background-color: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-lg); border: var(--border-subtle); box-shadow: 0 10px 24px rgba(17, 24, 17, 0.06); } .solution-card__title { margin-bottom: var(--space-xs); } .solution-card__body { font-size: var(--font-size-sm); } /* ========================= 9. Product cards / Origins ========================= */ .origins { background-color: var(--color-surface-muted); } .section-heading__subtitle { margin-bottom: var(--space-xl); } .origins__grid { display: grid; gap: var(--space-lg); } .origin-card { background-color: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; border: var(--border-subtle); display: flex; flex-direction: column; box-shadow: 0 10px 24px rgba(17, 24, 17, 0.06); } .origin-card__media { position: relative; padding-top: 60%; /* aspect ratio */ background: radial-gradient(circle at 0% 0%, #f5e5c4, #1d2a1c); } .origin-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .origin-card__body { padding: var(--space-md); } .origin-card__tag { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-accent-gold); margin-bottom: var(--space-xs); } .origin-card__title { margin-bottom: var(--space-xs); } .origin-card__meta { font-size: var(--font-size-md); margin-bottom: var(--space-sm); } /* ========================= 10. Stats / Credibility strip ========================= */ .stats { background-color: var(--color-bg-light); } .stats__strip { display: grid; gap: var(--space-lg); border-radius: var(--radius-lg); padding: var(--space-lg); border: var(--border-subtle); background: linear-gradient( 135deg, rgba(194, 155, 79, 0.06), rgba(53, 88, 52, 0.03) ); } .stats__item { display: flex; flex-direction: column; gap: var(--space-2xs); } .stats__value { font-family: var(--font-family-heading); font-size: var(--font-size-2xl); color: var(--color-primary); } .stats__label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); } /* ========================= 11. FAQ ========================= */ .faq__list { display: grid; gap: var(--space-sm); } .faq-item { border-radius: var(--radius-md); border: var(--border-subtle); background-color: var(--color-surface); } .faq-item__question { width: 100%; padding: var(--space-md); display: flex; justify-content: space-between; align-items: center; background: none; border: none; text-align: left; cursor: pointer; font: inherit; } .faq-item__toggle { font-size: var(--font-size-sm); } .faq-item__answer { padding: var(--space-md) var(--space-md); border-top: var(--border-subtle); font-size: var(--font-size-sm); } .faq-item__answer p { margin: 0; } /* ========================= 12. About ========================= */ .about__content { display: grid; gap: var(--space-sm); max-width: 40rem; font-size: var(--font-size-sm); } .about-cta-btn { background-color: transparent; color: var(--color-primary); border: 1px solid rgba(53, 88, 52, 0.4); } /* ========================= 13. Contact / Lead capture ========================= */ .contact { background-color: var(--color-surface); } .contact__card { border-radius: var(--radius-lg); border: var(--border-subtle); padding: var(--space-xl) var(--space-lg); background: radial-gradient(circle at 0% 0%, #f5e5c4, #fdfaf5); } .contact__form-wrapper { margin-top: var(--space-md); } .contact__form { display: grid; gap: var(--space-md); margin-top: var(--space-md); } .form-row { display: flex; justify-content: flex-start; flex-direction: column; gap: var(--space-sm); } .form-row--full { grid-column: 1 / -1; } .form-group { display: flex; flex-direction: column; gap: var(--space-2xs); } .form-dropdown { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2xs); } .dropdown-multi summary { display: flex; align-items: center; cursor: pointer; list-style: none; } select, .dropdown-multi summary { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 17l-7-7h14l-7 7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; padding-right: 2.5rem; cursor: pointer; } .dropdown-multi[open] summary { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23555' d='M12 7l7 7H5l7-7z'/%3E%3C/svg%3E"); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dropdown-multi { position: relative; } .dropdown-multi summary::-webkit-details-marker { display: none; } .dropdown-multi__options { position: absolute; width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); z-index: 10; } .dropdown-multi__options label { display: flex; align-items: center; gap: var(--space-xs); padding: 0.5rem 1rem; cursor: pointer; } .dropdown-multi__options label:hover { background: var(--color-muted); } .dropdown-multi__options input[type="checkbox"] { accent-color: var(--color-primary); width: 1rem; height: 1rem; } .label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted); } textarea { min-height: 120px; resize: vertical; } .input, textarea, .dropdown-multi summary { width: 100%; padding: 0.65rem 0.8rem; border-radius: var(--radius-sm); border: var(--border-subtle); font: inherit; background-color: #fff; color: var(--color-text-main); min-height: 3rem; box-sizing: border-box; } .contact-success { margin-top: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-md); border: var(--border-subtle); background-color: var(--color-surface-muted); font-size: var(--font-size-sm); } /* ========================= 14. Footer ========================= */ .site-footer { background-color: var(--color-bg-dark); color: var(--color-text-inverse); padding-block: var(--space-xl); font-size: var(--font-size-sm); text-align: center; } .footer__inner { display: flex; flex-direction: column; align-items: center; /* centers block items horizontally */ justify-content: center; /* optional: vertical centering if there’s a fixed height */ gap: var(--space-sm); } .site-footer__top { margin-bottom: var(--space-lg); } .site-footer__brand { max-width: 22rem; } .site-footer__logo { font-family: var(--font-family-heading); font-size: var(--font-size-base); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; } .site-footer__tagline { margin-top: var(--space-xs); color: rgba(250, 243, 230, 0.85); } .site-footer__bottom { display: flex; flex-direction: column; gap: var(--space-xs); color: rgba(250, 243, 230, 0.7); } .site-footer__meta { margin: 0; } /* ========================= 15. Media Queries (mobile-first) ========================= * /* ≥ 600px: small tablets / landscape phones */ @media (min-width: 535px) { .section { padding-block: var(--space-3xl); } .hero { padding-top: var(--space-3xl); } .stats__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .contact__form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-form__actions { grid-column: 1 / -1; /* span across all grid columns */ display: flex; justify-content: center; } .form-row--full { grid-column: 1 / -1; } } /* ≤ 535px: mobile */ @media (max-width: 630px) { .navbar { justify-content: center; } .navbar__brand { justify-content: center; width: 100%; } .navbar__title { flex: 1; text-align: center; } .navbar__cta { display: none; } /* Optional: hero text adjustments for very small screens */ .hero__copy { max-width: 100%; } .hero__title { font-size: clamp(1.75rem, 5vw, 2.25rem); } .contact-form { grid-template-columns: 1fr; } /* Actions row still spans all columns (now just one) */ .contact-form__actions { grid-column: 1 / -1; justify-content: center; } /* Make submit button comfortably wide on small screens */ .btn--wide { width: 100%; min-width: 0; /* let it shrink with the viewport */ max-width: none; } } /* ≥ 890px: large tablets */ @media (min-width: 982px) { .navbar__links { position: static; display: flex !important; flex-direction: row; align-items: center; gap: var(--space-md); padding: 0; border: none; background-color: transparent; } .navbar__links a { font-size: var(--font-size-sm); } .navbar__toggle { display: none; } .navbar--cta { display: inline-flex; } .features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .problems__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .origins__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .heritage__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr); align-items: flex-start; } .site-footer__top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } } /* ≥ 1051px: desktops */ @media (min-width: 1051px) { :root { --container-padding: 2rem; } h1 { font-size: 2.6rem; } h2 { font-size: 2rem; margin-bottom: var(--space-md); } .navbar { justify-content: space-between; } .navbar__right { display: flex; align-items: center; gap: var(--space-xs); } .navbar__links { display: flex; align-items: center; gap: var(--space-md); } .navbar__cta { margin-left: var(--space-sm); } .navbar__toggle { display: none; } .hero { padding-block: 4rem; } .hero__inner { display: flex; flex-direction: row; align-items: stretch; text-align: left; justify-content: space-between; gap: 4rem; } .hero__copy { flex: 1 1 32rem; max-width: 32rem; text-align: left; } .hero__meta, .hero__actions { justify-content: flex-start; } .hero__media { display: block; flex: 0 1 520px; max-width: 520px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); background: radial-gradient(circle at 0% 0%, #f5e5c4, #1d2a1c); position: relative; } .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .who-for { color: var(--color-text-main); text-align: center; margin-top: 0; } .who-for > .container { margin-inline: auto; padding-inline: var(--container-padding); max-width: 60rem; } .who-for-wrapper { max-width: 52rem; margin-inline: auto; } .features__grid { gap: var(--space-xl); } .origins__grid { gap: var(--space-xl); } .stats__strip { padding: var(--space-xl) var(--space-2xl); } }