:root { --font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --color-bg: #F5F9F5; --color-text: #2C402E; --color-primary: #66BB6A; --color-primary-dark: #43A047; --color-secondary: #FFCA28; --color-secondary-dark: #FFB300; --radius-tiny: 8px; --shadow-soft: 0 4px 14px rgba(44,64,46,0.08); --space-fluid: clamp(1rem, 2vw + 0.5rem, 3rem); } body { font-family: var(--font-main); font-stretch: condensed; font-weight: 600; background-color: var(--color-bg); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"); color: var(--color-text); margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; line-height: 1.6; } h1, h2, h3, .brand-name { font-weight: 800; } a { color: var(--color-primary-dark); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--color-secondary-dark); } .site-header { display: flex; align-items: center; padding: var(--space-fluid) 5%; background: #fff; box-shadow: var(--shadow-soft); border-bottom-left-radius: var(--radius-tiny); border-bottom-right-radius: var(--radius-tiny); position: relative; } .burger-menu { display: none; background: none; border: none; color: var(--color-text); cursor: pointer; padding: 0.5rem; margin-right: 1rem; } .burger-menu svg { width: 28px; height: 28px; } .main-nav { flex: 1; display: flex; justify-content: flex-start; } .nav-list { list-style: none; display: flex; gap: 2rem; padding: 0; margin: 0; } .nav-list a { color: var(--color-text); font-weight: 700; font-size: 1.1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-size: 1.5rem; color: var(--color-primary-dark); justify-content: flex-end; } .brand svg { height: 32px; width: 32px; fill: currentColor; } .hero { min-height: 50vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--space-fluid) 5%; } .hero-buttons { display: flex; gap: 1rem; margin-top: 1.5rem; } .btn { background-color: var(--color-primary); color: #fff; padding: 0.75rem 1.5rem; border-radius: var(--radius-tiny); font-weight: 700; box-shadow: var(--shadow-soft); transition: transform 0.2s, background-color 0.2s; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .btn:hover { background-color: var(--color-primary-dark); transform: translateY(-2px); color: #fff; } .btn-secondary { background-color: var(--color-secondary); color: var(--color-text); } .btn-secondary:hover { background-color: var(--color-secondary-dark); color: var(--color-text); } .contact-form { display: flex; flex-direction: column; gap: 1rem; background: #fff; padding: 2rem; border-radius: var(--radius-tiny); box-shadow: var(--shadow-soft); max-width: 500px; margin: 0 auto; width: 100%; box-sizing: border-box; } .contact-form input, .contact-form textarea { padding: 0.75rem; border: 1px solid #ccc; border-radius: var(--radius-tiny); font-family: inherit; width: 100%; box-sizing: border-box; } .map-section { width: 100%; height: 300px; background: #e0e0e0; border-radius: var(--radius-tiny); margin-top: 2rem; overflow: hidden; } .site-footer { margin-top: auto; background: #fff; padding: var(--space-fluid) 5%; box-shadow: 0 -4px 14px rgba(44,64,46,0.05); border-top-left-radius: var(--radius-tiny); border-top-right-radius: var(--radius-tiny); } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-brand h2 { margin-top: 0; color: var(--color-primary-dark); } .footer-contact h3, .footer-legal h3 { margin-top: 0; color: var(--color-text); } .footer-contact ul, .footer-legal ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .footer-contact li { display: flex; align-items: flex-start; gap: 0.5rem; } .footer-contact svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.2rem; stroke: var(--color-secondary-dark); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(0,0,0,0.05); color: #666; font-size: 0.9rem; } @media (max-width: 768px) { .site-header { justify-content: space-between; } .burger-menu { display: block; flex: 0 0 auto; } .main-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; box-shadow: var(--shadow-soft); padding: 1rem; z-index: 10; border-radius: 0 0 var(--radius-tiny) var(--radius-tiny); box-sizing: border-box; } .main-nav.active { display: block; } .nav-list { flex-direction: column; gap: 1rem; } .brand { flex: 1; } .hero, .footer-bottom, .footer-content { text-align: left; align-items: flex-start; } .hero-buttons { flex-direction: column; width: 100%; } }
/* footer extras */
.footer__extras{margin-top:16px;}
.footer__extrasInner{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;}
.footer__social{display:flex;gap:10px;align-items:center;}
.footer-social{display:inline-flex;gap:8px;align-items:center;text-decoration:none;}
.footer-social__icon{display:block;}
.footer__poemWrap{max-width:520px;}
.footer-poem{opacity:0.9;font-size:0.95em;line-height:1.35;}
/* --- injected by logo step --- */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-logo{width:28px;height:28px;display:inline-block;flex:0 0 auto}
.brand-logo *{vector-effect:non-scaling-stroke}
/* --- /injected by logo step --- */