2 lines
5.4 KiB
CSS
2 lines
5.4 KiB
CSS
:root{color-scheme:light;--ink:#17251e;--muted:#69746d;--green:#456c52;--paper:#f5f7f2;--line:#dce3d9;--serif:Georgia,"Times New Roman",serif;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","SF Arabic","Helvetica Neue",system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.7}.wrap{width:min(1160px,calc(100% - 64px));margin-inline:auto}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);font-size:17px;font-weight:650;letter-spacing:-.035em;display:inline-flex;align-items:center;gap:10px;direction:ltr}.brand-mark{width:29px;height:29px;border-radius:10px;background:var(--green);color:white;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:19px}.top-link{color:var(--ink);font-size:13px;text-decoration:none}.top-link span{padding-inline-start:9px;color:var(--green)}.hero{min-height:580px;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding-block:72px 86px}.hero-copy{max-width:500px;padding-inline-start:4vw}.eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:650;color:var(--green);margin:0 0 22px;display:flex;align-items:center;gap:10px}.pulse{height:7px;width:7px;background:#93ad80;border-radius:50%;box-shadow:0 0 0 5px #e4ebdf}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,6vw,77px);line-height:1.07;letter-spacing:-.055em;margin-bottom:24px;font-weight:590}h1 em{font-family:var(--serif);font-weight:400;color:var(--green);letter-spacing:-.04em}.intro{font-size:16px;color:var(--muted);max-width:420px;line-height:1.9;margin-bottom:28px}.button{min-height:48px;padding:0 19px;background:var(--ink);color:white;text-decoration:none;border-radius:4px;display:inline-flex;align-items:center;gap:30px;font-size:13px;transition:background .2s}.button:hover{background:var(--green)}.button span{font-size:18px}.note{font-size:11px;color:#879088;margin:14px 0}.hero-art{height:390px;position:relative;overflow:hidden;background:#e9eee5;border-radius:48% 48% 5px 5px}.art-orbit{position:absolute;border:1px solid #bac8b4;border-radius:50%;transform:rotate(-23deg)}.orbit-one{width:470px;height:220px;top:75px;left:8%}.orbit-two{width:390px;height:180px;top:120px;left:17%;border-color:#cbd5c6}.art-sun{width:110px;height:110px;position:absolute;border-radius:50%;background:#c8d3b6;top:78px;left:42%;box-shadow:0 0 75px 25px #d7dfca}.art-path{position:absolute;width:72%;height:200px;bottom:24px;right:14%;border:1px solid #809784;border-bottom:0;border-left:0;border-radius:0 90% 0 0;transform:rotate(-13deg)}.art-card{position:absolute;left:9%;bottom:76px;background:#fffefa;padding:14px 18px;min-width:160px;box-shadow:0 14px 45px #324c3818;display:grid;grid-template-columns:12px 1fr;column-gap:9px;font-size:11px;color:var(--muted)}.art-card strong{grid-column:2;color:var(--ink);font-size:14px;font-weight:600}.card-dot{align-self:center;width:8px;height:8px;background:#88a17e;border-radius:50%;grid-row:span 2}.art-caption{position:absolute;right:10%;top:48%;font-family:var(--serif);font-style:italic;color:#657966;font-size:14px}.hero-index{position:absolute;bottom:37px;right:0;display:flex;align-items:center;gap:12px;color:#89948b;font-size:10px;direction:ltr}.hero-index span:first-child{color:var(--green)}.hero-index i{width:60px;height:1px;background:#cdd6ca}.approach{background:#fffefa;padding-block:92px 96px}.approach-inner>.eyebrow{margin-bottom:18px}.approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}.approach-grid h2{font-size:clamp(32px,4vw,48px);line-height:1.2;letter-spacing:-.04em;font-weight:550;margin:0}.approach-grid>p{max-width:480px;color:var(--muted);font-size:14px;line-height:2;margin:4px 0 0}.principles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:62px;border-top:1px solid var(--line)}.principles article{padding:24px 22px 0;border-inline-start:1px solid var(--line)}.principles article:first-child{border:0;padding-inline-start:0}.principles article>span{font-size:10px;letter-spacing:.08em;color:#829084}.principles h3{font-size:17px;font-weight:580;margin:18px 0 7px}.principles p{font-size:12px;color:var(--muted);max-width:260px;margin:0;line-height:1.9}.footer{min-height:88px;display:flex;justify-content:space-between;align-items:center;color:#879088;font-size:11px}.footer .brand{color:var(--ink);font-size:15px}.footer .brand-mark{width:25px;height:25px;font-size:16px}@media(max-width:720px){.wrap{width:calc(100% - 40px)}.topbar{height:70px}.hero{grid-template-columns:1fr;padding-block:58px 70px;gap:34px}.hero-copy{padding:0}.hero-art{height:300px;grid-row:1}.hero-index{bottom:26px}.art-orbit{left:-2%}.orbit-two{left:9%}.art-sun{left:39%;width:88px;height:88px}.art-card{bottom:45px}.approach{padding-block:68px}.approach-grid{grid-template-columns:1fr;gap:20px}.principles{grid-template-columns:1fr;margin-top:35px}.principles article,.principles article:first-child{padding:18px 0;border-inline-start:0;border-top:1px solid var(--line)}.principles h3{margin:10px 0 4px}.footer{flex-wrap:wrap;gap:10px;padding-block:20px}.footer>span:nth-child(2){order:3;width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
|