/* ============================================================================ markdimercurio.com — shared design system Extracted verbatim from the approved /vsl + /thank-you pages (tokens, nav, footer, buttons, sections) so new pages are byte-identical in brand. NEW pages link this; existing pages keep their inline CSS untouched. ========================================================================== */ :root{ --ink:#15233a; --ink-2:#1d2c44; --nav:#252e3f; --nav-2:#1b2231; --gold:#a8843d; --gold-2:#b8943f; --gold-soft:#c9a05a; --body:#3e4a60; --muted:#6a7689; --page:#ffffff; --soft:#f4f5f7; --line:#e7e8ec; /* spacing scale (Task 8) */ --space-section:72px; --space-section-sm:64px; --space-block:32px; --space-tight:16px; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--page);color:var(--body);font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body{font-size:18px;line-height:1.6} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} h1,h2,h3{text-wrap:balance} .ser{font-family:'Playfair Display', serif; font-style:italic; font-weight:600; color:var(--gold);} .kicker{display:inline-block; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#8a6a28; font-weight:700; margin-bottom:16px;} /* darker gold = AA 4.5:1+ on light bg; dark-section kickers override to gold-soft */ .wrap{max-width:1080px; margin:0 auto;} /* ---------- Nav (reused from /vsl Global Nav, extended with menu links) ---------- */ .nav{position:sticky; top:0; z-index:50; background:var(--nav); border-bottom:1px solid rgba(255,255,255,.04);} .nav-inner{max-width:1440px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:18px 56px; gap:24px;} .brand{display:inline-flex;align-items:center;color:#fff} .brand img{height:48px;width:auto;display:block} .nav-links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0;} .nav-links a{color:#c9d2e0; font-size:15px; font-weight:500; transition:color .15s;} .nav-links a:hover, .nav-links a[aria-current="page"]{color:#fff;} /* nav CTA = the gold button at nav size: NAVY text on the AA-clear gold (was white-on-gold, 3.48 fail). */ .nav-cta{color:var(--ink) !important; background:linear-gradient(180deg,#c2a04a,var(--gold-2)); padding:9px 18px; border-radius:7px; font-weight:700 !important;} .nav-cta:hover{color:var(--ink) !important;} .nav-toggle{display:none; color:#fff;} .nav-toggle svg{width:26px;height:26px} @media (max-width:960px){ .nav-inner{padding:16px 24px} .nav-links{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--nav-2); padding:8px 0; display:none;} .nav-links.is-open{display:flex;} .nav-links li{border-top:1px solid rgba(255,255,255,.05);} .nav-links a{display:block; padding:14px 24px;} .nav-toggle{display:inline-flex;} } /* ---------- Hero ---------- */ .hero{position:relative; color:#fff; overflow:hidden; background:#11192a; padding:96px 24px 104px;} .hero-bg-wrap{position:absolute; inset:0; overflow:hidden;} .hero-bg{position:absolute; inset:-4%; background-image:linear-gradient(180deg, rgba(17,25,42,.74) 0%, rgba(17,25,42,.84) 55%, rgba(17,25,42,.95) 100%), url('/assets/hero-skyscrapers.jpeg'); background-size:cover; background-position:center;} @media (prefers-reduced-motion: no-preference){ .hero-bg{ animation:heroDrift 28s ease-in-out infinite alternate; } } @keyframes heroDrift{0%{transform:scale(1.04)}50%{transform:scale(1.07) translate3d(-.7%,-.5%,0)}100%{transform:scale(1.05) translate3d(.7%,.4%,0)}} /* alt hero photo for the editorial / article pages (same overlay, different image — gives the learning content its own look while the homepage + core pages keep the original hero) */ .hero-bg.alt-towers{background-image:linear-gradient(180deg, rgba(17,25,42,.74) 0%, rgba(17,25,42,.84) 55%, rgba(17,25,42,.95) 100%), url('/assets/hero-towers-dark.jpeg');} .sec-dark.towers-bg{background-image:linear-gradient(180deg, rgba(17,25,42,.82) 0%, rgba(17,25,42,.92) 100%), url('/assets/hero-towers-dark.jpeg'); background-size:cover; background-position:center;} .hero-inner{position:relative; max-width:920px; margin:0 auto; text-align:center;} .hero-eyebrow{display:inline-block; border:1px solid rgba(255,255,255,.32); padding:9px 22px; font-size:12px; letter-spacing:.22em; font-weight:500; color:#fff; border-radius:2px; margin-bottom:22px; text-transform:uppercase;} h1.hero-title{font-family:'DM Sans',sans-serif; font-weight:700; font-size:54px; line-height:1.05; letter-spacing:-1.4px; margin:0; color:#fff;} h1.hero-title .accent{font-family:'Playfair Display', serif; font-style:italic; font-weight:600; color:var(--gold-soft); letter-spacing:-1px;} .hero-sub{margin:22px auto 0; max-width:640px; font-size:19px; line-height:1.55; color:#dbe2ed; text-wrap:pretty;} .hero-ctas{margin-top:34px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;} /* ---------- Buttons (from /vsl) ---------- */ /* gold CTA: NAVY text for WCAG AA — white-on-gold was 3.48 (fail). Navy needs a slightly LIGHTER gold to clear 4.5 (deepening gold would LOWER navy contrast), so the dark stop is nudged #a8843d -> #b8943f. Measured navy-on-gold ~5.3. Brand-gold call (navy default / pick a deliberate gold) flagged to Mark. */ .btn-gold{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 34px; font-size:16px; font-weight:700; color:var(--ink); background:linear-gradient(180deg, #c2a04a 0%, var(--gold-2) 100%); border-radius:8px; box-shadow:0 14px 30px rgba(168,132,61,.35); transition:transform .16s ease, box-shadow .2s ease; cursor:pointer;} .btn-gold:hover{transform:translateY(-1px); box-shadow:0 18px 38px rgba(168,132,61,.45);} .btn-ghost{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 30px; font-size:16px; font-weight:600; color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:8px; transition:background .15s, border-color .15s;} .btn-ghost:hover{background:rgba(255,255,255,.08); border-color:#fff;} .btn-dark{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; font-size:16px; font-weight:700; color:#fff; background:linear-gradient(180deg,#1d2c44,#15233a); border:1px solid rgba(168,132,61,.4); border-radius:8px; transition:transform .12s;} .btn-dark:hover{transform:translateY(-1px);} /* Alliance member seal — home teaser: small, centered, links to /alliance with a quiet hover lift */ .alliance-seal{display:block; width:88px; margin:0 auto 20px; line-height:0;} .alliance-seal img{width:88px; height:88px; display:block;} .alliance-seal:focus-visible{outline:2px solid var(--gold); outline-offset:5px;} @media (prefers-reduced-motion: no-preference){ .alliance-seal{transition:transform .22s cubic-bezier(.2,.7,.2,1), filter .22s ease;} .alliance-seal:hover{transform:translateY(-3px) scale(1.05); filter:drop-shadow(0 8px 20px rgba(168,132,61,.38));} } /* ---------- Sections ---------- */ .sec{padding:var(--space-section) 56px;} .sec-soft{background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .sec-dark{background:linear-gradient(180deg,#15233a,#11192a); color:#fff;} .sec-inner{max-width:1080px; margin:0 auto;} .sec h2{font-family:'DM Sans',sans-serif; font-weight:700; font-size:36px; line-height:1.1; letter-spacing:-.8px; color:var(--ink); margin:0 0 18px;} .sec-dark h2{color:#fff;} .sec-dark .kicker{color:var(--gold-soft);} .sec p.lead{font-size:19px; line-height:1.6; color:var(--body); max-width:680px;} .sec-dark p.lead{color:#c9d2e0;} .sec-center{text-align:center;} .sec-center .sec-inner{display:flex; flex-direction:column; align-items:center;} /* Centered section-intro block (kicker + headline + lead). Apply to the intro wrapper only — card grids / forms / two-column content below stay full-width + left. This is the site-wide convention for marketing-page section headers (article bodies stay left). */ .sec-head{text-align:center; max-width:760px; margin-left:auto; margin-right:auto;} .sec-head > .lead, .sec-head p.lead{margin-left:auto; margin-right:auto;} /* ---------- Credibility bar ---------- */ .credbar{background:#fff; border-bottom:1px solid var(--line); padding:14px 40px;} .credbar-inner{max-width:1240px; margin:0 auto; display:flex; gap:7px 26px; justify-content:center; flex-wrap:wrap; align-items:center; text-align:center; color:var(--muted); font-size:13px; line-height:1.4; letter-spacing:.02em;} .credbar-inner strong{color:var(--ink); font-weight:600;} /* ---------- Cards / grids ---------- */ .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:32px;} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;} .card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:32px 30px; box-shadow:0 1px 2px rgba(20,30,55,.04);} .card .ic{width:44px;height:44px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:18px} .card .ic svg{width:24px;height:24px} .card h3{font-size:21px; color:var(--ink); margin:0 0 10px; letter-spacing:-.3px;} .card p{font-size:15.5px; line-height:1.6; color:var(--body); margin:0;} /* ---------- Two funnel paths ---------- */ .paths{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;} .path{border:1px solid var(--line); border-radius:16px; padding:36px 34px; background:#fff; display:flex; flex-direction:column;} .path.is-dark{background:linear-gradient(180deg,#1d2c44,#15233a); color:#fff; border-color:rgba(168,132,61,.4);} .path h3{font-size:24px; margin:0 0 8px; letter-spacing:-.4px;} .path.is-dark h3{color:#fff;} .path p{font-size:15.5px; line-height:1.6; margin:0 0 24px; flex:1;} .path.is-dark p{color:#c9d2e0;} .path.is-primary{border-top:3px solid var(--gold); box-shadow:0 18px 44px rgba(20,30,55,.10);} .path.is-primary h3{color:var(--ink);} /* ---------- Investor-library funnel banner (article -> gated library) ---------- */ .lib-funnel{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap; padding:30px 34px;border:1px solid rgba(168,132,61,.35);border-radius:14px; background:linear-gradient(180deg,#fbfaf6,#f4f1e9);box-shadow:0 16px 40px rgba(20,30,55,.07)} .lib-funnel .lib-funnel-txt{flex:1 1 360px} .lib-funnel h2{font-size:26px;color:var(--ink);margin:6px 0 8px} .lib-funnel p{font-size:15px;color:var(--body);margin:0;max-width:560px} .lib-funnel .btn-gold{flex:0 0 auto;white-space:nowrap} /* ---------- Honest trade-offs (reused from /vsl .trade-list) ---------- */ .trade-list{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:14px;} .trade-list li{display:grid; grid-template-columns:auto 1fr; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:15.5px; line-height:1.5;} .trade-list li:last-child{border-bottom:0;} .trade-list .tl-ico{width:22px; height:22px; color:var(--gold); flex:0 0 22px;} .trade-list strong{color:var(--ink); font-weight:600;} /* opt-in: slight desktop indent so the list sits more centered under the heading */ @media (min-width:820px){ .trade-list--inset{margin-left:clamp(0px,5vw,72px);} } /* ---------- FAQ ---------- */ .faq{max-width:820px; margin:0 auto;} .faq details{border-bottom:1px solid var(--line); padding:20px 0;} .faq summary{font-size:18px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px;} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+'; color:var(--gold); font-weight:700; font-size:22px; line-height:1;} .faq details[open] summary::after{content:'\2013';} .faq details p{font-size:16px; line-height:1.65; color:var(--body); margin:14px 0 0;} /* ---------- Big CTA block (reused from /vsl .cta-primary) ---------- */ .cta-block{margin:0 auto; max-width:900px; background:linear-gradient(180deg,#1d2c44 0%, #15233a 100%); border:1px solid rgba(168,132,61,.4); border-radius:14px; padding:48px 40px; text-align:center; color:#fff; box-shadow:0 26px 60px rgba(20,30,55,.2);} .cta-block .kicker{color:var(--gold-soft);} .cta-block h2{font-size:34px; color:#fff; margin:0 0 12px;} .cta-block p{font-size:17px; color:#c9d2e0; max-width:540px; margin:0 auto 26px;} /* ---------- Footer (verbatim from /vsl approved footer) ---------- */ .footer{background:linear-gradient(180deg,#0b1322 0%, #060c18 100%);color:#a8b1c2;padding:88px 56px 64px;text-align:center} .footer .brand{display:inline-flex;margin-bottom:40px} .footer .brand img{height:64px} .footer-nav{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:40px} .footer-nav a{color:#c9d2e0;font-size:14px;font-weight:500} .footer-nav a:hover{color:#fff} /* secondary footer row: free public guides (SEO + reachability for the article cluster) */ .footer-guides{display:flex;gap:8px 18px;justify-content:center;align-items:center;flex-wrap:wrap;margin:-22px 0 38px;font-size:12.5px} .footer-guides span{color:#7d8aa0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .footer-guides a{color:#9aa6ba;font-weight:500} .footer-guides a:hover{color:#fff} .footer-guides a:focus-visible{outline-color:#fff} .footer-addr{font-size:19px;color:#dbe2ed;line-height:1.9} .footer-addr .div{margin:0 14px;color:#3f4a60} /* footer disclosure: 14px HELD; color lifted #5d6a82 -> #7d8aa0 so the legal fine print clears WCAG AA on the dark footer (3.59 -> ~5.6). Strengthens the disclosure (more legible, same size + words). Family B. */ .footer-fine{max-width:1080px;margin:48px auto 0;font-size:14px;line-height:1.75;color:#7d8aa0;text-align:center;} .footer-fine p{margin:0 0 16px} .footer-fine p:last-child{margin-bottom:0} .footer-fine a{color:#7a8aa4;text-decoration:underline} .footer-copy{margin-top:48px;font-size:15px;color:#5d6a82} /* ---------- Scroll reveal (from /vsl) ---------- */ @media (prefers-reduced-motion: no-preference){ .reveal{opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);} .reveal.in{opacity:1; transform:none} .reveal[data-delay="1"].in{transition-delay:.08s} .reveal[data-delay="2"].in{transition-delay:.16s} .reveal[data-delay="3"].in{transition-delay:.24s} } /* ---------- Responsive ---------- */ @media (max-width:900px){ .hero{padding:64px 18px 72px} h1.hero-title{font-size:36px; letter-spacing:-1px} .hero-sub{font-size:17px} .sec{padding:var(--space-section-sm) 24px} .sec h2{font-size:28px} .grid-2,.grid-3,.paths{grid-template-columns:1fr; gap:20px} .credbar{padding:12px 24px} .credbar-inner{gap:7px 16px; font-size:12.5px} .cta-block{padding:34px 24px} .cta-block h2{font-size:26px} .footer{padding:64px 24px 56px} } /* ---------- CTA reassurance microcopy ("what happens next") ---------- */ .cta-note{margin:16px 0 0; font-size:13px; letter-spacing:.02em; color:var(--muted); display:flex; gap:18px; justify-content:center; flex-wrap:wrap;} .cta-note span{display:inline-flex; align-items:center; gap:6px;} .cta-note svg{width:14px; height:14px; color:var(--gold); flex:0 0 14px;} .hero .cta-note{color:#cdd6e3;} .hero .cta-note svg{color:var(--gold-soft);} /* ---------- Sticky mobile CTA bar (mirrors the nav CTA; injected by site.js) ---------- */ .mobile-cta-bar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(27,34,49,.97); -webkit-backdrop-filter:saturate(140%) blur(6px); backdrop-filter:saturate(140%) blur(6px); border-top:1px solid rgba(168,132,61,.4); box-shadow:0 -8px 24px rgba(10,15,28,.32);} .mobile-cta-bar a{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px; font-size:16px; font-weight:700; color:#fff; background:linear-gradient(180deg,var(--gold-2),var(--gold)); border-radius:8px;} @media (max-width:760px){ .mobile-cta-bar.ready{display:block;} body.has-mobile-cta{padding-bottom:80px;} } /* ---------- About bio ---------- */ .bio-top{display:grid; grid-template-columns:200px 1fr; gap:34px; align-items:center;} .bio-photo{margin:0;} .bio-photo img,.bio-photo-ph{width:200px; height:200px; border-radius:50%; object-fit:cover; border:1px solid var(--line); display:block;} .bio-photo-ph{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:var(--soft); color:var(--muted); font-size:14px; line-height:1.4;} .bio-photo-ph small{color:var(--gold); font-size:11px; margin-top:8px; letter-spacing:.02em;} .bio-body{margin-top:30px;} .bio-body p{font-size:16.5px; line-height:1.72; color:var(--body); margin:0 0 16px;} .bio-body strong{color:var(--ink);} .bio-personal{color:var(--muted); font-style:italic;} .hero-role{margin:14px 0 0; font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--gold-soft);} /* ---------- Brand wordmark (logo A: Mark DiMercurio) ---------- */ .brand-mark{display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; line-height:1; text-decoration:none;} .brand-mark .bm-row{display:inline-flex; align-items:baseline; gap:6px;} .bm-first{font-family:'DM Sans',sans-serif; font-weight:700; font-size:23px; letter-spacing:.005em; color:#fff;} .bm-last{font-family:'Playfair Display',serif; font-style:italic; font-weight:600; font-size:25px; color:var(--gold-soft);} .brand-affil{font-family:'DM Sans',sans-serif; font-size:9.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:#9aa6b8;} @media (max-width:960px){ .bm-first{font-size:21px} .bm-last{font-size:23px} .brand-affil{font-size:9px} } /* ---------- Co-brand lockup: Mark DiMercurio wordmark + divider + 1031 logo ---------- */ .brand-lockup{display:inline-flex; align-items:center; gap:14px; text-decoration:none; line-height:1;} .brand-lockup .bm-row{display:inline-flex; align-items:baseline; gap:6px;} .brand-div{flex:0 0 1px; width:1px; height:30px; background:rgba(255,255,255,.2);} .brand-cosign{height:34px; width:auto; display:block;} @media (max-width:960px){ .brand-lockup{gap:10px} .brand-cosign{height:28px} .brand-div{height:26px} } @media (max-width:430px){ .brand-div,.brand-cosign{display:none} } /* very tight: keep just the wordmark */ /* ---------- Alliance: managing-partners grid ---------- */ .partner-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:36px;} .partner{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px; text-align:center;} .partner-photo,.partner-photo-ph{width:104px; height:104px; border-radius:50%; object-fit:cover; margin:0 auto 16px; display:block; border:1px solid var(--line);} .partner-photo-ph{display:flex; align-items:center; justify-content:center; background:var(--soft); color:var(--gold); font-family:'Playfair Display',serif; font-style:italic; font-size:28px;} .partner h3{font-size:19px; color:var(--ink); margin:0 0 4px;} .partner .role{font-size:13px; letter-spacing:.04em; color:var(--gold); font-weight:600; text-transform:uppercase; margin:0 0 12px;} .partner p{font-size:14.5px; line-height:1.6; color:var(--body); margin:0;} .partner-note{text-align:center; color:var(--muted); font-size:13px; margin-top:22px;} @media (max-width:900px){ .partner-grid{grid-template-columns:1fr; gap:18px} } /* ---------- Alliance: member badge + full partner bios ---------- */ .alliance-badge{width:132px; height:132px; margin:0 auto 22px; display:block;} .partners{max-width:880px; margin:8px auto 0;} .partner-bio{display:grid; grid-template-columns:160px 1fr; gap:34px; align-items:start; padding:36px 0; border-top:1px solid var(--line);} .partner-bio:first-child{border-top:0; padding-top:8px;} .partner-bio .pb-photo{width:160px; height:160px; border-radius:50%; object-fit:cover; border:1px solid var(--line); display:block;} .partner-bio h3{font-size:22px; color:var(--ink); margin:0; letter-spacing:-.3px;} .partner-bio .pb-role{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:5px 0 14px;} .partner-bio p{font-size:15px; line-height:1.65; color:var(--body); margin:0 0 12px;} .partner-bio p:last-child{margin-bottom:0;} @media (max-width:760px){ .partner-bio{grid-template-columns:1fr; gap:16px; padding:28px 0;} .partner-bio .pb-photo{width:120px; height:120px;} } /* ============================ Phase 2 components ============================ */ /* ---------- Forms (shared; /contact keeps its own inline styles) ---------- */ .form-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px 26px; box-shadow:0 1px 2px rgba(20,30,55,.04);} .field{margin-bottom:15px;} .field label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px;} .field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{width:100%; padding:12px 14px; font-size:15px; font-family:inherit; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; outline:none; transition:border-color .15s, box-shadow .15s;} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(168,132,61,.16);} .field-check{display:flex; gap:10px; align-items:flex-start; margin-bottom:16px;} .field-check input{margin-top:3px; width:16px; height:16px; accent-color:var(--gold); flex:0 0 16px;} .field-check label{font-size:13.5px; line-height:1.5; color:var(--body); font-weight:500;} .form-err{display:none; color:#b3261e; font-size:13px; margin:10px 0 0;} .form-note{font-size:11.5px; color:var(--muted); margin:14px 0 0; text-align:center;} .btn-gold[disabled]{opacity:.6; cursor:default;} /* ---------- Gated reveal (lead magnet / accredited gate) ---------- */ .gate-card{background:#fff; border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:12px; padding:28px 26px; box-shadow:0 18px 44px rgba(20,30,55,.12);} .gate-kicker{font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#8a6a28; margin-bottom:10px;} .gate-success{display:none; text-align:center;} .gate-unlocked .gate-form{display:none;} .gate-unlocked .gate-success{display:block;} /* ---------- Resource hub ---------- */ .res-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;} .res-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px;} .res-card h3{font-size:18px; color:var(--ink); margin:0 0 8px;} .res-card p{font-size:14.5px; line-height:1.6; color:var(--body); margin:0 0 18px; flex:1;} .res-card .rc-link{font-size:14px; font-weight:600; color:#8a6a28;} .guide{display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:center;} .guide-cover{aspect-ratio:3/4; border-radius:10px; background:linear-gradient(160deg, rgba(29,44,68,.78), rgba(17,25,42,.92)), url('/assets/hero-skyscrapers.jpeg'); background-size:cover; background-position:center; color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:26px; box-shadow:0 24px 50px rgba(20,30,55,.3); border:1px solid rgba(168,132,61,.4);} .guide-cover .gc-k{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:14px;} .guide-cover .gc-t{font-family:'Playfair Display',serif; font-style:italic; font-size:22px; line-height:1.25;} @media (max-width:760px){ .guide{grid-template-columns:1fr; gap:24px; justify-items:center;} .res-grid{grid-template-columns:1fr;} } /* ---------- Blog list + article (cornerstone) ---------- */ .post-list{max-width:780px; margin:32px auto 0;} .post-item{padding:24px 0; border-bottom:1px solid var(--line);} .post-item .pi-meta{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:8px;} .post-item h3{font-size:22px; color:var(--ink); margin:0 0 8px; letter-spacing:-.3px;} .post-item p{font-size:15.5px; line-height:1.6; color:var(--body); margin:0 0 10px;} .post-item .pi-more{font-size:14px; font-weight:600; color:#8a6a28;} .article{max-width:760px; margin:0 auto;} .article .lede{font-size:19px; line-height:1.62; color:var(--body);} .article h2{font-size:26px; color:var(--ink); margin:34px 0 12px; letter-spacing:-.4px;} .article h3{font-size:19px; color:var(--ink); margin:24px 0 8px;} .article p,.article li{font-size:16.5px; line-height:1.72; color:var(--body);} .article ul{padding-left:22px;} .article a{color:#8a6a28; font-weight:600; border-bottom:1px solid rgba(138,106,40,.45);} /* darker gold = AA 5:1 on white (aging-eye audience) */ @media (max-width:760px){ .bio-top{grid-template-columns:1fr; gap:20px; justify-items:start;} } /* keyboard 'skip to content' link — visible only on focus (WCAG 2.4.1) */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--gold,#a8843d);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none} .skip-link:focus{left:0} /* ============================ Phase 3 — UI polish ============================ CSS-only: visible keyboard focus, restrained hover feedback, motion-safe. Touches NO copy or disclosures (does not re-trigger Concorde review). Reusable timing tokens (existing rules keep their literals; use these going forward). */ :root{ --t-fast:.15s; --t-mid:.3s; --t-slow:.8s; } /* ---- Visible keyboard focus everywhere (WCAG 2.4.7) ---- Low-specificity baseline via :where(); brand surfaces refine the ring color below. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:3px; } .btn-gold:focus-visible{ outline-color:var(--ink); outline-offset:3px; } /* dark ring reads on the gold fill */ .nav-links a:focus-visible, .nav-cta:focus-visible, .footer-nav a:focus-visible, .footer-fine a:focus-visible{ outline-color:#fff; } /* white ring on dark surfaces */ .skip-link:focus-visible{ outline:2px solid #fff; outline-offset:-2px; } /* ---- Restrained micro-interactions (premium-fintech: near-invisible, never flashy) ---- */ .card, .res-card{ transition:box-shadow var(--t-mid) ease, border-color var(--t-mid) ease; } .card:hover, .res-card:hover{ box-shadow:0 10px 26px rgba(20,30,55,.10); border-color:#dce0e6; } .res-card .rc-link, .post-item .pi-more, .article a{ transition:color var(--t-fast) ease, border-color var(--t-fast) ease; } .res-card .rc-link:hover, .post-item .pi-more:hover{ color:#8a6a28; text-decoration:underline; } .article a:hover{ color:#6f5520; border-bottom-color:#6f5520; } /* darker on hover — clear feedback, still AA */ .article a:visited{ color:#6f5520; } /* distinct visited color aids long-read wayfinding (senior-UX) */ @media (prefers-reduced-motion: no-preference){ .card, .res-card{ transition:box-shadow var(--t-mid) ease, border-color var(--t-mid) ease, transform var(--t-mid) ease; } .card:hover, .res-card:hover{ transform:translateY(-2px); } } /* ---- Mobile nav: never overflow a short viewport ---- */ @media (max-width:960px){ .nav-links.is-open{ max-height:calc(100dvh - 64px); overflow-y:auto; } } /* ---- Form submitting state (paired with the "Sending…" label set by site.js) ---- */ .btn-gold[aria-busy="true"]{ opacity:.7; cursor:progress; } /* ============================================================================ Home hero — immersive "the fog clears" treatment + intro motion (Task 9, 2026-06-23) Scoped to .hero--home so interior-page heroes (.hero + .alt-towers) are untouched. Photo = cphotos-LWwlbpsaIvI (Unsplash): glass towers converging into a hazy sky — the brand thesis (clarity emerging from the fog) sits literally behind the headline. Image is web-sized JPEG (hero-fog-towers.jpg ~348KB; -sm.jpg ~242KB on mobile). ⚠️ Photo licensing: Unsplash (royalty-free) — confirm + document the source before prod. ========================================================================== */ .hero--home{ min-height:80vh; display:flex; align-items:center; padding-top:80px; padding-bottom:84px; } /* EXPOSED treatment: photo's true cool color comes through; only a soft scrim behind the text + light top/bottom bands carry legibility (vs. the old heavy navy wash). */ .hero-bg.fog-towers{ background-image: radial-gradient(76% 52% at 50% 46%, rgba(9,14,24,.52) 0%, rgba(9,14,24,.22) 50%, rgba(9,14,24,0) 78%), linear-gradient(180deg, rgba(11,17,28,.56) 0%, rgba(11,17,28,.1) 24%, rgba(11,17,28,.07) 60%, rgba(8,13,22,.82) 100%), url('/assets/hero-fog-towers.jpg'); background-size:cover; background-position:center 30%; } /* extra vertical headroom so the scroll-parallax can move without revealing an edge */ .hero--home .hero-bg-wrap{ inset:-10% 0; } .hero--home .hero-title, .hero--home .hero-sub{ text-shadow:0 2px 30px rgba(6,10,18,.62), 0 1px 2px rgba(6,10,18,.5); } .hero--home h1.hero-title{ font-size:60px; letter-spacing:-1.6px; } /* subtle scroll cue (decorative, aria-hidden) */ .hero-scroll-cue{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:block; width:24px; height:24px; color:rgba(255,255,255,.5); cursor:pointer; pointer-events:auto; transition:color .2s ease; } .hero-scroll-cue:hover{ color:rgba(255,255,255,.9); } .hero-scroll-cue svg{ width:100%; height:100%; display:block; } html{ scroll-behavior:smooth; } #start{ scroll-margin-top:88px; } @media (prefers-reduced-motion: no-preference){ /* stronger, slower Ken-Burns drift on the home hero (overrides the base .hero-bg drift); the scroll parallax (site.js) moves the wrap, so the two transforms never collide. */ .hero--home .hero-bg{ animation:heroDriftHome 30s ease-in-out infinite alternate; } .hero--home .hero-eyebrow{ animation:heroRise .8s .05s both cubic-bezier(.2,.7,.2,1); } .hero--home h1.hero-title{ animation:heroRise .9s .16s both cubic-bezier(.2,.7,.2,1); } .hero--home .hero-sub{ animation:heroRise .9s .3s both cubic-bezier(.2,.7,.2,1); } .hero--home .hero-ctas{ animation:heroRise .9s .44s both cubic-bezier(.2,.7,.2,1); } .hero--home .cta-note{ animation:heroRise .9s .58s both cubic-bezier(.2,.7,.2,1); } .hero-scroll-cue{ opacity:0; animation:cueIn .7s 1.1s forwards, cueBob 2.6s 1.9s ease-in-out infinite; } } @keyframes heroRise{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} } @keyframes cueIn{ to{opacity:.6} } @keyframes cueBob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,6px)} } @keyframes heroDriftHome{ 0%{ transform:scale(1.06) translate3d(-1.2%,-1%,0) } 50%{ transform:scale(1.11) translate3d(1.2%,.8%,0) } 100%{ transform:scale(1.07) translate3d(-.8%,1.2%,0) } } @media (max-width:900px){ .hero--home{ min-height:82vh; } .hero--home h1.hero-title{ font-size:38px; letter-spacing:-1px; } .hero-bg.fog-towers{ background-image: radial-gradient(96% 50% at 50% 44%, rgba(9,14,24,.55) 0%, rgba(9,14,24,.24) 52%, rgba(9,14,24,0) 80%), linear-gradient(180deg, rgba(11,17,28,.6) 0%, rgba(11,17,28,.14) 24%, rgba(11,17,28,.1) 60%, rgba(8,13,22,.86) 100%), url('/assets/hero-fog-towers-sm.jpg'); background-position:center 28%; } } /* ============================ Page components (extracted from inline