/* ============================================================================ utusori — brand.css Single source of chrome, type and component rules for utusori.com. Derived from: master-inbox/utusori-suite/html/brand-guide.html v2.0 (implements Volume V 2.0) + DL-010 typography. Nothing in this file is a preference. Every value traces to the guide. RULE: pages include this file. Pages do not restate these values. ============================================================================ */ /* ---------------------------------------------------------------- 1. tokens */ :root{ /* chrome — one warm-neutral ramp, hue 34-37 throughout. */ --paper: #F6F1EA; /* default background */ --mist: #EDE7DD; /* secondary surface */ --silver: #D9D1C4; /* borders, dividers */ --ash: #A79E92; /* hairlines, disabled — NEVER text (2.35:1, fails) */ --slate: #6B6459; /* secondary text — lightest tone permitted for type */ --graphite: #3C3730; /* strong secondary text */ --ink: #1C1A17; /* primary text */ --dark: #15131A; /* dark-mode ground */ /* identity — QUARANTINED. These four values appear only in the mark and its lockups. Never a surface, fill, highlight, rule or type color. Any other use is a design defect. Declared here for the inlined lockup ONLY. */ --identity-blue: #28477E; --identity-green: #3E7A5E; --identity-yellow: #E0A83B; --identity-red: #C4362F; --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --serif: "IBM Plex Serif", Georgia, serif; /* spacing — 4pt grid */ --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --content-max:1440px; --gutter:72px; --margin: 48px; --radius: 8px; --motion-fast: 150ms; --motion-base: 240ms; --motion-slow: 400ms; --ease: cubic-bezier(0.2, 0, 0, 1); } @media (max-width: 1023px){ :root{ --gutter: 16px; --margin: 24px; } } /* ------------------------------------------------------------------ 2. base */ *, *::before, *::after{ box-sizing: border-box; } html, body{ margin: 0; padding: 0; } body{ background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 26px; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (max-width: 640px){ body{ font-size: 16px; line-height: 25px; } } button, input, select, textarea{ font: inherit; color: inherit; } img, svg{ max-width: 100%; } /* -------------------------------------------------------------- 3. type scale Face is chosen by MEANING, not heading level (DL-010). */ .u-display{ font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 44px; letter-spacing: -0.01em; margin: 0; } .u-h1{ font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 36px; margin: 0; } .u-h2{ font-family: var(--sans); font-weight: 600; font-size: 22px; line-height: 28px; margin: 0; } .u-body{ font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 26px; } .u-data{ font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 20px; } /* Label — the ONE step permitted below 15px, caps only. */ .u-label{ font-family: var(--sans); font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; } .u-secondary{ color: var(--slate); } .u-strong-secondary{ color: var(--graphite); } h1{ font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 36px; } h2{ font-family: var(--sans); font-weight: 600; font-size: 22px; line-height: 28px; } h3{ font-family: var(--sans); font-weight: 600; font-size: 17px; line-height: 26px; } /* ---------------------------------------------------------------- 4. layout */ .u-shell{ max-width: var(--content-max); margin: 0 auto; padding-left: var(--margin); padding-right: var(--margin); } /* ---------------------------------------------------------------- 5. chrome */ .u-header{ border-bottom: 1px solid var(--silver); } .u-header__inner{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); min-height: 72px; } /* Lockup: minimum width 120px. Supplied outlined artwork — never re-typed. */ .u-lockup{ display: inline-flex; align-items: center; text-decoration: none; padding: var(--s-2); margin: calc(var(--s-2) * -1); } .u-lockup svg{ display: block; width: 136px; height: auto; min-width: 120px; } .u-nav{ display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; } .u-nav a{ font-size: 15px; line-height: 20px; color: var(--slate); text-decoration: none; padding: 12px var(--s-2); transition: color var(--motion-fast) var(--ease); } .u-nav a:hover{ color: var(--ink); } .u-nav a[aria-current="page"]{ color: var(--ink); } .u-footer{ border-top: 1px solid var(--silver); margin-top: var(--s-16); padding: var(--s-6) 0 var(--s-12); } .u-footer__inner{ display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-size: 15px; line-height: 20px; color: var(--slate); } .u-footer a{ color: var(--slate); } /* --------------------------------------------------------- 6. attribution Verbatim, once per page, min 15px, >= 4.5:1. slate on paper = 5.20:1. */ .u-attribution{ font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 20px; color: var(--slate); margin: 0; } /* ------------------------------------------------------------ 7. components */ .u-card{ background: var(--paper); border: 1px solid var(--silver); border-radius: var(--radius); transition: border-color var(--motion-fast) var(--ease); } .u-card:hover{ border-color: var(--ink); } .u-card:active{ background: var(--mist); } /* Selected — 2px ink border PLUS a text label. Never color alone. */ .u-card[aria-selected="true"], .u-selected{ border: 2px solid var(--ink); } :focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; } .u-loading{ background: var(--mist); } [aria-disabled="true"], :disabled{ color: var(--ash); cursor: default; } .u-button{ display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s-6); background: none; border: 1px solid var(--ink); border-radius: var(--radius); color: var(--ink); font-size: 15px; line-height: 20px; text-decoration: none; cursor: pointer; transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); } .u-button:hover{ background: var(--ink); color: var(--paper); } /* ---------------------------------------------------------------- 8. never */ .u-shell *, .u-header *, .u-footer *{ text-shadow: none; } /* --------------------------------------------------------------- 9. motion */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------ 10. utilities */ .u-visually-hidden{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ------------------------------------------------- 11. canonical footer cols */ .u-foot-cols{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-8); margin: 0 0 var(--s-8); } .u-foot-cols h2{ color: var(--slate); margin: 0 0 var(--s-3); } .u-foot-cols ul{ list-style: none; margin: 0; padding: 0; } .u-foot-cols li{ margin: 0 0 6px; } .u-foot-cols a{ font-size: 15px; line-height: 20px; color: var(--ink); text-decoration: none; min-height: 0; } .u-foot-cols a:hover{ text-decoration: underline; } /* ------------------------------------------- 12. canonical footer (footer.uf) Self-contained. Element-level selectors so page CSS targeting bare "footer" cannot reshape it. Replaces the whole