/* =================================================================== Corey Watts — Executive Personal Brand Shared stylesheet — Direction A "Executive Command Center" =================================================================== */ /* ── Google Fonts loaded in each page's ─────────────────────── */ :root{ --navy:#0c2340; --navy-deep:#081a31; --surface:#102b4c; --surface-2:#13325a; --text:#f4f7fb; --muted:#9fb3c8; --line:rgba(159,179,200,.16); --teal:#2dd4bf; --gold:#f5c542; --serif:"IBM Plex Serif",Georgia,serif; --sans:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --radius:2px; --radius-md:6px; } /* ── Reset & base ───────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth} body{ font-family:var(--sans);color:var(--text);background:var(--navy);line-height:1.55; background-image: radial-gradient(900px 600px at 78% -8%, rgba(45,212,191,.14), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(31,90,160,.18), transparent 55%), linear-gradient(180deg,var(--navy) 0%, var(--navy-deep) 100%); background-attachment:fixed; } /* subtle grain overlay */ body::after{ content:"";position:fixed;inset:0;pointer-events:none;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a{color:inherit;text-decoration:none} /* Visible focus ring for keyboard users */ :focus-visible{ outline:2px solid var(--teal);outline-offset:3px;border-radius:2px; } /* Improve muted text contrast — base --muted (#9fb3c8) is ~4.2:1 on --navy; acceptable for body text, but fine for non-essential labels */ img{max-width:100%} /* ── Layout ─────────────────────────────────────────────────────────── */ .wrap{max-width:1180px;margin:0 auto;padding:0 40px} /* ── Navigation ─────────────────────────────────────────────────────── */ nav{ display:flex;align-items:center;justify-content:space-between; padding:26px 0;border-bottom:1px solid var(--line); } .brand{display:flex;flex-direction:column} .brand b{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:.2px} .brand span{font-family:var(--mono);font-size:10.5px;letter-spacing:2.5px;color:var(--muted);text-transform:uppercase;margin-top:2px} .navlinks{display:flex;gap:30px;align-items:center} .navlinks a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:400;letter-spacing:.2px;transition:color .18s} .navlinks a:hover{color:var(--text)} .navlinks a.active{color:var(--teal)} .cta-nav{ border:1px solid var(--teal);color:var(--teal)!important; padding:9px 18px;border-radius:var(--radius);font-size:13px;font-weight:500;letter-spacing:.3px; transition:background .18s, color .18s!important; } .cta-nav:hover,.cta-nav.active{background:var(--teal);color:#04201c!important} /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn{ display:inline-block;padding:13px 24px;border-radius:var(--radius); font-size:14px;font-weight:500;letter-spacing:.3px;text-decoration:none; cursor:pointer;border:none;transition:opacity .18s, transform .12s; } .btn:hover{opacity:.88;transform:translateY(-1px)} .btn.primary{background:var(--teal);color:#04201c} .btn.ghost{border:1px solid var(--line);color:var(--text);background:transparent} .btn.gold{background:var(--gold);color:#1a1000} .btn.sm{padding:9px 18px;font-size:13px} /* ── Status / pulse chip ────────────────────────────────────────────── */ .status{ display:inline-flex;align-items:center;gap:9px; font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;color:var(--teal); border:1px solid rgba(45,212,191,.3);background:rgba(45,212,191,.06); padding:6px 13px;border-radius:var(--radius);text-transform:uppercase; } .dot{ width:7px;height:7px;border-radius:50%;background:var(--teal); box-shadow:0 0 0 0 rgba(45,212,191,.6);animation:pulse 2.4s infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(45,212,191,.5)} 70%{box-shadow:0 0 0 10px rgba(45,212,191,0)} 100%{box-shadow:0 0 0 0 rgba(45,212,191,0)} } /* ── Mono label / knum ───────────────────────────────────────────────── */ .knum{font-family:var(--mono);font-size:11px;color:var(--teal);letter-spacing:2px} .label-gold{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:2px;text-transform:uppercase} .label-muted{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase} /* ── Typography helpers ──────────────────────────────────────────────── */ h1{font-family:var(--serif);font-weight:500;font-size:62px;line-height:1.06;letter-spacing:-.5px} h1 em{font-style:italic;color:var(--teal)} h2.serif{font-family:var(--serif);font-weight:500;font-size:38px;line-height:1.12;letter-spacing:-.3px} h2.serif em{font-style:italic;color:var(--teal)} h3.serif{font-family:var(--serif);font-weight:500;font-size:24px;margin:12px 0 9px} .sub{font-size:18px;color:var(--muted);font-weight:300} .body-lg{font-size:16px;color:var(--muted);font-weight:300;line-height:1.65} .body-sm{font-size:14px;color:var(--muted);font-weight:300} p + p{margin-top:1em} strong{color:var(--text);font-weight:500} /* ── Section spacing ────────────────────────────────────────────────── */ .section{padding:80px 0} .section + .section{border-top:1px solid var(--line)} .section-hd{margin-bottom:48px} .section-hd .eyebrow{margin-bottom:14px} /* ── Credential chips ────────────────────────────────────────────────── */ .cred{display:flex;flex-wrap:wrap;gap:10px} .chip{ font-family:var(--mono);font-size:11.5px;letter-spacing:.8px; color:var(--muted);border:1px solid var(--line);padding:7px 12px; border-radius:var(--radius);background:rgba(255,255,255,.015); } .chip b{color:var(--text);font-weight:500} .chip.teal{border-color:rgba(45,212,191,.3);color:var(--teal);background:rgba(45,212,191,.05)} .chip.gold{border-color:rgba(245,197,66,.3);color:var(--gold);background:rgba(245,197,66,.05)} /* ── Card base ───────────────────────────────────────────────────────── */ .card{ background:linear-gradient(180deg,var(--surface),rgba(16,43,76,.5)); border:1px solid var(--line);border-radius:var(--radius-md);padding:28px; position:relative;overflow:hidden; } .card h3{font-family:var(--serif);font-weight:500;font-size:23px;margin:12px 0 9px} .card p{color:var(--muted);font-size:14.5px;font-weight:300} .card .arrow{color:var(--teal);margin-top:18px;font-size:14px;font-family:var(--mono)} .card-hover{transition:border-color .2s, transform .15s} .card-hover:hover{border-color:rgba(45,212,191,.35);transform:translateY(-2px)} /* ── 3-col grid ─────────────────────────────────────────────────────── */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} /* ── Hero (homepage) ────────────────────────────────────────────────── */ .hero{position:relative;padding:96px 0 70px;overflow:hidden} .topo{position:absolute;inset:0;z-index:0;opacity:.5} .hero-cred{margin-top:54px;position:relative;z-index:1} .heroctas{display:flex;gap:14px;margin-top:34px;position:relative;z-index:1} .hero h1,.hero .sub,.hero .heroctas{position:relative;z-index:1} .hero .status{position:relative;z-index:1} .hero h1{margin:26px 0 0;max-width:14ch} .hero .sub{max-width:62ch;margin-top:24px} /* ── Page hero (inner pages) ────────────────────────────────────────── */ .page-hero{padding:72px 0 56px;border-bottom:1px solid var(--line);position:relative;overflow:hidden} .page-hero .topo{opacity:.25} .page-hero .status{margin-bottom:20px} .page-hero h1{font-size:50px;max-width:20ch;position:relative;z-index:1} .page-hero .sub{max-width:64ch;margin-top:20px;position:relative;z-index:1} /* ── Agent hook band ────────────────────────────────────────────────── */ .hook{ margin:64px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:46px 0;background:rgba(8,26,49,.4); } .hook .lab-tag{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:2px;text-transform:uppercase} .hook h2{font-family:var(--serif);font-weight:500;font-size:30px;margin:12px 0 6px;max-width:24ch} .hook .hsub{color:var(--muted);font-size:15px;max-width:70ch;font-weight:300} .agents{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px} .agent{border:1px solid var(--line);border-radius:4px;padding:16px;background:rgba(255,255,255,.02)} .agent .nm{font-family:var(--mono);font-size:13px;color:var(--teal);letter-spacing:1px} .agent .rl{color:var(--muted);font-size:12.5px;margin-top:5px;font-weight:300} /* ── Footer ─────────────────────────────────────────────────────────── */ footer{ padding:40px 0 60px;color:var(--muted);font-size:12.5px; font-family:var(--mono);letter-spacing:.5px; display:flex;justify-content:space-between;align-items:center; border-top:1px solid var(--line);margin-top:80px; } footer a{color:var(--muted);transition:color .18s} footer a:hover{color:var(--teal)} /* ── Divider ────────────────────────────────────────────────────────── */ .divider{border:none;border-top:1px solid var(--line);margin:64px 0} hr{border:none;border-top:1px solid var(--line)} /* ── Photo placeholder ───────────────────────────────────────────────── */ .photo-placeholder{ background:linear-gradient(160deg, var(--surface-2), var(--surface)); border:1px solid var(--line);border-radius:var(--radius-md); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:1px; text-transform:uppercase; } /* ── Principle item ──────────────────────────────────────────────────── */ .principle{ border-left:2px solid var(--teal);padding:16px 20px; background:rgba(45,212,191,.03);border-radius:0 4px 4px 0; } .principle .p-num{font-family:var(--mono);font-size:10px;color:var(--teal);letter-spacing:2px;margin-bottom:6px} .principle h4{font-family:var(--serif);font-weight:500;font-size:17px;margin-bottom:6px} .principle p{color:var(--muted);font-size:14px;font-weight:300} /* ── Service item ────────────────────────────────────────────────────── */ .service{ border:1px solid var(--line);border-radius:var(--radius-md);padding:32px; background:linear-gradient(160deg,var(--surface),rgba(16,43,76,.4)); transition:border-color .2s; } .service:hover{border-color:rgba(45,212,191,.35)} .service .s-icon{width:40px;height:40px;border:1px solid rgba(45,212,191,.3);border-radius:4px; display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-family:var(--mono);font-size:16px;color:var(--teal)} .service h3{font-family:var(--serif);font-weight:500;font-size:21px;margin-bottom:10px} .service p{color:var(--muted);font-size:14.5px;font-weight:300;line-height:1.65} .service ul{margin-top:14px;padding-left:0;list-style:none} .service ul li{color:var(--muted);font-size:13.5px;padding:6px 0;border-bottom:1px solid var(--line);font-weight:300} .service ul li:last-child{border:none} .service ul li::before{content:"→ ";color:var(--teal);font-family:var(--mono)} /* ── Engagement model card ───────────────────────────────────────────── */ .engage{ border:1px solid var(--line);border-radius:var(--radius-md);padding:28px; background:rgba(255,255,255,.02); } .engage .e-label{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-bottom:12px} .engage h4{font-family:var(--serif);font-weight:500;font-size:20px;margin-bottom:10px} .engage p{color:var(--muted);font-size:14px;font-weight:300} /* ── Framework badge ────────────────────────────────────────────────── */ .fw-badge{ display:flex;align-items:center;gap:14px;padding:16px 20px; border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.015); } .fw-badge .fw-icon{font-family:var(--mono);font-size:10px;color:var(--teal);letter-spacing:1px;border:1px solid rgba(45,212,191,.3);padding:4px 8px;border-radius:2px;white-space:nowrap} .fw-badge p{color:var(--muted);font-size:13.5px;font-weight:300} /* ── CTA band ────────────────────────────────────────────────────────── */ .cta-band{ background:linear-gradient(135deg,rgba(45,212,191,.08),rgba(16,43,76,.6)); border:1px solid rgba(45,212,191,.2);border-radius:var(--radius-md); padding:56px 64px;text-align:center;margin:80px 0; } .cta-band h2{font-family:var(--serif);font-weight:500;font-size:32px;margin-bottom:14px} .cta-band p{color:var(--muted);font-size:16px;max-width:56ch;margin:0 auto 28px;font-weight:300} .cta-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ── Architecture diagram styles ─────────────────────────────────────── */ .arch-diagram{ background:rgba(8,26,49,.6);border:1px solid var(--line);border-radius:var(--radius-md); padding:40px;position:relative;overflow:hidden; } .arch-diagram svg{width:100%;height:auto;display:block} /* ── Control item ────────────────────────────────────────────────────── */ .control{ display:flex;gap:20px;padding:24px;border:1px solid var(--line);border-radius:4px; background:rgba(255,255,255,.02);align-items:flex-start; } .control .c-icon{ flex-shrink:0;width:36px;height:36px;border:1px solid rgba(45,212,191,.3); border-radius:4px;display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:12px;color:var(--teal); } .control h4{font-family:var(--serif);font-weight:500;font-size:16px;margin-bottom:5px} .control p{color:var(--muted);font-size:13.5px;font-weight:300} .control .principle-link{font-family:var(--mono);font-size:10.5px;color:var(--gold);letter-spacing:1px;margin-top:7px;text-transform:uppercase} /* ── Article card ────────────────────────────────────────────────────── */ .article-card{ border:1px solid var(--line);border-radius:var(--radius-md);padding:28px 28px 24px; background:linear-gradient(180deg,var(--surface),rgba(16,43,76,.4)); display:flex;flex-direction:column;gap:12px; transition:border-color .2s, transform .15s; } .article-card:hover{border-color:rgba(45,212,191,.3);transform:translateY(-2px)} .article-card .a-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;color:var(--teal);text-transform:uppercase} .article-card h3{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.25} .article-card .a-desc{color:var(--muted);font-size:14px;font-weight:300;line-height:1.6;flex:1} .article-card .a-meta{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.5px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)} .article-card .read-link{color:var(--teal);font-family:var(--mono);font-size:12px;letter-spacing:.5px} /* ── Testimonial ─────────────────────────────────────────────────────── */ .testimonial{ border:1px solid var(--line);border-radius:var(--radius-md);padding:32px; background:linear-gradient(180deg,var(--surface),rgba(16,43,76,.5)); position:relative; } .testimonial::before{ content:"\201C";font-family:var(--serif);font-size:72px;line-height:.6; color:rgba(45,212,191,.2);position:absolute;top:24px;left:28px; } .testimonial blockquote{ font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.65; color:var(--text);padding-top:28px;font-weight:400; } .testimonial .attr{margin-top:20px;display:flex;flex-direction:column;gap:3px} .testimonial .attr-name{font-family:var(--mono);font-size:12px;color:var(--teal);letter-spacing:.5px} .testimonial .attr-role{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.3px} /* ── Win / accomplishment ────────────────────────────────────────────── */ .win{ border-left:2px solid var(--gold);padding:20px 24px; background:rgba(245,197,66,.02);border-radius:0 4px 4px 0; } .win .w-num{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:2px;margin-bottom:8px} .win h4{font-family:var(--serif);font-weight:500;font-size:17px;margin-bottom:6px} .win p{color:var(--muted);font-size:13.5px;font-weight:300;line-height:1.6} .win .w-metric{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.5px;margin-top:8px} /* ── Contact path card ───────────────────────────────────────────────── */ .contact-path{ border:1px solid var(--line);border-radius:var(--radius-md);padding:36px; background:linear-gradient(160deg,var(--surface),rgba(16,43,76,.4)); display:flex;flex-direction:column;gap:14px; } .contact-path .cp-icon{ width:44px;height:44px;border:1px solid rgba(45,212,191,.3);border-radius:4px; display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px;color:var(--teal); } .contact-path h3{font-family:var(--serif);font-weight:500;font-size:22px} .contact-path p{color:var(--muted);font-size:14.5px;font-weight:300;line-height:1.65} .contact-path .cp-detail{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.5px} /* ── Media kit block ─────────────────────────────────────────────────── */ .media-kit{ background:linear-gradient(135deg,rgba(8,26,49,.8),rgba(19,50,90,.6)); border:1px solid var(--line);border-radius:var(--radius-md);padding:40px; display:flex;gap:40px;align-items:flex-start; } .media-kit .mk-photo{ flex-shrink:0;width:140px;height:176px; background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--line);border-radius:4px; display:flex;align-items:center;justify-content:center; flex-direction:column;gap:8px;color:var(--muted); font-family:var(--mono);font-size:10px;letter-spacing:1px;text-align:center; } .media-kit .mk-body{flex:1} .media-kit h3{font-family:var(--serif);font-weight:500;font-size:22px;margin-bottom:10px} .media-kit .mk-bio{color:var(--muted);font-size:14.5px;font-weight:300;line-height:1.65;margin-bottom:20px} .media-kit .mk-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px} /* ── Responsive ─────────────────────────────────────────────────────── */ @media(max-width:900px){ .grid-3,.grid-4{grid-template-columns:1fr 1fr} .agents{grid-template-columns:1fr 1fr} h1{font-size:44px} h2.serif{font-size:30px} .page-hero h1{font-size:38px} .media-kit{flex-direction:column} .cta-band{padding:40px 28px} } @media(max-width:600px){ .wrap{padding:0 20px} .grid-3,.grid-2,.grid-4,.agents{grid-template-columns:1fr} .navlinks{gap:18px} h1{font-size:36px} /* Stack hero CTAs on mobile */ .heroctas{flex-direction:column;align-items:flex-start} /* CTA band: single-column buttons */ .cta-band .btns{flex-direction:column;align-items:center} /* Prevent nav overflow */ nav{flex-wrap:wrap;gap:16px;padding:18px 0} } @media(max-width:480px){ /* Hide text nav links at smallest; keep CTA button */ .navlinks a:not(.cta-nav){font-size:0;letter-spacing:0;padding:0} /* Reduce headline further */ h1{font-size:28px} .page-hero h1{font-size:26px} /* Stack footer */ footer{flex-direction:column;gap:18px;text-align:center} footer div{flex-wrap:wrap;justify-content:center;gap:14px} /* Focus states for accessibility */ }