/* * tnt-vintage-styles.css * TNT | TechNoviceTools | Styl'n — Vintage Mode * Used by: stylin.html (root) * Activated by: toggleVintage() in stylin.html adding .vintage-mode to * * All rules are scoped under body.vintage-mode so they only activate * when the toggle button is clicked. Default styles are unaffected. * * Color palette — inspired by the vintage beauty salon hero image: * Teal: #3DBDBE (salon chairs) * Pink: #E8849A (dusty rose / walls) * Coral: #C0392B (warm red accent) * Amber: #D4831A (chrome + warm light) * Cream: #FDF4E7 (ivory background) * Warm dk: #4A3728 (warm brown, replaces navy) * * This is intentionally gawdy. That is the point. * CSS rules express hierarchy, not appearance — see Ask Copilot Entry #009. */ /* ═══════════════════════════════════════════════════════════════════ VINTAGE TOGGLE BUTTON Lives in the hero regardless of mode. Pink-outline ghost in default mode; teal filled when vintage is ON. ═══════════════════════════════════════════════════════════════════ */ .btn-vintage-toggle { background: rgba(232,132,154,0.18); color: #fff; border: 2px solid rgba(232,132,154,0.75); font-family: var(--boogaloo); font-size: 1.1rem; padding: 0.55rem 1.9rem; border-radius: 50px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: background 0.2s, border-color 0.2s, transform 0.15s; letter-spacing: 0.5px; } .btn-vintage-toggle:hover { background: rgba(232,132,154,0.38); border-color: #E8849A; transform: translateY(-2px); } /* When vintage IS active, the button signals "click to go back" */ body.vintage-mode .btn-vintage-toggle { background: #3DBDBE; border-color: #fff; color: #fff; } body.vintage-mode .btn-vintage-toggle:hover { background: #2DA8A9; border-color: #fff; } /* ═══════════════════════════════════════════════════════════════════ BODY & GLOBAL Cream background with a subtle pink polka-dot pattern. The dots are pure CSS — no images required. ═══════════════════════════════════════════════════════════════════ */ body.vintage-mode { background: radial-gradient(circle, rgba(232,132,154,0.10) 1px, transparent 1px), #FDF4E7; background-size: 22px 22px; } /* ═══════════════════════════════════════════════════════════════════ NAVBAR Dark warm brown instead of navy. ═══════════════════════════════════════════════════════════════════ */ body.vintage-mode #mainNav { background: #4A3728; border-bottom-color: #E8849A; } /* ═══════════════════════════════════════════════════════════════════ HERO Let more of the salon image show through by lightening the overlay. The image is already gorgeous — vintage mode should reveal it. ═══════════════════════════════════════════════════════════════════ */ body.vintage-mode #hero { background: linear-gradient(to right, rgba(40,10,20,0.70) 0%, rgba(40,10,20,0.30) 55%, rgba(0,80,80,0.08) 100%), url('../images/vintage_beauty_shop_1200x1200.jpg') center 30% / cover no-repeat; } body.vintage-mode .hero-title { text-shadow: 3px 3px 0 rgba(61,189,190,0.55), 6px 6px 0 rgba(0,0,0,0.2); color: #FFE4CC; } body.vintage-mode .hero-subtitle { color: rgba(255,220,200,0.90); } body.vintage-mode .hero-eyebrow { color: #E8849A; letter-spacing: 4px; } /* Navigation CTAs go pink/teal in vintage mode */ body.vintage-mode .btn-hero-primary { background: #E8849A; } body.vintage-mode .btn-hero-primary:hover { background: #C0392B; box-shadow: 0 6px 20px rgba(232,132,154,0.55); } body.vintage-mode .btn-hero-secondary { border-color: #3DBDBE; color: #fff; } body.vintage-mode .btn-hero-secondary:hover { background: rgba(61,189,190,0.2); border-color: #3DBDBE; color: #3DBDBE; } /* ═══════════════════════════════════════════════════════════════════ SHARED SECTION TYPOGRAPHY Headings go coral-italic; section labels go teal with dots. ═══════════════════════════════════════════════════════════════════ */ body.vintage-mode .section-title { color: #C0392B; font-style: italic; } body.vintage-mode .section-label { color: #3DBDBE; letter-spacing: 4px; } /* ═══════════════════════════════════════════════════════════════════ SALON INTRO (#salonIntro) Warm cream with teal double-rule borders — a vintage card look. ═══════════════════════════════════════════════════════════════════ */ body.vintage-mode #salonIntro { background: linear-gradient(rgba(253,244,231,0.85), rgba(253,244,231,0.85)), url('../images/vintageWallpaper.jpg') repeat; background-size: auto, 280px auto; border-top: 4px double #3DBDBE; border-bottom: 4px double #E8849A; } body.vintage-mode #salonIntro p { color: #4A3728; } body.vintage-mode .salon-inspiration-list li { border-bottom-color: #E8849A; } body.vintage-mode .salon-inspiration-list li::before { content: '❥'; color: #E8849A; } /* Legacy bar goes teal */ body.vintage-mode .stylin-legacy-bar { background: #3DBDBE; border-color: rgba(255,255,255,0.25); } body.vintage-mode .stylin-legacy-bar-icon { color: #FFF8F0; } body.vintage-mode .stylin-legacy-bar-body h3 { color: #fff; } body.vintage-mode .stylin-legacy-bar-body p { color: rgba(255,255,255,0.82); } body.vintage-mode .btn-legacy { background: #E8849A; color: #fff; } body.vintage-mode .btn-legacy:hover { background: #C0392B; color: #fff; } /* ═══════════════════════════════════════════════════════════════════ FOUNDATIONS (#foundations) Warm dark brown instead of cold navy. Cards flip to cream with teal borders. ═══════════════════════════════════════════════════════════════════ */ body.vintage-mode #foundations { background: linear-gradient(180deg, #2A1A10 0%, #3D2B1F 100%); } body.vintage-mode #foundations .section-title { color: #FFD4A8; } body.vintage-mode #foundations .section-label { color: #E8849A; } body.vintage-mode #foundations .section-sub { color: rgba(255,212,168,0.72); } body.vintage-mode .foundation-card { background: #FFF8F0; border-color: #3DBDBE; color: #4A3728; border-width: 2px; } body.vintage-mode .foundation-card:hover { border-color: #E8849A; box-shadow: 0 12px 32px rgba(232,132,154,0.28); color: #4A3728; } body.vintage-mode .foundation-card-icon i { /* keep icon colors as-is for readability */ } body.vintage-mode .foundation-card-title { color: #C0392B; } body.vintage-mode .foundation-card-desc { color: #7D5A4A; } /* ═══════════════════════════════════════════════════════════════════ FEATURED APPS (#stylinApps) Vintage wallpaper tile as the section background. A semi-transparent cream overlay keeps the cards readable while letting the pattern show through underneath. ═══════════════════════════════════════════════════════════════════ */ body.vintage-mode #stylinApps { background: linear-gradient(rgba(253,244,231,0.82), rgba(253,244,231,0.82)), url('../images/vintageWallpaper.jpg') repeat; background-size: auto, 280px auto; } body.vintage-mode .stylin-app-card { background: #FDF4E7; border-color: #E8849A; border-width: 2px; color: #4A3728; } body.vintage-mode .stylin-app-card:hover { border-color: #3DBDBE; box-shadow: 0 8px 22px rgba(61,189,190,0.22); color: #4A3728; } body.vintage-mode .stylin-app-title { color: #C0392B; } body.vintage-mode .stylin-app-desc { color: #7D5A4A; } body.vintage-mode .stylin-see-all { border-color: #E8849A; color: #E8849A; } body.vintage-mode .stylin-see-all:hover { border-color: #C0392B; color: #C0392B; background: rgba(192,57,43,0.06); } /* ═══════════════════════════════════════════════════════════════════ OFFCANVAS Warm brown instead of cold dark navy. ═══════════════════════════════════════════════════════════════════ */ body.vintage-mode .tnt-offcanvas { background: #3D2B1F; border-left-color: #E8849A; } body.vintage-mode .tnt-offcanvas .offcanvas-header { background: #2A1A10; border-bottom-color: rgba(232,132,154,0.25); } body.vintage-mode .offcanvas-section-label { color: #E8849A; } body.vintage-mode .offcanvas-app-link:hover { background: rgba(232,132,154,0.15); } body.vintage-mode .offcanvas-app-link i { color: #E8849A; } /* ═══════════════════════════════════════════════════════════════════ FOOTER Warm teal footer bar. ═══════════════════════════════════════════════════════════════════ */ body.vintage-mode footer { background: #3DBDBE; border-top: 3px double #E8849A; } body.vintage-mode .footer-text { color: rgba(255,255,255,0.88); } body.vintage-mode footer nav a img { filter: brightness(0) invert(1) opacity(0.7); }