/* ============================================================ Émile Aoun — Growth & Revenue Engineer Design system: botanical line-art meets technical precision ============================================================ */ /* Fonts are loaded via in each page's for parallel discovery */ /* ---------- Tokens ---------- */ :root{ /* palette */ --white:#FFFFFF; --forest:#1C2B1A; --sage:#4A7C59; --gold:#C9A84C; --soil:#8B5E3C; --seedling:#D4E8D0; --offwhite:#FDFBF7; --forest-12:rgba(28,43,26,.12); --forest-20:rgba(28,43,26,.20); --forest-60:rgba(28,43,26,.62); --forest-75:rgba(28,43,26,.78); /* type */ --display:'Cormorant Garamond',Georgia,serif; --body:'Instrument Sans',system-ui,sans-serif; --mono:'Fira Code',ui-monospace,monospace; /* layout */ --maxw:1100px; --gutter:clamp(20px,5vw,56px); --section-y:clamp(72px,11vh,148px); /* motion */ --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); --dur:460ms; /* radii */ --r-pill:999px; --r-lg:18px; --r-md:12px; --r-sm:8px; /* elevation */ --shadow-sm:0 4px 14px -8px rgba(28,43,26,.28); --shadow-md:0 16px 34px -18px rgba(28,43,26,.40); --shadow-lg:0 30px 60px -28px rgba(28,43,26,.46); /* accent (tweakable) */ --accent:var(--gold); } /* ---------- Reset ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--body); color:var(--forest); background:var(--white); line-height:1.6; font-size:18px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;color:inherit;background:none;border:none} ::selection{background:var(--seedling);color:var(--forest)} /* ---------- Type ---------- */ h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.05;letter-spacing:-.01em;text-wrap:balance} .display{font-size:clamp(2.6rem,6.4vw,5.1rem);line-height:.98;letter-spacing:-.02em} .h2{font-size:clamp(2rem,4.4vw,3.4rem)} .h3{font-size:clamp(1.5rem,2.6vw,2.1rem)} .lead{font-size:clamp(1.12rem,1.7vw,1.36rem);line-height:1.5;color:var(--forest-75)} p{text-wrap:pretty} .prose p+p{margin-top:1.15em} em,.serif-em{font-family:var(--display);font-style:italic} .eyebrow{ font-family:var(--mono);font-size:.72rem;font-weight:500; letter-spacing:.22em;text-transform:uppercase;color:var(--sage); display:inline-flex;align-items:center;gap:.7em; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--sage);display:inline-block} .mono{font-family:var(--mono);font-size:.8rem;letter-spacing:.02em} /* ---------- Layout ---------- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:var(--section-y);content-visibility:auto;contain-intrinsic-size:1px 800px} .rule{height:1px;background:var(--forest-20);border:0;width:100%} .section-head{max-width:42ch} .section-head .h2{margin-top:.5rem} .section-head .lead{margin-top:1rem} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--body);font-weight:500;font-size:1rem; padding:.92em 1.65em;border:1px solid var(--forest); background:transparent;color:var(--forest); transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--spring),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease); border-radius:var(--r-pill);line-height:1;white-space:nowrap; } .btn .arrow{transition:transform var(--dur) var(--spring)} .btn:hover{background:var(--forest);color:var(--offwhite);transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)} .btn:hover .arrow{transform:translateX(4px)} .btn--primary{background:var(--accent);border-color:var(--accent);color:var(--forest)} .btn--primary:hover{background:var(--forest);border-color:var(--forest);color:var(--offwhite)} /* Header contact button only — gold default, black on hover */ .nav__link.btn--primary:hover{background:#000;border-color:#000;color:#fff} .btn--ghost{border-color:var(--forest-20)} .btn--ghost:hover{border-color:var(--forest)} .btn--ondark{border-color:rgba(253,251,247,.32);color:var(--offwhite)} .btn--ondark:hover{background:var(--accent);border-color:var(--accent);color:var(--forest)} .textlink{ display:inline-flex;align-items:center;gap:.45em; font-weight:500;position:relative;padding-bottom:2px; background-image:linear-gradient(var(--sage),var(--sage)); background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%; transition:background-size var(--dur) var(--ease),color var(--dur) var(--ease); } .textlink:hover{color:var(--sage);background-size:100% 1px} .textlink--seed{background-image:linear-gradient(#7A4FB0,#7A4FB0)} .textlink--seed:hover{color:#7A4FB0} /* ---------- Tags / pills ---------- */ .tag{ font-family:var(--mono);font-size:.72rem;letter-spacing:.02em; padding:.42em .82em;border:1px solid var(--forest-20); background:var(--seedling);color:var(--forest);border-radius:var(--r-pill); white-space:nowrap;transition:transform var(--dur) var(--spring),background var(--dur) var(--ease); } .taglist:hover .tag{background:var(--white)} .tag:hover{transform:translateY(-2px);background:var(--seedling)} .tag--dark{background:transparent;border-color:rgba(212,232,208,.28);color:var(--seedling)} .taglist{display:flex;flex-wrap:wrap;gap:.5rem} /* ---------- Cards ---------- */ .card{ background:var(--offwhite);border:.5px solid var(--forest-20); border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.4rem);position:relative;overflow:hidden; transition:border-color var(--dur) var(--ease),transform var(--dur) var(--spring),box-shadow var(--dur) var(--ease); } .card:hover{box-shadow:var(--shadow-md)} .card__accent{position:absolute;top:14px;right:14px;width:54px;height:54px;color:var(--sage);opacity:.5;pointer-events:none} /* ---------- Nav ---------- */ .nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .nav.is-stuck{border-bottom-color:var(--forest-12);background:rgba(255,255,255,.86);box-shadow:var(--shadow-sm)} .nav__inner{max-width:var(--maxw);margin-inline:auto;padding:1.05rem var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;transition:padding var(--dur) var(--ease)} .nav.is-stuck .nav__inner{padding-block:.72rem} .brand svg,.brand img,.brand__name{transition:transform var(--dur) var(--spring)} .nav.is-stuck .brand svg,.nav.is-stuck .brand img{transform:scale(.92)} .brand{display:flex;align-items:center;gap:.7rem} .brand svg,.brand img{width:36px;height:41px;object-fit:contain;display:block} .brand__name{font-family:var(--display);font-size:1.42rem;font-weight:600;letter-spacing:-.01em;line-height:1;white-space:nowrap} .nav__links{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.1rem)} .nav__link{font-size:.96rem;font-weight:500;color:var(--forest-75);transition:color var(--dur) var(--ease);position:relative} .nav__link:hover,.nav__link.is-active{color:var(--forest)} .nav__link:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--sage);transition:width var(--dur) var(--ease)} .nav__link:not(.btn):hover::after,.nav__link.is-active::after{width:100%} .nav__toggle{display:none} .backlink{display:inline-flex;align-items:center;gap:.5em;font-size:.9rem;color:var(--sage);font-weight:500} .backlink:hover{color:var(--forest)} @media (max-width:720px){ .nav__links{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);flex-direction:column;align-items:flex-start;justify-content:center;gap:1.4rem;background:var(--offwhite);padding:2rem var(--gutter);transform:translateX(100%);transition:transform var(--dur) var(--ease);border-left:1px solid var(--forest-12)} .nav__links.is-open{transform:translateX(0)} .nav__toggle{display:flex;flex-direction:column;gap:5px;z-index:70;padding:6px} .nav__toggle span{width:24px;height:1.5px;background:var(--forest);transition:transform var(--dur) var(--ease),opacity var(--dur)} .nav__toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav__toggle.is-open span:nth-child(2){opacity:0} .nav__toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} } /* ---------- Footer ---------- */ .footer{background:var(--forest);color:var(--offwhite);position:relative;overflow:hidden} .footer__strip{width:100%;height:64px;display:block;color:var(--seedling);opacity:.4} .footer__inner{max-width:var(--maxw);margin-inline:auto;padding:clamp(2.4rem,5vw,3.6rem) var(--gutter)} .footer__top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start} .footer__brand{display:flex;align-items:center;gap:.7rem} .footer__brand svg{width:28px;height:32px;color:var(--seedling)} .footer__brand img{width:34px;height:38px;object-fit:contain;display:block} .footer__brand .brand__name{color:var(--offwhite)} .footer__tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--seedling);margin-top:.8rem;opacity:.8} .footer__nav{display:flex;gap:1.6rem;flex-wrap:wrap} .footer__nav a{color:rgba(253,251,247,.7);font-size:.95rem;transition:color var(--dur)} .footer__nav a:hover{color:var(--offwhite)} .footer__bottom{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(253,251,247,.14);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;color:rgba(253,251,247,.55);font-size:.82rem} /* ============================================================ MOTION — grow-into-view Transform-only so content is never trapped invisible when a backgrounded iframe freezes transitions (captures/print/PDF). ============================================================ */ [data-grow]{transform:translateY(8px);transition:transform .28s ease-out} [data-grow].is-in{transform:none} [data-grow-delay="1"]{transition-delay:.08s} [data-grow-delay="2"]{transition-delay:.16s} [data-grow-delay="3"]{transition-delay:.24s} [data-grow-delay="4"]{transition-delay:.32s} [data-grow-delay="5"]{transition-delay:.40s} @media (prefers-reduced-motion:reduce){ [data-grow]{transform:none!important;transition:none!important} } /* ============================================================ INTRO PRELOADER (index page only) Square video centered on offwhite, edges feathered via radial mask, white pixels dissolve into the page via multiply blend. ============================================================ */ body.intro-locked{overflow:hidden;height:100vh} #intro-preloader{ position:fixed;inset:0;z-index:10000; background:var(--offwhite); display:flex;align-items:center;justify-content:center; overflow:hidden;opacity:1; transition:opacity 1100ms cubic-bezier(.65,0,.35,1); } #intro-preloader.is-hiding{opacity:0;pointer-events:none} #intro-preloader::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(212,232,208,.35) 0%, transparent 60%), radial-gradient(ellipse 90% 80% at 50% 50%, rgba(201,168,76,.05) 0%, transparent 70%); } #intro-preloader::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px; } .intro-stage{ position:relative;width:min(78vmin,720px);aspect-ratio:1/1; animation:introRise 1400ms cubic-bezier(.22,1,.36,1) both; } .intro-video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,rgba(0,0,0,.85) 64%,rgba(0,0,0,.35) 80%,transparent 96%); mask-image:radial-gradient(circle at 50% 50%,#000 52%,rgba(0,0,0,.85) 64%,rgba(0,0,0,.35) 80%,transparent 96%); mix-blend-mode:multiply; } .intro-wordmark{ position:absolute;left:50%;bottom:-56px;transform:translateX(-50%); font-family:"Fira Code","SFMono-Regular",ui-monospace,monospace; font-size:.6875rem;font-weight:300;letter-spacing:.32em;text-transform:uppercase; color:var(--sage);opacity:0;white-space:nowrap; animation:introWord 900ms ease 500ms forwards; } .intro-wordmark .dot{ display:inline-block;width:4px;height:4px;border-radius:50%; background:var(--gold);margin:0 10px;vertical-align:middle; animation:introPulse 1600ms ease-in-out infinite; } .intro-skip{ position:absolute;right:28px;bottom:24px; font-family:"Fira Code","SFMono-Regular",ui-monospace,monospace; font-size:.625rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase; color:var(--forest);opacity:.35; background:none;border:none;cursor:pointer;padding:8px 12px; transition:opacity 220ms ease; } .intro-skip:hover{opacity:.85} @keyframes introRise{ 0%{opacity:0;transform:scale(1.04);filter:blur(6px)} 60%{opacity:1} 100%{opacity:1;transform:scale(1);filter:blur(0)} } @keyframes introWord{to{opacity:.7}} @keyframes introPulse{ 0%,100%{opacity:.3;transform:scale(.9)} 50%{opacity:1;transform:scale(1.15)} } @media (max-width:640px){ .intro-stage{width:84vmin} .intro-wordmark{font-size:.625rem;letter-spacing:.26em;bottom:-42px} } @media (prefers-reduced-motion:reduce){ .intro-stage{animation:none} .intro-wordmark{animation:none;opacity:.7} #intro-preloader{transition:opacity 400ms ease} }