/* ELUCENS — Concept v5 "Clearing". A deliberately DIFFERENT direction from v4 (Clinical): - Light & airy instead of dark editorial. Confident contemporary grotesque, not a literary serif. Soft radii & a pill language instead of hard rules. - A fresh, natural palette (evergreen / teal / plum), swappable — no indigo, no beige, no amber. One vivid accent does the talking. - Motif: a small filled "seed" dot + numbered openers, not crosshairs. All palette-specific colors are injected on from JS (PALETTES). */ /* Self-hosted fonts — no external CDN */ /* Bricolage Grotesque — variable font (wght 400..800), latin-ext + latin */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(fonts/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Hanken Grotesk — static weights 400-800, latin-ext + latin */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/hanken-grotesk-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/hanken-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ /* neutral ground — stays constant across palettes */ --paper:#F4F5F1; --paper-2:#FFFFFF; --ink:#15191A; --ink-2:#454C4A; --ink-3:#737A77; --line:#E4E5DF; --line-2:#D2D4CC; /* palette-driven (set by JS) — evergreen defaults baked in as fallback */ --accent:#16A35A; --accent-deep:#0E7C43; --accent-soft:#DCEFE2; --surface:#0C2C1E; --surface-2:#0E3525; --tint:#E7F1E8; --on-dark:#EAF1E7; --on-dark-2:#A6B7AB; --on-dark-line:#234A36; --hscale:1; --radius:14px; --radius-lg:22px; --pill:999px; --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif; background:var(--paper); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{background:var(--accent);color:#fff} .shell{max-width:1200px;margin:0 auto;padding:0 44px} .wm{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--ink)} .wm .dot{color:var(--accent)} .wm--dark{color:var(--on-dark)} /* seed motif */ .seed{width:9px;height:9px;border-radius:var(--pill);background:var(--accent);flex:0 0 auto;display:inline-block} /* eyebrow */ .eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-body);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)} .eyebrow--dark{color:var(--accent)} .eyebrow--dark .seed{background:var(--accent)} /* numbered section opener */ .opener{display:flex;align-items:baseline;gap:18px;margin-bottom:46px} .opener__no{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--accent);letter-spacing:-.01em} .opener__lbl{font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .opener__rule{flex:1;height:2px;border-radius:2px;background:var(--line-2);align-self:center} .sec--dark .opener__lbl{color:var(--on-dark-2)} .sec--dark .opener__rule{background:var(--on-dark-line)} .sec--dark .opener__no{color:var(--accent)} /* ---- buttons (pill) ---- */ .btn{font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.01em;padding:15px 26px;border-radius:var(--pill);border:2px solid transparent;cursor:pointer;transition:.16s ease;text-decoration:none;display:inline-flex;align-items:center;gap:10px;white-space:nowrap} .btn--fill{background:var(--accent);color:#fff;border-color:var(--accent)} .btn--fill:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translateY(-1px)} .btn--out{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn--out:hover{border-color:var(--ink);background:var(--ink);color:var(--paper-2)} .btn--ondark{background:transparent;color:var(--on-dark);border-color:var(--on-dark-line)} .btn--ondark:hover{border-color:var(--on-dark);background:var(--on-dark);color:var(--surface)} .btn .ar{transition:transform .18s} .btn:hover .ar{transform:translateX(4px)} .sec{padding:118px 0} .sec--tint{background:var(--tint)} .sec--dark{background:var(--surface);color:var(--on-dark)} /* ---------------- NAV ---------------- */ .nav{position:sticky;top:0;z-index:50;background:rgba(244,245,241,.82);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--line)} .nav__in{display:flex;align-items:center;justify-content:space-between;height:76px} .nav__brand{font-size:28px;text-decoration:none} .nav__links{display:flex;align-items:center;gap:30px} .nav__links a{font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--ink-2);text-decoration:none;transition:color .15s} .nav__links a:hover{color:var(--accent-deep)} .nav__cta{font-family:var(--font-body);font-weight:700;font-size:14px;color:#fff;background:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border:0;border-radius:var(--pill);cursor:pointer;transition:.16s} .nav__cta .ar{transition:transform .18s} .nav__cta:hover{background:var(--accent-deep)} .nav__cta:hover .ar{transform:translateX(4px)} .lang{display:inline-flex;gap:2px;background:var(--line);border-radius:var(--pill);padding:3px} .lang button{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.04em;padding:7px 13px;background:transparent;border:0;border-radius:var(--pill);cursor:pointer;color:var(--ink-3);transition:.15s} .lang button.on{background:var(--paper-2);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)} /* ---------------- HERO (light) ---------------- */ .hero{padding:96px 0 64px} .hero__ey{margin-bottom:30px} .hero__h{font-family:var(--font-display);font-weight:700;font-size:calc(clamp(48px,7vw,112px) * var(--hscale));line-height:1.05;letter-spacing:-.035em;color:var(--ink);max-width:15ch} .hero__h em{font-style:normal;color:var(--accent-deep)} .hero__sub{font-size:21px;line-height:1.55;color:var(--ink-2);max-width:52ch;margin-top:34px;font-weight:400} .hero__cta{display:flex;gap:14px;align-items:center;margin-top:38px;flex-wrap:wrap} .hero__meta{display:flex;gap:54px;margin-top:62px;flex-wrap:wrap} .hero__meta .m{display:flex;flex-direction:column;gap:6px} .hero__meta .m b{font-family:var(--font-display);font-weight:700;font-size:46px;color:var(--ink);line-height:1;letter-spacing:-.03em} .hero__meta .m b em{font-style:normal;color:var(--accent-deep)} .hero__meta .m span{font-weight:600;font-size:14px;color:var(--ink-3)} /* wide image band */ .band{padding:0 0 22px} .hero-graphic{display:block;width:100%;height:clamp(280px,42vw,520px);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)} .hero-graphic img{width:100%;height:100%;object-fit:contain;object-position:center} /* ---------------- VALUE (tint, big numerals) ---------------- */ .value__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .value__col{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px 38px;transition:.18s} .value__col:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(20,40,30,.4)} .value__num{font-family:var(--font-display);font-weight:700;font-size:64px;line-height:.85;color:var(--accent);letter-spacing:-.03em} .value__h{font-family:var(--font-display);font-weight:600;font-size:27px;margin:22px 0 12px;color:var(--ink);letter-spacing:-.02em} .value__p{font-size:16.5px;line-height:1.58;color:var(--ink-2)} /* ---------------- METHOD (light) ---------------- */ .method__head{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end;margin-bottom:54px} .method__title{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,4.6vw,66px);line-height:1.06;letter-spacing:-.03em;color:var(--ink);max-width:14ch} .method__lead{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:44ch} .steps{display:flex;flex-direction:column;gap:0;border-top:2px solid var(--line)} .step{display:grid;grid-template-columns:120px 1.1fr 1.2fr;gap:36px;align-items:start;padding:42px 0;border-bottom:2px solid var(--line)} .step__no{font-family:var(--font-display);font-weight:700;font-size:54px;line-height:.8;color:var(--accent);letter-spacing:-.03em} .step__h{font-family:var(--font-display);font-weight:600;font-size:30px;color:var(--ink);line-height:1.04;letter-spacing:-.02em} .step__p{font-size:17px;line-height:1.6;color:var(--ink-2)} /* ---------------- PROOF (cards) ---------------- */ .proof__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .case{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;transition:.18s;cursor:pointer;overflow:hidden;position:relative} .case::before{content:"";position:absolute;left:0;top:0;height:5px;width:100%;background:var(--accent);opacity:.85} .case:hover{transform:translateY(-3px);box-shadow:0 22px 46px -28px rgba(20,40,30,.45)} .case__ey{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:18px;margin-top:6px} .case__h{font-family:var(--font-display);font-weight:600;font-size:25px;line-height:1.08;color:var(--ink);letter-spacing:-.02em} .case__p{font-size:15.5px;line-height:1.56;color:var(--ink-2);margin-top:13px;flex:1} .case__foot{display:flex;gap:26px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} .case__stat{font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.02em;color:var(--ink-3)} .case__stat b{display:block;font-family:var(--font-display);font-size:30px;color:var(--accent-deep);font-weight:700;margin-bottom:3px;letter-spacing:-.02em} /* ---------------- STATEMENT (dark) ---------------- */ .statement{background:var(--surface);color:var(--on-dark);padding:150px 0;text-align:center} .statement .seed{margin:0 auto 30px;width:13px;height:13px} .statement__q{font-family:var(--font-display);font-weight:600;font-size:clamp(38px,5.2vw,70px);line-height:1.1;letter-spacing:-.03em;max-width:19ch;margin:0 auto;text-wrap:balance;color:var(--on-dark)} .statement__q em{font-style:normal;color:var(--accent)} .statement__by{font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);margin-top:34px} /* ---------------- CONTACT (light) ---------------- */ .contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start} .contact__h{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,3.8vw,54px);line-height:1.02;letter-spacing:-.03em;color:var(--ink);max-width:14ch} .contact__p{font-size:18px;line-height:1.58;color:var(--ink-2);margin-top:22px;max-width:40ch} .form{display:flex;flex-direction:column;gap:18px} .form label{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;display:block} .form input{width:100%;font-family:var(--font-body);font-size:16px;color:var(--ink);background:var(--paper-2);border:1.5px solid var(--line-2);border-radius:12px;padding:14px 16px;outline:none;transition:.15s} .form input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .form .sent{font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--accent-deep);padding:16px 0} /* ---------------- FOOTER (dark) ---------------- */ .footer{background:var(--surface);color:var(--on-dark);padding:78px 0 46px} .footer__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:46px;border-bottom:1px solid var(--on-dark-line)} .footer__tag{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--on-dark-2);margin-top:16px;max-width:24ch} .footer__cols{display:flex;gap:72px} .footer__col h5{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:16px} .footer__col a{display:block;font-size:15px;color:var(--on-dark);text-decoration:none;margin-bottom:10px;opacity:.85;transition:.15s} .footer__col a:hover{opacity:1;color:var(--accent)} .footer__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:30px;font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--on-dark-2)} @media(max-width:880px){ .shell{padding:0 24px} .value__grid,.proof__grid{grid-template-columns:1fr;gap:18px} .method__head{grid-template-columns:1fr;gap:22px} .step{grid-template-columns:1fr;gap:12px;padding:32px 0} .step__no{font-size:42px} .contact__grid{grid-template-columns:1fr;gap:40px} .hero__meta{gap:32px} .nav__links a:not(.nav__cta){display:none} }