/* Clarityish component CSS — the PHP-port counterpart to components/core/*.jsx.
The source JSX authors these five (Button, Card, Divider, Field, Tag) entirely as
inline React style objects with useState-driven hover, so there is no CSS to port
verbatim here. This file translates those same values into real classes with
:hover / :focus rules, since a server-rendered page has no client state.
Class names are authored fresh (see docs/04-design-system.md: these five are
proposals, not brand marks, and "can be adjusted with less caution"). Every value
is a design token from design-system/tokens/ — nothing here invents a new color,
spacing step, radius, or duration. */
/* ---- Button -------------------------------------------------------------- */
.btn{
display:inline-flex;align-items:center;gap:var(--space-2);
font-family:var(--font-ui);font-weight:var(--weight-bold);letter-spacing:.02em;line-height:1;
border-radius:var(--radius-1);border:var(--stroke-hair) solid transparent;
text-decoration:none;cursor:pointer;
transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.32;cursor:not-allowed;pointer-events:none}
.btn-sm{padding:8px 16px;font-size:var(--type-caption)}
.btn-md{padding:13px 24px;font-size:var(--type-small)}
.btn-lg{padding:18px 34px;font-size:var(--type-body)}
.btn-primary{background:var(--paper);color:var(--ink)}
.btn-primary:hover{background:var(--signal-cyan)}
.btn-secondary{background:transparent;color:var(--text-primary);border-color:var(--border)}
.btn-secondary:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-ghost:hover{background:var(--surface-hover)}
.btn-signal{background:var(--signal-cyan);color:var(--ink)}
.btn-signal:hover{background:var(--signal-red)}
/* ---- Tag ------------------------------------------------------------------ */
.tag{
display:inline-flex;align-items:center;
font-family:var(--font-ui);font-weight:var(--weight-bold);font-size:var(--type-caption);
letter-spacing:var(--tracking-caps);text-transform:uppercase;line-height:1;
padding:6px 10px 5px;border:var(--stroke-hair) solid;border-radius:var(--radius-1);
color:var(--text-secondary);border-color:var(--border);
}
.tag-cyan{color:var(--signal-cyan);border-color:var(--signal-cyan)}
.tag-red{color:var(--signal-red);border-color:var(--signal-red)}
.tag-solid{color:var(--ink);border-color:transparent;background:var(--paper)}
/* ---- Divider ---------------------------------------------------------------
.divider is an
(unlabelled). .divider-labelled wraps a rule + text + rule
for the labelled form, since
cannot contain child text. */
.divider{border:0;border-top:var(--stroke-hair) solid var(--border);width:100%;margin:0}
.divider-strong{border-top-width:var(--stroke-2);border-top-color:var(--border-strong)}
.divider-labelled{display:flex;align-items:center;gap:var(--space-4)}
.divider-labelled .divider-rule{flex:1;height:0;border-top:var(--stroke-hair) solid var(--border)}
.divider-labelled.divider-strong .divider-rule{border-top-width:var(--stroke-2);border-top-color:var(--border-strong)}
.divider-label{
font-family:var(--font-ui);font-weight:var(--weight-bold);font-size:var(--type-caption);
letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-tertiary);
}
/* ---- Field ------------------------------------------------------------------
Underline only. No boxed inputs anywhere in this brand. */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field-label{
font-family:var(--font-ui);font-weight:var(--weight-bold);font-size:var(--type-caption);
letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-tertiary);
}
.field-control{
width:100%;font:inherit;font-family:var(--font-ui);font-size:var(--type-body);
color:var(--text-primary);background:transparent;border:0;
border-bottom:var(--stroke-1) solid var(--border-strong);border-radius:0;
padding:10px 0;outline:none;
transition:border-color var(--dur-base) var(--ease-out);
}
.field-control:focus{border-bottom-color:var(--accent)}
.field-control.has-error{border-bottom-color:var(--signal-red)}
textarea.field-control{resize:vertical;min-height:96px}
.field-hint{font-family:var(--font-ui);font-size:var(--type-caption);line-height:var(--leading-snug);color:var(--text-tertiary)}
.field-hint.is-error{color:var(--signal-red)}
/* ---- Card ------------------------------------------------------------------- */
.card{
display:block;padding:var(--space-5);border-radius:var(--radius-2);
color:inherit;text-decoration:none;background:transparent;
border:var(--stroke-hair) solid var(--border);
transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.card-filled{background:var(--surface-raised);border-color:transparent}
.card-bare{padding:var(--space-5) 0;border-radius:0;border:0;border-top:var(--stroke-hair) solid var(--border)}
.card-interactive{cursor:pointer}
.card-interactive:hover{border-color:var(--border-strong)}
.card-filled.card-interactive:hover{background:var(--surface-hover);border-color:transparent}
.card-bare.card-interactive:hover{border-top-color:var(--border-strong)}
.card-eyebrow{
font-family:var(--font-ui);font-weight:var(--weight-bold);font-size:var(--type-caption);
letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-tertiary);
margin-bottom:var(--space-3);transition:color var(--dur-base) var(--ease-out);
}
.card-interactive:hover .card-eyebrow{color:var(--accent)}
.card-title{font-family:var(--font-display);font-weight:400;font-size:var(--type-title-3);line-height:var(--leading-tight);color:var(--text-primary)}
.card-body{font-family:var(--font-ui);font-size:var(--type-small);line-height:var(--leading-body);color:var(--text-secondary);margin-top:var(--space-3)}
.card-body:first-child{margin-top:0}
.card-meta{display:flex;gap:var(--space-2);align-items:center;margin-top:var(--space-4)}
/* ---- Wordmark / IshMark static shell -----------------------------------------
Sizing and treatment classes (.ish-slant, .ish-misreg, .ish-blur, etc.) come
verbatim from design-system/tokens/treatments.css. This just sets up the
Gloock display box the treatment classes attach to. */
.wordmark{
font-family:var(--font-display);font-weight:400;line-height:var(--leading-flush);
letter-spacing:var(--tracking-hero);color:var(--text-primary);
display:inline-block;white-space:nowrap;
}
.ish-mark{
font-family:var(--font-display);font-weight:400;line-height:var(--leading-flush);
letter-spacing:var(--tracking-hero);color:var(--text-primary);display:inline-block;
}
.ish-mark-boxed{
display:inline-flex;align-items:center;justify-content:center;
background:var(--ink);border-radius:var(--radius-1);overflow:hidden;
}
.ish-ghost-wrap{position:relative;display:inline-block}
.ish-ghost-layer{position:absolute;inset:0;opacity:var(--ish-ghost-opacity)}
.ish-ghost-layer--left{transform:translateX(-.06em)}
.ish-ghost-layer--right{transform:translateX(.06em)}
.ish-ghost-key{position:relative}
/* Cycle hero form: holds its box via a hidden copy, the live beat mark is
absolutely positioned over it so the lockup never reflows between beats. */
.ish-cycle{display:inline-block;position:relative}
.ish-cycle-hold{visibility:hidden}
.ish-cycle-beat{position:absolute;left:0;top:0;width:100%}
/* ---- Site chrome ------------------------------------------------------------
Ports ui_kits/clarityish-site/Chrome.jsx (SiteHeader, SiteFooter, Shell,
SectionHead) to real classes. 86% ink + 14px backdrop blur on the sticky
header per docs/05-build-plan.md Phase 1. */
.site-header{
position:sticky;top:0;z-index:10;
background:rgba(34,34,34,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:var(--stroke-hair) solid var(--border);
}
.site-header-inner{
max-width:var(--page-max);margin:0 auto;padding:0 var(--space-7);height:76px;
display:flex;align-items:center;gap:var(--space-7);
}
.site-header-home{border:0;color:inherit;display:flex;align-items:center}
.site-nav{margin-left:auto;display:flex;gap:var(--space-6)}
.site-nav-link{
font-family:var(--font-ui);font-weight:700;font-size:var(--type-small);letter-spacing:.02em;
color:var(--text-tertiary);border:0;border-bottom:1.5px solid transparent;padding-bottom:2px;
}
.site-nav-link:hover{color:var(--text-primary)}
.site-nav-link.is-active{color:var(--text-primary);border-bottom-color:var(--signal-cyan)}
.site-footer{border-top:var(--stroke-2) solid var(--border-strong);margin-top:var(--space-9)}
.site-footer-inner{
max-width:var(--page-max);margin:0 auto;padding:var(--space-7) var(--space-7) var(--space-8);
display:flex;gap:var(--space-7);align-items:flex-start;
}
.site-footer-blurb{
font-family:var(--font-ui);font-size:var(--type-small);color:var(--text-tertiary);
max-width:42ch;line-height:var(--leading-body);
}
.site-footer-links{margin-left:auto;display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-end}
.site-footer-links a{font-size:var(--type-small)}
.page-shell{max-width:var(--page-max);margin:0 auto;padding:var(--space-9) var(--space-7) 0}
.section-head{display:flex;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-5)}
.section-head-rule{flex:1;border-top:var(--stroke-hair) solid var(--border)}
.section-head-right{font-size:var(--type-caption);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase}
/* ---- Topic filter chips (work.php) -------------------------------------------
Real links with a ?topic= query param, not buttons — filtering is server-side,
no JS framework (docs/05-build-plan.md Phase 2). */
.chip{
display:inline-flex;align-items:center;
font-family:var(--font-ui);font-weight:700;font-size:var(--type-caption);
letter-spacing:var(--tracking-caps);text-transform:uppercase;
padding:6px 10px 5px;border-radius:var(--radius-1);border:var(--stroke-hair) solid var(--border);
color:var(--text-secondary);
}
.chip:hover{border-color:var(--border-strong);color:var(--text-primary)}
.chip.is-active{background:var(--paper);color:var(--ink);border-color:transparent}
.chip.is-active:hover{background:var(--signal-cyan)}