/* ============================================ TERRANITI — Sustainability, by Design ============================================ */ /* 'Stack Sans Text' is loaded via Google Fonts in index.html . To self-host as an offline fallback, drop the .ttf into a /fonts folder and uncomment the @font-face block below (then add 'Stack Sans Text Local' into the --serif/--sans stacks). */ /* @font-face { font-family: 'Stack Sans Text Local'; src: url('fonts/StackSansText-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/StackSansText-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } */ :root { --bg-cream: #eef0f2; --bg-light: #ececec; --bg-soft: #ffffff; --sage: #93aa83; --sage-deep: #7d9069; --sage-soft: #cdd6c1; --olive-dark: #2f3a2b; --charcoal: #1d211d; --taupe: #7a6a4f; --taupe-light: #a89878; --plum: #7c5e63; --ink: #1f1c17; --ink-soft: #4a463e; --body-muted: #6b7a85; --muted: #8a8478; --red-x: #c4533b; --green-check: #8aa872; --serif: 'Stack Sans Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --sans: 'Stack Sans Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Offset anchor-jump targets so the sticky nav doesn't cover the headline */ #approach, #who, #services, #story, #contact { scroll-margin-top: 100px; } body { font-family: var(--sans); color: var(--ink); background: var(--bg-cream); line-height: 1.6; font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; } /* ============ NAV ============ */ .nav { position: sticky; top: 0; left: 0; right: 0; z-index: 50; padding: 18px 0; background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.05); transition: padding 0.3s ease, box-shadow 0.3s ease; } .nav.scrolled { padding: 12px 0; box-shadow: 0 6px 24px -16px rgba(0,0,0,0.18); } .nav__inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; } .nav__logo { font-family: var(--serif); font-size: 32px; font-weight: 500; color: var(--taupe); letter-spacing: 0.2px; transition: opacity 0.25s ease; } .nav__logo:hover { opacity: 0.75; } .nav__links { display: flex; gap: 44px; } .nav__links a { font-size: 15px; font-weight: 400; color: var(--ink); letter-spacing: 0.3px; position: relative; transition: color 0.3s ease; } .nav__links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1.5px; background: var(--taupe); transition: width 0.3s ease; } .nav__links a:hover { color: var(--taupe); } .nav__links a:hover::after, .nav__links a.active::after { width: 100%; } .nav__links a.active { color: var(--taupe); } .nav__toggle { display: none; flex-direction: column; gap: 5px; background: transparent; border: 0; cursor: pointer; padding: 6px; } .nav__toggle span { width: 26px; height: 1.5px; background: var(--ink); transition: all 0.3s ease; } /* ============ BUTTONS ============ */ .btn { display: inline-block; padding: 14px 30px; font-family: var(--sans); font-size: 12pt; font-weight: 400; letter-spacing: 0.6px; border-radius: 999px; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; border: 3px solid transparent; } .btn--ghost { background: transparent; border-color: #93aa83; color: #93aa83; font-size: 12pt; font-weight: 500; padding: 5px 20px; } .btn--ghost:hover { background: #93aa83; color: var(--charcoal); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.18); } .btn--solid { background: #93aa83; color: #ffffff; } .btn--solid:hover { background: var(--sage-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.25); } /* ============ HERO ============ */ .hero { position: relative; height: calc(100vh - 80px); min-height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; color: #fff; } .hero__bg { position: absolute; inset: 0; background-image: url('images/hero.webp?auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; filter: saturate(0.95); transform: scale(1.05); animation: heroZoom 22s ease-in-out infinite alternate; } @keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1.15); } } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,30,15,0.35) 0%, rgba(15,30,15,0.25) 50%, rgba(15,30,15,0.50) 100%); } .hero__content { position: relative; z-index: 2; padding: 0 24px; max-width: 880px; } .hero__title { font-family: var(--serif); font-weight: 500; font-size: 50pt; line-height: 1.05; letter-spacing: -1px; margin-bottom: 38px; color: #ffffff; padding: 0 30px 0 30px; } .hero__title .reveal-word { display: inline-block; opacity: 0; transform: translateY(40px); animation: wordIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } .hero__title .reveal-word:nth-child(1) { animation-delay: 0.3s; } .hero__title .reveal-word:nth-child(2) { animation-delay: 0.6s; } @keyframes wordIn { to { opacity: 1; transform: translateY(0); } } .hero__sub { font-size: 15pt; line-height: 1.5; max-width: 620px; margin: 0 auto 36px; opacity: 0; animation: fadeUp 1s ease 1.1s forwards; font-weight: 500; color: #ffffff; } .hero__content .btn { opacity: 0; animation: fadeUp 1s ease 1.4s forwards; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hero__scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 2; } .hero__scroll span { display: block; width: 1px; height: 50px; background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent); animation: scrollLine 2.2s ease-in-out infinite; } @keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ============ STATS ============ */ .stats { padding: 60px 0 90px; background: #ffffff; position: relative; } .stats__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 60px; align-items: center; } .stats__divider { width: 1px; height: 140px; background: #1d1f19; align-self: start; margin-top: 90px; } .stats__left { text-align: right; } .stats__right { align-self: start; margin-top: 85px; } .stats__num { font-family: var(--sans); font-size: 80pt; font-weight: 500; color: #807662; line-height: 1; margin-bottom: 28px; letter-spacing: -4px; text-align: right; } .stats__num span { font-size: 1em; margin-left: 2px; } .stats__left p { font-family: var(--sans); font-size: 15pt; font-weight: 500; color: #5f7a7e; line-height: 1.4; max-width: 540px; margin: 0 auto; } .stats__small { margin-top: 36px !important; font-weight: 600 !important; color: #827660 !important; } .stats__right p { font-family: var(--sans); font-size: 15pt; font-weight: 500; color: #5f7a7e; line-height: 1.4; margin-bottom: 28px; max-width: 560px; } .stats__strong { font-weight: 600 !important; color: #827660 !important; } .stats__caption { text-align: center; font-family: var(--sans); font-size: clamp(10pt, 1.6vw, 10pt); font-weight: 600; color: var(--sage); letter-spacing: 0.3px; margin-top: 56px; } /* ============ SECTION HEAD ============ */ .section-head { text-align: center; max-width: 1200px; margin: 0 auto 72px; } .section-head h2 { font-family: var(--serif); font-weight: 500; font-size: 35pt; line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 20px; color: #1e201a; } .section-head p { font-size: 15pt; font-weight: 500; color: #5f7a7e; line-height: 1.5; } .section-head--light h2 { color: #eef0f2; } .section-head--light p { color: #5f7a7e; } /* ============ BUILD SECTION ============ */ .build { background-color: var(--bg-light); background-image: url('images/bg.webp'); background-size: cover; background-position: top left; background-repeat: no-repeat; padding: 130px 0 140px; position: relative; overflow: hidden; } .build .container { position: relative; z-index: 1; } /* spacing between the build block and the combined who block */ .build .container + .container { margin-top: 96px; } .build .section-head p, .who .section-head p { max-width: 1200px; margin: 0 auto; } .build__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; position: relative; } .feat { display: flex; flex-direction: row; gap: 18px; align-items: flex-start; text-align: left; padding: 12px 0; } .feat__icon { flex: 0 0 52px; width: 52px; height: 52px; color: var(--plum); margin: 0; } .feat__icon svg { width: 100%; height: 100%; } .feat__icon-img { width: 100%; height: 100%; object-fit: contain; display: block; /* Placeholder look until a real icon file is supplied */ border: 2px dashed var(--plum); border-radius: 8px; background: rgba(128, 107, 107, 0.06); } .feat__body { flex: 1; min-width: 0; } .feat h3 { font-family: var(--sans); font-weight: 500; font-size: 15pt; margin-bottom: 8px; color: #1e201a; letter-spacing: -0.2px; } .feat p { color: #5f7a7e; font-weight: 500; font-size: 12pt; line-height: 1.4; margin: 0; } /* ============ WHO ============ */ .who { position: relative; overflow: hidden; } .who .container { position: relative; z-index: 1; } .who__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 820px; margin: 0 auto; place-items: center; } .circle { width: 100%; aspect-ratio: 1 / 1; border: 5px solid var(--taupe); background: transparent; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 36px 30px; transition: transform 0.4s ease, background-color 0.3s ease, box-shadow 0.4s ease; } .who__grid > .circle:nth-child(1) { border-radius: 100% 100% 40px 100%; } .who__grid > .circle:nth-child(2) { border-radius: 100% 100% 100% 40px; } .who__grid > .circle:nth-child(3) { border-radius: 100% 40px 100% 100%; } .who__grid > .circle:nth-child(4) { border-radius: 40px 100% 100% 100%; } .circle__icon { width: clamp(42px, 5vw, 64px); height: clamp(42px, 5vw, 64px); color: var(--plum); margin-bottom: 14px; } .circle__icon svg { width: 100%; height: 100%; } .circle__icon-img { width: 100%; height: 100%; object-fit: contain; display: block; /* Placeholder look until you add the real petal image */ border: 2px dashed var(--plum); border-radius: 8px; background: rgba(124, 94, 99, 0.06); } .circle h3 { font-family: var(--sans); font-weight: 500; font-size: 15pt; margin-bottom: 14px; color: #1e201a; letter-spacing: -0.2px; line-height: 1.2; } .circle p { font-size: 12pt; font-weight: 500; color: #5f7a7e; max-width: 200px; line-height: 1.3; } /* ============ COMPARE ============ */ .compare { background: var(--sage); padding: 90px 0; color: #fff; text-align: left; } .compare h2 { font-family: var(--sans); font-weight: 500; font-size: 35pt; line-height: 1.2; color: #eef0f2; margin-bottom: 60px; text-align: center; } .compare__grid { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; column-gap: 40px; align-items: start; max-width: 900px; margin: 0 auto; } .compare__head { font-size: 15pt; letter-spacing: 0.5px; margin: 0 0 22px; font-weight: bold; color: #1e201a; } .compare__list { list-style: none; } .compare__list li { font-size: 15pt; font-weight: 400; padding: 8px 0; display: flex; align-items: center; gap: 16px; color: #eef0f2; } .x, .check { font-family: var(--sans); width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--taupe); color: #fff; font-weight: bold; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; } .compare__head--left { text-align: right; } .compare__list--left li { text-align: right; justify-content: flex-end; } .compare__list--left .x { order: 2; } .compare__head--right { text-align: left; } .compare__list--right li { text-align: left; justify-content: flex-start; } /* VS sits in the second row (over the lists), so it centers on the lists only */ .compare__vs { grid-column: 2; grid-row: 2; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; } .compare__vs::before, .compare__vs::after { content: ''; height: 25%; width: 2px; background: rgba(255,255,255,0.35); } .vs-circle { width: 44px; height: 44px; flex-shrink: 0; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; font-size: 15pt; color: #5f7a7e; /* margin: 16px 0;*/ animation: pulseRing 3s ease-in-out infinite; } @keyframes pulseRing { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); } 50% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } } /* ============ TIMELINE ============ */ .timeline-sec { padding: 110px 0; background: var(--bg-cream); text-align: center; } .timeline-sec h2 { font-family: var(--serif); font-weight: 500; font-size: 35pt; margin-bottom: 70px; color: #1e201a; line-height: 1.15; } .timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1350px; margin: 0 auto 50px; } .timeline__line { position: absolute; top: 6px; left: 6%; right: 6%; height: 1px; background: rgba(122,106,79,0.3); } .timeline__step { text-align: center; padding: 0 10px; position: relative; } .dot { width: 14px; height: 14px; background: var(--taupe); border-radius: 50%; margin: 0 auto 24px; position: relative; } .dot::before { content: ''; position: absolute; inset: -6px; border: 1px solid var(--taupe); border-radius: 50%; opacity: 0.4; } .year { font-family: var(--sans); font-weight: 500; font-size: 15pt; margin-bottom: 10px; color: #827660; } .timeline__step p { font-size: 12pt; font-weight: 500; color: #5f7a7e; line-height: 1.55; } .timeline__note { font-family: var(--serif); font-weight: 500; font-size: clamp(25pt, 4vw, 25pt); color: #806b6b; max-width: 900px; margin: 60px auto 0; line-height: 1.3; /*padding: 48px 40px;*/ border-radius: 16px; } /* ============ DELIVER ============ */ .deliver { background: #1e201a; padding: 110px 0; color: #fff; } .deliver__steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; gap: 18px; max-width: 1300px; margin: 0 auto; } .deliver__step { text-align: center; padding: 10px; } .d-icon { width: 48px; height: 48px; color: #93aa83; margin: 0 auto 22px; } .d-icon svg { width: 100%; height: 100%; } .step-num { font-family: var(--sans); font-weight: 500; font-size: 15pt; margin-bottom: 12px; color: #5f7a7e; } .deliver__step p { font-size: 12pt; font-weight: 500; color: #eef0f2; max-width: 260px; margin: 0 auto; line-height: 1.4; } .deliver__arrow { font-size: 22px; color: rgba(255,255,255,0.4); margin-top: 18px; } /* ============ SERVICES ============ */ .services { padding: 110px 0; background: var(--bg-cream); } .services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 60px; max-width: 1100px; margin: 0 auto; } .srv { display: flex; flex-direction: row; align-items: flex-start; text-align: left; gap: 20px; padding: 10px; } .srv__icon { flex: 0 0 auto; width: 48px; height: 48px; color: #806b6b; margin: 0; } .srv__icon svg { width: 100%; height: 100%; } .srv__body { min-width: 0; } .srv h3 { font-family: var(--sans); font-weight: 500; font-size: 15pt; margin-bottom: 6px; line-height: 1.2; color: #1e201a; } .srv p { font-size: 12pt; font-weight: 500; color: #5f7a7e; max-width: 260px; margin: 0; line-height: 1.4; } /* ============ FOUNDER ============ */ .founder { padding: 110px 0; background: var(--bg-cream); } .founder__grid { display: grid; grid-template-columns: 360px 1fr; gap: 80px; align-items: center; max-width: 1000px; margin: 0 auto; } .founder__photo { display: flex; justify-content: center; } .founder__bio p { font-size: 15pt; font-weight: 500; color: #5f7a7e; margin-bottom: 18px; line-height: 1.5; } .founder__bio p em { color: #5f7a7e; font-style: italic; } .founder__bio p strong { color: #827660; font-weight: 500; } /* ============ CLOSING ============ */ .closing { padding: 120px 0; background: var(--bg-soft); position: relative; overflow: hidden; } .closing__pattern { position: absolute; inset: 0; background-image: url('images/sustainability.webp'); background-size: 100%; pointer-events: none; } .closing__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 60px; align-items: center; position: relative; } .closing__divider { width: 1px; height: 140px; background: #1d1f19; align-self: center; } .closing__grid h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(15pt, 3.6vw, 25pt); line-height: 1.25; color: #1e201a; } .closing__right p { font-weight: 500; color: #1e201a; margin-bottom: 20px; line-height: 1.35; max-width: 420px;; } .closing__right p:first-child { font-size: clamp(12pt, 3.6vw, 15pt); } .closing__right p:last-child { font-size: clamp(12pt, 3.6vw, 15pt); } /* ============ CONTACT US ============ */ .contact { background: var(--charcoal); color: #fff; height: 650px; display: flex; align-items: center; text-align: center; } .contact__inner { max-width: 760px; margin: 0 auto; padding: 0 32px; } .contact h2 { font-family: var(--serif); font-weight: 500; font-size: 35pt; color: #eef0f2; margin-bottom: 22px; line-height: 1.15; } .contact p { color: #5f7a7e; font-weight: 500; margin-bottom: 36px; font-size: 15pt; line-height: 1.5; } /* ============ FOOTER ============ */ .footer { background: #fff; color: #151515; } .footer__bottom { background: #fff; color: #151515; padding: 32px 0; text-align: center; } .footer__meta { display: flex; gap: 30px; justify-content: center; font-size: 10pt; font-weight: 400; color: #151515; flex-wrap: wrap; } .footer__meta a { color: #151515; transition: color 0.25s ease; } .footer__meta a:hover { color: var(--taupe); } .footer__disclaimer { margin-top: 16px; font-size: 10pt; font-weight: 400; color: #151515; max-width: 850px; margin-left: auto; margin-right: auto; line-height: 1.5; } /* ============ REVEAL ANIMATIONS ============ */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); } .reveal.in-view { opacity: 1; transform: translateY(0); } /* ============ ICON ANIMATIONS ============ */ .icon-anim { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); animation: floatIcon 4s ease-in-out infinite; } .icon-anim:hover { transform: scale(1.18) rotate(-8deg); color: var(--sage-deep); } /* Petals: no rollover effect on the card or its icon */ .circle .icon-anim:hover { transform: none; color: inherit; } @keyframes floatIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .feat:nth-child(2) .icon-anim { animation-delay: 0.4s; } .feat:nth-child(3) .icon-anim { animation-delay: 0.8s; } .who__grid > div:nth-child(2) .icon-anim { animation-delay: 0.3s; } .who__grid > div:nth-child(3) .icon-anim { animation-delay: 0.6s; } .who__grid > div:nth-child(4) .icon-anim { animation-delay: 0.9s; } .services__grid > div:nth-child(2n) .icon-anim { animation-delay: 0.5s; } .services__grid > div:nth-child(3n) .icon-anim { animation-delay: 0.9s; } .icon-spin svg { animation: spinSlow 8s linear infinite; transform-origin: center; } .icon-spin-slow svg { animation: spinSlow 14s linear infinite; transform-origin: center; } @keyframes spinSlow { to { transform: rotate(360deg); } } .dot { animation: pulseDot 2.5s ease-in-out infinite; } @keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(122,106,79,0.4); } 50% { box-shadow: 0 0 0 10px rgba(122,106,79,0); } } .timeline__step:nth-child(3) .dot { animation-delay: 0.5s; } .timeline__step:nth-child(4) .dot { animation-delay: 1s; } .timeline__step:nth-child(5) .dot { animation-delay: 1.5s; } /* ============ RESPONSIVE ============ */ @media (max-width: 960px) { .build__grid, .services__grid { grid-template-columns: repeat(2, 1fr); } .deliver__steps { grid-template-columns: 1fr; gap: 30px; } .deliver__arrow { transform: rotate(90deg); margin: 0 auto; } .timeline { grid-template-columns: 1fr 1fr; gap: 50px; } .timeline__line { display: none; } .stats__grid { grid-template-columns: 1fr; gap: 40px; } .stats__divider { display: none; } .stats__left { padding-right: 0; text-align: center; } .stats__num { text-align: center; } .stats__left p { margin-left: auto; margin-right: auto; } .stats__right { text-align: center; margin-top: 100px; border-left: none; padding-left: 0; } .stats__right p { margin-left: auto; margin-right: auto; } .founder__grid { grid-template-columns: 1fr; gap: 50px; text-align: center; } .founder__bio { text-align: center; padding-left: 0; } .founder__bio::before { display: none; } .founder__bio p { text-align: center; } .closing__grid { grid-template-columns: 1fr; gap: 40px; } .closing__grid h2 { text-align: center; } .closing__divider { width: 64px; height: 1px; margin: 28px auto; } .closing__right p { font-weight: 500; color: #1e201a; margin-bottom: 20px; line-height: 1.35; max-width: 420px; text-align: center; } } @media (max-width: 720px) { .container, .nav__inner, .contact__inner { padding: 0 22px; } .contact { height: auto; padding: 90px 0; } /*.contact h2 { font-size: clamp(14pt, 9vw, 28pt); }*/ .who .section-head h2 { font-size: clamp(12pt, 7.5vw, 27pt); } /*.services .section-head h2 { font-size: clamp(15pt, 9.5vw, 35pt); }*/ .nav__links { position: fixed; top: 0; right: 0; width: 78%; max-width: 320px; height: 100vh; background: var(--bg-cream); flex-direction: column; padding: 90px 32px 32px; gap: 22px; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: -20px 0 60px -10px rgba(0,0,0,0.2); } .nav__links.open { transform: translateX(0); } .nav__links a { color: var(--ink) !important; font-size: 18px; } .nav__links a.active { color: var(--taupe) !important; } .nav__toggle { display: flex; z-index: 60; } .nav__toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); background: var(--ink); } .nav__toggle.open span:nth-child(2) { opacity: 0; } .nav__toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); background: var(--ink); } .build__grid, .services__grid, .who__grid { grid-template-columns: 1fr;padding: 0 34px 0 34px; } /* Centre feat cards (build section) */ .feat { flex-direction: column; align-items: center; text-align: center; } .feat__body { text-align: center; } /* Centre service cards */ .srv { flex-direction: column; align-items: center; text-align: center; } .srv__body { text-align: center; } .srv p { margin-left: auto; margin-right: auto; } /* Centre compare lists — constrain ul width so items visually centre as a group */ .compare h2 { text-align: center; } .compare__head--left, .compare__head--right { text-align: center; margin-bottom: 6px; } .compare__list--left, .compare__list--right { width: 270px; margin: 0 auto; } .compare__list--left li, .compare__list--right li { justify-content: flex-start; text-align: left; } .compare__list--left .x { order: 0; } .timeline { grid-template-columns: 1fr; gap: 0; } .timeline__line { display: block; top: 10px; bottom: 10px; left: 7px; right: auto; width: 1px; height: auto; } .timeline__step { display: grid; grid-template-columns: 14px 1fr; grid-template-rows: auto auto; column-gap: 20px; text-align: left; padding: 0 0 40px; } .timeline__step:last-child { padding-bottom: 0; } .timeline__step .dot { grid-column: 1; grid-row: 1 / 3; margin: 4px 0 0; align-self: start; } .timeline__step .year { grid-column: 2; grid-row: 1; margin-bottom: 8px; } .timeline__step p { grid-column: 2; grid-row: 2; } .compare__grid { display: flex; flex-direction: column; gap: 10px; } .compare__head-gap { display: none; } .compare__head--left { order: 0; text-align: center; width: 100%; } .compare__list--left { order: 1; } .compare__vs { order: 2; flex-direction: row; align-self: stretch; height: auto; margin: 8px 0; } .compare__vs::before, .compare__vs::after { height: 2px; width: 25%; } .compare__head--right { order: 3; margin-top: 12px; text-align: center; width: 100%; } .compare__list--right { order: 4; } .br-desktop { display: none; } .hero__content { padding: 0 28px; } .hero__title { font-size: clamp(28pt, 10vw, 50pt); padding: 0 8px; } .hero__sub { font-size: clamp(11pt, 3.5vw, 15pt); padding: 0 4px; } .stats { padding: 70px 0; } .build, .who, .timeline-sec, .deliver, .services, .founder, .closing { padding: 70px 0; } .section-head { margin-bottom: 48px; } .who__grid > .circle:nth-child(1), .who__grid > .circle:nth-child(2), .who__grid > .circle:nth-child(3), .who__grid > .circle:nth-child(4) { border-radius: 100% 100% 40px 100%; } .founder__avatar { width: 220px; height: 280px; border-radius: 110px; } .founder__avatar span { font-size: 90px; } .footer__meta { display: flex; gap: 10px; justify-content: center; font-size: 10pt; font-weight: 400; color: #151515; flex-wrap: wrap; } } /* === Navigation Alignment Fix === */ .nav__inner{ width:100%; max-width:none; padding:0 50px; display:flex; align-items:center; } .nav__logo{ display:flex; align-items:center; flex-shrink:0; margin-right:auto; } .nav__logo img{ height:60px; width:auto; display:block; margin-top:0; } .nav__links{ margin-left:auto; display:flex; align-items:center; gap:40px; } @media (max-width: 992px){ .nav__logo img{height:45px;} .nav__inner{padding:0 20px;} } /* ===== Design Screenshot Match (Header Preserved) ===== */ .container{ max-width:1200px; } .stats{ padding:80px 0 20px; } .stats__grid{ max-width:1015px; margin:0 auto; gap:90px; } .stats__left{ max-width:700px; margin:0 auto; } .stats__left p{ max-width:650px; } .stats__right p{ max-width:700px; } .stats__caption{ margin-top:40px; } /* ===== Font Placement & Spacing Match to Design ===== */ .build .section-head{ max-width: 980px; margin: 0 auto 56px; } .build .section-head h2{ font-size: 35pt; line-height: 1.12; margin-bottom: 22px; } .build .section-head p{ max-width: 920px; font-size: 15pt; line-height: 1.5; } .build__grid{ max-width: 949px; gap: 70px; margin-top: 60px; } .feat h3{ font-size: 15pt; margin-bottom: 6px; } .feat p{ font-size: 12pt; line-height: 1.25; } .feat__icon { width: 48px; height: 48px; flex: 0 0 48px; } .feat__icon svg { width: 100%; height: 100%; } .build .container + .container{ margin-top: 100px; } .who .section-head{ max-width: 800px; margin: 0 auto 42px; } .who .section-head h2{ font-size: 35pt; margin-bottom: 42px; } .who .section-head p{ max-width: 795px; font-size: 15pt; line-height: 1.45; } .who__grid{ max-width: 720px; gap: 6px; } .circle{ padding: 26px 24px; } .circle h3{ font-size: 9pt; line-height: 1.15; margin-bottom: 10px; } .circle p{ font-size: 7pt; line-height: 1.25; max-width: 170px; } .circle__icon{ width: 72px; height: 72px; flex: 0 0 72px; } .circle__icon svg { width: 100%; height: 100%; } /* ===== Petal Cards Match Design ===== */ .who__grid{ max-width: 950px; gap: 0; } .circle{ border: 8px solid var(--taupe); padding: 42px 34px; position: relative; } /* create thicker center junction like design */ .who__grid > .circle:nth-child(1){border-radius:100% 100% 28px 100%;} .who__grid > .circle:nth-child(2){border-radius:100% 100% 100% 28px;} .who__grid > .circle:nth-child(3){border-radius:100% 28px 100% 100%;} .who__grid > .circle:nth-child(4){border-radius:28px 100% 100% 100%;} .circle__icon{ width:64px; height:64px; margin-bottom:20px; } .circle h3{ font-size:12pt; line-height:1.15; margin-bottom:16px; } .circle p{ font-size:8pt; line-height:1.2; max-width:220px; } /* thick center cross */ .who__grid{ position:relative; } .who__grid:before, .who__grid:after{ content:""; position:absolute; background:var(--taupe); z-index:2; } .who__grid:before{ width:12px; top:0; bottom:0; left:50%; transform:translateX(-50%); } .who__grid:after{ height:12px; left:0; right:0; top:50%; transform:translateY(-50%); } /* ===== FINAL PETAL MATCH OVERRIDES ===== */ .who__grid::before, .who__grid::after{ display:none !important; content:none !important; } .who__grid{ max-width:780px !important; gap:0 !important; margin:0 auto !important; } .circle{ border:8px solid #8a7d66 !important; padding:30px !important; aspect-ratio:1 !important; } .who__grid > .circle:nth-child(1){ border-radius:100% 100% 30px 100% !important; } .who__grid > .circle:nth-child(2){ border-radius:100% 100% 100% 30px !important; } .who__grid > .circle:nth-child(3){ border-radius:100% 30px 100% 100% !important; } .who__grid > .circle:nth-child(4){ border-radius:30px 100% 100% 100% !important; } .circle__icon{ width:52px !important; height:52px !important; margin-bottom:18px !important; } .circle h3{ font-size:10pt !important; line-height:1.15 !important; font-weight:600 !important; } .circle p{ font-size:7pt !important; line-height:1.25 !important; max-width:180px !important; } /* ===== EXACT PETAL REDRAW OVERRIDE ===== */ .who__grid{ display:grid !important; grid-template-columns:repeat(2,1fr); max-width:625px !important; gap:0 !important; margin:0 auto !important; } .circle{ position:relative !important; border:none !important; background:transparent !important; aspect-ratio:1/1 !important; padding:0px !important; overflow:visible; } .circle::before{ content:""; position:absolute; inset:0; background-size:90% 90%; background-repeat:no-repeat; z-index:0; } /* custom petal outlines */ .circle:nth-child(1)::before{ background-image:url("images/topleftpetal.webp"); } .circle:nth-child(2)::before{ background-image:url("images/toprightpetal.webp"); } .circle:nth-child(3)::before{ background-image:url("images/bottomleftpetal.webp"); } .circle:nth-child(4)::before{ background-image:url("images/bottomrightpetal.webp"); } .circle>*{ position:relative; z-index:1; } /* Padding scaled 85% of previous values */ .who__grid > .circle:nth-child(1) { padding: 0 10px 51px 0 !important; } .who__grid > .circle:nth-child(2) { padding: 0 50px 51px 0 !important; } .who__grid > .circle:nth-child(3) { padding: 0 24px 64px 0 !important; } .who__grid > .circle:nth-child(4) { padding: 0 45px 64px 0 !important; } .circle__icon{ width:48px !important; height:48px !important; margin-bottom:14px !important; } .circle h3{ font-size:15pt !important; line-height:1.15 !important; margin-bottom:12px !important; } .circle p{ font-size:12pt !important; line-height:1.2 !important; max-width:180px !important; } /* ===== FOUNDER SECTION DESIGN MATCH ===== */ .founder{background:#ffffff;padding:120px 0;} .founder .section-head h2{font-size:35pt;line-height:1.05;} .founder .section-head p{font-size:15pt;color:#627b80;font-weight:600;} .founder__grid{grid-template-columns:480px 1fr;max-width:1200px;gap:80px;align-items:center;} .founder__avatar::before{display:none;} .founder__img{width:100%;height:100%;object-fit:cover;display:block;} .founder__bio{position:relative;padding-left:60px;} .founder__bio:before{ content:'';position:absolute;left:0;top:22%;width:1px;height:160px;background:#8d8577; } .founder__bio p{ font-size:15pt; line-height:1.55;color:#627b80;font-weight:600; } .founder__bio p:last-child{color:#84755d;font-weight:700;} @media(max-width:900px){ .founder__grid{grid-template-columns:1fr;} .founder__bio{padding-left:0} .founder__bio:before{display:none} .founder__avatar{width:320px;height:320px} } /* ===== MOBILE PETAL LAYOUT FIX ===== Desktop keeps the 2x2 grid (4 distinct petal PNGs) untouched above. On mobile, stack the petals in a single column, top-left first, then top-right, then bottom-left, then bottom-right — and reuse the top-left / top-right artwork for the two cards below them. */ @media (max-width: 720px) { .who__grid{ grid-template-columns: 1fr !important; max-width: 420px !important; gap: 28px !important; } .circle{ padding: 34px 28px !important; max-width: 340px; margin: 0 auto; } /* Petal shape tapers to a point near the bottom corners, so text needs a narrower, smaller box than on desktop to stay inside it */ .circle__icon{ width: 56px !important; height: 56px !important; margin-bottom: 14px !important; } .circle h3{ font-size: 13pt !important; line-height: 1.15 !important; margin-bottom: 12px !important; } .circle p{ font-size: 11pt !important; line-height: 1.3 !important; max-width: 190px !important; } /* Reuse top-left artwork for the 3rd (bottom-left) card, and top-right artwork for the 4th (bottom-right) card */ .circle:nth-child(3)::before{ background-image: url("images/topleftpetal.png"); } .circle:nth-child(4)::before{ background-image: url("images/toprightpetal.png"); } } /* ===== MOBILE STATS SPACING FIX ===== On mobile the two stats columns stack into rows. The desktop-only .stats__grid gap (90px) and .stats__right's vertical-align margin (100px, meant for sitting beside the divider on desktop) were both leaking through, creating a huge empty gap between the two blocks. This tightens that spacing and swaps the vertical divider for a horizontal one between the stacked rows. */ @media (max-width: 960px) { .stats__grid { gap: 0 !important; align-items: stretch; } .stats__left { max-width: 100% !important; margin: 0 !important; } .stats__right { margin-top: 0 !important; padding-top: 32px !important; } .stats__divider { display: block !important; width: 64px !important; height: 1px !important; background: #1d1f19; margin: 32px auto 0 !important; align-self: center; } } /* ============ LEGAL (Privacy Policy / Terms) ============ */ .legal { background: var(--bg-light); padding: 120px 0 110px; } .legal__container { max-width: 900px; } .legal h1 { font-family: var(--sans); font-weight: 800; font-size: 72px; color: var(--ink); letter-spacing: -2px; line-height: 1.05; margin-bottom: 36px; } .legal__updated { font-size: 16px; font-weight: 600; color: #8a8275; margin-bottom: 28px; } .legal p { font-size: 18px; font-weight: 500; line-height: 1.6; color: #5f7a7e; margin-bottom: 22px; } .legal h2 { font-family: var(--sans); font-weight: 700; font-size: 22px; color: var(--ink); margin: 40px 0 16px; } .legal ul { margin: 0 0 22px; padding-left: 20px; list-style: none; } .legal ul li { position: relative; font-size: 18px; font-weight: 500; line-height: 1.6; color: #5f7a7e; padding-left: 14px; margin-bottom: 4px; } .legal ul li::before { content: "\2022"; position: absolute; left: 0; color: #5f7a7e; } .legal__address { color: #5f7a7e; line-height: 1.7; } @media (max-width: 720px) { .legal { padding: 60px 0 80px; } .legal h1 { font-size: 44px; } .legal p, .legal ul li { font-size: 16px; } }