/* The fresh look — brighter, warmer, with room for photographs. * * EVERY rule in this file is scoped under html[data-look="fresh"]. That is the contract that * makes "revert" real: remove the attribute and none of this applies, so the classic app is * byte-identical with or without the file. js/screens/look.js sets the attribute; nothing else. * * The palette is redefined at token level and nowhere else, so every component that already * reads var(--amber) or var(--paper) picks the new colour up through the cascade without being * touched. A component styled directly in here is a component that will drift from the app. */ /* ---- tokens: light ------------------------------------------------------------------------ */ html[data-look="fresh"]{ --paper:#fffdf9; --paper2:#fff5ea; --card:#ffffff; --ink:#1f2933; --muted:#5f6b76; --line:#ece4d8; --teal:#0f8b8d; --teal-soft:#0f8b8d14; --amber:#ff7a59; --amber-soft:#ff7a5920; --amber-ink:#c2411f; --clay:#e4572e; --sun:#ffc53d; --sea:#0f8b8d; --sea-soft:#0f8b8d1a; --land:#f1e6d3; --landline:#c9b89a; --ocean1:#dff3f3; --ocean2:#bde7e8; --shadow-fab:0 4px 14px rgba(255,122,89,.28); --shadow:0 24px 60px rgba(31,41,51,.14); } /* ---- tokens: dark — a warm night, not a black one ---------------------------------------- */ @media (prefers-color-scheme:dark){ html[data-look="fresh"]:not([data-theme="light"]){ --paper:#171a21; --paper2:#1e222b; --card:#232833; --ink:#f4f1ea; --muted:#a9b2bd; --line:#2f3641; --teal:#5fd3d5; --teal-soft:#5fd3d51f; --amber:#ff9a7f; --amber-soft:#ff9a7f24; --amber-ink:#ffb8a4; --clay:#ff8c68; --sun:#ffd166; --sea:#5fd3d5; --sea-soft:#5fd3d51f; --land:#2c3140; --landline:#4a5266; --ocean1:#111a22; --ocean2:#17242e; --shadow-fab:0 4px 14px rgba(0,0,0,.5); --shadow:0 24px 60px rgba(0,0,0,.55); } } html[data-look="fresh"][data-theme="dark"]{ --paper:#171a21; --paper2:#1e222b; --card:#232833; --ink:#f4f1ea; --muted:#a9b2bd; --line:#2f3641; --teal:#5fd3d5; --teal-soft:#5fd3d51f; --amber:#ff9a7f; --amber-soft:#ff9a7f24; --amber-ink:#ffb8a4; --clay:#ff8c68; --sun:#ffd166; --sea:#5fd3d5; --sea-soft:#5fd3d51f; --land:#2c3140; --landline:#4a5266; --ocean1:#111a22; --ocean2:#17242e; --shadow-fab:0 4px 14px rgba(0,0,0,.5); --shadow:0 24px 60px rgba(0,0,0,.55); } html[data-look="fresh"][data-theme="light"]{ --paper:#fffdf9; --paper2:#fff5ea; --card:#ffffff; --ink:#1f2933; --muted:#5f6b76; --line:#ece4d8; --teal:#0f8b8d; --teal-soft:#0f8b8d14; --amber:#ff7a59; --amber-soft:#ff7a5920; --amber-ink:#c2411f; --clay:#e4572e; --sun:#ffc53d; --sea:#0f8b8d; --sea-soft:#0f8b8d1a; --land:#f1e6d3; --landline:#c9b89a; --ocean1:#dff3f3; --ocean2:#bde7e8; --shadow-fab:0 4px 14px rgba(255,122,89,.28); --shadow:0 24px 60px rgba(31,41,51,.14); } /* the toggle itself, so it reads as a sibling of the theme button */ /* The theme button is absolutely positioned at the top corner; a sibling inserted after it lands on the same spot and covers it. The look button therefore takes its own offset — always, not only under the flag, because it exists in both looks (it is how you get INTO the fresh one). */ #app:not([dir="rtl"]) .lookbtn{right:84px;left:auto} #app[dir="rtl"] .lookbtn{left:84px;right:auto} /* ---- photographs ------------------------------------------------------------------------- */ html[data-look="fresh"] .phero{position:relative;height:150px;margin:0 0 14px;border-radius:18px;overflow:hidden; background:linear-gradient(135deg,var(--sea-soft),var(--amber-soft));display:flex;align-items:flex-end} html[data-look="fresh"] .phero.has{height:210px} html[data-look="fresh"] .phero .cph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} html[data-look="fresh"] .phero.has::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.62) 100%)} html[data-look="fresh"] .pherotx{position:relative;z-index:1;padding:16px 18px;color:var(--ink)} html[data-look="fresh"] .phero.has .pherotx{color:#fff} html[data-look="fresh"] .pherocity{font-family:var(--ff-display);font-weight:700;font-size:34px;line-height:1.05;letter-spacing:-.01em} html[data-look="fresh"] .pherosub{font-size:14px;opacity:.85;margin-top:4px} html[data-look="fresh"] .phero .cmattr{z-index:2} html[data-look="fresh"] .slot.haspic{align-items:flex-start} html[data-look="fresh"] .pth{position:relative;flex:0 0 auto;width:64px;height:64px;border-radius:12px;overflow:hidden; margin-inline-end:10px;background:var(--paper2)} html[data-look="fresh"] .pth img{width:100%;height:100%;object-fit:cover;display:block} html[data-look="fresh"] .pth .cmattr{font-size:8px;bottom:2px;inset-inline-end:3px;padding:1px 4px} /* ---- less per tab ------------------------------------------------------------------------- Three rows of navigation sat above the first stop: day chips, the four section tabs, then the pager. Under the fresh look only the day chips stay on top; the four sections fold into a single quiet row at the foot of the day, the hint sentence goes, the two floating buttons become one, and a row's four icons appear when the row is touched rather than always. */ /* The four section tabs stay at the top, where the app puts them. Ahmed asked for them back up after they had been moved under the day. Compact, labelled. */ html[data-look="fresh"] .pgutil{display:flex;gap:6px;justify-content:center;margin:0 0 6px;padding:0} html[data-look="fresh"] .pgutil .pgtab{padding:7px 10px;border-radius:999px;background:var(--paper2);border:1px solid var(--line);font-size:12px;line-height:1} html[data-look="fresh"] .pgutil .pgtab svg{width:15px;height:15px} /* Labels always. The icon-only strip was a density trick and Ahmed rejected it: "Info, Budget, Flights, Stay" are navigation, and a bed icon is not the word Stay. */ html[data-look="fresh"] .pgutil .pgtab span{display:inline;margin-inline-start:6px} html[data-look="fresh"] .dhint,html[data-look="fresh"] .dhtouch{display:none !important} html[data-look="fresh"] .editfab{display:none !important} html[data-look="fresh"] .pgtabs{gap:8px;padding:8px 0 10px} html[data-look="fresh"] .pgtabs .pgtab{border-radius:999px;padding:9px 16px;font-weight:700} html[data-look="fresh"] .pgtabs .pgtab.on,html[data-look="fresh"] .pgtabs .pgtab[aria-current]{background:var(--amber);color:#fff;border-color:var(--amber)} @media (hover:hover){ html[data-look="fresh"] .slot .picbtn,html[data-look="fresh"] .slot .swapbtn,html[data-look="fresh"] .slot .infobtn{ opacity:0;transition:opacity .15s} html[data-look="fresh"] .slot:hover .picbtn,html[data-look="fresh"] .slot:hover .swapbtn,html[data-look="fresh"] .slot:hover .infobtn, html[data-look="fresh"] .slot:focus-within .picbtn,html[data-look="fresh"] .slot:focus-within .swapbtn,html[data-look="fresh"] .slot:focus-within .infobtn{opacity:1} } html[data-look="fresh"] .day{border-radius:18px;box-shadow:0 10px 30px rgba(31,41,51,.06)} html[data-look="fresh"] .slot{padding:14px 0 12px} html[data-look="fresh"] .slot .t{color:var(--sea);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:11px} /* ---- the map column ------------------------------------------------------------------------ On a laptop the plan sat in a 680px column with 600px of empty margin either side. Under the fresh look the itinerary becomes two columns from 1100px: the day on the left, the day's map on the right, pinned while the day scrolls. Phone and tablet never see any of this. */ html[data-look="fresh"] .daymap{display:block;position:relative;margin:14px 0;background:var(--card);border:1px solid var(--line); border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(31,41,51,.06)} html[data-look="fresh"] .daymap[hidden]{display:none} html[data-look="fresh"] .daymap canvas{display:block;width:100%;height:auto;aspect-ratio:1/1} html[data-look="fresh"] .dmcap{padding:12px 14px 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sea)} html[data-look="fresh"] .dmattr{position:absolute;bottom:6px;inset-inline-end:8px;font-size:10px;line-height:1;color:#fff; background:rgba(0,0,0,.5);padding:3px 6px;border-radius:6px;text-decoration:none} /* the section tabs, once photos.js has moved them under the day */ @media (min-width:1100px){ html[data-look="fresh"] .wrap{max-width:1180px} html[data-look="fresh"] .out.show{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:22px;align-items:start} html[data-look="fresh"] .out.show > .phero{grid-column:1 / -1} html[data-look="fresh"] .out.show > .pgbar,html[data-look="fresh"] .out.show > .pg,html[data-look="fresh"] .out.show > .pgfoot{grid-column:1} html[data-look="fresh"] .daymap{grid-column:2;grid-row:2 / span 60;position:sticky;top:14px;margin:0} html[data-look="fresh"] .day{max-width:none} } /* ---- home, community, record — the screens that only got the palette ------------------------ Home: the brand sits on a soft photographic band instead of bare paper, and the one thing to do on this screen — plan — is the biggest thing on it. Community: the photograph leads the card and the report/meta chrome steps back. Record: the globe card leads, the compare sections read as one quiet list. All of it is colour, size and spacing; nothing is hidden. */ html[data-look="fresh"] .hero{padding:26px 4px 10px;margin:0 -4px 6px;border-radius:0 0 26px 26px; background:radial-gradient(120% 90% at 50% -20%,var(--amber-soft) 0%,transparent 60%), linear-gradient(180deg,var(--sea-soft),transparent 80%)} html[data-look="fresh"] .hero .eyebrow{color:var(--sea);letter-spacing:.14em} html[data-look="fresh"] .btn{background:linear-gradient(135deg,var(--amber),#ff9a3d);color:#fff;border-radius:16px; padding:18px;font-size:17px;font-weight:800;letter-spacing:.01em;box-shadow:0 10px 24px rgba(255,122,89,.32)} html[data-look="fresh"] .btn:hover{filter:brightness(1.04)} html[data-look="fresh"] .cmcover{height:120px} html[data-look="fresh"] .cmcover.cmtall{height:200px} html[data-look="fresh"] .cmcard{border-radius:18px;overflow:hidden} html[data-look="fresh"] .cmtitle{font-size:18px} html[data-look="fresh"] .cmmeta,html[data-look="fresh"] .cmreport{opacity:.72;font-size:12px} html[data-look="fresh"] .cmstats{gap:12px} html[data-look="fresh"] .cmbtn{border-radius:999px} html[data-look="fresh"] .reccard{border-radius:18px;box-shadow:0 10px 30px rgba(31,41,51,.06)} html[data-look="fresh"] .recstats{font-family:var(--ff-display)} html[data-look="fresh"] .cmpsec{padding:10px 0;border-top:1px solid var(--line)} html[data-look="fresh"] .cmphead{font-size:14px;font-weight:700} html[data-look="fresh"] .recbtn.main{background:linear-gradient(135deg,var(--amber),#ff9a3d);color:#fff;border:0} /* every primary call to action reads the same, including the empty states */ html[data-look="fresh"] .recempty button,html[data-look="fresh"] .cmempty button,html[data-look="fresh"] .nempty button, html[data-look="fresh"] button.cta,html[data-look="fresh"] .primary{ background:linear-gradient(135deg,var(--amber),#ff9a3d);color:#fff;border:0;border-radius:999px;font-weight:800} /* ---- less writing -------------------------------------------------------------------------- Ahmed, on the first review: "still too much writing." The first screen is the planner, so the copy that explains the planner goes: the eyebrow and tagline over the brand, the footer blurb, the how-it-works card (still in the drawer), and the welcome note. What stays is what a traveller acts on. */ /* The two lines over the brand — the eyebrow and the tagline — stay: Ahmed asked for them back. The footer blurb, the how-it-works card and the welcome note are the ones that go. */ html[data-look="fresh"] #foot,html[data-look="fresh"] #intro, html[data-look="fresh"] .welnote,html[data-look="fresh"] #welNote{display:none !important} html[data-look="fresh"] .hero{padding:18px 4px 6px} html[data-look="fresh"] .hero .compass{transform:scale(.9)}