/* ============================================================ Affinity Care Solutions — federal IT capabilities site Single shared stylesheet. To add a page: copy any .html, keep + header + footer, swap the
content. ============================================================ */ :root{ --ink: #0A1A2F; /* deep navy — hero / footer bg */ --ink-2: #102740; /* raised panel on dark */ --paper: #FFFFFF; --mist: #F4F6F9; /* light section bg */ --line: #DCE3EC; /* hairline on light */ --line-d: rgba(255,255,255,.13); /* hairline on dark */ --text: #0E1B2A; /* body on light */ --muted: #566576; /* secondary on light */ --muted-d:#9FB2C6; /* secondary on dark */ --steel: #2E6FB0; /* primary accent / link / CTA */ --steel-2:#3C86CF; /* hover */ --signal: #1F9D6B; /* status tick — operational green */ --gold: #C7A24A; /* PRIMARY NAICS marker only */ --maxw: 1120px; --pad: clamp(20px, 5vw, 64px); --radius: 10px; --sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --disp: "Space Grotesk", var(--sans); --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; } a{ color:var(--steel); text-decoration:none; } a:hover{ color:var(--steel-2); } /* visible keyboard focus everywhere */ :focus-visible{ outline:2px solid var(--steel-2); outline-offset:3px; border-radius:3px; } .skip{ position:absolute; left:-999px; top:0; background:var(--steel); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 8px 0; } .skip:focus{ left:0; color:#fff; } .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); } /* ---------- type scale ---------- */ h1,h2,h3{ font-family:var(--disp); font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0; } h1{ font-size:clamp(2.1rem, 5vw, 3.4rem); } h2{ font-size:clamp(1.6rem, 3.4vw, 2.3rem); } h3{ font-size:1.16rem; letter-spacing:0; } p{ margin:0 0 1rem; } .eyebrow{ font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); margin:0 0 .9rem; display:flex; align-items:center; gap:.6rem; } .eyebrow::before{ content:""; width:26px; height:1px; background:var(--steel); display:inline-block; } .lead{ font-size:1.12rem; color:var(--muted); max-width:62ch; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.85rem; font-weight:500; letter-spacing:.02em; padding:.78rem 1.3rem; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--steel); color:#fff; } .btn-primary:hover{ background:var(--steel-2); color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color:var(--line-d); } .btn-ghost:hover{ border-color:#fff; color:#fff; } .btn-line{ background:transparent; color:var(--steel); border-color:var(--line); } .btn-line:hover{ border-color:var(--steel); } /* ============================================================ Header ============================================================ */ .site-head{ position:sticky; top:0; z-index:40; background:rgba(10,26,47,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-d); } .nav{ display:flex; align-items:center; justify-content:space-between; height:72px; } .brand{ display:flex; align-items:center; gap:.7rem; color:#fff; font-family:var(--disp); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; white-space:nowrap; } .brand:hover{ color:#fff; } .mark{ width:34px; height:34px; border-radius:7px; flex:none; display:grid; place-items:center; background:linear-gradient(150deg,var(--steel),#1d4f82); font-family:var(--mono); font-weight:600; font-size:.95rem; color:#fff; } .mark-svg{ width:44px; height:44px; flex:none; display:block; } .brand small{ display:block; font-family:var(--mono); font-weight:400; font-size:.62rem; letter-spacing:.16em; color:var(--muted-d); text-transform:uppercase; margin-top:1px; } .nav-links{ display:flex; align-items:center; gap:.4rem; list-style:none; margin:0; padding:0; } .nav-links a{ font-family:var(--mono); font-size:.82rem; color:var(--muted-d); padding:.5rem .8rem; border-radius:6px; transition:color .15s, background .15s; } .nav-links a:hover, .nav-links a[aria-current="page"]{ color:#fff; background:rgba(255,255,255,.07); } .nav-cta{ margin-left:.5rem; } .nav-toggle{ display:none; background:none; border:1px solid var(--line-d); border-radius:7px; width:42px; height:38px; cursor:pointer; } .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ content:""; display:block; width:18px; height:2px; background:#fff; margin:0 auto; position:relative; transition:.2s; } .nav-toggle span::before{ position:absolute; top:-6px; } .nav-toggle span::after{ position:absolute; top:6px; } /* ============================================================ Hero ============================================================ */ .hero{ background:var(--ink); color:#fff; position:relative; overflow:hidden; padding-block:clamp(44px,7vw,78px); } .hero::after{ /* faint grid texture — engineering feel */ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(120% 80% at 75% 10%,#000 20%,transparent 70%); } .hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,72px); align-items:center; padding-block:0; } /* ---- hero background slideshow (home only) ---- */ .hero.has-slides::after{ display:none; } /* slideshow supplies its own texture */ .hero-slides{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .hero-slide{ position:absolute; inset:0; opacity:0; background-size:cover; background-position:center; animation:heroFade 12s linear infinite; } .hero-slide:nth-child(1){ animation-delay:0s; } .hero-slide:nth-child(2){ animation-delay:4s; } .hero-slide:nth-child(3){ animation-delay:8s; } @keyframes heroFade{ 0%{opacity:0} 5%{opacity:1} 28%{opacity:1} 33%{opacity:0} 100%{opacity:0} } /* On-brand CSS backgrounds. To use a photo instead, set on the slide: style="background-image:url('hero-1.jpg')" (cover/center is already applied) */ /* Each slide layers a dark scrim over your photo (keeps text readable) + a brand tint that also serves as the fallback before photos are uploaded. Add 3 images named hero-1.jpg / hero-2.jpg / hero-3.jpg to public_html. */ /* Photo banner — full-width rotating image across the top of the hero. Only a light tint so the photo reads. Add hero-1/2/3.jpg to public_html. */ .hero-banner{ position:relative; width:calc(100% + 2 * clamp(8px,3vw,48px)); margin-inline:calc(-1 * clamp(8px,3vw,48px)); height:clamp(225px,26vw,322px); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-d); box-shadow:0 24px 60px -28px rgba(0,0,0,.7); background:linear-gradient(150deg,#12345e,#0b1d33); margin-bottom:clamp(30px,5vw,52px); } .hero-slide.s1{ background-image:linear-gradient(180deg, rgba(8,20,36,.05), rgba(8,20,36,.20)), url('hero-1.jpg'); } .hero-slide.s2{ background-image:linear-gradient(180deg, rgba(8,20,36,.05), rgba(8,20,36,.20)), url('hero-2.jpg'); } .hero-slide.s3{ background-image:linear-gradient(180deg, rgba(8,20,36,.05), rgba(8,20,36,.20)), url('hero-3.jpg'); } .hero-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(8,20,36,.94), rgba(8,20,36,.72) 45%, rgba(8,20,36,.52)); } .hero-overlay::before{ content:""; position:absolute; inset:0; opacity:.5; background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(120% 80% at 75% 10%,#000 20%,transparent 70%); } .hero-art{ position:absolute; top:18px; right:1%; width:min(35%,450px); z-index:1; pointer-events:none; opacity:.85; } .hero-art-left{ right:auto; left:1%; top:24px; width:min(26%,312px); } .hero-art svg{ width:100%; height:auto; display:block; } .hero h1{ color:#fff; } .hero h1 .accent{ color:#79b3e6; } .hero .lead{ color:var(--muted-d); margin-top:1.3rem; } .hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; } .hero-fade{ animation:rise .7s cubic-bezier(.2,.7,.3,1) both; } .hero-fade.d2{ animation-delay:.08s; } .hero-fade.d3{ animation-delay:.16s; } @keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} } /* registry card — the signature element */ .registry{ background:var(--ink-2); border:1px solid var(--line-d); border-radius:var(--radius); font-family:var(--mono); font-size:.82rem; overflow:hidden; box-shadow:0 24px 60px -28px rgba(0,0,0,.7); } .registry-bar{ display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-bottom:1px solid var(--line-d); color:var(--muted-d); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; } .dot{ width:8px; height:8px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 3px rgba(31,157,107,.18); } .registry-bar .spacer{ margin-left:auto; } .reg-row{ display:flex; justify-content:space-between; gap:1rem; padding:.62rem 1rem; border-bottom:1px solid var(--line-d); } .reg-row:last-child{ border-bottom:0; } .reg-row .k{ color:var(--muted-d); } .reg-row .v{ color:#eaf1f8; text-align:right; } .reg-row .v.ph{ color:#f0c36b; } /* placeholder you must fill */ .tick{ color:var(--signal); } /* ============================================================ Section scaffolding ============================================================ */ section{ padding-block:clamp(56px,8vw,92px); } .section-mist{ background:var(--mist); } .section-ink{ background:var(--ink); color:#fff; } .section-ink h2{ color:#fff; } .section-ink .lead{ color:var(--muted-d); } .section-head{ max-width:64ch; margin-bottom:2.6rem; } /* capability cards */ .cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } @media (max-width:980px){ .cards{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .cards{ grid-template-columns:1fr; } } .card{ background:var(--paper); padding:1.6rem 1.5rem; transition:background .15s; } .card:hover{ background:#fbfcfe; } .card .num{ font-family:var(--mono); font-size:.72rem; color:var(--steel); letter-spacing:.1em; } .card h3{ margin:.5rem 0 .55rem; } .card p{ color:var(--muted); font-size:.95rem; margin:0; } .card .codes{ margin-top:.9rem; font-family:var(--mono); font-size:.72rem; color:var(--muted); } /* NAICS registry table */ .naics{ width:100%; border-collapse:collapse; font-size:.92rem; } .naics caption{ text-align:left; font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-d); padding-bottom:1rem; } .naics th,.naics td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line-d); vertical-align:top; } .naics thead th{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-d); font-weight:500; } .naics .code{ font-family:var(--mono); color:#cfe0f0; white-space:nowrap; } .naics .desc{ color:#eaf1f8; font-weight:500; } .naics .what{ color:var(--muted-d); font-size:.86rem; } .naics tbody tr:hover td{ background:rgba(255,255,255,.03); } .pill{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; padding:.18rem .5rem; border-radius:4px; text-transform:uppercase; white-space:nowrap; } .pill.primary{ background:rgba(199,162,74,.16); color:var(--gold); border:1px solid rgba(199,162,74,.4); } .pill.secondary{ background:rgba(255,255,255,.06); color:var(--muted-d); border:1px solid var(--line-d); } /* differentiators / value list */ .values{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.6rem 2.2rem; list-style:none; padding:0; margin:0; } .values li{ position:relative; padding-left:1.6rem; } .values li::before{ content:"→"; position:absolute; left:0; top:.05rem; color:var(--steel); font-family:var(--mono); } .values h3{ font-size:1.02rem; margin-bottom:.3rem; } .values p{ color:var(--muted); font-size:.94rem; margin:0; } /* CTA band */ .cta-band{ background:linear-gradient(150deg,#0c2138,#0a1a2f); border:1px solid var(--line-d); border-radius:14px; padding:clamp(28px,5vw,52px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; } .cta-band h2{ color:#fff; max-width:18ch; } .cta-band p{ color:var(--muted-d); margin:.6rem 0 0; max-width:40ch; } /* contact */ .contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,64px); align-items:start; } .poc{ font-family:var(--mono); background:var(--mist); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .poc .poc-row{ display:flex; justify-content:space-between; gap:1rem; padding:.85rem 1.2rem; border-bottom:1px solid var(--line); font-size:.9rem; } .poc .poc-row:last-child{ border-bottom:0; } .poc .k{ color:var(--muted); } .poc .v{ color:var(--text); text-align:right; } .poc .v.ph{ color:#b07d12; } .steps{ counter-reset:s; list-style:none; padding:0; margin:1.4rem 0 0; } .steps li{ counter-increment:s; position:relative; padding:.4rem 0 .4rem 2.4rem; color:var(--muted); } .steps li::before{ content:counter(s,decimal-leading-zero); position:absolute; left:0; top:.35rem; font-family:var(--mono); font-size:.78rem; color:var(--steel); } /* generic prose helpers for capabilities page */ .prose h2{ margin-top:0; } .prose + .prose{ margin-top:2.4rem; } .cols-2{ columns:2; column-gap:2.4rem; } .cols-2 li{ break-inside:avoid; } ul.check{ list-style:none; padding:0; margin:.6rem 0 0; } ul.check li{ position:relative; padding-left:1.5rem; margin-bottom:.45rem; color:var(--muted); } ul.check li::before{ content:"✓"; position:absolute; left:0; color:var(--signal); font-weight:700; } /* ============================================================ Footer ============================================================ */ .site-foot{ background:var(--ink); color:var(--muted-d); border-top:1px solid var(--line-d); padding-block:3rem 2rem; font-size:.9rem; } .foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding-bottom:2rem; border-bottom:1px solid var(--line-d); } .foot-top h4{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 .9rem; font-weight:500; } .foot-top a{ color:var(--muted-d); display:block; padding:.18rem 0; } .foot-top a:hover{ color:#fff; } .foot-id{ font-family:var(--mono); font-size:.78rem; color:var(--muted-d); margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; } .foot-id b{ color:#eaf1f8; font-weight:500; } .foot-id .ph{ color:#f0c36b; } .foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:1.6rem; font-size:.8rem; color:var(--muted-d); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 860px){ .hero-grid{ grid-template-columns:1fr; } .hero-art{ display:none; } .contact-grid{ grid-template-columns:1fr; } .foot-top{ grid-template-columns:1fr 1fr; } .cols-2{ columns:1; } .nav-links{ position:absolute; top:72px; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--ink); border-bottom:1px solid var(--line-d); padding:.6rem var(--pad) 1.1rem; gap:.1rem; display:none; } .nav-links.open{ display:flex; } .nav-links a{ padding:.7rem .4rem; } .nav-cta{ margin:.5rem 0 0; } .nav-toggle{ display:block; } .registry{ font-size:.78rem; } } @media (max-width: 520px){ .foot-top{ grid-template-columns:1fr; } .naics .what{ display:none; } /* keep table readable on phones */ } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .hero-slide.s1{ opacity:1; } /* show a single static background instead of blank */ } /* ---- contact form ---- */ .form{ display:grid; gap:1.1rem; max-width:660px; } .form-row{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; } .form label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.4rem; } .form input, .form textarea{ width:100%; font-family:var(--sans); font-size:1rem; color:var(--text); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:.72rem .9rem; transition:border-color .15s; } .form input:focus, .form textarea:focus{ outline:2px solid var(--steel-2); outline-offset:1px; border-color:var(--steel); } .form textarea{ min-height:150px; resize:vertical; } @media (max-width:560px){ .form-row{ grid-template-columns:1fr; } } /* ---- credential badges (home) — legitimate equivalent of an agency-logo wall ---- */ .badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .badge{ display:flex; align-items:center; gap:.8rem; border:1px solid var(--line); border-radius:10px; padding:1rem 1.15rem; background:var(--paper); } .badge-ic{ width:32px; height:32px; border-radius:8px; flex:none; display:grid; place-items:center; font-size:.9rem; font-weight:700; color:var(--steel); background:rgba(46,111,176,.10); border:1px solid rgba(46,111,176,.28); } .badge strong{ font-family:var(--disp); font-size:.98rem; line-height:1.1; display:block; color:var(--text); } .badge small{ font-family:var(--mono); font-size:.67rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } @media (max-width:780px){ .badges{ grid-template-columns:repeat(2,1fr); } } @media (max-width:460px){ .badges{ grid-template-columns:1fr; } }