/* * VELOURS PARIS — what every section owes a phone. * --------------------------------------------------------------------------- * Linked from after every section stylesheet, so it wins a tie. Only * page-wide rules belong here: anything that concerns one section (its grid, * its type scale, the size of its buttons on a narrow screen) lives in that * section's own file, next to the rules it overrides. */ /* ------------------------------------------------------------- the page -- */ html { /* a phone that rotates must not reflow the type on its own */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* the header is fixed: an anchor has to land under it, not behind it */ scroll-padding-top: calc(var(--vp-header-h, 76px) + 24px); } /* Full-bleed sections are laid out with 100vw, which is wider than the page whenever a scrollbar is showing: nothing should be pannable sideways. `clip` rather than `hidden` on purpose — `hidden` would turn the root into a scroll container, which costs position:sticky and iOS momentum scrolling. A browser too old to know `clip` drops the line and behaves as it did. */ html { overflow-x: clip; } /* The page ground, behind and around every section. */ body.t-body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } /* A tap should light up what was tapped, not paint a blue box over it. */ a, button, summary, label, [role="button"], .vp-package, .vp-room, .vp-chip { -webkit-tap-highlight-color: color-mix(in srgb, var(--color-accent) 18%, transparent); } @media (max-width: 780px) { /* room for the sticky action bar at the foot of the page */ #allrecords { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } } /* ------------------------------------------------------- touch, not mouse -- */ /* A finger leaves :hover behind on whatever it last touched, so every hover that moves something would stick there. On a touch screen the press itself is the feedback: :active answers, :hover does not. */ @media (hover: none) { #vp-support:hover, #vp-packages .vp-package:hover { transform: none; box-shadow: none; } /* What a press looks like, everywhere it means "this is a button". */ .vp-btn:active, #vp-header .vp-header__book:active, #vp-mobile-bar .vp-mobile-bar__book:active, #vp-booking .vp-booking__next:active, #vp-booking .vp-booking__submit:active, #vp-booking .vp-booking__done-close:active, #vp-support:active { transform: scale(.975); } /* Cards answer a press with their border, which never sticks. */ #vp-rooms .vp-room:active, #vp-packages .vp-package:active, #vp-booking .vp-booking__room:active, #vp-booking .vp-booking__slot:active, #vp-booking .vp-booking__package:active, #vp-booking .vp-booking__offer:active, .vp-chip:active { border-color: var(--color-accent); } } /* --------------------------------------------------------------- overlays -- */ /* Something is open over the page (assets/js/scroll-lock.js): the page behind is pinned there, and the sticky bar has nothing to add under a dialog. `.t-body_scroll-locked` is how Tilda's own popup — the form in the footer — says the same thing. */ html.vp-locked #vp-mobile-bar, body.t-body_scroll-locked #vp-mobile-bar { opacity: 0; visibility: hidden; transform: translateY(100%); } /* The support button goes with it: a dialog is already a conversation, and the button would otherwise show through the scrim behind it. */ html.vp-locked #vp-support, body.t-body_scroll-locked #vp-support { opacity: 0; visibility: hidden; } /* ------------------------------------------------------------- landscape -- */ /* On its side the notch eats into the text column, so the inner wrappers — every section names its own `…__inner` — keep clear of both edges. */ @media (max-width: 980px) and (orientation: landscape) { #allrecords [class*="__inner"], #allrecords [class*="__panel"] { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } /* --------------------------------------------------------------- motion -- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }