/* ============================================================ PLUSH LAWNS — shared visual system Refined, grounded local-service brand for Calgary. Palette: deep evergreen, fresh grass accent, warm off-white, charcoal ink, cool ice accent for winter services. ============================================================ */ /* Fonts are loaded via + stylesheet in each page (faster first paint than a render-blocking CSS @import). */ :root { /* ---- Brand color ---- */ --evergreen: #163a2c; /* primary deep green */ --evergreen-800: #102b21; /* darker, footers / nav */ --evergreen-900: #0c211a; /* deepest */ --evergreen-600: #1f4d3a; --moss: #2f6b4f; --grass: #5b9e3a; /* fresh accent */ --grass-bright: #6fb343; --grass-soft: #e7f0dc; /* tint surfaces */ --cream: #f6f2e9; /* warm off-white page bg */ --cream-2: #efe9db; /* slightly deeper panel */ --paper: #fffdf8; /* card white */ --ink: #1c241f; /* charcoal text */ --ink-soft: #4f5a52; /* secondary text */ --ink-faint: #646e66; /* tertiary / meta (>=4.5:1 on cream) */ --ice: #cfe1e6; /* snow accent tint */ --ice-mid: #8fb3bd; --ice-deep: #3b5d66; /* winter section ink */ --line: #e3dccd; /* hairline on cream */ --line-strong: #d3cab6; --gold: #c79a3f; /* subtle premium/star accent */ /* ---- Type ---- */ --display: 'Bricolage Grotesque', Georgia, serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* ---- Radii ---- */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; /* ---- Shadow (soft, grounded) ---- */ --shadow-sm: 0 1px 2px rgba(20,40,30,.06), 0 2px 8px rgba(20,40,30,.05); --shadow-md: 0 4px 14px rgba(16,43,33,.10), 0 12px 30px rgba(16,43,33,.07); --shadow-lg: 0 10px 30px rgba(16,43,33,.14), 0 30px 60px rgba(16,43,33,.10); --ease: cubic-bezier(.22,1,.36,1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--cream); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; /* backstop against accidental horizontal scroll */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Visible keyboard focus for all interactive elements */ :focus-visible { outline: 3px solid var(--grass); outline-offset: 2px; border-radius: 3px; } :focus:not(:focus-visible) { outline: none; } /* ---------- Layout ---------- */ .wrap { width: min(1200px, 92vw); margin-inline: auto; } .wrap-narrow { width: min(880px, 92vw); margin-inline: auto; } section { position: relative; } /* ---------- Type helpers ---------- */ .display { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; } h1.display { font-size: clamp(2.6rem, 6vw, 4.6rem); } h2.display { font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -0.02em; } h3.display { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.015em; } .eyebrow { font-family: var(--sans); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--moss); display: inline-flex; align-items: center; gap: 0.55em; } .eyebrow.plain::before { display: none; } .lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink-soft); line-height: 1.6; text-wrap: pretty; } .muted { color: var(--ink-soft); } .tnum { font-variant-numeric: tabular-nums; } /* ---------- Buttons ---------- */ .btn { font-family: var(--sans); font-weight: 600; font-size: 1rem; border: none; border-radius: var(--r-pill); padding: 0.95em 1.6em; display: inline-flex; align-items: center; gap: 0.6em; cursor: pointer; transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease); line-height: 1; white-space: nowrap; } .btn svg { width: 1.15em; height: 1.15em; } .btn-primary { background: var(--grass); color: #fff; box-shadow: 0 6px 18px rgba(91,158,58,.32); } .btn-primary:hover { background: var(--grass-bright); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(91,158,58,.4); } .btn-dark { background: var(--evergreen); color: var(--cream); } .btn-dark:hover { background: var(--evergreen-600); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--evergreen); box-shadow: inset 0 0 0 1.5px var(--line-strong); } .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--evergreen); transform: translateY(-2px); } .btn-ghost-light { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(246,242,233,.35); } .btn-ghost-light:hover { box-shadow: inset 0 0 0 1.5px var(--cream); transform: translateY(-2px); } .btn-lg { font-size: 1.08rem; padding: 1.1em 1.9em; } /* ---------- Cards ---------- */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } /* ---------- Pills / chips ---------- */ .chip { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.5em 0.95em; } .chip svg { width: 1.05em; height: 1.05em; color: var(--grass); } /* ---------- Section rhythm ---------- */ .section-pad { padding: clamp(64px, 9vw, 130px) 0; } .section-pad-sm { padding: clamp(48px, 6vw, 90px) 0; } /* ---------- Reveal on scroll ---------- */ /* Content is visible by default. The hidden start state only applies once JS has added `.js` to , so no-JS / headless / social-preview renders never ship blank sections. Motion enhances an already-visible default. */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- Image slot styling tweak ---------- */ image-slot { --slot-bg: var(--cream-2); background: var(--cream-2); } /* ---------- Brand mark ---------- */ .mark { display: inline-flex; align-items: center; gap: 0.6em; } .mark .mark-glyph { width: 34px; height: 34px; flex: none; } .mark .mark-word { font-family: var(--display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.02em; line-height: 1; } .mark .mark-word b { color: var(--grass); font-weight: 700; }