/* ===================================================== TWC PAGE UTILITIES — Shared utilities for TWC pages COLOR SYSTEM & THEME ARCHITECTURE ===================================================== COLOR AUDIT (2026-08-14) ----------------------- Base colors found across site: - #0f2a4a (navy) → --color-navy - #1a2e4a (navy-lt) → --color-navy-light - #1b74c9 (blue) → --color-primary - #0d4d90 (blue-dp) → --color-primary-deep - #6cb7ff (accent) → --color-accent - #dbe9ff (accent-s) → --color-accent-soft - #6c2e00 (brown) → --color-brown - #8b4513 (brown-lt) → --color-brown-light - #4a2200 (brown-dp) → --color-brown-deep - #F1E3C6 (info) → --color-brown-soft - #af4e05 (success) → --color-success - #ffc107 (warning) → --color-warning - #ddeaeb (lt-blue) → --color-light-blue - #5a6f85 (muted) → --color-muted - #ffffff (white) → --color-white - #222222 (black) → --color-black - antiquewhite → --color-antique - rgb(255,249,246) → --color-baseback TWC Hero Colors: - #f5e6d3 (bg-1) → --twc-hero-bg-start - #eaddcf (bg-2) → --twc-hero-bg-mid - #f7f3ef (bg-3) → --twc-hero-bg-end - #2a1a0a (text) → --twc-hero-text - #4a2200 (pill) → --twc-hero-pill-color Glass / Overlay Colors: - rgba(255,255,255,0.22) → --glass-bg - rgba(255,255,255,0.28) → --glass-border - rgba(0,0,0,0.08) → --glass-shadow - rgba(0,0,0,0.28) → --glass-dark-bg (Physer Asst) - rgba(108,46,0,0.12) → --overlay-brown - rgba(5,21,47,0.18) → --overlay-navy INDEPENDENCE DAY THEME (Aug 14-15, 2026) ----------------------------------------- Primary : Saffron #FF9933 Secondary : White #FFFFFF Accent : Green #138808 Dark : Navy #000080 (Ashoka Chakra) To apply: toggle .theme-independence on Auto-revert: 48 hours from application ===================================================== */ :root { /* ---------- Base Colors ---------- */ --color-white: #ffffff; --color-black: #222222; --color-navy: #0f2a4a; --color-navy-light: #1a2e4a; --color-antique: antiquewhite; --color-light-blue: #ddeaeb; --color-baseback: rgb(255, 249, 246); --color-primary: #1b74c9; --color-primary-deep: #0d4d90; --color-primary-soft: #dbe9ff; --color-accent: #6cb7ff; --color-accent-soft: #dbe9ff; --color-muted: #5a6f85; --color-text: #0f2a4a; --color-text-light: rgba(255, 255, 255, 0.92); --color-brown: #6c2e00; --color-brown-light: #8b4513; --color-brown-deep: #4a2200; --color-brown-soft: #F1E3C6; --color-success: #af4e05; --color-warning: #ffc107; --color-danger: red; --color-blue: #1a73e8; --color-green: rgb(11, 219, 11); /* ---------- Opacity Variants (White) ---------- */ --color-white-06: rgba(255, 255, 255, 0.06); --color-white-09: rgba(255, 255, 255, 0.09); --color-white-10: rgba(255, 255, 255, 0.1); --color-white-13: rgba(255, 255, 255, 0.13); --color-white-18: rgba(255, 255, 255, 0.18); --color-white-20: rgba(255, 255, 255, 0.2); --color-white-25: rgba(255, 255, 255, 0.25); --color-white-30: rgba(255, 255, 255, 0.3); --color-white-35: rgba(255, 255, 255, 0.35); --color-white-40: rgba(255, 255, 255, 0.4); --color-white-50: rgba(255, 255, 255, 0.5); --color-white-60: rgba(255, 255, 255, 0.6); --color-white-70: rgba(255, 255, 255, 0.7); --color-white-80: rgba(255, 255, 255, 0.8); --color-white-90: rgba(255, 255, 255, 0.9); /* ---------- Opacity Variants (Black) ---------- */ --color-black-10: rgba(0, 0, 0, 0.1); --color-black-20: rgba(0, 0, 0, 0.2); --color-black-30: rgba(0, 0, 0, 0.3); --color-black-40: rgba(0, 0, 0, 0.4); --color-black-50: rgba(0, 0, 0, 0.5); --color-black-60: rgba(0, 0, 0, 0.6); --color-black-70: rgba(0, 0, 0, 0.7); --color-black-80: rgba(0, 0, 0, 0.8); --color-black-90: rgba(0, 0, 0, 0.9); /* ---------- Opacity Variants (Navy) ---------- */ --color-navy-10: rgba(15, 42, 74, 0.1); --color-navy-20: rgba(15, 42, 74, 0.2); --color-navy-30: rgba(15, 42, 74, 0.3); --color-navy-40: rgba(15, 42, 74, 0.4); --color-navy-50: rgba(15, 42, 74, 0.5); --color-navy-60: rgba(15, 42, 74, 0.6); --color-navy-70: rgba(15, 42, 74, 0.7); --color-navy-80: rgba(15, 42, 74, 0.8); --color-navy-90: rgba(15, 42, 74, 0.9); /* ---------- Opacity Variants (Brown) ---------- */ --color-brown-10: rgba(108, 46, 0, 0.1); --color-brown-20: rgba(108, 46, 0, 0.2); --color-brown-30: rgba(108, 46, 0, 0.3); --color-brown-40: rgba(108, 46, 0, 0.4); --color-brown-50: rgba(108, 46, 0, 0.5); --color-brown-60: rgba(108, 46, 0, 0.6); --color-brown-70: rgba(108, 46, 0, 0.7); --color-brown-80: rgba(108, 46, 0, 0.8); --color-brown-90: rgba(108, 46, 0, 0.9); /* ---------- Opacity Variants (Blue) ---------- */ --color-blue-10: rgba(27, 116, 201, 0.1); --color-blue-20: rgba(27, 116, 201, 0.2); --color-blue-30: rgba(27, 116, 201, 0.3); --color-blue-40: rgba(27, 116, 201, 0.4); --color-blue-50: rgba(27, 116, 201, 0.5); --color-blue-60: rgba(27, 116, 201, 0.6); --color-blue-70: rgba(27, 116, 201, 0.7); --color-blue-80: rgba(27, 116, 201, 0.8); --color-blue-90: rgba(27, 116, 201, 0.9); /* ---------- Opacity Variants (Green) ---------- */ --color-green-10: rgba(11, 219, 11, 0.1); --color-green-20: rgba(11, 219, 11, 0.2); --color-green-30: rgba(11, 219, 11, 0.3); --color-green-40: rgba(11, 219, 11, 0.4); --color-green-50: rgba(11, 219, 11, 0.5); --color-green-60: rgba(11, 219, 11, 0.6); --color-green-70: rgba(11, 219, 11, 0.7); --color-green-80: rgba(11, 219, 11, 0.8); --color-green-90: rgba(11, 219, 11, 0.9); /* ---------- Semantic Shadows ---------- */ --shadow-soft: 0 18px 50px rgba(18, 53, 100, 0.12); --shadow-medium: 0 10px 26px rgba(5, 21, 47, 0.22); --shadow-strong: 0 20px 40px rgba(18, 53, 100, 0.18); --shadow-glass: 0 6px 24px rgba(0, 0, 0, 0.08); --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.12); /* ---------- Semantic Borders ---------- */ --border-light: rgba(27, 116, 201, 0.12); --border-medium: rgba(17, 48, 77, 0.18); --border-strong: rgba(17, 48, 77, 0.15); --border-glass: rgba(255, 255, 255, 0.28); --border-glass-dark: rgba(255, 255, 255, 0.15); --border-brown: rgba(108, 46, 0, 0.3); --border-brown-soft: rgba(108, 46, 0, 0.25); /* ---------- TWC Hero Colors ---------- */ --twc-hero-bg-start: #f5e6d3; --twc-hero-bg-mid: antiquewhite; --twc-hero-bg-end: #0f2a4a; --twc-hero-text: #2a1a0a; --twc-hero-pill-bg: rgba(108, 46, 0, 0.08); --twc-hero-pill-shadow: 0 8px 24px rgba(108, 46, 0, 0.1); --twc-hero-pill-color: #4a2200; --twc-hero-glass-bg: rgba(255, 255, 255, 0.22); --twc-hero-glass-border: rgba(255, 255, 255, 0.28); --twc-hero-glass-shadow: rgba(0, 0, 0, 0.08); --twc-hero-text-shadow: rgba(255, 255, 255, 0.5); --twc-hero-text-shadow-strong: rgba(255, 255, 255, 0.6); --twc-hero-text-shadow-dark: rgba(0, 0, 0, 0.3); /* ---------- Glass / Overlay Colors ---------- */ --glass-bg: rgba(255, 255, 255, 0.22); --glass-border: rgba(255, 255, 255, 0.28); --glass-shadow: rgba(0, 0, 0, 0.08); --glass-dark-bg: rgba(0, 0, 0, 0.28); --glass-dark-border: rgba(255, 255, 255, 0.15); --glass-dark-shadow: rgba(0, 0, 0, 0.15); --overlay-brown: rgba(108, 46, 0, 0.12); --overlay-brown-light: rgba(108, 46, 0, 0.08); --overlay-navy: rgba(5, 21, 47, 0.18); --overlay-navy-light: rgba(5, 21, 47, 0.1); --overlay-white: rgba(255, 255, 255, 0.09); --overlay-blue: rgba(27, 116, 201, 0.18); --overlay-navy-subtle: rgba(17, 48, 77, 0.06); --overlay-navy-medium: rgba(17, 48, 77, 0.15); /* ---------- Theme Mapping (override these for themes) ---------- */ --theme-primary: var(--color-brown); --theme-secondary: var(--color-antique); --theme-accent: var(--color-success); --theme-text: var(--color-navy); --theme-text-light: var(--color-white); --theme-bg-start: var(--twc-hero-bg-start); --theme-bg-mid: var(--twc-hero-bg-mid); --theme-bg-end: var(--twc-hero-bg-end); /* ---------- Existing TWC vars (backward compat) ---------- */ --twc-hero-bg-primary: var(--twc-hero-bg-start); --twc-hero-bg-secondary: var(--twc-hero-bg-mid); --twc-hero-bg-accent: var(--twc-hero-bg-end); --twc-hero-overlay: var(--overlay-brown); } /* ---------- Page container ---------- */ .twc-page { overflow: hidden; } /* ---------- Hero Section ---------- */ .twc-hero { position: relative; padding: clamp(3rem, 6vw, 6rem) 0; background: radial-gradient(circle at top left, var(--twc-hero-overlay), transparent 28%), linear-gradient(135deg, var(--twc-hero-bg-primary), var(--twc-hero-bg-secondary) 50%, var(--twc-hero-bg-accent)); color: var(--twc-hero-text); overflow: hidden; } .twc-hero__backdrop { position: absolute; inset: 0; background: linear-gradient(to right, rgba(255,255,255,0.09), transparent 30%); opacity: 0.35; transform: scale(1.06); animation: campFloat 16s linear infinite; } @keyframes campFloat { 0% { transform: scale(1.06) translate3d(0, 0, 0); } 50% { transform: scale(1.12) translate3d(0.4rem, -0.4rem, 0); } 100% { transform: scale(1.06) translate3d(0, 0, 0); } } .twc-hero__content { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.2rem, 4vw, 3rem); align-items: center; } .twc-hero__copy { text-align: center; } .twc-hero__copy h1 { margin: 0 auto 1rem; max-width: 13ch; font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: 1.06; letter-spacing: -0.04em; } .twc-hero__visual { position: relative; background: rgba(255, 255, 255, 0.1); padding: 1rem; border-radius: 1.5rem; box-shadow: var(--shadow); backdrop-filter: blur(10px); } .twc-hero__visual img { width: 100%; border-radius: 1rem; object-fit: cover; } /* ---------- Wrapper ---------- */ .wrapper { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; } /* ---------- Section Styles ---------- */ .section-block { padding: clamp(3rem, 5vw, 5rem) 0; } .section-heading { margin-bottom: 1.8rem; } .section-heading.centered { text-align: center; } .section-heading h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.18; color: var(--text); } .eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 700; margin: 0 0 0.9rem; color: var(--primary); } /* ---------- Hero Lead ---------- */ .hero-lead { margin: 0 auto; max-width: 46rem; font-size: clamp(1rem, 2.1vw, 1.15rem); line-height: 1.7; } /* ---------- Hero Pill Row ---------- */ .hero-pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 1.2rem 0; } .hero-pill-row span { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 0.9rem; background: var(--twc-hero-pill-bg); backdrop-filter: blur(6px); box-shadow: var(--twc-hero-pill-shadow); font-weight: 700; color: var(--twc-hero-pill-color); } /* ---------- Hero Actions ---------- */ .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin: 1.3rem 0 1rem; } /* ---------- Buttons ---------- */ .btn-primary, .btn-secondary { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; padding: 0.9rem 1.35rem; transition: transform 0.2s ease, opacity 0.2s ease; } .btn-primary { color: #0b2e58; background: linear-gradient(135deg, #ffffff, #dfefff); box-shadow: 0 10px 26px rgba(5, 21, 47, 0.22); } .btn-secondary { color: #2a1a0a; border: 1px solid rgba(108, 46, 0, 0.3); background: rgba(255, 255, 255, 0.6); box-shadow: 0 10px 26px rgba(108, 46, 0, 0.1); } .btn-primary:hover, .btn-secondary:hover { transform: translateY(-2px); opacity: 0.92; } /* ---------- Contact Cards ---------- */ .contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; justify-content: center; max-width: 1200px; margin-inline: auto; } @media (max-width: 1024px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .contact-cards { grid-template-columns: 1fr; } } @media (max-width: 400px) { .contact-cards { grid-template-columns: 1fr; max-width: 400px; } } .contact-card { text-align: center; padding: 1.2rem; background: var(--panel); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform 0.2s ease; } .contact-card h3 { margin: 0 0 0.4rem; color: var(--primary-deep); } .contact-card a { color: var(--primary); text-decoration: none; font-weight: 600; } .contact-icon { font-size: 2.5rem; margin-bottom: 0.6rem; } /* ---------- Form Styles ---------- */ .form-section { padding-bottom: 4rem; } .event-form { padding: 1.25rem; max-width: 50rem; margin: 0 auto; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(231,241,255,0.96)); border: 1px solid var(--border); border-radius: 1.4rem; box-shadow: 0 20px 45px rgba(30, 68, 116, 0.14); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } label, fieldset { display: grid; gap: 0.45rem; } label span, legend { font-weight: 700; color: var(--primary-deep); } label span { font-style: italic; } input, select, textarea { width: 100%; padding: 0.85rem 0.95rem; border: 1px solid rgba(17, 48, 77, 0.18); border-radius: 0.8rem; font: inherit; background: #fdfefe; box-shadow: inset 0 1px 2px rgba(17, 48, 77, 0.06); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27, 116, 201, 0.18); } textarea { resize: vertical; } .full-width { grid-column: 1 / -1; } fieldset { padding: 0.85rem 0.9rem; border-radius: 0.8rem; border: 1px solid rgba(17, 48, 77, 0.18); } fieldset label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; } .hidden-field { display: none; } .autofill-label { display: flex; align-items: center; justify-content: flex-start; } .checkbox-inline { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; cursor: pointer; } .checkbox-inline input[type="checkbox"] { width: auto; cursor: pointer; } .consent-row { margin: 1rem 0 1.15rem; color: var(--muted); } .consent-row label { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; } .consent-row a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .consent-row a:hover { color: var(--primary-deep); text-decoration: none; } .form-actions { display: flex; justify-content: center; } .form-actions .btn-primary { min-width: min(18rem, 100%); background: linear-gradient(135deg, #ffffff, #dceeff); color: var(--primary-deep); border: 1px solid rgba(17, 48, 77, 0.15); } @media (max-width: 860px) { .twc-hero__content { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .hero-actions { flex-direction: column; align-items: stretch; } .btn-primary, .btn-secondary { width: 100%; } .form-grid { gap: 1rem; } .event-form { padding: 1rem; } input, select, textarea { padding: 0.75rem 0.85rem; } .consent-row label { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } /* ---------- Login Container ---------- */ #twcMainLoginContainer { display: flex; justify-content: center; padding: 1.5rem 1rem; } #twcMainLoginContainer:empty { display: none; } #twcMainLoginContainer form { display: grid; gap: 0.9rem; width: 100%; max-width: 420px; padding: 1.75rem; background: var(--panel); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); } #twcMainLoginContainer form label { display: grid; gap: 0.4rem; font-weight: 600; color: var(--primary-deep); font-size: 0.95rem; } #twcMainLoginContainer form input { width: 100%; padding: 0.8rem 0.9rem; border: 1px solid rgba(17, 48, 77, 0.18); border-radius: 0.8rem; font: inherit; background: #fdfefe; font-size: 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #twcMainLoginContainer form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27, 116, 201, 0.18); } #twcMainLoginContainer form button, #twcMainLoginContainer form a { width: 100%; text-align: center; justify-content: center; margin-top: 0.5rem; padding: 0.9rem 1.35rem; border-radius: 999px; font-weight: 700; font-size: 1rem; transition: transform 0.2s ease, opacity 0.2s ease; } #twcMainLoginContainer form button.btn-primary { background: linear-gradient(135deg, #ffffff, #dfefff); color: #0b2e58; border: 1px solid rgba(17, 48, 77, 0.15); box-shadow: 0 10px 26px rgba(5, 21, 47, 0.22); } #twcMainLoginContainer form a.btn-secondary { background: linear-gradient(135deg, #0d4d90, #1b74c9); color: #ffffff; border: none; box-shadow: 0 10px 26px rgba(5, 21, 47, 0.22); } #twcMainLoginContainer form button:hover, #twcMainLoginContainer form a:hover { transform: translateY(-2px); opacity: 0.92; } @media (max-width: 640px) { #twcMainLoginContainer { padding: 1rem 0.75rem; } #twcMainLoginContainer form { padding: 1.25rem; gap: 0.75rem; } #twcMainLoginContainer form label { font-size: 0.9rem; } #twcMainLoginContainer form input { padding: 0.75rem 0.85rem; font-size: 0.95rem; } #twcMainLoginContainer form button, #twcMainLoginContainer form a { padding: 0.85rem 1rem; font-size: 0.95rem; } } /* ---------- Footer Legal ---------- */ .footer-legal { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.08); } .footer-privacy-notice { font-size: 0.82rem; color: #666; margin: 0 0 0.75rem; line-height: 1.5; } .footer-privacy-notice a { color: var(--primary, #1a1a2e); text-decoration: underline; font-weight: 600; } .footer-privacy-notice a:hover { opacity: 0.8; } .footer-copy { font-size: 0.78rem; color: #888; margin: 0; }