/* ============================================================ Eleven Endeavors — shared stylesheet Design tokens documented in STYLE-GUIDE.md. Fonts (load in each page ): Poppins ≈ Sofia Pro (display/ nav/buttons), Alice (body serif), Montserrat ≈ Proxima Nova (eyebrows) ============================================================ */ :root{ --ink:#222222; /* body copy */ --head:#4a4a4a; /* display headings */ --accent:#e37263; /* coral */ --accent-dark:#d5604f; --dark:#363636; /* footer */ --nav:#b0b0b0; /* nav + muted */ --muted:#8a8a8a; --serif:'Alice',serif; --display:'Poppins',sans-serif; --ui:'Montserrat',sans-serif; } *{box-sizing:border-box;margin:0;padding:0} body{font-family:var(--serif);color:var(--ink);line-height:1.7;background:#fff} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:1140px;margin:0 auto;padding:0 30px} /* Buttons — full pills */ .btn{display:inline-block;background:var(--accent);color:#fff;font-family:var(--display); font-weight:500;font-size:16px;padding:19px 40px;border-radius:300px;transition:background .2s} .btn:hover{background:var(--accent-dark)} .btn-outline{display:inline-block;background:#fff;color:var(--accent);font-family:var(--display); font-weight:500;font-size:16px;padding:18px 36px;border:0;border-radius:300px; box-shadow:0 2px 12px rgba(0,0,0,.18);transition:color .2s} .btn-outline:hover{color:var(--accent-dark)} /* Eyebrows */ .eyebrow{font-family:var(--ui);text-transform:uppercase;letter-spacing:.16em; font-weight:600;font-size:14px;color:var(--accent)} /* ===== Header (logo left, nav right) ===== */ header{background:#fff} .nav{display:flex;align-items:center;justify-content:space-between;min-height:120px;gap:26px} .logo img{height:82px;width:auto} .nav .links{display:flex;gap:26px;align-items:center} .nav .links a{font-family:var(--display);font-weight:400;font-size:16px;color:var(--nav)} .nav .links a:hover{color:var(--accent)} .menu-toggle{display:none;background:none;border:0;font-size:24px;color:var(--nav);cursor:pointer} /* About dropdown (toggle only — no page of its own) */ .dropdown{position:relative} .drop-toggle{font-family:var(--display);font-weight:400;font-size:16px;color:var(--nav); background:none;border:0;padding:0;cursor:pointer;line-height:inherit} .dropdown:hover .drop-toggle,.dropdown:focus-within .drop-toggle{color:var(--accent)} .drop-menu{position:absolute;top:100%;left:0;min-width:180px;z-index:60; display:none;flex-direction:column;gap:12px;background:#fff;padding:18px 22px} .dropdown:hover .drop-menu,.dropdown:focus-within .drop-menu{display:flex} .drop-menu a{white-space:nowrap} /* ===== Hero ===== */ .hero{padding:56px 0 30px} .hero-row{display:flex;align-items:center;justify-content:space-between;gap:30px} .hero-left{flex:1 1 auto;max-width:70%} .hero .eyebrow{margin-bottom:16px} .hero h1{font-family:var(--display);font-weight:700;color:var(--head); font-size:clamp(64px,10vw,132px);line-height:.98;letter-spacing:-.02em} .hero-right{flex:0 0 auto} /* ===== Intro (centered) ===== */ .intro{padding:56px 0 40px;text-align:center} .intro h2{font-family:var(--display);font-weight:600;color:var(--head); font-size:clamp(28px,4vw,42px);line-height:1.15;max-width:1000px;margin:0 auto} /* ===== Video ===== */ .video{padding:20px 0 40px} .video-frame{position:relative;padding-top:56.25%;background:#000;overflow:hidden} .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ===== Quote (centered serif) ===== */ .quote{padding:30px 0 70px;text-align:center} .quote-text{font-family:var(--serif);font-size:18px;line-height:1.8;max-width:1000px;margin:0 auto} .quote-cite{margin-top:24px;font-family:var(--serif);font-size:18px} .quote-cite a{color:var(--accent)} .quote-cite a:hover{text-decoration:underline} /* ===== Services (borderless, centered) ===== */ .services{padding:20px 0 70px} .services-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px} .service{text-align:center} .service img{margin:0 auto 26px;max-height:230px;width:auto} .service h3{font-family:var(--display);font-weight:600;color:var(--head);font-size:34px;margin-bottom:20px} .service p{font-family:var(--serif);font-size:18px;max-width:440px;margin:0 auto 22px} .svc-link{font-family:var(--serif);font-size:18px;color:var(--accent)} .svc-link:hover{text-decoration:underline} /* ===== Blog (white bg) ===== */ .blog{padding:40px 0 80px} .section-head{text-align:center;font-family:var(--display);font-weight:600;color:var(--head); font-size:clamp(30px,4vw,44px);margin-bottom:52px} .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .post img{width:100%;height:200px;object-fit:cover} .post-title{font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--ink);margin-top:16px} .post-date{font-family:var(--serif);font-size:14px;color:var(--muted);margin-top:8px} /* ===== CTA (white, left text, centered button) ===== */ .cta{padding:20px 0 80px} .divider{border:0;border-top:1px solid #e5e5e5;margin-bottom:44px} .cta .eyebrow{margin-bottom:22px} .cta-body{font-family:var(--serif);font-size:18px;max-width:1000px} .cta-btn-wrap{text-align:center;margin-top:44px} /* ===== Footer (dark) ===== */ footer{background:var(--dark);color:var(--nav);padding:66px 0 60px} .foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:54px} .socials{display:flex;gap:22px} .socials a{display:inline-flex} .socials svg{width:22px;height:22px;fill:#fff} .socials a:hover svg{fill:var(--accent)} .foot-legal,.foot-powered{text-align:center;font-family:var(--serif);font-size:16px;color:var(--nav)} .foot-legal a,.foot-powered a{color:var(--nav);text-decoration:underline;text-underline-offset:2px} .foot-legal a:hover,.foot-powered a:hover{color:var(--accent)} .divider-dark{border:0;border-top:1px solid rgba(255,255,255,.18);margin:30px auto;max-width:1080px} /* ===== Content pages (inner-page defaults for the build) ===== */ .page{padding:40px 0 80px} /* :where() = zero specificity, so any component class (.lead-head, .post-h1, .bio-title…) always wins */ :where(.page h1){font-family:var(--display);font-weight:700;color:var(--head); font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-.02em;margin-bottom:24px} :where(.page h2){font-family:var(--display);font-weight:600;color:var(--head);font-size:clamp(26px,3.5vw,36px);margin:36px 0 16px} :where(.page h3){font-family:var(--display);font-weight:600;color:var(--head);font-size:24px;margin:28px 0 12px} .page p{font-family:var(--serif);font-size:18px;margin-bottom:20px} .page ul,.page ol{font-family:var(--serif);font-size:18px;margin:0 0 20px 22px} .page li{margin-bottom:8px} .page a{color:var(--accent)} .page a:hover{text-decoration:underline} .page img{margin:24px 0} /* Full-bleed banner (inner-page hero image) */ .banner{width:100vw;margin-left:calc(50% - 50vw);height:190px;object-fit:cover;object-position:center} /* Big section lead heading (Poppins) */ .lead-head{font-family:var(--display);font-weight:600;color:var(--head); font-size:clamp(28px,3.6vw,40px);margin:0 0 20px} /* Two-column bulleted list (column-major order) */ .two-col{columns:2;column-gap:60px;max-width:1000px;font-family:var(--serif);font-size:18px; list-style:disc;padding-left:20px} .two-col li{margin-bottom:14px;break-inside:avoid} /* Ghost pill button (coral border, transparent) */ .btn-ghost{display:inline-block;background:transparent;color:var(--accent);font-family:var(--display); font-weight:500;font-size:16px;padding:17px 34px;border:1px solid var(--accent); border-radius:300px;transition:all .2s} .btn-ghost:hover{background:var(--accent);color:#fff} /* Screen-reader-only (SEO H1 without changing the visual) */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .center{text-align:center} /* Article layout — legal pages (narrow) */ .article{max-width:820px} .article img{width:100%;height:auto;margin:26px 0;border-radius:2px} .post-h1{font-family:var(--display);font-weight:600;color:var(--head); font-size:clamp(32px,4.5vw,48px);line-height:1.1;letter-spacing:-.01em;margin-bottom:14px} .sub-head{font-family:var(--display);font-weight:600;color:var(--head);font-size:22px;margin:28px 0 12px} .post-meta{font-family:var(--serif);font-size:14px;color:var(--muted)} /* Blog post — centered head, full-width body (matches live) */ .post-head{text-align:center;margin-bottom:34px} .post-head .post-h1{margin-bottom:12px} .article-body img{width:100%;height:auto;margin:26px 0;border-radius:2px} /* Banner with centered title overlay */ .banner-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:230px;overflow:hidden} .banner-hero img{width:100%;height:100%;object-fit:cover} .banner-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; text-align:center;padding:0 24px;color:#fff;font-family:var(--display);font-weight:600; font-size:clamp(28px,4vw,46px);text-shadow:0 1px 12px rgba(0,0,0,.35)} /* Blog index grid (2-up cards) */ .blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px 40px} .blog-card img{width:100%;height:330px;object-fit:cover} .blog-card .card-meta{font-family:var(--serif);font-size:14px;color:var(--muted);margin-top:16px} .blog-card .card-title{font-family:var(--display);font-weight:600;color:var(--head);font-size:26px;line-height:1.2;margin-top:6px} .blog-card p{font-family:var(--serif);font-size:17px;color:var(--ink);margin-top:12px} .read-more{display:inline-block;margin-top:14px;font-family:var(--ui);font-weight:600; text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--accent)} .read-more:hover{text-decoration:underline} /* Affiliations logo grid */ .logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:70px 50px;align-items:center;justify-items:center;margin-top:30px} .logo-grid img{max-width:80%;max-height:130px;width:auto;height:auto;object-fit:contain} /* Bio (Chief Consultant page) — headshot with overlapping white card */ .bio-hero{position:relative;max-width:930px;margin:44px auto 54px} .bio-photo{width:60%} .bio-photo img{width:100%;height:auto;display:block} .bio-card{position:absolute;top:50%;right:0;transform:translateY(-50%);width:60%; background:#fff;padding:44px 30px 44px 64px;box-sizing:border-box} .bio-title{font-family:var(--display);font-weight:600;color:var(--accent);font-size:clamp(28px,3.4vw,40px);margin-bottom:12px} .bio-sub{font-family:var(--serif);font-size:18px;color:var(--ink)} /* Contact / form */ .form-field{margin-bottom:20px} .form-field label{display:block;font-family:var(--ui);font-weight:600;font-size:13px; text-transform:uppercase;letter-spacing:.06em;color:var(--head);margin-bottom:8px} .form-field input,.form-field textarea{width:100%;font-family:var(--serif);font-size:16px; padding:13px 15px;border:1px solid #d9d9d9;border-radius:3px;background:#fff;color:var(--ink)} .form-field textarea{min-height:150px;resize:vertical} .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:start} .contact-addr{font-family:var(--serif);font-size:18px;margin:16px 0 0;line-height:1.7} .contact-map{width:100%;height:300px;border:0;margin-top:26px;border-radius:2px} .form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:20px} .contact-form .eyebrow{display:block;margin-bottom:26px;line-height:1.6} .contact-form .btn-ghost{margin-top:12px;cursor:pointer} .social-logos{display:flex;justify-content:center;align-items:center;gap:90px;flex-wrap:wrap;margin-top:10px} .social-logos img{max-height:64px;width:auto} @media(max-width:820px){ .blog-grid{grid-template-columns:1fr} .logo-grid{grid-template-columns:1fr 1fr;gap:36px 24px} .contact-grid{grid-template-columns:1fr;gap:36px} .bio-photo{width:100%} .bio-card{position:static;transform:none;width:100%;padding:22px 0 0} } @media(max-width:820px){ .menu-toggle{display:block} .logo img{height:58px} .nav{justify-content:space-between;min-height:84px;position:relative} /* Nav links collapse into a hamburger dropdown */ .nav .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column; align-items:flex-start;gap:0;background:#fff;padding:8px 24px 18px; box-shadow:0 10px 24px rgba(0,0,0,.12);z-index:100} .nav.menu-open .links{display:flex} .nav .links > a,.nav .links > .dropdown{width:100%} .nav .links > a,.drop-toggle{padding:13px 0;font-size:18px;text-align:left} /* About: shown inline with its children indented (no hover needed on touch) */ .dropdown{position:static} .drop-menu{position:static;display:flex;background:none;box-shadow:none;padding:0 0 8px 16px;min-width:0;gap:0} .drop-menu a{padding:9px 0;font-size:16px;white-space:normal} .hero-row{flex-direction:column;align-items:flex-start} .hero-left{max-width:100%} .services-grid,.posts{grid-template-columns:1fr;gap:44px} .foot-top{flex-direction:column;align-items:flex-start} }