/* ============================================================= HAVANA HOUSE — DESIGN TOKENS Prefixed --hh- throughout. THE PALETTE IS THE LOGO. img/logo.svg is 27kB of outlined type in exactly one fill: #b8af81. gold-500 below IS that value, copied out of the file — not sampled, not approximated. Every other stop is that hue (50deg, 28% saturation) walked up and down from it. The second colour is #231F20 — the near-black already carrying 332 elements on the current site. It is CMYK rich black, the ink a printer gives you, and it is what a cigar band is printed on. Every contrast figure below is computed, not estimated. design-system.html recomputes them from these values at runtime, so the documentation cannot drift from the tokens. ============================================================= */ :root { /* --------------------------------------------------------- GOLD — hue 50. The logo, and the only colour on the site. THE RULE, and it decides the entire design: gold-500 is 2.21:1 on white. It can NEVER carry white text, it can never BE text on white, and it is never a primary button on a light ground. On the brand ink it is 7.36:1 — comfortably AA — which is why this site is dark where Away is light. Gold on black is free; gold on white is a fail. Where gold TEXT is genuinely needed on white, gold-750 (#7f7648, 4.58:1) is the lightest safe stop. Nothing above it passes. --------------------------------------------------------- */ --hh-gold-50: #f8f7f2; /* warm band on light */ --hh-gold-100: #edeade; --hh-gold-200: #dedac4; /* 11.59:1 on ink — body copy on dark */ --hh-gold-300: #ccc5a4; /* 9.38:1 on ink — eyebrows on dark */ --hh-gold-400: #c1b990; /* 8.24:1 on ink — hover on the gold link */ --hh-gold-500: #b8af81; /* THE LOGO FILL, VERBATIM — 7.36:1 on ink, 2.21:1 on white */ --hh-gold-600: #a3975c; /* 5.54:1 on ink */ --hh-gold-750: #7f7648; /* 4.58:1 ON WHITE — the only gold safe as text on light */ --hh-gold-800: #625b37; /* 6.84:1 on white */ --hh-gold-900: #413d25; /* 10.94:1 on white */ --hh-brand: var(--hh-gold-500); /* --------------------------------------------------------- INK — the ground. Neutral, warmed 3% toward the gold hue so the greys sit with the brand instead of going blue against it. --hh-ink IS the logo's companion black. --------------------------------------------------------- */ --hh-ink: #231f20; /* THE BRAND BLACK — 16.30:1, the dark ground */ --hh-ink-950: #10100f; /* 19.04:1 — the deepest band, footer */ --hh-ink-900: #1a1a19; /* 17.42:1 */ --hh-ink-800: #272725; /* 14.97:1 — raised surface on dark */ --hh-ink-700: #3a3936; /* 11.55:1 — body copy on white */ --hh-ink-600: #54534f; /* 7.70:1 — muted, meta */ --hh-ink-500: #71706a; /* 4.97:1 on white, 4.63:1 on the warm panel, 4.60:1 on the neutral tint. The lightest grey that clears AA on EVERY light ground the page uses — the old #74726d cleared it only on pure white (4.48 on the panel) and so was a trap the moment a section was tinted. */ --hh-ink-400: #979691; /* 2.96:1 on white — decorative only; 5.50:1 on ink */ --hh-ink-300: #bab9b5; /* 8.30:1 ON INK — meta text on dark */ --hh-ink-200: #dadad8; /* 11.64:1 on ink */ --hh-ink-100: #ebebea; --hh-ink-50: #f6f6f6; --hh-line: #e4e3e0; --hh-line-soft: #f0efec; --hh-line-dark: #35332f; /* borders inside dark sections */ --hh-line-gold: rgba(183,174,128,.32); --hh-surface: #ffffff; --hh-surface-2: #f6f6f6; --hh-surface-3: #f8f7f2; /* = gold-50, the warm band */ --hh-surface-dark: var(--hh-ink); /* --------------------------------------------------------- SEMANTIC — status, not decoration. "Final Hour" is the one place a red is allowed. It is a clearance mechanic, not a brand colour, and it never appears twice in a viewport. --------------------------------------------------------- */ --hh-success: #1c6b45; --hh-success-bg: #edf6f1; --hh-danger: #a3211f; /* 6.44:1 — Final Hour, out of stock */ --hh-danger-bg: #fdf1f0; /* Strength — cigars are graded, and a grade is a scale, not a palette. One hue, five steps of the ink ramp. NEVER five colours; a strength meter in traffic-light green-to-red reads as a warning, which is not what body means. */ --hh-strength-1: #cfcdc7; --hh-strength-2: #a8a49a; --hh-strength-3: #7d786c; --hh-strength-4: #524d43; --hh-strength-5: var(--hh-ink); /* --------------------------------------------------------- TYPOGRAPHY Display: CAPSTONE DEMI-BOLD — the client's own licensed face, Carmel Type Co., self-hosted from fonts/. It is the face the live site already uses and it is the right one: enlarge the logo and it is a condensed Latin, tall narrow capitals with flared triangular serifs and a pointed apex on the A. A didone stand-in was the wrong family; this is not a stand-in. One weight only — see the @font-face note in site.css. Body/UI: Prompt. Already the site's face, already on Google Fonts, and clean at the 12-14px a price, a vitola and a ring gauge are actually set at. --------------------------------------------------------- */ --hh-font-display: 'Capstone', 'Copperplate', 'Times New Roman', serif; --hh-font-body: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Fluid scale. Away sets display at 56px/47.6 weight 400 with -0.04em tracking — large, light, tight. A didone cannot take -0.04em without the hairlines colliding, so display tracking here is -0.015em and the size goes up instead. */ /* 40 -> 64, capped at 1440. It was 44 -> 76, and 76 was over the wrap threshold: measured in the 560px hero column, 72px is the largest size that holds every one of the three titles to two lines, and "Rocky Patel Decade" — an eighteen-character product name — was breaking onto three. 64 sits clear of that edge rather than on it, which matters because the next product name the client adds is not going to be shorter. */ --hh-t-display: clamp(2.5rem, 4.45vw, 4rem); /* 40 -> 64 */ --hh-t-h1: clamp(2.25rem, 1.6rem + 2.9vw, 3.5rem); /* 36 -> 56 */ /* 24 -> 42. The old floor was 28px, set when the display face was Bodoni and headings ran in mixed case. Capstone sets CAPS, which are far wider: "A few of our favourites" needs 452px at 28px against 343px of content at a 375 viewport, so four of the seven headings wrapped. The slope is recomputed rather than just lowering the floor — a clamp floor only applies when the preferred value falls below it, and 1.4rem + 1.6vw still resolved to 28.4px at 375. */ --hh-t-h2: clamp(1.5rem, 1.1rem + 1.69vw, 2.625rem); /* 24 -> 42 */ --hh-t-h3: clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem);/* 21 -> 26 */ --hh-t-h4: 1.125rem; --hh-t-lg: 1.0625rem; --hh-t-base: 1rem; --hh-t-sm: 0.875rem; --hh-t-xs: 0.75rem; --hh-t-xxs: 0.6875rem; /* the eyebrow, uppercase only */ --hh-lh-tight: 1.02; --hh-lh-snug: 1.18; --hh-lh-base: 1.65; --hh-lh-loose: 1.8; --hh-ls-display: -0.015em; --hh-ls-head: -0.005em; --hh-ls-wide: 0.14em; /* eyebrows and uppercase labels */ --hh-ls-btn: 0.08em; /* --------------------------------------------------------- SPACE — 4px base --------------------------------------------------------- */ --hh-s1: 4px; --hh-s2: 8px; --hh-s3: 12px; --hh-s4: 16px; --hh-s5: 24px; --hh-s6: 32px; --hh-s7: 48px; --hh-s8: 64px; --hh-s9: 96px; --hh-s10:128px; /* THE CARD GUTTER — tiles, products, events, journal alike. Deliberately off the 4px scale, and deliberately smaller than --hh-gutter at every width. Measured on Away: 10-11px between category tiles, 10px between product cards on a phone and 5px on desktop, against a page gutter of 15px and 45px respectively. Their card gaps are always far tighter than the page edge. Ours had that inverted — a 24px rail gap inside a 16px gutter, so the row read looser than the margin containing it. One value now serves every card row. */ --hh-card-gap: 10px; --hh-section: clamp(56px, 4vw + 32px, 96px); --hh-section-lg: clamp(72px, 6vw + 40px, 128px); /* Measured against Away at 1600 and 2200: they run no cap until about 1830px of content, with a ~45px gutter. Ours was 1320 — and because the cap includes the 48px padding, real content was only 1224px at a 1440 viewport against their 1350. That is the width difference you can see. 1920 here yields 1824px of content at the cap, and matches them within ~6px at 1440, 1600 and 2200 alike. */ --hh-wrap: 1920px; --hh-wrap-narrow: 720px; /* Away runs a flat 15px gutter on a phone — hero, headings, tabs alike. 5vw resolved to 18.75px at 375, between the clamp bounds, so the floor never applied. 4.2vw puts 375 under the 16px floor and keeps a sane ramp upward: 32px at 768, 43px at 1024, capped at 48px. */ --hh-gutter: clamp(16px, 4.2vw, 48px); /* --------------------------------------------------------- RADIUS / ELEVATION / MOTION Radii are near-zero on purpose. A cigar band is a rectangle and so is a humidor. Pill corners read as a phone app. --------------------------------------------------------- */ --hh-r-sm: 2px; --hh-r: 3px; --hh-r-lg: 6px; --hh-r-full: 999px; --hh-shadow-sm: 0 1px 2px rgba(35,31,32,.06), 0 1px 3px rgba(35,31,32,.05); --hh-shadow: 0 2px 4px rgba(35,31,32,.05), 0 8px 20px rgba(35,31,32,.08); --hh-shadow-lg: 0 4px 8px rgba(35,31,32,.06), 0 20px 48px rgba(35,31,32,.14); --hh-ease: cubic-bezier(.22,.61,.36,1); --hh-fast: 150ms; --hh-slow: 340ms; /* Trustpilot's own palette, used as-is. #00b67a is 7.15:1 on the strip; #dcdce6 is the empty-star grey and only ever shows as the sliver at the end of a part-filled square. */ --hh-tp-green: #00b67a; --hh-tp-off: #dcdce6; /* The widest of the four messages is the free-delivery line at 289px. 300 clears it without letting a longer one silently ellipsis away. */ --hh-announce-msg-w: 300px; --hh-announce-h: 34px; /* 40px on a phone — the ticker arrows need the room */ /* The logo is 45.75px tall. At 64px the bar left it 9px of clearance top and bottom — a fifth of its own height, which reads as cramped. 84px gives it 19px, close to half its height, which is the exclusion zone a wordmark wants. */ --hh-utility-h: 84px; --hh-nav-h: 52px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }