/* ============================================================ ALKEMIA GROWTH — site.css Clean site build on top of brand-tokens.css (System A). Layout + components only; all colors/type/tokens come from brand-tokens.css. No invented palette values. ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0} img{max-width:100%;display:block} a{color:var(--terracotta)} h1,h2,h3{margin:0} p{margin:0} /* ---- layout helpers ---- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 2rem} .section{padding:5.5rem 0} .section--tight{padding:4rem 0} .center{text-align:center} .lede{font-size:1.08rem;color:var(--ink);line-height:1.65;max-width:56ch} .center .lede{margin-left:auto;margin-right:auto} .section-head{max-width:62ch} .section-head .lede{margin-top:1.1rem} /* soft warm texture on the page ground (art-direction: low-opacity natural warmth — done in CSS since no texture assets ship with the brand pkg) */ body{ background: radial-gradient(1200px 600px at 12% -5%, rgba(201,165,59,.06), transparent 60%), radial-gradient(1000px 700px at 100% 8%, rgba(165,86,68,.05), transparent 55%), var(--cream); background-repeat:no-repeat; } /* ============================================================ NAV ============================================================ */ /* sticky (Kat, Sept 17): solid cream so page grounds never show through the links, a gold hairline to seat it; anchors land below it, not under it */ .site-nav{position:sticky;top:0;z-index:40;background:var(--cream); border-bottom:1px solid rgba(201,165,59,.28)} html{scroll-padding-top:92px} .nav{max-width:1240px;margin:0 auto;padding:1.15rem 2rem; display:flex;align-items:center;justify-content:space-between;gap:1.5rem} .nav-logo{display:inline-flex;align-items:center} .nav-logo img,.nav-logo .lockup-nav{height:64px;width:auto;display:block} @media (max-width:640px){.nav-logo img,.nav-logo .lockup-nav{height:54px}} .nav-links{display:flex;align-items:center;gap:1.9rem;list-style:none;margin:0;padding:0} .nav-links a{font-family:var(--ui);font-weight:500;font-size:.92rem;color:var(--olive); white-space:nowrap; text-decoration:none;letter-spacing:.01em;transition:color .18s var(--ease)} .nav-links a:hover{color:var(--terracotta)} .nav-links a[aria-current="page"]{color:var(--terracotta)} .nav-cta{padding:.55rem 1.25rem !important;font-size:.9rem !important} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem; color:var(--olive)} .nav-toggle svg{display:block} /* ============================================================ BUTTONS (extend brand-tokens .btn-* with hover + secondary) ============================================================ */ .btn-terra:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(86,72,35,.18)} .btn-ghost:hover{transform:translateY(-2px);border-color:var(--olive)} .btn-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:1.9rem} .center .btn-row{justify-content:center} /* ============================================================ HERO ============================================================ */ .hero{padding:3.5rem 0 5rem} .hero-card{ position:relative;max-width:820px;margin:0 auto;text-align:center; background:linear-gradient(180deg,rgba(251,246,240,.9),rgba(248,241,234,.72)); border:1px solid rgba(201,165,59,.28); border-radius:4px; padding:3.5rem 2.5rem 3rem; box-shadow:0 24px 60px rgba(86,72,35,.12); } .hero-mark{width:74px;height:74px;margin:0 auto 1.6rem} .hero h1{font-family:var(--display);font-size:clamp(2.1rem,6vw,3.1rem); line-height:1.12;color:var(--olive);letter-spacing:.005em} .hero h1 .amp{color:var(--terracotta)} .hero .lede{margin:1.5rem auto 0;font-size:1.12rem;max-width:52ch} /* ============================================================ EYEBROWS / SECTION HEADS (extend tokens) ============================================================ */ .eyebrow{margin-bottom:.9rem} .section h2{font-family:var(--display);color:var(--olive); font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.14;letter-spacing:.005em} .section h2 .accent{color:var(--terracotta)} /* ============================================================ EQUATION CARDS (Human × AI = Gold) — used on both pages ============================================================ */ .equation{display:grid;grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch;gap:1rem;margin-top:2.6rem} .eq-card{background:var(--cream-card);border-radius:4px;padding:1.9rem 1.6rem; box-shadow:0 16px 40px rgba(86,72,35,.10);border:1px solid rgba(86,72,35,.06); transition:transform .2s var(--ease),box-shadow .2s} .eq-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(86,72,35,.16)} .eq-card--gold{box-shadow:0 0 0 2px var(--gold),0 16px 40px rgba(86,72,35,.14); background:linear-gradient(180deg,#fbf6ee,#f8efe2)} .eq-card .stat-label{margin-bottom:.7rem} .eq-card h3{font-family:var(--display);color:var(--olive);font-size:1.35rem; margin-bottom:.7rem;line-height:1.2} .eq-card p{color:var(--olive-90);font-size:.98rem;line-height:1.6} .eq-op{display:flex;align-items:center;justify-content:center; font-family:var(--display);font-size:2rem;color:var(--terracotta);opacity:.8} /* ============================================================ STATS BAND ============================================================ */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.4rem; text-align:center} .stat .num{font-family:var(--display);font-size:clamp(2.2rem,4vw,2.9rem); color:var(--terracotta);line-height:1;letter-spacing:.01em} .stat .stat-label{margin-top:.7rem} .highlight-stat{margin-top:2.6rem;text-align:center; background:var(--cream-card);border-radius:4px;padding:2.4rem 2rem; box-shadow:0 16px 40px rgba(86,72,35,.11)} .highlight-stat .display-num{font-size:3.2rem} .highlight-stat .stat-label{margin-top:.6rem} .highlight-stat p{margin-top:1rem;color:var(--olive-90);max-width:48ch; margin-left:auto;margin-right:auto} /* ============================================================ WAYS TO WORK (2-card) ============================================================ */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.6rem} .way{background:var(--cream-card);border-radius:4px;padding:2.2rem; box-shadow:0 16px 40px rgba(86,72,35,.11);border:1px solid rgba(86,72,35,.06); display:flex;flex-direction:column} .way--accent{box-shadow:0 0 0 2px var(--gold),0 16px 40px rgba(86,72,35,.13)} .way .kicker{font-family:var(--ui);font-weight:600;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta); display:block;margin-bottom:.5rem} .way h3{font-family:var(--display);font-size:1.7rem;color:var(--olive);margin-bottom:.8rem} .way p{color:var(--olive-90);line-height:1.6} .way .note{margin-top:1.2rem;font-style:italic;color:var(--olive-72); font-size:.95rem;border-top:1px solid rgba(86,72,35,.12);padding-top:1.1rem} .tier-cue{margin-top:1.8rem;text-align:center;color:var(--olive-72); font-size:.98rem;font-style:italic} /* ============================================================ OFFERINGS (6-card numbered) ============================================================ */ .split-head{display:flex;justify-content:space-between;align-items:flex-end; gap:2rem;flex-wrap:wrap} .split-head .lede{margin-top:0;text-align:left} .offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.6rem} .offer{background:var(--cream-card);border-radius:4px;padding:1.8rem; box-shadow:0 12px 32px rgba(86,72,35,.09);border:1px solid rgba(86,72,35,.06); transition:transform .2s var(--ease),box-shadow .2s} .offer:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(86,72,35,.15)} .offer .onum{font-family:var(--display);font-size:1.4rem;color:var(--gold); line-height:1} .offer .mini-label{margin:.4rem 0 .7rem} .offer h3{font-family:var(--display);font-size:1.3rem;color:var(--olive);margin-bottom:.6rem} .offer p{color:var(--olive-90);font-size:.96rem;line-height:1.55} /* ============================================================ LABS BAND ============================================================ */ .labs{background:linear-gradient(180deg,#faf3ec,#f6ecdf); border-top:1px solid rgba(201,165,59,.25);border-bottom:1px solid rgba(201,165,59,.25)} .labs-lockup{height:34px;width:auto;margin-bottom:1.6rem} /* ---- real lockup artwork (ag-stacked.svg / labs-stacked.svg) ---- The wordmark is outlined Marcellus inside the SVG, gold-outlined and set on two lines (ALKEMIA over GROWTH) per Visual Identity Sheet §01. It is NOT rebuilt from live text; .brand-stack below is kept only for legacy use. */ .lockup{display:block;width:auto;margin:0 auto} /* The stacked lockup is tall and narrow; the horizontal Labs lockup is wide and short. Size them off different heights so they read at the same weight. */ .lockup--hero{height:168px;margin-bottom:1.4rem} .lockup--labs.lockup--hero{height:82px} .lockup--band{margin-bottom:1.8rem} .lockup--labs.lockup--band{height:74px} @media (max-width:640px){ .lockup--hero{height:123px} .lockup--labs.lockup--hero{height:60px} .lockup--labs.lockup--band{height:54px} } /* ---- stacked brand lockup: device on top, wordmark below ---- */ .brand-stack{display:inline-flex;flex-direction:column;align-items:center;gap:.85rem} .brand-stack .device{display:block;width:auto;height:96px} .brand-stack .wm{font-family:var(--display);font-weight:400;text-transform:uppercase; letter-spacing:.17em;font-size:1.8rem;line-height:1;white-space:nowrap} .brand-stack .wm .a{color:var(--olive)} /* ALKEMIA */ .brand-stack .wm .g{color:var(--terracotta)}/* GROWTH */ .brand-stack .wm .l{color:var(--terracotta)}/* LABS */ /* Labs lockup a touch smaller than the Growth hero lockup */ .labs .brand-stack{margin-bottom:1.8rem;gap:1rem} .labs .brand-stack .device{height:120px} .labs .brand-stack .wm{font-size:2.1rem} .labs .hierarchy{color:var(--olive-72);font-size:.98rem;font-style:italic; margin-bottom:1.2rem;max-width:60ch} .labs h2{margin-bottom:1rem} .labs .lede{margin-bottom:2rem} .skale-card{background:var(--cream-card);border-radius:4px;padding:2rem; box-shadow:0 0 0 2px var(--gold),0 16px 40px rgba(86,72,35,.13);max-width:640px} .skale-card .kicker{font-family:var(--ui);font-weight:600;font-size:.7rem; letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);display:block} .skale-card h3{font-family:var(--display);font-size:1.8rem;color:var(--olive); margin:.4rem 0 .3rem} .skale-card .tag{color:var(--olive-72);font-style:italic;margin-bottom:.9rem} .skale-card p{color:var(--olive-90);line-height:1.6;margin-bottom:1.3rem} .labs-link{display:inline-block;margin-top:1.6rem;font-family:var(--ui); font-weight:600;font-size:.9rem;letter-spacing:.04em;color:var(--terracotta); text-decoration:none;border-bottom:1px solid rgba(165,86,68,.4);padding-bottom:1px} /* ============================================================ PRODUCTS GRID (v127 Labs — "Our products") ============================================================ */ .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2.6rem} /* Labs ships two products today — sKale and ForeKast, the forecasting add-on. */ .product-grid--duo{grid-template-columns:repeat(2,1fr);max-width:880px;margin-left:auto;margin-right:auto} .product{background:var(--cream-card);border-radius:4px;padding:1.9rem; box-shadow:0 14px 36px rgba(86,72,35,.10);border:1px solid rgba(86,72,35,.06); display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s} .product--live{box-shadow:0 0 0 2px var(--gold),0 16px 40px rgba(86,72,35,.14)} .product:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(86,72,35,.16)} .product-top{display:flex;align-items:center;justify-content:space-between; gap:.8rem;margin-bottom:1rem} .product .house{font-family:var(--ui);font-weight:600;font-size:.64rem; letter-spacing:.16em;text-transform:uppercase;color:var(--olive-62)} .pill{font-family:var(--ui);font-weight:600;font-size:.6rem;letter-spacing:.12em; text-transform:uppercase;padding:.28rem .6rem;border-radius:2px;white-space:nowrap} .pill--live{background:var(--gold);color:var(--olive)} .pill--soon{background:transparent;color:var(--olive-72); border:1px solid rgba(86,72,35,.32)} .product h3{font-family:var(--display);font-size:1.6rem;color:var(--olive);margin-bottom:.25rem} .product .tag{font-family:var(--ui);font-size:.82rem;color:var(--terracotta); font-weight:500;margin-bottom:.8rem} .product p{color:var(--olive-90);font-size:.95rem;line-height:1.55;margin-bottom:1rem} .product .prod-foot{margin-top:auto} .product .soon-note{font-style:italic;color:var(--olive-62);font-size:.85rem} .product .labs-link{margin-top:0} /* ============================================================ WAYS-TO-WORK CTA BLOCK (v127) ============================================================ */ .ways-cta{margin-top:2.2rem;text-align:center;background:var(--cream-card); border-radius:4px;padding:2.2rem;box-shadow:0 14px 36px rgba(86,72,35,.10)} .ways-cta p{color:var(--olive-90);max-width:52ch;margin:0 auto 1.3rem;line-height:1.6} /* ============================================================ ABOUT / QUOTES ============================================================ */ .quote-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.6rem} .qcard{background:var(--cream-card);border-radius:4px;padding:2rem; box-shadow:0 16px 40px rgba(86,72,35,.10);display:flex;flex-direction:column; text-decoration:none} .qcard blockquote{margin:0;font-family:var(--display);font-size:1.18rem; color:var(--olive);line-height:1.5;font-style:italic} .qcite{display:flex;align-items:center;gap:.9rem;margin-top:1.4rem} /* align the two founder photos: push each cite row to the card bottom */ .quote-duo .qcard{height:100%} .quote-duo .qcite{margin-top:auto;padding-top:1.4rem} .about-body{margin:2rem auto 0;color:var(--olive-90);max-width:62ch; line-height:1.65;text-align:center} /* ---- avatar (gold ring) — brand avatar-ring + initials fallback ---- */ .avatar{width:56px;height:56px;border-radius:50%;flex:0 0 auto; background:var(--cream);padding:3px; box-shadow:0 0 0 2px var(--gold),0 8px 18px rgba(86,72,35,.18)} .avatar-inner{width:100%;height:100%;border-radius:50%; background:linear-gradient(135deg,#e9ddc7,#d8c39a); display:flex;align-items:center;justify-content:center; font-family:var(--display);color:var(--olive);font-size:1.15rem; border:3px solid var(--cream)} .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover; border:3px solid var(--cream)} .qname{font-family:var(--ui);font-weight:600;font-size:.95rem;color:var(--olive)} .qrole{font-family:var(--ui);font-size:.75rem;letter-spacing:.06em; text-transform:uppercase;color:var(--olive-62);margin-top:.15rem} /* ============================================================ TESTIMONIALS ============================================================ */ .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.6rem} .testi{background:var(--cream-card);border-radius:4px;padding:1.9rem; box-shadow:0 14px 36px rgba(86,72,35,.10);display:flex;flex-direction:column} .testi blockquote{margin:0 0 1.3rem;font-family:var(--display);font-size:1.02rem; color:var(--ink);line-height:1.55;font-style:italic} .testi .qcite{margin-top:auto} /* ============================================================ WARM CLOSING BAND ------------------------------------------------------------ The last band before the footer is light again, the way it was in the earlier build: the rust-to-cream texture reads through a cream scrim, so the page warms up on the way out instead of going dark twice in a row. Type is set in olive and ink. ============================================================ */ .closing{background:var(--cream);color:var(--ink);text-align:center; padding:5rem 0;border-top:1px solid rgba(201,165,59,.35)} .closing::before{content:"";position:absolute} .closing .eyebrow{color:var(--terracotta)} .closing h2{color:var(--olive);font-family:var(--display); font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.15} .closing p{color:var(--ink);max-width:48ch;margin:1.2rem auto 0;line-height:1.6} .closing .next-line{margin-top:1.8rem;font-size:.92rem;color:rgba(61,51,24,.72); font-style:italic;max-width:52ch} .btn-gold--onDark:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.28)} /* ============================================================ WHO-WE-ARE : STORY ============================================================ */ .story{display:grid;grid-template-columns:280px 1fr;gap:3rem;align-items:start} .story-portrait{position:sticky;top:2rem} .portrait-ring{width:220px;height:220px;border-radius:50%;padding:5px; background:var(--cream);box-shadow:0 0 0 2px var(--gold),0 16px 34px rgba(86,72,35,.2); margin:0 auto} .portrait-ring .avatar-inner{font-size:3rem} .portrait-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover; border:3px solid var(--cream);display:block} .story-cap{text-align:center;margin-top:1.1rem} .story-cap .name{font-family:var(--display);font-size:1.3rem;color:var(--olive)} .story-cap .role{font-family:var(--ui);font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;color:var(--olive-62);margin-top:.2rem} .story-body h2{margin-bottom:1.4rem} .story-body p{color:var(--ink);line-height:1.75;margin-bottom:1.1rem;max-width:60ch} .story-signoff{font-family:var(--display);font-style:italic;color:var(--terracotta); font-size:1.15rem;margin-top:1.6rem} /* ============================================================ WHO-WE-ARE : TEAM ============================================================ */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2.6rem} .member{background:var(--cream-card);border-radius:4px;padding:1.8rem 1.5rem;text-align:center; box-shadow:0 16px 40px rgba(86,72,35,.10)} .member .avatar{width:88px;height:88px;margin:0 auto 1.2rem} .member .avatar-inner{font-size:1.5rem} .member h3{font-family:var(--display);font-size:1.3rem;color:var(--olive)} .member .role{font-family:var(--ui);font-size:.72rem;letter-spacing:.08em; text-transform:uppercase;color:var(--terracotta);margin:.4rem 0 1rem} .member p{color:var(--olive-90);font-size:.96rem;line-height:1.6} .member .meet{display:inline-block;margin-top:1.1rem;font-family:var(--ui); font-weight:600;font-size:.82rem;letter-spacing:.04em;color:var(--terracotta); text-decoration:none;transition:transform .18s var(--ease)} .member .meet:hover{transform:translateX(3px)} /* ============================================================ BIOS PAGE ("Meet the Team") ============================================================ */ .bios-hero{text-align:center;padding:4rem 0 1rem} .bios-hero .lede{margin:1.2rem auto 0} .bio-list{max-width:900px;margin:0 auto;padding:1rem 0 2rem} .bio{display:grid;grid-template-columns:210px 1fr;gap:2.8rem;align-items:start; padding:3.2rem 0;border-top:1px solid rgba(86,72,35,.14)} .bio-photo{width:200px;height:200px;border-radius:50%;padding:5px;background:var(--cream); box-shadow:0 0 0 2px var(--gold),0 16px 34px rgba(86,72,35,.2)} .bio-photo img{width:100%;height:100%;border-radius:50%;object-fit:cover; border:3px solid var(--cream);display:block} .bio-body h2{font-family:var(--display);font-size:1.8rem;color:var(--olive);margin-bottom:.2rem} .bio-body .role{font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;color:var(--terracotta);margin-bottom:1.2rem} .bio-body p{color:var(--ink);line-height:1.75;margin-bottom:1rem;max-width:62ch} .bio-body .soon{font-style:italic;color:var(--olive-62);font-size:.95rem} .bio-body .back{display:inline-block;margin-top:.6rem;font-family:var(--ui); font-weight:600;font-size:.82rem;letter-spacing:.03em;color:var(--olive-72); text-decoration:none} .bio-body .back:hover{color:var(--terracotta)} /* ============================================================ WHO-WE-ARE : CLAIM ============================================================ */ .claim{text-align:center;padding:4.5rem 0} .claim .statement{font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.1rem); color:var(--olive);line-height:1.35;max-width:24ch;margin:1rem auto 0} .claim .statement span{color:var(--terracotta)} /* ============================================================ WHO-WE-ARE : VALUES ============================================================ */ .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.6rem} .value{padding:1.6rem;border:1px solid rgba(86,72,35,.14);border-radius:4px; background:rgba(251,246,240,.5)} .value h3{font-family:var(--display);font-size:1.2rem;color:var(--olive); margin-bottom:.5rem} .value p{color:var(--olive-90);font-size:.95rem;line-height:1.55} /* ============================================================ FOOTER (dark — extends brand-tokens .site-footer) ============================================================ */ .site-footer{margin-top:0} .foot-wrap{align-items:flex-start} .foot-brand img,.foot-brand .lockup-foot{height:56px;width:auto;margin-bottom:1rem;display:block} .foot-nav{display:flex;flex-wrap:wrap;gap:1.1rem 1.6rem;list-style:none;margin:0;padding:0} .foot-nav a{font-family:var(--ui);font-size:.9rem;color:var(--cream-90); text-decoration:none} .foot-nav a:hover{color:var(--cream)} .foot-more{margin-top:1.3rem;font-family:var(--ui);font-size:.82rem;color:var(--cream-72)} .foot-more .lbl{letter-spacing:.06em} .foot-pending{color:var(--cream-72);border-bottom:1px solid var(--gold-glow); padding-bottom:1px;margin-left:.5rem} .foot-tag{margin-top:1.8rem;font-family:var(--display);font-style:italic; font-size:.85rem;color:var(--cream-72);max-width:52ch} .foot-copy{margin-top:1rem;font-family:var(--ui);font-size:.74rem; letter-spacing:.02em;color:var(--cream-72)} /* ============================================================ ART DIRECTION — GROUNDS AND RHYTHM (v2, Sep 2026) ------------------------------------------------------------ Replaces the first texture pass. Two things were wrong with it: 1. THE PICTURES WERE INVISIBLE. Every ground sat under a flat cream wash at .80–.90 alpha, which is opaque enough that the leaves, water and reeds read as nothing at all. A flat alpha wash is also the worst tool for the job — it lifts the blacks and flattens the photograph into haze. The grounds below use MULTIPLY blending (the olive is multiplied into the picture, so texture and contrast survive while the value drops) and DIRECTIONAL scrims (opaque where the words are, open where they aren't), so the imagery is actually seen. 2. EVERY PAGE READ AS THE SAME PAGE. Below the hero, each page ran the same sequence of cream sections over cream ground. The heroes are unchanged — the translucent card stays, and the lockup keeps its own colours over it — but each page now runs its own sequence of grounds beneath: which frame, carried light or dark, blooming from which side, and where a strip of full-bleed photography breaks the rhythm. No page repeats another page's order, and no neighbouring sections repeat a frame. See "PER-SECTION GROUNDS" and "IMAGE DIVIDERS". Imagery register per Visual Identity Sheet §05: leaves, water, reeds, the lotus form. All fifteen frames in assets/img/bg are in use. team-team-wash is the one desk frame in the library, so it sits behind the enquiry form on contact.html, carried very quietly — the only place on the site where a literal working photograph is the right picture. ============================================================ */ .tex{background-position:center;background-size:cover;background-repeat:no-repeat} /* ---- ground recipes ------------------------------------------------- .ground-deep photograph carried dark, cream type over it. The olive is MULTIPLIED into the picture rather than washed over it, so a pale sand or water frame goes deep without going muddy. .ground-light photograph felt under a cream page. The scrim fades to solid cream at the top and bottom seams so sections meet without a hard edge, and opens in the middle so the picture is visible. .ground-side photograph blooms on one side, cream on the other. Words sit on the cream half. This is how a ground can be strong AND legible at the same time. -------------------------------------------------------------------- */ .ground-deep{ background-color:#4a3f1d; background-blend-mode:multiply,normal; background-position:center;background-size:cover;background-repeat:no-repeat; color:var(--cream); } .ground-light,.ground-side{ background-position:center;background-size:cover;background-repeat:no-repeat; } /* the shared scrim shapes, so each ground only has to name its picture */ .ground-deep{background-image: linear-gradient(180deg,rgba(52,44,20,.42),rgba(38,32,14,.72)), var(--pic)} .ground-light{background-image: linear-gradient(180deg, var(--cream) 0%, rgba(248,241,234,.90) 14%, rgba(248,241,234,.66) 50%, rgba(248,241,234,.90) 86%, var(--cream) 100%), var(--pic)} .ground-side{background-image: linear-gradient(96deg, var(--cream) 0%, rgba(248,241,234,.95) 34%, rgba(248,241,234,.72) 58%, rgba(248,241,234,.34) 80%, rgba(248,241,234,.16) 100%), var(--pic)} .ground-side--flip{background-image: linear-gradient(264deg, var(--cream) 0%, rgba(248,241,234,.95) 34%, rgba(248,241,234,.72) 58%, rgba(248,241,234,.34) 80%, rgba(248,241,234,.16) 100%), var(--pic)} /* type set straight on a photograph gets a whisper of shadow so it holds its edge over the busy parts of the frame */ .ground-deep h1,.ground-deep h2,.ground-deep h3,.ground-deep p, .ground-deep .eyebrow,.ground-deep .mini-label,.ground-deep blockquote{ text-shadow:0 1px 12px rgba(28,23,8,.45)} .ground-deep h1,.ground-deep h2{color:var(--cream)} .ground-deep p,.ground-deep .lede{color:var(--cream-90)} .ground-deep .eyebrow,.ground-deep .mini-label{color:var(--gold)} .ground-deep .accent{color:var(--gold)} /* .section h2 .accent (0,2,1) outranks .ground-deep .accent (0,2,0), so a .section carrying a dark ground kept terracotta on the picture. Raised. */ .section.ground-deep h2 .accent{color:var(--gold)} .ground-deep .stat-label{color:var(--cream-72)} .ground-deep a:not([class]){color:var(--gold)} /* ---- the picture library ------------------------------------------- One custom property per frame. A section picks its ground recipe and its picture separately, which is why no two neighbours below repeat. -------------------------------------------------------------------- */ .pic-leaves {--pic:url(../img/bg/home-hero-3f3d2e.jpg)} /* dark leaf canopy */ .pic-leaves-2 {--pic:url(../img/bg/team-claim-leaves-26c381.webp)}/* second leaf frame */ .pic-rings {--pic:url(../img/bg/home-about-137c61.jpg)} /* concentric growth rings */ .pic-dune {--pic:url(../img/bg/home-path-b302b6.jpg)} /* the curve of a dune */ .pic-water {--pic:url(../img/bg/team-hero-water-109e24.webp)} /* light on water */ .pic-shallows {--pic:url(../img/bg/home-delivered-d24fba.webp)} /* clear water over sand */ .pic-reeds {--pic:url(../img/bg/home-nature-baab9c.jpg)} /* reeds and reflection */ .pic-reeds-2 {--pic:url(../img/bg/team-story-reeds-a8b55d.webp)} .pic-shore {--pic:url(../img/bg/home-bg-27f98c.jpg)} /* water meeting sand */ .pic-ripples {--pic:url(../img/bg/home-testi-260583.jpg)} /* sand under gold light */ .pic-ocean {--pic:url(../img/bg/team-cta-ocean-e4edf4.webp)} .pic-dusk {--pic:url(../img/bg/home-closing-54ce6c.jpg)} /* the warm close */ .pic-grasses {--pic:url(../img/bg/home-dpanel-3cb6a2.jpg)} .pic-pillars {--pic:url(../img/bg/team-pillars-bg-d33de2.webp)} /* a deeper cut of .ground-deep, for the two closing bands where the picture should recede furthest behind the words */ .ground-deep--heavy{background-image: linear-gradient(180deg,rgba(52,44,20,.62),rgba(34,28,12,.84)), var(--pic)} /* and a lighter cut, for the dark leaf frames that are already dark */ .ground-deep--open{background-image: linear-gradient(180deg,rgba(52,44,20,.18),rgba(38,32,14,.56)), var(--pic)} /* ============================================================ HERO GROUNDS — unchanged from the first build ------------------------------------------------------------ Each hero keeps its own frame under the translucent card. These scrims are deliberately left exactly as they were: the card is what carries the legibility, and the lockup keeps its olive and terracotta over it. ============================================================ */ .hero.tex-hero{background:var(--olive) center/cover no-repeat; background-image: linear-gradient(180deg,rgba(86,72,35,.30),rgba(86,72,35,.46)), url(../img/bg/home-hero-3f3d2e.jpg)} .closing.tex-closing{background:var(--cream) center/cover no-repeat} /* The Difference — concentric growth rings, for what compounds. */ .hero.tex-hero.tex--difference{background-image: linear-gradient(180deg,rgba(86,72,35,.66),rgba(86,72,35,.78)), url(../img/bg/home-about-137c61.jpg)} /* Full Service — dense leaf canopy, for the work carried for you. */ .hero.tex-hero.tex--services{background-image: linear-gradient(180deg,rgba(86,72,35,.34),rgba(86,72,35,.52)), url(../img/bg/team-claim-leaves-26c381.webp)} /* Labs — water reading light, for the intelligence that reads signal. */ .hero.tex-hero.tex--labs{background-image: linear-gradient(180deg,rgba(86,72,35,.64),rgba(86,72,35,.77)), url(../img/bg/team-hero-water-109e24.webp)} /* Growth Stories — a shoreline, for distance travelled. */ .hero.tex-hero.tex--stories{background-image: linear-gradient(180deg,rgba(86,72,35,.64),rgba(86,72,35,.76)), url(../img/bg/home-dpanel-3cb6a2.jpg)} /* Who We Are — reeds at the water's edge. Growth is in our nature. */ .hero.tex-hero.tex--who{background-image: linear-gradient(180deg,rgba(86,72,35,.62),rgba(86,72,35,.75)), url(../img/bg/home-nature-baab9c.jpg)} /* ============================================================ IMAGE DIVIDERS A full-bleed strip of the brand photography between two sections. It carries no words — it is there to let the imagery breathe and to stop three cream sections running into each other. ============================================================ */ .band-image{height:230px;background-position:center;background-size:cover; background-repeat:no-repeat;position:relative; border-top:1px solid rgba(201,165,59,.35); border-bottom:1px solid rgba(201,165,59,.35)} .band-image--tall{height:320px} /* the mark, centred and quiet, on the strip */ .band-image .band-mark{position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);width:52px;height:52px;opacity:.92; filter:drop-shadow(0 2px 10px rgba(24,20,6,.45))} @media (max-width:640px){.band-image{height:170px}.band-image--tall{height:210px}} /* ============================================================ PER-SECTION GROUNDS Each named ground is a recipe + a picture. Neighbours never share a picture, and no page runs two of the same recipe back to back — that is what stops the pages reading as one page. ============================================================ */ /* -- dark bands -- */ .closing{position:relative} /* the closing band: the rust-to-cream frame, held back just far enough that the words sit on cream while the warm streak still shows */ .closing.tex-closing{background-color:var(--cream);background-blend-mode:normal,normal; background-position:center top;background-size:cover;background-repeat:no-repeat; background-image:linear-gradient(180deg,rgba(248,241,234,.42) 0%, rgba(248,241,234,.62) 45%,rgba(248,241,234,.86) 100%), url(../img/bg/home-closing-54ce6c.jpg)} .site-footer.tex-footer{background-color:#4a3f1d;background-blend-mode:multiply,normal; background-position:center;background-size:cover;background-repeat:no-repeat; background-image:linear-gradient(180deg,rgba(52,44,20,.68),rgba(34,28,12,.86)), url(../img/bg/home-bg-27f98c.jpg)} /* -- light section grounds: the picture is now visible in all of them -- */ .tex-difference{background-image: linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.90) 14%, rgba(248,241,234,.64) 50%,rgba(248,241,234,.90) 86%,var(--cream) 100%), url(../img/bg/home-about-137c61.jpg)} .tex-delivered{background-image: linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.88) 14%, rgba(248,241,234,.60) 50%,rgba(248,241,234,.88) 86%,var(--cream) 100%), url(../img/bg/home-delivered-d24fba.webp)} .tex-path{background-image: linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.90) 14%, rgba(248,241,234,.62) 50%,rgba(248,241,234,.90) 86%,var(--cream) 100%), url(../img/bg/home-path-b302b6.jpg)} .tex-about{background-image: linear-gradient(96deg,var(--cream) 0%,rgba(248,241,234,.94) 38%, rgba(248,241,234,.66) 66%,rgba(248,241,234,.30) 100%), url(../img/bg/home-delivered-d24fba.webp)} .tex-testi{background-image: linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.88) 14%, rgba(248,241,234,.58) 50%,rgba(248,241,234,.88) 86%,var(--cream) 100%), url(../img/bg/home-testi-260583.jpg)} .tex-story{background-image: linear-gradient(264deg,var(--cream) 0%,rgba(248,241,234,.95) 36%, rgba(248,241,234,.68) 64%,rgba(248,241,234,.28) 100%), url(../img/bg/team-story-reeds-a8b55d.webp)} .tex-team{background-image: linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.90) 14%, rgba(248,241,234,.64) 50%,rgba(248,241,234,.90) 86%,var(--cream) 100%), url(../img/bg/team-pillars-bg-d33de2.webp)} .tex-claim{background-image: linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.88) 14%, rgba(248,241,234,.58) 50%,rgba(248,241,234,.88) 86%,var(--cream) 100%), url(../img/bg/home-about-137c61.jpg)} .tex-bios{background-image: linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.88) 16%, rgba(248,241,234,.60) 52%,rgba(248,241,234,.92) 88%,var(--cream) 100%), url(../img/bg/team-pillars-bg-d33de2.webp)} .tex-contact{background-image: linear-gradient(96deg,var(--cream) 0%,rgba(248,241,234,.95) 34%, rgba(248,241,234,.70) 60%,rgba(248,241,234,.26) 100%), url(../img/bg/team-cta-ocean-e4edf4.webp)} .tex-tools{background-image: linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.90) 14%, rgba(248,241,234,.62) 50%,rgba(248,241,234,.90) 86%,var(--cream) 100%), url(../img/bg/home-delivered-d24fba.webp)} /* the Labs cream band keeps its gradient, with the rings showing through */ .labs{background-image: linear-gradient(180deg,rgba(250,243,236,.94),rgba(246,236,223,.94)), url(../img/bg/home-about-137c61.jpg); background-position:center;background-size:cover;background-repeat:no-repeat} /* the olive "where it sits" band now carries a photograph too */ /* the contact page's own sections */ .contact-strip{background-color:#4a3f1d;background-blend-mode:multiply,normal; background-position:center;background-size:cover;background-repeat:no-repeat; background-image:linear-gradient(180deg,rgba(52,44,20,.62),rgba(34,28,12,.82)), url(../img/bg/home-bg-27f98c.jpg)} .contact-main{background-image: linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.94) 20%, rgba(248,241,234,.80) 55%,var(--cream) 100%), url(../img/bg/team-pillars-bg-d33de2.webp); background-position:center;background-size:cover;background-repeat:no-repeat} .contact-close{background-image: linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.88) 18%, rgba(248,241,234,.62) 55%,var(--cream) 100%), url(../img/bg/home-delivered-d24fba.webp); background-position:center;background-size:cover;background-repeat:no-repeat} /* the stories band goes deeper still, and keeps its leaf ground */ .stories-band{background-color:#463a1c;background-blend-mode:multiply,normal; background-image:linear-gradient(180deg,rgba(52,44,20,.66),rgba(34,28,12,.86)), url(../img/bg/team-claim-leaves-26c381.webp)} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:900px){ .equation{grid-template-columns:1fr;gap:.9rem} .eq-op{padding:.2rem 0;font-size:1.5rem} .stats{grid-template-columns:1fr} .duo,.quote-duo{grid-template-columns:1fr} .offer-grid,.testi-grid,.team-grid,.values-grid,.product-grid{grid-template-columns:1fr 1fr} .story{grid-template-columns:1fr;gap:2rem} .story-portrait{position:static} .bio{grid-template-columns:1fr;gap:1.4rem;justify-items:center;text-align:center} .bio-body p{text-align:left} } /* ---- nav collapse ---------------------------------------------------- The horizontal nav needs ~1100px to sit on one line. Below that the labels used to break mid-item ("The / Difference") while the hamburger did not appear until 640px, so every width in between rendered a two- and three-line nav. The collapse now runs at the width where the row actually stops fitting. Section brief §2: do not ship a nav that wraps. */ @media (max-width:1100px){ .nav-links{ display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:flex-start;gap:1rem; background:var(--cream-card);padding:1.4rem 2rem; box-shadow:0 20px 40px rgba(86,72,35,.16);z-index:30} .nav-links.open{display:flex} .nav-toggle{display:inline-flex} } @media (max-width:640px){ .wrap{padding:0 1.3rem} .section{padding:4rem 0} .offer-grid,.testi-grid,.team-grid,.values-grid,.product-grid{grid-template-columns:1fr} .hero-card{padding:2.6rem 1.5rem} .split-head{flex-direction:column;align-items:flex-start} } /* ============================================================ LABS PAGE (labs.html) — page-scoped additions (v9) ============================================================ */ /* Per-card frame colors. The homepage only ships .product--live (gold ring). labs.html gives each in-development product its one palette color as a frame ring, matching the --live treatment: color in the frame, never behind text. */ .product--terra{box-shadow:0 0 0 2px var(--terracotta),0 16px 40px rgba(86,72,35,.14)} .product--olive{box-shadow:0 0 0 2px var(--olive),0 16px 40px rgba(86,72,35,.14)} .product--brass{box-shadow:0 0 0 2px #8A7A4A,0 16px 40px rgba(86,72,35,.14)} /* ForeKast — #8A7A4A proposed, Kat to confirm */ /* "Where Labs sits" — short olive band. Onest kicker labels, Marcellus body. */ .labs-sits{color:var(--cream);padding:4.5rem 0} .labs-sits .eyebrow{color:var(--gold)} .labs-sits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;margin-top:1.4rem} .labs-sits .kicker{display:block;font-family:var(--ui);font-weight:600;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem} .labs-sits p{font-family:var(--display);color:var(--cream-90);font-size:1.12rem;line-height:1.5} @media (max-width:820px){.labs-sits-grid{grid-template-columns:1fr;gap:1.4rem}} /* ============================================================ GROWTH STORIES PAGE (growth-stories.html) — page-scoped (v10) Builds ON the shared .testi-grid / .testi / .qcite / .avatar. The only new thing is the locked deep-olive story band + floating cream cards, unique to this page and the reason it earns the click over the light homepage #testimonials band. ============================================================ */ /* Deep-olive band: real leaf photo under an olive wash. context v2's leavesAG.webp is not in assets/; using the shipped leaf photo team-claim-leaves-26c381.webp under the specified #564823 -> #463A1C wash at ~94-95% so the band reads deeper than the homepage band. */ .stories-band{position:relative; background: linear-gradient(180deg,rgba(86,72,35,.94),rgba(70,58,28,.95)), url(../img/bg/team-claim-leaves-26c381.webp); background-position:center;background-size:cover;background-repeat:no-repeat; padding:5.5rem 0} .stories-band .section-head{max-width:64ch;margin:0 auto} .stories-band .eyebrow{color:#F4BF5C;text-shadow:0 0 18px rgba(244,191,92,.45)} .stories-band h2{color:var(--cream)} .stories-band .band-lede{color:var(--cream-90);margin:1.1rem auto 0} /* floating cream cards — deeper shadow than the homepage band */ .stories-band .testi{position:relative;overflow:hidden;padding-top:2.3rem; box-shadow:0 26px 60px rgba(0,0,0,.34)} /* terracotta top-accent bar */ .stories-band .testi::before{content:"";position:absolute;top:0;left:0;right:0; height:4px;background:var(--terracotta)} /* pulled metric in terracotta display, above the quote — each one drawn straight from words inside its own quote */ .stories-band .testi .metric{font-family:var(--display);color:var(--terracotta); font-size:1.5rem;line-height:1.12;letter-spacing:.01em;margin-bottom:.9rem} .stories-band .testi blockquote{color:var(--ink)} .stories-band .testi .qname{color:var(--terracotta)} /* ============================================================ SERVICES PAGE (services.html) — offering cards (v10) Page-scoped. Modeled on .product (cream card, 4px radius, ~1.9rem padding, translateY lift on hover) minus the pills and house label, so the two grids read as siblings. .card is not in site.css, so no .card usage is invented here. Numeral is terracotta + Onest (small); heading olive display; body ink. Gold border appears on hover. (NB: an older, unrelated .offer/.offer-grid block above is dead CSS from the removed homepage offerings grid — not reused here.) ============================================================ */ .offering-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.6rem; text-align:left} .offering{background:var(--cream-card);border-radius:4px;padding:1.9rem; box-shadow:0 14px 36px rgba(86,72,35,.10);border:1px solid rgba(86,72,35,.06); display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s} .offering:hover{transform:translateY(-4px); box-shadow:0 0 0 2px var(--gold),0 18px 44px rgba(86,72,35,.16)} .offering .num{font-family:var(--ui);font-weight:600;font-size:.9rem;letter-spacing:.08em; color:var(--terracotta);line-height:1;margin-bottom:.7rem} .offering h3{font-family:var(--display);font-size:1.4rem;color:var(--olive); margin-bottom:.55rem;line-height:1.2} .offering p{color:var(--ink);font-size:.96rem;line-height:1.6} @media (max-width:900px){.offering-grid{grid-template-columns:1fr 1fr}} @media (max-width:640px){.offering-grid{grid-template-columns:1fr}} /* ---- offering-card variants: the sKale / Full Service / ForeKast pattern ---- Documented in the Visual Identity Sheet §04 (Component patterns). Three numbered cards with a colored top bar. sKale is the featured card: solid ink ground, gold top bar, an "Alkemia Labs" house tag in the numeral line, gold numeral and title. The other two stay light with a terracotta or sage bar. */ .offering{position:relative;overflow:hidden;padding-top:2.1rem} .offering::before{content:"";position:absolute;top:0;left:0;right:0;height:4px; background:var(--terracotta)} .offering--sage::before{background:var(--sage)} .offering--featured{background:var(--olive);border-color:transparent; box-shadow:0 0 0 2px var(--gold),0 18px 44px rgba(86,72,35,.18)} .offering--featured::before{background:var(--gold)} .offering--featured .num, .offering--featured h3{color:var(--gold)} .offering--featured p{color:var(--cream-90)} .offering--featured:hover{box-shadow:0 0 0 2px var(--gold),0 22px 52px rgba(86,72,35,.24)} .offering .note{margin-top:auto;padding-top:1.1rem;font-style:italic; font-size:.9rem;color:var(--olive-72);border-top:1px solid rgba(86,72,35,.12)} .offering--featured .note{color:var(--cream-72);border-top-color:rgba(248,241,234,.22)} .offering .prod-foot{margin-top:1.2rem} .offering .soon-note{font-style:italic;color:var(--olive-62);font-size:.85rem} .offering--featured .soon-note{color:var(--cream-72)} .offering .labs-link{margin-top:0} .offering--featured .labs-link{color:var(--gold);border-bottom-color:rgba(201,165,59,.5)} /* ---- the toolkit strip: Meta Ads / Google Ads / Creative Auditing & Testing ---- */ .toolkit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem; margin-top:2.2rem;text-align:left} .tool{background:var(--cream-card);border-radius:4px;padding:1.5rem 1.6rem; border:1px solid rgba(86,72,35,.10)} .tool .kicker{font-family:var(--ui);font-weight:600;font-size:.64rem; letter-spacing:.16em;text-transform:uppercase;color:var(--olive-62); display:block;margin-bottom:.5rem} .tool h3{font-family:var(--display);font-size:1.2rem;color:var(--olive); margin-bottom:.45rem} .tool p{color:var(--ink);font-size:.93rem;line-height:1.55} .toolkit-grid--duo{grid-template-columns:repeat(2,1fr)} @media (max-width:900px){.toolkit-grid{grid-template-columns:1fr}} /* ===================== CONTACT PAGE (contact.html) ===================== */ /* SECTION 1 — hero on cream */ .contact-hero{background:var(--cream);padding:5.5rem 2rem 2.5rem;text-align:center} .contact-hero-wrap{max-width:760px;margin:0 auto} .contact-hero .eyebrow{color:var(--terracotta);display:block;margin-bottom:1.2rem} .contact-hero h1{font-family:var(--display);font-size:clamp(2.1rem,4vw,3rem); color:var(--terracotta);line-height:1.14;margin-bottom:1.2rem} .contact-hero p{font-size:1.06rem;color:var(--ink);max-width:40rem;margin:0 auto} /* SECTION 2 — form + choice */ .contact-main{background:var(--cream);padding:2.5rem 2rem 5rem} .contact-main-wrap{max-width:1180px;margin:0 auto;display:grid; grid-template-columns:1.15fr .85fr;gap:2.4rem;align-items:start} .form-panel{background:var(--cream-card);border:1px solid rgba(86,72,35,.12); border-radius:4px;padding:2.6rem 2.4rem;box-shadow:0 18px 44px rgba(86,72,35,.08)} .form-panel > .eyebrow{color:var(--terracotta);display:block;margin-bottom:1.8rem} .contact-form .field{margin-bottom:1.25rem;display:flex;flex-direction:column} .contact-form label{font-family:var(--ui);font-weight:600;font-size:.82rem; letter-spacing:.02em;color:var(--olive);margin-bottom:.45rem} .contact-form .req{color:var(--terracotta)} .contact-form input, .contact-form select, .contact-form textarea{ font-family:var(--body);font-size:.98rem;color:var(--ink); background:var(--cream);border:1px solid rgba(86,72,35,.28); border-radius:2px;padding:.7rem .8rem;width:100%; transition:border-color .2s,box-shadow .2s} .contact-form select{font-family:var(--ui);font-size:.9rem} .contact-form textarea{resize:vertical;min-height:120px;line-height:1.5} .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{outline:none;border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,165,59,.22)} .contact-form .btn-gold{margin-top:.4rem;border:0;cursor:pointer} .contact-form .btn-gold[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none} .contact-form .btn-gold[disabled]:hover{transform:none;box-shadow:none} /* fallback line — small (brief §2) */ .form-fallback{font-family:var(--body);font-size:.9rem;color:rgba(61,51,24,.78); margin-top:1.2rem} .form-fallback a{color:var(--terracotta);border-bottom:1px solid var(--gold); padding-bottom:1px;text-decoration:none;transition:color .2s,border-color .2s} .form-fallback a:hover{color:var(--olive);border-color:var(--sage)} /* RIGHT — two ways */ .ways-panel > .eyebrow{color:var(--terracotta);display:block;margin-bottom:1.4rem} .ways-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;text-align:left;margin-top:0} .ways-panel .way{padding:1.8rem} .ways-panel .way h3{font-size:1.35rem;margin:.5rem 0 .6rem} .ways-panel .way p{font-size:.94rem;margin-bottom:.9rem} .ways-panel .way .labs-link{margin-top:0} .ways-note{font-family:var(--body);font-size:.96rem;color:rgba(61,51,24,.8); margin-top:1.4rem;text-align:center} /* SECTION 3 — olive contact strip */ .contact-strip{background:var(--olive);padding:2.4rem 2rem} .contact-strip-wrap{max-width:1180px;margin:0 auto;display:flex; align-items:baseline;gap:1rem;flex-wrap:wrap;justify-content:center} .strip-label{font-family:var(--ui);font-weight:600;font-size:.72rem; letter-spacing:.22em;text-transform:uppercase;color:rgba(248,241,234,.7)} .strip-email{font-family:var(--body);font-size:1.15rem;color:var(--cream); text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px; transition:color .2s,border-color .2s} .strip-email:hover{color:var(--sage);border-color:var(--sage)} /* SECTION 4 — close line */ .contact-close{background:var(--cream);text-align:center;padding:5rem 2rem 6rem} .contact-close p{font-family:var(--display);font-weight:500; font-size:clamp(1.5rem,2.8vw,2.1rem);color:var(--olive);line-height:1.3; max-width:36rem;margin:0 auto} /* spam honeypot — hidden from people, off the tab order; bots still fill it */ .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* inline submit status (success replaces form; error sits above it) */ .form-status{border-radius:3px;padding:1.4rem 1.5rem;margin-bottom:1.4rem;outline:none} .form-status h3{font-family:var(--display);font-size:1.5rem;color:var(--terracotta);margin-bottom:.5rem} .form-status p{font-family:var(--body);color:var(--ink);font-size:.98rem} .form-status-ok{background:rgba(178,179,114,.18);border:1px solid rgba(86,72,35,.18)} .form-status-err{background:rgba(165,86,68,.1);border:1px solid rgba(165,86,68,.4)} .form-status-err p{color:var(--olive)} @media (max-width:880px){ .contact-main-wrap{grid-template-columns:1fr;gap:2rem} .form-panel{padding:2rem 1.5rem} } /* ============================================================ FIELD NOTES (field-notes.html + field-notes/*.html) Page-scoped block per build context §4. Gold is hairline only — no card here takes a gold ground. Type discipline: .fn-meta, .fn-more and .post-meta are labels and run Onest; every other line in this block is a sentence and runs Marcellus. ============================================================ */ /* ---- index list ---- */ .fn-list{display:flex;flex-direction:column;gap:1.6rem;margin-top:3rem; max-width:820px;margin-left:auto;margin-right:auto;text-align:left} .fn-item{background:var(--cream-card);border-radius:4px;padding:2rem 2.1rem; border:1px solid rgba(86,72,35,.08);border-top:1px solid var(--gold); box-shadow:0 14px 36px rgba(86,72,35,.09); transition:transform .2s var(--ease),box-shadow .2s} .fn-item:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(86,72,35,.15)} .fn-meta{font-family:var(--ui);font-weight:500;font-size:.72rem;letter-spacing:.12em; text-transform:uppercase;color:var(--olive-62);margin-bottom:.7rem} .fn-title{font-family:var(--display);font-size:1.5rem;line-height:1.25; margin-bottom:.6rem} .fn-title a{color:var(--olive);text-decoration:none; border-bottom:1px solid transparent;transition:border-color .18s} .fn-title a:hover{border-bottom-color:var(--terracotta)} .fn-excerpt{font-family:var(--display);color:var(--ink);line-height:1.62; font-size:1rem} .fn-more{display:inline-block;margin-top:1.1rem;font-family:var(--ui); font-weight:600;font-size:.82rem;letter-spacing:.06em;color:var(--terracotta); text-decoration:none;transition:transform .18s var(--ease)} .fn-more:hover{transform:translateX(3px)} /* ---- post ---- */ .post-hero{padding:4.5rem 0 1.4rem;text-align:center} .post-hero h1{font-family:var(--display);font-size:clamp(2rem,4.4vw,3rem); color:var(--terracotta);line-height:1.14;margin:1.1rem auto 0;max-width:22ch} .post-meta{font-family:var(--ui);font-weight:500;font-size:.74rem; letter-spacing:.12em;text-transform:uppercase;color:var(--olive-62); margin-top:1.3rem} .post-wrap{max-width:720px;margin:0 auto;padding:0 2rem} /* The short-answer block. Answer engines lift this passage, so it is set apart deliberately: cream card, terracotta left rule, Marcellus, larger than body. Not a pull-quote — it is the answer. */ .post-answer{background:var(--cream-card);border-left:3px solid var(--terracotta); border-radius:0 4px 4px 0;padding:1.6rem 1.8rem;margin:2.4rem 0 2.8rem; box-shadow:0 12px 30px rgba(86,72,35,.08)} .post-answer p{font-family:var(--display);font-size:1.16rem;line-height:1.6; color:var(--ink);margin:0} .post-answer .mini-label{display:block;font-family:var(--ui);font-weight:600; font-size:.66rem;letter-spacing:.16em;text-transform:uppercase; color:var(--terracotta);margin-bottom:.6rem} .post-body{font-family:var(--display)} .post-body h2{font-family:var(--display);font-size:1.72rem;line-height:1.24; color:var(--olive);margin:2.9rem 0 1rem} .post-body h3{font-family:var(--display);font-size:1.3rem;color:var(--olive); margin:2.1rem 0 .8rem} .post-body p{font-family:var(--display);color:var(--ink);line-height:1.75; margin-bottom:1.25rem;font-size:1.06rem} .post-body ul,.post-body ol{margin:0 0 1.4rem 1.2rem;padding-left:.8rem} .post-body li{font-family:var(--display);color:var(--ink);line-height:1.7; margin-bottom:.6rem;font-size:1.06rem} .post-body strong{font-weight:400;color:var(--olive); border-bottom:1px solid rgba(201,165,59,.45)} .post-body em{font-style:italic} .post-body a{color:var(--terracotta);text-decoration:none; border-bottom:1px solid rgba(165,86,68,.42)} .post-body a:hover{border-bottom-color:var(--terracotta)} .post-body blockquote{margin:2rem 0;padding-left:1.4rem; border-left:2px solid var(--gold);font-style:italic;color:var(--olive)} .post-signoff{font-family:var(--display);font-style:italic; color:var(--terracotta);font-size:1.12rem;margin-top:2rem} /* ---- faq ---- */ .post-faq{margin-top:3.4rem;border-top:1px solid rgba(201,165,59,.45); padding-top:2.2rem} .post-faq h2{margin-top:0} .faq-q{font-family:var(--display);font-size:1.16rem;color:var(--olive); margin:1.8rem 0 .5rem} .faq-a{font-family:var(--display);color:var(--ink);line-height:1.72; font-size:1.04rem} /* ---- close ---- */ .post-cta{margin-top:3.4rem;text-align:center;background:var(--cream-card); border-radius:4px;padding:2.4rem 2rem;box-shadow:0 14px 36px rgba(86,72,35,.10)} .post-cta p{font-family:var(--display);color:var(--ink);max-width:46ch; margin:0 auto 1.4rem;line-height:1.65} .post-back{text-align:center;margin:2.6rem 0 1rem} .post-back a{font-family:var(--ui);font-weight:600;font-size:.84rem; letter-spacing:.06em;color:var(--terracotta);text-decoration:none} .post-back a:hover{text-decoration:underline} @media (max-width:640px){ .fn-item{padding:1.6rem 1.4rem} .post-wrap{padding:0 1.4rem} .post-answer{padding:1.3rem 1.4rem} } /* ============================================================ CARDS ON A DARK GROUND A cream card sitting on a photographic band is not itself on the photograph. Its words take the card's own colours — no gold eyebrow, no cream body, no drop shadow borrowed from the band around it. ============================================================ */ .ground-deep :is(.eq-card,.testi,.offering,.product,.qcard, .tool,.member,.fn-item,.way,.highlight-stat,.skale-card) :is(h1,h2,h3,p,span,div,blockquote,em,strong){text-shadow:none} .ground-deep :is(.eq-card,.testi,.offering,.product,.qcard, .tool,.member,.fn-item,.way,.skale-card) :is(h2,h3){color:var(--olive)} .ground-deep :is(.eq-card,.testi,.offering,.product,.qcard, .tool,.member,.fn-item,.way,.skale-card) p{color:var(--ink)} .ground-deep :is(.eq-card,.testi,.offering,.product,.qcard, .tool,.member,.fn-item,.way,.skale-card) :is(.eyebrow,.mini-label, .stat-label,.kicker){color:var(--terracotta)} .ground-deep :is(.eq-card,.testi,.offering,.product,.qcard, .tool,.member,.fn-item,.way,.skale-card) .stat-label{color:var(--olive)} /* ============================================================ A STATEMENT CARRIED ON A PHOTOGRAPH (the .claim bands) ============================================================ */ .ground-deep.claim .statement{color:var(--cream)} .ground-deep.claim .statement span{color:var(--gold)} .ground-deep.claim h2{color:var(--cream)} .ground-deep.claim .mini-label{color:var(--gold)} /* gold hairlines above and below, so the statement reads as an inscription */ .claim.ground-deep{position:relative} .claim.ground-deep .wrap::before,.claim.ground-deep .wrap::after{ content:"";display:block;width:56px;height:1px;background:var(--gold); margin:0 auto;opacity:.85} .claim.ground-deep .wrap::before{margin-bottom:2rem} .claim.ground-deep .wrap::after{margin-top:2rem} /* ============================================================ PAGE-SCOPED GROUNDS — declared last on purpose ------------------------------------------------------------ The contact and growth-stories blocks further up this file set their backgrounds with the `background` SHORTHAND, which resets background-image. Because those blocks are declared after the art-direction layer, they were winning and their sections were rendering as flat cream. These re-state the grounds at the end of the cascade, where they hold. ============================================================ */ .contact-hero.tex-contact{background-color:var(--cream); background-position:center;background-size:cover;background-repeat:no-repeat; background-image: linear-gradient(96deg,var(--cream) 0%,rgba(248,241,234,.95) 32%, rgba(248,241,234,.66) 58%,rgba(248,241,234,.22) 100%), url(../img/bg/team-cta-ocean-e4edf4.webp)} .contact-main{background-color:var(--cream); background-position:center;background-size:cover;background-repeat:no-repeat; background-image: linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.94) 16%, rgba(248,241,234,.86) 55%,var(--cream) 100%), url(../img/bg/team-team-wash-5fabb7.webp)} .contact-strip{background-color:#4a3f1d;background-blend-mode:multiply,normal; background-position:center;background-size:cover;background-repeat:no-repeat; background-image:linear-gradient(180deg,rgba(52,44,20,.60),rgba(34,28,12,.80)), url(../img/bg/home-closing-54ce6c.jpg)} .contact-close{background-color:var(--cream); background-position:center;background-size:cover;background-repeat:no-repeat; background-image: linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.88) 18%, rgba(248,241,234,.60) 55%,var(--cream) 100%), url(../img/bg/home-delivered-d24fba.webp)} .stories-band{background-color:#463a1c;background-blend-mode:multiply,normal; background-position:center;background-size:cover;background-repeat:no-repeat; background-image:linear-gradient(180deg,rgba(52,44,20,.62),rgba(34,28,12,.84)), url(../img/bg/team-claim-leaves-26c381.webp)} /* ============================================================ IMAGE DIVIDERS — a whisper of warmth over the strip, so a crop that lands on a pale part of a frame still reads as a photograph rather than as a blank band. ============================================================ */ .band-image{background-position:center 45%} .band-image::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(86,72,35,.20),rgba(86,72,35,.06) 45%, rgba(86,72,35,.22))} /* ============================================================ THE SEAM BETWEEN THE CLOSE AND THE FOOTER Both are dark photographic bands, and they met with nothing between them — two frames running into one another. A gold hairline separates them, the same rule the footer already uses under its links. ============================================================ */ .site-footer{border-top:1px solid rgba(201,165,59,.42)} /* ============================================================ FIELD NOTE MASTHEADS Each note opens on its own frame (see field-notes/*.html), so five posts do not share one masthead. The ground is side-lit in every case: the picture blooms past the measure while the reading column stays on cream. ============================================================ */ .post-hero{padding:5rem 0 2rem} .post-hero .post-wrap{position:relative} /* ============================================================ ALKEMIA LABS — INSTRUMENT SYSTEM ------------------------------------------------------------ Labs is the one page that is not a landscape. It is the laboratory and the tool, so every ground here is DRAWN rather than photographed: ruled plates, a measure rule between sections, and the Labs device opened up as its own construction geometry. No photograph is loaded on this page. Declared last, like the page-scoped grounds above, so these win over the art-direction layer that would otherwise put a landscape behind each section. ============================================================ */ /* ---- the dark plate ------------------------------------------------ Carries the header, and again the "where Labs sits" band, so the page opens and turns on the same instrument face. */ .plate-dark{position:relative;overflow:hidden; background-color:#2f2812; background-image: repeating-linear-gradient(0deg,rgba(201,165,59,.14) 0 1px,transparent 1px 58px), repeating-linear-gradient(90deg,rgba(201,165,59,.14) 0 1px,transparent 1px 58px), radial-gradient(118% 86% at 50% 40%,rgba(102,86,42,.82) 0%, rgba(58,48,21,.90) 55%,rgba(30,25,11,.98) 100%); border-top:1px solid rgba(201,165,59,.45); border-bottom:1px solid rgba(201,165,59,.45)} /* ---- the light plate: the same ruling, held right back, for the cream sections that carry cards ---- */ .plate-light{position:relative;overflow:hidden;background-color:var(--cream); background-image: repeating-linear-gradient(0deg,rgba(86,72,35,.055) 0 1px,transparent 1px 58px), repeating-linear-gradient(90deg,rgba(86,72,35,.055) 0 1px,transparent 1px 58px), radial-gradient(120% 78% at 50% 0%,rgba(201,165,59,.11) 0%,rgba(248,241,234,0) 64%)} /* registration marks — an instrument face, not a web section */ .lab-reg{position:absolute;width:14px;height:14px; border-color:rgba(201,165,59,.8);border-style:solid;border-width:0;opacity:.55} .plate-light .lab-reg{border-color:rgba(86,72,35,.42);opacity:.5} .lab-reg--tl{top:18px;left:18px;border-top-width:1px;border-left-width:1px} .lab-reg--tr{top:18px;right:18px;border-top-width:1px;border-right-width:1px} .lab-reg--bl{bottom:18px;left:18px;border-bottom-width:1px;border-left-width:1px} .lab-reg--br{bottom:18px;right:18px;border-bottom-width:1px;border-right-width:1px} /* the device drawn as a construction schematic, sat behind the words */ .lab-schematic{position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);width:min(760px,92vw);height:auto; opacity:.42;pointer-events:none} .plate-light .lab-schematic{opacity:.18;width:min(520px,72vw)} /* ---- the header ---------------------------------------------------- */ .hero-lab{text-align:center;min-height:480px;display:flex;align-items:center; padding:5rem 0} .hero-lab .wrap{position:relative;max-width:54rem;margin:0 auto;padding:0 2rem} .hero-lab .lab-mark{width:82px;height:82px;margin:0 auto 1.5rem;display:block} .hero-lab .eyebrow{display:block;color:var(--gold);margin-bottom:1rem} .hero-lab h1{font-family:var(--display);color:var(--cream); font-size:clamp(2.2rem,5.2vw,3.3rem);line-height:1.1} .hero-lab h1 .amp{color:var(--gold)} .hero-lab .lede{color:var(--cream-90);margin:1.4rem auto 0;max-width:50ch} /* the spec row — instrument labels, ruled off in gold */ .lab-spec{margin:2.4rem auto 0;padding-top:1.1rem;max-width:44rem; border-top:1px solid rgba(201,165,59,.34); display:flex;justify-content:center;gap:2.2rem;flex-wrap:wrap; font-family:var(--ui);font-size:.68rem;letter-spacing:.16em; text-transform:uppercase;color:var(--cream-72)} .lab-spec b{color:var(--gold);font-weight:600} /* ---- the measure rule, in place of a photographic divider ---------- */ .band-rule{position:relative;height:104px;background:var(--cream); border-top:1px solid rgba(201,165,59,.30); border-bottom:1px solid rgba(201,165,59,.30); display:flex;align-items:center;justify-content:center} .band-rule::before{content:"";position:absolute;left:0;right:0;top:50%; height:1px;background:rgba(201,165,59,.34)} .band-rule::after{content:"";position:absolute;left:0;right:0;top:50%; height:11px;transform:translateY(-50%); background-image:repeating-linear-gradient(90deg, rgba(201,165,59,.40) 0 1px,transparent 1px 34px)} .band-rule .rule-mark{position:relative;z-index:1;width:44px;height:44px; display:block;background:var(--cream);border-radius:50%;padding:9px} /* ---- cards on this page get plate detailing, not just a box -------- */ #toolkit .tool,#products .product{position:relative} #toolkit .tool{border-color:rgba(86,72,35,.14); border-top:1px solid rgba(201,165,59,.55)} #toolkit .tool .kicker{color:var(--terracotta)} /* ---- the dark band answers the header ------------------------------ */ .labs-sits{padding:5rem 0} .labs-sits .wrap{position:relative} @media (max-width:900px){ .hero-lab{min-height:400px} .lab-schematic{opacity:.26;width:112vw} .band-rule{height:84px} } /* ============================================================ HEADER ARCHETYPES — ADOPTED 2026-09-08 ------------------------------------------------------------ Folded in from assets/css/header-archetypes.css. One page, one header recipe: the translucent .hero-card stays on index and Who We Are; every other page gets a treatment of its own. · SPLIT — difference, services · WARM PLATE — growth-stories · EDITORIAL — field-notes · INSTRUMENT — labs (declared above, in the Labs system) The rule that holds across all of them: the words never sit on the busy part of a frame. They sit on a solid cream run, or on a ground that is drawn rather than photographed. These live in site.css and not in a page