/* ========================================================================== 71C Property Renovation ========================================================================== */ /* --------------------------------------------------------------------------- PALETTES The site uses whichever palette is set on . Leave it off entirely and you get "field" (green and clay). Once you have picked one, tell me and I will strip the rest out. --------------------------------------------------------------------------- */ /* Live palette. The four alternatives are commented out below — uncomment one and rename it to :root to switch. */ /* 1. FIELD - deep green + burnt orange */ :root, body[data-theme="field"] { --cream: #fbf8f3; --sand: #f0e8db; --paper: #ffffff; --ink: #1e2422; --ink-soft: #5c6461; --line: #e2d9cc; --green: #14453a; --green-dark: #0d3129; --green-pale: #e7eee9; --clay: #d1592b; --clay-dark: #b0451e; --accent: var(--green); --accent-dark: var(--green-dark); --accent-pale: var(--green-pale); --display: 'Fraunces', Georgia, serif; --body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --gutter: 22px; --max: 1240px; --narrow: 700px; --pad: clamp(70px, 10vw, 140px); } /* /* 2. FORGE - charcoal + ochre */ body[data-theme="forge"] { --cream: #f6f4f0; --sand: #e8e4dc; --paper: #ffffff; --ink: #191a1a; --ink-soft: #5d605e; --line: #dcd7ce; --green: #23262a; --green-dark: #141618; --green-pale: #eceae5; --clay: #c8901f; --clay-dark: #a97710; } */ /* /* 3. HARBOUR - navy + copper */ body[data-theme="harbour"] { --cream: #f7f6f3; --sand: #e9e7e1; --paper: #ffffff; --ink: #1b2330; --ink-soft: #5a6472; --line: #dbd8d1; --green: #12304d; --green-dark: #0b2138; --green-pale: #e6ecf2; --clay: #bd6a3c; --clay-dark: #9d532b; } */ /* /* 4. STUDIO - near-black + electric orange */ body[data-theme="studio"] { --cream: #f4f2ee; --sand: #e6e3dd; --paper: #ffffff; --ink: #101112; --ink-soft: #585b5c; --line: #d8d4cc; --green: #101112; --green-dark: #000000; --green-pale: #eae7e1; --clay: #ec5b1e; --clay-dark: #cc4611; } */ /* /* 5. HEATH - plum + soft gold */ body[data-theme="heath"] { --cream: #faf6f4; --sand": #efe6e4; --sand: #efe6e4; --paper: #ffffff; --ink: #221a20; --ink-soft: #61545d; --line": #e2d5d8; --line: #e2d5d8; --green: #4a2140; --green-dark: #34162d; --green-pale: #f0e7ee; --clay: #c08a3e; --clay-dark: #a3712c; } */ body.theme-investor { --accent: #2b4a6f; --accent-dark: #1c3busy; --accent-dark: #1c334f; --accent-pale: #e8eef6; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--accent); } a:hover { color: var(--clay); } :focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration:.001ms !important; animation:none !important; } } /* ---------- type: big, editorial ---------- */ h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: .95; letter-spacing: -0.035em; margin: 0 0 .45em; text-wrap: balance; } h1 { font-size: clamp(3rem, 9.5vw, 8rem); } h2 { font-size: clamp(2.3rem, 6vw, 5rem); } h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); } h4 { font-family: var(--body); font-size: 1.02rem; font-weight: 700; margin: 0 0 .35em; } em.hl { font-style: italic; color: var(--clay); } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } .lede { font-size: clamp(1.1rem, 1.55vw, 1.35rem); line-height: 1.55; color: #3a413e; } .eyebrow { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); margin: 0 0 16px; } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .wrap--narrow { max-width: var(--narrow); } .section { padding: var(--pad) 0; position: relative; } .section--tight { padding: clamp(46px,6vw,80px) 0; } .section--sand { background: var(--sand); } .section--paper { background: var(--paper); } .section-head { max-width: 700px; margin-bottom: clamp(34px,4.5vw,60px); } .section-head--center { margin-left:auto; margin-right:auto; text-align:center; } .section-head--wide { max-width: 900px; } /* asymmetric split, image larger and dropped */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,80px); align-items: center; } .split--offset { grid-template-columns: 1.05fr .95fr; align-items: start; } .split--offset > *:last-child { margin-top: clamp(0px, 5vw, 70px); } .split--flip > *:first-child { order: 2; } @media (max-width: 880px) { .split, .split--offset { grid-template-columns: 1fr; } .split--offset > *:last-child { margin-top: 0; } .split--flip > *:first-child { order: 0; } } /* ---------- top bar + nav ---------- */ .topbar { background: var(--green-dark); color: #fff; font-size: .82rem; } body.theme-investor .topbar { background: #1c334f; } .topbar__in { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:38px; padding:3px var(--gutter); max-width:var(--max); margin:0 auto; } .topbar__creds { opacity:.8; } .topbar__links { display:flex; gap:18px; } .topbar__links a { color:#fff; text-decoration:none; font-weight:700; } .topbar__links a:hover { color:#f0c4ab; } @media (max-width:720px){ .topbar__creds{display:none} .topbar__in{justify-content:center} } .nav { position: sticky; top:0; z-index:60; background: rgba(251,248,243,.93); backdrop-filter: blur(10px); } .nav__in { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:78px; padding:12px var(--gutter); max-width:var(--max); margin:0 auto; } .nav__logo img { height:38px; width:auto; } .nav__links { display:flex; align-items:center; gap:2px; } .nav__links a { display:block; padding:9px 13px; border-radius:999px; color:var(--ink); text-decoration:none; font-size:.93rem; font-weight:500; } .nav__links a:hover { background: var(--accent-pale); } .nav__links a.is-active { font-weight:700; color: var(--accent); } .nav__links a.nav-investor { color:#2b4a6f; font-weight:700; } .nav__cta { flex:none; margin-left:6px; background:var(--clay); color:#fff !important; padding:11px 20px !important; font-weight:700 !important; } .nav__cta:hover { background:var(--clay-dark) !important; } .nav__burger { display:none; background:none; border:1px solid var(--line); color:var(--ink); width:44px; height:40px; border-radius:999px; cursor:pointer; font-size:1.15rem; } @media (max-width:1040px){ .nav__burger{display:block} .nav__links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--cream); padding:8px var(--gutter) 20px; display:none; border-bottom:1px solid var(--line); } .nav__links.is-open{display:flex} .nav__links a{ padding:13px 10px; border-radius:12px; } .nav__cta{ margin:10px 0 0; text-align:center; } } /* ---------- editorial hero ---------- */ .hero-ed { padding: clamp(26px,4vw,52px) 0 0; } .hero-ed__media { position: relative; border-radius: 260px 260px 28px 28px; overflow: hidden; aspect-ratio: 16/10; } .hero-ed__media img { width:100%; height:100%; object-fit:cover; } .hero-ed__title { position: relative; z-index: 3; margin: clamp(-90px,-7vw,-40px) 0 0; padding: 0 clamp(0px,2vw,30px); } .hero-ed__title h1 { margin:0; color: var(--ink); } .hero-ed__title h1 span { display:inline-block; background: var(--cream); border-radius: 999px; padding: 0 clamp(12px,2vw,26px); } .hero-ed__foot { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap: 26px; margin-top: clamp(24px,3vw,40px); } .hero-ed__foot .lede { max-width: 46ch; margin:0; } .hero-ed__actions { display:flex; flex-wrap:wrap; gap:11px; } @media (max-width:700px){ .hero-ed__media { border-radius: 160px 160px 24px 24px; aspect-ratio: 4/5; } } /* rotated stamp */ .stamp { position:absolute; z-index:4; right: clamp(10px,3vw,44px); top: clamp(-26px,-2vw,-10px); width: clamp(96px,11vw,138px); height: clamp(96px,11vw,138px); border-radius:50%; background: var(--clay); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transform: rotate(-11deg); box-shadow: 0 10px 30px rgba(60,30,10,.22); font-weight:700; line-height:1.15; padding: 10px; } .stamp b { font-family: var(--display); font-weight:600; font-size: clamp(1.3rem,2.2vw,1.9rem); display:block; } .stamp span { font-size: clamp(.58rem,.8vw,.72rem); letter-spacing:.1em; text-transform:uppercase; opacity:.92; } /* ---------- marquee ---------- */ .marquee { background: var(--accent); color:#fff; overflow:hidden; padding: 16px 0; } .marquee__track { display:flex; width:max-content; animation: slide 38s linear infinite; } .marquee span { font-family: var(--display); font-size: clamp(1.1rem,2vw,1.7rem); font-weight:500; padding: 0 26px; white-space: nowrap; opacity:.95; } .marquee span::after { content:'\2022'; margin-left: 26px; opacity:.5; } @keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } } @media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none } } /* ---------- stacked service list ---------- */ .stack { border-top: 1px solid var(--line); } .stack__item { position:relative; border-bottom: 1px solid var(--line); } .stack__link { display:grid; grid-template-columns: 76px 1fr auto; gap: 24px; align-items:center; padding: clamp(22px,3vw,34px) 0; text-decoration:none; color:var(--ink); transition: padding-left .28s ease, color .2s; } .stack__item:hover .stack__link { padding-left: 18px; color: var(--accent); } .stack__n { font-family:var(--display); font-size:1.1rem; color:var(--clay); font-weight:600; } .stack__t { font-family:var(--display); font-size: clamp(1.55rem,3.6vw,2.7rem); font-weight:500; line-height:1.05; } .stack__d { color: var(--ink-soft); font-size:.98rem; max-width: 44ch; margin-top:6px; } .stack__go { font-size:1.5rem; color:var(--clay); } .stack__peek { position:absolute; right: 8%; top:50%; width: 250px; height: 175px; transform: translateY(-50%) rotate(-4deg) scale(.9); border-radius: 120px 120px 16px 16px; overflow:hidden; opacity:0; pointer-events:none; transition: opacity .3s, transform .35s; box-shadow: 0 18px 44px rgba(40,30,20,.24); z-index:2; } .stack__peek img { width:100%; height:100%; object-fit:cover; } .stack__item:hover .stack__peek { opacity:1; transform: translateY(-50%) rotate(-4deg) scale(1); } @media (max-width: 900px){ .stack__peek { display:none; } .stack__link { grid-template-columns: 44px 1fr auto; gap:14px; } } /* ---------- collage gallery ---------- */ .collage { display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(12px,1.6vw,22px); } .collage figure { margin:0; position:relative; overflow:hidden; cursor: zoom-in; background: var(--sand); } .collage img { width:100%; height:100%; object-fit:cover; transition: transform .55s ease; } .collage figure:hover img { transform: scale(1.045); } .collage figcaption { position:absolute; left:0; right:0; bottom:0; padding: 34px 16px 13px; color:#fff; font-size:.9rem; background: linear-gradient(to top, rgba(18,22,20,.78), transparent); } .c-a { grid-column: span 7; border-radius: 24px; aspect-ratio: 4/3; } .c-b { grid-column: span 5; border-radius: 200px 24px 24px 24px; aspect-ratio: 3/4; margin-top: 40px; } .c-c { grid-column: span 4; border-radius: 24px 24px 200px 24px; aspect-ratio: 3/4; } .c-d { grid-column: span 8; border-radius: 24px; aspect-ratio: 16/9; } .c-e { grid-column: span 5; border-radius: 24px; aspect-ratio: 5/4; } .c-f { grid-column: span 7; border-radius: 24px 200px 24px 24px; aspect-ratio: 16/10; } .c-g { grid-column: span 6; border-radius: 24px; aspect-ratio: 4/3; } .c-h { grid-column: span 6; border-radius: 24px; aspect-ratio: 4/3; } @media (max-width: 820px){ .collage { grid-template-columns: repeat(2,1fr); } .collage figure { grid-column: span 1 !important; aspect-ratio: 1/1 !important; margin-top:0 !important; border-radius: 18px !important; } .collage .c-a, .collage .c-d { grid-column: span 2 !important; aspect-ratio: 4/3 !important; } } /* simple gallery still used on inner pages */ .gallery { display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 16px; } .gallery--tall { grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); } .shot { position:relative; margin:0; overflow:hidden; border-radius:20px; cursor:zoom-in; background:var(--sand); } .shot img { width:100%; aspect-ratio:4/3; object-fit:cover; transition: transform .5s; } .gallery--tall .shot img { aspect-ratio:3/4; } .shot:hover img { transform: scale(1.045); } .shot figcaption { position:absolute; left:0; right:0; bottom:0; padding:32px 14px 12px; color:#fff; font-size:.88rem; background: linear-gradient(to top, rgba(18,22,20,.8), transparent); } .shot--wide { grid-column: span 2; } .shot--tall { grid-row: span 2; } .shot--tall img { height:100%; aspect-ratio:auto; } .shot--arch { border-radius: 180px 180px 20px 20px; } @media (max-width:600px){ .shot--wide{grid-column:span 1} .shot--tall{grid-row:span 1} } /* ---------- buttons ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:999px; border:2px solid transparent; font-family:var(--body); font-size:.96rem; font-weight:700; text-decoration:none; cursor:pointer; transition: background .18s, color .18s, border-color .18s, transform .18s; } .btn:hover { transform: translateY(-1px); } .btn--primary { background:var(--clay); color:#fff; } .btn--primary:hover { background:var(--clay-dark); color:#fff; } .btn--dark { background:var(--accent); color:#fff; } .btn--dark:hover { background:var(--accent-dark); color:#fff; } .btn--line { border-color: var(--ink); color: var(--ink); } .btn--line:hover { background: var(--ink); color: var(--cream); } .btn--ghost { border-color: rgba(255,255,255,.6); color:#fff; } .btn--ghost:hover { background: rgba(255,255,255,.15); color:#fff; } .btn--wide { width:100%; } /* ---------- figures ---------- */ .figure-frame { border-radius: 220px 220px 24px 24px; overflow:hidden; } .figure-frame img { width:100%; aspect-ratio:4/5; object-fit:cover; } .figure-frame--soft { border-radius: 24px 220px 24px 220px; } @media (max-width:880px){ .figure-frame, .figure-frame--soft { border-radius:150px 150px 22px 22px; } .figure-frame img { aspect-ratio:5/4; } } /* ---------- band (full colour panel) ---------- */ .band { background: var(--accent); color:#fff; border-radius: 40px; padding: clamp(38px,5vw,72px); } .band h2, .band h3 { color:#fff; } .band .lede, .band p { color: rgba(255,255,255,.9); } .band .eyebrow { color:#f2c9b1; } .band a:not(.btn) { color:#fff; } .band--clay { background: var(--clay); } .band--clay .eyebrow { color:#ffe4d4; } /* ---------- pull quote ---------- */ .pull { max-width: 900px; margin: 0 auto; text-align:center; } .pull blockquote { font-family: var(--display); font-weight:500; font-size: clamp(1.5rem,3.4vw,2.5rem); line-height:1.18; letter-spacing:-.02em; margin:0 0 22px; } .pull cite { font-style:normal; font-size:.9rem; color:var(--ink-soft); letter-spacing:.08em; text-transform:uppercase; } .pull__mark { font-family:var(--display); font-size:4rem; line-height:.5; color:var(--clay); display:block; margin-bottom:18px; } /* ---------- reviews ---------- */ .reviews { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; } .review { margin:0; background:var(--paper); border-radius:24px; padding:28px 26px; } .review:nth-child(even) { background: var(--green-pale); } .review__stars { color:#d9963c; letter-spacing:.18em; margin-bottom:12px; } .review blockquote { margin:0 0 14px; font-size:1rem; } .review figcaption { font-size:.88rem; color:var(--ink-soft); } /* ---------- stats ---------- */ .stats__in { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .stat { background:var(--paper); border-radius:24px; padding:26px 22px; } .stat:nth-child(2){ background: var(--green-pale); } .stat:nth-child(4){ background: var(--green-pale); } .stat__n { display:block; font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.05; margin-bottom:4px; } .stat__l { font-size:.88rem; color:var(--ink-soft); } @media (max-width:820px){ .stats__in{grid-template-columns:1fr 1fr} } /* ---------- cards / features ---------- */ .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; } .card { display:flex; flex-direction:column; background:var(--paper); border-radius:26px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .22s, box-shadow .22s; } a.card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(45,35,25,.12); } .card__img { aspect-ratio:5/4; object-fit:cover; width:100%; } .card__body { padding:24px; flex:1; } .card__body p { color:var(--ink-soft); font-size:.97rem; } .card__more { display:inline-block; margin-top:12px; font-weight:700; font-size:.9rem; color:var(--clay); } .feature { background:var(--paper); border-radius:26px; padding:30px 28px; } .feature:nth-child(even) { background: var(--green-pale); } .feature p { color:var(--ink-soft); font-size:.98rem; } /* ---------- faq ---------- */ .faq details { border-bottom:1px solid var(--line); } .faq details:first-child { border-top:1px solid var(--line); } .faq summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 0; cursor:pointer; list-style:none; font-family:var(--display); font-weight:500; font-size:clamp(1.2rem,2vw,1.55rem); } .faq summary::-webkit-details-marker{display:none} .faq summary::after { content:'+'; color:var(--clay); font-family:var(--body); font-size:1.6rem; } .faq details[open] summary::after { content:'\2013'; } .faq__a { padding:0 0 24px; max-width:66ch; color:var(--ink-soft); } /* ---------- steps ---------- */ .steps { list-style:none; margin:0; padding:0; counter-reset:step; } .steps li { counter-increment:step; display:grid; grid-template-columns:64px 1fr; gap:22px; padding:26px 0; border-top:1px solid var(--line); } .steps li:last-child { border-bottom:1px solid var(--line); } .steps li::before { content:counter(step); display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:var(--clay); color:#fff; font-family:var(--display); font-weight:600; font-size:1.3rem; } .steps p { color:var(--ink-soft); margin:0; } @media (max-width:600px){ .steps li{grid-template-columns:46px 1fr; gap:14px} .steps li::before{width:38px;height:38px;font-size:1.05rem} } /* ---------- forms ---------- */ .form-panel { background:var(--paper); border-radius:28px; padding:clamp(26px,4vw,38px); } .field { margin-bottom:16px; } .field label { display:block; font-size:.9rem; font-weight:700; margin-bottom:6px; } .field input, .field select, .field textarea { width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:14px; background:var(--cream); color:var(--ink); font-family:var(--body); font-size:1rem; } .field textarea { min-height:120px; resize:vertical; } .field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--accent); background:#fff; } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:540px){ .field-row{grid-template-columns:1fr;gap:0} } .form-note { margin-top:12px; font-size:.88rem; color:var(--ink-soft); } .detail { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); } .detail:first-of-type { border-top:1px solid var(--line); } .detail__k { flex:none; width:88px; font-size:.85rem; font-weight:700; color:var(--ink-soft); padding-top:2px; } .detail__v strong { display:block; } .detail__v small { color:var(--ink-soft); } .creds { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); font-size:.93rem; color:var(--ink-soft); } /* ---------- footer ---------- */ .footer { background:var(--green-dark); color:rgba(255,255,255,.86); padding:clamp(50px,6vw,76px) 0 0; font-size:.96rem; border-radius:44px 44px 0 0; margin-top: clamp(40px,5vw,70px); } body.theme-investor .footer { background:#1c334f; } .footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px 28px; padding-bottom:40px; } @media (max-width:880px){ .footer__grid{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .footer__grid{grid-template-columns:1fr} } .footer__logo { height:44px; width:auto; margin-bottom:16px; } .footer h4 { color:#fff; font-size:.95rem; margin-bottom:12px; } .footer ul { list-style:none; margin:0; padding:0; } .footer li { margin-bottom:8px; } .footer a { color:rgba(255,255,255,.86); text-decoration:none; } .footer a:hover { color:#fff; text-decoration:underline; } .footer__base { border-top:1px solid rgba(255,255,255,.16); padding:18px 0; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:.86rem; opacity:.8; } /* ---------- whatsapp + misc ---------- */ .wa-fab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; align-items: center; justify-content: center; width: 54px; height: 88px; padding: 0; background: #25d366; color: #fff; border-radius: 999px 0 0 999px; box-shadow: -5px 0 20px rgba(0,0,0,.22); text-decoration: none; transition: width .22s ease, background .22s ease; } .wa-fab:hover { width: 68px; background: #1fbc5a; color: #fff; } .wa-fab svg { width: 30px; height: 30px; fill: currentColor; } .wa-fab span { display: none; } @media (max-width: 600px) { .wa-fab { width: 44px; height: 74px; } .wa-fab svg { width: 25px; height: 25px; } } .lightbox { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:26px; background:rgba(20,18,16,.94); } .lightbox.is-open { display:flex; } .lightbox img { max-width:100%; max-height:86vh; border-radius:16px; } .lightbox__cap { position:absolute; bottom:16px; left:0; right:0; text-align:center; color:rgba(255,255,255,.8); font-size:.88rem; } .lightbox__close,.lightbox__nav { position:absolute; background:rgba(255,255,255,.14); border:none; color:#fff; width:46px; height:46px; border-radius:50%; font-size:1.4rem; cursor:pointer; } .lightbox__close:hover,.lightbox__nav:hover { background:rgba(255,255,255,.28); } .lightbox__close{ top:18px; right:18px; } .lightbox__nav--prev{ left:16px; top:50%; margin-top:-23px; } .lightbox__nav--next{ right:16px; top:50%; margin-top:-23px; } .skip { position:absolute; left:-9999px; padding:10px 16px; background:var(--clay); color:#fff; } .skip:focus { left:12px; top:12px; z-index:300; } .cta-band { background:var(--accent-pale); text-align:center; border-radius:40px; } /* ==================== slideshow hero ==================== */ .hero { position: relative; min-height: clamp(560px, 92vh, 940px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .hero--sub { min-height: clamp(420px, 66vh, 640px); } .hero__slides { position: absolute; inset: 0; z-index: 0; } .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; transform: scale(1.06); } .hero__slide.is-on { opacity: 1; animation: kenburns 9s ease-out forwards; } @keyframes kenburns { from { transform: scale(1.10); } to { transform: scale(1.0); } } .hero__scrim { position: absolute; inset: 0; z-index: 1; /* darkens the photo so white text stays readable. Lower the numbers to brighten the photo, raise them to darken it. */ background: linear-gradient(to top, rgba(8,26,21,.86) 2%, rgba(8,26,21,.34) 44%, rgba(8,26,21,.10) 100%), linear-gradient(to right, rgba(8,26,21,.58) 0%, rgba(8,26,21,0) 58%); } body.theme-investor .hero__scrim { background: linear-gradient(to top, rgba(8,20,34,.94) 4%, rgba(8,20,34,.55) 48%, rgba(8,20,34,.30) 100%), linear-gradient(to right, rgba(8,20,34,.72) 0%, rgba(8,20,34,0) 62%); } .hero__in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(46px, 7vw, 96px); padding-top: clamp(90px,12vw,150px); } .hero__copy { max-width: 17ch; } .hero__copy--wide { max-width: 22ch; } .hero h1 { color: #fff; margin-bottom: 22px; text-shadow: 0 2px 22px rgba(0,20,14,.55); } .hero h1 em { font-style: normal; color: #ffb38a; } .hero .eyebrow { color: #ffc9a8; text-shadow: 0 1px 10px rgba(0,20,14,.6); } .hero .lede { color: #fff; max-width: 52ch; text-shadow: 0 1px 14px rgba(0,20,14,.6); } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero__dots { position: absolute; z-index: 3; right: clamp(18px,4vw,44px); bottom: clamp(46px,7vw,96px); display: flex; gap: 9px; } .hero__dot { width: 34px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.35); border: none; padding: 0; cursor: pointer; } .hero__dot.is-on { background: #ffb38a; } @media (max-width: 700px) { .hero__dots { display: none; } } /* ==================== movement ==================== */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); } .reveal.is-in { opacity: 1; transform: none; } .reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } .parallax { overflow: hidden; } .parallax img { will-change: transform; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } .hero__slide.is-on { animation: none; transform: none; } .parallax img { transform: none !important; } } /* ==================== before / after slider ==================== */ .ba { position: relative; border-radius: 26px; overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; } .ba img { width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; } .ba__top { position: absolute; inset: 0; width: 50%; overflow: hidden; } .ba__top img { width: auto; height: 100%; max-width: none; } .ba__bar { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; transform: translateX(-50%); pointer-events: none; } .ba__knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--green); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; box-shadow: 0 6px 20px rgba(0,0,0,.28); pointer-events: none; } .ba__tag { position: absolute; bottom: 14px; z-index: 3; background: rgba(10,20,16,.72); color: #fff; padding: 6px 14px; border-radius: 99px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .ba__tag--l { left: 14px; } .ba__tag--r { right: 14px; } /* ==================== bolder blocks ==================== */ .band { border-radius: 0; padding: clamp(52px,7vw,110px) 0; } .band--full { background: var(--accent); color: #fff; } .band--clay { background: var(--clay); color: #fff; } .band--clay .eyebrow { color: #ffe0d1; } .marquee { padding: 22px 0; background: var(--clay); } .stat { border: 2px solid var(--ink); background: transparent; } .stat:nth-child(2), .stat:nth-child(4) { background: var(--green-pale); } /* ---------- accreditation badges ---------- */ .badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; } .badges__card { background: #fff; border-radius: 16px; padding: 12px 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(35,25,15,.08); } .badges__card img { height: 62px; width: auto; } .badges__note { font-size: .92rem; color: var(--ink-soft); max-width: 26ch; } .band .badges__note { color: rgba(255,255,255,.85); } .badges--lg .badges__card img { height: 84px; } .footer .badges { margin-top: 18px; } .footer .badges__card { padding: 9px 12px; border-radius: 12px; } .footer .badges__card img { height: 44px; } /* ---------- the four words ---------- */ .pillars { list-style: none; margin: 0 0 8px; padding: 0; } .pillars li { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 9vw, 7.5rem); line-height: .88; letter-spacing: -.05em; } .pillars li + li { margin-top: .04em; } .pillars li:nth-child(1) { font-size: clamp(2.4rem, 6.6vw, 5.4rem); } .pillars li:nth-child(2) { font-size: clamp(2.9rem, 8vw, 6.6rem); } .pillars li:nth-child(3) { font-size: clamp(3.4rem, 9.4vw, 7.8rem); } .pillars li:nth-child(4) { font-size: clamp(3.9rem, 11vw, 9.2rem); color: var(--clay); } /* let them run wider than the column they sit in */ .split--offset > *:first-child:has(.pillars) { max-width: none; } /* give the four words the wider half of the row */ .split--pillars { grid-template-columns: 1.35fr .65fr; align-items: center; } @media (max-width: 880px) { .split--pillars { grid-template-columns: 1fr; } } /* ---------- before / after set ---------- */ .ba-set { display: grid; gap: clamp(20px, 3vw, 34px); } .ba-set--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 980px) { .ba-set--3 { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } } .ba-item .ba { border-radius: 20px; } .ba-item .ba img { aspect-ratio: 3/2; } .ba-item h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); margin: 16px 0 4px; } .ba-item p { color: var(--ink-soft); font-size: .95rem; margin: 0; } .ba-hint { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; color: var(--clay); margin-top: 4px; } /* ---------- form result message ---------- */ .form-result { margin: 14px 0 0; padding: 12px 15px; border-radius: 12px; font-size: .94rem; font-weight: 500; } .form-result.is-ok { background: var(--accent-pale); color: var(--accent-dark); } .form-result.is-bad { background: #fbe8e2; color: #8c3315; }