/* ── styles.css ── */ /* ============================================================ White Cloak Design System — global entry point Consumers link THIS file. Keep it as @import lines only. ============================================================ */ /* ── tokens/fonts.css ── */ /* ============================================================ White Cloak — Webfonts Brand fonts (commercial — not web-free): Headlines: RIGHT GROTESK COMPACT BLACK Body: NEUE MONTREAL (Regular / Bold) ⚠️ SUBSTITUTION (flagged to brand — please supply licensed webfonts): Headlines → "Bricolage Grotesque" (free, Google Fonts; closest match to Right Grotesk — a contemporary grotesque with the same subtle INK-TRAPS that intensify in the heavy weights, up to weight 800. Much closer than Anton.) Body / UI → "Manrope" (free; closest reliable match to Neue Montreal's clean neo-grotesque body voice) Mono → "JetBrains Mono" (engineering / code utility only) If you want an even more "agency-premium" display, Fontshare's free "Clash Display" is a strong alternative — say the word and I'll swap it. Self-host the real Right Grotesk + Neue Montreal .woff2 and repoint here once licensing is in hand. ============================================================ */ /* ── styles.css ── */ /* ── tokens/colors.css ── */ /* ============================================================ White Cloak — Color tokens ("New Era" refresh) Faithful to the brand guidelines: a gray-forward system led by Opal Gray, with sparing pops of color. The refresh adds a touch of WARMTH via slightly warm neutrals + Yellow Gold as the signature warm accent. Brand hexes are preserved exactly. ============================================================ */ :root { } /* ── styles.css ── */ /* ── tokens/typography.css ── */ /* ============================================================ White Cloak — Typography tokens ("New Era" refresh) Display: Anton (sub. Right Grotesk Compact Black) — HEADLINES ONLY Text/UI: Manrope (sub. Neue Montreal) — body, sub-headlines, labels Mono: JetBrains Mono — code utility ============================================================ */ :root { /* @kind other */ } /* ── styles.css ── */ /* ── tokens/spacing.css ── */ /* ============================================================ White Cloak — Spacing & layout tokens (8pt base, warm rhythm) ============================================================ */ :root { --gutter: clamp(1.25rem, 4vw, 4rem); /* @kind spacing */ --section-y: clamp(4rem, 8vw, 8rem); /* @kind spacing */ } /* ── styles.css ── */ /* ── tokens/effects.css ── */ /* ============================================================ White Cloak — Radii, shadows, motion ("New Era" refresh) Soft, neutral slate-tinted elevation. Golden-ratio-derived rounded corners echo the crown logo's equal corner radii. ============================================================ */ :root { /* @kind other */ } /* ── styles.css ── */ /* ── tokens/patterns.css ── */ /* ============================================================ White Cloak — Brand Pattern: "Chainmail Chevron" ------------------------------------------------------------ The ownable signature texture. Derived from the Crown logo's three ascending blades ("Knights serve Kings") rendered as nested, woven chevrons — armor / chainmail. Use it to make any surface read as White Cloak WITHOUT a logo or name. USAGE • Quick (pre-colored): add a class, e.g.
Scale with the size modifiers (--sm / --lg / --xl) or by overriding `background-size`. • Tinted to any color (mask technique): • Programmatic (JS/React): see `chevronBg()` in the website kit. ALWAYS keep it subtle behind content (it's texture, not décor): fade it with a mask-image gradient, or keep opacity low. One pattern moment per view. ============================================================ */ :root { /* One tile = one mesh period (48 × 24). Interlocking diamonds — a soft chainmail / mail-armor mesh. Thin strokes + low opacity = faint texture. */ --wc-pattern-size: 48px 24px; /* Pre-colored, pre-opacity'd colorways (ready for background-image). */ --wc-pattern-ink-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%2323292E' stroke-opacity='0.05' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0,12L12,3L24,12L36,3L48,12'/%3E%3Cpath d='M0,12L12,21L24,12L36,21L48,12'/%3E%3C/g%3E%3C/svg%3E"); /* @kind other */ --wc-pattern-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%2323292E' stroke-opacity='0.11' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0,12L12,3L24,12L36,3L48,12'/%3E%3Cpath d='M0,12L12,21L24,12L36,21L48,12'/%3E%3C/g%3E%3C/svg%3E"); /* @kind other */ --wc-pattern-white-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23ECEBEA' stroke-opacity='0.07' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0,12L12,3L24,12L36,3L48,12'/%3E%3Cpath d='M0,12L12,21L24,12L36,21L48,12'/%3E%3C/g%3E%3C/svg%3E"); /* @kind other */ --wc-pattern-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23D88728' stroke-opacity='0.22' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0,12L12,3L24,12L36,3L48,12'/%3E%3Cpath d='M0,12L12,21L24,12L36,21L48,12'/%3E%3C/g%3E%3C/svg%3E"); /* @kind other */ --wc-pattern-opal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%239FACAB' stroke-opacity='0.32' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0,12L12,3L24,12L36,3L48,12'/%3E%3Cpath d='M0,12L12,21L24,12L36,21L48,12'/%3E%3C/g%3E%3C/svg%3E"); /* @kind other */ /* Color-agnostic tile (solid black) for the mask technique. */ --wc-pattern-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0,12L12,3L24,12L36,3L48,12'/%3E%3Cpath d='M0,12L12,21L24,12L36,21L48,12'/%3E%3C/g%3E%3C/svg%3E"); /* @kind other */ } /* ---- Quick utility: pre-colored background ---- */ .wc-bg-pattern { background-image: var(--wc-pattern-ink-soft); background-size: var(--wc-pattern-size); background-repeat: repeat; } .wc-bg-pattern--ink { background-image: var(--wc-pattern-ink-soft); } .wc-bg-pattern--ink2 { background-image: var(--wc-pattern-ink); } .wc-bg-pattern--white { background-image: var(--wc-pattern-white-soft); } .wc-bg-pattern--gold { background-image: var(--wc-pattern-gold); } .wc-bg-pattern--opal { background-image: var(--wc-pattern-opal); } /* Scale modifiers */ .wc-bg-pattern--sm { background-size: 30px 15px; } .wc-bg-pattern--lg { background-size: 64px 32px; } .wc-bg-pattern--xl { background-size: 96px 48px; } /* ---- Tint to ANY color via mask (uses the element's `color`) ---- */ .wc-pattern-mask { background-color: currentColor; -webkit-mask-image: var(--wc-pattern-mask); mask-image: var(--wc-pattern-mask); -webkit-mask-size: var(--wc-pattern-size); mask-size: var(--wc-pattern-size); -webkit-mask-repeat: repeat; mask-repeat: repeat; } /* ---- Helper: a full-bleed texture layer that fades out. Put on an absolutely-positioned child of a position:relative box. ---- */ .wc-pattern-layer { position: absolute; inset: 0; pointer-events: none; background-image: var(--wc-pattern-ink-soft); background-size: var(--wc-pattern-size); -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 72%); mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 72%); } /* ── styles.css ── */ /* ── tokens/fonts.css ── */ /* ── tokens/colors.css ── */ /* ── tokens/typography.css ── */ /* ── tokens/spacing.css ── */ /* ── tokens/effects.css ── */ /* ── tokens/patterns.css ── */