/* Cedar Stone — Site Styles ========================= Consumes design tokens from tokens.css exclusively. This file must not contain a raw hex color value — every color reference is var(--token). Load order in : tokens.css, then style.css. */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-family-base); color: var(--color-ink-900); background: var(--color-limestone-50); line-height: var(--line-height-base); } body { margin: 0; } .wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 var(--space-6); } h1, h2, h3 { line-height: var(--line-height-tight); color: var(--color-cedar-700); margin: 0 0 var(--space-4); } h1 { font-size: var(--font-size-xxl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-md); } p { margin: 0 0 var(--space-4); } a { color: var(--color-sky-600); text-decoration: underline; } a:hover, a:focus { color: var(--color-cedar-600); } /* Header */ .site-header { background: var(--color-white); border-bottom: 1px solid var(--color-limestone-300); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: var(--space-4); padding-bottom: var(--space-4); gap: var(--space-4); } .brand { font-size: var(--font-size-md); font-weight: 700; color: var(--color-cedar-700); text-decoration: none; } .nav { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; } .nav a { color: var(--color-ink-700); text-decoration: none; font-size: var(--font-size-sm); } .nav a:hover, .nav a:focus { color: var(--color-cedar-600); } .nav__cta, .quote-cta { background: var(--color-cedar-600); color: var(--color-white) !important; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); text-decoration: none !important; } .nav__cta:hover, .nav__cta:focus, .quote-cta:hover, .quote-cta:focus { background: var(--color-cedar-700); } /* Hero */ .hero { padding: var(--space-16) 0; background: linear-gradient(180deg, var(--color-limestone-100), var(--color-limestone-50)); border-bottom: 1px solid var(--color-limestone-300); } .hero--sub { padding: var(--space-12) 0; } .eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--font-size-sm); color: var(--color-cedar-600); font-weight: 700; margin-bottom: var(--space-2); } .hero__lede { font-size: var(--font-size-md); max-width: 42rem; } .button { display: inline-block; padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); text-decoration: none; font-size: var(--font-size-base); font-weight: 600; } .button--primary { background: var(--color-cedar-600); color: var(--color-white); } .button--primary:hover, .button--primary:focus { background: var(--color-cedar-700); color: var(--color-white); } /* Arms grid (index) */ .arms { padding: var(--space-16) 0; } .arms__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-8); } .arm-card { background: var(--color-white); border: 1px solid var(--color-limestone-300); border-radius: var(--radius-lg); padding: var(--space-8); } .link-arrow { display: inline-block; margin-top: var(--space-2); font-weight: 600; } /* Services / area / how-it-works (landworks) */ .services, .area, .how-it-works { padding: var(--space-12) 0; border-bottom: 1px solid var(--color-limestone-300); } .service-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-6); } .service-list li { background: var(--color-white); border: 1px solid var(--color-limestone-300); border-radius: var(--radius-md); padding: var(--space-6); } .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); counter-reset: step; } .steps li { position: relative; padding-left: var(--space-12); } .steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-pill); background: var(--color-cedar-600); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-weight: 700; } /* Quote section */ .quote { padding: var(--space-16) 0; background: var(--color-limestone-100); } .quote-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4); margin-top: var(--space-6); max-width: 44rem; } .field { display: flex; flex-direction: column; gap: var(--space-1); } .field--wide { grid-column: 1 / -1; } label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-ink-700); } input, textarea { font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-limestone-300); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-ink-900); } button[type="submit"] { grid-column: 1 / -1; justify-self: start; padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); border: none; font-size: var(--font-size-base); font-weight: 600; background: var(--color-limestone-300); color: var(--color-ink-700); cursor: not-allowed; } .form-note { grid-column: 1 / -1; font-size: var(--font-size-sm); color: var(--color-ink-700); margin-top: var(--space-2); margin-bottom: 0; } /* Footer */ .site-footer { padding: var(--space-8) 0; background: var(--color-cedar-700); color: var(--color-limestone-50); } .site-footer a { color: var(--color-limestone-50); } .site-footer p { margin: 0 0 var(--space-2); font-size: var(--font-size-sm); } @media (max-width: 40rem) { h1 { font-size: var(--font-size-xl); } .nav { gap: var(--space-4); } }