/* Theme Name: Farrar Joinery Theme URI: https://farrarjoinery.co.uk Author: Bizi Digital Author URI: https://bizidigital.com Description: Custom theme for Farrar Joinery Manufacturers. Bespoke timber windows and doors, handcrafted in Yorkshire. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 8.0 Text Domain: farrar-joinery */ :root { --forest-950: #17251c; --forest-900: #203326; --forest-800: #2f4a37; --forest-700: #456a4d; --moss-500: #7d9e35; --moss-400: #95b94c; --cream-100: #f4ead4; --stone-50: #faf8f3; --stone-100: #f0ece3; --stone-200: #e3ddd1; --charcoal: #242722; --muted: #696d66; --white: #ffffff; --serif: "Libre Caslon Display", Georgia, serif; --sans: "DM Sans", Arial, sans-serif; --container: 1240px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --shadow-soft: 0 18px 50px rgba(23, 37, 28, 0.09); --shadow-strong: 0 24px 80px rgba(11, 22, 15, 0.24); --transition: 220ms ease; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 130px; } body { margin: 0; overflow-x: hidden; color: var(--charcoal); background: var(--stone-50); font-family: var(--sans); line-height: 1.6; } body.modal-open { overflow: hidden; } img { display: block; width: 100%; } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; } .container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; } .section { padding: 120px 0; } .eyebrow { display: inline-flex; gap: 10px; align-items: center; margin-bottom: 20px; color: var(--forest-700); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .eyebrow::before { width: 28px; height: 1px; background: currentColor; content: ""; } .section-heading { max-width: 780px; margin-bottom: 58px; } .section-heading h2 { margin-bottom: 20px; font-size: clamp(2.7rem, 5vw, 5.1rem); letter-spacing: -0.045em; } .section-heading p { max-width: 690px; color: var(--muted); font-size: 1.08rem; } .button { display: inline-flex; min-height: 54px; padding: 0 25px; border: 1px solid transparent; border-radius: 999px; align-items: center; justify-content: center; gap: 11px; cursor: pointer; font-weight: 700; transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition); } .button:hover { transform: translateY(-2px); } .button-primary { color: var(--forest-950); background: var(--cream-100); } .button-primary:hover { background: var(--white); } /* Used by the final CTA on the about, product and projects templates. It was never defined, so those CTAs rendered as bare bold text with no button. */ .button-cream { color: var(--forest-950); background: var(--cream-100); } .button-cream:hover { background: var(--white); } .button-dark { color: var(--white); background: var(--forest-900); } .button-dark:hover { background: var(--forest-700); } .button-outline { color: var(--white); border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(8px); } .button-outline:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.13); } .button svg { width: 17px; height: 17px; } /* HEADER */ .site-header { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; color: var(--cream-100); transition: background var(--transition), box-shadow var(--transition), transform var(--transition); } /* main.js toggles .header-hidden past 400px when scrolling down, and .locked on while a dialog or the mobile menu is open. Neither had a rule, so the header never hid and the page scrolled behind open dialogs. */ .site-header.header-hidden { transform: translateY(-100%); } body.locked { overflow: hidden; } .site-header.scrolled, .site-header.menu-open { background: rgba(23, 37, 28, 0.96); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12); backdrop-filter: blur(14px); } .brand-logo-dark { display: none; } .nav-shell { display: flex; min-height: 96px; align-items: center; justify-content: space-between; gap: 28px; } .brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 13px; } .brand-logo { height: 60px; width: auto; } .desktop-nav { display: flex; align-items: center; } .desktop-nav-list { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0; list-style: none; } .desktop-nav-list > li { position: relative; } .desktop-nav-list > li > a { display: flex; padding: 13px 14px; border: 0; align-items: center; gap: 6px; color: inherit; background: none; cursor: pointer; font-size: 0.91rem; font-weight: 600; } .desktop-nav-list .sub-menu { position: absolute; top: calc(100% + 8px); left: 0; width: 260px; margin: 0; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; opacity: 0; visibility: hidden; transform: translateY(8px); color: var(--cream-100); background: var(--forest-950); box-shadow: var(--shadow-strong); list-style: none; transition: var(--transition); } .desktop-nav-list > li:hover > .sub-menu, .desktop-nav-list > li:focus-within > .sub-menu, .desktop-nav-list .sub-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .desktop-nav-list .sub-menu a { display: block; padding: 11px 13px; border-radius: 9px; font-size: 0.9rem; } .desktop-nav-list .sub-menu a:hover { background: rgba(255, 255, 255, 0.08); } .header-actions { display: flex; align-items: center; gap: 12px; } .header-phone { font-size: 0.9rem; font-weight: 700; } .menu-toggle { display: none; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; align-items: center; justify-content: center; color: var(--cream-100); background: transparent; cursor: pointer; } .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 20px; height: 2px; background: currentColor; content: ""; transition: var(--transition); } .menu-toggle span { position: relative; } .menu-toggle span::before { position: absolute; top: -6px; } .menu-toggle span::after { position: absolute; top: 6px; } .site-header.menu-open .menu-toggle span { background: transparent; } .site-header.menu-open .menu-toggle span::before { top: 0; transform: rotate(45deg); } .site-header.menu-open .menu-toggle span::after { top: 0; transform: rotate(-45deg); } .mobile-nav { display: none; } /* HERO */ .hero { position: relative; display: grid; min-height: min(100vh, 800px); color: var(--white); background-position: center; background-size: cover; background-repeat: no-repeat; } .hero::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 27, 18, 0.83) 0%, rgba(13, 27, 18, 0.53) 48%, rgba(13, 27, 18, 0.18) 100%); content: ""; } .hero::after { position: absolute; right: 0; bottom: 0; left: 0; height: 190px; pointer-events: none; background: linear-gradient(transparent, rgba(10, 20, 13, 0.28)); content: ""; } .hero-inner { position: relative; z-index: 2; display: grid; padding-top: 130px; padding-bottom: 80px; align-content: center; } .hero-content { max-width: 800px; } .hero .eyebrow { color: var(--cream-100); } .hero h1 { max-width: 900px; margin-bottom: 28px; color: var(--cream-100); font-size: clamp(3rem, 5.5vw, 5.2rem); letter-spacing: -0.055em; } .hero-copy { max-width: 700px; margin-bottom: 38px; color: rgba(255, 255, 255, 0.84); font-size: clamp(1.05rem, 1.7vw, 1.3rem); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero-proof { position: absolute; z-index: 4; right: 4vw; bottom: 60px; display: grid; width: min(450px, 38vw); padding: 28px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 18px; grid-template-columns: repeat(3, 1fr); background: rgba(21, 38, 26, 0.74); backdrop-filter: blur(13px); } .proof-item { padding: 0 18px; border-right: 1px solid rgba(255, 255, 255, 0.2); } .proof-item:first-child { padding-left: 0; } .proof-item:last-child { padding-right: 0; border-right: 0; } .proof-value { display: block; color: var(--cream-100); font-family: var(--serif); font-size: 1.7rem; line-height: 1; } .proof-label { display: block; margin-top: 8px; color: rgba(255, 255, 255, 0.68); font-size: 0.72rem; line-height: 1.3; text-transform: uppercase; } /* TRUST STRIP */ .trust-strip { color: var(--cream-100); background: var(--forest-950); } .trust-grid { display: grid; min-height: 118px; grid-template-columns: repeat(5, 1fr); align-items: center; } .trust-item { display: grid; min-height: 60px; padding: 0 24px; border-right: 1px solid rgba(255, 255, 255, 0.12); place-content: center; text-align: center; } .trust-item:last-child { border-right: 0; } .trust-item strong { font-size: 0.87rem; letter-spacing: 0.02em; } .trust-item span { margin-top: 3px; color: rgba(255, 255, 255, 0.55); font-size: 0.74rem; } /* INTRODUCTION */ .intro-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 80px; } .intro-copy h2 { margin-bottom: 28px; font-size: clamp(3rem, 5.6vw, 6rem); letter-spacing: -0.05em; } .intro-copy p { max-width: 620px; color: var(--muted); font-size: 1.07rem; } .text-link { display: inline-flex; margin-top: 22px; padding-bottom: 4px; border-bottom: 1px solid currentColor; align-items: center; gap: 9px; color: var(--forest-800); font-weight: 700; } .intro-visual { position: relative; min-height: 650px; } .intro-main-image { position: absolute; top: 0; right: 0; width: 78%; height: 570px; object-fit: cover; } .intro-detail-image { position: absolute; bottom: 0; left: 0; width: 47%; height: 300px; border: 12px solid var(--stone-50); object-fit: cover; box-shadow: var(--shadow-soft); } .material-note { position: absolute; right: -16px; bottom: 30px; width: 220px; padding: 22px; color: var(--cream-100); background: var(--forest-800); box-shadow: var(--shadow-strong); } .material-note small { display: block; margin-bottom: 8px; opacity: 0.65; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; } .material-note strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1.15; } /* PRODUCTS */ .products-section { background: var(--stone-100); } .product-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .product-card { position: relative; min-height: 510px; overflow: hidden; color: var(--white); background: var(--forest-900); } .product-card:nth-child(1) { grid-column: span 7; } .product-card:nth-child(2) { grid-column: span 5; } .product-card:nth-child(3), .product-card:nth-child(4), .product-card:nth-child(5) { min-height: 410px; grid-column: span 4; } /* Even grid for index pages listing the full range. The spans above are a bespoke layout for the homepage's five cards; a sixth card has no span rule and collapses to one column. This opts out of the span system entirely and lets grid-template-columns drive the layout, so it takes any card count. */ .product-grid-even { grid-template-columns: repeat(3, 1fr); } .product-grid-even .product-card:nth-child(n) { min-height: 410px; grid-column: auto; } .product-card img { height: 100%; object-fit: cover; transition: transform 700ms ease; } .product-card:hover img { transform: scale(1.035); } .product-card::after { position: absolute; inset: 0; background: linear-gradient(transparent 33%, rgba(8, 18, 11, 0.76) 100%); content: ""; } .product-content { position: absolute; z-index: 2; right: 30px; bottom: 30px; left: 30px; } .product-content span { display: block; margin-bottom: 8px; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; } .product-content h3 { margin-bottom: 10px; color: var(--cream-100); font-size: clamp(2rem, 3vw, 3.4rem); } .product-content p { max-width: 480px; margin-bottom: 0; color: rgba(255, 255, 255, 0.74); font-size: 0.9rem; } /* PROJECTS */ .project-toolbar { display: flex; margin-bottom: 36px; flex-wrap: wrap; gap: 10px; } .filter-button { min-height: 43px; padding: 0 18px; border: 1px solid var(--stone-200); border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 600; transition: var(--transition); } .filter-button.active, .filter-button:hover { color: var(--white); border-color: var(--forest-800); background: var(--forest-800); } .project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 28px; } .project-card { transition: opacity var(--transition), transform var(--transition); } .project-card.hidden { display: none; } .project-image { height: 480px; overflow: hidden; background: var(--stone-200); } .project-image img { height: 100%; object-fit: cover; transition: transform 650ms ease; } .project-card:hover .project-image img { transform: scale(1.025); } .project-meta { display: flex; padding-top: 20px; align-items: flex-start; justify-content: space-between; gap: 20px; } .project-meta h3 { margin-bottom: 7px; font-size: 2rem; } .project-meta p { margin-bottom: 0; color: var(--muted); font-size: 0.86rem; } .project-arrow { display: grid; width: 45px; height: 45px; border: 1px solid var(--stone-200); border-radius: 50%; flex: 0 0 auto; place-items: center; transition: var(--transition); } .project-card:hover .project-arrow { color: var(--white); border-color: var(--forest-800); background: var(--forest-800); } /* CRAFTSMANSHIP */ .craft-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 70px; align-items: center; } .craft-image { height: 680px; object-fit: cover; } .craft-copy h2 { margin-bottom: 26px; font-size: clamp(3rem, 5vw, 5.4rem); letter-spacing: -0.05em; } .craft-copy > p { color: var(--muted); font-size: 1.05rem; } .craft-list { margin-top: 38px; border-top: 1px solid var(--stone-200); } .craft-list-item { display: grid; padding: 22px 0; border-bottom: 1px solid var(--stone-200); grid-template-columns: 46px 1fr; gap: 18px; } .craft-number { color: var(--forest-700); font-family: var(--serif); font-size: 1.3rem; } .craft-list-item strong { display: block; margin-bottom: 5px; } .craft-list-item p { margin-bottom: 0; color: var(--muted); font-size: 0.9rem; } /* PROCESS */ .process-section { background: var(--cream-100); } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .process-step { position: relative; padding: 34px 30px 34px 0; border-top: 1px solid rgba(32, 51, 38, 0.28); } .process-step:not(:last-child)::after { position: absolute; top: -5px; right: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--forest-800); content: ""; } .process-step:not(:first-child) { padding-left: 30px; } .process-index { display: block; margin-bottom: 50px; color: var(--forest-700); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; } .process-step h3 { margin-bottom: 14px; font-size: 1.8rem; } .process-step p { margin-bottom: 0; color: #5e625b; font-size: 0.9rem; } /* AUDIENCES */ .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .audience-card { display: flex; min-height: 410px; padding: 38px; flex-direction: column; justify-content: flex-end; color: var(--white); background-position: center; background-size: cover; } .audience-card h3 { margin-bottom: 12px; color: var(--cream-100); font-size: 2.25rem; } .audience-card p { color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; } .audience-link { display: inline-flex; margin-top: 16px; align-items: center; gap: 8px; font-weight: 700; } /* TESTIMONIAL */ .testimonial-section { overflow: hidden; color: var(--cream-100); background: var(--forest-950); } .testimonial-shell { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 70px; align-items: center; } .testimonial-image { height: 620px; object-fit: cover; } .quote-mark { color: var(--moss-400); font-family: var(--serif); font-size: 6rem; line-height: 0.5; } .testimonial-copy blockquote { margin: 30px 0; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 4.4rem); line-height: 1.14; } .testimonial-author { color: rgba(255, 255, 255, 0.6); font-size: 0.88rem; } /* GUARANTEE */ .guarantee-section { position: relative; overflow: hidden; } .guarantee-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 70px; } .guarantee-badge { position: relative; display: grid; width: min(100%, 470px); aspect-ratio: 1; border: 1px solid var(--stone-200); border-radius: 50%; place-items: center; background: var(--white); box-shadow: var(--shadow-soft); } .guarantee-badge::before, .guarantee-badge::after { position: absolute; border: 1px solid var(--stone-200); border-radius: 50%; content: ""; } .guarantee-badge::before { inset: 28px; } .guarantee-badge::after { inset: 55px; } .badge-inner { position: relative; z-index: 2; text-align: center; } .badge-inner strong { display: block; color: var(--forest-800); font-family: var(--serif); font-size: clamp(5.5rem, 10vw, 8.5rem); font-weight: 400; line-height: 0.8; } .badge-inner span { display: block; margin-top: 18px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } /* FAQ */ .faq-section { background: var(--stone-100); } .faq-grid { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 80px; } .faq-intro { position: sticky; top: 140px; align-self: start; } .faq-intro h2 { margin-bottom: 20px; font-size: clamp(3.2rem, 5vw, 5.2rem); } .faq-intro p { color: var(--muted); } .faq-item { border-bottom: 1px solid #d6d0c5; } .faq-question { display: flex; width: 100%; padding: 25px 0; border: 0; align-items: center; justify-content: space-between; gap: 20px; color: var(--charcoal); background: transparent; cursor: pointer; text-align: left; font-weight: 700; } .faq-icon { position: relative; width: 18px; height: 18px; flex: 0 0 auto; } .faq-icon::before, .faq-icon::after { position: absolute; top: 8px; left: 1px; width: 16px; height: 2px; background: var(--forest-800); content: ""; transition: transform var(--transition); } .faq-icon::after { transform: rotate(90deg); } .faq-item.open .faq-icon::after { transform: rotate(0); } .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; } .faq-item.open .faq-answer { grid-template-rows: 1fr; } .faq-answer-inner { overflow: hidden; } .faq-answer p { max-width: 780px; margin-bottom: 25px; color: var(--muted); } /* CTA */ .final-cta { position: relative; min-height: 710px; display: grid; align-items: center; padding: 100px 0; color: var(--white); background-position: center; background-size: cover; background-repeat: no-repeat; } .final-cta::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 34, 23, 0.87), rgba(17, 34, 23, 0.42)); content: ""; } .final-cta-content { position: relative; z-index: 2; max-width: 790px; } .final-cta h2 { margin-bottom: 25px; color: var(--cream-100); font-size: clamp(3.8rem, 7vw, 7.3rem); letter-spacing: -0.05em; } .final-cta p { max-width: 650px; color: rgba(255, 255, 255, 0.73); font-size: 1.1rem; } /* FOOTER */ .site-footer { padding: 80px 0 28px; color: rgba(255, 255, 255, 0.7); background: var(--forest-950); } .footer-top { display: grid; padding-bottom: 65px; grid-template-columns: 1.35fr repeat(3, 0.65fr); gap: 55px; } .footer-brand { margin-bottom: 24px; } .footer-brand .brand-logo { height: 50px; } .footer-intro { max-width: 420px; color: rgba(255, 255, 255, 0.52); font-size: 0.9rem; } .footer-column h3 { margin-bottom: 19px; color: var(--cream-100); font-family: var(--sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .footer-column a { display: block; margin: 9px 0; font-size: 0.88rem; } .footer-column a:hover { color: var(--cream-100); } .footer-bottom { display: flex; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); align-items: center; justify-content: space-between; gap: 20px; font-size: 0.77rem; } /* STICKY CTA */ .sticky-quote { position: fixed; z-index: 900; right: 22px; bottom: 22px; display: inline-flex; min-height: 54px; padding: 0 23px; border: 0; border-radius: 999px; align-items: center; gap: 10px; color: var(--forest-950); background: var(--cream-100); box-shadow: 0 14px 40px rgba(9, 22, 13, 0.25); cursor: pointer; font-weight: 700; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 400ms ease, transform 400ms ease; } .sticky-quote.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* QUOTE MODAL */ .modal { position: fixed; z-index: 2000; inset: 0; display: grid; padding: 24px; opacity: 0; visibility: hidden; place-items: center; background: rgba(9, 19, 12, 0.78); backdrop-filter: blur(8px); transition: var(--transition); } .modal.open { opacity: 1; visibility: visible; } .modal-panel { position: relative; width: min(100%, 760px); max-height: calc(100vh - 48px); overflow-y: auto; padding: 48px; border-radius: 20px; background: var(--stone-50); box-shadow: var(--shadow-strong); transform: translateY(14px); transition: transform var(--transition); } .modal.open .modal-panel { transform: translateY(0); } .modal-close { position: absolute; top: 18px; right: 18px; display: grid; width: 42px; height: 42px; padding: 0; border: 1px solid var(--stone-200); border-radius: 50%; place-items: center; background: transparent; cursor: pointer; font-size: 1.25rem; } .modal-header h2 { margin-bottom: 10px; font-size: clamp(2.4rem, 5vw, 4rem); } .modal-header p { color: var(--muted); } .progress { display: grid; margin: 30px 0 38px; grid-template-columns: repeat(3, 1fr); gap: 8px; } .progress-segment { height: 5px; border-radius: 999px; background: var(--stone-200); } .progress-segment.active { background: var(--forest-700); } .form-step { display: none; } .form-step.active { display: block; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .field { display: grid; gap: 8px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 0.82rem; font-weight: 700; } /* Two contact rows use a instead of a because they head a group rather than a single input. Without this they rendered 16px/400 against every other label at 0.82rem/700. */ .field-label { display: block; font-size: 0.82rem; font-weight: 700; } .optional { color: var(--muted); font-weight: 400; } .field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--stone-200); border-radius: 8px; outline: none; color: var(--charcoal); background: var(--white); } .field textarea { min-height: 120px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--forest-700); box-shadow: 0 0 0 3px rgba(69, 106, 77, 0.1); } .form-actions { display: flex; margin-top: 28px; align-items: center; justify-content: space-between; gap: 12px; } .form-note { color: var(--muted); font-size: 0.77rem; } .success-state { padding: 30px 0; text-align: center; } .success-state h3 { margin-bottom: 12px; font-size: 2.5rem; } /* REVEAL ANIMATION */ .js-loaded .reveal { opacity: 0; transform: translateY(24px); transition: opacity 650ms ease, transform 650ms ease; } .js-loaded .reveal.revealed { opacity: 1; transform: translateY(0); } /* JOURNAL HERO */ .journal-hero { position: relative; min-height: 680px; padding: 190px 0 105px; overflow: hidden; color: var(--white); background: linear-gradient(125deg, var(--forest-950) 0%, var(--forest-800) 66%, #356242 100%); } .hero-rings { position: absolute; top: 72px; right: -130px; width: 650px; height: 650px; opacity: 0.13; pointer-events: none; transform: rotate(-9deg); } .breadcrumbs { display: flex; margin-bottom: 62px; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.52); font-size: 0.77rem; } .breadcrumbs a:hover { color: var(--cream-100); } .hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: end; gap: 85px; } .hero-label { display: flex; margin-bottom: 22px; align-items: center; gap: 11px; color: var(--moss-400); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .hero-label-dot { width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; } .journal-hero h1 { max-width: 860px; margin-bottom: 0; color: var(--cream-100); font-size: clamp(4.8rem, 9vw, 9rem); letter-spacing: -0.06em; } .hero-intro { padding-bottom: 12px; } .hero-intro p { margin-bottom: 30px; color: rgba(255, 255, 255, 0.7); font-size: 1.08rem; } .topic-links { display: flex; flex-wrap: wrap; gap: 8px; } .topic-links a { padding: 9px 14px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; color: rgba(255, 255, 255, 0.78); font-size: 0.75rem; font-weight: 600; transition: var(--transition); } .topic-links a:hover { color: var(--forest-950); border-color: var(--cream-100); background: var(--cream-100); } /* FEATURED ARTICLE */ .featured-section { padding: 92px 0 122px; background: var(--stone-100); } .featured-heading { display: flex; margin-bottom: 26px; align-items: center; justify-content: space-between; gap: 24px; } .featured-heading h2 { margin: 0; font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .featured-heading span { color: var(--muted, #696c65); font-size: 0.77rem; } .featured-story { display: grid; min-height: 590px; grid-template-columns: 1.28fr 0.72fr; background: var(--white); box-shadow: 0 24px 70px rgba(17, 40, 24, 0.14); } .featured-image { position: relative; min-height: 590px; overflow: hidden; } .featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 750ms ease; } .featured-story:hover .featured-image img { transform: scale(1.025); } .feature-number { position: absolute; top: 26px; left: 26px; display: grid; width: 70px; height: 70px; border-radius: 50%; place-items: center; color: var(--forest-950); background: var(--cream-100); font-family: var(--font-display); font-size: 1.75rem; } .featured-copy { display: flex; padding: clamp(40px, 5vw, 70px); flex-direction: column; justify-content: center; } .category-label { margin-bottom: 22px; color: var(--forest-700); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .featured-copy h2 { margin-bottom: 23px; font-size: clamp(2.8rem, 4.7vw, 4.9rem); letter-spacing: -0.045em; } .featured-copy p { margin-bottom: 28px; color: var(--muted, #696c65); } .article-meta { display: flex; margin-bottom: 32px; flex-wrap: wrap; gap: 18px; color: var(--muted, #696c65); font-size: 0.75rem; } /* ARTICLE COLLECTION */ .collection-heading { display: grid; margin-bottom: 54px; grid-template-columns: 1fr auto; align-items: end; gap: 40px; } .collection-heading h2 { max-width: 770px; margin-bottom: 17px; font-size: clamp(3.3rem, 5.7vw, 5.9rem); letter-spacing: -0.05em; } .collection-heading p { max-width: 660px; margin-bottom: 0; color: var(--muted, #696c65); } .collection-toolbar { display: grid; margin-bottom: 50px; padding: 21px; border: 1px solid var(--stone-200); align-items: center; gap: 26px; background: var(--white); } .filter-list { display: flex; flex-wrap: wrap; gap: 8px; } /* ARTICLE GRID */ .article-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 58px 27px; } .article-card { min-width: 0; grid-column: span 4; } .article-card.wide { grid-column: span 7; } .article-card.medium { grid-column: span 5; } .article-image { position: relative; display: block; height: 335px; margin-bottom: 23px; overflow: hidden; background: var(--stone-200); } .article-card.wide .article-image, .article-card.medium .article-image { height: 425px; } .article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 650ms ease; } .article-card:hover .article-image img { transform: scale(1.03); } .image-label { position: absolute; bottom: 15px; left: 15px; padding: 8px 12px; border-radius: 999px; color: var(--forest-950); background: var(--cream-100); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .card-meta { display: flex; margin-bottom: 13px; align-items: center; gap: 9px; color: var(--muted, #696c65); font-size: 0.72rem; } .meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #bdb6a9; } .article-card h3 { margin-bottom: 14px; font-size: clamp(1.8rem, 2.4vw, 2.4rem); letter-spacing: -0.025em; } .article-card.wide h3 { max-width: 760px; font-size: clamp(2.3rem, 3.4vw, 3.6rem); } .article-card h3 a { transition: color var(--transition); } .article-card h3 a:hover { color: var(--forest-700); } .article-card p { max-width: 660px; margin-bottom: 18px; color: var(--muted, #696c65); font-size: 0.89rem; } .card-link { display: inline-flex; align-items: center; gap: 8px; color: var(--forest-800); font-size: 0.82rem; font-weight: 700; } .card-link span { transition: transform var(--transition); } .article-card:hover .card-link span { transform: translateX(4px); } .empty-state { padding: 70px 24px; border: 1px solid var(--stone-200); text-align: center; background: var(--white); } .empty-state h3 { margin-bottom: 12px; font-size: 2.4rem; } .empty-state p { color: var(--muted, #696c65); } /* RESOURCE COLLECTION */ .resource-section { color: var(--white); background: var(--forest-950); } .resource-heading { display: grid; margin-bottom: 58px; grid-template-columns: 1fr 0.65fr; align-items: end; gap: 75px; } .resource-heading h2 { margin-bottom: 0; color: var(--cream-100); font-size: clamp(3.4rem, 5.8vw, 6rem); letter-spacing: -0.05em; } .resource-heading p { margin-bottom: 5px; color: rgba(255, 255, 255, 0.61); } .resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .resource-card { display: flex; min-height: 365px; padding: 32px; border: 1px solid rgba(255, 255, 255, 0.13); flex-direction: column; justify-content: space-between; background: rgba(255, 255, 255, 0.025); transition: background var(--transition), transform var(--transition); } .resource-card:hover { background: rgba(255, 255, 255, 0.07); transform: translateY(-4px); } .resource-number { color: var(--moss-400); font-family: var(--font-display); font-size: 2.1rem; } .resource-card h3 { margin-bottom: 15px; color: var(--cream-100); font-size: 2.3rem; } .resource-card p { color: rgba(255, 255, 255, 0.6); font-size: 0.89rem; } .resource-card .card-link { color: var(--cream-100); } /* NEWSLETTER */ .newsletter-section { padding: 105px 0; background: var(--cream-100); } .newsletter-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 80px; } .newsletter-copy h2 { margin-bottom: 20px; font-size: clamp(3.1rem, 5vw, 5rem); letter-spacing: -0.05em; } .newsletter-copy p { max-width: 550px; margin-bottom: 0; color: #60635d; } .newsletter-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; } .newsletter-form input { min-height: 58px; padding: 0 18px; border: 1px solid rgba(18, 53, 34, 0.23); border-radius: 0; outline: none; background: rgba(255, 255, 255, 0.65); } .newsletter-form input:focus { border-color: var(--forest-800); box-shadow: 0 0 0 3px rgba(49, 93, 61, 0.1); } .newsletter-note { grid-column: 1 / -1; margin: 7px 0 0; color: #6b6d67; font-size: 0.7rem; } .newsletter-message { grid-column: 1 / -1; margin: 8px 0 0; color: var(--forest-800); font-weight: 700; } /* READING PROGRESS */ .reading-progress { position: fixed; z-index: 1200; top: 0; right: 0; left: 0; height: 4px; pointer-events: none; } .reading-progress-bar { width: 0; height: 100%; background: var(--moss-400); transition: width 80ms linear; } /* ARTICLE HERO */ .article-hero { position: relative; padding: 185px 0 95px; overflow: hidden; background: var(--cream-100); } .article-hero .breadcrumbs { color: #747269; } .article-hero .breadcrumbs a:hover { color: var(--forest-800); } .article-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); align-items: end; gap: 80px; } .article-category { display: inline-flex; margin-bottom: 25px; align-items: center; gap: 10px; color: var(--forest-800); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .article-category::before { width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; content: ""; } .article-hero h1 { max-width: 930px; margin-bottom: 28px; color: var(--forest-950); font-size: clamp(4rem, 7.3vw, 7.35rem); letter-spacing: -0.058em; } .standfirst { max-width: 820px; margin-bottom: 32px; color: #555c54; font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.65; } .article-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: #65685f; font-size: 0.79rem; } .byline-separator { width: 3px; height: 3px; border-radius: 50%; background: #9e9b91; } .article-summary { position: relative; overflow: hidden; padding: 34px; color: var(--white); background: var(--forest-950); box-shadow: var(--shadow-soft); } .summary-rings { position: absolute; right: -100px; bottom: -115px; width: 300px; height: 300px; opacity: 0.13; pointer-events: none; } .article-summary h2 { position: relative; z-index: 2; margin-bottom: 27px; color: var(--cream-100); font-family: var(--sans); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .summary-list { position: relative; z-index: 2; margin: 0; } .summary-row { display: grid; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); grid-template-columns: 100px 1fr; gap: 18px; } .summary-row dt { color: rgba(255, 255, 255, 0.48); font-size: 0.72rem; } .summary-row dd { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: 0.8rem; font-weight: 600; } /* FEATURE IMAGE */ .hero-media-section { padding: 0 0 42px; background: linear-gradient(to bottom, var(--cream-100) 0, var(--cream-100) 40%, var(--stone-50) 40%, var(--stone-50) 100%); } .hero-figure { margin: 0; } .hero-figure img { height: min(58vw, 690px); min-height: 450px; object-fit: cover; box-shadow: var(--shadow-soft); } .hero-figure figcaption { display: flex; padding-top: 13px; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 0.72rem; } /* ARTICLE LAYOUT */ .article-section { padding: 90px 0 125px; } .article-layout { display: grid; grid-template-columns: 58px minmax(0, 760px) 265px; justify-content: center; align-items: start; gap: 48px; } /* Share rail */ .share-rail { position: sticky; top: 135px; display: grid; justify-items: center; gap: 10px; } .share-label { margin-bottom: 5px; color: var(--muted); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); } .share-button { display: grid; width: 44px; height: 44px; padding: 0; border: 1px solid var(--stone-200); border-radius: 50%; place-items: center; color: var(--forest-800); background: transparent; cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition); } .share-button:hover { color: var(--white); border-color: var(--forest-800); background: var(--forest-800); } .share-button svg { width: 17px; height: 17px; } /* Article body */ .article-body { min-width: 0; font-family: var(--sans); font-size: 1.05rem; line-height: 1.85; } .article-body .lead { margin-bottom: 42px; color: #3f443e; font-family: var(--serif); font-size: clamp(1.65rem, 2.5vw, 2.15rem); line-height: 1.45; } .article-body h2 { margin: 78px 0 24px; color: var(--forest-950); font-size: clamp(2.7rem, 4.5vw, 4.25rem); letter-spacing: -0.045em; } .article-body h3 { margin: 45px 0 18px; color: var(--forest-950); font-size: 2rem; letter-spacing: -0.025em; } .article-body p { margin-bottom: 25px; color: #4d524c; } .article-body a:not(.button) { color: var(--forest-800); border-bottom: 1px solid rgba(47, 74, 55, 0.35); font-weight: 600; } .article-body ul, .article-body ol { margin: 0 0 30px; padding-left: 23px; color: #4d524c; } .article-body li { margin-bottom: 11px; padding-left: 6px; } /* Key points */ .key-points { margin: 50px 0 65px; padding: 34px 0; border-top: 1px solid var(--stone-200); border-bottom: 1px solid var(--stone-200); } .key-points h2 { margin: 0 0 24px; font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .key-point-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 34px; } .key-point { display: grid; grid-template-columns: 28px 1fr; gap: 13px; } .key-point-number { color: var(--forest-700); font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; } .key-point strong { display: block; margin-bottom: 4px; color: var(--charcoal); font-size: 0.9rem; } .key-point p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.6; } /* Inline figures */ .inline-figure { margin: 55px 0; } .inline-figure img { height: 500px; object-fit: cover; } .inline-figure figcaption { padding-top: 11px; color: var(--muted); font-size: 0.72rem; } /* Pull quote */ .pull-quote { position: relative; margin: 65px 0; padding: 48px; overflow: hidden; color: var(--white); background: var(--forest-800); } .pull-quote::after { position: absolute; right: -25px; bottom: -85px; color: rgba(255, 255, 255, 0.08); font-family: var(--serif); font-size: 18rem; line-height: 1; content: "\201C"; } .pull-quote blockquote { position: relative; z-index: 2; margin: 0 0 22px; color: var(--cream-100); font-size: clamp(2rem, 3.7vw, 3.25rem); letter-spacing: -0.025em; } .pull-quote cite { position: relative; z-index: 2; color: rgba(255, 255, 255, 0.56); font-size: 0.75rem; font-style: normal; } /* Comparison table */ .table-wrap { margin: 42px 0 55px; overflow-x: auto; border: 1px solid var(--stone-200); } .comparison-table { width: 100%; min-width: 650px; border-collapse: collapse; background: var(--white); } .comparison-table th, .comparison-table td { padding: 18px 20px; border-right: 1px solid var(--stone-200); border-bottom: 1px solid var(--stone-200); vertical-align: top; text-align: left; font-size: 0.82rem; line-height: 1.55; } .comparison-table th:last-child, .comparison-table td:last-child { border-right: 0; } .comparison-table tr:last-child td { border-bottom: 0; } .comparison-table th { color: var(--forest-950); background: var(--stone-100); font-size: 0.73rem; letter-spacing: 0.07em; text-transform: uppercase; } .comparison-table td:first-child { color: var(--charcoal); font-weight: 700; } /* Advisory note */ .advice-note { display: grid; margin: 42px 0; padding: 27px; border-left: 4px solid var(--moss-400); grid-template-columns: 33px 1fr; gap: 18px; background: var(--stone-100); } .advice-note-icon { display: grid; width: 30px; height: 30px; border: 1px solid var(--forest-700); border-radius: 50%; place-items: center; color: var(--forest-800); font-family: var(--serif); } .advice-note strong { display: block; margin-bottom: 6px; color: var(--forest-950); } .advice-note p { margin: 0; font-size: 0.86rem; line-height: 1.65; } /* Article CTA */ .article-cta { margin-top: 70px; padding: 42px; color: var(--white); background: var(--forest-950); } .article-cta h2 { margin: 0 0 17px; color: var(--cream-100); font-size: clamp(2.4rem, 4vw, 3.6rem); } .article-cta p { margin-bottom: 25px; color: rgba(255, 255, 255, 0.65); } /* Sidebar */ .article-sidebar { position: sticky; top: 135px; } .toc { padding-bottom: 28px; border-bottom: 1px solid var(--stone-200); } .toc h2 { margin-bottom: 20px; font-family: var(--sans); font-size: 0.71rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .toc-list { display: grid; margin: 0; padding: 0; list-style: none; gap: 3px; } .toc-link { display: block; padding: 9px 0 9px 14px; border-left: 1px solid var(--stone-200); color: var(--muted); font-size: 0.78rem; line-height: 1.45; transition: color var(--transition), border-color var(--transition); } .toc-link:hover, .toc-link.active { color: var(--forest-800); border-left-color: var(--moss-400); } .sidebar-cta { margin-top: 28px; padding: 25px; background: var(--stone-100); } .sidebar-cta h3 { margin-bottom: 12px; font-size: 1.65rem; } .sidebar-cta p { margin-bottom: 18px; color: var(--muted); font-size: 0.78rem; line-height: 1.6; } .sidebar-cta .button { width: 100%; min-height: 47px; padding-inline: 15px; font-size: 0.77rem; } /* RELATED ARTICLES */ .related-section { padding: 115px 0; background: var(--stone-50); } .related-heading { display: flex; margin-bottom: 45px; align-items: end; justify-content: space-between; gap: 35px; } .related-heading h2 { max-width: 700px; margin-bottom: 0; font-size: clamp(3.1rem, 5.2vw, 5.3rem); letter-spacing: -0.05em; } .related-heading a { color: var(--forest-800); font-size: 0.82rem; font-weight: 700; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .related-image { display: block; height: 310px; margin-bottom: 20px; overflow: hidden; background: var(--stone-200); } .related-image img { height: 100%; object-fit: cover; transition: transform 650ms ease; } .related-card:hover .related-image img { transform: scale(1.03); } .related-meta { margin-bottom: 10px; color: var(--forest-700); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .related-card h3 { margin-bottom: 13px; font-size: 2rem; letter-spacing: -0.025em; } .related-card p { color: var(--muted); font-size: 0.86rem; } /* TOAST */ .toast { position: fixed; z-index: 3000; bottom: 94px; left: 50%; max-width: calc(100% - 28px); padding: 13px 18px; border-radius: 999px; opacity: 0; visibility: hidden; color: var(--cream-100); background: var(--forest-950); box-shadow: var(--shadow-strong); font-size: 0.78rem; transform: translate(-50%, 10px); transition: var(--transition); } .toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* CONTACT HERO */ .contact-hero { position: relative; min-height: 790px; padding: 175px 0 95px; overflow: hidden; background: linear-gradient(90deg, var(--cream-100) 0%, var(--cream-100) 64%, var(--forest-800) 64%, var(--forest-800) 100%); } .contact-hero .hero-rings { position: absolute; top: 110px; left: -190px; width: 570px; height: 570px; opacity: 0.12; pointer-events: none; transform: rotate(-10deg); } .contact-hero .breadcrumbs { color: #75736a; } .contact-hero .breadcrumbs a:hover { color: var(--forest-800); } .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 80px; } .hero-label { display: flex; margin-bottom: 22px; align-items: center; gap: 11px; color: var(--forest-800); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .hero-label-mark { width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; } .hero-copy h1 { max-width: 740px; margin-bottom: 29px; color: var(--forest-950); font-size: clamp(4.1rem, 7vw, 7.15rem); letter-spacing: -0.057em; } .hero-copy > p { max-width: 650px; margin-bottom: 35px; color: #565d55; font-size: clamp(1.08rem, 1.7vw, 1.28rem); } .contact-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; } .contact-hero .button-outline { color: var(--forest-800); border-color: var(--stone-200); background: transparent; } .contact-hero .button-outline:hover { color: var(--white); border-color: var(--forest-800); background: var(--forest-800); } .hero-visual { position: relative; min-height: 550px; } .hero-image { position: absolute; top: 0; right: 0; width: 92%; height: 470px; object-fit: cover; box-shadow: var(--shadow-strong); } .contact-card { position: absolute; right: 0; bottom: 0; width: min(430px, 88%); padding: 34px; color: var(--white); background: var(--forest-950); box-shadow: var(--shadow-strong); } .contact-card h2 { margin-bottom: 24px; color: var(--cream-100); font-size: 2.15rem; } .contact-card-row { display: grid; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.13); grid-template-columns: 90px 1fr; gap: 18px; } .contact-card-row span { color: rgba(255, 255, 255, 0.48); font-size: 0.72rem; } .contact-card-row a, .contact-card-row strong { color: var(--white); font-size: 0.85rem; font-weight: 600; } .contact-card-row a:hover { color: var(--moss-400); } .contact-card-note { margin: 19px 0 0; color: rgba(255, 255, 255, 0.55); font-size: 0.72rem; } /* ENQUIRY ROUTES */ .route-section { padding: 100px 0; background: var(--stone-50); } .route-heading { display: grid; margin-bottom: 52px; grid-template-columns: 1fr 0.7fr; align-items: end; gap: 70px; } .route-heading h2 { max-width: 790px; margin-bottom: 0; font-size: clamp(3.3rem, 5.7vw, 5.9rem); letter-spacing: -0.05em; } .route-heading p { margin-bottom: 6px; color: var(--muted); } .route-tabs { display: grid; grid-template-columns: repeat(3, 1fr); } .route-button { position: relative; min-height: 180px; padding: 28px 30px; border: 0; border-top: 1px solid var(--stone-200); color: var(--charcoal); background: transparent; text-align: left; cursor: pointer; transition: color var(--transition), background var(--transition); } .route-button:not(:last-child) { border-right: 1px solid var(--stone-200); } .route-button:hover, .route-button.active { color: var(--white); background: var(--forest-800); } .route-index { display: block; margin-bottom: 31px; color: var(--forest-700); font-family: var(--serif); font-size: 1.45rem; } .route-button:hover .route-index, .route-button.active .route-index { color: var(--moss-400); } .route-button strong { display: block; margin-bottom: 7px; font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1.1; } .route-button small { display: block; max-width: 290px; color: var(--muted); font-size: 0.76rem; line-height: 1.55; } .route-button:hover small, .route-button.active small { color: rgba(255, 255, 255, 0.63); } .route-description { display: grid; margin-top: 45px; padding: 35px 0 0; border-top: 1px solid var(--stone-200); grid-template-columns: 0.65fr 1.35fr; gap: 65px; } .route-description h3 { margin-bottom: 0; color: var(--forest-950); font-size: 2.5rem; } .route-description-copy p { max-width: 700px; margin-bottom: 18px; color: var(--muted); } .route-description-copy ul { display: flex; margin: 0; padding: 0; flex-wrap: wrap; gap: 9px; list-style: none; } .route-description-copy li { padding: 8px 13px; border: 1px solid var(--stone-200); border-radius: 999px; font-size: 0.72rem; font-weight: 600; } /* ENQUIRY FORM */ .form-section { padding: 115px 0; color: var(--white); background: var(--forest-950); } .form-layout { display: grid; grid-template-columns: 0.72fr 1.28fr; align-items: start; gap: 75px; } .form-guidance { position: sticky; top: 135px; } .form-guidance h2 { margin-bottom: 25px; color: var(--cream-100); font-size: clamp(3.3rem, 5.4vw, 5.5rem); letter-spacing: -0.05em; } .form-guidance > p { max-width: 480px; color: rgba(255, 255, 255, 0.62); } .guidance-list { margin-top: 46px; border-top: 1px solid rgba(255, 255, 255, 0.14); } .guidance-item { display: grid; padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); grid-template-columns: 38px 1fr; gap: 17px; } .guidance-number { color: var(--moss-400); font-family: var(--serif); font-size: 1.25rem; } .guidance-item strong { display: block; margin-bottom: 5px; color: var(--cream-100); font-size: 0.86rem; } .guidance-item p { margin: 0; color: rgba(255, 255, 255, 0.5); font-size: 0.77rem; line-height: 1.6; } .enquiry-panel { padding: clamp(32px, 5vw, 58px); color: var(--charcoal); background: var(--stone-50); box-shadow: var(--shadow-strong); } .form-heading { margin-bottom: 38px; } .form-route-label { margin-bottom: 13px; color: var(--forest-700); font-size: 0.71rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .form-heading h2 { margin-bottom: 14px; font-size: clamp(2.8rem, 4.5vw, 4.4rem); letter-spacing: -0.04em; } .form-heading p { margin-bottom: 0; color: var(--muted); } .enquiry-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 19px; } .company-field.is-hidden { display: none; } .textarea-wrap { position: relative; } .textarea-count { position: absolute; right: 12px; bottom: 10px; color: var(--muted); font-size: 0.68rem; } /* File upload */ .file-drop { position: relative; display: grid; min-height: 155px; padding: 27px; border: 1px dashed #bcb5a8; place-items: center; background: var(--white); text-align: center; cursor: pointer; transition: border-color var(--transition), background var(--transition); } .file-drop.dragging { border-color: var(--forest-800); background: #f3f6f1; } .file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .upload-icon { display: grid; width: 42px; height: 42px; margin: 0 auto 12px; border: 1px solid var(--stone-200); border-radius: 50%; place-items: center; color: var(--forest-800); } .upload-icon svg { width: 18px; height: 18px; } .file-drop strong { display: block; margin-bottom: 4px; font-size: 0.84rem; } .file-drop > span > span:last-child { color: var(--muted); font-size: 0.72rem; } .file-list { display: grid; margin-top: 11px; gap: 7px; } .file-item { display: grid; padding: 10px 12px; border: 1px solid var(--stone-200); grid-template-columns: 1fr auto; align-items: center; gap: 15px; background: var(--white); font-size: 0.73rem; } .file-details { min-width: 0; } .file-name { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .file-size { color: var(--muted); font-size: 0.66rem; } .remove-file { width: 29px; height: 29px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; } .remove-file:hover { color: var(--white); background: var(--forest-800); } .upload-message { margin: 9px 0 0; color: #a53c32; font-size: 0.72rem; } /* Contact preference */ .contact-preferences { display: flex; flex-wrap: wrap; gap: 10px; } .preference-option { position: relative; } .preference-option input { position: absolute; opacity: 0; pointer-events: none; } .preference-option span { display: inline-flex; min-height: 42px; padding: 0 16px; border: 1px solid var(--stone-200); border-radius: 999px; align-items: center; color: var(--muted); background: var(--white); font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: var(--transition); } .preference-option input:checked + span { color: var(--white); border-color: var(--forest-800); background: var(--forest-800); } .preference-option input:focus-visible + span { outline: 3px solid var(--moss-400); outline-offset: 3px; } /* Consent and submit */ .consent { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 11px; } .consent input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--forest-800); } .consent label { color: var(--muted); font-size: 0.72rem; line-height: 1.55; } .form-footer { display: flex; padding-top: 10px; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 22px; } .form-footer-note { max-width: 390px; margin: 0; color: var(--muted); font-size: 0.69rem; } .submit-button { min-width: 190px; } /* Form success */ .form-success { padding: 65px 20px; text-align: center; } .success-ring { display: grid; width: 82px; height: 82px; margin: 0 auto 26px; border: 1px solid var(--forest-800); border-radius: 50%; place-items: center; color: var(--forest-800); font-family: var(--serif); font-size: 2.3rem; } .form-success h2 { margin-bottom: 15px; color: var(--forest-950); font-size: 3.7rem; } .form-success p { max-width: 500px; margin: 0 auto 28px; color: var(--muted); } /* CONTACT DIRECTORY */ .directory-section { background: var(--stone-50); } .directory-heading { display: grid; margin-bottom: 58px; grid-template-columns: 1fr 0.7fr; align-items: end; gap: 70px; } .directory-heading h2 { max-width: 790px; margin-bottom: 0; font-size: clamp(3.3rem, 5.7vw, 5.9rem); letter-spacing: -0.05em; } .directory-heading p { margin-bottom: 5px; color: var(--muted); } .contact-directory { border-top: 1px solid var(--stone-200); } .directory-row { display: grid; padding: 33px 0; border-bottom: 1px solid var(--stone-200); grid-template-columns: 85px 1fr 0.8fr 55px; align-items: center; gap: 28px; transition: color var(--transition); } .directory-row:hover { color: var(--forest-800); } .directory-index { color: var(--forest-700); font-family: var(--serif); font-size: 1.45rem; } .directory-row h3 { margin: 0; font-size: 2rem; } .directory-row p { margin: 0; color: var(--muted); font-size: 0.82rem; } .directory-arrow { display: grid; width: 48px; height: 48px; border: 1px solid var(--stone-200); border-radius: 50%; place-items: center; transition: var(--transition); } .directory-row:hover .directory-arrow { color: var(--white); border-color: var(--forest-800); background: var(--forest-800); } /* WORKSHOP */ .workshop-section { padding: 0 0 115px; background: var(--stone-50); } .workshop-grid { display: grid; min-height: 650px; grid-template-columns: 1.15fr 0.85fr; background: var(--stone-100); } .workshop-image { height: 100%; min-height: 650px; object-fit: cover; } .workshop-copy { position: relative; display: flex; padding: clamp(42px, 6vw, 78px); flex-direction: column; justify-content: center; overflow: hidden; } .workshop-rings { position: absolute; right: -150px; bottom: -165px; width: 440px; height: 440px; opacity: 0.11; pointer-events: none; } .workshop-copy h2 { position: relative; z-index: 2; margin-bottom: 23px; color: var(--forest-950); font-size: clamp(3.2rem, 5vw, 5.2rem); letter-spacing: -0.05em; } .workshop-copy > p { position: relative; z-index: 2; color: var(--muted); } .workshop-details { position: relative; z-index: 2; margin: 28px 0 31px; border-top: 1px solid var(--stone-200); } .workshop-detail { display: grid; padding: 17px 0; border-bottom: 1px solid var(--stone-200); grid-template-columns: 100px 1fr; gap: 20px; } .workshop-detail span { color: var(--muted); font-size: 0.72rem; } .workshop-detail strong { font-size: 0.83rem; } .workshop-copy .button { position: relative; z-index: 2; width: fit-content; } /* CONTACT FAQ overrides */ .faq-layout { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 85px; } .faq-heading { position: sticky; top: 135px; align-self: start; } .faq-heading h2 { margin-bottom: 20px; font-size: clamp(3.2rem, 5vw, 5.1rem); letter-spacing: -0.05em; } .faq-heading p { color: var(--muted); } /* Every template whose hero is a cream/forest vertical split gets a solid dark header bar. The alternative (transparent header + dark logo swap) was used on about and contact and does not work: the logo and nav sit over the cream half but the phone and CTA sit over the forest half, so no single colour scheme suits the whole bar, and the last nav item crosses the boundary on viewports below ~1634px. One rule, four templates. */ .page-template-page-product .site-header, .page-template-page-our-services .site-header, .page-template-page-projects .site-header, .page-template-page-about .site-header, .page-template-page-contact .site-header, .page-template-page-privacy-policy .site-header, body.single-post .site-header { background: rgba(23, 37, 28, 0.96); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12); backdrop-filter: blur(14px); } /* PRODUCT HERO */ .product-hero { position: relative; min-height: 860px; padding: 170px 0 82px; overflow: hidden; background: linear-gradient(90deg, var(--cream-100) 0%, var(--cream-100) 63%, var(--forest-800) 63%, var(--forest-800) 100%); } .product-hero .hero-rings { top: 105px; left: -190px; width: 590px; height: 590px; opacity: 0.11; transform: rotate(-9deg); } .product-hero .breadcrumbs { color: #75736a; } .product-hero .breadcrumbs a:hover { color: var(--forest-800); } /* The projects hero is cream on the left like the product hero, so the default white breadcrumbs are invisible against it. */ .projects-hero .breadcrumbs { color: #75736a; } .projects-hero .breadcrumbs a { color: var(--forest-800); } .projects-hero .breadcrumbs a:hover { color: var(--forest-950); } .product-category { display: flex; margin-bottom: 21px; align-items: center; gap: 11px; color: var(--forest-800); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .product-category-mark { width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; } .product-hero .hero-grid { grid-template-columns: 1.06fr 0.94fr; gap: 75px; } .product-hero .hero-copy > p { max-width: 690px; } .product-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; } .product-hero .button-outline { color: var(--forest-800); border-color: var(--stone-200); background: transparent; } .product-hero .button-outline:hover { color: var(--white); border-color: var(--forest-800); background: var(--forest-800); } .product-hero .hero-visual { min-height: 555px; } .product-hero .hero-image { width: 94%; height: 495px; } .hero-note { position: absolute; right: 0; bottom: 0; width: min(370px, 88%); padding: 29px; color: var(--white); background: var(--forest-950); box-shadow: var(--shadow-strong); } .hero-note span { display: block; margin-bottom: 8px; color: var(--moss-400); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .hero-note strong { display: block; margin-bottom: 9px; color: var(--cream-100); font-family: var(--serif); font-size: 1.72rem; font-weight: 400; line-height: 1.15; } .hero-note p { margin-bottom: 0; color: rgba(255, 255, 255, 0.58); font-size: 0.76rem; } .proof-grid { position: relative; z-index: 3; display: grid; margin-top: 68px; grid-template-columns: repeat(3, 1fr); background: var(--white); box-shadow: var(--shadow-soft); } .proof-grid .proof-item { min-height: 115px; padding: 25px 28px; border-right: 1px solid var(--stone-200); } .proof-grid .proof-item:last-child { border-right: 0; } .proof-grid .proof-item strong { display: block; margin-bottom: 6px; color: var(--forest-950); font-family: var(--serif); font-size: 1.52rem; font-weight: 400; } .proof-grid .proof-item span { color: var(--muted); font-size: 0.73rem; } /* PRODUCT SWITCHER */ .product-switcher { position: sticky; z-index: 700; top: 96px; overflow-x: auto; color: var(--cream-100); background: var(--forest-950); box-shadow: 0 12px 30px rgba(5, 22, 11, 0.12); } .switcher-inner { display: flex; min-height: 76px; align-items: stretch; gap: 0; white-space: nowrap; } .switcher-group { display: flex; align-items: stretch; } .switcher-group + .switcher-group { border-left: 1px solid rgba(255, 255, 255, 0.12); } .switcher-label { display: flex; padding: 0 20px; align-items: center; color: rgba(255, 255, 255, 0.4); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .switcher-link { position: relative; display: flex; padding: 0 16px; align-items: center; color: rgba(255, 255, 255, 0.68); font-size: 0.78rem; font-weight: 600; } .switcher-link::after { position: absolute; right: 16px; bottom: 0; left: 16px; height: 3px; opacity: 0; background: var(--moss-400); content: ""; transform: scaleX(0.35); transition: var(--transition); } .switcher-link:hover, .switcher-link[aria-current="page"] { color: var(--cream-100); } .switcher-link[aria-current="page"]::after { opacity: 1; transform: scaleX(1); } /* PRODUCT INTRODUCTION (extends shared .intro-grid) */ .intro-copy .intro-lead { color: #3e443d; font-family: var(--serif); font-size: 1.55rem; line-height: 1.45; } .intro-image { position: absolute; top: 0; right: 0; width: 86%; height: 565px; object-fit: cover; } .intro-caption { position: absolute; bottom: 0; left: 0; width: 310px; padding: 25px; color: var(--white); background: var(--forest-800); box-shadow: var(--shadow-soft); } .intro-caption span { display: block; margin-bottom: 7px; color: var(--moss-400); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .intro-caption p { margin-bottom: 0; color: rgba(255, 255, 255, 0.68); font-size: 0.78rem; } /* PRODUCT OPTIONS */ .options-section { background: var(--stone-100); } .options-grid { display: grid; grid-template-columns: repeat(2, 1fr); } .option-item { min-height: 270px; padding: 37px 45px 37px 0; border-top: 1px solid var(--stone-200); } .option-item:nth-child(even) { padding-right: 0; padding-left: 45px; border-left: 1px solid var(--stone-200); } .option-number { display: block; margin-bottom: 50px; color: var(--forest-700); font-family: var(--serif); font-size: 1.45rem; } .option-item h3 { margin-bottom: 13px; color: var(--forest-950); font-size: 2.1rem; } .option-item p { max-width: 500px; margin-bottom: 0; color: var(--muted); font-size: 0.88rem; } /* PRODUCT PERFORMANCE */ .performance-section { color: var(--white); background: var(--forest-950); } .performance-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: stretch; gap: 0; } .performance-image { min-height: 760px; object-fit: cover; } .performance-content { display: flex; padding: clamp(48px, 6vw, 85px); flex-direction: column; justify-content: center; } .performance-content h2 { margin-bottom: 23px; color: var(--cream-100); font-size: clamp(3.3rem, 5.5vw, 5.6rem); letter-spacing: -0.05em; } .performance-intro { max-width: 660px; margin-bottom: 35px; color: rgba(255, 255, 255, 0.62); } .performance-tabs { display: flex; margin-bottom: 40px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); flex-wrap: wrap; gap: 6px; } .performance-tab { padding: 10px 13px; border: 0; color: rgba(255, 255, 255, 0.52); background: transparent; cursor: pointer; font-size: 0.73rem; font-weight: 700; } .performance-tab:hover, .performance-tab.active { color: var(--moss-400); } .performance-panel h3 { margin-bottom: 17px; color: var(--cream-100); font-size: 2.55rem; } .performance-panel > p { max-width: 650px; color: rgba(255, 255, 255, 0.65); } .performance-points { display: grid; margin-top: 31px; grid-template-columns: repeat(3, 1fr); gap: 17px; } .performance-point { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.72); font-size: 0.75rem; } /* PRODUCT GALLERY */ .gallery-section { background: var(--stone-50); } .gallery-layout { display: grid; grid-template-columns: 1fr 260px; gap: 22px; } .gallery-main { position: relative; height: 680px; overflow: hidden; background: var(--stone-200); } .gallery-main img { height: 100%; object-fit: cover; } .gallery-caption { position: absolute; right: 22px; bottom: 22px; left: 22px; display: flex; padding: 15px 18px; align-items: center; justify-content: space-between; gap: 20px; color: var(--white); background: rgba(23, 37, 28, 0.83); backdrop-filter: blur(9px); } .gallery-caption span { font-size: 0.78rem; } .gallery-index { color: var(--moss-400); font-family: var(--serif); font-size: 1.3rem !important; } .gallery-side { display: grid; grid-template-rows: 1fr 1fr auto; gap: 14px; } .gallery-thumb { position: relative; min-height: 0; padding: 0; border: 0; overflow: hidden; background: var(--stone-200); cursor: pointer; } .gallery-thumb img { height: 100%; object-fit: cover; filter: saturate(0.78); transition: transform var(--transition), filter var(--transition); } .gallery-thumb:hover img, .gallery-thumb.active img { filter: saturate(1); transform: scale(1.025); } .gallery-thumb.active::after { position: absolute; inset: 0; border: 4px solid var(--moss-400); content: ""; pointer-events: none; } .gallery-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .gallery-control { min-height: 52px; border: 1px solid var(--stone-200); color: var(--forest-800); background: transparent; cursor: pointer; font-weight: 700; transition: var(--transition); } .gallery-control:hover { color: var(--white); border-color: var(--forest-800); background: var(--forest-800); } /* PRODUCT SPECIFICATIONS */ .spec-section { background: var(--stone-100); } .spec-layout { display: grid; grid-template-columns: 0.75fr 1.25fr; align-items: start; gap: 80px; } .spec-intro { position: sticky; top: 190px; } .spec-intro h2 { margin-bottom: 24px; color: var(--forest-950); font-size: clamp(3.2rem, 5vw, 5.1rem); letter-spacing: -0.05em; } .spec-intro p { color: var(--muted); } .spec-intro .button { margin-top: 13px; } .spec-list { border-top: 1px solid var(--stone-200); } .spec-item { border-bottom: 1px solid var(--stone-200); } .spec-item summary { display: flex; padding: 25px 0; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; color: var(--charcoal); font-weight: 700; list-style: none; } .spec-item summary::-webkit-details-marker { display: none; } .spec-icon { position: relative; width: 18px; height: 18px; flex: 0 0 auto; } .spec-icon::before, .spec-icon::after { position: absolute; top: 8px; left: 1px; width: 16px; height: 2px; background: var(--forest-800); content: ""; transition: transform var(--transition); } .spec-icon::after { transform: rotate(90deg); } .spec-item[open] .spec-icon::after { transform: rotate(0); } .spec-answer { max-width: 760px; padding: 0 0 25px; color: var(--muted); font-size: 0.9rem; } /* PRODUCT CASE STUDY */ .case-section { background: var(--stone-50); } .case-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: stretch; gap: 0; background: var(--white); box-shadow: var(--shadow-soft); } .case-image { min-height: 720px; object-fit: cover; } .case-copy { display: flex; padding: clamp(42px, 6vw, 78px); flex-direction: column; justify-content: center; } .case-label { margin-bottom: 20px; color: var(--forest-700); font-size: 0.69rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .case-copy h2 { margin-bottom: 22px; color: var(--forest-950); font-size: clamp(3rem, 4.9vw, 5rem); letter-spacing: -0.05em; } .case-intro { color: var(--muted); } .case-meta { display: grid; margin: 28px 0 35px; border-top: 1px solid var(--stone-200); } .case-meta-row { display: grid; padding: 13px 0; border-bottom: 1px solid var(--stone-200); grid-template-columns: 115px 1fr; gap: 20px; } .case-meta-row span { color: var(--muted); font-size: 0.7rem; } .case-meta-row strong { font-size: 0.78rem; } .case-story { display: grid; gap: 23px; } .case-story h3 { margin-bottom: 7px; color: var(--forest-950); font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .case-story p { margin-bottom: 0; color: var(--muted); font-size: 0.85rem; } /* PRODUCT FINAL CTA (extends shared .final-cta) */ /* The about, projects and product templates supply the CTA backdrop as an plus an overlay div. Neither class was ever defined, so both sat in the grid flow as their own rows, pushing the content down against the footer and leaving the photograph unrendered. Both are now backdrop layers, which also lets the section centre its content as intended. */ .final-cta-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .final-cta-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(17, 31, 21, 0.42), rgba(17, 31, 21, 0.78)); } .final-cta > .container { position: relative; } .final-cta-rings { position: absolute; right: -160px; bottom: -220px; width: 600px; height: 600px; opacity: 0.11; pointer-events: none; } /* PRODUCT FOOTER GRID */ .footer-grid { display: grid; padding-bottom: 62px; grid-template-columns: 1.35fr repeat(3, 0.65fr); gap: 55px; } /* QUOTE DIALOG */ .quote-dialog { width: min(calc(100% - 30px), 730px); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 18px; color: var(--charcoal); background: var(--stone-50); box-shadow: var(--shadow-strong); } .quote-dialog::backdrop { background: rgba(9, 19, 12, 0.8); backdrop-filter: blur(8px); } .dialog-content { position: relative; padding: 48px; } .dialog-close { position: absolute; top: 18px; right: 18px; display: grid; width: 42px; height: 42px; padding: 0; border: 1px solid var(--stone-200); border-radius: 50%; place-items: center; color: var(--charcoal); background: transparent; cursor: pointer; font-size: 1.25rem; } .dialog-label { margin-bottom: 14px; color: var(--forest-700); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .dialog-content h2 { margin-bottom: 13px; font-size: clamp(2.8rem, 5vw, 4.3rem); letter-spacing: -0.04em; } .dialog-intro { margin-bottom: 29px; color: var(--muted); } .quote-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; } .form-actions { display: flex; margin-top: 10px; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 18px; } .form-note { max-width: 360px; margin-bottom: 0; color: var(--muted); font-size: 0.69rem; } .success-message { padding: 36px 0 15px; text-align: center; } .success-message h3 { margin-bottom: 13px; color: var(--forest-950); font-size: 3rem; } .success-message p { color: var(--muted); } /* PROJECTS PAGE — hero */ .projects-hero { position: relative; min-height: 850px; padding: 175px 0 85px; overflow: hidden; background: linear-gradient(90deg, var(--cream-100) 0%, var(--cream-100) 61%, var(--forest-800) 61%, var(--forest-800) 100%); } .projects-hero .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 76px; } .projects-hero .hero-visual { position: relative; min-height: 585px; } .projects-hero .hero-image { position: absolute; top: 0; right: 0; width: 94%; height: 510px; object-fit: cover; box-shadow: var(--shadow-strong); } .hero-project-card { position: absolute; right: 0; bottom: 0; width: min(415px, 90%); padding: 30px; color: var(--white); background: var(--forest-950); box-shadow: var(--shadow-strong); } .hero-project-label { display: block; margin-bottom: 12px; color: var(--moss-400); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .hero-project-card h2 { margin-bottom: 13px; color: var(--cream-100); font-size: 2rem; } .hero-project-meta { display: flex; margin-bottom: 19px; flex-wrap: wrap; gap: 9px 17px; color: rgba(255, 255, 255, 0.52); font-size: 0.72rem; } .hero-project-link { display: inline-flex; padding: 0; padding-bottom: 4px; border: 0; border-bottom: 1px solid currentColor; align-items: center; gap: 8px; color: var(--cream-100); background: transparent; font-weight: 700; } /* PROJECTS PAGE — trust strip */ .projects-trust { color: var(--white); background: var(--forest-950); } /* PROJECTS PAGE — featured case study */ .featured-section { background: var(--stone-50); } .featured-project { display: grid; grid-template-columns: 1.16fr 0.84fr; background: var(--white); box-shadow: var(--shadow-soft); } .featured-media { position: relative; min-height: 690px; overflow: hidden; } .featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 750ms ease; } .featured-project:hover .featured-media img { transform: scale(1.025); } .featured-number { position: absolute; top: 25px; left: 25px; display: grid; width: 70px; height: 70px; border-radius: 50%; place-items: center; color: var(--forest-950); background: var(--cream-100); font-family: var(--serif); font-size: 1.7rem; } .featured-copy { display: flex; padding: clamp(42px, 6vw, 75px); flex-direction: column; justify-content: center; } .functional-label { margin-bottom: 19px; color: #315d3d; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .featured-copy h2 { margin-bottom: 22px; color: var(--forest-950); font-size: clamp(3rem, 4.9vw, 5rem); letter-spacing: -0.05em; } .featured-copy > p { color: var(--muted); } .featured-details { display: grid; margin: 28px 0 34px; border-top: 1px solid var(--stone-200); } .featured-detail { display: grid; padding: 13px 0; border-bottom: 1px solid var(--stone-200); grid-template-columns: 110px 1fr; gap: 18px; } .featured-detail dt { color: var(--muted); font-size: 0.69rem; } .featured-detail dd { margin: 0; font-size: 0.79rem; font-weight: 700; } .featured-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* PROJECTS PAGE — collection */ .collection-section { background: var(--stone-100); } .section-heading { display: grid; margin-bottom: 58px; grid-template-columns: 1fr 0.7fr; align-items: end; gap: 70px; } .section-heading h2 { max-width: 810px; margin-bottom: 0; color: var(--forest-950); font-size: clamp(3.3rem, 5.7vw, 5.9rem); letter-spacing: -0.05em; } .section-heading p { margin-bottom: 5px; color: var(--muted); } .collection-toolbar { display: grid; margin-bottom: 28px; padding: 20px; border: 1px solid #d3ccbf; grid-template-columns: 1fr 300px 190px; align-items: center; gap: 20px; background: var(--white); } .filter-list { display: flex; flex-wrap: wrap; gap: 8px; } .filter-button { min-height: 41px; padding: 0 16px; border: 1px solid var(--stone-200); border-radius: 999px; color: var(--muted); background: transparent; font-size: 0.75rem; font-weight: 700; transition: var(--transition); } .filter-button:hover, .filter-button.active { color: var(--white); border-color: var(--forest-800); background: var(--forest-800); } .search-field { position: relative; } .search-field svg { position: absolute; top: 50%; left: 15px; width: 18px; height: 18px; color: var(--muted); transform: translateY(-50%); pointer-events: none; } .search-field input { width: 100%; min-height: 47px; padding: 0 42px; border: 1px solid var(--stone-200); border-radius: 999px; outline: none; background: var(--stone-50); } .search-field input:focus { border-color: #315d3d; box-shadow: 0 0 0 3px rgba(49, 93, 61, 0.1); } .clear-search { position: absolute; top: 50%; right: 12px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; transform: translateY(-50%); } .clear-search:hover { color: var(--white); background: var(--forest-800); } .sort-field select { width: 100%; min-height: 47px; padding: 0 39px 0 14px; border: 1px solid var(--stone-200); border-radius: 999px; outline: none; color: var(--charcoal); background: var(--stone-50); } .sort-field select:focus { border-color: #315d3d; box-shadow: 0 0 0 3px rgba(49, 93, 61, 0.1); } .collection-status { display: flex; margin-bottom: 45px; align-items: flex-start; justify-content: space-between; gap: 25px; color: var(--muted); font-size: 0.74rem; } .prototype-notice { max-width: 690px; margin: 0; } .result-count { margin: 0; white-space: nowrap; } /* PROJECTS PAGE — project grid */ .project-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: 56px 25px; } .project-card { min-width: 0; grid-column: span 4; } .project-card.medium { grid-column: span 6; } .project-card.wide { grid-column: span 8; } .project-card-button { display: block; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; } .project-image { position: relative; height: 350px; margin-bottom: 21px; overflow: hidden; background: var(--stone-200); } .project-card.medium .project-image { height: 425px; } .project-card.wide .project-image { height: 505px; } .project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 650ms ease; } .project-card:hover .project-image img { transform: scale(1.028); } .project-category { position: absolute; bottom: 15px; left: 15px; padding: 8px 12px; border-radius: 999px; color: var(--forest-950); background: var(--cream-100); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .project-index { position: absolute; top: 15px; right: 15px; display: grid; width: 44px; height: 44px; border-radius: 50%; place-items: center; color: var(--cream-100); background: rgba(18, 53, 34, 0.82); font-family: var(--serif); font-size: 1.1rem; backdrop-filter: blur(8px); } .project-meta { display: flex; margin-bottom: 12px; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 0.7rem; } .meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #bcb5a8; } .project-card h3 { margin-bottom: 13px; color: var(--forest-950); font-size: clamp(1.85rem, 2.6vw, 2.55rem); letter-spacing: -0.025em; } .project-card.wide h3 { max-width: 780px; font-size: clamp(2.5rem, 3.8vw, 4rem); } .project-card p { max-width: 690px; margin-bottom: 18px; color: var(--muted); font-size: 0.87rem; } .project-link { display: inline-flex; align-items: center; gap: 8px; color: var(--forest-800); font-size: 0.8rem; font-weight: 700; } .project-link span { transition: transform var(--transition); } .project-card:hover .project-link span { transform: translateX(4px); } .load-more-wrap { display: flex; margin-top: 68px; justify-content: center; } .empty-state { padding: 70px 24px; border: 1px solid var(--stone-200); text-align: center; background: var(--white); } .empty-state h3 { margin-bottom: 13px; color: var(--forest-950); font-size: 2.5rem; } .empty-state p { color: var(--muted); } /* PROJECTS PAGE — story principles */ .project-story-section { color: var(--white); background: var(--forest-950); } .project-story-layout { display: grid; grid-template-columns: 0.88fr 1.12fr; align-items: stretch; } .project-story-image { min-height: 760px; width: 100%; object-fit: cover; } .project-story-content { display: flex; padding: clamp(48px, 6vw, 84px); flex-direction: column; justify-content: center; } .project-story-content h2 { margin-bottom: 24px; color: var(--cream-100); font-size: clamp(3.4rem, 5.7vw, 5.9rem); letter-spacing: -0.05em; } .project-story-intro { max-width: 690px; color: rgba(255, 255, 255, 0.62); } .project-story-list { margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.14); } .project-story-row { display: grid; padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); grid-template-columns: 43px 0.45fr 1fr; align-items: start; gap: 18px; } .project-story-number { color: var(--moss-400); font-family: var(--serif); font-size: 1.3rem; } .project-story-row strong { color: var(--cream-100); font-size: 0.82rem; } .project-story-row p { margin: 0; color: rgba(255, 255, 255, 0.55); font-size: 0.78rem; } /* PROJECTS PAGE — audience routes */ .audience-section { background: var(--stone-50); } .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .audience-card { position: relative; display: flex; min-height: 470px; padding: 34px; flex-direction: column; justify-content: flex-end; overflow: hidden; color: var(--white); background-position: center; background-size: cover; } .audience-card::before { position: absolute; inset: 0; background: linear-gradient(transparent 18%, rgba(10, 35, 20, 0.86) 100%); content: ""; } .audience-content { position: relative; z-index: 2; } .audience-card h3 { margin-bottom: 12px; color: var(--cream-100); font-size: 2.4rem; } .audience-card p { color: rgba(255, 255, 255, 0.67); font-size: 0.85rem; } .audience-link { display: inline-flex; margin-top: 15px; align-items: center; gap: 8px; font-weight: 700; } /* PROJECTS PAGE — project dialog */ .project-dialog { width: min(calc(100% - 30px), 1120px); max-height: calc(100vh - 34px); padding: 0; border: 0; border-radius: 16px; color: var(--charcoal); background: var(--stone-50); box-shadow: var(--shadow-strong); } .project-dialog::backdrop { background: rgba(5, 19, 9, 0.82); backdrop-filter: blur(8px); } .project-dialog .dialog-close { position: absolute; z-index: 5; top: 18px; right: 18px; display: grid; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 50%; place-items: center; color: var(--white); background: rgba(18, 53, 34, 0.65); font-size: 1.25rem; backdrop-filter: blur(8px); } .project-dialog-layout { display: grid; grid-template-columns: 1.08fr 0.92fr; min-height: 720px; } .project-dialog-media { display: grid; padding: 18px; grid-template-rows: 1fr 105px; gap: 12px; background: var(--forest-950); } .modal-main-image { min-height: 510px; width: 100%; height: 100%; object-fit: cover; } .modal-thumbnails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .modal-thumb { position: relative; min-height: 0; padding: 0; border: 0; overflow: hidden; background: #0d291a; } .modal-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.65); } .modal-thumb.active img { filter: saturate(1); } .modal-thumb.active::after { position: absolute; inset: 0; border: 3px solid var(--moss-400); content: ""; } .project-dialog-copy { padding: clamp(40px, 5vw, 62px); overflow-y: auto; } .modal-label { margin-bottom: 15px; color: #315d3d; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .project-dialog-copy h2 { margin-bottom: 18px; color: var(--forest-950); font-size: clamp(2.8rem, 4.7vw, 4.7rem); letter-spacing: -0.045em; } .modal-summary { color: var(--muted); } .modal-meta { display: grid; margin: 28px 0 35px; border-top: 1px solid var(--stone-200); } .modal-meta-row { display: grid; padding: 12px 0; border-bottom: 1px solid var(--stone-200); grid-template-columns: 105px 1fr; gap: 18px; } .modal-meta-row dt { color: var(--muted); font-size: 0.68rem; } .modal-meta-row dd { margin: 0; font-size: 0.77rem; font-weight: 700; } .modal-story { display: grid; gap: 24px; } .modal-story h3 { margin-bottom: 7px; color: var(--forest-950); font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .modal-story p { margin-bottom: 0; color: var(--muted); font-size: 0.83rem; } .modal-actions { display: flex; margin-top: 34px; flex-wrap: wrap; gap: 10px; } .modal-navigation { display: flex; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--stone-200); justify-content: space-between; gap: 15px; } .modal-nav-button { padding: 0; border: 0; color: var(--forest-800); background: transparent; font-size: 0.76rem; font-weight: 700; } /* ABOUT PAGE — hero */ .about-hero { position: relative; min-height: 850px; padding: 175px 0 85px; overflow: hidden; background: linear-gradient(90deg, var(--cream-100) 0%, var(--cream-100) 61%, var(--forest-800) 61%, var(--forest-800) 100%); } .about-hero .hero-rings { position: absolute; top: 95px; left: -190px; width: 590px; height: 590px; opacity: 0.11; pointer-events: none; transform: rotate(-9deg); } .about-hero .breadcrumbs { position: relative; z-index: 2; display: flex; margin-bottom: 52px; align-items: center; gap: 9px; color: #75736a; font-size: 0.76rem; } .about-hero .breadcrumbs a:hover { color: var(--forest-800); } .about-hero .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 76px; } .about-hero .hero-label { display: flex; margin-bottom: 22px; align-items: center; gap: 11px; color: var(--forest-800); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .hero-label-mark { width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; } .about-hero .hero-copy h1 { max-width: 785px; margin-bottom: 29px; color: var(--forest-950); font-size: clamp(4rem, 7vw, 7.1rem); letter-spacing: -0.058em; } .about-hero .hero-copy > p { max-width: 670px; margin-bottom: 35px; color: #565d55; font-size: clamp(1.08rem, 1.7vw, 1.28rem); } .about-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; } .about-hero .hero-visual { position: relative; min-height: 585px; } .about-hero .hero-image { position: absolute; top: 0; right: 0; width: 94%; height: 510px; object-fit: cover; box-shadow: var(--shadow-strong); } .hero-panel { position: absolute; right: 0; bottom: 0; width: min(415px, 90%); padding: 30px; color: var(--white); background: var(--forest-950); box-shadow: var(--shadow-strong); } .hero-panel-title { display: block; margin-bottom: 18px; color: var(--cream-100); font-family: var(--serif); font-size: 1.25rem; font-weight: 400; } .hero-panel-row { display: grid; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); grid-template-columns: 95px 1fr; gap: 14px; } .hero-panel-row span { color: rgba(255, 255, 255, 0.5); font-size: 0.72rem; } .hero-panel-row strong { color: var(--cream-100); font-size: 0.82rem; } .hero-panel-note { margin: 14px 0 0; color: rgba(255, 255, 255, 0.38); font-size: 0.65rem; } /* ABOUT PAGE — credentials strip */ .credentials { color: var(--white); background: var(--forest-950); } .credential-grid { display: grid; min-height: 125px; grid-template-columns: repeat(4, 1fr); align-items: stretch; } .credential { display: flex; padding: 26px 28px; border-right: 1px solid rgba(255, 255, 255, 0.12); flex-direction: column; justify-content: center; } .credential:last-child { border-right: 0; } .credential strong { margin-bottom: 5px; color: var(--cream-100); font-family: var(--serif); font-size: 1.52rem; font-weight: 400; } .credential span { color: rgba(255, 255, 255, 0.5); font-size: 0.73rem; } /* ABOUT PAGE — story */ .story-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 76px; } .story-copy h2 { margin-bottom: 24px; color: var(--forest-950); font-size: clamp(3rem, 5vw, 5rem); letter-spacing: -0.045em; } .story-lead { margin-bottom: 18px; color: var(--forest-800); font-size: 1.12rem; font-weight: 500; } .story-copy p { color: var(--muted); } .story-visual { position: relative; min-height: 600px; } .story-main-image { position: absolute; top: 0; right: 0; width: 88%; height: 480px; object-fit: cover; box-shadow: var(--shadow-strong); } .story-detail-image { position: absolute; bottom: 0; left: 0; width: 52%; height: 265px; border: 10px solid var(--stone-50); object-fit: cover; box-shadow: var(--shadow-soft); } .story-caption { position: absolute; right: 0; bottom: 0; width: min(265px, 55%); padding: 22px; background: var(--forest-950); color: var(--white); } .story-caption span { display: block; margin-bottom: 7px; color: var(--moss-400); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .story-caption p { margin: 0; color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; } /* ABOUT PAGE — principles */ .principles-section { background: var(--stone-100); } .principles-heading { display: grid; margin-bottom: 58px; grid-template-columns: 1fr 0.7fr; align-items: end; gap: 70px; } .principles-heading h2 { max-width: 810px; margin-bottom: 0; color: var(--forest-950); font-size: clamp(3.3rem, 5.7vw, 5.9rem); letter-spacing: -0.05em; } .principles-heading p { margin-bottom: 5px; color: var(--muted); } .principle-list { border-top: 1px solid var(--stone-200); } .principle-row { display: grid; padding: 32px 0; border-bottom: 1px solid var(--stone-200); grid-template-columns: 55px 0.4fr 1fr; align-items: start; gap: 24px; } .principle-number { color: var(--moss-400); font-family: var(--serif); font-size: 1.3rem; } .principle-row h3 { margin-bottom: 0; color: var(--forest-950); font-family: var(--sans); font-size: 0.95rem; font-weight: 700; } .principle-row p { margin: 0; color: var(--muted); font-size: 0.85rem; } /* ABOUT PAGE — workshop */ .workshop-section { color: var(--white); background: var(--forest-950); } .workshop-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; } .workshop-image-wrap { position: relative; overflow: hidden; } .workshop-image { width: 100%; height: 100%; object-fit: cover; } .workshop-content { display: flex; padding: clamp(48px, 6vw, 84px); flex-direction: column; justify-content: center; } .workshop-content h2 { margin-bottom: 22px; color: var(--cream-100); font-size: clamp(3rem, 4.5vw, 4.5rem); letter-spacing: -0.04em; } .workshop-intro { max-width: 580px; margin-bottom: 32px; color: rgba(255, 255, 255, 0.6); } .workshop-tabs { display: flex; margin-bottom: 28px; gap: 5px; } .workshop-tab { min-height: 43px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; color: rgba(255, 255, 255, 0.65); background: transparent; font-size: 0.8rem; font-weight: 700; transition: color var(--transition), background var(--transition), border-color var(--transition); } .workshop-tab:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.4); } .workshop-tab.active { color: var(--forest-950); border-color: var(--cream-100); background: var(--cream-100); } .workshop-panel h3 { margin-bottom: 12px; color: var(--cream-100); font-family: var(--sans); font-size: 1.05rem; font-weight: 700; line-height: 1.4; } .workshop-panel p { max-width: 530px; color: rgba(255, 255, 255, 0.55); font-size: 0.88rem; } .workshop-points { display: grid; margin-top: 22px; gap: 10px; } .workshop-point { display: flex; align-items: center; gap: 10px; color: var(--cream-100); font-size: 0.82rem; font-weight: 600; } .workshop-point::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--moss-400); flex-shrink: 0; } /* ABOUT PAGE — people */ .people-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 76px; } .people-visual { position: relative; min-height: 600px; } .people-main-image { position: absolute; top: 0; left: 0; width: 85%; height: 490px; object-fit: cover; box-shadow: var(--shadow-strong); } .people-small-image { position: absolute; right: 0; bottom: 0; width: 48%; height: 255px; border: 10px solid var(--stone-50); object-fit: cover; box-shadow: var(--shadow-soft); } .people-copy h2 { margin-bottom: 18px; color: var(--forest-950); font-size: clamp(2.8rem, 4.5vw, 4.5rem); letter-spacing: -0.04em; } .people-copy > p { margin-bottom: 30px; color: var(--muted); } .role-list { border-top: 1px solid var(--stone-200); } .role-row { display: grid; padding: 18px 0; border-bottom: 1px solid var(--stone-200); grid-template-columns: 35px 1fr; align-items: start; gap: 14px; } .role-number { color: var(--moss-400); font-family: var(--serif); font-size: 1.1rem; } .role-row strong { display: block; margin-bottom: 4px; color: var(--forest-950); font-size: 0.85rem; } .role-row p { margin: 0; color: var(--muted); font-size: 0.78rem; } /* ABOUT PAGE — materials */ .materials-section { background: var(--cream-100); } .materials-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 76px; } .materials-copy h2 { margin-bottom: 18px; color: var(--forest-950); font-size: clamp(2.8rem, 4.5vw, 4.5rem); letter-spacing: -0.04em; } .materials-copy > p { color: var(--muted); } .material-facts { margin-top: 30px; border-top: 1px solid var(--stone-200); } .material-fact { display: grid; padding: 16px 0; border-bottom: 1px solid var(--stone-200); grid-template-columns: 110px 1fr; align-items: start; gap: 18px; } .material-fact strong { color: var(--forest-950); font-size: 0.82rem; } .material-fact span { color: var(--muted); font-size: 0.82rem; } .materials-visual { position: relative; } .materials-image { width: 100%; height: 560px; object-fit: cover; box-shadow: var(--shadow-strong); } .material-label { position: absolute; right: 0; bottom: 0; width: min(280px, 70%); padding: 22px; background: var(--forest-950); color: var(--white); } .material-label span { display: block; margin-bottom: 7px; color: var(--moss-400); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .material-label p { margin: 0; color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; } /* ABOUT PAGE — guarantee */ .guarantee-section { background: var(--stone-50); } .guarantee-grid { display: grid; grid-template-columns: 0.45fr 1fr; align-items: center; gap: 76px; } .guarantee-badge { position: relative; width: 280px; height: 280px; display: grid; place-items: center; margin: 0 auto; } .guarantee-badge::before, .guarantee-badge::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid var(--forest-800); } .guarantee-badge::before { inset: 0; opacity: 0.25; } .guarantee-badge::after { inset: 14px; opacity: 0.4; } .guarantee-badge-inner { position: relative; z-index: 2; width: 220px; height: 220px; display: grid; place-items: center; border-radius: 50%; background: var(--forest-950); text-align: center; padding: 20px; } .guarantee-number { display: block; color: var(--cream-100); font-family: var(--serif); font-size: 4.5rem; line-height: 1; } .guarantee-label { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.6); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .guarantee-copy h2 { margin-bottom: 18px; color: var(--forest-950); font-size: clamp(2.8rem, 4.5vw, 4.5rem); letter-spacing: -0.04em; } .guarantee-copy > p { color: var(--muted); } .guarantee-details { display: grid; margin: 28px 0 32px; border-top: 1px solid var(--stone-200); } .guarantee-detail { display: grid; padding: 14px 0; border-bottom: 1px solid var(--stone-200); grid-template-columns: 150px 1fr; align-items: start; gap: 18px; } .guarantee-detail strong { color: var(--forest-950); font-size: 0.82rem; } .guarantee-detail span { color: var(--muted); font-size: 0.82rem; } /* ABOUT PAGE — process */ .process-section { background: var(--stone-100); } .process-heading { display: grid; margin-bottom: 58px; grid-template-columns: 1fr 0.7fr; align-items: end; gap: 70px; } .process-heading h2 { max-width: 810px; margin-bottom: 0; color: var(--forest-950); font-size: clamp(3.3rem, 5.7vw, 5.9rem); letter-spacing: -0.05em; } .process-heading p { margin-bottom: 5px; color: var(--muted); } .process-section .process-grid { gap: 22px; } .process-section .process-step { padding: 38px; border-top: 0; background: var(--white); box-shadow: var(--shadow-soft); } .process-section .process-step:not(:last-child)::after { display: none; } .process-section .process-number { display: block; margin-bottom: 18px; color: var(--moss-400); font-family: var(--serif); font-size: 1.3rem; } .process-section .process-step h3 { margin-bottom: 12px; color: var(--forest-950); font-size: 1.65rem; } .process-section .process-step p { margin: 0; color: var(--muted); font-size: 0.85rem; } /* ABOUT PAGE — final CTA */ .page-template-page-about .final-cta-rings { position: absolute; right: -165px; bottom: -225px; width: 610px; height: 610px; opacity: 0.1; } /* LEGAL PAGES */ .legal-page .page-header { max-width: 760px; margin: 0 auto 48px; text-align: center; } .legal-updated { margin-top: 10px; color: var(--muted); font-size: 0.92rem; } .legal-body { max-width: 760px; margin: 0 auto; } .legal-body section { margin-bottom: 40px; } .legal-body h2 { margin-bottom: 14px; font-family: var(--sans); font-size: 1.25rem; font-weight: 700; line-height: 1.3; } .legal-body h3 { margin-bottom: 8px; font-family: var(--sans); font-size: 1.05rem; font-weight: 600; line-height: 1.3; } .legal-body p { margin-bottom: 12px; color: var(--charcoal); font-size: 0.97rem; line-height: 1.7; } .legal-body ul { margin: 0 0 16px; padding-left: 24px; } .legal-body li { margin-bottom: 6px; color: var(--charcoal); font-size: 0.97rem; line-height: 1.7; } .legal-body a { color: var(--forest-700); text-decoration: underline; text-underline-offset: 3px; } .legal-body a:hover { color: var(--forest-950); } /* COOKIE CONSENT BANNER */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; padding: 20px; background: var(--forest-950); color: var(--cream-100); transform: translateY(100%); transition: transform 400ms ease; } .cookie-banner.visible { transform: translateY(0); } .cookie-banner-inner { display: flex; max-width: var(--container); margin: 0 auto; align-items: center; gap: 24px; } .cookie-banner p { flex: 1; margin: 0; font-size: 0.88rem; line-height: 1.6; } .cookie-banner a { color: var(--moss-400); text-decoration: underline; text-underline-offset: 3px; } .cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; } .cookie-accept { padding: 10px 22px; border: 0; border-radius: 999px; color: var(--forest-950); background: var(--cream-100); font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background var(--transition); } .cookie-accept:hover { background: var(--white); } .cookie-decline { padding: 10px 22px; border: 1px solid rgba(244, 234, 212, 0.3); border-radius: 999px; color: var(--cream-100); background: transparent; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: border-color var(--transition); } .cookie-decline:hover { border-color: rgba(244, 234, 212, 0.6); } @media (max-width: 760px) { .cookie-banner-inner { flex-direction: column; text-align: center; } } /* GENERIC PAGE */ .page-content { padding-top: 140px; padding-bottom: 80px; } .page-header { max-width: 720px; margin: 0 auto 40px; } .page-header h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--forest-950); line-height: 1.2; } .pagination { margin-top: 40px; text-align: center; } .pagination a, .pagination span { display: inline-block; padding: 8px 14px; margin: 0 2px; text-decoration: none; color: var(--forest-800); border-radius: 4px; } .pagination .current { background: var(--forest-800); color: #fff; } /* RESPONSIVE */ @media (max-width: 1080px) { .desktop-nav, .header-phone { display: none; } .menu-toggle { display: inline-flex; } .mobile-nav { max-height: 0; display: block; overflow: hidden; background: var(--forest-950); transition: max-height 350ms ease; } .site-header.menu-open .mobile-nav { max-height: 620px; } .mobile-nav-inner { display: grid; margin: 0; padding: 10px 20px 28px; list-style: none; } .mobile-nav-inner a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 600; } .hero-proof { right: 20px; width: min(500px, calc(100% - 40px)); } .intro-grid, .craft-grid, .testimonial-shell, .guarantee-grid, .faq-grid { grid-template-columns: 1fr; } .faq-intro { position: static; } .product-card:nth-child(n) { grid-column: span 6; } .product-card:nth-child(1) { grid-column: span 12; } .product-grid-even { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } .audience-grid { grid-template-columns: 1fr; } .audience-card { min-height: 490px; } .footer-top { grid-template-columns: 1.3fr 1fr 1fr; } .footer-top > :first-child { grid-column: 1 / -1; } .hero-layout, .resource-heading, .newsletter-layout { grid-template-columns: 1fr; } .hero-layout { gap: 38px; } .hero-intro { max-width: 680px; } .featured-story { grid-template-columns: 1.05fr 0.95fr; } .article-card, .article-card.medium { grid-column: span 6; } .article-card.wide { grid-column: span 12; } .resource-grid { grid-template-columns: 1fr; } .resource-card { min-height: 275px; } .article-layout { grid-template-columns: minmax(0, 760px) 245px; } .share-rail { display: none; } .related-grid { grid-template-columns: repeat(2, 1fr); } .related-card:last-child { display: none; } .contact-hero { background: var(--cream-100); } .hero-grid { grid-template-columns: 1fr; gap: 50px; } .hero-visual { min-height: 480px; } .hero-image { width: 100%; height: 380px; position: relative; } .contact-card { position: relative; width: 100%; margin-top: -50px; } .route-heading { grid-template-columns: 1fr; gap: 20px; } .route-description { grid-template-columns: 1fr; gap: 30px; } .form-layout { grid-template-columns: 1fr; gap: 55px; } .form-guidance { position: static; } .directory-heading { grid-template-columns: 1fr; gap: 20px; } .directory-row { grid-template-columns: 55px 1fr 45px; } .directory-row p { display: none; } .workshop-grid { grid-template-columns: 1fr; } .workshop-image { min-height: 440px; } .faq-layout { grid-template-columns: 1fr; gap: 45px; } .faq-heading { position: static; } /* Projects page */ .projects-hero { background: linear-gradient(90deg, var(--cream-100) 0%, var(--cream-100) 58%, var(--forest-800) 58%, var(--forest-800) 100%); } .projects-hero .hero-grid, .section-heading, .featured-project, .project-story-layout { grid-template-columns: 1fr; } .projects-hero .hero-visual { min-height: 610px; } .projects-hero .hero-image { width: 90%; } .featured-media { min-height: 530px; } .collection-toolbar { grid-template-columns: 1fr 280px; } .sort-field { grid-column: 1 / -1; max-width: 260px; } .project-card { grid-column: span 6; } .project-card.medium, .project-card.wide { grid-column: span 12; } .project-story-image { min-height: 520px; } .audience-grid { grid-template-columns: 1fr; } .audience-card { min-height: 500px; } .project-dialog-layout { grid-template-columns: 1fr; } .project-dialog-media { grid-template-rows: 500px 100px; } /* About page */ .about-hero { background: linear-gradient(90deg, var(--cream-100) 0%, var(--cream-100) 58%, var(--forest-800) 58%, var(--forest-800) 100%); } .about-hero .hero-grid, .story-grid, .people-grid, .materials-grid, .guarantee-grid { grid-template-columns: 1fr; } .about-hero .hero-visual { min-height: 610px; } .about-hero .hero-image { width: 90%; } .credential-grid { grid-template-columns: repeat(2, 1fr); } .credential:nth-child(2) { border-right: 0; } .credential:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .principles-heading { grid-template-columns: 1fr; gap: 20px; } .process-heading { grid-template-columns: 1fr; gap: 20px; } .workshop-layout { grid-template-columns: 1fr; } .workshop-image-wrap { min-height: 480px; } .guarantee-badge { margin-bottom: 20px; } /* Product page */ .product-hero { background: linear-gradient(90deg, var(--cream-100) 0%, var(--cream-100) 59%, var(--forest-800) 59%, var(--forest-800) 100%); } .performance-grid { grid-template-columns: 0.82fr 1.18fr; } .performance-points { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } } @media (max-width: 760px) { .container { width: min(calc(100% - 28px), var(--container)); } .section { padding: 82px 0; } .nav-shell { min-height: 78px; } .brand-logo { height: 42px; } .header-actions .button { display: none; } .hero { min-height: 790px; background-position: 62% center; } .hero-inner { padding-top: 125px; padding-bottom: 180px; } .hero h1 { font-size: clamp(3.5rem, 15vw, 5.4rem); } .hero-proof { right: 14px; bottom: 22px; left: 14px; width: auto; padding: 20px; } .proof-item { padding: 0 10px; } .proof-value { font-size: 1.35rem; } .proof-label { font-size: 0.6rem; } .trust-grid { grid-template-columns: repeat(2, 1fr); } .trust-item { min-height: 100px; border-right: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .trust-item:last-child { grid-column: 1 / -1; } .intro-grid { gap: 50px; } .intro-visual { min-height: 500px; } .intro-main-image { width: 88%; height: 410px; } .intro-detail-image { width: 55%; height: 220px; border-width: 8px; } .material-note { right: 0; width: 190px; } .product-card:nth-child(n) { min-height: 430px; grid-column: 1 / -1; } .product-grid-even { grid-template-columns: 1fr; } .product-grid-even .product-card:nth-child(n) { min-height: 430px; } .project-grid { grid-template-columns: 1fr; } .project-image { height: 390px; } .craft-image { height: 500px; } .process-grid { grid-template-columns: 1fr; } .process-step, .process-step:not(:first-child) { padding: 28px 0; } .process-step:not(:last-child)::after { display: none; } .process-index { margin-bottom: 20px; } .testimonial-image { height: 440px; } .guarantee-badge { margin-inline: auto; } .footer-top { grid-template-columns: 1fr 1fr; } .footer-top > :first-child { grid-column: 1 / -1; } .footer-bottom { align-items: flex-start; flex-direction: column; } .sticky-quote { right: 14px; bottom: 14px; } .modal { padding: 10px; } .modal-panel { padding: 42px 22px 26px; } .form-grid { grid-template-columns: 1fr; } .field.full { grid-column: auto; } .journal-hero { min-height: auto; padding: 155px 0 86px; } .journal-hero h1 { font-size: clamp(4rem, 18vw, 6.2rem); } .hero-rings { top: 150px; right: -245px; width: 520px; height: 520px; } .breadcrumbs { margin-bottom: 40px; } .featured-story { grid-template-columns: 1fr; } .featured-image { min-height: 340px; } .featured-copy { padding: 35px 25px 39px; } .feature-number { top: 18px; left: 18px; width: 58px; height: 58px; font-size: 1.45rem; } .collection-heading { grid-template-columns: 1fr; } .article-card, .article-card.medium, .article-card.wide { grid-column: 1 / -1; } .article-image, .article-card.medium .article-image, .article-card.wide .article-image { height: 370px; } .newsletter-form { grid-template-columns: 1fr; } .article-hero { padding: 145px 0 72px; } .article-hero h1 { font-size: clamp(3.65rem, 16vw, 5.7rem); } .article-hero-grid { grid-template-columns: 1fr; } .article-summary { max-width: 560px; } .hero-figure img { height: 440px; min-height: 0; } .hero-figure figcaption { align-items: flex-start; flex-direction: column; } .article-section { padding: 70px 0 90px; } .article-layout { grid-template-columns: minmax(0, 760px); } .article-sidebar { position: static; grid-row: 1; } .toc { padding: 25px; border: 1px solid var(--stone-200); background: var(--white); } .toc-list { grid-template-columns: repeat(2, 1fr); gap: 0 20px; } .sidebar-cta { display: none; } .article-body { font-size: 1rem; } .article-body h2 { margin-top: 62px; } .key-point-grid { grid-template-columns: 1fr; } .inline-figure img { height: 390px; } .pull-quote { padding: 34px 25px; } .article-cta { padding: 32px 25px; } .toc-list { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } .related-card:last-child { display: block; } .related-image { height: 360px; } .contact-hero { min-height: auto; padding: 145px 0 70px; } .hero-copy h1 { font-size: clamp(3.5rem, 14vw, 5.5rem); } .hero-image { height: 320px; } .contact-card { padding: 26px; } .contact-card h2 { font-size: 1.7rem; } .route-section { padding: 80px 0; } .route-tabs { grid-template-columns: 1fr; } .route-button { min-height: auto; padding: 22px 25px; } .route-button:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--stone-200); } .form-section { padding: 82px 0; } .enquiry-panel { padding: 28px 20px; } .enquiry-form { grid-template-columns: 1fr; } .form-footer { flex-direction: column; align-items: stretch; } .submit-button { width: 100%; } .directory-row { padding: 24px 0; } .directory-row h3 { font-size: 1.5rem; } .directory-arrow { width: 40px; height: 40px; } .workshop-image { min-height: 350px; } .workshop-copy { padding: 35px 22px; } /* Projects page */ .projects-hero { min-height: auto; padding: 145px 0 72px; background: var(--cream-100); } .projects-hero .hero-copy h1 { font-size: clamp(3.6rem, 16vw, 5.7rem); } .projects-hero .hero-visual { min-height: 520px; } .projects-hero .hero-image { width: 95%; height: 375px; } .hero-project-card { width: 93%; padding: 25px; } .featured-media { min-height: 390px; } .featured-copy { padding: 38px 24px; } .collection-toolbar { grid-template-columns: 1fr; padding: 16px; } .filter-list { flex-wrap: nowrap; padding-bottom: 7px; overflow-x: auto; } .filter-button { flex: 0 0 auto; } .sort-field { grid-column: auto; max-width: none; } .collection-status { align-items: flex-start; flex-direction: column; } .project-card, .project-card.medium, .project-card.wide { grid-column: 1 / -1; } .project-image, .project-card.medium .project-image, .project-card.wide .project-image { height: 380px; } .project-story-content { padding: 48px 23px; } .project-story-row { grid-template-columns: 35px 1fr; } .project-story-row p { grid-column: 2; } .project-dialog { width: calc(100% - 18px); } .project-dialog-media { padding: 10px; grid-template-rows: 360px 82px; } .project-dialog-copy { padding: 34px 22px; } /* About page */ .about-hero { min-height: auto; padding: 145px 0 72px; background: var(--cream-100); } .about-hero .hero-copy h1 { font-size: clamp(3.5rem, 14vw, 5.5rem); } .about-hero .hero-visual { min-height: 520px; } .about-hero .hero-image { width: 95%; height: 375px; } .hero-panel { width: 93%; padding: 25px; } .credential-grid { grid-template-columns: 1fr; } .credential { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .credential:last-child { border-bottom: 0; } .story-visual { min-height: 520px; } .story-main-image { width: 92%; height: 390px; } .story-detail-image { width: 55%; height: 210px; border-width: 8px; } .principle-row { grid-template-columns: 40px 1fr; } .principle-row p { grid-column: 2; } .workshop-image-wrap { min-height: 380px; } .workshop-content { padding: 42px 22px; } .people-visual { min-height: 520px; } .people-main-image { width: 90%; height: 390px; } .people-small-image { width: 52%; height: 210px; border-width: 8px; } .materials-image { height: 420px; } .material-fact { grid-template-columns: 1fr; gap: 4px; } .guarantee-badge { width: 230px; height: 230px; } .guarantee-badge-inner { width: 180px; height: 180px; } .guarantee-number { font-size: 3.5rem; } .guarantee-detail { grid-template-columns: 1fr; gap: 4px; } .process-section .process-grid { grid-template-columns: 1fr; } .process-section .process-step { padding: 28px 22px; } /* Product page */ .product-switcher { top: 78px; } .switcher-inner { min-height: 67px; } .switcher-label { padding-inline: 15px; } .switcher-link { padding-inline: 13px; } .product-hero { min-height: auto; padding: 145px 0 72px; background: var(--cream-100); } .product-hero .hero-grid, .intro-grid, .performance-grid, .spec-layout, .case-grid { grid-template-columns: 1fr; } .product-hero .hero-visual { min-height: 510px; } .product-hero .hero-image { width: 95%; height: 365px; } .hero-note { width: 93%; padding: 25px; } .proof-grid { grid-template-columns: 1fr; } .proof-grid .proof-item { min-height: auto; border-right: 0; border-bottom: 1px solid var(--stone-200); } .proof-grid .proof-item:last-child { border-bottom: 0; } .intro-visual { min-height: 500px; } .intro-image { width: 94%; height: 410px; } .intro-caption { width: 250px; } .options-grid { grid-template-columns: 1fr; } .option-item, .option-item:nth-child(even) { min-height: auto; padding: 30px 0; border-left: 0; } .option-number { margin-bottom: 25px; } .performance-content { padding: 48px 22px; } .performance-tabs { flex-wrap: nowrap; overflow-x: auto; } .performance-tab { flex: 0 0 auto; } .gallery-layout { grid-template-columns: 1fr; } .gallery-main { height: 460px; } .gallery-caption { align-items: flex-start; flex-direction: column; gap: 5px; } .gallery-side { grid-template-columns: repeat(3, 1fr); grid-template-rows: 105px auto; } .gallery-controls { grid-column: 1 / -1; } .spec-intro { position: static; } .case-image { min-height: 420px; } .case-copy { padding: 40px 24px; } .case-meta-row { grid-template-columns: 90px 1fr; } .final-cta { min-height: 620px; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } .dialog-content { padding: 46px 22px 25px; } .quote-form { grid-template-columns: 1fr; } .field.full, .form-actions { grid-column: auto; } .form-actions { align-items: stretch; flex-direction: column; } .form-actions .button { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }