/* ================================================================= KindAbilities — design system Aesthetic: "Warm humanist editorial" Display: Fraunces (warm optical serif) · Body: Atkinson Hyperlegible (a typeface designed by the Braille Institute for low-vision readers — meaningful + accessible). Ink on warm paper. Sparse, opt-in motion. The site of an accessibility company must itself be exemplary: WCAG-AA contrast, full keyboard nav, reduced-motion honoured. ================================================================= */ /* Fonts are loaded via in each page (faster than @import). */ :root { /* — color story: one paper neutral, one ink, one warm accent — */ --paper: #f5efe3; /* warm paper */ --paper-2: #efe7d7; /* recessed panel */ --paper-3: #e7dcc7; /* deeper card */ --ink: #211d16; /* near-black, warm */ --ink-2: #4a4338; /* secondary text */ --ink-3: #6f6757; /* muted */ --rule: #d7cbb2; /* hairlines */ --accent: #b8553a; /* terracotta — confident, human, not SaaS */ --accent-strong:#9a3f29; /* darker, AA on paper for small text/links */ --accent-soft: #f0d9cb; /* tint wash */ --gold: #c98a2b; /* warm secondary — DECORATIVE ONLY (fails AA as text) */ --sage: #5f7a5a; /* calm secondary — decorative */ --teal: #2f6f6b; /* trust secondary — decorative */ --indigo: #4a4e84; /* focus secondary */ --ok: #3f6f4a; /* AA-safe darkened variants — use these for any accent TEXT or button fill (all ≥4.5:1 on paper AND ≥4.5:1 for white text on the fill). */ --gold-strong: #6f4a0e; --sage-strong: #415b3a; --teal-strong: #245a56; --indigo-strong:#3c4076; /* per-section accent — overridden on each condition page via inline style. --section-accent = bright/decorative; --section-strong = AA text+button. */ --section-accent: var(--accent); --section-strong: var(--accent-strong); --section-soft: var(--accent-soft); /* — type scale (fluid) — */ --step--1: clamp(0.84rem, 0.80rem + 0.2vw, 0.95rem); --step-0: clamp(1.05rem, 1.00rem + 0.3vw, 1.20rem); --step-1: clamp(1.30rem, 1.15rem + 0.7vw, 1.65rem); --step-2: clamp(1.65rem, 1.35rem + 1.4vw, 2.40rem); --step-3: clamp(2.10rem, 1.55rem + 2.6vw, 3.60rem); --step-4: clamp(2.70rem, 1.70rem + 4.6vw, 5.50rem); --step-5: clamp(3.20rem, 1.80rem + 6.6vw, 7.50rem); --measure: 64ch; --gutter: clamp(1.2rem, 4vw, 4rem); --maxw: 1180px; --radius: 14px; --radius-lg: 26px; --shadow: 0 1px 2px rgba(33,29,22,.05), 0 12px 34px -18px rgba(33,29,22,.28); --shadow-lg: 0 2px 6px rgba(33,29,22,.06), 0 40px 80px -36px rgba(33,29,22,.40); --ease: cubic-bezier(.2,.7,.2,1); } /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* subtle warm paper grain */ background-image: radial-gradient(1200px 600px at 80% -10%, #fbf6ea 0%, transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); } h1,h2,h3,h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 .5em; } h1 { font-size: var(--step-4); font-weight: 600; } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } p { margin: 0 0 1.1em; max-width: var(--measure); } a { color: var(--accent-strong); text-underline-offset: 3px; text-decoration-thickness: 1.5px; } a:hover { color: var(--ink); } strong { font-weight: 700; } img { max-width: 100%; display: block; } ::selection { background: var(--accent); color: var(--paper); } :focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; border-radius: 4px; } /* skip link — accessibility first */ .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: .7rem 1rem; z-index: 200; border-radius: 0 0 10px 0; } .skip:focus { left: 0; } /* ---------- layout ---------- */ .wrap { width: min(var(--maxw), 100% - 2*var(--gutter)); margin-inline: auto; } .wrap-narrow { width: min(74ch, 100% - 2*var(--gutter)); margin-inline: auto; } .section { padding-block: clamp(3.5rem, 8vw, 8rem); } .eyebrow { font-family: 'Atkinson Hyperlegible', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: var(--step--1); color: var(--section-strong); margin: 0 0 1.2rem; display: inline-flex; align-items: center; gap: .6rem; } .eyebrow::before { content:""; width: 26px; height: 2px; background: var(--section-accent); display:inline-block; } .lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 58ch; } /* ---------- top nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); background: color-mix(in oklab, var(--paper) 86%, transparent); border-bottom: 1px solid var(--rule); } .nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; } .brand { display: inline-flex; align-items: center; gap: .6rem; font-family:'Fraunces',serif; font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em; } .brand .mark { width: 30px; height: 30px; flex: none; } .nav__links { display: flex; gap: clamp(.6rem,2vw,1.6rem); align-items: center; } .nav__links a { color: var(--ink-2); text-decoration: none; font-size: var(--step--1); font-weight: 700; } .nav__links a:hover { color: var(--accent-strong); } @media (max-width: 760px){ .nav__links a.hide-sm { display:none; } } /* ---------- buttons ---------- */ .btn { display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-family:'Atkinson Hyperlegible',sans-serif; padding:.8rem 1.3rem; border-radius: 999px; border: 1.5px solid transparent; cursor:pointer; font-size: var(--step-0); text-decoration:none; transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--section-strong); color: var(--paper); } .btn--primary:hover { background: var(--ink); color: var(--paper); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .btn--stop { background: #8a1f12; color:#fff; } /* ---------- cards / app grid ---------- */ .grid { display:grid; gap: clamp(1rem, 2.4vw, 1.8rem); } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 880px){ .cols-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px){ .cols-2, .cols-3 { grid-template-columns: 1fr; } } .appcard { position: relative; display:flex; flex-direction:column; gap:.6rem; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: clamp(1.3rem,2.5vw,1.9rem); text-decoration:none; color: var(--ink); overflow:hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .appcard::after { content:""; position:absolute; inset:0 0 auto 0; height:4px; background: var(--card-accent, var(--accent)); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease); } .appcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } .appcard:hover::after { transform: scaleX(1); } .appcard h3 { font-size: var(--step-1); margin:.2rem 0 0; } .appcard .for { font-size: var(--step--1); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--card-strong, var(--accent-strong)); } .appcard p { font-size: var(--step-0); color: var(--ink-2); margin:0; } .appcard .more { margin-top:auto; padding-top:.8rem; font-weight:700; color: var(--ink); } /* ---------- editorial figure / screenshots ---------- */ .shots { display:flex; gap: clamp(.8rem,2vw,1.4rem); flex-wrap:wrap; } .shot { border-radius: 28px; box-shadow: var(--shadow-lg); border: 6px solid #0d0c0a; background:#0d0c0a; width: clamp(170px, 22vw, 250px); aspect-ratio: 9/19.5; overflow:hidden; } .shot img { width:100%; height:100%; object-fit: cover; } /* ---------- pull quote / empathy passage (the anchor) ---------- */ .feelquote { font-family:'Fraunces',serif; font-weight:500; font-style: italic; font-size: var(--step-3); line-height: 1.18; letter-spacing:-.01em; color: var(--ink); max-width: 22ch; } .feelquote .hl { background: linear-gradient(transparent 62%, var(--section-soft) 62%); } .feelcite { font-style: normal; font-family:'Atkinson Hyperlegible',sans-serif; font-size: var(--step--1); font-weight:700; color: var(--ink-3); margin-top:1.4rem; letter-spacing:.04em; } /* ---------- stat ---------- */ .stat { border-top: 2px solid var(--section-accent); padding-top: .8rem; } .stat b { font-family:'Fraunces',serif; font-size: var(--step-3); display:block; line-height:1; color: var(--ink); } .stat span { font-size: var(--step--1); color: var(--ink-2); } .stat a { color: var(--ink-2); } /* AA on the deep paper-3 panel */ /* ---------- the interactive "experience" module ---------- */ .exp { border: 2px solid var(--ink); border-radius: var(--radius-lg); background: var(--paper-2); overflow:hidden; } .exp__head { padding: clamp(1.1rem,2.4vw,1.7rem); display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-start; justify-content:space-between; border-bottom: 2px solid var(--ink); } .exp__head h3 { margin:0; } .exp__warn { font-size: var(--step--1); color: var(--ink-2); display:flex; gap:.5rem; align-items:center; max-width: 46ch; } .exp__stage { position: relative; min-height: 320px; display:grid; place-items:center; padding: clamp(1.2rem,3vw,2.4rem); text-align:center; overflow:hidden; } .exp__controls { display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; } .exp__live { position:absolute; left:1rem; bottom:1rem; font-size:var(--step--1); color:var(--ink-3); } .exp__note { font-size: var(--step--1); color: var(--ink-3); padding: .9rem clamp(1.1rem,2.4vw,1.7rem); border-top:1px dashed var(--rule); } .badge-haptic { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--section-accent); border:1px solid var(--section-accent); border-radius:999px; padding:.15rem .5rem; } /* ---------- footer ---------- */ .foot { background: var(--ink); color: #e8e0d2; padding-block: clamp(3rem,6vw,5rem); } .foot a { color:#f3ddcf; } .foot h4 { color:#fff; font-size: var(--step-1); } .foot .fine { color:#b9ad99; font-size: var(--step--1); } .foot .cols { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:2rem; } @media (max-width:720px){ .foot .cols { grid-template-columns:1fr; } } /* ---------- reveal-on-scroll (reduced-motion safe) ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } .appcard, .btn { transition: none; } } /* utility */ .tagrow { display:flex; gap:.5rem; flex-wrap:wrap; } .tag { font-size: var(--step--1); border:1px solid var(--rule); border-radius:999px; padding:.25rem .7rem; color: var(--ink-2); background: var(--paper); } .split { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,4vw,4rem); align-items:center; } @media (max-width: 860px){ .split { grid-template-columns:1fr; } } .center { text-align:center; } .mxauto{ margin-inline:auto; } .sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .mt0{margin-top:0}.mb0{margin-bottom:0}