/* ============================================================================= TNT Fix — Easy!Appointments Custom Theme Matches tntfix.com brand: navy #0d0d0d, bg #272727, gold #e8e8e8, steel #96ADB8, bright blue #3E94E9, warm white #fff3dd FONTS: Self-hosted from the same fonts/ folder used by the main site. Assumes fonts are copied to assets/fonts/ inside your EA installation: NotoSansKR-Black-latin.ttf → headlines / company name MarkaziText-VariableFont_wght.ttf → body text Caveat-SemiBold.ttf → personality accents (optional) HOW TO DEPLOY (standalone / Coolify Docker): 1. Copy this file into the container: docker cp tntfix-easyappts-custom.css :/var/www/html/assets/css/tntfix-theme.css 2. Copy fonts into the container (one-time): docker cp fonts/NotoSansKR-Black-latin.ttf :/var/www/html/assets/fonts/ docker cp fonts/MarkaziText-VariableFont_wght.ttf :/var/www/html/assets/fonts/ docker cp fonts/Caveat-SemiBold.ttf :/var/www/html/assets/fonts/ 3. Add ONE line inside of application/views/appointments/book.php: 4. Optionally repeat step 3 in application/views/backend/header.php for a light admin-panel tint (won't break backend functionality). ============================================================================= */ /* ── Self-hosted fonts ─────────────────────────────────────────────────────── */ @font-face { font-family: 'NotoSansBlack'; src: url('../fonts/NotoSansKR-Black-latin.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'MarkaziText'; src: url('../fonts/MarkaziText-VariableFont_wght.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Caveat'; src: url('../fonts/Caveat-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } /* ── Base / Body ────────────────────────────────────────────────────────────── */ html, body { background-color: #272727 !important; font-family: 'MarkaziText', Georgia, serif !important; font-size: 1.1rem !important; color: #fff3dd !important; } #main { background-color: #272727 !important; } /* ── Booking wizard outer shell ─────────────────────────────────────────────── */ #book-appointment-wizard { background: rgba(6, 8, 48, 0.92) !important; border: 2px solid #e8e8e8 !important; border-radius: 10px !important; color: #fff3dd !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important; } /* ── Header bar (company name + logo) ──────────────────────────────────────── */ #book-appointment-wizard #header { background: #0d0d0d !important; border-bottom: 2px solid #e8e8e8 !important; border-radius: 8px 8px 0 0 !important; } #book-appointment-wizard #company-name, #book-appointment-wizard #header h3 { color: #e8e8e8 !important; font-family: 'NotoSansBlack', Arial, sans-serif !important; font-size: 1.4rem !important; letter-spacing: 0.02em !important; } /* ── Step progress indicators ───────────────────────────────────────────────── */ #book-appointment-wizard #steps { background: #0d0d0d !important; border-bottom: 1px solid rgba(232, 232, 232, 0.25) !important; } #book-appointment-wizard #steps .book-step { background-color: rgba(61, 69, 76, 0.6) !important; color: #96ADB8 !important; border: 1px solid rgba(232, 232, 232, 0.25) !important; border-radius: 6px !important; transition: all 0.25s ease !important; } #book-appointment-wizard #steps .book-step.active { background-color: rgba(232, 232, 232, 0.15) !important; color: #e8e8e8 !important; border-color: #e8e8e8 !important; font-weight: 700 !important; } #book-appointment-wizard #steps .book-step.done { background-color: rgba(232, 232, 232, 0.12) !important; color: #96ADB8 !important; border-color: rgba(232, 232, 232, 0.4) !important; } /* ── Wizard frames ──────────────────────────────────────────────────────────── */ #book-appointment-wizard .wizard-frame { background: transparent !important; color: #fff3dd !important; } #book-appointment-wizard .wizard-frame .frame-container { color: #fff3dd !important; } #book-appointment-wizard .frame-container .frame-title, #book-appointment-wizard h3, #book-appointment-wizard h4 { color: #e8e8e8 !important; font-family: 'NotoSansBlack', Arial, sans-serif !important; } /* ── Calendar / jQuery UI datepicker ────────────────────────────────────────── */ .ui-datepicker, #book-appointment-wizard .ui-datepicker { background: rgba(6, 8, 48, 0.97) !important; border: 1px solid rgba(232, 232, 232, 0.5) !important; border-radius: 8px !important; color: #fff3dd !important; } .ui-datepicker .ui-datepicker-header, #book-appointment-wizard .ui-datepicker-header { background: #0d0d0d !important; color: #fff3dd !important; border-bottom: 1px solid rgba(232, 232, 232, 0.3) !important; border-radius: 7px 7px 0 0 !important; } .ui-datepicker .ui-datepicker-title, #book-appointment-wizard .ui-datepicker-title { color: #e8e8e8 !important; font-family: 'NotoSansBlack', Arial, sans-serif !important; } /* Nav arrows */ .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { color: #e8e8e8 !important; cursor: pointer !important; } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { background: rgba(232, 232, 232, 0.15) !important; border-radius: 4px !important; } /* Day-of-week headers */ .ui-datepicker th { color: #96ADB8 !important; font-weight: 600 !important; } /* Normal available days */ .ui-datepicker td a.ui-state-default, #book-appointment-wizard .ui-datepicker td a { background: rgba(61, 69, 76, 0.5) !important; color: #fff3dd !important; border: 1px solid transparent !important; border-radius: 4px !important; text-align: center !important; } .ui-datepicker td a.ui-state-default:hover, #book-appointment-wizard .ui-datepicker td a:hover { background: rgba(232, 232, 232, 0.2) !important; border-color: #e8e8e8 !important; color: #fff3dd !important; } /* Selected / today */ .ui-datepicker td a.ui-state-highlight, .ui-datepicker td a.ui-state-active, #book-appointment-wizard .ui-datepicker td a.ui-state-active { background: #e8e8e8 !important; color: #0d0d0d !important; border-color: #e8e8e8 !important; font-weight: 700 !important; border-radius: 4px !important; } /* Unavailable / disabled days */ .ui-datepicker td.ui-datepicker-unselectable span, .ui-datepicker td.ui-state-disabled span { color: rgba(255, 243, 221, 0.25) !important; background: transparent !important; } /* ── Time slot buttons ───────────────────────────────────────────────────────── */ #book-appointment-wizard .available-hours .btn, #book-appointment-wizard #available-hours .btn { background: rgba(61, 69, 76, 0.55) !important; color: #e8e8e8 !important; border: 2px solid rgba(232, 232, 232, 0.5) !important; border-radius: 6px !important; font-family: 'MarkaziText', Georgia, serif !important; font-size: 1rem !important; transition: all 0.25s ease !important; } #book-appointment-wizard .available-hours .btn:hover, #book-appointment-wizard #available-hours .btn:hover { background: rgba(232, 232, 232, 0.15) !important; border-color: #f2f2f2 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(232, 232, 232, 0.3) !important; } #book-appointment-wizard .available-hours .btn.selected-hour, #book-appointment-wizard #available-hours .btn.selected-hour { background: #e8e8e8 !important; color: #0d0d0d !important; border-color: #e8e8e8 !important; font-weight: 700 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(232, 232, 232, 0.35) !important; } /* ── Service / provider selection tiles ─────────────────────────────────────── */ #book-appointment-wizard .service-item, #book-appointment-wizard .provider-item { background: rgba(61, 69, 76, 0.6) !important; border: 2px solid rgba(232, 232, 232, 0.35) !important; border-radius: 8px !important; color: #fff3dd !important; transition: all 0.25s ease !important; cursor: pointer !important; } #book-appointment-wizard .service-item:hover, #book-appointment-wizard .provider-item:hover { border-color: #e8e8e8 !important; box-shadow: 0 0 0 2px rgba(232, 232, 232, 0.4), 0 8px 20px rgba(232, 232, 232, 0.2) !important; transform: translateY(-2px) !important; } #book-appointment-wizard .service-item.selected, #book-appointment-wizard .provider-item.selected { border-color: #e8e8e8 !important; background: rgba(232, 232, 232, 0.12) !important; box-shadow: 0 0 0 2px rgba(232, 232, 232, 0.5) !important; } #book-appointment-wizard .selected-service, #book-appointment-wizard .selected-provider { color: #e8e8e8 !important; font-weight: 600 !important; } /* ── Form inputs ─────────────────────────────────────────────────────────────── */ #book-appointment-wizard input[type="text"], #book-appointment-wizard input[type="email"], #book-appointment-wizard input[type="tel"], #book-appointment-wizard input[type="number"], #book-appointment-wizard textarea, #book-appointment-wizard select { background: rgba(61, 69, 76, 0.55) !important; color: #fff3dd !important; border: 1px solid rgba(232, 232, 232, 0.4) !important; border-radius: 6px !important; font-family: 'MarkaziText', Georgia, serif !important; font-size: 1rem !important; } #book-appointment-wizard input[type="text"]:focus, #book-appointment-wizard input[type="email"]:focus, #book-appointment-wizard input[type="tel"]:focus, #book-appointment-wizard input[type="number"]:focus, #book-appointment-wizard textarea:focus, #book-appointment-wizard select:focus { border-color: #e8e8e8 !important; box-shadow: 0 0 0 2px rgba(232, 232, 232, 0.2) !important; outline: none !important; background: rgba(61, 69, 76, 0.75) !important; } /* Placeholder text */ #book-appointment-wizard input::placeholder, #book-appointment-wizard textarea::placeholder { color: rgba(150, 173, 184, 0.6) !important; } /* Select dropdown arrow tint */ #book-appointment-wizard select option { background: #272727 !important; color: #fff3dd !important; } /* ── Form labels ─────────────────────────────────────────────────────────────── */ #book-appointment-wizard label { color: #96ADB8 !important; font-weight: 600 !important; font-size: 0.95rem !important; } /* ── Primary buttons (Next, Confirm) ────────────────────────────────────────── */ #book-appointment-wizard #button-next, #book-appointment-wizard #button-submit, #book-appointment-wizard .btn-primary { background: rgba(61, 69, 76, 0.60) !important; color: #e8e8e8 !important; border: 2px solid rgba(232, 232, 232, 0.7) !important; border-radius: 6px !important; font-family: 'MarkaziText', Georgia, serif !important; font-weight: 600 !important; font-size: 1.05rem !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } #book-appointment-wizard #button-next:hover, #book-appointment-wizard #button-submit:hover, #book-appointment-wizard .btn-primary:hover { border-color: #f2f2f2 !important; box-shadow: 0 10px 24px rgba(232, 232, 232, 0.35) !important; transform: translateY(-4px) !important; background: rgba(61, 69, 76, 0.60) !important; } /* ── Back / secondary buttons ───────────────────────────────────────────────── */ #book-appointment-wizard #button-back, #book-appointment-wizard .btn-default { background: transparent !important; color: #96ADB8 !important; border: 1px solid rgba(150, 173, 184, 0.4) !important; border-radius: 6px !important; font-family: 'MarkaziText', Georgia, serif !important; transition: all 0.2s ease !important; } #book-appointment-wizard #button-back:hover, #book-appointment-wizard .btn-default:hover { color: #fff3dd !important; border-color: rgba(150, 173, 184, 0.7) !important; background: rgba(150, 173, 184, 0.1) !important; } /* ── Frame footer (nav/controls bar) ────────────────────────────────────────── */ #book-appointment-wizard #frame-footer { background: #0d0d0d !important; border-top: 2px solid rgba(232, 232, 232, 0.3) !important; border-radius: 0 0 8px 8px !important; color: rgba(255, 243, 221, 0.6) !important; font-size: 0.85rem !important; } /* ── Success / confirmation frame ───────────────────────────────────────────── */ #success-frame, #book-appointment-wizard #book-success { background: rgba(61, 69, 76, 0.85) !important; color: #fff3dd !important; border: 2px solid #e8e8e8 !important; border-radius: 10px !important; padding: 1.5rem !important; } #success-frame h3, #success-frame strong, #book-appointment-wizard #book-success h3, #book-appointment-wizard #book-success strong { color: #e8e8e8 !important; font-family: 'NotoSansBlack', Arial, sans-serif !important; } /* Checkmark / success icon */ #book-appointment-wizard #book-success .glyphicon-ok-circle, #book-appointment-wizard #book-success i.fa-check-circle { color: #e8e8e8 !important; } #success-frame .btn { background: rgba(61, 69, 76, 0.75) !important; color: #e8e8e8 !important; border: 2px solid rgba(232, 232, 232, 0.7) !important; border-radius: 6px !important; } /* ── Alerts / validation messages ───────────────────────────────────────────── */ #book-appointment-wizard .alert { background: rgba(61, 69, 76, 0.85) !important; border: 1px solid rgba(232, 232, 232, 0.5) !important; color: #fff3dd !important; border-radius: 6px !important; } #book-appointment-wizard .alert-danger, #book-appointment-wizard .has-error .help-block, #book-appointment-wizard .has-error .control-label { color: #e87a50 !important; border-color: rgba(232, 122, 80, 0.5) !important; } #book-appointment-wizard .has-error input, #book-appointment-wizard .has-error select, #book-appointment-wizard .has-error textarea { border-color: rgba(232, 122, 80, 0.6) !important; } /* ── Links ───────────────────────────────────────────────────────────────────── */ #book-appointment-wizard a { color: #3E94E9 !important; text-decoration: none !important; } #book-appointment-wizard a:hover { color: #e8e8e8 !important; text-decoration: underline !important; } /* ── Loading spinner / overlay ───────────────────────────────────────────────── */ #loading { background: rgba(6, 8, 48, 0.85) !important; } #loading .spinner > div, #loading .sk-spinner > div { background-color: #e8e8e8 !important; } /* ── Admin panel (backend) — light tint only, won't break functionality ──────── */ .navbar, .navbar-default { background-color: #0d0d0d !important; border-bottom: 2px solid #e8e8e8 !important; } .navbar-brand, .navbar-default .navbar-brand { color: #e8e8e8 !important; font-family: 'NotoSansBlack', Arial, sans-serif !important; } .navbar-default .navbar-nav > li > a { color: #fff3dd !important; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .active > a { color: #e8e8e8 !important; background-color: rgba(232, 232, 232, 0.1) !important; }