/* ============================================================ * CROWS VISION // UI KIT — COUSIN SKIN * ------------------------------------------------------------ * Rides on top of the Warung Cyber v2 kit (load AFTER all wc2 * CSS). Reuses WC's engine — components, reveals, glitch, layout * discipline — but reskins it into the Crows Vision brand: * palette purple/lime -> black / blood-red / bone / gold * display Orbitron -> Chakra Petch (thick futuristic) * mono JetBrains -> Share Tech Mono (subtle distinguisher) * accent the glitch -> the occult eye + brush lettering * * Add class="wc2-portfolio cv-skin" on . * ============================================================ */ /* Brush face for the "VISION" side — Kill the Noise (dafont, local @font-face). url is relative to THIS file (brand/kit/) -> ../fonts/ */ @font-face { font-family: "Kill the Noise"; src: url("../fonts/KillTheNoise.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } /* Override the portfolio wrapper (beats .wc2-portfolio specificity) */ .wc2-portfolio.cv-skin { /* ---- fonts: CV duality (LOCKED) ---- */ --wc-font-display: "Tektur", "Orbitron", sans-serif; /* CROWS — futuristic thick */ --wc-font-mono: "Share Tech Mono", ui-monospace, Consolas, monospace; --cv-font-brush: "Kill the Noise", "Rock Salt", cursive; /* VISION — brush */ --cv-font-body: "Space Grotesk", system-ui, sans-serif; } /* All token remaps — defined on body so they cascade to every child */ .cv-skin { /* ---- BRAND PALETTE ---- */ --wc-ground: #0E0E0E; --wc-purple: #2B2B2B; /* structure / HUD lines base (was main purple) */ --wc-purple-bright: #E11212; /* hover halos / sparks -> blood red */ --wc-lime: #E11212; /* MAIN loud accent -> blood red */ --wc-orange: #DDA22A; /* THIRD spark -> crown gold */ --wc-ink: #F7F5F0; --wc-muted: #9A958C; /* ---- SUBSTRATE (warm-neutral dark, not purple) ---- */ --wc-bg: #0A0A0A; --wc-bg-1: #121212; --wc-bg-2: #1A1A1A; --wc-bg-3: #242424; --wc-bg-4: #2E2E2E; /* ---- INK SCALE (bone -> charcoal) ---- */ --wc-ink-1: #F7F5F0; --wc-ink-2: #D8D5CE; --wc-ink-3: #9A958C; --wc-ink-4: #5E5A52; --wc-ink-5: #2A2825; /* ---- LINE WEIGHTS (bone hairlines + red accent line) ---- */ --wc-line: rgba(247, 245, 240, 0.16); --wc-line-soft: rgba(247, 245, 240, 0.08); --wc-line-faint: rgba(247, 245, 240, 0.04); --wc-line-lime: rgba(225, 18, 18, 0.60); /* accent outline -> red */ --wc-line-orange: rgba(221, 162, 42, 0.55); /* gold */ /* ---- STATUS (no green in CV; red = crit, gold = warn) ---- */ --wc-ok: #F7F5F0; --wc-warn: #DDA22A; --wc-crit: #E11212; --wc-neutral: #9A958C; /* ---- GLOW (red/gold instead of lime/purple) ---- */ --wc-glow-lime: 0 0 20px rgba(225, 18, 18, 0.42); --wc-glow-orange: 0 0 20px rgba(221, 162, 42, 0.42); --wc-glow-crit: 0 0 18px rgba(225, 18, 18, 0.55); --wc-glow-purple: 0 0 28px rgba(225, 18, 18, 0.28); /* ---- SHADOWS / FOCUS (focus ring -> red) ---- */ --wc-shadow-focus: 0 0 0 1px var(--wc-lime), 0 0 24px rgba(225, 18, 18, 0.20); } /* ============================================================ * CV-OWN SIGNATURES (what keeps it a cousin, not a clone) * ============================================================ */ /* Brush accent — the "VISION" side of the duality. Placeholder font; for hero use, swap in the hand-lettered logo art. */ .cv-brush { font-family: var(--cv-font-brush); color: var(--wc-lime); text-transform: none; letter-spacing: 0; line-height: 1.1; } /* Sticker keyline — CV's edge signature, lifted straight off the logo. Bone-white outline that hugs the element's alpha shape (follows clip-path notches too, unlike box-shadow). This replaces WC's lime-outline pattern. */ .cv-keyline { filter: drop-shadow( 1.5px 0 0 var(--wc-ink-1)) drop-shadow(-1.5px 0 0 var(--wc-ink-1)) drop-shadow(0 1.5px 0 var(--wc-ink-1)) drop-shadow(0 -1.5px 0 var(--wc-ink-1)); } /* Occult-eye motif marker — small red ring used as CV's recurring detail (the WC equivalent slot is the glitch). */ .cv-eye { display: inline-block; width: 0.7em; height: 0.7em; border: 2px solid var(--wc-lime); border-radius: 50%; position: relative; vertical-align: middle; } .cv-eye::after { content: ""; position: absolute; inset: 26%; background: var(--wc-lime); border-radius: 50%; } /* Optional readable body copy in Space Grotesk (the duality's neutral leg). Apply .cv-body to longer paragraphs where mono gets tiring. */ .cv-body { font-family: var(--cv-font-body); letter-spacing: 0; line-height: 1.5; } /* Gold (Crown Gold) button — brings the THIRD brand color onto the UI. Use sparingly (it's the crown accent), e.g. the primary contact CTA. */ .wc2-ccbtn.cv-gold { background: var(--wc-orange); color: #0A0A0A; } .wc2-ccbtn.cv-gold:hover { filter: brightness(1.12) drop-shadow(0 0 26px rgba(221, 162, 42, 0.60)); }