/* ============================================================================ te-app.css — TravelEssence app design system (distilled from THE Brain) Dark-first. Light theme via [data-theme="light"]. Pair with the `brand-guides-v2` skill for brand colors, fonts and logos. Load fonts + Material Icons in . ============================================================================ */ /* ---- Tokens : DARK (default) --------------------------------------------- */ :root{ --te-green:#1DC19A; --te-green-ink:#1DC19A; --te-green-soft:rgba(29,193,154,0.12); --te-green-line:rgba(29,193,154,0.20); --te-bg:#141313; --te-surface:#141313; --te-panel:#1A1918; --te-ink:#FCF8F2; --te-muted:#C7B5A1; --te-muted-2:#9B8974; --te-card-bg:rgba(252,248,242,0.04); --te-card-border:rgba(252,248,242,0.08); --te-border:rgba(252,248,242,0.08); --te-divider:rgba(252,248,242,0.06); --te-hover:rgba(252,248,242,0.08); --te-input-bg:rgba(252,248,242,0.07); --te-input-border:rgba(252,248,242,0.12); --te-danger:#E85B5B; --te-info:#4A90D9; --te-plum:#7B6CF6; --te-font-ui:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif; --te-font-head:'Bricolage Grotesque',system-ui,sans-serif; --te-font-display:'TravelEs Sans','Bricolage Grotesque',system-ui,sans-serif; --te-r-pill:9999px; --te-r-lg:26px; --te-r-md:14px; --te-r-sm:8px; } /* ---- Tokens : LIGHT ------------------------------------------------------ */ [data-theme="light"]{ --te-green:#1DC19A; --te-green-ink:#12886B; --te-green-soft:rgba(29,193,154,0.13); --te-green-line:rgba(29,193,154,0.28); --te-bg:#EDE8E0; --te-surface:#FDFAF7; --te-panel:#F5F0EA; --te-ink:#1A1918; --te-muted:#6B5A4A; --te-muted-2:#8A7060; --te-card-bg:rgba(20,19,18,0.04); --te-card-border:rgba(20,19,18,0.10); --te-border:rgba(20,19,18,0.09); --te-divider:rgba(20,19,18,0.07); --te-hover:rgba(20,19,18,0.07); --te-input-bg:rgba(20,19,18,0.05); --te-input-border:rgba(20,19,18,0.14); } /* ---- Base ---------------------------------------------------------------- */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html,body,#root{height:100%} body{ font-family:var(--te-font-ui); font-size:16px; line-height:1.6; letter-spacing:0; background:var(--te-bg); color:var(--te-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3{font-family:var(--te-font-head); font-weight:700; line-height:1.15; color:var(--te-ink)} h1{font-size:22px} h2{font-size:18px} h3{font-size:16px} .te-display{font-family:var(--te-font-display); font-feature-settings:"liga" 1,"dlig" 1; line-height:.95} a{color:var(--te-green-ink); text-decoration:none} a:hover{text-decoration:underline} .te-muted{color:var(--te-muted)} .te-muted-2{color:var(--te-muted-2)} .te-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--te-muted-2)} .material-icons-round,.material-symbols-rounded{font-size:20px;line-height:1;vertical-align:middle;user-select:none;flex-shrink:0} ::-webkit-scrollbar{width:4px;height:4px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--te-ink) 18%,transparent);border-radius:4px} /* ---- App shell ----------------------------------------------------------- */ .te-app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--te-bg)} .te-main{flex:1;position:relative;overflow-y:auto;overflow-x:hidden;padding:16px} .te-main img{max-width:100%;height:auto} .te-main pre,.te-main table{overflow-x:auto;max-width:100%} /* Header bar */ .te-header{display:flex;align-items:center;gap:10px;background:var(--te-surface); border-bottom:2px solid var(--te-green);padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top,0px));flex-shrink:0;z-index:20} .te-header__logo{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0} .te-header__logo img{width:100%;height:100%;object-fit:cover} .te-header__title{flex:1;font-family:var(--te-font-head);font-size:15px;font-weight:700;color:var(--te-ink)} /* Contextual sub-header (glass) */ .te-subheader{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between; padding:9px 9px 9px 16px;background:color-mix(in srgb,var(--te-surface) 88%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--te-border)} .te-subheader__label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--te-muted-2)} /* Floating glass bottom-nav */ .te-nav{position:absolute;left:0;right:0;bottom:0;z-index:200; padding:8px 14px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));pointer-events:none} .te-nav__bar{display:flex;overflow:hidden;pointer-events:auto;border-radius:var(--te-r-lg); background:color-mix(in srgb,var(--te-surface) 72%,transparent); backdrop-filter:blur(32px) saturate(1.8);-webkit-backdrop-filter:blur(32px) saturate(1.8); border:.5px solid var(--te-border);box-shadow:0 4px 28px rgba(0,0,0,.5),inset 0 .5px 0 rgba(255,255,255,.07)} .te-nav__tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px; border:0;background:transparent;cursor:pointer;color:var(--te-muted-2); font:600 10px var(--te-font-ui);position:relative;-webkit-tap-highlight-color:transparent} .te-nav__tab .material-icons-round{font-size:22px} .te-nav__tab.is-active{color:var(--te-green)} /* Bottom-sheet + screen animations */ @keyframes te-panelIn{from{transform:translateY(105%)}to{transform:translateY(0)}} @keyframes te-panelOut{from{transform:translateY(0)}to{transform:translateY(105%)}} @keyframes te-fadeIn{from{opacity:0}to{opacity:1}} @keyframes te-fabPulse{0%,100%{box-shadow:0 4px 20px rgba(29,193,154,.45)}50%{box-shadow:0 4px 28px rgba(29,193,154,.7)}} .te-sheet{position:absolute;inset:0;z-index:110;overflow:hidden;background:var(--te-bg); animation:te-panelIn .32s cubic-bezier(.32,.72,0,1) both} .te-sheet--out{animation:te-panelOut .32s cubic-bezier(.32,.72,0,1) both;pointer-events:none} /* ---- Buttons ------------------------------------------------------------- */ .te-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font:700 14px var(--te-font-ui);border:0;border-radius:var(--te-r-pill); padding:12px 22px;cursor:pointer;transition:background .15s,transform .1s,opacity .15s} .te-btn:active{transform:translateY(1px)} .te-btn .material-icons-round{font-size:18px} .te-btn--primary{background:var(--te-green);color:#141313} .te-btn--primary:hover{filter:brightness(1.05)} .te-btn--secondary{background:var(--te-input-bg);color:var(--te-ink);box-shadow:inset 0 0 0 1px var(--te-input-border)} .te-btn--secondary:hover{background:var(--te-hover)} .te-btn--ghost{background:transparent;color:var(--te-ink);box-shadow:inset 0 0 0 1.5px var(--te-border)} .te-btn--ghost:hover{background:var(--te-hover)} .te-btn--danger{background:transparent;color:var(--te-danger)} .te-btn--danger:hover{background:color-mix(in srgb,var(--te-danger) 10%,transparent)} .te-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px; border:0;border-radius:50%;background:transparent;color:var(--te-muted);cursor:pointer;transition:background .15s} .te-icon-btn:hover{background:var(--te-hover)} /* ---- Segmented toggle ---------------------------------------------------- */ .te-seg{display:inline-flex;gap:3px;padding:3px;border-radius:10px;background:var(--te-input-bg)} .te-seg__btn{display:inline-flex;flex-direction:column;align-items:center;gap:3px;min-width:44px; padding:7px 10px;border:1.5px solid transparent;border-radius:7px;background:transparent; color:var(--te-muted-2);cursor:pointer;font:700 9px var(--te-font-ui);text-transform:uppercase;letter-spacing:.04em} .te-seg__btn .material-icons-round{font-size:17px} .te-seg__btn.is-active{background:var(--te-green-soft);border-color:var(--te-green);color:var(--te-green-ink)} /* ---- Pills & badges ------------------------------------------------------ */ .te-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:var(--te-r-pill); font:700 11px var(--te-font-ui);background:var(--te-card-bg);color:var(--te-muted);border:1px solid var(--te-border)} .te-pill--green{background:var(--te-green-soft);color:var(--te-green-ink);border-color:var(--te-green-line)} .te-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px; border-radius:var(--te-r-pill);background:var(--te-green);color:#141313;font:700 10px var(--te-font-ui)} /* ---- Cards --------------------------------------------------------------- */ .te-card{background:var(--te-card-bg);border:1px solid var(--te-card-border);border-radius:var(--te-r-md);padding:16px} .te-card__label{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--te-muted-2);margin-bottom:6px} .te-divider{height:1px;background:var(--te-divider);border:0;margin:12px 0} /* ---- Inputs -------------------------------------------------------------- */ .te-field{display:flex;flex-direction:column;gap:6px} .te-field__label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--te-muted-2)} .te-input,textarea.te-input,select.te-input{width:100%;font:400 15px var(--te-font-ui);color:var(--te-ink); background:var(--te-input-bg);border:1px solid var(--te-input-border);border-radius:var(--te-r-sm); padding:11px 14px;outline:none;transition:border-color .15s,box-shadow .15s} .te-input::placeholder{color:var(--te-muted-2)} .te-input:focus{border-color:var(--te-green);box-shadow:0 0 0 3px var(--te-green-soft)} /* ---- Avatar -------------------------------------------------------------- */ .te-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--te-green);flex-shrink:0} .te-avatar--fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--te-green-soft); border-color:var(--te-green-line);color:var(--te-green-ink);font:700 12px var(--te-font-ui)} /* ---- Popover / menu ------------------------------------------------------ */ .te-menu{background:var(--te-panel);border:1px solid var(--te-border);border-radius:var(--te-r-md); min-width:230px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.12)} .te-menu__section{padding:12px 16px;border-bottom:1px solid var(--te-border)} .te-menu__section:last-child{border-bottom:0} /* ---- FAB ----------------------------------------------------------------- */ .te-fab{position:absolute;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:210; width:56px;height:56px;border:0;border-radius:50%;background:var(--te-green);color:#141313;cursor:pointer; display:flex;align-items:center;justify-content:center;animation:te-fabPulse 2.4s ease-in-out infinite} .te-fab .material-icons-round{font-size:26px} /* ---- Modal --------------------------------------------------------------- */ .te-modal__backdrop{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.5); display:flex;align-items:center;justify-content:center;padding:20px;animation:te-fadeIn .2s ease} .te-modal{width:100%;max-width:440px;background:var(--te-panel);border:1px solid var(--te-border); border-radius:var(--te-r-md);box-shadow:0 8px 40px rgba(0,0,0,.35);overflow:hidden} /* ---- List rows ----------------------------------------------------------- */ .te-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;background:transparent; cursor:pointer;color:var(--te-ink);font:500 15px var(--te-font-ui);text-align:left;transition:background .15s} .te-row:hover{background:var(--te-hover)} .te-row__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .te-row__chev{color:var(--te-muted-2)} /* ---- Responsive ---------------------------------------------------------- */ @media (min-width:640px){ .te-main{padding:24px} .te-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .te-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }