/* ========================================================================== Modular Outdoor Living — Theme Stylesheet ========================================================================== */ :root { --bg: #F5F5F2; --bg-alt: #FFFFFF; --ink: #0A0A0A; --ink-soft: #1A1A1A; --muted: #6B7280; --muted-soft: #9CA3AF; --line: rgba(10, 10, 10, 0.08); --line-strong: rgba(10, 10, 10, 0.15); --dark: #0F0F0F; --dark-card: #141414; --accent: #228B22; --accent-soft: rgba(34, 139, 34, 0.1); --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-pill: 999px; --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --container: 1280px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--ink); font-weight: 400; font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } /* Prevent horizontal scroll caused by stray overflow on mobile */ html, body { max-width: 100%; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } /* Larger touch targets on mobile by default */ button, a, input[type="submit"], input[type="button"] { -webkit-tap-highlight-color: transparent; } /* Prevent iOS auto-zoom on form fields (must be >= 16px) */ input, select, textarea { font-size: 16px; } .container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; width: 100%; } /* Accessibility */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 1rem; background: var(--ink); color: var(--bg); text-decoration: none; } .skip-link:focus { left: 0; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* ───── Buttons ───── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.85rem 1.6rem; border-radius: var(--radius-pill); font-family: var(--font); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; border: none; cursor: pointer; text-decoration: none; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .btn-light { background: #fff; color: var(--ink); } .btn-light:hover { background: #f5f5f2; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .btn-glass { background: rgba(255, 255, 255, 0.12); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); } .btn-glass:hover { background: rgba(255, 255, 255, 0.22); } .btn-sm { padding: 0.55rem 1.15rem; font-size: 0.85rem; } .btn-lg { padding: 1rem 2rem; font-size: 1rem; } .btn-block { width: 100%; } .btn-arrow { display: inline-flex; align-items: center; transition: transform 0.25s; } .btn:hover .btn-arrow { transform: translateX(3px); } /* ───── Site Header ───── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(245, 245, 242, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); transition: padding 0.25s ease; } .site-header__inner { max-width: var(--container); margin: 0 auto; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .logo-link { display: flex; align-items: center; line-height: 0; } .logo-mark { height: 36px; width: auto; display: block; } .primary-nav .nav-list { display: flex; gap: 2rem; list-style: none; align-items: center; } .primary-nav .nav-list a { color: var(--ink); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.005em; position: relative; transition: opacity 0.2s; } .primary-nav .nav-list a:hover { opacity: 0.65; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; margin: -0.5rem; } .menu-toggle span { display: block; width: 22px; height: 1.6px; background: var(--ink); margin: 5px 0; transition: 0.3s; border-radius: 2px; } /* ───── HERO ───── */ .hero { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; background-color: #1a1a1a; background-size: cover; background-position: center; color: #fff; padding: 8rem 2rem 6rem; overflow: hidden; } .hero-placeholder { position: absolute; inset: 0; z-index: 0; } .hero-placeholder svg { width: 100%; height: 100%; object-fit: cover; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%); z-index: 1; } .hero-content { position: relative; z-index: 2; text-align: center; max-width: 900px; margin: 0 auto; } .hero-title { font-size: clamp(2.5rem, 6vw, 4.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 1.5rem; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); } .hero-subtitle { font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 400; color: rgba(255, 255, 255, 0.9); max-width: 620px; margin: 0 auto 1.75rem; line-height: 1.55; } /* ───── Hero Price Block ───── */ .hero-price-block { margin: 0 auto 1.75rem; max-width: 620px; } .hero-price-line { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 0.5rem; color: #fff; font-weight: 500; padding: 0.65rem 1.25rem; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-pill); font-size: 1rem; } .hero-price-label { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; letter-spacing: 0.02em; } .hero-price-value { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; } .hero-price-sep { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; margin: 0 0.15rem; } .hero-finance-value { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; } .hero-finance-apr { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.02em; } .finance-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: transparent; border: none; color: rgba(255, 255, 255, 0.65); cursor: pointer; border-radius: 50%; transition: color 0.2s, background 0.2s; } .finance-info-btn:hover, .finance-info-btn[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.12); } .hero-finance-disclosure { margin: 0.85rem auto 0; max-width: 640px; padding: 0.9rem 1.1rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.85); font-size: 0.75rem; line-height: 1.55; text-align: left; } .hero-finance-disclosure[hidden] { display: none; } .hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; } /* ───── Hero Trust Bar ───── */ .hero-trust-bar { display: flex; justify-content: center; gap: 3rem; list-style: none; padding: 1.25rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.15); max-width: 620px; margin: 0 auto; } .hero-trust-bar li { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; } .hero-trust-bar strong { font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1; } .hero-trust-bar span { font-size: 0.72rem; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; } .hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); z-index: 2; transition: color 0.2s, transform 0.3s; animation: bounceY 2.5s ease-in-out infinite; } .hero-scroll:hover { color: #fff; } @keyframes bounceY { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* ───── Section Common ───── */ .site-main > section { padding: 6rem 0; } .section-heading { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); } .section-heading--center { text-align: center; margin-bottom: 3rem; } .section-header-center { text-align: center; max-width: 700px; margin: 0 auto 3rem; } .section-sub { color: var(--muted); font-size: 1.05rem; line-height: 1.55; margin-top: 0.75rem; } /* ───── FEATURES ───── */ .features { background: var(--bg-alt); } .features-inner { max-width: var(--container); margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: start; } .features-left .section-heading { margin-bottom: 2.5rem; max-width: 460px; } .features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; } .feature-item { display: flex; flex-direction: column; } .feature-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--ink); margin-bottom: 1rem; } .feature-title { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.3rem; } .feature-desc { color: var(--muted); font-size: 0.92rem; line-height: 1.55; } .features-right { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .feature-photo { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--dark); aspect-ratio: 3/4; } .feature-photo img, .feature-photo svg { width: 100%; height: 100%; object-fit: cover; } .photo-caption { position: absolute; bottom: 0.75rem; left: 0.75rem; right: 0.75rem; background: rgba(10, 10, 10, 0.92); color: #fff; padding: 0.85rem 1rem; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500; line-height: 1.4; display: flex; align-items: flex-start; gap: 0.5rem; backdrop-filter: blur(8px); } .caption-icon { display: inline-flex; flex-shrink: 0; margin-top: 1px; color: #ffd966; } /* ───── GALLERY ───── */ .gallery { background: var(--bg); } .filter-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; } .pill { padding: 0.55rem 1.25rem; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-family: var(--font); font-weight: 500; font-size: 0.88rem; color: var(--ink); cursor: pointer; transition: all 0.2s; } .pill:hover { background: rgba(10, 10, 10, 0.05); } .pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); } .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .gallery-item { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/5; background: var(--dark); transition: transform 0.4s ease, opacity 0.4s ease; cursor: pointer; } .gallery-item.is-hidden { display: none; } .gallery-item:hover { transform: translateY(-4px); } .gallery-item img, .gallery-item svg { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .gallery-item:hover img, .gallery-item:hover svg { transform: scale(1.04); } .gallery-caption { position: absolute; bottom: 0.75rem; left: 0.75rem; right: 0.75rem; color: #fff; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 0.85rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); border-radius: var(--radius-sm); opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; } .gallery-item:hover .gallery-caption { opacity: 1; transform: translateY(0); } /* ───── PRICING ───── */ .pricing { background: var(--bg); } .pricing-card { background: var(--dark-card); color: #fff; border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1.05fr; min-height: 620px; } .pricing-left { padding: 3.5rem 3rem; display: flex; flex-direction: column; } .pricing-title { font-size: clamp(1.8rem, 2.6vw, 2.3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 2rem; max-width: 320px; } .pricing-steps { list-style: none; margin-bottom: 2.5rem; } .pricing-steps li { display: flex; gap: 1rem; padding: 0.85rem 0; } .step-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .pricing-steps h4 { font-size: 1rem; font-weight: 700; margin-bottom: 0.2rem; letter-spacing: -0.01em; } .pricing-steps p { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; line-height: 1.5; } .price-box { background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-md); padding: 1.5rem; margin-top: auto; } .price-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; } .price-label { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); font-weight: 500; } .price-amount { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.025em; } .price-included { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--accent); margin-bottom: 1.25rem; } .included-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); } .finance-note { font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); text-align: center; margin-top: 1.25rem; line-height: 1.5; } .pricing-right { position: relative; background: var(--dark); overflow: hidden; min-height: 500px; } .pricing-right img, .pricing-right svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .availability-tag { position: absolute; top: 1.5rem; right: 1.5rem; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 0.75rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.82rem; backdrop-filter: blur(8px); z-index: 2; } .availability-label { display: block; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.2rem; } .availability-value { font-weight: 600; } /* ───── TESTIMONIALS ───── */ .testimonials { background: var(--bg-alt); } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: var(--container); margin: 0 auto; padding: 0 2rem; } .testimonial-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.75rem; display: flex; flex-direction: column; } .testimonial-quote { font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); font-style: italic; margin-bottom: 1.25rem; flex-grow: 1; } .testimonial-quote p { margin-bottom: 0.5rem; } .testimonial-divider { border: none; border-top: 1px solid var(--line); margin-bottom: 1.25rem; } .testimonial-author { display: flex; align-items: center; gap: 0.75rem; } .author-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--ink); flex-shrink: 0; } .author-avatar img { width: 100%; height: 100%; object-fit: cover; } .author-avatar--initial { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.95rem; font-weight: 600; } .author-info { display: flex; flex-direction: column; } .author-name { font-size: 0.92rem; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; } .author-role { font-size: 0.78rem; color: var(--muted); margin-top: 1px; } /* ───── CTA BANNER ───── */ .cta-banner { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; background-color: #0a0a0a; background-size: cover; background-position: center; color: #fff; padding: 5rem 2rem; overflow: hidden; } .cta-placeholder { position: absolute; inset: 0; } .cta-placeholder svg { width: 100%; height: 100%; object-fit: cover; } .cta-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; } .cta-content { position: relative; z-index: 2; text-align: center; max-width: 800px; } .cta-title { font-size: clamp(1.85rem, 3.5vw, 2.85rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 2rem; } /* ───── CONTACT ───── */ .contact { background: var(--bg); } .contact-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; } .contact-intro .section-heading { margin-bottom: 1rem; } .contact-intro .section-sub { margin-bottom: 2.5rem; max-width: 440px; } .contact-list { list-style: none; border-top: 1px solid var(--line); } .contact-list li { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); color: var(--ink); } .contact-list a { color: var(--ink); transition: opacity 0.2s; } .contact-list a:hover { opacity: 0.65; } .contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--line); color: var(--ink); flex-shrink: 0; } .contact-form { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 2.25rem; position: relative; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .field.full { grid-column: 1 / -1; } .field label { font-size: 0.78rem; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; } .field input, .field select, .field textarea { padding: 0.75rem 1rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.92rem; color: var(--ink); outline: none; transition: border-color 0.2s, background 0.2s; width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); background: #fff; } .field textarea { resize: vertical; min-height: 100px; font-family: var(--font); } .field select { cursor: pointer; } .form-feedback { margin-top: 1rem; font-size: 0.85rem; min-height: 1.4rem; } .form-feedback.success { color: var(--accent); } .form-feedback.error { color: #d44; } /* ───── Contact Form 7 styling ───── */ .contact-form .wpcf7 { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 2.25rem; } .contact-form .wpcf7 form > p { margin: 0 0 1rem; } .contact-form .wpcf7 label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 0.4rem; } .contact-form .wpcf7-form-control-wrap { display: block; } .contact-form .wpcf7 input[type="text"], .contact-form .wpcf7 input[type="email"], .contact-form .wpcf7 input[type="tel"], .contact-form .wpcf7 input[type="url"], .contact-form .wpcf7 input[type="number"], .contact-form .wpcf7 input[type="date"], .contact-form .wpcf7 select, .contact-form .wpcf7 textarea { padding: 0.75rem 1rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.92rem; color: var(--ink); outline: none; transition: border-color 0.2s, background 0.2s; width: 100%; line-height: 1.4; } .contact-form .wpcf7 input:focus, .contact-form .wpcf7 select:focus, .contact-form .wpcf7 textarea:focus { border-color: var(--ink); background: #fff; } .contact-form .wpcf7 textarea { resize: vertical; min-height: 110px; font-family: var(--font); } .contact-form .wpcf7 select { cursor: pointer; } /* Checkbox / radio styling */ .contact-form .wpcf7 .wpcf7-checkbox, .contact-form .wpcf7 .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } .contact-form .wpcf7 .wpcf7-list-item { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; } .contact-form .wpcf7 .wpcf7-list-item label { margin-bottom: 0; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; font-size: 0.9rem; cursor: pointer; } .contact-form .wpcf7 input[type="checkbox"], .contact-form .wpcf7 input[type="radio"] { width: 16px; height: 16px; accent-color: var(--ink); } /* Submit button */ .contact-form .wpcf7 input[type="submit"], .contact-form .wpcf7 .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; padding: 1rem 2rem; width: 100%; background: var(--ink); color: #fff; border: none; border-radius: var(--radius-pill); font-family: var(--font); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; cursor: pointer; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); margin-top: 0.5rem; -webkit-appearance: none; appearance: none; } .contact-form .wpcf7 input[type="submit"]:hover, .contact-form .wpcf7 .wpcf7-submit:hover { background: #000; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } /* Required asterisks (if you use them in field labels like "Name *") */ .contact-form .wpcf7 .wpcf7-not-valid { border-color: #d44; } .contact-form .wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: 0.3rem; color: #d44; font-size: 0.78rem; } /* Response messages */ .contact-form .wpcf7 .wpcf7-response-output { margin: 1.25rem 0 0 !important; padding: 0.85rem 1rem !important; border-radius: var(--radius-sm) !important; border: 1px solid var(--line) !important; font-size: 0.88rem; background: var(--bg); } .contact-form .wpcf7 form.sent .wpcf7-response-output { border-color: var(--accent) !important; background: var(--accent-soft) !important; color: var(--accent); } .contact-form .wpcf7 form.invalid .wpcf7-response-output, .contact-form .wpcf7 form.failed .wpcf7-response-output { border-color: #d44 !important; background: #fef0f0 !important; color: #c33; } /* AJAX loader */ .contact-form .wpcf7 .wpcf7-spinner { margin: 0 0 0 1rem; } /* Two-column row helper — if you use [text] tags in the form template like:

...

...

*/ .contact-form .cf7-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .contact-form .cf7-row > p { margin: 0 0 1rem; } @media (max-width: 600px) { .contact-form .cf7-row { grid-template-columns: 1fr; } } .cf7-empty-notice { padding: 1.5rem; background: rgba(0, 0, 0, 0.04); border-radius: 12px; font-size: 0.9rem; color: var(--muted); } /* ═══════════════════════════════════════════ FAQ SECTION ═══════════════════════════════════════════ */ .faq { background: var(--bg); } .faq-list { max-width: 820px; margin: 0 auto; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0.5rem 2rem; box-shadow: 0 1px 3px rgba(10, 10, 10, 0.04); } .faq-item { border-bottom: 1px solid var(--line); padding: 0; } .faq-item:last-child { border-bottom: none; } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; cursor: pointer; font-size: 1.02rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; list-style: none; transition: color 0.2s; } .faq-question::-webkit-details-marker { display: none; } .faq-question:hover { color: var(--accent); } .faq-question > span { flex: 1; } .faq-icon { flex-shrink: 0; width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: var(--bg); color: var(--muted); transition: transform 0.3s ease, background 0.2s, color 0.2s; } details[open] .faq-icon { transform: rotate(45deg); background: var(--accent); color: #fff; } .faq-answer { padding: 0 0 1.5rem; color: var(--muted); font-size: 0.94rem; line-height: 1.65; } .faq-answer p { margin-bottom: 0.75rem; } .faq-answer p:last-child { margin-bottom: 0; } /* ═══════════════════════════════════════════ PRODUCT PAGE ENHANCEMENTS ═══════════════════════════════════════════ */ /* Hero trust bar on product page */ .mol-hero-trust { list-style: none; display: flex; gap: 2.5rem; margin-top: 1.5rem; padding: 1.25rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.2); flex-wrap: wrap; } .mol-hero-trust li { display: flex; flex-direction: column; gap: 0.15rem; } .mol-hero-trust strong { font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1; } .mol-hero-trust span { font-size: 0.72rem; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; } /* Availability pill in summary */ .mol-availability-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; background: rgba(34, 139, 34, 0.15); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.25); border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 1rem; } .mol-avail-dot { width: 8px; height: 8px; background: #4ade80; border-radius: 50%; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); animation: molPulse 2s ease-in-out infinite; } @keyframes molPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.9); } } /* Finance pill on product page — light-on-dark */ .mol-finance-pill { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; padding: 0.85rem 1rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); margin: 0.75rem 0 1.5rem; font-size: 0.9rem; color: #fff; } .mol-finance-or { color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; } .mol-finance-pill strong { font-size: 1.15rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; } .mol-finance-apr { font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.02em; margin-left: auto; } .mol-finance-info { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: transparent; border: none; color: rgba(255, 255, 255, 0.55); cursor: pointer; border-radius: 50%; transition: color 0.2s, background 0.2s; } .mol-finance-info:hover, .mol-finance-info[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.1); } .mol-finance-details { padding: 0.85rem 1rem; background: rgba(0, 0, 0, 0.3); border-left: 3px solid #4ade80; border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.8); font-size: 0.78rem; line-height: 1.6; margin-bottom: 1.5rem; } .mol-finance-details[hidden] { display: none; } /* Buy trust badges — bright against dark card */ .mol-buy-trust { list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.1); display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; } .mol-buy-trust li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.9); line-height: 1.35; } .mol-buy-trust li svg { color: #4ade80; flex-shrink: 0; } .mol-buy-trust strong { font-weight: 700; color: #fff; } /* Payment schedule — mini timeline in buy card */ .mol-payment-schedule { margin: 0.75rem 0 1.5rem; padding: 1rem 1.1rem 1.1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); } .mol-payment-schedule-title { font-size: 0.7rem; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 0.7rem; } .mol-payment-steps { list-style: none; margin: 0; padding: 0; counter-reset: pay-step; } .mol-payment-steps li { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: relative; } .mol-payment-steps li:last-child { border-bottom: none; } .mol-payment-steps li::before { counter-increment: pay-step; content: counter(pay-step); width: 20px; height: 20px; background: rgba(74, 222, 128, 0.15); color: #4ade80; border-radius: 50%; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; align-self: center; } .mol-payment-steps li { padding-left: 0; } .mol-pay-amount { font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; } .mol-pay-when { font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); line-height: 1.35; } /* Payment steps: grid needs 3 columns to include the counter */ .mol-payment-steps { display: block; } .mol-payment-steps li { display: flex; gap: 0.85rem; align-items: center; } .mol-payment-steps li::before { flex-shrink: 0; } .mol-payment-steps li > .mol-pay-amount { min-width: 62px; } /* Fineprint under the Reserve CTA */ .mol-cta-fineprint { margin: 0.85rem 0 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); line-height: 1.45; text-align: center; } /* Hero — was-price strike-through and savings badge */ .hero-price-was { color: rgba(255, 255, 255, 0.55); font-size: 0.95rem; text-decoration: line-through; font-weight: 500; margin-left: 0.25rem; } .hero-savings-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; background: rgba(74, 222, 128, 0.2); color: #4ade80; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin-left: 0.5rem; } /* Planning permission callout */ .mol-planning { max-width: var(--container); margin: 4rem auto; padding: 0 2rem; } .mol-planning-inner { background: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%); border: 1px solid rgba(34, 139, 34, 0.15); border-radius: var(--radius-lg); padding: 2.5rem; display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: start; } .mol-planning-icon { width: 64px; height: 64px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mol-planning-copy h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.75rem; } .mol-planning-copy p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; margin-bottom: 0.75rem; } .mol-planning-note { font-size: 0.8rem !important; color: var(--muted) !important; margin-bottom: 0 !important; } /* Dimensions grid */ .mol-dimensions { max-width: var(--container); margin: 5rem auto; padding: 0 2rem; } .mol-dim-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 2.5rem; } .mol-dim-item { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.75rem 1rem; text-align: center; transition: transform 0.2s, border-color 0.2s; } .mol-dim-item:hover { transform: translateY(-3px); border-color: var(--ink); } .mol-dim-value { display: block; font-size: 2rem; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.35rem; } .mol-dim-label { display: block; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } /* Delivery process */ .mol-process { max-width: var(--container); margin: 5rem auto; padding: 0 2rem; } .mol-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; position: relative; } .mol-process-step { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 2rem 1.75rem; position: relative; transition: transform 0.2s, box-shadow 0.2s; } .mol-process-step:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); } .mol-step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--ink); color: #fff; border-radius: 50%; font-weight: 700; font-size: 1rem; margin-bottom: 1.25rem; } .mol-process-step h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; letter-spacing: -0.01em; } .mol-process-step p { color: var(--muted); font-size: 0.88rem; line-height: 1.55; } /* Comparison strip */ .mol-compare { max-width: var(--container); margin: 5rem auto; padding: 0 2rem; } .mol-compare-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; } .mol-compare-item { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 2rem 1.75rem; position: relative; } .mol-compare-item h4 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; letter-spacing: -0.01em; } .mol-compare-price { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin-bottom: 1.25rem; letter-spacing: -0.02em; } .mol-compare-price .mol-compare-or { display: block; font-size: 0.85rem; color: var(--muted); font-weight: 400; margin-top: 0.25rem; } .mol-compare-cons, .mol-compare-pros { list-style: none; margin: 0; padding: 0; } .mol-compare-cons li, .mol-compare-pros li { padding: 0.4rem 0 0.4rem 1.5rem; position: relative; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; } .mol-compare-cons li::before { content: '✕'; position: absolute; left: 0; top: 0.4rem; color: #c33; font-weight: 700; } .mol-compare-pros li::before { content: '✓'; position: absolute; left: 0; top: 0.4rem; color: var(--accent); font-weight: 700; } .mol-compare-featured { background: var(--ink); color: #fff; border-color: var(--ink); transform: scale(1.02); } .mol-compare-featured h4, .mol-compare-featured .mol-compare-price { color: #fff; } .mol-compare-featured .mol-compare-or { color: rgba(255, 255, 255, 0.6); } .mol-compare-featured .mol-compare-pros li { color: rgba(255, 255, 255, 0.9); } .mol-compare-badge { position: absolute; top: -12px; right: 1.5rem; background: var(--accent); color: #fff; padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } /* Sticky CTA bar */ .mol-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); padding: 0.85rem 1.5rem; } .mol-sticky-cta.is-visible { transform: translateY(0); } .mol-sticky-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .mol-sticky-info { display: flex; flex-direction: column; gap: 0.1rem; } .mol-sticky-price { font-size: 1.1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; } .mol-sticky-price .amount, .mol-sticky-price .woocommerce-Price-amount { color: var(--ink) !important; } .mol-sticky-finance { font-size: 0.75rem; color: var(--muted); } .mol-sticky-cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; background: var(--ink); color: #fff; border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; font-size: 0.92rem; transition: background 0.2s, transform 0.2s; white-space: nowrap; } .mol-sticky-cta-btn:hover { background: #000; transform: translateY(-1px); } /* Add bottom padding when sticky bar is visible so it doesn't cover footer */ body.single-product.has-sticky-cta { padding-bottom: 80px; } /* Fix testimonial rendering on product page (WooCommerce style conflicts) */ .mol-testimonials-wrap .testimonial-card { text-align: left; } .mol-testimonials-wrap .testimonial-quote { display: block; padding: 0; margin: 0 0 1.25rem; border: none; background: transparent; color: var(--ink-soft) !important; font-style: italic; quotes: '"' '"' "'" "'"; } .mol-testimonials-wrap .testimonial-quote p { display: inline; margin: 0; padding: 0; } .mol-testimonials-wrap .testimonial-quote::before, .mol-testimonials-wrap .testimonial-quote::after { content: none; } .mol-testimonials-wrap blockquote { border: none; padding: 0; margin: 0; } .mol-testimonials-wrap .testimonial-author { display: flex !important; align-items: center !important; gap: 0.75rem !important; flex-direction: row !important; } /* ───── Standard content ───── */ .standard-content { padding-top: 8rem; padding-bottom: 6rem; } .standard-content h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.5rem; letter-spacing: -0.03em; font-weight: 700; } .standard-content h2 { font-size: 1.6rem; margin: 2rem 0 1rem; font-weight: 700; } .standard-content p { margin-bottom: 1.25rem; color: var(--ink-soft); } /* ───── FOOTER ───── */ .site-footer { background: var(--dark); color: #fff; padding: 4rem 2rem 1.5rem; } .footer-inner { max-width: var(--container); margin: 0 auto 3rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; } .footer-logo { margin-bottom: 1.25rem; } .footer-logo .logo-mark { height: 40px; } .footer-brand p { color: rgba(255, 255, 255, 0.55); font-size: 0.9rem; line-height: 1.65; margin-bottom: 1.5rem; max-width: 360px; } .footer-social { display: flex; gap: 0.6rem; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: #fff; transition: background 0.2s; } .footer-social a:hover { background: rgba(255, 255, 255, 0.12); } .footer-col h6 { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 1.25rem; font-weight: 600; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 0.65rem; font-size: 0.9rem; } .footer-col a { color: rgba(255, 255, 255, 0.85); transition: color 0.2s; } .footer-col a:hover { color: #fff; } .footer-contact li { display: flex; align-items: flex-start; gap: 0.65rem; line-height: 1.5; } .footer-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; flex-shrink: 0; margin-top: 2px; color: rgba(255, 255, 255, 0.6); } .footer-bottom { max-width: var(--container); margin: 0 auto; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); flex-wrap: wrap; gap: 1rem; } .footer-meta { display: flex; gap: 1.5rem; } .footer-meta a { color: rgba(255, 255, 255, 0.55); transition: color 0.2s; } .footer-meta a:hover { color: #fff; } /* ───── Animations ───── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.in { opacity: 1; transform: translateY(0); } /* ═══════════════════════════════════════════ CHECKOUT PAGE Styles both WooCommerce Blocks checkout and classic checkout ═══════════════════════════════════════════ */ /* Payment schedule notice — shown at top of checkout summary */ .mol-checkout-schedule { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.25rem; font-family: var(--font); box-shadow: 0 1px 3px rgba(10, 10, 10, 0.03); } .mol-checkout-schedule-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; } .mol-schedule-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.14em; padding-top: 4px; } .mol-schedule-total { font-size: 0.8rem; color: var(--muted); text-align: right; line-height: 1.4; } .mol-schedule-total strong { display: block; font-size: 1.1rem; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; } .mol-schedule-total em { display: inline-block; font-style: normal; font-size: 0.65rem; font-weight: 700; padding: 2px 7px; background: rgba(34, 139, 34, 0.1); color: var(--accent); border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; } .mol-checkout-steps { list-style: none; margin: 0; padding: 0; } .mol-checkout-steps li { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); position: relative; } .mol-checkout-steps li:last-child { border-bottom: none; } .mol-checkout-steps .mol-step-num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(10, 10, 10, 0.05); color: var(--muted); font-size: 0.75rem; font-weight: 700; } .mol-checkout-steps li.is-now .mol-step-num { background: var(--accent); color: #fff; } .mol-checkout-steps li > div { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; } .mol-step-amount { font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; } .mol-step-when { font-size: 0.8rem; color: var(--muted); line-height: 1.35; } .mol-step-tag { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; color: var(--accent); background: rgba(34, 139, 34, 0.1); padding: 4px 8px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.1em; } .mol-checkout-note { font-size: 0.78rem; color: var(--muted); line-height: 1.55; margin: 1rem 0 0; padding: 0.85rem 1rem; background: rgba(10, 10, 10, 0.03); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); } /* ─── Blocks checkout: match theme brand ─── */ .wp-block-woocommerce-checkout, .wp-block-woocommerce-cart, body.woocommerce-checkout, body.woocommerce-cart { font-family: var(--font); background: var(--bg); } .wc-block-checkout, .wc-block-cart { font-family: var(--font); color: var(--ink); } .wc-block-checkout h1, .wc-block-checkout h2, .wc-block-checkout h3, .wc-block-checkout .wc-block-components-title { font-family: var(--font); color: var(--ink); letter-spacing: -0.02em; } .wc-block-components-checkout-step__title, .wc-block-components-title { font-weight: 700 !important; } /* Sidebar panel */ .wc-block-components-sidebar-layout .wc-block-components-sidebar, .wc-block-checkout__sidebar { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.75rem !important; box-shadow: 0 1px 3px rgba(10, 10, 10, 0.03); } /* Order summary heading */ .wc-block-components-order-summary__button-text, .wc-block-components-order-summary .wc-block-components-panel__button { font-family: var(--font); color: var(--ink); font-weight: 700; } /* Form fields */ .wc-block-components-text-input input, .wc-block-components-textarea, .wc-block-components-checkbox input, .wc-block-components-select select { font-family: var(--font) !important; color: var(--ink); border-color: var(--line-strong) !important; border-radius: var(--radius-sm) !important; } .wc-block-components-text-input input:focus, .wc-block-components-select select:focus { border-color: var(--ink) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06) !important; } .wc-block-components-text-input label, .wc-block-components-checkout-step__description { font-family: var(--font); color: var(--muted); } /* Address panel */ .wc-block-components-address-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.25rem; background: var(--bg-alt); } .wc-block-components-address-card__edit { color: var(--ink); font-weight: 600; } /* Payment method radio */ .wc-block-components-radio-control__option { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-bottom: 0.6rem; transition: border-color 0.2s, background 0.2s; } .wc-block-components-radio-control__option--checked-option-highlighted, .wc-block-components-radio-control__option[aria-checked="true"], .wc-block-components-radio-control__option.wc-block-components-radio-control__option--selected { border-color: var(--ink) !important; background: rgba(10, 10, 10, 0.02); } .wc-block-components-radio-control__label { font-weight: 600; color: var(--ink); } /* Product line in summary */ .wc-block-components-order-summary-item__description, .wc-block-components-order-summary-item__quantity, .wc-block-components-product-name { font-family: var(--font) !important; color: var(--ink); } .wc-block-components-product-metadata, .wc-block-components-product-metadata__description { color: var(--muted); font-size: 0.85rem; } /* Sale price display */ .wc-block-components-product-price ins { text-decoration: none; color: var(--ink); font-weight: 700; } .wc-block-components-product-price del, .wc-block-components-formatted-money-amount--sale-old { color: var(--muted); } /* Totals table */ .wc-block-components-totals-wrapper { border-top: 1px solid var(--line) !important; padding-top: 1rem !important; } .wc-block-components-totals-item { padding: 0.5rem 0 !important; font-family: var(--font); } .wc-block-components-totals-item__label { color: var(--muted); } .wc-block-components-totals-item__value { color: var(--ink); font-weight: 600; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 1.2rem !important; font-weight: 700 !important; color: var(--ink) !important; letter-spacing: -0.02em; } /* Place Order button */ .wc-block-components-checkout-place-order-button, .wc-block-components-button.contained, button.wc-block-components-button.wp-element-button.contained { background: var(--ink) !important; color: #fff !important; border: none !important; border-radius: var(--radius-pill) !important; padding: 1rem 2rem !important; font-family: var(--font) !important; font-weight: 600 !important; font-size: 1rem !important; letter-spacing: -0.01em; transition: background 0.25s, transform 0.25s; min-height: 52px; } .wc-block-components-checkout-place-order-button:hover, .wc-block-components-button.contained:hover, button.wc-block-components-button.wp-element-button.contained:hover { background: #000 !important; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } /* Coupon and note toggles */ .wc-block-components-panel__button { color: var(--ink); font-family: var(--font); font-weight: 500; } /* Notices */ .wc-block-components-notice-banner { border-radius: var(--radius-sm) !important; font-family: var(--font) !important; border: 1px solid var(--line) !important; } /* Terms & Privacy links line */ .wc-block-checkout__terms { font-size: 0.8rem; color: var(--muted); } .wc-block-checkout__terms a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* Deposit / Acowebs partial payment display */ .aco-wc-partial-container, .aco-wc-part-total-container, .aco-partial-payment-details { font-family: var(--font); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.85rem 1rem; margin-top: 0.5rem; font-size: 0.85rem; color: var(--ink); } /* ─── Classic checkout fallback styling ─── */ body.woocommerce-checkout #order_review, body.woocommerce-checkout #customer_details { font-family: var(--font); } body.woocommerce-checkout .form-row label { color: var(--ink); font-weight: 500; font-size: 0.85rem; } body.woocommerce-checkout .form-row input, body.woocommerce-checkout .form-row select, body.woocommerce-checkout .form-row textarea { font-family: var(--font) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius-sm) !important; padding: 0.75rem 1rem !important; color: var(--ink); background: #fff; } body.woocommerce-checkout .form-row input:focus, body.woocommerce-checkout .form-row select:focus, body.woocommerce-checkout .form-row textarea:focus { border-color: var(--ink) !important; outline: none; box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06); } body.woocommerce-checkout table.shop_table { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-alt); border-collapse: separate; border-spacing: 0; padding: 0.75rem; } body.woocommerce-checkout table.shop_table th, body.woocommerce-checkout table.shop_table td { border-color: var(--line); font-family: var(--font); padding: 0.75rem 0.5rem; } body.woocommerce-checkout #place_order, body.woocommerce-checkout button.button { background: var(--ink) !important; color: #fff !important; border-radius: var(--radius-pill) !important; padding: 1rem 2rem !important; font-family: var(--font) !important; font-weight: 600 !important; font-size: 1rem !important; letter-spacing: -0.01em; border: none !important; transition: background 0.25s, transform 0.25s; } body.woocommerce-checkout #place_order:hover, body.woocommerce-checkout button.button:hover { background: #000 !important; transform: translateY(-1px); } /* Fine mobile adjustments for checkout schedule */ @media (max-width: 768px) { .mol-checkout-schedule { padding: 1.25rem; } .mol-checkout-schedule-head { gap: 0.5rem; } .mol-schedule-total { text-align: left; font-size: 0.75rem; } .mol-checkout-steps li { gap: 0.65rem; padding: 0.7rem 0; } .mol-step-amount { font-size: 0.95rem; } .mol-step-when { font-size: 0.75rem; } .mol-step-tag { font-size: 0.58rem; padding: 3px 6px; } .wc-block-components-sidebar-layout .wc-block-components-sidebar, .wc-block-checkout__sidebar { padding: 1.25rem !important; } } /* ═══════════════════════════════════════════ DELIVERY WEEK CALENDAR ═══════════════════════════════════════════ */ .mol-delivery-calendar { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.5rem; margin: 1.5rem 0; font-family: var(--font); box-shadow: 0 1px 3px rgba(10, 10, 10, 0.03); } .mol-cal-head { margin-bottom: 1.25rem; } .mol-cal-head .mol-schedule-badge { display: block; margin-bottom: 0.6rem; } .mol-cal-sub { font-size: 0.82rem; color: var(--muted); line-height: 1.55; margin: 0; } /* Month tabs */ .mol-cal-tabs { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0 0 0.75rem; margin: 0 -0.5rem 1rem; padding: 0 0.5rem 0.75rem; scrollbar-width: none; border-bottom: 1px solid var(--line); } .mol-cal-tabs::-webkit-scrollbar { display: none; } .mol-cal-tab { flex-shrink: 0; padding: 0.55rem 1rem; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-pill); font-family: var(--font); font-size: 0.82rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: all 0.2s; white-space: nowrap; letter-spacing: -0.005em; } .mol-cal-tab:hover { background: rgba(10, 10, 10, 0.04); } .mol-cal-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); } /* Month panels */ .mol-cal-panel { display: none; flex-direction: column; gap: 0.5rem; } .mol-cal-panel.is-active { display: flex; } /* Week button rows */ .mol-cal-week { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font); text-align: left; cursor: pointer; transition: all 0.2s; width: 100%; } .mol-cal-week:hover { border-color: var(--ink); background: #fff; transform: translateY(-1px); } .mol-cal-week.is-selected { border-color: var(--accent); background: rgba(34, 139, 34, 0.05); box-shadow: 0 0 0 1px var(--accent); } .mol-week-radio { flex-shrink: 0; width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 50%; position: relative; transition: all 0.2s; } .mol-cal-week.is-selected .mol-week-radio { border-color: var(--accent); background: var(--accent); } .mol-cal-week.is-selected .mol-week-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #fff; } .mol-week-body { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; } .mol-week-body strong { font-size: 0.92rem; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; } .mol-week-range { font-size: 0.78rem; color: var(--muted); } .mol-week-check { flex-shrink: 0; color: var(--accent); opacity: 0; transition: opacity 0.2s; } .mol-cal-week.is-selected .mol-week-check { opacity: 1; } /* Selected summary row */ .mol-cal-selected { margin-top: 1.25rem; padding: 0.85rem 1rem; background: rgba(34, 139, 34, 0.08); border: 1px solid rgba(34, 139, 34, 0.2); border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--ink); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .mol-cal-selected[hidden] { display: none; } .mol-cal-selected span { color: var(--muted); font-size: 0.78rem; } .mol-cal-selected strong { color: var(--accent); font-weight: 700; } .mol-cal-clear { margin-left: auto; padding: 0.35rem 0.75rem; background: transparent; border: 1px solid rgba(34, 139, 34, 0.3); border-radius: var(--radius-pill); font-family: var(--font); font-size: 0.75rem; font-weight: 600; color: var(--accent); cursor: pointer; transition: background 0.2s; } .mol-cal-clear:hover { background: rgba(34, 139, 34, 0.15); } /* Mobile */ @media (max-width: 768px) { .mol-delivery-calendar { padding: 1.25rem; margin: 1rem 0; } .mol-cal-tab { padding: 0.5rem 0.85rem; font-size: 0.78rem; } .mol-cal-week { padding: 0.75rem 0.85rem; gap: 0.65rem; } .mol-week-body strong { font-size: 0.85rem; } .mol-week-range { font-size: 0.72rem; } .mol-week-radio { width: 18px; height: 18px; } .mol-cal-selected { flex-wrap: wrap; gap: 0.5rem; } .mol-cal-clear { margin-left: 0; width: 100%; justify-content: center; padding: 0.55rem; } } /* ───── Responsive ───── */ /* Tablet & smaller laptops */ @media (max-width: 1024px) { .features-inner { grid-template-columns: 1fr; gap: 3rem; } .features-right { grid-template-columns: 1fr 1fr; max-width: 700px; } .gallery-grid { grid-template-columns: repeat(3, 1fr); } .pricing-card { grid-template-columns: 1fr; min-height: 0; } .pricing-right { min-height: 400px; } .testimonials-grid { grid-template-columns: 1fr; max-width: 600px; margin-left: auto; margin-right: auto; } .contact-wrap { grid-template-columns: 1fr; gap: 3rem; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; } /* Product page responsive */ .mol-dim-grid { grid-template-columns: repeat(3, 1fr); } .mol-process-grid { grid-template-columns: repeat(2, 1fr); } .mol-compare-grid { grid-template-columns: 1fr; } .mol-compare-featured { transform: none; order: -1; } .mol-planning-inner { padding: 2rem; } .mol-hero-trust { gap: 1.5rem; } .mol-hero-trust strong { font-size: 1.1rem; } } /* Mobile (tablet portrait and phones) */ @media (max-width: 768px) { .container, .site-header__inner, .features-inner, .testimonials-grid { padding-left: 1.25rem; padding-right: 1.25rem; } /* Header */ .site-header__inner { gap: 0.75rem; padding: 0.85rem 1.25rem; } .logo-mark { height: 32px; } .primary-nav, .header-cta { display: none; } .menu-toggle { display: block; } .menu-toggle span { width: 22px; } .primary-nav.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: rgba(245, 245, 242, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); padding: 0.75rem 1.5rem 1.25rem; max-height: calc(100vh - 60px); overflow-y: auto; } .primary-nav.is-open .nav-list { flex-direction: column; align-items: stretch; gap: 0; } .primary-nav.is-open .nav-list a { display: block; padding: 0.95rem 0; width: 100%; border-bottom: 1px solid var(--line); font-size: 1rem; } .primary-nav.is-open .nav-list li:last-child a { border-bottom: none; } /* Section spacing */ .site-main > section { padding: 3.5rem 0; } .section-heading--center { margin-bottom: 2rem; } .section-header-center { margin-bottom: 2rem; } /* Hero */ .hero { padding: 6.5rem 1.25rem 4.5rem; min-height: 80vh; min-height: 80svh; } .hero-title { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.08; margin-bottom: 1.25rem; } .hero-subtitle { font-size: 0.98rem; margin-bottom: 1.5rem; padding: 0 0.5rem; } .hero-price-block { margin-bottom: 1.5rem; } .hero-price-line { padding: 0.55rem 1rem; font-size: 0.9rem; gap: 0.4rem; } .hero-price-value { font-size: 1.2rem; } .hero-finance-value { font-size: 1.05rem; } .hero-price-sep { font-size: 0.8rem; } .hero-finance-apr { font-size: 0.7rem; } .hero-finance-disclosure { font-size: 0.7rem; padding: 0.75rem 0.9rem; } .hero-actions { flex-direction: column; width: 100%; max-width: 340px; margin: 0 auto 1.75rem; gap: 0.6rem; } .hero-actions .btn { width: 100%; padding: 0.95rem 1.5rem; } .hero-trust-bar { gap: 1.5rem; padding-top: 1rem; } .hero-trust-bar strong { font-size: 1.1rem; } .hero-trust-bar span { font-size: 0.65rem; letter-spacing: 0.08em; } .hero-scroll { display: none; } /* hide on mobile — feels cramped */ /* Features */ .features-grid { grid-template-columns: 1fr; gap: 1.5rem; } .features-right { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 1rem; } .feature-photo--tall { aspect-ratio: 4/3; } .photo-caption { bottom: 0.5rem; left: 0.5rem; right: 0.5rem; padding: 0.7rem 0.85rem; font-size: 0.78rem; } /* Gallery */ .gallery-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; } .gallery-item { aspect-ratio: 4/5; border-radius: var(--radius-sm); } .gallery-caption { opacity: 1; /* always visible on touch */ transform: translateY(0); font-size: 0.75rem; padding: 0.4rem 0.65rem; bottom: 0.5rem; left: 0.5rem; right: 0.5rem; } /* Filter pills — scrollable horizontally if they overflow */ .filter-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; padding: 0 1.25rem 0.5rem; margin-left: -1.25rem; margin-right: -1.25rem; gap: 0.4rem; scrollbar-width: none; } .filter-pills::-webkit-scrollbar { display: none; } .pill { flex-shrink: 0; padding: 0.5rem 1rem; font-size: 0.82rem; } /* Pricing card */ .pricing-left { padding: 2rem 1.5rem; } .pricing-title { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: 1.5rem; } .pricing-steps li { padding: 0.65rem 0; } .pricing-steps h4 { font-size: 0.95rem; } .pricing-steps p { font-size: 0.85rem; } .price-box { padding: 1.25rem; } .price-amount { font-size: 1.5rem; } .pricing-right { min-height: 280px; max-height: 360px; } .availability-tag { top: 1rem; right: 1rem; padding: 0.6rem 0.9rem; font-size: 0.78rem; } /* Testimonials */ .testimonial-card { padding: 1.5rem; } .testimonial-quote { font-size: 0.92rem; } /* CTA Banner */ .cta-banner { padding: 4rem 1.25rem; min-height: 360px; } .cta-title { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: 1.5rem; } /* Contact */ .contact-form, .contact-form .wpcf7 { padding: 1.5rem; } .form-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; } .contact-form .cf7-row { grid-template-columns: 1fr; gap: 0; } .contact-intro .section-sub { margin-bottom: 2rem; } .contact-list li { padding: 1rem 0; gap: 0.85rem; } .contact-icon { width: 34px; height: 34px; } /* CF7 mobile field tweaks */ .contact-form .wpcf7 input[type="text"], .contact-form .wpcf7 input[type="email"], .contact-form .wpcf7 input[type="tel"], .contact-form .wpcf7 input[type="url"], .contact-form .wpcf7 input[type="number"], .contact-form .wpcf7 select, .contact-form .wpcf7 textarea { padding: 0.85rem 1rem; font-size: 16px; /* prevent iOS auto-zoom */ } .contact-form .wpcf7 input[type="submit"], .contact-form .wpcf7 .wpcf7-submit { padding: 1rem 1.5rem; font-size: 0.95rem; } /* Footer */ .site-footer { padding: 3rem 1.25rem 1.5rem; } .footer-inner { grid-template-columns: 1fr; gap: 2.25rem; margin-bottom: 2rem; } .footer-brand p { max-width: 100%; } .footer-bottom { flex-direction: column; text-align: center; gap: 0.75rem; padding-top: 1.25rem; } .footer-meta { gap: 1.25rem; } /* Standard content pages */ .standard-content { padding-top: 6rem; padding-bottom: 3.5rem; } /* Buttons — bigger touch targets on mobile */ .btn { min-height: 44px; } .btn-sm { min-height: 38px; padding: 0.6rem 1.15rem; } } /* Small phones */ @media (max-width: 480px) { .container, .site-header__inner, .features-inner, .testimonials-grid { padding-left: 1rem; padding-right: 1rem; } .site-main > section { padding: 3rem 0; } .hero { padding: 6rem 1rem 4rem; } .gallery-grid { grid-template-columns: 1fr; gap: 0.75rem; } .gallery-item { aspect-ratio: 4/3; } .pricing-left { padding: 1.75rem 1.25rem; } .price-box { padding: 1rem; } .price-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; margin-bottom: 0.5rem; } .testimonial-card { padding: 1.25rem; } .contact-form, .contact-form .wpcf7 { padding: 1.25rem; } .filter-pills { padding-left: 1rem; padding-right: 1rem; margin-left: -1rem; margin-right: -1rem; } .footer-inner { padding-left: 1rem; padding-right: 1rem; } /* Product page mobile */ .mol-hero-trust { gap: 1rem; padding-top: 1rem; margin-top: 1rem; } .mol-hero-trust li { flex-basis: calc(50% - 0.5rem); } .mol-hero-trust strong { font-size: 1rem; } .mol-hero-trust span { font-size: 0.65rem; letter-spacing: 0.08em; } .mol-buy-trust { grid-template-columns: 1fr; gap: 0.7rem; } .mol-planning { margin: 3rem auto; padding: 0 1.25rem; } .mol-planning-inner { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.75rem; text-align: center; } .mol-planning-icon { margin: 0 auto; } .mol-planning-copy h3 { font-size: 1.25rem; } .mol-dimensions, .mol-process, .mol-compare { margin: 3.5rem auto; padding: 0 1.25rem; } .mol-dim-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .mol-dim-item { padding: 1.25rem 0.75rem; } .mol-dim-value { font-size: 1.5rem; } .mol-process-grid { grid-template-columns: 1fr; gap: 1rem; } .mol-process-step { padding: 1.5rem; } .mol-compare-item { padding: 1.5rem; } .mol-compare-price { font-size: 1.1rem; } .mol-finance-pill { gap: 0.35rem; padding: 0.65rem 0.85rem; font-size: 0.85rem; } .mol-finance-pill strong { font-size: 1rem; } .mol-finance-apr { flex-basis: 100%; margin-left: 0; margin-top: 0.25rem; } /* Sticky bar mobile */ .mol-sticky-cta { padding: 0.7rem 1rem; } .mol-sticky-inner { gap: 0.75rem; } .mol-sticky-price { font-size: 0.95rem; } .mol-sticky-finance { font-size: 0.68rem; } .mol-sticky-cta-btn { padding: 0.7rem 1rem; font-size: 0.85rem; } /* FAQ mobile */ .faq-list { padding: 0.25rem 1.25rem; border-radius: var(--radius-md); } .faq-question { font-size: 0.95rem; padding: 1.15rem 0; } .faq-answer { font-size: 0.9rem; padding: 0 0 1.25rem; } .faq-icon { width: 28px; height: 28px; padding: 5px; } /* Give body bottom padding so sticky bar doesn't cover content */ body.single-product { padding-bottom: 70px; } } /* Landscape mobile — keep hero readable when phone is rotated */ @media (max-height: 500px) and (orientation: landscape) { .hero { min-height: auto; padding: 5rem 1.5rem 3rem; } .hero-title { font-size: 2rem; margin-bottom: 0.75rem; } .hero-subtitle { margin-bottom: 1.25rem; } .hero-scroll { display: none; } } /* Print */ @media print { .site-header, .hero-scroll, .menu-toggle, .filter-pills, .cta-banner, .site-footer { display: none; } body { background: #fff; color: #000; } .site-main > section { padding: 1.5rem 0; page-break-inside: avoid; } } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ============================================================= Modular Outdoor Living — WooCommerce single product styles Append to your theme's style.css (or enqueue separately). Design language: Plus Jakarta Sans, warm off-white bg, near-black ink, dark cards, pill buttons. ============================================================= */ :root { --mol-bg: #f4f1ec; /* warm off-white */ --mol-ink: #1a1a18; /* near-black */ --mol-ink-soft: #5b574f; --mol-card-dark: #1f1e1c; /* dark section card */ --mol-line: #e2ddd4; --mol-cream: #e8dfce; --mol-grey: #8c8d8a; --mol-radius: 20px; } .mol-product { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; color: var(--mol-ink); background: var(--mol-bg); max-width: 1240px; margin: 0 auto; padding: 0 24px 80px; line-height: 1.55; } .mol-eyebrow { display: inline-block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mol-ink-soft); margin-bottom: 14px; font-weight: 600; } /* ---------- HERO ---------- */ .mol-product-hero { position: relative; border-radius: var(--mol-radius); overflow: hidden; min-height: 520px; display: flex; align-items: flex-end; margin: 24px 0 56px; } .mol-hero-media { position: absolute; inset: 0; } .mol-hero-img { width: 100%; height: 100%; object-fit: cover; } .mol-hero-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--mol-card-dark); color: #fff; font-weight: 600; letter-spacing:.05em; } .mol-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.62) 100%); } .mol-hero-inner { position: relative; padding: 48px; color: #fff; max-width: 640px; } .mol-hero-inner .mol-eyebrow { color: rgba(255,255,255,.8); } .mol-hero-title { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.05; margin: 0 0 14px; } .mol-hero-sub { font-size: 1.05rem; color: rgba(255,255,255,.88); margin: 0; } /* ---------- MAIN GRID ---------- */ .mol-product-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 48px; align-items: start; margin-bottom: 80px; } /* gallery */ .mol-gallery { display: grid; gap: 16px; } .mol-gallery-item { margin: 0; border-radius: var(--mol-radius); overflow: hidden; } .mol-gallery-img { width: 100%; display: block; object-fit: cover; } .mol-gallery-empty { aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; background: #e9e4db; color: var(--mol-ink-soft); border: 1px dashed var(--mol-line); font-size: .85rem; } /* summary card (sticky) */ .mol-summary { position: sticky; top: 24px; } .mol-summary-card { background: var(--mol-card-dark); color: #fff; border-radius: var(--mol-radius); padding: 36px; } .mol-summary-name { font-size: 1.7rem; font-weight: 700; margin: 0 0 12px; } .mol-price { font-size: 1.6rem; font-weight: 700; margin-bottom: 18px; } .mol-price .woocommerce-Price-amount { color: #fff; } .mol-price del { opacity: .5; font-weight: 500; margin-right: 8px; } .mol-summary-desc { color: rgba(255,255,255,.75); font-size: .95rem; margin: 0 0 24px; } /* WooCommerce variation form inside dark card */ .mol-summary .variations { width: 100%; margin-bottom: 18px; border-collapse: collapse; } .mol-summary .variations th, .mol-summary .variations td { display: block; text-align: left; padding: 0 0 6px; } .mol-summary .variations label { color: rgba(255,255,255,.85); font-weight: 600; font-size: .85rem; } .mol-summary .variations select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-size: .95rem; margin-top: 6px; } .mol-summary .reset_variations { color: rgba(255,255,255,.6); font-size: .8rem; } .mol-summary .quantity input { width: 72px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; text-align: center; margin-right: 10px; } /* pill add-to-cart button */ .mol-summary .single_add_to_cart_button, .mol-btn { display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--mol-ink); border: none; border-radius: 999px; padding: 15px 32px; font-weight: 600; font-size: .98rem; cursor: pointer; text-decoration: none; transition: transform .2s ease, background .2s ease; margin-top: 8px; } .mol-summary .single_add_to_cart_button { width: 100%; } .mol-summary .single_add_to_cart_button:hover, .mol-btn:hover { transform: translateY(-2px); background: var(--mol-cream); } .mol-trust { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid rgba(255,255,255,.12); } .mol-trust li { padding: 12px 0 12px 26px; position: relative; color: rgba(255,255,255,.8); font-size: .9rem; } .mol-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--mol-cream); font-weight: 700; } /* ---------- SECTION HEADS ---------- */ .mol-section-head { text-align: center; max-width: 620px; margin: 0 auto 44px; } .mol-section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; margin: 0; } /* ---------- FINISHES ---------- */ .mol-finishes { margin-bottom: 80px; } .mol-finish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .mol-finish-card { background: #fff; border: 1px solid var(--mol-line); border-radius: var(--mol-radius); overflow: hidden; padding-bottom: 28px; } .mol-finish-swatch { height: 220px; } .mol-swatch-grey { background: linear-gradient(135deg, #9a9b98, #6f7370); } .mol-swatch-cream { background: linear-gradient(135deg, #ece2cf, #d8c9ad); } .mol-finish-card h3 { font-size: 1.3rem; font-weight: 700; margin: 24px 28px 8px; } .mol-finish-card p { color: var(--mol-ink-soft); margin: 0 28px; font-size: .95rem; } /* ---------- SPEC ---------- */ .mol-spec { margin-bottom: 80px; } .mol-spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .mol-spec-item { background: #fff; border: 1px solid var(--mol-line); border-radius: var(--mol-radius); padding: 32px 28px; } .mol-spec-num { font-size: .85rem; font-weight: 700; letter-spacing: .1em; color: var(--mol-grey); } .mol-spec-item h3 { font-size: 1.2rem; font-weight: 700; margin: 14px 0 8px; } .mol-spec-item p { color: var(--mol-ink-soft); margin: 0; font-size: .94rem; } /* ---------- LONGFORM ---------- */ .mol-longform { max-width: 820px; margin: 0 auto 80px; font-size: 1.08rem; line-height: 1.7; color: var(--mol-ink-soft); } .mol-longform h2, .mol-longform h3 { color: var(--mol-ink); font-weight: 700; line-height: 1.2; margin: 1.8em 0 .6em; } .mol-longform h2 { font-size: 1.9rem; } .mol-longform h3 { font-size: 1.35rem; } .mol-longform > h2:first-child, .mol-longform > h3:first-child { margin-top: 0; } .mol-longform p { margin: 0 0 1.1em; } .mol-longform ul { list-style: none; padding: 0; margin: 0 0 1.4em; } .mol-longform ul li { position: relative; padding: 0 0 .7em 30px; color: var(--mol-ink); } .mol-longform ul li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--mol-ink); } .mol-longform strong { color: var(--mol-ink); font-weight: 700; } /* ---------- CTA BANNER ---------- */ .mol-cta-banner { background: var(--mol-card-dark); color: #fff; border-radius: var(--mol-radius); text-align: center; padding: 64px 32px; } .mol-cta-banner h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; margin: 0 0 12px; } .mol-cta-banner p { color: rgba(255,255,255,.78); margin: 0 0 28px; } .mol-btn-light { background: #fff; } /* CTA finish selector + order now (mirrors the top, centred on the banner) */ .mol-cta-order { max-width: 460px; margin: 28px auto 0; } .mol-finish-select-cta { margin-bottom: 14px; } .mol-order-now-cta { margin-top: 4px; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 980px) { .mol-product-grid { grid-template-columns: 1fr; } .mol-summary { position: static; } .mol-spec-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .mol-product { padding: 0 16px 56px; } .mol-hero-inner { padding: 28px; } .mol-finish-grid, .mol-spec-grid { grid-template-columns: 1fr; } .mol-summary-card { padding: 28px; } } /* ---------- FINISH SELECT + ORDER NOW (2-click checkout) ---------- */ .mol-finish-select { display: grid; gap: 10px; margin: 4px 0 16px; } .mol-finish-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.18); color: #fff; font-family: inherit; font-size: .98rem; font-weight: 600; transition: border-color .2s ease, background .2s ease; } .mol-finish-opt:hover { border-color: rgba(255,255,255,.4); } .mol-finish-opt.is-selected { border-color: #fff; background: rgba(255,255,255,.14); } .mol-finish-dot { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.15); } .mol-dot-grey { background: linear-gradient(135deg, #9a9b98, #6f7370); } .mol-dot-cream { background: linear-gradient(135deg, #ece2cf, #d8c9ad); } .mol-order-now { display: block; width: 100%; text-align: center; padding: 16px 32px; border-radius: 999px; background: #fff; color: var(--mol-ink); font-weight: 700; font-size: 1.05rem; text-decoration: none; transition: transform .2s ease, background .2s ease; } .mol-order-now:hover { transform: translateY(-2px); background: var(--mol-cream); } /* ---------- TESTIMONIALS ON PRODUCT PAGE ---------- */ /* Match the "What's included" section: transparent section background, white individual cards sitting on the page. */ .mol-testimonials-wrap { margin: 0 0 80px; } .mol-testimonials-wrap .testimonials { background: transparent; padding-top: 0; padding-bottom: 0; } /* Individual cards become the white boxes, styled like .mol-spec-item */ .mol-testimonials-wrap .testimonial-card { background: #fff; border: 1px solid var(--mol-line); border-radius: var(--mol-radius); padding: 32px 28px; } /* ═══════════════════════════════════════════════════════════ Cookie consent banner, footer legal line, admin notices ═══════════════════════════════════════════════════════════ */ /* ───── Footer legal / registration line ───── */ .footer-legal { display: flex; flex-direction: column; gap: 0.4rem; max-width: 62ch; } .footer-registration { font-size: 0.72rem; line-height: 1.5; color: rgba(255, 255, 255, 0.35); } .footer-meta { align-items: center; flex-wrap: wrap; } .footer-cookie-prefs { background: none; border: 0; padding: 0; font: inherit; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; } .footer-cookie-prefs:hover { color: #fff; } /* ───── Admin-only setup reminders (never shown to visitors) ───── */ .mol-admin-notice { margin-top: 0.75rem; padding: 0.6rem 0.8rem; border-left: 3px solid #E0A800; background: rgba(224, 168, 0, 0.12); border-radius: 6px; font-size: 0.75rem; line-height: 1.5; color: #E0A800; } .mol-admin-notice strong { display: block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; } /* ───── Cookie consent banner ───── */ .mol-consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9999; background: var(--dark-card); color: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(16px); transition: opacity 0.35s ease, transform 0.35s ease; } .mol-consent[hidden] { display: none; } .mol-consent.is-visible { opacity: 1; transform: translateY(0); } .mol-consent__inner { max-width: var(--container); margin: 0 auto; padding: 1.4rem 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1.75rem; flex-wrap: wrap; } .mol-consent__text { flex: 1 1 32rem; min-width: 0; } .mol-consent__title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.35rem; } .mol-consent__desc { font-size: 0.85rem; line-height: 1.6; margin: 0; } .mol-consent__link { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } /* Accept and Reject are deliberately the same size and weight — ICO guidance requires the reject option to be as easy to use as accept. */ .mol-consent__actions { display: flex; gap: 0.75rem; flex: 0 0 auto; flex-wrap: wrap; } .mol-consent__btn { min-height: 44px; font-size: 0.85rem; white-space: nowrap; } .mol-consent .btn-dark { background: #fff; color: var(--ink); } .mol-consent .btn-dark:hover { background: rgba(255, 255, 255, 0.88); } .mol-consent .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); } .mol-consent .btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.7); } .mol-consent__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (max-width: 768px) { .mol-consent { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; } .mol-consent__inner { padding: 1.15rem 1.15rem 1.25rem; gap: 1.1rem; } .mol-consent__actions { width: 100%; } .mol-consent__btn { flex: 1 1 100%; justify-content: center; } .footer-legal { max-width: none; } } @media (prefers-reduced-motion: reduce) { .mol-consent { transition: none; transform: none; } } /* ───── Legal pages (privacy / cookie policy templates) ───── */ .container--narrow { max-width: 780px; } .mol-legal-page .entry-title { margin-bottom: 0.4rem; } .mol-legal-updated { font-size: 0.85rem; color: var(--muted); margin-bottom: 2.5rem; } .mol-legal-body h2 { font-size: 1.35rem; font-weight: 700; margin: 2.75rem 0 0.85rem; padding-top: 1.75rem; border-top: 1px solid var(--line); } .mol-legal-body h2:first-child { border-top: 0; padding-top: 0; margin-top: 2rem; } .mol-legal-body p { margin-bottom: 1.1rem; } .mol-legal-body ul { margin: 0 0 1.4rem 1.25rem; } .mol-legal-body li { margin-bottom: 0.55rem; } .mol-legal-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: rgba(10, 10, 10, 0.06); padding: 0.15em 0.4em; border-radius: 4px; overflow-wrap: anywhere; } .mol-legal-company { list-style: none; margin: 0 0 1.5rem; padding: 1.1rem 1.25rem; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); } .mol-legal-company li { margin-bottom: 0.35rem; } .mol-legal-company li:last-child { margin-bottom: 0; } .mol-legal-table-wrap { overflow-x: auto; margin-bottom: 1.6rem; } .mol-legal-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-bottom: 1.6rem; } .mol-legal-table th, .mol-legal-table td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); } .mol-legal-table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-bottom: 1px solid var(--line-strong); } .mol-legal-table tbody tr:last-child td { border-bottom: 0; } @media (max-width: 600px) { .mol-legal-body h2 { font-size: 1.15rem; margin-top: 2rem; padding-top: 1.4rem; } .mol-legal-table { font-size: 0.85rem; min-width: 34rem; } } /* ═══════════════════════════════════════════════════════════ v2.6.0 — two-range homepage ═══════════════════════════════════════════════════════════ */ .section-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; } .btn-outline-dark { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); } .btn-outline-dark:hover { background: var(--ink); color: #fff; border-color: var(--ink); } /* ───── Hero fork ───── */ .hero--fork .hero-content { max-width: 1120px; } .hero--fork .hero-title { margin-bottom: 1rem; } .hero--fork .hero-subtitle { max-width: 46rem; margin-bottom: 2.75rem; } .hero-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; text-align: left; } .route-card { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.9rem 1.75rem 1.6rem; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } .route-card:hover { background: rgba(255, 255, 255, 0.17); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-3px); } .route-card:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } .route-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); } .route-title { font-size: 1.6rem; font-weight: 700; line-height: 1.15; } .route-desc { font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); } .route-price { font-size: 1.05rem; font-weight: 700; margin-top: 0.35rem; } .route-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.18); font-weight: 600; font-size: 0.95rem; } .route-card:hover .btn-arrow { transform: translateX(4px); } .route-cta .btn-arrow { transition: transform 0.25s ease; } /* ───── Trust bar ───── */ .trustbar { background: var(--dark); color: #fff; padding: 2.5rem 0; } .trustbar-list { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; } .trustbar-item { text-align: center; padding: 0 0.5rem; border-right: 1px solid rgba(255, 255, 255, 0.12); } .trustbar-item:last-child { border-right: 0; } .trustbar-item strong { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.3rem; } .trustbar-item span { font-size: 0.78rem; line-height: 1.45; color: rgba(255, 255, 255, 0.6); } /* ───── How we build ───── */ .standardised { padding: 6rem 0; background: var(--bg-alt); } .standardised-grid { list-style: none; display: grid; /* Five points: an auto-fit grid leaves an orphan on a second row at most desktop widths, so the column count is set explicitly per breakpoint. */ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.25rem 2rem; margin: 3.5rem 0 0; padding: 0; counter-reset: std; } .standardised-item { padding-top: 1.4rem; border-top: 2px solid var(--ink); } .standardised-num { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted-soft); margin-bottom: 0.7rem; } .standardised-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.55rem; line-height: 1.3; } .standardised-body { font-size: 0.93rem; line-height: 1.65; color: var(--muted); } .standardised-footnote { display: flex; align-items: flex-start; gap: 0.75rem; margin: 3.25rem auto 0; max-width: 46rem; padding: 1.15rem 1.4rem; background: var(--accent-soft); border-radius: var(--radius-sm); font-size: 0.93rem; line-height: 1.6; } .standardised-check { color: var(--accent); flex: 0 0 auto; margin-top: 0.2rem; } /* ───── Build specification ───── */ .spec { padding: 6rem 0; } .spec-inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: start; } .spec-left .section-sub { margin-bottom: 2.25rem; } .spec-table { margin: 0; } .spec-row { display: grid; grid-template-columns: 11rem 1fr; gap: 1.25rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line); } .spec-row:first-child { border-top: 1px solid var(--line-strong); } .spec-row dt { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0; } .spec-row dd { margin: 0; font-size: 0.95rem; line-height: 1.55; } .spec-right img, .spec-right svg { width: 100%; height: auto; border-radius: var(--radius-md); display: block; } /* ───── Nearby annexe range ───── */ .annexe-range { padding: 6rem 0; background: var(--bg-alt); } .annexe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; margin-top: 3.5rem; } .annexe-card { display: flex; flex-direction: column; padding: 2rem 1.75rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color 0.25s ease, transform 0.25s ease; } .annexe-card:hover { border-color: var(--line-strong); transform: translateY(-3px); } .annexe-name { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.4rem; } .annexe-bestfor { font-size: 0.85rem; line-height: 1.5; color: var(--accent); font-weight: 600; margin-bottom: 1.25rem; } .annexe-facts { list-style: none; display: flex; gap: 1.75rem; margin: 0 0 1.25rem; padding: 0.9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .annexe-fact-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-soft); margin-bottom: 0.2rem; } .annexe-fact-value { font-size: 0.88rem; font-weight: 600; } .annexe-short { font-size: 0.92rem; line-height: 1.65; color: var(--muted); margin-bottom: 1.5rem; } .annexe-price-block { margin-top: auto; margin-bottom: 1.25rem; } .annexe-price-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted-soft); } .annexe-price { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.2; } .annexe-rent { display: block; font-size: 0.83rem; color: var(--muted); margin-top: 0.3rem; line-height: 1.5; } .annexe-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.75rem; } .annexe-rental, .annexe-compliance { max-width: 52rem; margin: 2.75rem auto 0; padding: 1.75rem 2rem; border-radius: var(--radius-md); } .annexe-rental { background: var(--accent-soft); } .annexe-compliance { background: var(--bg); border: 1px solid var(--line); } .annexe-rental-title, .annexe-compliance-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.7rem; } .annexe-rental p, .annexe-compliance p { font-size: 0.93rem; line-height: 1.7; color: var(--ink-soft); } .annexe-compliance-list { margin: 1rem 0 1rem 1.15rem; } .annexe-compliance-list li { font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.45rem; color: var(--ink-soft); } .annexe-compliance-note { font-size: 0.85rem !important; color: var(--muted) !important; font-style: italic; } /* ───── Planning ───── */ .planning { padding: 6rem 0; } .planning-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem; margin-top: 3.5rem; } .planning-card { padding: 2rem 1.9rem; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-md); } .planning-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.6rem; } .planning-card-summary { font-size: 0.95rem; line-height: 1.6; font-weight: 600; color: var(--ink-soft); padding-bottom: 1.15rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--line); } .planning-points { list-style: none; margin: 0; padding: 0; } .planning-points li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; line-height: 1.6; color: var(--muted); margin-bottom: 0.8rem; } .planning-tick { color: var(--accent); flex: 0 0 auto; margin-top: 0.25rem; } .planning-disclaimer { max-width: 46rem; margin: 2.5rem auto 0; text-align: center; font-size: 0.85rem; line-height: 1.65; color: var(--muted); } /* ───── Why us ───── */ .proof { padding: 6rem 0; background: var(--dark); color: #fff; } .proof .section-heading { color: #fff; } .proof .section-sub { color: rgba(255, 255, 255, 0.62); } .proof .section-eyebrow { color: var(--accent); } .proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; margin-top: 3.5rem; } .proof-card { padding: 1.9rem 1.6rem; background: var(--dark-card); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-md); } .proof-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; margin-bottom: 1.1rem; } .proof-card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.55rem; line-height: 1.3; } .proof-card-body { font-size: 0.9rem; line-height: 1.65; color: rgba(255, 255, 255, 0.66); } .proof-registration { text-align: center; margin-top: 2.75rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.42); } /* ───── Responsive ───── */ @media (max-width: 1024px) { .spec-inner { grid-template-columns: 1fr; gap: 2.5rem; } .trustbar-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1rem; } .trustbar-item:nth-child(3) { border-right: 0; } } @media (max-width: 768px) { .hero-routes { grid-template-columns: 1fr; gap: 0.9rem; } .route-card { padding: 1.5rem 1.35rem 1.35rem; } .route-title { font-size: 1.35rem; } .trustbar { padding: 2rem 0; } .trustbar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; } .trustbar-item { border-right: 0; text-align: left; padding: 0; } .trustbar-item strong { font-size: 1.1rem; } .standardised, .spec, .annexe-range, .planning, .proof { padding: 4rem 0; } .standardised-grid { gap: 1.75rem; margin-top: 2.5rem; } .spec-row { grid-template-columns: 1fr; gap: 0.3rem; } .annexe-grid, .planning-grid, .proof-grid { margin-top: 2.5rem; } .annexe-actions { flex-direction: column; } .annexe-actions .btn { width: 100%; justify-content: center; } .annexe-rental, .annexe-compliance { padding: 1.4rem 1.3rem; } } @media (max-width: 1200px) { .standardised-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .standardised-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .standardised-grid { grid-template-columns: 1fr; } } /* ───── FAQ filter pills ───── */ .faq-pills { justify-content: center; margin-bottom: 2.25rem; } .faq-item.is-hidden { display: none; } @media (max-width: 600px) { .faq-pills { margin-bottom: 1.5rem; } } /* ───── Range chapter headings ───── */ .range-intro { padding: 6rem 0 0; background: var(--bg-alt); } .range-intro + .features, .range-intro + .spec { padding-top: 3rem; } .range-intro .section-heading { margin-bottom: 0.9rem; } .range-intro .section-sub { max-width: 44rem; margin-left: auto; margin-right: auto; } /* Anchored sections shouldn't sit under the fixed header when jumped to. */ #garden-rooms, #annexes, #how-we-build, #how-we-work, #specification, #planning, #why-us, #faq, #gallery, #pricing, #contact { scroll-margin-top: 6rem; } @media (max-width: 768px) { .range-intro { padding-top: 4rem; } .range-intro + .features, .range-intro + .spec { padding-top: 2rem; } } /* ═══════════════════════════════════════════════════════════════════════ v3.0.0 — ART DIRECTION LAYER Direction B, "quiet modern": Instrument Serif display, stone and greige, no colour accent. Loaded last so it re-defines the tokens and heading rules set earlier in this file without touching them. ═══════════════════════════════════════════════════════════════════════ */ :root { /* Stone and greige rather than pure black on off-white. The old palette was #0A0A0A on #F5F5F2 with a bright green accent, which reads as technical; these are warmer and lower in contrast. */ --bg: #F2F1ED; --bg-alt: #FFFFFF; --bg-tint: #E9E7E1; --ink: #1C1C1A; --ink-soft: #33322F; --muted: #77746E; --muted-soft: #A3A099; --line: rgba(28, 28, 26, 0.10); --line-strong: rgba(28, 28, 26, 0.18); --dark: #1C1C1A; --dark-card: #26251F; --accent: #5A5F52; --accent-soft: rgba(90, 95, 82, 0.10); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 18px; --display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif; } /* ───── Display type ───── Instrument Serif ships at a single weight, so headings get size and leading rather than boldness. Everything below un-does the 700/800 weights and tight tracking the sans-serif headings were using. */ .hero-title, .section-heading, .route-title, .pricing-title, .cta-title, .annexe-name, .annexe-rental-title, .annexe-compliance-title, .standardised-title, .planning-card-title, .proof-card-title, .statement-text, .entry-title, .mol-hero-title, .mol-summary-name, .mol-section-head h2, .mol-cta-banner h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.005em; } .hero-title { font-size: clamp(2.9rem, 6.4vw, 5.2rem); line-height: 1.03; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3); margin-bottom: 1.25rem; } .hero-subtitle { font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.65; color: rgba(255, 255, 255, 0.84); } .section-heading { font-size: clamp(2rem, 3.6vw, 3.05rem); line-height: 1.12; } .section-sub { font-size: 1.04rem; line-height: 1.7; color: var(--muted); } .section-eyebrow { font-size: 0.7rem; letter-spacing: 0.18em; font-weight: 600; color: var(--muted); margin-bottom: 1.1rem; } .route-title { font-size: 1.85rem; line-height: 1.1; } .standardised-title { font-size: 1.32rem; line-height: 1.22; } .annexe-name { font-size: 1.7rem; } .planning-card-title { font-size: 1.5rem; } .proof-card-title { font-size: 1.22rem; line-height: 1.2; } .annexe-rental-title, .annexe-compliance-title { font-size: 1.35rem; } /* Numerals and prices stay in the sans — a serif price looks like a menu. */ .route-price, .annexe-price, .price-amount, .trustbar-item strong, .mol-price, .spec-row dd { font-family: var(--font); } /* ───── More air ───── Section padding was 6rem; editorial layouts breathe more than that. */ .standardised, .spec, .annexe-range, .planning, .proof, .features, .gallery, .pricing, .faq { padding-top: 8rem; padding-bottom: 8rem; } .range-intro { padding-top: 8rem; } .range-intro + .features, .range-intro + .spec { padding-top: 3.5rem; } .section-header-center { max-width: 42rem; margin-left: auto; margin-right: auto; } /* ───── Quieter surfaces ───── Boxed cards with visible borders everywhere is the "spec sheet" tell. Most cards lose their border and sit on a tint instead. */ .annexe-card, .planning-card { border: 0; background: var(--bg-alt); box-shadow: 0 1px 2px rgba(28, 28, 26, 0.04), 0 12px 32px -18px rgba(28, 28, 26, 0.18); } .annexe-card:hover, .planning-card:hover { box-shadow: 0 1px 2px rgba(28, 28, 26, 0.05), 0 22px 48px -22px rgba(28, 28, 26, 0.26); } .annexe-range { background: var(--bg-tint); } .standardised { background: var(--bg-alt); } .planning { background: var(--bg); } .standardised-item { border-top-width: 1px; border-top-color: var(--line-strong); } .trustbar { background: var(--dark); padding: 3.25rem 0; } .trustbar-item { border-right-color: rgba(255, 255, 255, 0.10); } .trustbar-item strong { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.01em; } .trustbar-item span { color: rgba(255, 255, 255, 0.52); } .route-card { border-radius: var(--radius-lg); } /* ───── Statement bands ───── The editorial pause between chapters. */ .statement { position: relative; padding: 8.5rem 0; background: var(--dark); color: #fff; background-size: cover; background-position: center; text-align: center; } .statement--image { padding: 11rem 0; } .statement-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 18, 0.45), rgba(20, 20, 18, 0.68)); } .statement .container { position: relative; } .statement-inner { max-width: 46rem; margin: 0 auto; } .statement-text { font-family: var(--display); font-weight: 400; font-size: clamp(1.85rem, 3.5vw, 3rem); line-height: 1.22; letter-spacing: -0.005em; color: #fff; } .statement-sub { margin-top: 1.5rem; font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.62); } /* ───── Gallery as a mosaic ───── A uniform grid of equal thumbnails reads as a catalogue. The first image runs large and the rest support it. */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 15rem; gap: 1.1rem; } .gallery-item { border-radius: var(--radius-md); overflow: hidden; margin: 0; } .gallery-item:first-child { grid-column: span 2; grid-row: span 2; } .gallery-item:nth-child(6) { grid-column: span 2; } .gallery-item img, .gallery-item svg { width: 100%; height: 100%; object-fit: cover; display: block; } .filter-pills .pill { border-radius: var(--radius-pill); font-weight: 500; } /* ───── Buttons ───── */ .btn { font-weight: 500; letter-spacing: 0.005em; } .btn-lg { padding: 1rem 2rem; } /* ───── Footer ───── */ .site-footer { background: var(--dark); } @media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 13rem; } .gallery-item:first-child { grid-column: span 2; grid-row: span 2; } .gallery-item:nth-child(6) { grid-column: span 2; } } @media (max-width: 768px) { .standardised, .spec, .annexe-range, .planning, .proof, .features, .gallery, .pricing, .faq { padding-top: 4.5rem; padding-bottom: 4.5rem; } .range-intro { padding-top: 4.5rem; } .statement { padding: 5rem 0; } .statement--image { padding: 6.5rem 0; } .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 14rem; } .gallery-item:first-child, .gallery-item:nth-child(6) { grid-column: span 1; grid-row: span 1; } } /* ───── Hero legibility over photography ───── The original overlay was a light top-to-bottom wash, which is fine over a gradient and not fine over a real photo with a bright sky in it. This adds a soft pool of shade behind the text without flattening the whole image. */ .hero-overlay { background: radial-gradient(ellipse 78% 62% at 50% 42%, rgba(16, 16, 14, 0.62) 0%, rgba(16, 16, 14, 0.28) 55%, rgba(16, 16, 14, 0.10) 100%), linear-gradient(180deg, rgba(16, 16, 14, 0.34) 0%, rgba(16, 16, 14, 0.20) 40%, rgba(16, 16, 14, 0.58) 100%); } .hero-title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); } .hero-subtitle { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); } /* Same treatment for the photographic statement bands. */ .statement--image .statement-overlay { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(16, 16, 14, 0.60) 0%, rgba(16, 16, 14, 0.34) 60%, rgba(16, 16, 14, 0.20) 100%), linear-gradient(180deg, rgba(16, 16, 14, 0.34), rgba(16, 16, 14, 0.52)); } .statement--image .statement-text { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45); } /* ═══════════════════════════════════════════════════════════════════════ v3.0.1 — spacing and gallery overflow fix ═══════════════════════════════════════════════════════════════════════ */ /* ───── Gallery mosaic: cancel the inherited aspect ratio ───── .gallery-item carries aspect-ratio: 4/5 from the original single-size grid. Against the mosaic's fixed row tracks that ratio wins, so each item sized itself from its own width instead of its track — the first tile came out 749px tall in a 498px slot and the bottom row spilled out of the section and over the statement band below it. */ .gallery-grid { grid-auto-flow: row dense; grid-auto-rows: 14rem; align-items: stretch; } .gallery-item { aspect-ratio: auto; height: 100%; min-height: 0; min-width: 0; } .gallery-item img, .gallery-item svg { width: 100%; height: 100%; object-fit: cover; display: block; } /* Six images tile cleanly as 1 large + 4 small + 1 full-width band. The old "span 2" left two dead columns on the last row. */ .gallery-item:nth-child(6) { grid-column: span 4; grid-row: span 1; } /* ───── Vertical rhythm ───── 8rem top and bottom meant 256px between every pair of sections, and 304px around the statement bands. Generous is right for this look; that much was reading as a gap rather than as air. */ .standardised, .spec, .annexe-range, .planning, .proof, .features, .gallery, .pricing, .faq { padding-top: 6.5rem; padding-bottom: 6.5rem; } .range-intro { padding-top: 6.5rem; } .range-intro + .features, .range-intro + .spec { padding-top: 4rem; } .statement { padding: 8rem 0; } .statement--image { padding: 9.5rem 0; } @media (max-width: 1024px) { .gallery-grid { grid-auto-rows: 12rem; } .gallery-item:nth-child(6) { grid-column: span 2; } } @media (max-width: 768px) { .standardised, .spec, .annexe-range, .planning, .proof, .features, .gallery, .pricing, .faq { padding-top: 4rem; padding-bottom: 4rem; } .range-intro { padding-top: 4rem; } .range-intro + .features, .range-intro + .spec { padding-top: 2rem; } .statement { padding: 4.5rem 0; } .statement--image { padding: 6rem 0; } .gallery-grid { grid-auto-rows: 13rem; } .gallery-item:nth-child(6) { grid-column: span 1; } } /* ═══════════════════════════════════════════════════════════════════════ v3.1.0 — LOGO-LED ART DIRECTION The wordmark is a light geometric sans with a four-corner square mark in sage, slate, ochre and warm stone. Everything below pulls the site onto that footing: the serif display is replaced by the same geometric sans family, the warm greige neutrals cool slightly to sit with the mark, and the four mark colours become the site's only accents. Loaded last, so it re-defines the v3.0.0 tokens rather than editing them. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Neutrals ── v3.0.0 was warm greige (#F2F1ED / #1C1C1A), which has a yellow cast the mark does not. These are the same tonal values pulled a step cooler so the sage and slate in the logo read as intentional rather than as a colour clash. The ink is the wordmark's own black. */ --bg: #F3F3F0; --bg-alt: #FFFFFF; --bg-tint: #E9EAE6; --ink: #1C2021; --ink-soft: #333A3A; --muted: #676E6C; --muted-soft: #8E9491; --line: rgba(28, 32, 33, 0.10); --line-strong: rgba(28, 32, 33, 0.17); --dark: #1C2021; --dark-card: #242A2A; /* ── The mark's four colours ── Sampled from the logo. Used at full strength as fills and on dark ground; the -text variants are the same hues darkened to clear 4.5:1 against the page, because none of the originals do. */ --brand-sage: #7E9B85; --brand-slate: #577588; --brand-ochre: #BCA777; --brand-stone: #958D80; --brand-sage-text: #55705E; --brand-slate-text: #4A6373; --brand-ochre-text: #7C6B3E; --accent: #55705E; --accent-bright: #7E9B85; --accent-soft: rgba(126, 155, 133, 0.14); /* ── Type ── Jost is the closest widely-available match to the wordmark: geometric, circular bowls, single-storey a, and light enough at 400 to hold a 4rem heading without shouting. */ --display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif; } /* ───── Display type ───── A geometric sans at the sizes Instrument Serif was using reads noticeably larger and heavier, so the scale comes down a little and the tracking tightens — the wordmark itself is tightly set. */ .hero-title, .section-heading, .route-title, .pricing-title, .cta-title, .annexe-name, .annexe-rental-title, .annexe-compliance-title, .standardised-title, .planning-card-title, .proof-card-title, .statement-text, .entry-title, .mol-hero-title, .mol-summary-name, .mol-section-head h2, .mol-cta-banner h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; } .hero-title { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.08; } .section-heading { font-size: clamp(1.85rem, 3.2vw, 2.7rem); line-height: 1.16; } .statement-text { font-size: clamp(1.7rem, 3.1vw, 2.65rem); line-height: 1.26; letter-spacing: -0.015em; } .route-title { font-size: 1.7rem; } .annexe-name { font-size: 1.55rem; } .planning-card-title { font-size: 1.38rem; } .standardised-title { font-size: 1.22rem; } .proof-card-title { font-size: 1.15rem; } .annexe-rental-title, .annexe-compliance-title { font-size: 1.25rem; } /* Prices now sit in the display face too — Jost's numerals are the same circular geometry as the mark, so a price no longer reads as a different voice from the heading above it. */ .route-price, .annexe-price, .price-amount, .trustbar-item strong, .mol-price, .spec-row dd { font-family: var(--display); font-weight: 500; letter-spacing: -0.005em; font-feature-settings: 'tnum' 1; } .price-amount { font-weight: 400; } /* ───── Eyebrows ───── "OUTDOOR LIVING" under the wordmark is wide-tracked caps, and that is the one typographic gesture the brand already owns. Every eyebrow on the site now repeats it. */ .section-eyebrow, .route-eyebrow, .availability-label, .price-label { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.22em; font-weight: 500; font-size: 0.7rem; color: var(--brand-stone); } .section-eyebrow { margin-bottom: 1rem; } /* ───── The mark, as a rule ───── Four short bars in the mark's four colours, under centred section eyebrows. It is the logo's corner-square motif unrolled into a line — enough to tie a section back to the brand without repeating the logo. */ .section-header-center .section-eyebrow { display: block; position: relative; padding-bottom: 1.15rem; } .section-header-center .section-eyebrow::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 72px; height: 3px; background: linear-gradient( to right, var(--brand-sage) 0 25%, var(--brand-slate) 25% 50%, var(--brand-ochre) 50% 75%, var(--brand-stone) 75% 100% ); } /* ───── Accents ───── Restrained on purpose: sage carries anything that means "yes, included, confirmed", slate carries anything informational, and ochre is kept for price and availability so it stays rare enough to still register. */ .standardised-num { color: var(--brand-sage-text); font-family: var(--display); font-weight: 500; } .standardised-check, .included-check, .form-feedback.success { color: var(--brand-sage-text); } .pricing-steps .step-num { font-family: var(--display); font-weight: 500; } .pricing-steps li:nth-child(1) .step-num { background: var(--brand-sage); color: #fff; } .pricing-steps li:nth-child(2) .step-num { background: var(--brand-slate); color: #fff; } .pricing-steps li:nth-child(3) .step-num { background: var(--brand-ochre); color: var(--ink); } .availability-value { color: var(--brand-ochre-text); font-weight: 500; } .spec-row dt { color: var(--muted); } .faq-question:hover { color: var(--brand-sage-text); } /* Focus and selection pick up the sage rather than the browser default. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible { outline: 2px solid var(--brand-sage-text); outline-offset: 3px; } ::selection { background: var(--accent-soft); color: var(--ink); } /* ───── Dark ground ───── Sage, ochre and stone all clear 5:1 on the wordmark's black, so the mark colours can be used at full strength here where they cannot on paper. */ .trustbar { background: var(--dark); border-top: 3px solid transparent; border-image: linear-gradient( to right, var(--brand-sage) 0 25%, var(--brand-slate) 25% 50%, var(--brand-ochre) 50% 75%, var(--brand-stone) 75% 100% ) 1; } .trustbar-item strong { color: #fff; font-size: 1.2rem; } .trustbar-item span { color: rgba(255, 255, 255, 0.58); } /* ───── Buttons ───── The wordmark's black stays the primary button. The sage outline is the quiet second action on light ground. */ .btn { font-family: var(--display); font-weight: 500; letter-spacing: 0.01em; } .btn-dark { background: var(--ink); } .btn-dark:hover { background: #0F1213; box-shadow: 0 10px 30px rgba(28, 32, 33, 0.24); } .btn-outline { background: transparent; color: var(--brand-sage-text); border: 1px solid var(--brand-sage); } .btn-outline:hover { background: var(--accent-soft); } /* ───── Navigation ───── The nav is the nearest text to the logo, so it takes the wordmark's letterforms rather than the body face. */ .nav-list a { font-family: var(--display); font-weight: 500; letter-spacing: 0.01em; } .nav-list a:hover { color: var(--brand-sage-text); } /* ───── Surfaces ───── The tint band is now faintly sage rather than warm grey, which is what stops the palette reading as "greige with some green in the logo". */ .annexe-range { background: var(--bg-tint); } .standardised { background: var(--bg-alt); } .annexe-card, .planning-card { box-shadow: 0 1px 2px rgba(28, 32, 33, 0.04), 0 12px 32px -18px rgba(28, 32, 33, 0.18); } .annexe-card:hover, .planning-card:hover { box-shadow: 0 1px 2px rgba(28, 32, 33, 0.05), 0 22px 48px -22px rgba(28, 32, 33, 0.26); } /* Route cards get the mark's corner-square as a hover tell. */ .route-card { position: relative; overflow: hidden; } .route-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); background: linear-gradient( to right, var(--brand-sage) 0 25%, var(--brand-slate) 25% 50%, var(--brand-ochre) 50% 75%, var(--brand-stone) 75% 100% ); } .route-card:hover::after { transform: scaleX(1); } /* ───── Footer ───── */ .site-footer { background: var(--dark); } .footer-col h6 { font-family: var(--display); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; } @media (max-width: 768px) { .section-header-center .section-eyebrow::after { width: 56px; } } /* ───── Accents on dark ground ───── The darkened sage and ochre are tuned for the paper background and drop to about 3:1 on the near-black, which is not enough for a tick or a date. On dark surfaces the mark's own values are used instead — they clear 5:1 there, which is exactly the trade the two sets of tokens exist for. */ .pricing-card .included-check, .trustbar .included-check, .statement .included-check, .site-footer .included-check { color: var(--brand-sage); } .availability-tag .availability-label { color: rgba(255, 255, 255, 0.55); } .availability-tag .availability-value { color: var(--brand-ochre); } .site-footer a:hover, .trustbar a:hover { color: var(--brand-sage); } /* ───── Hero fork on small screens ───── The fork stacks its two cards on mobile, which makes the hero content taller than the 88vh min-height. Because the hero centres its content, the overflow split evenly top and bottom and the first line of the heading disappeared behind the header. Letting the hero grow with its content fixes it without changing the desktop composition. */ @media (max-width: 768px) { /* `.site-main > section { padding: 3rem 0 }` in the mobile block above out-specifies a bare `.hero--fork`, which is what was flattening the hero's padding to 48px and pushing the heading under the header. */ .site-main > .hero--fork { min-height: auto; padding: 7rem 1.5rem 3.5rem; } } /* ═══════════════════════════════════════════════════════════════════════ v3.1.1 — CENTRED HEADER, LARGER LOGO ═══════════════════════════════════════════════════════════════════════ */ /* The wordmark is horizontal and symmetrical, and the page already centres its section headers, so a centred stack sits better with it than the logo-left / nav-right split did. Up from 36px, which was small for a two-line lockup — at 36px the "OUTDOOR LIVING" line was rendering at about 5px and turning to mush. */ .logo-mark { height: 44px; } .footer-logo .logo-mark { height: 48px; } /* The bar's tint was still the old greige (#F5F5F2) from before v3.0.0, so it read faintly yellow against the new page colour. */ .site-header { background: rgba(243, 243, 240, 0.88); } @media (min-width: 769px) { .site-header__inner { flex-direction: column; justify-content: center; gap: 0.85rem; padding: 1.15rem 2rem; } .primary-nav .nav-list { gap: 2.4rem; } /* The stack is roughly 40px taller than the single row was. The hero centres its own content so it absorbs that, but a page whose first section is an ordinary one would slide under the bar. */ .site-main > .hero { padding-top: 9rem; } .site-main > section:first-child:not(.hero) { padding-top: 10.5rem; } } /* Mobile keeps the row — logo left, burger right. A centred stack with a hamburger under it wastes vertical space on the screen with least of it. */ @media (max-width: 768px) { .logo-mark { height: 38px; } } /* ═══════════════════════════════════════════════════════════════════════ v3.1.2 — HEADER HIERARCHY The logo was not standing out, and size was only half the reason. At 44px against a 0.92rem/500 nav the two were roughly equal in weight, so the eye had nothing to land on first. The wordmark is a *light* face — it cannot win on weight, only on scale — so the logo goes up and the nav deliberately steps back. ═══════════════════════════════════════════════════════════════════════ */ .logo-mark { height: 56px; } .footer-logo .logo-mark { height: 56px; } /* Small, wide-tracked caps. Quieter than the medium-weight sentence case it replaces, and it repeats the "OUTDOOR LIVING" lockup directly under it, so the nav reads as part of the logo's family rather than as a rival to it. */ .primary-nav .nav-list a { font-size: 0.76rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; } @media (min-width: 769px) { .site-header__inner { gap: 1rem; padding: 1.25rem 2rem; } .primary-nav .nav-list { gap: 2.6rem; } /* Bar is ~136px now, so the clearances move with it. */ .site-main > .hero { padding-top: 10rem; } .site-main > section:first-child:not(.hero) { padding-top: 11.5rem; } } @media (max-width: 768px) { .logo-mark { height: 44px; } /* The slide-down menu is a tap target, not a nav bar — small tracked caps would make it harder to hit and harder to read. */ .primary-nav.is-open .nav-list a { font-size: 0.95rem; letter-spacing: 0.01em; text-transform: none; font-weight: 500; } } /* ═══════════════════════════════════════════════════════════════════════ v3.3.0 — LAUNCH OFFER BAND A gift with purchase, so it must not look like a sale. No red, no starburst, no struck-through price — those all say "discount", which is the one thing this deliberately is not. It reads as an editorial band with a photograph, using the mark's ochre as the only signal that something here is different from the sections around it. ═══════════════════════════════════════════════════════════════════════ */ .offer-band { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4.5rem 0; } .offer-band--compact { padding: 3.25rem 0; } .offer-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 3rem; align-items: center; max-width: 62rem; margin: 0 auto; } /* No photograph yet: the copy takes the full width rather than sitting in a half-empty grid next to a placeholder. */ .offer-inner--solo { grid-template-columns: 1fr; max-width: 42rem; text-align: center; } .offer-media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; } .offer-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .offer-eyebrow { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.22em; font-weight: 500; font-size: 0.7rem; color: var(--brand-ochre-text); margin-bottom: 0.9rem; } .offer-title { font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.14; color: var(--ink); margin-bottom: 0.85rem; } .offer-body { font-size: 1.02rem; line-height: 1.7; color: var(--muted); max-width: 34rem; } .offer-inner--solo .offer-body { margin-left: auto; margin-right: auto; } /* ───── The facts ───── Value, quantity and closing date, set as a small table rather than as badges. A countdown pill would undercut the tone the rest of the site is working to hold. */ .offer-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 0 2.5rem; margin: 1.6rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); } .offer-inner--solo .offer-meta { justify-content: center; } .offer-meta li { display: flex; flex-direction: column; gap: 0.2rem; } .offer-meta-label { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.66rem; font-weight: 500; color: var(--muted-soft); } .offer-meta strong { font-family: var(--display); font-weight: 500; font-size: 1.08rem; color: var(--ink); letter-spacing: -0.005em; font-feature-settings: 'tnum' 1; } .offer-terms { margin-top: 1.15rem; font-size: 0.82rem; line-height: 1.6; color: var(--muted-soft); max-width: 34rem; } .offer-inner--solo .offer-terms { margin-left: auto; margin-right: auto; } /* ───── The one-liners ───── On the pricing card and in the purchase summary, where the decision is actually made. Ochre, so it separates from the sage ticks above it without becoming a second colour scheme. */ .price-included--offer { color: var(--brand-ochre); } .price-included--offer .included-check { color: var(--brand-ochre); } .mol-offer-line { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.6rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--brand-ochre-text); } .mol-offer-line-icon { flex: 0 0 auto; margin-top: 0.18rem; } @media (max-width: 860px) { .offer-inner { grid-template-columns: 1fr; gap: 1.9rem; max-width: 34rem; } .offer-media { aspect-ratio: 16 / 10; } } @media (max-width: 768px) { .offer-band { padding: 3.25rem 0; } .offer-band--compact { padding: 2.5rem 0; } .offer-meta { gap: 1.1rem 2rem; } } /* ═══════════════════════════════════════════════════════════════════════ v3.4.0 — DARK HEADER The logo kept losing, and after two attempts at making it bigger it was clear size was not the variable. It was losing to the hero headline — four or five times its weight, directly beneath it. Two elements cannot both be the first thing seen. So the header becomes an object rather than a frame: near-black bar, the reversed lockup, and the hero headline brought down so it stops competing. The mark's four colours are also at their strongest here — sage and ochre clear 5:1 on the ink and only about 2.7:1 on paper. It bookends the page too. The trust bar, pricing card and footer are already #1C2021, so a dark header turns three unrelated dark blocks into a deliberate top and tail. A light header is the more confident look for a brand people already know, and this is worth revisiting once the name means something — it is a handful of lines to undo. ═══════════════════════════════════════════════════════════════════════ */ .site-header { background: var(--dark); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; } .logo-mark { height: 72px; } .primary-nav .nav-list a { color: rgba(255, 255, 255, 0.82); } .primary-nav .nav-list a:hover, .nav-list a:hover { color: var(--brand-sage); opacity: 1; } /* The burger sits on the dark bar too. */ .menu-toggle span { background: #fff; } /* ───── Hero ───── 4.6rem was loud enough to flatten everything under it, including the logo and both route cards. Down a third, which still leaves it clearly above the section headings — hierarchy intact, argument over. */ .hero-title { font-size: clamp(2.05rem, 3.9vw, 2.95rem); } .hero-subtitle { font-size: clamp(0.98rem, 1.2vw, 1.08rem); } @media (min-width: 769px) { .site-header__inner { gap: 0.9rem; padding: 1.15rem 2rem; } /* Bar is ~152px now. */ .site-main > .hero { padding-top: 10.5rem; } .site-main > section:first-child:not(.hero) { padding-top: 12rem; } } @media (max-width: 768px) { .logo-mark { height: 52px; } /* The slide-down panel was a near-white sheet, which under a black bar read as a rendering fault rather than a menu. */ .primary-nav.is-open { background: var(--dark-card); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .primary-nav.is-open .nav-list a { color: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(255, 255, 255, 0.12); } } /* ═══════════════════════════════════════════════════════════════════════ v3.4.1 — LOGO SIZING THAT WOOCOMMERCE CANNOT UNDO On product and shop pages WooCommerce puts `woocommerce` / `woocommerce-page` on the body and loads its own stylesheet after the theme's, containing: .woocommerce img, .woocommerce-page img { height: auto; max-width: 100% } `.woocommerce img` is a class plus an element — specificity (0,1,1) — and beats a bare `.logo-mark` at (0,1,0). So on every product page the header logo dropped its height and rendered at the file's natural size, 653 × 180, turning the header into a 257px band. Scoping to the header and footer takes it to (0,2,0), which wins without `!important` and keeps the rule easy to override later. `width: auto` is restated because WooCommerce's `max-width: 100%` stays in play. This has been latent since WooCommerce was installed; it only surfaced when a stale `.site-header .logo-mark` rule was cleared out of the Customizer's Additional CSS, which had been masking it by accident. ═══════════════════════════════════════════════════════════════════════ */ .site-header .logo-mark { height: 72px; width: auto; max-width: 100%; } .site-footer .logo-mark, .footer-logo .logo-mark { height: 56px; width: auto; max-width: 100%; } @media (max-width: 768px) { .site-header .logo-mark { height: 52px; width: auto; } } /* ═══════════════════════════════════════════════════════════════════════ v3.4.2 — HEADER BACKGROUND, ONE RUNG HIGHER v3.4.1's `.site-header .logo-mark` (0,2,0) held, but `.site-header { background }` (0,1,0) did not — so something is setting the header background at (0,1,0) or above and loading after the theme's stylesheet. Most likely an older copy of this file being served by a caching or CSS-combining plugin: a stale `.site-header { background: rgba(243,243,240,.88) }` at equal specificity but later in the cascade wins, while it loses to the two-class logo rule regardless of order. That is exactly the pattern observed. `header.site-header` is a class plus an element — (0,1,1) — so it beats a bare `.site-header` no matter which file loads last, without reaching for `!important` and without becoming the next thing to fight. If the bar STILL goes light after this, it is not a specificity problem: purge the cache and turn off CSS combining rather than escalating again. ═══════════════════════════════════════════════════════════════════════ */ header.site-header { background: var(--dark); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; } /* ═══════════════════════════════════════════════════════════════════════ v3.4.3 — THE ACTUAL CAUSE DevTools finally named it: `element.style` at the top of the cascade, setting `background: rgba(245, 245, 242, 0.85)` — an INLINE style on the
, which beats every stylesheet rule no matter how specific. It was theme.js doing it. The scroll handler wrote `header.style.background` directly, with the original v2.x colour hardcoded, and called itself once on load. So every header colour the CSS has set since v3.0 was overwritten a few milliseconds later — v3.1.1's "header tint fixed", v3.4.0's dark bar and v3.4.2's higher-specificity rule all landed correctly in the stylesheet and were then undone. Chasing it with specificity was never going to work; only `!important` beats an inline style, which is why the Additional CSS line did. theme.js now toggles `.is-scrolled` and sets no colour at all. The colour lives in one place, here, which is the only arrangement that cannot drift apart again. ═══════════════════════════════════════════════════════════════════════ */ header.site-header, header.site-header.is-scrolled { background: var(--dark); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; } /* The old effect raised the bar's opacity on scroll, which meant nothing once the bar became solid. A shadow does the same job — lifting the header off the content moving under it — without touching the colour. */ header.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 30px -12px rgba(0, 0, 0, 0.55); }