/* * refined.css — Editorial Polish Layer * Dune Buggy Dubai Rides * * Scoped entirely under .dbr-refined (set on ) so it elevates the * content + legal pages without touching index.html or the service pages. * Built strictly on the brand kit: Desert Night canvas, Ignition Orange * primary, Dune Gold supporting accent, Bebas / Barlow Condensed / Barlow. * Goal: generous whitespace, asymmetric editorial detailing, restrained * accents — premium, not busy. */ /* ─────────────────────────────────────────────── 1 · SECTION RHYTHM More air between sections; a faint top hairline so stacked sections read as deliberate, not dumped. ─────────────────────────────────────────────── */ .dbr-refined .section { padding: clamp(56px, 7vw, 104px) 0; } .dbr-refined .container--narrow { max-width: 820px; } /* ─────────────────────────────────────────────── 2 · HERO HEADINGS The two-part H1: orange eyebrow keyword + Bebas brand. Add a centred hairline under the keyword and a soft glow + balance to the brand line. ─────────────────────────────────────────────── */ .dbr-refined .hero-h1 { position: relative; } .dbr-refined .hero-h1__keyword { letter-spacing: 0.22em; margin-bottom: 18px; } .dbr-refined .hero-h1__keyword::after { content: ""; display: block; width: 52px; height: 2px; margin: 14px auto 0; background: linear-gradient(90deg, var(--color-ignition-orange), var(--color-dune-gold)); } .dbr-refined .hero-h1__brand { text-wrap: balance; text-shadow: 0 0 48px rgba(232, 84, 26, 0.18); } /* Left-aligned legal-page heroes (where the brand line is a custom size). Scoped to :not(.text-center) so genuinely centred heroes (Contact) keep their alignment. */ .dbr-refined .container--narrow:not(.text-center) > .hero-h1 { text-align: left; } .dbr-refined .container--narrow:not(.text-center) > .hero-h1 .hero-h1__keyword::after { margin-left: 0; margin-right: auto; } /* ─────────────────────────────────────────────── 3 · SECTION TITLES A short accent rule beneath centred section titles — a consistent editorial signature across the pages. ─────────────────────────────────────────────── */ .dbr-refined .section h2.h2--center { position: relative; padding-bottom: 24px; } .dbr-refined .section h2.h2--center::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 3px; border-radius: 2px; background: var(--color-ignition-orange); } .dbr-refined .sub-headline--center { color: var(--color-muted-text); max-width: 680px; } /* ─────────────────────────────────────────────── 4 · LEGAL SECTIONS The biggest lift: turn flat numbered blocks into refined panels with a ghost numeral watermark, a gold-tipped heading rule and a quiet hover. (Terms · Privacy · Cancellation) ─────────────────────────────────────────────── */ .dbr-refined .legal-section { position: relative; margin-bottom: 22px; padding: 34px 38px; border-radius: 8px; border: 1px solid rgba(240, 237, 230, 0.07); border-left: 2px solid var(--color-ignition-orange); background: radial-gradient(120% 140% at 100% 0%, rgba(232, 84, 26, 0.05) 0%, transparent 46%), linear-gradient(180deg, rgba(42, 40, 32, 0.55) 0%, rgba(20, 19, 15, 0.55) 100%); overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease, border-left-color 0.35s ease; } .dbr-refined .legal-section:hover { transform: translateY(-3px); border-left-color: var(--color-dune-gold); box-shadow: 0 16px 48px rgba(8, 5, 0, 0.5); } .dbr-refined .legal-section__number { position: absolute; top: 14px; right: 26px; margin: 0; font-size: 72px; line-height: 1; color: rgba(232, 84, 26, 0.13); letter-spacing: 0.02em; pointer-events: none; user-select: none; } .dbr-refined .legal-section h2 { position: relative; padding-bottom: 14px; margin-bottom: 18px; letter-spacing: 0.03em; } .dbr-refined .legal-section h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 2px; background: var(--color-dune-gold); } .dbr-refined .legal-section ul li { padding: 7px 0 7px 26px; } .dbr-refined .legal-section ul li::before { content: "—"; color: var(--color-ignition-orange); font-weight: 600; } .dbr-refined .legal-section strong { color: var(--color-sand-dust); font-weight: 600; } .dbr-refined .legal-section a { color: var(--color-ignition-orange); text-decoration: none; border-bottom: 1px solid rgba(232, 84, 26, 0.35); transition: border-color 0.25s ease, color 0.25s ease; } .dbr-refined .legal-section a:hover { color: var(--color-dune-gold); border-bottom-color: var(--color-dune-gold); } /* Nested cards inside a legal section (Privacy “Your Rights”) sit on the panel, so give them their own quiet surface that reads above it. */ .dbr-refined .legal-section .card { background: rgba(10, 10, 8, 0.4); border: 1px solid rgba(240, 237, 230, 0.06); transition: transform 0.3s ease, border-color 0.3s ease; } .dbr-refined .legal-section .card:hover { transform: translateY(-2px); border-color: rgba(232, 84, 26, 0.35); box-shadow: none; } /* ─────────────────────────────────────────────── 5 · CARDS Subtle vertical gradient + hairline so the charcoal panels feel sculpted rather than flat fills. ─────────────────────────────────────────────── */ .dbr-refined .card { background: linear-gradient(180deg, #2A2820 0%, #201E18 100%); border: 1px solid rgba(240, 237, 230, 0.06); } .dbr-refined .card--accent-top { border-top: 3px solid var(--color-ignition-orange); } .dbr-refined .card--accent-left { border-top: 1px solid rgba(240, 237, 230, 0.06); border-left: 2px solid var(--color-ignition-orange); } .dbr-refined .card__eyebrow { letter-spacing: 0.16em; } /* ─────────────────────────────────────────────── 6 · AGGREGATE RATING Let the big Bebas score glow against the dark. ─────────────────────────────────────────────── */ .dbr-refined .aggregate-rating__score { text-shadow: 0 0 44px rgba(232, 84, 26, 0.4); } .dbr-refined .aggregate-rating__google { letter-spacing: 0.12em; } /* ─────────────────────────────────────────────── 7 · REVIEW CARDS (Reviews page) Top accent rule + lift on hover. ─────────────────────────────────────────────── */ .dbr-refined .review-card { background: linear-gradient(180deg, #2A2820 0%, #201E18 100%); border: 1px solid rgba(240, 237, 230, 0.06); border-top: 2px solid rgba(232, 84, 26, 0.45); transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease; } .dbr-refined .review-card:hover { transform: translateY(-3px); border-top-color: var(--color-ignition-orange); box-shadow: 0 14px 44px rgba(8, 5, 0, 0.55); } .dbr-refined .filter-pill { letter-spacing: 0.08em; } /* ─────────────────────────────────────────────── 8 · TEAM CARDS (About page) ─────────────────────────────────────────────── */ .dbr-refined .team-card { background: linear-gradient(180deg, #2A2820 0%, #201E18 100%); border: 1px solid rgba(240, 237, 230, 0.06); } .dbr-refined .team-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(8, 5, 0, 0.5); border-color: rgba(232, 84, 26, 0.3); } .dbr-refined .team-card__portrait { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(232, 84, 26, 0.18); } /* ─────────────────────────────────────────────── 9 · STAT STRIP (About “By the numbers”) ─────────────────────────────────────────────── */ .dbr-refined .stat-strip__number { text-shadow: 0 0 36px rgba(232, 84, 26, 0.28); } /* ─────────────────────────────────────────────── 10 · PROSE — editorial drop cap on the opening story (About · “Why we built this”) ─────────────────────────────────────────────── */ .dbr-refined #how-we-started .prose > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-size: 64px; line-height: 0.78; padding: 4px 12px 0 0; color: var(--color-ignition-orange); } /* ─────────────────────────────────────────────── 11 · TIMELINE (Cancellation hero) ─────────────────────────────────────────────── */ .dbr-refined .timeline__outcome { color: var(--color-sand-dust); font-weight: 500; } .dbr-refined .timeline__dot { box-shadow: 0 0 0 4px var(--bg-primary), 0 0 0 6px var(--color-ignition-orange), 0 0 18px rgba(232, 84, 26, 0.5); } /* ─────────────────────────────────────────────── 12 · DIVIDER — gradient hairline, not a flat bar ─────────────────────────────────────────────── */ .dbr-refined .divider { width: 72px; height: 2px; background: linear-gradient(90deg, transparent, var(--color-ignition-orange), transparent); } /* ─────────────────────────────────────────────── 13 · MAP / PLACEHOLDER FRAMES Give the empty map + media placeholders a crafted frame so they read as intentional, not unfinished. ─────────────────────────────────────────────── */ .dbr-refined .map-placeholder, .dbr-refined .placeholder { border: 1px solid rgba(240, 237, 230, 0.07); background: radial-gradient(ellipse at 25% 75%, rgba(232, 84, 26, 0.07) 0%, transparent 55%), linear-gradient(160deg, #221F19 0%, #15140F 100%); } /* ─────────────────────────────────────────────── 14 · SOCIAL ROW (Contact) ─────────────────────────────────────────────── */ .dbr-refined .social-row__icon { padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; } .dbr-refined .social-row__icon:hover { border-bottom-color: var(--color-ignition-orange); } /* ─────────────────────────────────────────────── 15 · MOBILE ─────────────────────────────────────────────── */ @media (max-width: 600px) { .dbr-refined .legal-section { padding: 26px 22px; } .dbr-refined .legal-section__number { font-size: 54px; top: 12px; right: 18px; } }