@charset "utf-8"; /* ========================================================================== His Clinic - The Ideal Man's Territory -------------------------------------------------------------------------- Compatibility contract (deliberate, do not "modernise"): - no :has(), no container queries, no CSS nesting, no @layer - no color-mix() / oklch() / subgrid / aspect-ratio / inset shorthand - no flexbox `gap` (grid gap only, which has far older support) - RTL handled with the dir attribute plus explicit [dir="rtl"] overrides Targets Samsung Internet 9+ and iOS Safari 12+. ========================================================================== */ /* --------------------------------------------------------------- 1. Tokens */ :root { /* Ground: deep black carrying the brand's navy undertone, never pure #000 (pure black smears on OLED and kills the metallic feel). */ --ink: #0b0e13; --ink-2: #10151d; --panel: #161c26; --panel-2: #1c2330; --steel: #29323f; /* hairlines */ --steel-2: #3d4859; /* hairlines, raised */ --bone: #f2f0ec; /* primary text - warm white, not clinical blue */ --mist: #9aa6b6; /* secondary text - 7.8:1 on --ink */ --copper: #c08a4e; /* the single accent - 6.4:1 on --ink */ --copper-lo: #8a5f2e; --copper-hi: #dcae76; --font-head: 'Jost', 'Trebuchet MS', 'Segoe UI', sans-serif; --font-body: 'Jost', 'Trebuchet MS', 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; --shell: 1200px; --pad: 24px; --t: 220ms cubic-bezier(0.22, 0.61, 0.36, 1); --t-slow: 300ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* Arabic gets its own face for Arabic codepoints; Latin inside an Arabic run falls through to Jost because the Arabic webfont ships Arabic glyphs only. */ [lang="ar"] { --font-head: 'IBM Plex Sans Arabic', 'Jost', 'Segoe UI', 'Tahoma', sans-serif; --font-body: 'IBM Plex Sans Arabic', 'Jost', 'Segoe UI', 'Tahoma', sans-serif; } /* Arabic is a connected script: tracking pulls the joins apart and the mono face has no Arabic coverage at all. So the small-caps label treatment is a Latin-only device — in Arabic the same labels are marked by colour, size and weight instead. Elements whose content is always Latin ("Case 01", "Before") keep the mono treatment and are re-asserted further down. */ [lang="ar"] .eyebrow, [lang="ar"] .trust b, [lang="ar"] .card__cta, [lang="ar"] .branch__city, [lang="ar"] .branch dt, [lang="ar"] .map__ph b, [lang="ar"] .quote footer, [lang="ar"] .ftr h4, [lang="ar"] .book__note, [lang="ar"] .case__meta, [lang="ar"] .reveal__note, [lang="ar"] .ftr__demo { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; text-transform: none; } [lang="ar"] .card__cta, [lang="ar"] .quote footer, [lang="ar"] .case__meta, [lang="ar"] .book__note, [lang="ar"] .ftr__demo { font-weight: 400; } /* ----------------------------------------------------------- 2. Foundation */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; /* No overflow-x:hidden here on purpose. It makes a scroll container, which silently breaks the sticky header. Nothing overflows: the one full-bleed element (the hero portrait) uses negative margins that exactly cancel the shell's padding. */ } [lang="ar"] body, [lang="ar"] .lead, [lang="ar"] p { line-height: 1.95; } img { max-width: 100%; border: 0; } /* The UA gives

a 40px side margin, which would offset every absolutely-positioned comparison overlay. Zero it once, here. */ figure, blockquote { margin: 0; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; margin: 0; letter-spacing: -0.02em; line-height: 1.06; } [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 { font-weight: 600; letter-spacing: 0; line-height: 1.28; } p { margin: 0 0 1em; } /* Always-visible focus ring. Browsers that understand :focus-visible get the refined version below; older ones keep the ring on every focus, which is the safe way to degrade. */ a:focus, button:focus, input:focus, summary:focus { outline: 2px solid var(--copper-hi); outline-offset: 3px; } a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; } .skip { position: absolute; top: -100px; left: 12px; z-index: 200; padding: 12px 20px; background: var(--copper); color: #14100a; font-family: var(--font-mono); font-size: 13px; text-decoration: none; } .skip:focus { top: 12px; } .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------- 3. Layout */ .shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); } /* A single tile of fine grain over the whole page. Large flat dark fields band on cheap panels and read as plastic; a little noise gives them the tooth of printed matter. Static, non-interactive, ~1 KB inline. */ .grain { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; /* over the content, under the sticky header */ pointer-events: none; opacity: 0.05; /* Its own compositor layer, so scrolling never repaints it. */ -webkit-transform: translateZ(0); transform: translateZ(0); background-repeat: repeat; background-size: 160px 160px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } .band { padding: 84px 0; position: relative; } .band--alt { background: var(--ink-2); } .band--tight { padding: 60px 0; } /* A hairline that reads as brushed metal rather than a flat 1px border. */ .rule { height: 1px; border: 0; margin: 0; background-image: linear-gradient(to right, var(--steel), var(--steel-2) 40%, transparent); } [dir="rtl"] .rule { background-image: linear-gradient(to left, var(--steel), var(--steel-2) 40%, transparent); } /* ------------------------------------------------- 4. Section headings */ .eyebrow { display: block; margin: 0 0 18px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--copper); } .eyebrow span { display: inline-block; width: 26px; height: 1px; margin: 0 10px 4px 0; background: var(--copper); vertical-align: middle; } [dir="rtl"] .eyebrow span { margin: 0 0 4px 10px; } .h-section { font-size: 34px; max-width: 20ch; margin: 0 0 18px; } .lead { color: var(--mist); font-size: 17px; font-weight: 300; max-width: 58ch; margin: 0; } [lang="ar"] .lead { font-weight: 400; } .head-row { margin-bottom: 46px; } /* -------------------------------------------------------- 5. Buttons */ .btn { display: inline-block; padding: 15px 28px; border: 1px solid transparent; font-family: var(--font-head); font-size: 15px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t); } [lang="ar"] .btn { font-weight: 600; letter-spacing: 0; } .btn--primary { position: relative; overflow: hidden; background-image: linear-gradient(160deg, var(--copper-hi), var(--copper) 55%, var(--copper-lo)); color: #17110a; box-shadow: 0 10px 30px rgba(192, 138, 78, 0.18); } .btn--primary:hover { background-image: linear-gradient(160deg, #eec392, var(--copper-hi) 55%, var(--copper)); } .btn--primary:active { transform: translateY(1px); } /* A highlight travels across the button the way light crosses polished metal. Transform-only, so it never triggers layout. */ .btn--primary:after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background-image: linear-gradient(100deg, rgba(255, 252, 245, 0) 0%, rgba(255, 252, 245, 0.45) 50%, rgba(255, 252, 245, 0) 100%); -webkit-transform: skewX(-18deg); transform: skewX(-18deg); pointer-events: none; } .js.is-ready .btn--primary:after { -webkit-animation: sheen 5.5s ease-in-out 1.8s infinite; animation: sheen 5.5s ease-in-out 1.8s infinite; } @-webkit-keyframes sheen { 0%, 62% { -webkit-transform: translateX(0) skewX(-18deg); } 86%, 100% { -webkit-transform: translateX(400%) skewX(-18deg); } } @keyframes sheen { 0%, 62% { transform: translateX(0) skewX(-18deg); } 86%, 100% { transform: translateX(400%) skewX(-18deg); } } .btn--ghost { border-color: var(--steel-2); color: var(--bone); background: transparent; } .btn--ghost:hover { border-color: var(--copper); color: var(--copper-hi); } .btn-row { display: grid; grid-template-columns: 1fr; grid-gap: 12px; margin-top: 32px; } /* --------------------------------------------------------- 6. Header */ .hdr { position: -webkit-sticky; position: sticky; top: 0; z-index: 100; background: rgba(11, 14, 19, 0.9); border-bottom: 1px solid var(--steel); transition: background-color var(--t); } /* Progressive enhancement only - plain colour above is the guaranteed floor. */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .hdr { background: rgba(11, 14, 19, 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); } } .hdr__in { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 68px; } .brand { display: block; line-height: 0; text-decoration: none; } /* The mark is a stacked lockup, so it is sized by height - width-first sizing pushes it straight through the header. */ .brand img { height: 42px; width: auto; display: block; } .hdr__spacer { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .nav { display: none; } .nav a { display: inline-block; padding: 8px 14px; font-size: 14.5px; color: var(--mist); text-decoration: none; transition: color var(--t); } .nav a:hover { color: var(--bone); } .hdr__act { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hdr__act > * { margin-left: 8px; } [dir="rtl"] .hdr__act > * { margin-left: 0; margin-right: 8px; } .lang { padding: 8px 13px; background: transparent; border: 1px solid var(--steel-2); color: var(--bone); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; cursor: pointer; transition: border-color var(--t), color var(--t); } .lang:hover { border-color: var(--copper); color: var(--copper-hi); } .hdr .btn { display: none; padding: 11px 20px; font-size: 14px; } /* ----------------------------------------------------------- 7. Hero */ .hero { padding: 56px 0 0; position: relative; overflow: hidden; } .hero__type { position: relative; z-index: 2; } /* Hero entrance: the eyebrow, the two headline lines, the paragraph and the buttons lift in sequence. Opt-in through .js, so with scripting off the hero is simply present. */ .js .hero__type > *, .js .hero h1 > span, .js .hero h1 > em { opacity: 0; -webkit-transform: translateY(14px); transform: translateY(14px); } .js.is-ready .hero__type > *, .js.is-ready .hero h1 > span, .js.is-ready .hero h1 > em { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition: opacity 620ms ease-out, -webkit-transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1); transition: opacity 620ms ease-out, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1); } .js .hero h1 { opacity: 1; -webkit-transform: none; transform: none; } .js.is-ready .hero__type > .eyebrow { -webkit-transition-delay: 60ms; transition-delay: 60ms; } .js.is-ready .hero h1 > span { -webkit-transition-delay: 160ms; transition-delay: 160ms; } .js.is-ready .hero h1 > em { -webkit-transition-delay: 280ms; transition-delay: 280ms; } .js.is-ready .hero__type > .hero__lead { -webkit-transition-delay: 400ms; transition-delay: 400ms; } .js.is-ready .hero__type > .btn-row { -webkit-transition-delay: 500ms; transition-delay: 500ms; } .js.is-ready .hero__type > .hero__tag { -webkit-transition-delay: 600ms; transition-delay: 600ms; } .js .hero__shot { opacity: 0; } .js.is-ready .hero__shot { opacity: 1; -webkit-transition: opacity 900ms ease-out 260ms; transition: opacity 900ms ease-out 260ms; } .hero h1 { font-size: 40px; font-weight: 500; margin: 0 0 22px; letter-spacing: -0.03em; } /* Arabic carries more optical weight per point than Jost does, and the headline is shorter, so it can take a larger setting. */ [lang="ar"] .hero h1 { font-size: 44px; letter-spacing: 0; } .hero h1 em { display: block; font-style: normal; color: var(--copper); } .hero__lead { color: var(--mist); font-size: 17.5px; font-weight: 300; max-width: 46ch; margin: 0; } [lang="ar"] .hero__lead { font-weight: 400; } /* The claim strip: the brand's actual English positioning, set as data. */ .hero__tag { margin: 30px 0 0; padding: 14px 0 0; border-top: 1px solid var(--steel); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); direction: ltr; text-align: left; } /* Hero comparison --------------------------------------------------------- The portraits were lifted off their painted ground and composed onto the page colour, so they need no frame - the shoulders simply dissolve into the section. A copper glow sits behind the head to give the cut-out silhouette something to stand on. */ .hero__shot { position: relative; margin: 36px 0 0; } .hero__shot:before { content: ""; position: absolute; left: 8%; top: 2%; width: 84%; height: 62%; z-index: 0; background-image: radial-gradient(ellipse at 50% 45%, rgba(192, 138, 78, 0.22), rgba(192, 138, 78, 0.06) 45%, rgba(192, 138, 78, 0) 70%); pointer-events: none; } /* The crop ends mid-torso, so fade the last stretch into the section rather than letting it stop on a hard horizontal edge. */ .hero__shot:after { content: ""; position: absolute; left: 0; right: 0; bottom: 26px; height: 26%; z-index: 2; background-image: linear-gradient(to bottom, rgba(11, 14, 19, 0), var(--ink) 88%); pointer-events: none; } .band--alt .hero__shot:after { background-image: linear-gradient(to bottom, rgba(16, 21, 29, 0), var(--ink-2) 88%); } .reveal--hero { position: relative; z-index: 1; margin: 0; } .reveal--hero .reveal__frame { border: 0; background: transparent; } .js .reveal--hero .reveal__frame { background: transparent; } .reveal--hero .reveal__tag { top: 4px; } .hero__shot-cap { position: relative; z-index: 1; margin: 12px 0 0; font-size: 13.5px; color: var(--mist); } /* ------------------------------------------------------ 8. Trust strip */ .trust { border-top: 1px solid var(--steel); border-bottom: 1px solid var(--steel); background: var(--ink-2); } .trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; } .trust li { padding: 22px 0; border-bottom: 1px solid var(--steel); } .trust li:last-child { border-bottom: 0; } .trust b { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper); margin-bottom: 6px; } .trust span { color: var(--mist); font-size: 15.5px; } /* -------------------------------------------------------- 9. Services */ .cards { display: grid; grid-template-columns: 1fr; grid-gap: 1px; background: var(--steel); border: 1px solid var(--steel); } /* Column flex so the "ask" link is pinned to the bottom of every card - the four descriptions are different lengths, especially in English. */ .card { position: relative; padding: 34px 28px 32px; background: var(--panel); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; transition: background-color var(--t); } .card:hover { background: var(--panel-2); } /* Spotlight, after the "Spotlight Card" pattern on 21st.dev. Theirs is a React + Tailwind component, which cannot run here, so this is a port: the pointer position is written to --mx/--my in app.js and a radial wash is painted from it. ::before keeps it underneath the card's own content. */ .card:before, .branch:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; opacity: 0; pointer-events: none; background-image: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(192, 138, 78, 0.17), rgba(192, 138, 78, 0.05) 38%, rgba(192, 138, 78, 0) 62%); transition: opacity var(--t-slow); } .card:hover:before, .branch:hover:before { opacity: 1; } /* Keep the card's own content above the wash. */ .card > *, .branch > * { position: relative; z-index: 1; } /* The copper hairline that grows across the top edge on hover. */ .card:after { content: ""; position: absolute; top: -1px; left: 0; z-index: 2; height: 2px; width: 0; background: var(--copper); transition: width var(--t-slow); } [dir="rtl"] .card:after { left: auto; right: 0; } .card:hover:after { width: 100%; } .card__ico { width: 36px; height: 36px; margin-bottom: 22px; color: var(--copper); display: block; } .card h3 { font-size: 21px; margin: 0 0 10px; } .card p { color: var(--mist); font-size: 15.5px; margin: 0 0 24px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .card__cta { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--steel-2); padding-bottom: 4px; transition: color var(--t), border-color var(--t); } .card__cta:hover { color: var(--copper-hi); border-color: var(--copper); } /* ----------------------------------------- 10. Before / after reveal */ /* Default (no JS): the two frames sit side by side and everything is legible. With JS the after frame is overlaid and clipped by a range input that covers the whole picture, so drag, tap, touch and arrow keys all work without a line of custom pointer code. */ .reveal { margin: 0 0 18px; } .reveal__frame { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2px; background: var(--steel); border: 1px solid var(--steel-2); overflow: hidden; } .reveal__frame img { display: block; width: 100%; height: auto; } .reveal__tag { position: absolute; top: 12px; z-index: 4; padding: 6px 12px; background: rgba(11, 14, 19, 0.82); border: 1px solid var(--steel-2); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); direction: ltr; } .reveal__tag--b { left: 12px; } .reveal__tag--a { right: 12px; color: var(--copper-hi); border-color: var(--copper-lo); } .reveal__range { display: none; } .reveal__note { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); } /* --- enhanced mode ------------------------------------------------------ */ .js .reveal__frame { display: block; grid-gap: 0; background: var(--ink); touch-action: pan-y; /* let the page still scroll vertically */ /* Without these, a press-and-hold on iOS opens the "Save Image" sheet and a drag on desktop selects the picture - both abort the slide. */ -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .js .reveal__frame img { -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; /* the frame owns every gesture */ } /* The "after" frame is the base layer; "before" is overlaid and clipped from the left, so the left of the picture is always the earlier state - the order people expect, in both reading directions. */ .js .reveal__after { display: block; } .js .reveal__before { position: absolute; top: 0; left: 0; bottom: 0; width: 50%; overflow: hidden; z-index: 2; } /* The image ratio matches the frame ratio, so height:100% resolves to exactly the frame width - the clipped half never squashes and no JS width sync is needed. */ /* The clipped layer is narrower than its picture, and an overflowing block is flushed to the *right* in RTL - which slid the "before" frame out of register with the "after" behind it. Pinning it to the left with absolute positioning makes the alignment direction-independent. */ .js .reveal__before picture { display: block; position: absolute; top: 0; left: 0; height: 100%; } .js .reveal__before img { display: block; height: 100%; width: auto; max-width: none; } /* The divider: the same copper hairline, given a machined handle. */ .reveal__bar { display: none; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; z-index: 3; background-image: linear-gradient(to bottom, transparent, var(--copper-hi) 12%, var(--copper-hi) 88%, transparent); pointer-events: none; } .js .reveal__bar { display: block; } /* The handle is the guaranteed drag target: touch-action:none means no browser will ever reinterpret a gesture that starts here as a scroll, so grabbing it works on Safari, Chrome, Firefox and Samsung Internet alike. pointer-events is re-enabled because the bar around it stays inert. */ .reveal__grip { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; touch-action: none; pointer-events: auto; cursor: -webkit-grab; cursor: grab; z-index: 4; border: 1px solid var(--copper-hi); border-radius: 50%; background-color: rgba(11, 14, 19, 0.72); /* knurled edge, the way a watch crown is milled */ background-image: repeating-linear-gradient( to right, rgba(220, 174, 118, 0.55) 0, rgba(220, 174, 118, 0.55) 1px, transparent 1px, transparent 4px); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55); } .reveal__grip:before, .reveal__grip:after { content: ""; position: absolute; top: 50%; margin-top: -5px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .reveal__grip:before { left: 12px; border-right: 7px solid var(--copper-hi); } .reveal__grip:after { right: 12px; border-left: 7px solid var(--copper-hi); } .reveal__frame.is-grabbed .reveal__grip { cursor: -webkit-grabbing; cursor: grabbing; } /* The native input stays in the DOM as the accessible control - it is what arrow keys move and what a screen reader announces - but pointer and touch input is handled in app.js, so the input must not swallow those events. pointer-events:none still leaves it reachable by Tab. */ .js .reveal__range { display: block; position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent; } .js .reveal__frame { cursor: ew-resize; } /* While the divider is held, the handle grows slightly and the glow lifts - the only feedback that the control is live on a touchscreen. */ .reveal__grip { -webkit-transition: -webkit-transform var(--t), box-shadow var(--t); transition: transform var(--t), box-shadow var(--t); } .reveal__frame.is-grabbed .reveal__grip { -webkit-transform: scale(1.12); transform: scale(1.12); box-shadow: 0 0 0 6px rgba(192, 138, 78, 0.16), 0 6px 22px rgba(0, 0, 0, 0.6); } .reveal__range:focus + .reveal__bar .reveal__grip { box-shadow: 0 0 0 3px rgba(220, 174, 118, 0.5), 0 4px 18px rgba(0, 0, 0, 0.55); } .cases { display: grid; grid-template-columns: 1fr; grid-gap: 26px; margin-top: 30px; } .case__meta { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); } /* Always-Latin fragments keep the mono/tracked treatment in either language. */ .case__meta b, [lang="ar"] .case__meta b, [lang="ar"] .case__meta .ltr { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.14em; } .case__meta b { color: var(--copper); } .case__meta .ltr { direction: ltr; unicode-bidi: embed; } .disclaimer { margin: 34px 0 0; padding: 16px 20px; border: 1px solid var(--steel); background: var(--ink-2); color: var(--mist); font-size: 14px; } /* ------------------------------------------------------- 11. Why us */ .why { display: grid; grid-template-columns: 1fr; grid-gap: 1px; background: var(--steel); border-top: 1px solid var(--steel); border-bottom: 1px solid var(--steel); } .why__item { padding: 32px 0; background: var(--ink); } .band--alt .why__item { background: var(--ink-2); } .why__n { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; color: var(--copper); margin-bottom: 14px; } .why__item h3 { font-size: 19px; margin: 0 0 8px; } .why__item p { color: var(--mist); font-size: 15.5px; margin: 0; } /* ------------------------------------------------------ 12. Branches */ .branches { display: grid; grid-template-columns: 1fr; grid-gap: 26px; } .branch { border: 1px solid var(--steel); background: var(--panel); } .branch__body { padding: 28px; } .branch h3 { font-size: 22px; margin: 0 0 6px; } .branch__city { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper); display: block; margin-bottom: 16px; } .branch dl { margin: 0 0 22px; font-size: 15px; } .branch dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); margin-bottom: 3px; } .branch dd { margin: 0 0 14px; color: var(--bone); } .branch dd a { text-decoration: none; border-bottom: 1px solid var(--steel-2); } .branch dd a:hover { color: var(--copper-hi); } /* Click-to-load map: nothing contacts Google until the visitor asks. */ .map { position: relative; border-top: 1px solid var(--steel); background: var(--ink-2); } .map__ph { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: center; font-family: inherit; } .map__inner { padding: 34px 20px; } .map__ph svg { width: 26px; height: 26px; color: var(--copper); display: block; margin: 0 auto 12px; } .map__ph b { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone); margin-bottom: 6px; } .map__ph small { color: var(--mist); font-size: 12.5px; } .map__ph:hover b { color: var(--copper-hi); } .map__box { position: relative; height: 0; padding-bottom: 62%; } .map__box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; } /* --------------------------------------------------- 13. Testimonials */ .quotes { display: grid; grid-template-columns: 1fr; grid-gap: 22px; } .quote { position: relative; padding: 30px 28px; background: var(--panel); border: 1px solid var(--steel); } .quote:before { content: ""; position: absolute; top: -1px; left: 28px; width: 34px; height: 2px; background: var(--copper); } [dir="rtl"] .quote:before { left: auto; right: 28px; } .quote p { font-size: 17px; font-weight: 300; color: var(--bone); margin: 0 0 18px; } [lang="ar"] .quote p { font-weight: 400; } .quote footer { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); } /* -------------------------------------------------------- 14. Booking */ .book { border: 1px solid var(--steel-2); background-color: var(--panel); background-image: linear-gradient(150deg, rgba(192, 138, 78, 0.1), rgba(192, 138, 78, 0) 55%); padding: 42px 28px; } .book h2 { font-size: 30px; margin: 0 0 14px; max-width: 18ch; } .book p { color: var(--mist); margin: 0; max-width: 46ch; } .book__note { margin-top: 26px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); } /* --------------------------------------------------------- 15. Footer */ .ftr { border-top: 1px solid var(--steel); background: var(--ink-2); padding: 56px 0 28px; } .ftr__grid { display: grid; grid-template-columns: 1fr; grid-gap: 34px; } .ftr h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper); margin: 0 0 14px; } .ftr ul { list-style: none; margin: 0; padding: 0; } .ftr li { margin-bottom: 9px; color: var(--mist); font-size: 15px; } .ftr a { color: var(--mist); text-decoration: none; transition: color var(--t); } .ftr a:hover { color: var(--copper-hi); } .ftr img { width: 118px; height: auto; display: block; margin-bottom: 16px; } .social a { display: inline-block; width: 40px; height: 40px; margin: 0 8px 0 0; border: 1px solid var(--steel-2); transition: border-color var(--t), color var(--t); } [dir="rtl"] .social a { margin: 0 0 0 8px; } .social a:hover { border-color: var(--copper); color: var(--copper-hi); } .social svg { width: 18px; height: 18px; display: block; margin: 10px auto; } .ftr__base { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--steel); font-size: 13px; color: var(--mist); } .ftr__demo { display: inline-block; margin-top: 8px; padding: 4px 10px; border: 1px solid var(--steel-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; } /* ------------------------------------------- 16. Scroll-in transitions */ /* Opt-in only: without JS nothing is hidden, so the page can never render blank if a script fails. */ .js .rise { opacity: 0; -webkit-transform: translateY(18px); transform: translateY(18px); -webkit-transition: opacity 420ms ease-out, -webkit-transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1); transition: opacity 420ms ease-out, transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1); } .js .rise.is-in { opacity: 1; -webkit-transform: none; transform: none; } /* ------------------------------------------------------ 17. Responsive */ @media (min-width: 600px) { .btn-row { grid-template-columns: auto auto; -webkit-box-pack: start; justify-content: start; } .trust ul { grid-template-columns: 1fr 1fr 1fr; grid-gap: 1px; background: var(--steel); } .trust li { padding: 26px 22px; border-bottom: 0; background: var(--ink-2); } .cards { grid-template-columns: 1fr 1fr; } .why { grid-template-columns: 1fr 1fr; } .why__item { padding: 32px 26px; } .quotes { grid-template-columns: 1fr 1fr; } .hero h1 { font-size: 54px; } [lang="ar"] .hero h1 { font-size: 60px; } .h-section { font-size: 40px; } [lang="ar"] .h-section { font-size: 42px; } .book { padding: 56px 48px; } .book h2 { font-size: 38px; } .ftr__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { :root { --pad: 40px; } .band { padding: 118px 0; } .band--tight { padding: 74px 0; } .nav { display: block; } .hdr .btn { display: inline-block; } .brand img { height: 50px; } .hero { padding: 0; } /* The portrait sits on the section's bottom edge rather than floating in the middle of a dark field, and its lower gradient dissolves into the strip below. */ .hero__in { display: grid; grid-template-columns: 1.02fr 0.98fr; grid-gap: 56px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 620px; padding: 60px 0; } .hero__shot { margin: 0; } .hero h1 { font-size: 62px; } [lang="ar"] .hero h1 { font-size: 72px; } .h-section { font-size: 44px; } [lang="ar"] .h-section { font-size: 50px; } .cards { grid-template-columns: 1fr 1fr 1fr 1fr; } .why { grid-template-columns: 1fr 1fr 1fr; } .quotes { grid-template-columns: 1fr 1fr 1fr; } .branches { grid-template-columns: 1fr 1fr; } .cases { grid-template-columns: 1fr 1fr 1fr; } .head-row { display: grid; grid-template-columns: 1.1fr 1fr; grid-gap: 48px; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .book { padding: 72px 64px; } } @media (min-width: 1100px) { .hero h1 { font-size: 70px; } [lang="ar"] .hero h1 { font-size: 84px; } } /* --------------------------------------------------- 18. Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *:before, *:after { -webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important; -webkit-transition-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .js .rise { opacity: 1; -webkit-transform: none; transform: none; } .js .hero__art-line { stroke-dashoffset: 0; } .js .hero__art-grafts, .js .hero__art-guides { opacity: 1; } } /* ------------------------------------------------------------ 19. Print */ @media print { .hdr, .reveal__range, .reveal__bar, .map { display: none; } body { background: #fff; color: #000; } }