/* bauhaus.css — Bauhaus variant overrides Activated by .tcsp-bauhaus on . Geometric primitives, primary palette (red/yellow/blue + black), thick rules, geometric sans (Futura -> fallback). Layered ON TOP of styles.css — only redefines what changes. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap'); .tcsp-bauhaus { --bh-red: #E63946; --bh-yellow: #F4C430; --bh-blue: #2563EB; --bh-black: #0A0A0A; --bh-cream: #F2EBDB; --bh-paper: #EDE6D3; --bh-rule: 3px; background: var(--bh-cream); font-family: 'Archivo', 'Futura', -apple-system, sans-serif; color: var(--bh-black); } /* Type — Archivo as Futura proxy, very tight tracking */ .tcsp-bauhaus h1, .tcsp-bauhaus h2, .tcsp-bauhaus h3 { font-family: 'Archivo', 'Futura', sans-serif; font-weight: 900; letter-spacing: -2px; text-transform: uppercase; color: var(--bh-black); } .tcsp-bauhaus .tcsp-eyebrow, .tcsp-bauhaus .tcsp-section-eyebrow, .tcsp-bauhaus .tcsp-receipts-eyebrow, .tcsp-bauhaus .tcsp-booking-eyebrow, .tcsp-bauhaus .tcsp-receipt-label, .tcsp-bauhaus .tcsp-tl-day, .tcsp-bauhaus .tcsp-fit-label, .tcsp-bauhaus .tcsp-bs-label, .tcsp-bauhaus .tcsp-card-title, .tcsp-bauhaus .tcsp-card-link, .tcsp-bauhaus .tcsp-modal-title, .tcsp-bauhaus .tcsp-modal-step, .tcsp-bauhaus .tcsp-field label { font-family: 'Space Mono', 'Courier New', monospace; font-weight: 700; letter-spacing: 0.18em; } .tcsp-bauhaus .tcsp-eyebrow, .tcsp-bauhaus .tcsp-section-eyebrow { color: var(--bh-red); } /* ---------- NAV ---------- */ .tcsp-bauhaus .tcsp-nav { background: var(--bh-cream); border-bottom: var(--bh-rule) solid var(--bh-black); backdrop-filter: none; -webkit-backdrop-filter: none; } .tcsp-bauhaus .tcsp-brand, .tcsp-bauhaus .tcsp-brand b { color: var(--bh-black); font-family: 'Archivo', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.3px; } .tcsp-bauhaus .tcsp-brand b { color: var(--bh-red); } .tcsp-bauhaus .tcsp-brand-divider { color: var(--bh-black); } .tcsp-bauhaus .tcsp-brand-section { color: var(--bh-black); font-weight: 700; } .tcsp-bauhaus .tcsp-nav-back { color: var(--bh-black); } .tcsp-bauhaus .tcsp-nav-back:hover { color: var(--bh-blue); } /* ---------- HERO ---------- */ .tcsp-bauhaus .tcsp-hero { position: relative; border-bottom: var(--bh-rule) solid var(--bh-black); background: /* big yellow circle */ radial-gradient(circle at 88% 22%, var(--bh-yellow) 0 180px, transparent 181px), /* blue square (gradient mask trick) */ linear-gradient(var(--bh-cream), var(--bh-cream)); overflow: hidden; } .tcsp-bauhaus .tcsp-hero::before { /* blue square */ content: ""; position: absolute; right: 8%; bottom: 60px; width: 140px; height: 140px; background: var(--bh-blue); z-index: 0; } .tcsp-bauhaus .tcsp-hero::after { /* red triangle (clip-path) */ content: ""; position: absolute; right: 22%; bottom: 110px; width: 130px; height: 130px; background: var(--bh-red); clip-path: polygon(50% 0, 100% 100%, 0 100%); z-index: 0; } .tcsp-bauhaus .tcsp-hero .tc-container { position: relative; z-index: 1; } .tcsp-bauhaus .tcsp-hero h1 { font-size: clamp(44px, 7vw, 88px); letter-spacing: -3px; line-height: 0.95; text-transform: uppercase; } .tcsp-bauhaus .tcsp-hero h1 .tcsp-h1-accent { color: var(--bh-red); display: inline-block; border-bottom: 6px solid var(--bh-black); padding-bottom: 4px; } .tcsp-bauhaus .tcsp-hero-sub { font-family: 'Archivo', sans-serif; font-weight: 500; color: var(--bh-black); border-left: var(--bh-rule) solid var(--bh-black); padding-left: 20px; max-width: 560px; } .tcsp-bauhaus .tcsp-hero-sub strong { background: var(--bh-yellow); padding: 0 4px; font-weight: 700; } .tcsp-bauhaus .tcsp-status { background: var(--bh-yellow); border: var(--bh-rule) solid var(--bh-black); border-radius: 0; font-family: 'Space Mono', monospace; font-weight: 700; color: var(--bh-black); text-transform: uppercase; letter-spacing: 0.12em; padding: 6px 12px; } .tcsp-bauhaus .tcsp-pulse { background: var(--bh-red); } .tcsp-bauhaus .tcsp-linkedin-hint { color: var(--bh-black); font-weight: 600; } .tcsp-bauhaus .tcsp-linkedin-hint .tcsp-arrow { color: var(--bh-blue); } /* Hero terminal becomes a black "manifesto" block */ .tcsp-bauhaus .tcsp-hero-terminal { background: var(--bh-black); border: var(--bh-rule) solid var(--bh-black); border-radius: 0; box-shadow: 8px 8px 0 0 var(--bh-red); } .tcsp-bauhaus .tcsp-term-bar { background: var(--bh-black); border-bottom: 2px solid var(--bh-yellow); } .tcsp-bauhaus .tcsp-term-dot.r { background: var(--bh-red); } .tcsp-bauhaus .tcsp-term-dot.y { background: var(--bh-yellow); } .tcsp-bauhaus .tcsp-term-dot.g { background: var(--bh-blue); } .tcsp-bauhaus .tcsp-term-prompt { color: var(--bh-yellow); } .tcsp-bauhaus .tcsp-term-key { color: var(--bh-yellow); } .tcsp-bauhaus .tcsp-term-num { color: var(--bh-red); font-weight: 700; } .tcsp-bauhaus .tcsp-term-cursor { background: var(--bh-yellow); } /* ---------- BUTTONS ---------- */ .tcsp-bauhaus .tcsp-btn { border-radius: 0; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; border: var(--bh-rule) solid var(--bh-black); font-family: 'Archivo', sans-serif; } .tcsp-bauhaus .tcsp-btn-primary { background: var(--bh-red); color: var(--bh-black); border-color: var(--bh-black); } .tcsp-bauhaus .tcsp-btn-primary:hover { background: var(--bh-black); color: var(--bh-cream); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 0 var(--bh-red); } .tcsp-bauhaus .tcsp-btn-ghost { background: var(--bh-cream); color: var(--bh-black); border-color: var(--bh-black); } .tcsp-bauhaus .tcsp-btn-ghost:hover { background: var(--bh-yellow); } /* ---------- SECTION SCAFFOLDING ---------- */ .tcsp-bauhaus .tcsp-section { border-top: var(--bh-rule) solid var(--bh-black); background: var(--bh-cream); } .tcsp-bauhaus .tcsp-section h2 { font-size: clamp(32px, 4.4vw, 56px); text-transform: uppercase; line-height: 0.95; letter-spacing: -1.5px; } .tcsp-bauhaus .tcsp-section-lead { border-left: var(--bh-rule) solid var(--bh-blue); padding-left: 18px; color: var(--bh-black); } /* ---------- PROBLEM ---------- */ .tcsp-bauhaus .tcsp-problem-item p { color: var(--bh-black); font-weight: 500; } .tcsp-bauhaus .tcsp-problem-item p .tcsp-em { font-style: normal; background: var(--bh-yellow); padding: 0 4px; font-weight: 700; } /* ---------- TIMELINE ---------- */ .tcsp-bauhaus .tcsp-timeline::before { background: var(--bh-black); width: 3px; } .tcsp-bauhaus .tcsp-tl-item::before { background: var(--bh-cream); border: 3px solid var(--bh-black); width: 14px; height: 14px; left: -38px; top: 4px; border-radius: 0; } .tcsp-bauhaus .tcsp-tl-item.tcsp-tl-current::before { background: var(--bh-red); border-color: var(--bh-black); box-shadow: 4px 4px 0 0 var(--bh-yellow); border-radius: 50%; } .tcsp-bauhaus .tcsp-tl-day { color: var(--bh-blue); } .tcsp-bauhaus .tcsp-tl-title { color: var(--bh-black); font-weight: 800; } .tcsp-bauhaus .tcsp-tl-body { color: var(--bh-black); font-weight: 400; } /* ---------- RECEIPTS — black with primary hits ---------- */ .tcsp-bauhaus .tcsp-receipts { background: var(--bh-black); border-top: var(--bh-rule) solid var(--bh-black); } .tcsp-bauhaus .tcsp-receipts::before { background: radial-gradient(circle at 12% 30%, var(--bh-red) 0 120px, transparent 121px), radial-gradient(circle at 92% 70%, var(--bh-yellow) 0 100px, transparent 101px); opacity: 0.85; } .tcsp-bauhaus .tcsp-receipts::after { display: none; } .tcsp-bauhaus .tcsp-receipts h2 { color: var(--bh-cream); } .tcsp-bauhaus .tcsp-receipts-eyebrow { color: var(--bh-yellow); } .tcsp-bauhaus .tcsp-receipts-sub { color: rgba(242,235,219,0.6); } .tcsp-bauhaus .tcsp-receipt { background: var(--bh-cream); border: var(--bh-rule) solid var(--bh-cream); border-radius: 0; backdrop-filter: none; } .tcsp-bauhaus .tcsp-receipt:nth-child(1) { box-shadow: 8px 8px 0 0 var(--bh-red); } .tcsp-bauhaus .tcsp-receipt:nth-child(2) { box-shadow: 8px 8px 0 0 var(--bh-yellow); } .tcsp-bauhaus .tcsp-receipt:nth-child(3) { box-shadow: 8px 8px 0 0 var(--bh-blue); } .tcsp-bauhaus .tcsp-receipt:hover { transform: translate(-2px, -2px); } .tcsp-bauhaus .tcsp-receipt-num { color: var(--bh-black); text-shadow: none; font-family: 'Archivo', sans-serif; font-weight: 900; letter-spacing: -3px; } .tcsp-bauhaus .tcsp-receipt:nth-child(1) .tcsp-receipt-num { color: var(--bh-red); } .tcsp-bauhaus .tcsp-receipt:nth-child(2) .tcsp-receipt-num { color: var(--bh-black); } .tcsp-bauhaus .tcsp-receipt:nth-child(3) .tcsp-receipt-num { color: var(--bh-blue); } .tcsp-bauhaus .tcsp-receipt-label { color: var(--bh-black); } .tcsp-bauhaus .tcsp-receipt-context { color: var(--bh-black); opacity: 0.75; } /* ---------- FIT ---------- */ .tcsp-bauhaus .tcsp-fit-col { border: var(--bh-rule) solid var(--bh-black); border-radius: 0; background: var(--bh-cream); } .tcsp-bauhaus .tcsp-fit-yes { background: var(--bh-yellow); } .tcsp-bauhaus .tcsp-fit-no { background: var(--bh-paper); } .tcsp-bauhaus .tcsp-fit-mark { border-radius: 0; background: var(--bh-black) !important; color: var(--bh-cream) !important; } .tcsp-bauhaus .tcsp-fit-yes .tcsp-fit-mark { background: var(--bh-red) !important; color: var(--bh-cream) !important; } .tcsp-bauhaus .tcsp-fit-list li { color: var(--bh-black); font-weight: 500; } .tcsp-bauhaus .tcsp-fit-list li::before { border-radius: 0 !important; } .tcsp-bauhaus .tcsp-fit-yes .tcsp-fit-list li::before { background-color: var(--bh-black); } .tcsp-bauhaus .tcsp-fit-no .tcsp-fit-list li::before { background-color: transparent; border: 2px solid var(--bh-black); } /* ---------- BOOKING ---------- */ .tcsp-bauhaus .tcsp-booking { background: var(--bh-blue); border-top: var(--bh-rule) solid var(--bh-black); color: var(--bh-cream); } .tcsp-bauhaus .tcsp-booking::before { background: radial-gradient(circle at 90% 0%, var(--bh-yellow) 0 200px, transparent 201px); opacity: 0.7; } .tcsp-bauhaus .tcsp-booking h2 { color: var(--bh-cream); } .tcsp-bauhaus .tcsp-booking-eyebrow { color: var(--bh-yellow); } .tcsp-bauhaus .tcsp-booking-sub { color: rgba(242,235,219,0.85); } .tcsp-bauhaus .tcsp-bs-num { color: var(--bh-cream); font-family: 'Archivo'; font-weight: 900; letter-spacing: -1.5px; } .tcsp-bauhaus .tcsp-bs-num .tcsp-bs-unit { color: var(--bh-yellow); } .tcsp-bauhaus .tcsp-bs-label { color: var(--bh-yellow); } .tcsp-bauhaus .tcsp-booking-stats { border-color: var(--bh-cream); } .tcsp-bauhaus .tcsp-bs { border-color: var(--bh-cream); } .tcsp-bauhaus .tcsp-booking-foot { color: rgba(242,235,219,0.7); } .tcsp-bauhaus .tcsp-booking-card { background: var(--bh-cream); border: var(--bh-rule) solid var(--bh-black); border-radius: 0; box-shadow: 10px 10px 0 0 var(--bh-red); backdrop-filter: none; color: var(--bh-black); } .tcsp-bauhaus .tcsp-card-title, .tcsp-bauhaus .tcsp-card-link { color: var(--bh-black); } .tcsp-bauhaus .tcsp-card-link:hover { color: var(--bh-red); } .tcsp-bauhaus .tcsp-cal-summary { background: var(--bh-paper); border: 2px solid var(--bh-black); border-radius: 0; } .tcsp-bauhaus .tcsp-cal-icon { background: var(--bh-red); border-radius: 0; } .tcsp-bauhaus .tcsp-cal-text h4 { color: var(--bh-black); font-family: 'Archivo'; font-weight: 800; } .tcsp-bauhaus .tcsp-cal-text p { color: var(--bh-black); opacity: 0.7; } .tcsp-bauhaus .tcsp-cal-day { background: var(--bh-cream); border: 2px solid var(--bh-black); border-radius: 0; } .tcsp-bauhaus .tcsp-cal-day:hover { background: var(--bh-yellow); } .tcsp-bauhaus .tcsp-cal-day.is-selected { background: var(--bh-red); border-color: var(--bh-black); } .tcsp-bauhaus .tcsp-cal-day-name { color: var(--bh-black); opacity: 0.6; } .tcsp-bauhaus .tcsp-cal-day-num { color: var(--bh-black); font-family: 'Archivo'; font-weight: 900; } .tcsp-bauhaus .tcsp-cal-day-slots { color: var(--bh-blue); font-weight: 700; } .tcsp-bauhaus .tcsp-cal-day.is-selected .tcsp-cal-day-num, .tcsp-bauhaus .tcsp-cal-day.is-selected .tcsp-cal-day-name, .tcsp-bauhaus .tcsp-cal-day.is-selected .tcsp-cal-day-slots { color: var(--bh-cream); } .tcsp-bauhaus .tcsp-cal-time { background: var(--bh-cream); border: 2px solid var(--bh-black); border-radius: 0; color: var(--bh-black); } .tcsp-bauhaus .tcsp-cal-time:hover { background: var(--bh-yellow); border-color: var(--bh-black); color: var(--bh-black); } .tcsp-bauhaus .tcsp-cal-time.is-selected { background: var(--bh-black); border-color: var(--bh-black); color: var(--bh-cream); } .tcsp-bauhaus .tcsp-card-cta { background: var(--bh-black); color: var(--bh-cream); border: 3px solid var(--bh-black); border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Archivo', sans-serif; font-weight: 800; } .tcsp-bauhaus .tcsp-card-cta:hover:not(:disabled) { background: var(--bh-red); color: var(--bh-black); } /* ---------- ABOUT ---------- */ .tcsp-bauhaus .tcsp-about-portrait { background: var(--bh-red); border: var(--bh-rule) solid var(--bh-black); border-radius: 0; color: var(--bh-cream); font-family: 'Archivo'; font-weight: 900; box-shadow: 8px 8px 0 0 var(--bh-yellow); } .tcsp-bauhaus .tcsp-about-body p { color: var(--bh-black); } .tcsp-bauhaus .tcsp-about-body p strong { background: var(--bh-yellow); padding: 0 4px; } .tcsp-bauhaus .tcsp-about-links a { color: var(--bh-black); border: 2px solid var(--bh-black); padding: 4px 10px; background: var(--bh-cream); border-radius: 0; } .tcsp-bauhaus .tcsp-about-links a:hover { background: var(--bh-yellow); color: var(--bh-black); border-color: var(--bh-black); } /* ---------- FOOTER ---------- */ .tcsp-bauhaus .tcsp-footer { background: var(--bh-black); color: var(--bh-cream); border-top: var(--bh-rule) solid var(--bh-black); } .tcsp-bauhaus .tcsp-footer-row, .tcsp-bauhaus .tcsp-footer-row a { color: var(--bh-cream); } .tcsp-bauhaus .tcsp-footer-row a:hover { color: var(--bh-yellow); } .tcsp-bauhaus .tcsp-footer-brand b { color: var(--bh-red); } /* ---------- MODAL ---------- */ .tcsp-bauhaus .tcsp-modal { background: var(--bh-cream); border: var(--bh-rule) solid var(--bh-black); border-radius: 0; box-shadow: 12px 12px 0 0 var(--bh-red); color: var(--bh-black); } .tcsp-bauhaus .tcsp-modal-head { border-bottom: 2px solid var(--bh-black); } .tcsp-bauhaus .tcsp-modal-title { color: var(--bh-black); } .tcsp-bauhaus .tcsp-modal-close { background: var(--bh-yellow); border: 2px solid var(--bh-black); color: var(--bh-black); border-radius: 0; } .tcsp-bauhaus .tcsp-modal-close:hover { background: var(--bh-red); color: var(--bh-cream); } .tcsp-bauhaus .tcsp-modal-step { color: var(--bh-red); } .tcsp-bauhaus .tcsp-modal-h { color: var(--bh-black); font-family: 'Archivo'; font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; } .tcsp-bauhaus .tcsp-modal-p { color: var(--bh-black); opacity: 0.7; } .tcsp-bauhaus .tcsp-modal-summary { background: var(--bh-paper); border: 2px solid var(--bh-black); border-radius: 0; } .tcsp-bauhaus .tcsp-modal-summary-icon { background: var(--bh-blue); border-radius: 0; color: var(--bh-cream); } .tcsp-bauhaus .tcsp-modal-summary-text { color: var(--bh-black); } .tcsp-bauhaus .tcsp-field input, .tcsp-bauhaus .tcsp-field textarea { background: var(--bh-cream); border: 2px solid var(--bh-black); border-radius: 0; color: var(--bh-black); } .tcsp-bauhaus .tcsp-field input::placeholder, .tcsp-bauhaus .tcsp-field textarea::placeholder { color: rgba(10,10,10,0.4); } .tcsp-bauhaus .tcsp-field input:focus, .tcsp-bauhaus .tcsp-field textarea:focus { background: var(--bh-cream); border-color: var(--bh-red); outline: 2px solid var(--bh-red); outline-offset: -2px; } .tcsp-bauhaus .tcsp-field label { color: var(--bh-black); } .tcsp-bauhaus .tcsp-modal-btn { background: var(--bh-black); color: var(--bh-cream); border: 3px solid var(--bh-black); border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Archivo'; font-weight: 800; } .tcsp-bauhaus .tcsp-modal-btn:hover:not(:disabled) { background: var(--bh-red); color: var(--bh-black); } .tcsp-bauhaus .tcsp-modal-back { color: var(--bh-black); } .tcsp-bauhaus .tcsp-success-check { background: var(--bh-yellow); border: 3px solid var(--bh-black); border-radius: 0; color: var(--bh-black); } .tcsp-bauhaus .tcsp-success h3 { color: var(--bh-black); font-family: 'Archivo'; font-weight: 900; text-transform: uppercase; } .tcsp-bauhaus .tcsp-success p { color: var(--bh-black); opacity: 0.8; } .tcsp-bauhaus .tcsp-success-meta { background: var(--bh-paper); border: 2px solid var(--bh-black); border-radius: 0; color: var(--bh-black); } .tcsp-bauhaus .tcsp-success-meta div span:first-child { color: var(--bh-black); opacity: 0.55; } /* Decorative side bar — Bauhaus only */ .tcsp-bauhaus .tcsp-bh-grid { position: fixed; left: 0; top: 0; bottom: 0; width: 36px; z-index: 1; pointer-events: none; background: linear-gradient(var(--bh-red) 0 25%, var(--bh-yellow) 25% 60%, var(--bh-blue) 60% 100%); border-right: var(--bh-rule) solid var(--bh-black); } @media (max-width: 880px) { .tcsp-bauhaus .tcsp-bh-grid { display: none; } }