/* ============================================================= MiniTP — Global stylesheet Loaded on every page via layouts/app.blade.php Holds: shared color tokens, reset, and the 3 theme skins. Page-specific CSS lives in /public/css/pages/.css ============================================================= */ /* ---------- 1. Base tokens (NAVY / default) ---------------- */ :root{ /* structural navy scale */ --navy-950:#070c18; --navy-900:#0a1226; --navy-800:#0b1326; --navy-700:#152444; /* accent (brand blue) */ --blue-500:#3b7bff; --blue-600:#2a5fe0; --blue-400:#6ea0ff; /* text ink */ --ink-0:#f3f6fc; --ink-1:#aab4c8; --ink-2:#6c7791; /* hairlines & surfaces */ --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14); --surface:rgba(255,255,255,.035); --surface-hi:rgba(255,255,255,.06); /* status */ --green:#2ecf8f; --red:#ef5a6f; --gold:#e8b84b; --purple:#8b6cff; --teal:#2ec5c5; /* semantic accent — pages that used blue read from here so a theme can retint the primary action colour in one place */ --accent:var(--blue-500); --accent-strong:var(--blue-600); --accent-soft:var(--blue-400); /* page backdrop stops (referenced by page body{} rules that opt in; legacy pages keep their own navy gradient) */ --bg-0:var(--navy-950); --bg-1:var(--navy-900); --bg-2:var(--navy-900); } /* ---------- 2. Reset ---------------------------------------- */ *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--ink-0); -webkit-font-smoothing:antialiased; } img{max-width:100%;} a{color:inherit;} /* smooth the skin change */ body, body *{ transition:background-color .25s ease, border-color .25s ease, color .2s ease; } /* ============================================================= 3. THEME SKINS Applied by setting (see /public/js/theme.js). Each skin only remaps the shared tokens above, so all 38 pages recolour at once. ============================================================= */ /* ---- NAVY (dark, default) — same as base :root ------------ */ html[data-theme="navy"]{ color-scheme:dark; } /* ---- HERITAGE (gold) -------------------------------------- */ html[data-theme="heritage"]{ color-scheme:dark; --navy-950:#0a0803; --navy-900:#140f05; --navy-800:#000000; --navy-700:#2a1f0c; /* gold takes over the accent role */ --blue-500:#e8b84b; --blue-600:#c99a2e; --blue-400:#f3d488; --ink-0:#f7efdd; --ink-1:#d3c39c; --ink-2:#9a8a63; --line:rgba(232,184,75,.14); --line-strong:rgba(232,184,75,.24); --surface:rgba(26,26,26); --surface-hi:rgba(232,184,75,.09); --green:#4bd39a; --red:#ef6b73; --gold:#e8b84b; --accent:#e8b84b; --accent-strong:#c99a2e; --accent-soft:#f3d488; --bg-0:#0a0803; --bg-1:#140f05; --bg-2:rgb(24 24 24); } /* ---- LIGHT (executive white / silver) --------------------- */ html[data-theme="light"]{ color-scheme:light; --navy-950:#eef1f6; --navy-900:#f5f7fb; --navy-800:#ffffff; --navy-700:#e7ebf3; --blue-500:#2a5fe0; --blue-600:#1f49b8; --blue-400:#5b86ee; --ink-0:#0f1b35; --ink-1:#4a566e; --ink-2:#8792a8; --line:rgba(15,27,53,.10); --line-strong:rgba(15,27,53,.18); --surface:rgba(15,27,53,.03); --surface-hi:rgba(15,27,53,.06); --green:#12a866; --red:#e0384f; --gold:#b8862b; --accent:#2a5fe0; --accent-strong:#1f49b8; --accent-soft:#5b86ee; --bg-0:#eef1f6; --bg-1:#f5f7fb; --bg-2:rgb(255 255 255); } /* In light skin, decorative dark gradients on a few pages can wash out text; keep body text on the dark ink token above. */ html[data-theme="light"] body{ color:var(--ink-0); } /* ============================================================= 4. Theme switcher control (floating, collapsible) A round toggle sits on the right edge; tapping it slides/fades the 3 colour swatches out. Tapping again tucks them back in. ============================================================= */ .theme-switch{ position:fixed; right:16px; bottom:88px; /* clear of bottom nav bars */ z-index:9999; display:flex; align-items:center; gap:8px; } /* the panel that holds the 3 swatches */ .theme-switch .ts-panel{ display:flex; gap:6px; padding:6px; border-radius:999px; background:var(--surface-hi); border:1px solid var(--line-strong); backdrop-filter:blur(10px); box-shadow:0 10px 30px -12px rgba(0,0,0,.6); /* collapsed by default: faded + slid to the right + non-interactive */ opacity:0; transform:translateX(16px) scale(.92); transform-origin:right center; pointer-events:none; transition:opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1); } /* open state */ .theme-switch.open .ts-panel{ opacity:1; transform:translateX(0) scale(1); pointer-events:auto; } /* stagger each swatch as the panel opens */ .theme-switch .ts-panel button{ opacity:0; transform:scale(.6); transition:opacity .2s ease, transform .2s ease, border-color .15s ease; } .theme-switch.open .ts-panel button{ opacity:1; transform:scale(1); } .theme-switch.open .ts-panel button:nth-child(1){ transition-delay:.06s; } .theme-switch.open .ts-panel button:nth-child(2){ transition-delay:.12s; } .theme-switch.open .ts-panel button:nth-child(3){ transition-delay:.18s; } /* colour swatches */ .theme-switch .ts-panel button{ width:20px;height:20px; border-radius:50%; /*border:2px solid transparent;*/ border:none; cursor:pointer; padding:0; outline:none; } .theme-switch .ts-panel button:hover{ transform:scale(1.12); } .theme-switch .ts-panel button[aria-pressed="true"]{ border-color:var(--ink-0); border: 2px solid; } .theme-switch .sw-navy{ background:linear-gradient(135deg,#3b7bff,#0a1226); } .theme-switch .sw-heritage{ background:linear-gradient(135deg,#f3d488,#c99a2e); } .theme-switch .sw-light{ background:linear-gradient(135deg,#ffffff,#c7d0e0); } /* the round toggle button */ .theme-switch .ts-toggle{ width:35px;height:35px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface-hi); backdrop-filter:blur(10px); box-shadow:0 10px 30px -12px rgba(0,0,0,.6); color:var(--ink-0); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:transform .28s ease, background-color .25s ease, border-color .25s ease; } .theme-switch .ts-toggle:hover{ transform:scale(1.06); } .theme-switch .ts-toggle svg{ width:20px;height:20px; transition:transform .35s cubic-bezier(.34,1.56,.64,1); } /* spin the icon a touch when open */ .theme-switch.open .ts-toggle svg{ transform:rotate(90deg); } /*manual add and move css*/ a { text-decoration: none; } .blur-background { filter: blur(5px); transition: filter 0.3s ease; } .all-menu-scroll.blur-background{ filter:blur(4px) brightness(.7); pointer-events:none; user-select:none; transition:filter .2s ease; } .page-name{ font-size:11px; font-weight: 700; } /*.frame::before{ content:""; position:absolute; top:0; right:0; width:100%; height:220px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='220'%3E%3Cg stroke='%233b7bff' stroke-width='1.4' opacity='0.16'%3E%3Cline x1='40' y1='150' x2='40' y2='110'/%3E%3Crect x='34' y='118' width='12' height='24' fill='none'/%3E%3Cline x1='70' y1='140' x2='70' y2='90'/%3E%3Crect x='64' y='96' width='12' height='34' fill='none'/%3E%3Cline x1='100' y1='120' x2='100' y2='70'/%3E%3Crect x='94' y='78' width='12' height='30' fill='none'/%3E%3Cline x1='130' y1='100' x2='130' y2='50'/%3E%3Crect x='124' y='58' width='12' height='28' fill='none'/%3E%3Cline x1='160' y1='90' x2='160' y2='40'/%3E%3Crect x='154' y='48' width='12' height='26' fill='none'/%3E%3Cline x1='190' y1='70' x2='190' y2='20'/%3E%3Crect x='184' y='28' width='12' height='30' fill='none'/%3E%3Cpath d='M20 160 L60 120 L90 130 L120 90 L150 95 L180 55 L210 60' fill='none' stroke='%236ea0ff' stroke-width='1.6' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:top right; background-size:340px 190px; opacity:.9; pointer-events:none; }*/ /*paginate*/ .custom-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; } .custom-pagination a, .custom-pagination span { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--ink-1); background: var(--surface); border: 1px solid var(--line); cursor: pointer; } .custom-pagination a:hover { background-color: #f5f5f5; border-color: #bbb; } .custom-pagination .active-link { background: var(--blue-500); color: #fff; border-color: var(--blue-500); } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } .blurred { filter: blur(6px); user-select: none; } .show-svg { position: relative; overflow: hidden; } .show-svg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232dd4bf' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%232dd4bf' stop-opacity='0.4'/%3E%3Cstop offset='1' stop-color='%232dd4bf' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 160 C 80 120 120 200 200 160 S 320 120 400 160' stroke='url(%23g)' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-size: 98% 109%; } .show-svg-purple { position: relative; overflow: hidden; } .show-svg-purple::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23a855f7' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%23a855f7' stop-opacity='0.4'/%3E%3Cstop offset='1' stop-color='%23a855f7' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 150 C80 110 120 190 200 150 S320 110 400 150' stroke='url(%23g)' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-size: 99% 117%; } .show-svg-wallet { position: relative; overflow: hidden; } .show-svg-wallet::after { content: ""; position: absolute; right: 73px; top: 26px; width: 142px; height: 101px; pointer-events: none; opacity: 0.1; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='20' y1='20' x2='20' y2='95'/%3E%3Crect x='13' y='40' width='14' height='35' fill='%233b82f6' fill-opacity='0.25'/%3E%3Cline x1='50' y1='30' x2='50' y2='105'/%3E%3Crect x='43' y='55' width='14' height='30' fill='none'/%3E%3Cline x1='80' y1='15' x2='80' y2='80'/%3E%3Crect x='73' y='30' width='14' height='38' fill='%233b82f6' fill-opacity='0.25'/%3E%3Cline x1='110' y1='35' x2='110' y2='100'/%3E%3Crect x='103' y='50' width='14' height='28' fill='none'/%3E%3Cline x1='140' y1='10' x2='140' y2='70'/%3E%3Crect x='133' y='25' width='14' height='32' fill='%233b82f6' fill-opacity='0.25'/%3E%3Cline x1='170' y1='25' x2='170' y2='90'/%3E%3Crect x='163' y='40' width='14' height='35' fill='none'/%3E%3C/svg%3E"); } .daterangepicker { color: black !important; } .daterangepicker .ranges li { font-size: 11px; padding: 8px 12px; cursor: pointer; } .daterangepicker th.month { color: black; } .daterangepicker .calendar-table thead{ color: black; } td.available{ color: black; } .confirm-modal h5 { font-size: 12px !important; } .confirm-modal p{ font-size: 10px !important; } .confirm-modal.show { transform: translateY(-50%) !important; } .confirm-modal{ bottom: unset !important; top: 50% !important; } .compare-scroll{ overflow-x:auto; margin:6px 0 20px; border-radius:6px; border:1px solid var(--line); } table.compare-table{ border-collapse:collapse; width:100%; min-width:460px; } .compare-table th, .compare-table td{ padding:11px 10px; text-align:center; font-size:10px; border-bottom:1px solid var(--line); white-space:nowrap; } .compare-table th{ background:var(--surface-hi); font-weight:800; font-size:10px; color:var(--ink-1); top:0; } .compare-table tr:last-child td{ border-bottom:0; } .compare-table td.yes{ color:var(--green); font-weight:800; } .compare-table td.no{ color:var(--ink-2); } .compare-table td.check svg{ width:14px; height:14px; color:var(--green); } .compare-table td.cross svg{ width:14px; height:14px; color:var(--ink-2); }