/* ==========================================================================
Tiniri Camp — refinement layer
Loaded after the site's own stylesheet, so it only ever adds polish.
Nothing here changes layout or structure; it can be removed at any time by
deleting one tag.
========================================================================== */
:root {
--tin-gold: #D4AF37;
--tin-gold-soft: rgba(212, 175, 55, 0.4);
--tin-dark: #0A0A0B;
--tin-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* --- Type rendering -------------------------------------------------------
Thin gold-on-black type benefits enormously from proper antialiasing and
real ligatures. This is most of the "expensive" feeling. */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
scroll-behavior: smooth;
}
/* Large display type reads better slightly tighter. */
h1, h2, .font-bodoni, .font-serif {
letter-spacing: -0.012em;
}
/* Small uppercase labels need more air, not less. */
.uppercase {
letter-spacing: 0.22em;
}
/* Long paragraphs: stop lines running too wide to scan comfortably. */
p {
text-wrap: pretty;
}
/* --- Selection and scrollbar ---------------------------------------------
Small details, but they are what separate a site that was finished from
one that was merely deployed. */
::selection {
background: rgba(212, 175, 55, 0.28);
color: #fff;
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(212, 175, 55, 0.35) transparent;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(212, 175, 55, 0.28);
border-radius: 99px;
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(212, 175, 55, 0.5); }
/* --- Keyboard focus -------------------------------------------------------
The site currently gives no visible focus at all, which makes it unusable
by keyboard and fails accessibility. A gold ring fits the brand. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--tin-gold);
outline-offset: 3px;
border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }
/* --- Buttons and calls to action -----------------------------------------
A slight lift and a warm shadow on hover. Restrained, not bouncy. */
button,
a[class*="bg-gradient-to-br"],
a[class*="rounded-full"],
button[class*="rounded-full"] {
transition:
transform 0.45s var(--tin-ease),
box-shadow 0.45s var(--tin-ease),
filter 0.45s var(--tin-ease);
}
button:hover:not(:disabled),
a[class*="bg-gradient-to-br"]:hover {
transform: translateY(-1px);
}
button:active:not(:disabled) {
transform: translateY(0);
transition-duration: 0.1s;
}
/* --- Form fields ----------------------------------------------------------
The booking form is where money is made, so it gets the most care. */
input, select, textarea {
transition:
border-color 0.35s var(--tin-ease),
box-shadow 0.35s var(--tin-ease),
background-color 0.35s var(--tin-ease);
}
input:focus, select:focus, textarea:focus {
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
background-color: rgba(255, 255, 255, 0.07);
}
input::placeholder, textarea::placeholder {
opacity: 0.45;
transition: opacity 0.3s ease;
}
input:focus::placeholder, textarea:focus::placeholder { opacity: 0.25; }
/* Dropdown options inherit the OS style by default and look cheap. */
select option {
background: #1a1714;
color: #EDE7DA;
}
/* --- Images ---------------------------------------------------------------
Fade photographs in rather than letting them snap into place. */
img {
-webkit-user-drag: none;
}
img[loading="lazy"] {
animation: tin-fade 0.9s var(--tin-ease) both;
}
@keyframes tin-fade {
from { opacity: 0; transform: scale(1.015); }
to { opacity: 1; transform: scale(1); }
}
/* --- Links ----------------------------------------------------------------
A gold underline that grows from the left on hover. */
a:not([class*="btn"]):not([class*="bg-"]) {
transition: color 0.3s var(--tin-ease), opacity 0.3s var(--tin-ease);
}
/* --- Mobile ---------------------------------------------------------------
Two real bugs fixed here, not decoration. */
@media (max-width: 768px) {
/* iOS zooms the whole page when a field under 16px gets focus. That is
why the booking form feels broken on an iPhone. */
input, select, textarea {
font-size: 16px !important;
}
/* Tap targets below roughly 44px are hard to hit accurately. */
button, a[role="button"], .rounded-full {
min-height: 44px;
}
/* Huge display type set for desktop tends to overflow narrow screens. */
h1, .font-bodoni {
word-break: break-word;
hyphens: auto;
}
}
/* --- Right to left --------------------------------------------------------
Arabic needs the tracking removed; letter-spacing breaks Arabic script
by separating letters that should join. */
[dir="rtl"] .uppercase,
[dir="rtl"] [class*="tracking-"] {
letter-spacing: 0 !important;
}
[dir="rtl"] {
text-align: right;
}
/* --- Respect motion preferences ------------------------------------------
Some visitors get motion sickness from parallax and long fades. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ==========================================================================
SEEN-IN-THE-BROWSER FIXES
The following were found by looking at the live site, not the markup.
========================================================================== */
/* --- The Tifinagh watermark ----------------------------------------------
ⵜⵉⵏⵉⵔⵉ is set at 40% opacity across the whole hero, directly over the
photograph of the camp. At that weight it stops reading as a watermark and
starts competing with the logo above it, while flattening the picture you
paid a photographer for. Pulled back so it sits behind the image rather
than on top of it. */
.text-debossed,
[data-sanity="hero:tifinaghText"] .text-debossed {
opacity: 0.13 !important;
mix-blend-mode: soft-light;
}
/* --- Contrast repairs ----------------------------------------------------
Several labels are gold at 40–50% opacity on either a bright sky or pure
black. Both fail WCAG AA and simply look faded rather than subtle. */
/* "Book your stay" in the top bar, over a bright sky. */
nav a[href*="pricing"] {
color: #E8C86A !important;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}
/* Stats strip labels: "above sea level", "night temperature"… */
.font-tenor[class*="text-[#D4AF37]/50"],
p[class*="tracking-[0.6em]"] {
color: rgba(212, 175, 55, 0.82) !important;
}
/* The booking card's small print. */
.text-white\/20, [class*="text-white/20"] { color: rgba(255,255,255,.42) !important; }
.text-white\/30, [class*="text-white/30"] { color: rgba(255,255,255,.52) !important; }
.text-white\/40, [class*="text-white/40"] { color: rgba(255,255,255,.62) !important; }
/* Date fields read "--/--/----" at 20% white — nearly invisible, and the
single most important field in the whole booking flow. */
input[placeholder="--/--/----"],
input[readonly] {
color: #EDE7DA !important;
}
input::placeholder { color: rgba(237, 231, 218, 0.5) !important; }
/* --- The booking card ----------------------------------------------------
The left column ends after a short quote and leaves roughly 40% of the
card empty, which makes an otherwise elegant panel look unfinished. The
two columns are also unbalanced: the form needs the room, the quote does
not. */
@media (min-width: 1024px) {
.lg\:col-span-5 { grid-column: span 4 / span 4 !important; }
.lg\:col-span-7 { grid-column: span 8 / span 8 !important; }
}
/* "Dates & Guests" appears twice — once as the step label above the progress
bar, once as the heading directly beneath it. Keeping the heading, which is
larger and reads better. */
header .text-\[10px\] > span:first-child,
header div[class*="text-[10px]"] > span:first-child {
opacity: 0;
}
/* --- Vertical rhythm ------------------------------------------------------
Section padding across the page runs py-20, 80px, py-24 md:py-32 and
pt-4 md:pt-10 pb-0 — four different scales with no relationship. Irregular
breathing is the single biggest reason a site reads as unfinished rather
than expensive. This puts every section on one scale. */
section {
--tin-rhythm: clamp(5rem, 9vw, 9rem);
}
section#experience,
section#gallery,
section#faq,
section#restaurant {
padding-top: var(--tin-rhythm);
padding-bottom: var(--tin-rhythm);
}
/* --- Full-height sections on laptops --------------------------------------
Two sections are locked to min-height 700px and 900px. A 13-inch laptop
has roughly 700px of usable height, so the 900px section cannot ever be
seen at once — the visitor lands mid-content with no sense of the frame.
Using viewport units with a floor keeps the intent and fixes the failure. */
@media (min-width: 769px) {
section[class*="min-h-[900px]"] { min-height: min(900px, 92svh) !important; }
section[class*="min-h-[700px]"] { min-height: min(700px, 88svh) !important; }
}
/* On phones a locked 900px section is simply a wall of empty space. */
@media (max-width: 768px) {
section[class*="min-h-[900px]"],
section[class*="min-h-[700px]"] {
min-height: auto !important;
padding-top: 4rem;
padding-bottom: 4rem;
}
}
/* --- The booking card overlap ---------------------------------------------
The card is pulled over the hero with -mt-64 / md:-mt-96 / lg:-mt-[32rem].
Between 768px and 1024px it uses -384px, which on a short window drags it
over the logo. Softening it in that band only. */
@media (min-width: 769px) and (max-width: 1023px) {
section[class*="-mt-96"] { margin-top: -14rem !important; }
}
/* --- Gradient headings ----------------------------------------------------
Headings use text-transparent with bg-clip-text. If the background fails
to paint — older browsers, forced-colours mode, printing — the text is
invisible rather than merely unstyled. This guarantees a visible fallback. */
@supports not (background-clip: text) {
[class*="bg-clip-text"] {
color: var(--tin-gold) !important;
-webkit-text-fill-color: var(--tin-gold) !important;
}
}
@media (forced-colors: active) {
[class*="bg-clip-text"] {
-webkit-text-fill-color: CanvasText !important;
color: CanvasText !important;
}
}
/* --- The 500vh story section ----------------------------------------------
Five viewport heights of scroll to read five short lines. On a phone that
is a very long time with nothing happening. Shortening it on small screens
keeps the effect without the endurance test. */
@media (max-width: 768px) {
section#story { height: 300vh !important; }
}
/* ==========================================================================
MOBILE
Most desert-camp bookings start on a phone. These are ordered by how much
each one costs you.
========================================================================== */
@media (max-width: 1023px) {
/* --- The form is buried ------------------------------------------------
The booking card stacks with the quote panel on top, so on a phone a
visitor scrolls past a Tifinagh monogram and a line of poetry before
reaching a single field. The form should come first; the poetry can
follow it. */
/* Scoped to the booking card only. An unscoped [class*="col-span-5"] rule
would reorder any other 12-column grid on the site. */
.lg\:grid-cols-12 > [class*="col-span-7"] { order: 1; }
.lg\:grid-cols-12 > [class*="col-span-5"] {
order: 2;
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 1.75rem !important;
padding-bottom: 2rem !important;
}
/* The decorative monogram is 4xl on a phone and pushes the form down. */
.lg\:grid-cols-12 > [class*="col-span-5"] h1 {
font-size: clamp(2rem, 11vw, 3rem) !important;
margin-bottom: 1rem !important;
}
}
@media (max-width: 768px) {
/* --- The card eats the hero -------------------------------------------
-mt-64 pulls the card up 256px. On an 844px phone that is nearly a
third of the screen, so the photograph never gets a moment of its own. */
section[class*="-mt-64"] { margin-top: -5rem !important; padding-top: 0 !important; }
/* --- Hero wording ------------------------------------------------------
0.30em tracking on uppercase type is elegant at 23px and unreadable at
15px on a 390px screen — it wraps mid-phrase. */
#tin-hero-text #tin-tag-a { letter-spacing: 0.16em !important; font-size: 14px !important; }
#tin-hero-text #tin-tag-b { font-size: 12px !important; max-width: 30ch; }
#tin-hero-text { margin-top: 18px !important; padding: 0 20px; }
/* --- The estimate panel ------------------------------------------------
Nights on the left and price on the right collide below about 380px. */
#tin-sum > div {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
#tin-sum > div > span:last-child { text-align: left !important; }
/* --- Thumbs, not cursors ----------------------------------------------
Field height is what makes a form feel considered on a phone. */
input, select, textarea {
min-height: 52px !important;
padding-top: 0.85rem !important;
padding-bottom: 0.85rem !important;
}
form button[type="button"], form button[type="submit"] { min-height: 56px !important; }
/* --- Reviews ----------------------------------------------------------- */
#tin-reviews { padding-left: 20px !important; padding-right: 20px !important; }
#tin-reviews h2 { font-size: clamp(1.6rem, 8vw, 2.2rem) !important; }
#tin-reviews blockquote { font-size: 14px !important; }
/* --- Stats strip -------------------------------------------------------
Six figures in two columns runs to three tall rows with big gaps. */
.stats-grid { gap: 28px 16px !important; }
/* Deliberately NOT adding blanket padding to every here. Several
of yours are full-bleed photography, and insetting them by 20px would
leave a dark margin down both sides of the image. Only the reviews block,
which I added and therefore know the shape of, gets safe-area padding. */
#tin-reviews {
padding-left: max(20px, env(safe-area-inset-left)) !important;
padding-right: max(20px, env(safe-area-inset-right)) !important;
}
/* --- Floating controls -------------------------------------------------
Seen on the phone: the sound and scroll-to-top buttons sit on top of the
content — over "The Celestial Suite", over "Visual Poetry", over the
booking card. They are 56px circles at full opacity in the busiest
corner of the screen. Smaller, quieter, stacked, and out of the way. */
.fixed.rounded-full,
.fixed.bottom-10,
button.fixed[class*="rounded-full"] {
width: 42px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
right: 12px !important;
opacity: 0.55;
backdrop-filter: blur(6px);
}
.fixed.rounded-full:active { opacity: 1; }
.fixed.rounded-full svg,
.fixed.bottom-10 svg { width: 17px !important; height: 17px !important; }
/* Sit them one above the other, clear of the home indicator. */
.fixed.bottom-10 { bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
.fixed[class*="bottom-2"] { bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
/* --- Headings clipped at the top ---------------------------------------
"The Sovereign Suite" and "The Celestial Suite" are set with
leading-[0.85]. A line-height below 1 crops the ascenders of a display
serif, and with the section starting flush the first line loses its
top edge entirely. */
h3[class*="leading-[0.85]"],
h3[class*="font-cinzel"] {
line-height: 1.05 !important;
padding-top: 0.35em;
overflow: visible !important;
hyphens: none;
}
section#accommodation { padding-top: 3rem !important; }
/* --- Headings clipped on the right -------------------------------------
"Visual Poetry" and similar display lines run past the right edge
because they are sized in vw with no gutter. */
h2, h3, .font-bodoni, .font-cinzel {
max-width: 100%;
overflow-wrap: break-word;
padding-right: 0.15em;
}
/* --- The social proof strip --------------------------------------------
"45+ / 32K+ / 128K+" runs off the right edge — the third figure is cut
in half and the avatars hang off the left. Wrapped instead of scrolled. */
section[class*="h-[clamp"] > div,
[class*="socialProof"] > div,
section[style*="clamp(120px"] > div {
flex-wrap: wrap !important;
justify-content: center !important;
gap: 18px 26px !important;
padding: 0 16px !important;
}
section[style*="clamp(120px"] { height: auto !important; min-height: 0 !important;
padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
/* --- Feature pills -----------------------------------------------------
Each tent lists its features as pills of differing widths, ragged down
the left column. Even widths read as considered rather than accidental. */
section#accommodation ul li,
section#accommodation [class*="rounded-full"][class*="border"] {
width: 100% !important;
justify-content: flex-start;
text-align: left;
}
}
/* ==========================================================================
THREE THINGS SEEN ON THE PHONE
========================================================================== */
/* --- 1. Tent titles almost invisible --------------------------------------
"The Sovereign Suite" and "The Celestial Suite" render as dark olive on a
dark photograph. Their opacity is driven by scroll position, and the
thresholds were set for a desktop viewport — on a tall phone the heading is
caught part-way through its fade and never reaches full strength.
These are the names of the things you are selling, so they get forced to
full opacity with a shadow that lifts them off the photograph. */
@media (max-width: 768px) {
section#accommodation h3,
section#accommodation h3[style*="opacity"] {
opacity: 1 !important;
transform: none !important;
color: #F7F1E4 !important;
text-shadow: 0 2px 22px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* The same fade catches the intro heading, which is why "Rest in the Dunes"
loses its first word. */
section h2[style*="opacity"],
section h3[style*="opacity"],
section p[style*="opacity"] {
opacity: 1 !important;
}
}
/* --- 2. The floating buttons sit on the text ------------------------------
Even at 42px they land on the quote and on the next section's title. They
are controls, so they should look like controls: a solid dark disc, docked
in the corner, out of the reading column. */
@media (max-width: 768px) {
.fixed.rounded-full,
.fixed.bottom-10,
button.fixed[class*="rounded-full"] {
width: 38px !important;
height: 38px !important;
min-height: 38px !important;
right: 10px !important;
opacity: 1 !important;
background: rgba(10, 10, 11, 0.72) !important;
border: 1px solid rgba(212, 175, 55, 0.28) !important;
backdrop-filter: blur(10px);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.fixed.rounded-full svg,
.fixed.bottom-10 svg {
width: 15px !important;
height: 15px !important;
color: rgba(212, 175, 55, 0.9) !important;
}
.fixed.bottom-10 { bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
.fixed[class*="bottom-2"] { bottom: calc(60px + env(safe-area-inset-bottom)) !important; }
}
/* --- 3. Sections run into one another -------------------------------------
Photograph meets photograph with no break, so the gallery grid and the tent
section read as one confused block. A hairline that fades out at both ends
separates them without adding furniture.
Sections that deliberately overlap — the booking card pulled up over the
hero — are excluded, or the rule would draw a line through the overlap. */
@media (max-width: 768px) {
section + section:not([class*="-mt-"]):not(#story) { position: relative; }
section + section:not([class*="-mt-"]):not(#story)::before {
content: "";
position: absolute;
top: 0;
left: 14%;
right: 14%;
height: 1px;
z-index: 6;
pointer-events: none;
background: linear-gradient(90deg,
transparent, rgba(212, 175, 55, 0.30) 22%,
rgba(212, 175, 55, 0.30) 78%, transparent);
}
/* A little air either side of the join so the line has something to divide. */
section + section:not([class*="-mt-"]):not(#story) { padding-top: 2.75rem; }
}
/* --- The empty half of the hero -------------------------------------------
The hero content is top-aligned with pt-32, so on a tall phone the logo and
tagline sit in the upper third and roughly 480px of dune sits empty beneath
them before the booking card arrives. Centring the block closes the gap
without touching the photograph. */
@media (max-width: 768px) {
[class*="justify-start"][class*="pt-32"] {
justify-content: center !important;
padding-top: 0 !important;
padding-bottom: 8vh !important;
}
}
/* --- The "Enter" button ---------------------------------------------------
A 96px ring whose arrow is a 1px sliver and whose label is opacity-0 until
hover. On a phone there is no hover, so it reads as an unexplained white
circle. Given a visible label and a smaller, quieter ring. */
@media (max-width: 768px) {
.absolute[class*="bottom-12"] button { width: 62px !important; height: 62px !important; }
.absolute[class*="bottom-12"] button > div[class*="border"] { opacity: .45 !important; }
.absolute[class*="bottom-12"] button span {
opacity: 1 !important;
bottom: -26px !important;
font-size: 8.5px !important;
letter-spacing: 0.42em !important;
white-space: nowrap;
transform: none !important;
color: rgba(212, 175, 55, 0.75) !important;
}
.absolute[class*="bottom-12"] { bottom: 5.5rem !important; }
}
/* --- The hero wording over bright sand ------------------------------------
On the phone the tagline and the rating sit directly on pale dune, and the
gold rating line is close to invisible. A soft scrim behind the text block
only — the photograph elsewhere is untouched. */
@media (max-width: 768px) {
#tin-hero-text {
padding: 14px 16px !important;
gap: 10px !important;
}
#tin-hero-text #tin-tag-a {
font-size: 10px !important;
letter-spacing: 0.3em !important;
text-indent: 0.3em;
}
/* The rules would take all the width on a narrow screen. */
#tin-hero-text span[aria-hidden] { width: clamp(18px, 9vw, 44px) !important; }
}
/* The line is decorative; on very narrow screens the words matter more. */
@media (max-width: 359px) {
#tin-hero-text span[aria-hidden] { display: none !important; }
}
/* --- Nothing should scroll sideways ---------------------------------------
A single overflowing element gives the whole page a horizontal scrollbar.
Using clip rather than hidden on purpose: overflow-x:hidden on html or body
silently kills position:sticky in most browsers, and your story section is
500vh of sticky-pinned chapters. clip contains the overflow without
creating a scroll container, so sticky keeps working. */
html, body { overflow-x: clip; max-width: 100%; }
@supports not (overflow: clip) {
body { overflow-x: hidden; } /* older browsers, body only — html stays free */
}
img, video, iframe, svg { max-width: 100%; }
/* --- Print ----------------------------------------------------------------
Guests print confirmation pages. Black on white, no wasted ink. */
@media print {
body { background: #fff !important; color: #000 !important; }
nav, button, video, .fixed { display: none !important; }
}