/* ============================================================================ * /v2/site.css * * Small additions on top of /free-roof-estimate/v2.css for the v2 mock. * The mock pages use so they * inherit the existing v2 design system tokens (DM Serif + Inter, navy/cream/ * terra-cotta, header/footer/hero/section patterns) and only this file owns * the four-service grid + service-page sections that didn't exist before. * ============================================================================ */ /* ── 4-service grid on the new homepage + the service info pages ────────── */ body.v2-mock .v2-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; } body.v2-mock .v2-service-card { position: relative; background: #fff; border: 1px solid var(--rv2-line); border-radius: 18px; padding: 32px 28px 28px; display: flex; flex-direction: column; transition: border-color 0.25s, box-shadow 0.25s, transform 0.18s; } body.v2-mock .v2-service-card:hover { border-color: var(--rv2-accent); box-shadow: 0 18px 36px -18px rgba(194, 65, 12, 0.30); transform: translateY(-2px); } body.v2-mock .v2-service-card .v2-svc-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--rv2-warm); color: var(--rv2-accent) !important; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } body.v2-mock .v2-service-card .v2-svc-icon svg { width: 26px; height: 26px; } body.v2-mock .v2-service-card h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--rv2-ink) !important; } body.v2-mock .v2-service-card p { font-size: 15px; line-height: 1.55; color: var(--rv2-ink-soft) !important; margin: 0 0 18px; flex: 1; } body.v2-mock .v2-service-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } body.v2-mock .v2-service-card-tags span { display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; background: var(--rv2-cream-2); color: var(--rv2-ink-soft) !important; border-radius: 999px; } body.v2-mock .v2-service-card a.v2-svc-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--rv2-accent) !important; text-decoration: none; letter-spacing: 0.02em; } body.v2-mock .v2-service-card a.v2-svc-link::after { content: "→"; transition: transform 0.2s; } body.v2-mock .v2-service-card:hover a.v2-svc-link::after { transform: translateX(3px); } /* ── Style/material option cards (windows + gutters info pages) ─────────── */ body.v2-mock .v2-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; } body.v2-mock .v2-option-card { background: #fff; border: 1px solid var(--rv2-line); border-radius: 14px; padding: 22px; } body.v2-mock .v2-option-card .v2-opt-num { width: 32px; height: 32px; border-radius: 8px; background: var(--rv2-warm); color: var(--rv2-accent) !important; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-family: 'DM Serif Display', Georgia, serif; font-size: 18px; } body.v2-mock .v2-option-card h4 { font-family: 'DM Serif Display', Georgia, serif; font-size: 20px; line-height: 1.2; margin: 0 0 6px; color: var(--rv2-ink) !important; } body.v2-mock .v2-option-card p { font-size: 14px; line-height: 1.5; color: var(--rv2-ink-soft) !important; margin: 0; } /* ── Value-prop strip on homepage ───────────────────────────────────────── */ body.v2-mock .v2-value-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; } body.v2-mock .v2-value-card { text-align: left; } body.v2-mock .v2-value-card .v2-val-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--rv2-warm); color: var(--rv2-accent) !important; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } body.v2-mock .v2-value-card h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: 20px; line-height: 1.2; margin: 0 0 6px; color: var(--rv2-ink) !important; } body.v2-mock .v2-value-card p { font-size: 14px; line-height: 1.55; color: var(--rv2-ink-soft) !important; margin: 0; } /* ── Service area pill list ─────────────────────────────────────────────── */ body.v2-mock .v2-area-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; justify-content: center; } body.v2-mock .v2-area-list span { display: inline-block; padding: 8px 18px; background: #fff; border: 1px solid var(--rv2-line); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--rv2-ink) !important; } /* ── Preview banner so the user knows they're on the mock ──────────────── */ body.v2-mock .v2-preview-banner { position: sticky; top: 0; left: 0; right: 0; z-index: 100; background: #1F2937; color: #FFF; text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); } body.v2-mock .v2-preview-banner a { color: var(--rv2-orange-hi); text-decoration: underline; } /* When the banner is sticky, push the header below it */ body.v2-mock.has-banner .rv2-header { top: 35px; } /* ── Mobile ─────────────────────────────────────────────────────────────── */ @media (max-width: 920px) { body.v2-mock .v2-service-grid { grid-template-columns: 1fr; gap: 14px; } body.v2-mock .v2-options-grid { grid-template-columns: 1fr 1fr; } body.v2-mock .v2-value-strip { grid-template-columns: 1fr 1fr; gap: 18px; } } @media (max-width: 560px) { body.v2-mock .v2-options-grid { grid-template-columns: 1fr; } body.v2-mock .v2-value-strip { grid-template-columns: 1fr; } }