/* ============================================================ EASYWATER — Brand foundation Black / white / gray. Timberline-lodge: warm paper, heavy structural type, generous air, no slop. ============================================================ */ /* ---- Color ---- */ :root { --ink: #0c0c0d; /* near-black, primary dark ground */ --ink-2: #161719; --charcoal: #232527; --graphite: #3a3d41; --steel: #6c7176; /* mid gray */ --fog: #a9adb2; --mist: #d7d5cf; --paper: #f4f1ea; /* warm off-white, lodge ground */ --paper-2: #ebe7dd; --white: #ffffff; --line-d: rgba(255,255,255,.13); /* hairline on dark */ --line-l: rgba(12,12,13,.12); /* hairline on light */ /* functional (UI status only — not brand color) */ --ok: #4f7d5b; --warn: #b08338; --alert: #a8473c; /* type stacks — overridden per direction */ --font-head: "Archivo", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --wm-stretch: 125%; --maxw: 1240px; } /* direction modifiers (set class on or a scope) */ .type-industrial { --font-head: "Saira Condensed", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; } .type-geometric { --font-head: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; } .type-lodge { --font-head: "Zilla Slab", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Monogram / wordmark lockup ---- */ .ewmark { display: inline-block; background-color: currentColor; -webkit-mask-image: var(--ew-mark); mask-image: var(--ew-mark); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .ew-lockup { display: inline-flex; align-items: flex-start; gap: .17em; line-height: 1; } /* SVG wordmark — text baselines aligned to the mark's bands (see ew.js) */ .ew-wm-svg { display: block; flex: none; } .ew-wm-svg text { font-family: "Archivo", system-ui, sans-serif; font-weight: 800; fill: currentColor; } /* legacy HTML wordmark (kept for any static markup) */ .ew-wm { font-family: "Archivo", system-ui, sans-serif; font-weight: 800; font-stretch: var(--wm-stretch); letter-spacing: .02em; font-size: 1.5rem; line-height: .82; white-space: nowrap; display: inline-flex; flex-direction: column; align-items: flex-start; } .ew-wm small { display: flex; justify-content: space-between; width: 100%; font-size: .42em; font-weight: 700; margin-top: .55em; opacity: .82; letter-spacing: 0; } .ew-wm small span { display: block; line-height: 1; } .ew-wm small:not(:has(span)) { letter-spacing: .42em; display: block; } /* ---- Headings ---- */ .h-kicker { font-family: var(--font-body); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; } h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 800; letter-spacing: -.01em; line-height: .98; margin: 0; text-wrap: balance; } .type-lodge h1, .type-lodge h2, .type-lodge h3 { font-weight: 700; letter-spacing: -.005em; } .type-industrial h1, .type-industrial h2 { font-weight: 700; letter-spacing: .005em; text-transform: uppercase; } /* ---- Buttons ---- */ .btn { font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content:center; gap: .5em; padding: .95em 1.5em; border: 1.5px solid transparent; border-radius: 2px; cursor: pointer; text-decoration: none; transition: .18s ease; white-space: nowrap; } .btn-solid { background: var(--ink); color: var(--paper); } .btn-solid:hover { background: var(--charcoal); } .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(12,12,13,.32); } .btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); } .on-dark .btn-solid, .btn-solid.invert { background: var(--paper); color: var(--ink); } .on-dark .btn-solid:hover { background: var(--white); } .on-dark .btn-ghost { color: var(--paper); border-color: rgba(255,255,255,.34); } .on-dark .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } /* ---- Utility ---- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); } .hair { height: 1px; background: var(--line-l); border: 0; margin: 0; } .on-dark .hair { background: var(--line-d); } .mono-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }