/* ============================================================ East | West Club — shared design system The "Quiet House" style, extracted to one place so every page draws from the same tokens instead of re-declaring them. Fonts (load in ): Newsreader + Hanken Grotesk. ============================================================ */ :root { /* Surfaces — dark pitch + cooler green "breath" for alternating sections */ --paper: #070908; --paper-2: #0E2820; --paper-3: #163228; /* Text — warm cream, stepping down to a cooler sage mute */ --ink: #ECE3CE; --soft: #C7BB9E; --mute: #93A498; /* Hairlines */ --rule: #1F3A2F; --rule-2: #2D4A3D; /* Accent — warm brass, used one thing at a time */ --accent: #D4B068; --accent-d: #B59250; /* Type */ --serif: 'Newsreader', Georgia, serif; --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; } /* ── Reset / base ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } body { background: var(--paper); color: var(--soft); font-family: var(--serif); font-weight: 350; font-size: 17px; line-height: 1.7; font-variation-settings: "opsz" 16; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } ::selection { background: var(--ink); color: var(--paper); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ── Eyebrow label (Hanken, the only place sans sets text) ── */ .eyebrow { display: block; font-family: var(--sans); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--mute); margin-bottom: 1.4rem; } /* ── Layout primitives ── */ .ewc-container { max-width: 1080px; margin: 0 auto; padding: 0 2rem; } .ewc-container--narrow { max-width: 720px; } .ewc-section { position: relative; padding: 7rem 0; border-top: 1px solid var(--rule); } .ewc-section--green { background: var(--paper-2); } /* ── Corner-bracket motif (wrap around images / cards) ── */ .ewc-corners { position: absolute; inset: 0; pointer-events: none; } .ewc-corners::before, .ewc-corners::after { content: ''; position: absolute; width: 15px; height: 15px; border: 1px solid var(--accent); opacity: 0.55; } .ewc-corners::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; } .ewc-corners::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; } /* ── Brass button ── */ .ewc-btn { display: inline-block; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper); background: var(--accent); border: 1px solid var(--accent); padding: 1rem 1.6rem; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .ewc-btn:hover { background: var(--ink); border-color: var(--ink); } .ewc-btn--ghost { background: transparent; color: var(--accent); } .ewc-btn--ghost:hover { background: var(--accent); color: var(--paper); } /* ── Form fields ── */ .ewc-field { width: 100%; background: rgba(236,227,206,0.04); border: 1px solid var(--rule-2); color: var(--ink); font-family: var(--sans); font-size: 0.92rem; font-weight: 400; padding: 0.9rem 1rem; outline: none; transition: border-color 0.2s, background 0.2s; -webkit-appearance: none; } .ewc-field:focus { border-color: var(--accent); background: rgba(236,227,206,0.06); } .ewc-field::placeholder { color: var(--mute); } textarea.ewc-field { min-height: 90px; resize: vertical; } /* ── Status tags (shared with tracker / brand guide) ── */ .tag { font-family: var(--sans); font-size: 0.54rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.3rem 0.62rem; border: 1px solid; white-space: nowrap; } .tag--done { color: var(--paper); background: var(--accent); border-color: var(--accent); } .tag--wip { color: var(--accent); background: rgba(212,176,104,0.14); border-color: var(--accent-d); } .tag--missing { color: var(--accent); border-color: var(--accent-d); } /* ── Reveal-on-scroll ── */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1); } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* ── Autofill ── */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: #ECE3CE !important; -webkit-box-shadow: 0 0 0 1000px #0E2820 inset !important; caret-color: #ECE3CE; transition: background-color 5000s ease-in-out 0s; }