/* ========================================================================== VFW Theme: CLASSIC POSTER -------------------------------------------------------------------------- A reusable "vintage muscle-car poster" theme for VFW projects — bold condensed uppercase type, a two-tone high-contrast palette, sharp-cornered cards and buttons, diagonal racing stripes, and a subtle screen-print grain. Built for automotive-workshop / retro-poster sites (first consumer: Oropeza Multiservicios). Three parts, mirroring the `blender` theme: 1. FONTS — self-hosted condensed faces (Big Shoulders Display for the heavy poster headings, Oswald for the narrow technical labels). No CDN; the .woff2 files live in ./fonts/. 2. THEME TOKENS — `.vfw-theme-classic-poster` defines a private `--cp-*` vocabulary (the palette + type + texture) and maps it onto the semantic `--vfw-color-*` layer, so every stock VFW widget re-skins automatically. The palette is PRESET-SWAPPABLE: everything decorative reads `--cp-accent` / `--cp-ink`, never a literal hue, so a future preset (e.g. black+green) overrides just those `--cp-*` values in a separate file — exactly how the blender presets override `--bl-*`. 2b. STATUS TREATMENT — VFW form widgets need functional success/warning/error colors, but the poster palette forbids decorative red/blue/green. The DEFAULT here is PALETTE-PURE (the faithful poster look): statuses collapse to gold and error stays legible by INVERTING to white, never introducing red. Add `vfw-cp-status-muted` alongside the theme class for the softer, desaturated set (olive/brick/steel) with stronger error affordance. The showcase renders both so the difference is visible. 3. COMPONENT KIT — `vfw-cp-*` classes that reproduce the poster LANGUAGE: full-bleed alternating sections, the yellow nav bar, the hero, the strict service-card grid, rectangular invert-hover buttons, racing stripes, the grain overlay, the monochrome gallery, and the multi-column footer. Class naming: single-dash kebab, `vfw-cp-` prefix, modifiers as full words (`vfw-cp-section-accent`, not `--accent`). No `__`, no column alignment. Usage: load core/reset.css, then core/tokens.css, then this file, then add `vfw-theme-classic-poster` to . Section colors come from the section wrapper classes, not a global background — the theme is two-tone by nature. ========================================================================== */ /* ========================================================================== 1. FONTS (self-hosted — see ./fonts/) ========================================================================== */ @font-face { font-family: 'CP Display'; src: url('fonts/big-shoulders-800.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'CP Condensed'; src: url('fonts/oswald-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'CP Condensed'; src: url('fonts/oswald-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== 2. THEME TOKENS ========================================================================== */ .vfw-theme-classic-poster { /* --- Palette (PRESET-SWAPPABLE hues) --- */ --cp-accent: #ffd21a; /* poster yellow — THE swappable brand hue */ --cp-accent-strong: #f5c400; /* darker yellow for hover / pressed */ --cp-accent-weak: rgba(255, 210, 26, 0.18); /* tint fills, focus rings */ --cp-on-accent: #101010; /* text/icons on an accent field (= ink) */ /* --- Palette (fixed ink + neutrals) --- */ --cp-ink: #0a0a0a; /* deep black — section base */ --cp-ink-2: #1a1a1a; /* charcoal — card body */ --cp-ink-3: #2a2a2a; /* dark gray — raised control / hover */ --cp-paper: #f2f0e8; /* warm off-white — light utility surface */ --cp-white: #ffffff; --cp-gray: #777777; /* medium gray — secondary text */ --cp-gray-light: #d6d6d6; /* light gray — muted text on ink */ --cp-keyline: var(--cp-accent); /* thin yellow border everywhere */ --cp-keyline-muted: rgba(255, 210, 26, 0.4); /* muted-gold card border */ /* --- Typography --- */ --cp-font-display: 'CP Display', 'Big Shoulders Display', 'CP Condensed', 'Oswald', Impact, 'Haettenschweiler', sans-serif; --cp-font-technical: 'CP Condensed', 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif; --cp-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* --- Texture (zero-dep inline SVG grain + halftone dots) --- */ --cp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --cp-grain-opacity: 0.06; --cp-halftone-size: 4px; /* --- Status source hues (feed the opt-in vfw-cp-status-muted set) --- */ --cp-status-success: #7a8a3f; /* muted olive */ --cp-status-warning: var(--cp-accent); /* warnings are already the brand gold */ --cp-status-error: #b0402f; /* muted brick */ --cp-status-info: #5f7078; /* muted steel */ /* --- Map onto the semantic --vfw-color-* layer (re-skins all widgets) --- */ /* Default surface is ink-dominant; opt into yellow with vfw-cp-section-accent. */ --vfw-color-background: var(--cp-ink); --vfw-color-surface: var(--cp-ink-2); --vfw-color-border: var(--cp-keyline-muted); --vfw-color-text: var(--cp-white); --vfw-color-text-muted: var(--cp-gray-light); --vfw-color-primary: var(--cp-accent); --vfw-color-primary-hover: var(--cp-accent-strong); --vfw-color-primary-light: var(--cp-accent-weak); --vfw-color-primary-focus: var(--cp-accent-weak); --vfw-color-text-on-primary: var(--cp-on-accent); /* Status: DEFAULT is palette-pure (the faithful poster treatment). Everything collapses to gold; error stays legible by INVERTING (white field/text) instead of introducing red. Add vfw-cp-status-muted for the softer, desaturated set with stronger error affordance. */ --vfw-color-info: var(--cp-accent); --vfw-color-info-bg: var(--cp-accent-weak); --vfw-color-info-border: var(--cp-keyline-muted); --vfw-color-info-text: var(--cp-accent); --vfw-color-info-contrast: var(--cp-ink); --vfw-color-success: var(--cp-accent); --vfw-color-success-bg: var(--cp-accent-weak); --vfw-color-success-border: var(--cp-keyline-muted); --vfw-color-success-text: var(--cp-accent); --vfw-color-success-contrast: var(--cp-ink); --vfw-color-warning: var(--cp-accent); --vfw-color-warning-bg: var(--cp-accent-weak); --vfw-color-warning-border: var(--cp-keyline-muted); --vfw-color-warning-text: var(--cp-accent); --vfw-color-warning-contrast: var(--cp-ink); --vfw-color-error: var(--cp-white); --vfw-color-error-bg: rgba(255, 255, 255, 0.08); --vfw-color-error-border: var(--cp-white); --vfw-color-error-text: var(--cp-white); --vfw-color-error-contrast: var(--cp-ink); --vfw-navbar-bg: var(--cp-accent); --vfw-shadow-color: rgba(0, 0, 0, 0.55); /* --- System tokens: sharp corners + poster type --- */ --vfw-border-radius: 0; /* rectangular — no pills, no SaaS rounding */ --vfw-font-family: var(--cp-font-body); --vfw-font-family-headings: var(--cp-font-display); } /* --- Optional MUTED status override (add class alongside theme) --- */ /* Softer, desaturated functional colors — olive success, brick error, steel info — with stronger error affordance than the palette-pure default. */ .vfw-cp-status-muted { --vfw-color-info: var(--cp-status-info); --vfw-color-info-bg: rgba(95, 112, 120, 0.15); --vfw-color-info-border: rgba(95, 112, 120, 0.5); --vfw-color-info-text: #b6c4cc; --vfw-color-info-contrast: var(--cp-ink); --vfw-color-success: var(--cp-status-success); --vfw-color-success-bg: rgba(122, 138, 63, 0.15); --vfw-color-success-border: rgba(122, 138, 63, 0.5); --vfw-color-success-text: #c3d089; --vfw-color-success-contrast: var(--cp-ink); --vfw-color-warning: var(--cp-status-warning); --vfw-color-warning-bg: rgba(255, 210, 26, 0.15); --vfw-color-warning-border: var(--cp-keyline-muted); --vfw-color-warning-text: var(--cp-accent); --vfw-color-warning-contrast: var(--cp-ink); --vfw-color-error: var(--cp-status-error); --vfw-color-error-bg: rgba(176, 64, 47, 0.15); --vfw-color-error-border: rgba(176, 64, 47, 0.5); --vfw-color-error-text: #e79484; --vfw-color-error-contrast: var(--cp-white); } /* ========================================================================== 3. COMPONENT KIT — vfw-cp-* ========================================================================== */ /* --- 3.1 Full-bleed sections + inner container ------------------------------ Every section spans the full viewport width with zero side gutter; padding lives on the inner container, never on the full-bleed layer. This satisfies the theme's edge-integrity rule (first and last pixel column carry the section color — no pale seam). Requires a margin-0 (core/reset.css). */ .vfw-cp-section { position: relative; width: 100%; box-sizing: border-box; overflow: hidden; background-color: var(--cp-ink); color: var(--cp-white); } .vfw-cp-section-accent { background-color: var(--cp-accent); color: var(--cp-on-accent); } .vfw-cp-section-ink { background-color: var(--cp-ink); color: var(--cp-white); } .vfw-cp-section-paper { background-color: var(--cp-paper); color: var(--cp-ink); } .vfw-cp-container { position: relative; z-index: 1; /* sit above the grain overlay */ max-width: var(--vfw-container-max, 1200px); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--vfw-container-padding, 1.5rem); box-sizing: border-box; } /* --- 3.2 Grain / halftone texture overlay ---------------------------------- Apply vfw-cp-texture to any section for the subtle screen-print finish. The overlay is a pseudo-element clipped inside the section (overflow:hidden), so it can never leave a pale edge pixel. */ .vfw-cp-texture::before { content: ''; position: absolute; inset: 0; background-image: var(--cp-grain); opacity: var(--cp-grain-opacity); pointer-events: none; z-index: 0; mix-blend-mode: multiply; } .vfw-cp-section-ink.vfw-cp-texture::before, .vfw-cp-section.vfw-cp-texture::before { mix-blend-mode: screen; /* grain reads as light ink-wear on black */ } /* --- 3.3 Diagonal racing stripes -------------------------------------------- A reusable brand motif. Drop vfw-cp-stripes on a positioned element to get a black/white/accent diagonal band clipped to its box. */ .vfw-cp-stripes { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: repeating-linear-gradient( -58deg, transparent 0, transparent 26px, rgba(0, 0, 0, 0.9) 26px, rgba(0, 0, 0, 0.9) 40px, transparent 40px, transparent 48px, var(--cp-white) 48px, var(--cp-white) 54px ); opacity: 0.85; } /* --- 3.4 Navigation bar ----------------------------------------------------- */ .vfw-cp-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--vfw-space-lg, 1.5rem); width: 100%; box-sizing: border-box; padding: 0.75rem var(--vfw-container-padding, 1.5rem); background-color: var(--cp-accent); color: var(--cp-on-accent); border-bottom: 3px solid var(--cp-ink); } .vfw-cp-nav-logo { font-family: var(--cp-font-display); font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cp-ink); } .vfw-cp-nav-links { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); list-style: none; margin: 0; padding: 0; } .vfw-cp-nav-links a { font-family: var(--cp-font-technical); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--cp-ink); transition: opacity var(--vfw-transition-fast, 0.15s ease); } .vfw-cp-nav-links a:hover { opacity: 0.6; } /* --- 3.5 Headings + eyebrow ------------------------------------------------- */ .vfw-cp-heading { font-family: var(--cp-font-display); font-weight: 800; font-size: clamp(1.75rem, 5vw, 3rem); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 var(--vfw-space-lg, 1.5rem); } .vfw-cp-heading-center { text-align: center; } .vfw-cp-eyebrow { display: inline-block; font-family: var(--cp-font-technical); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 var(--vfw-space-sm, 0.5rem); } /* --- 3.6 Hero -------------------------------------------------------------- */ .vfw-cp-hero { display: flex; flex-direction: column; gap: var(--vfw-space-lg, 1.5rem); } .vfw-cp-hero-title { font-family: var(--cp-font-display); font-weight: 800; font-size: clamp(3rem, 12vw, 7rem); line-height: 0.86; letter-spacing: 0.005em; text-transform: uppercase; margin: 0; font-style: italic; /* poster forward-lean */ } .vfw-cp-hero-sub { font-family: var(--cp-font-technical); font-weight: 500; font-size: clamp(1rem, 2.5vw, 1.5rem); letter-spacing: 0.16em; text-transform: uppercase; margin: 0; } .vfw-cp-hero-actions { display: flex; flex-wrap: wrap; gap: var(--vfw-space-md, 1rem); margin-top: var(--vfw-space-md, 1rem); } /* --- 3.7 Buttons (rectangular, uppercase, invert on hover) ------------------ */ .vfw-cp-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.75rem; border: 2px solid currentColor; border-radius: 0; background: transparent; color: inherit; font-family: var(--cp-font-technical); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color var(--vfw-transition-fast, 0.15s ease), color var(--vfw-transition-fast, 0.15s ease); } /* Primary resolves against the section it sits in (ink on yellow / gold on black). */ .vfw-cp-button-primary { background-color: var(--cp-ink); color: var(--cp-accent); border-color: var(--cp-ink); } .vfw-cp-button-primary:hover { background-color: var(--cp-accent); color: var(--cp-ink); border-color: var(--cp-ink); } .vfw-cp-section-ink .vfw-cp-button-primary, .vfw-cp-section-paper .vfw-cp-button-primary { background-color: var(--cp-accent); color: var(--cp-ink); border-color: var(--cp-accent); } .vfw-cp-section-ink .vfw-cp-button-primary:hover, .vfw-cp-section-paper .vfw-cp-button-primary:hover { background-color: transparent; color: var(--cp-accent); border-color: var(--cp-accent); } .vfw-cp-button-secondary { background-color: transparent; color: inherit; border-color: currentColor; } .vfw-cp-button-secondary:hover { background-color: var(--cp-ink); color: var(--cp-accent); border-color: var(--cp-ink); } .vfw-cp-section-ink .vfw-cp-button-secondary:hover { background-color: var(--cp-accent); color: var(--cp-ink); border-color: var(--cp-accent); } /* --- 3.8 Service-card grid -------------------------------------------------- */ .vfw-cp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vfw-space-md, 1rem); } .vfw-cp-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--vfw-space-sm, 0.5rem); min-height: 150px; padding: var(--vfw-space-lg, 1.5rem) var(--vfw-space-md, 1rem); box-sizing: border-box; background-color: var(--cp-ink-2); border: 1px solid var(--cp-keyline-muted); text-align: center; transition: border-color var(--vfw-transition-fast, 0.15s ease), background-color var(--vfw-transition-fast, 0.15s ease); } .vfw-cp-card:hover { border-color: var(--cp-accent); background-color: var(--cp-ink-3); } .vfw-cp-card-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--cp-accent); } .vfw-cp-card-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; } .vfw-cp-card-label { font-family: var(--cp-font-technical); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-white); line-height: 1.2; } /* --- 3.9 Divider / keyline -------------------------------------------------- */ .vfw-cp-divider { width: 64px; height: 4px; border: 0; margin: var(--vfw-space-md, 1rem) 0; background-color: var(--cp-accent); } .vfw-cp-heading-center + .vfw-cp-divider, .vfw-cp-divider-center { margin-left: auto; margin-right: auto; } /* --- 3.10 Monochrome gallery ------------------------------------------------ */ .vfw-cp-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vfw-space-sm, 0.5rem); } .vfw-cp-gallery-item { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--cp-gray); background-color: var(--cp-ink-2); } .vfw-cp-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) sepia(0.25) contrast(1.05); transition: filter var(--vfw-transition-normal, 0.3s ease); } .vfw-cp-gallery-item:hover img { filter: grayscale(0.4) sepia(0.1) contrast(1.05); } /* --- 3.11 Contact methods --------------------------------------------------- */ .vfw-cp-contact-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vfw-space-lg, 1.5rem); text-align: center; } .vfw-cp-contact-item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .vfw-cp-contact-item .vfw-cp-card-icon { color: var(--cp-ink); } .vfw-cp-contact-label { font-family: var(--cp-font-technical); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; } .vfw-cp-contact-value { font-family: var(--cp-font-body); font-size: 0.9rem; } /* --- 3.12 Footer ------------------------------------------------------------ */ .vfw-cp-footer { background-color: var(--cp-ink); color: var(--cp-gray-light); border-top: 3px solid var(--cp-accent); } .vfw-cp-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--vfw-space-xl, 2rem); } .vfw-cp-footer-col h4 { font-family: var(--cp-font-technical); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cp-accent); margin: 0 0 var(--vfw-space-sm, 0.5rem); } .vfw-cp-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .vfw-cp-footer-col a { color: var(--cp-gray-light); text-decoration: none; font-size: 0.9rem; transition: color var(--vfw-transition-fast, 0.15s ease); } .vfw-cp-footer-col a:hover { color: var(--cp-accent); } .vfw-cp-footer-copy { font-size: 0.75rem; color: var(--cp-gray); text-align: center; } /* ========================================================================== 4. RESPONSIVE — expand horizontally, never change the concept ========================================================================== */ @media (min-width: 640px) { .vfw-cp-grid, .vfw-cp-gallery { grid-template-columns: repeat(3, 1fr); } .vfw-cp-contact-methods { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 960px) { .vfw-cp-grid { grid-template-columns: repeat(4, 1fr); } .vfw-cp-gallery { grid-template-columns: repeat(4, 1fr); } .vfw-cp-hero { gap: var(--vfw-space-xl, 2rem); } } /* @audited cfw style=84cd6c886239 memsec=99a3f1bf3dca test=84cd6c886239 */