/* ========================================================================== Rand Hair Style — home hair styling in Amman Arabic-first (RTL) with an English mode toggled via [data-lang] on . ========================================================================== */ :root{ --bg:#FBF6F2; --bg-alt:#EFDDD1; --surface:#FFFFFF; --ink:#2B211E; --ink-2:#6E5B52; --line:#E2CEC0; --accent:#7A3B4E; --accent-ink:#7A3B4E; --accent-soft:#F5E3E7; --brass:#A8874F; --wa:#1F7A4C; --shadow:rgba(43,33,30,.5); --f-display:"El Messiri","Tajawal",Georgia,serif; --f-display-en:"Cormorant Garamond",Georgia,serif; --f-body:"Tajawal","Segoe UI",system-ui,sans-serif; --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem; --s5:3.25rem; --wrap:1080px; --r:14px; color-scheme:light dark; } /* Dark palette: once for the system preference, once for an explicit choice, so the toggle can win in both directions. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#171210; --bg-alt:#201917; --surface:#241C19; --ink:#F2E9E3; --ink-2:#B6A197; --line:#3B2E29; --accent:#E29FAF; --accent-ink:#E29FAF; --accent-soft:#3A2229; --brass:#CFAE70; --wa:#54C08A; --shadow:rgba(0,0,0,.7); } } :root[data-theme="dark"]{ --bg:#171210; --bg-alt:#201917; --surface:#241C19; --ink:#F2E9E3; --ink-2:#B6A197; --line:#3B2E29; --accent:#E29FAF; --accent-ink:#E29FAF; --accent-soft:#3A2229; --brass:#CFAE70; --wa:#54C08A; --shadow:rgba(0,0,0,.7); } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-weight:400; font-size:17px; line-height:1.85; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto} svg{display:block} .sprite{position:absolute} a{color:inherit;text-decoration:none} button{font:inherit} [hidden]{display:none!important} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px} .skip{ position:absolute;inset-inline-start:-9999px;top:0;z-index:100; background:var(--accent);color:#fff; padding:12px 20px;border-radius:0 0 var(--r) var(--r); font-weight:700;font-size:.9rem; } .skip:focus{inset-inline-start:20px} .sr-only{ position:absolute;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0; } /* ---------- english mode ---------- */ [data-lang="en"] h1, [data-lang="en"] h2, [data-lang="en"] .rev q, [data-lang="en"] .cover-card b{font-family:var(--f-display-en);font-weight:600} [data-lang="en"] h1{line-height:1.15} [data-lang="en"] h2, [data-lang="en"] .cover-card b{line-height:1.25} [data-lang="en"] .rev q{font-style:italic;font-weight:400} [data-lang="en"] .lede, [data-lang="en"] .head p{line-height:1.65} /* ---------- header ---------- */ header.bar{ position:sticky;top:0;z-index:40; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .bar-in{ display:flex;align-items:center;justify-content:space-between;gap:var(--s2); padding-block:12px; } .mark{padding-block:6px;display:block} .mark img{display:block;height:34px;width:auto} @media(min-width:700px){.mark img{height:42px}} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mark img{filter:invert(1)}} :root[data-theme="dark"] .mark img{filter:invert(1)} nav.links{display:none;gap:var(--s3);font-size:.9rem;font-weight:500;color:var(--ink-2)} nav.links a:hover{color:var(--accent-ink)} @media(min-width:900px){nav.links{display:flex}} .bar-end{display:flex;align-items:center;gap:var(--s1)} .lang{ border:1px solid var(--line);background:transparent;color:var(--ink-2); font-family:var(--f-body);font-weight:700;font-size:.75rem;letter-spacing:.06em; border-radius:999px;padding:8px 13px;cursor:pointer;line-height:1; transition:border-color .18s ease,color .18s ease; } .lang:hover{border-color:var(--accent);color:var(--accent-ink)} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--f-body);font-weight:700;font-size:.95rem; padding:13px 22px;border-radius:999px;border:1px solid transparent; cursor:pointer;transition:transform .18s ease,box-shadow .18s ease; } .btn svg{width:19px;height:19px;flex:none} .btn-wa{background:var(--wa);color:#fff;box-shadow:0 6px 18px -8px var(--wa)} :root[data-theme="dark"] .btn-wa{color:#0E1A14} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-wa{color:#0E1A14}} .btn-wa:hover{transform:translateY(-2px)} .btn-ghost{border-color:var(--line);color:var(--ink);background:transparent} .btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)} .btn-sm{padding:9px 15px;font-size:.85rem} /* ---------- hero ---------- */ .hero{padding-block:var(--s5) var(--s4)} .hero-grid{display:grid;gap:var(--s4);align-items:center} @media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--s5)}} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.72rem;font-weight:700;letter-spacing:.18em; color:var(--brass);margin:0 0 var(--s2); } .eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);flex:none} h1{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.2rem,8.5vw,3.5rem); line-height:1.5; margin:0 0 var(--s2); text-wrap:balance; } h1 em{font-style:normal;color:var(--accent-ink)} .lede{font-size:1.06rem;color:var(--ink-2);max-width:34em;margin:0 0 var(--s3);font-weight:300} .hero-cta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2)} /* ---------- photography ---------- */ .shot{ display:block;width:100%;max-width:100%;height:auto; border-radius:var(--r); background:var(--bg-alt); object-fit:cover; aspect-ratio:3/4; } .hero-shot{aspect-ratio:4/5;box-shadow:0 24px 50px -30px var(--shadow)} @media(min-width:900px){.hero-shot{aspect-ratio:3/4}} /* ---------- trust strip ---------- */ .strip{border-block:1px solid var(--line);background:var(--bg-alt)} .strip-in{display:grid;gap:var(--s3);padding-block:var(--s3)} @media(min-width:760px){.strip-in{grid-template-columns:repeat(3,1fr);gap:var(--s4)}} .fact{display:flex;gap:12px;align-items:flex-start} .fact svg{width:22px;height:22px;color:var(--accent-ink);flex:none;margin-top:5px} .fact b{display:block;font-weight:700;font-size:.98rem} .fact p{margin:2px 0 0;font-size:.88rem;color:var(--ink-2);line-height:1.6} /* ---------- sections ---------- */ section{padding-block:var(--s5)} .head{margin-bottom:var(--s4);max-width:38em} h2{ font-family:var(--f-display);font-weight:600; font-size:clamp(1.7rem,5.2vw,2.3rem); line-height:1.5;margin:0 0 8px;text-wrap:balance; } .head p{margin:0;color:var(--ink-2);font-weight:300;font-size:1rem} /* ---------- services ---------- */ .svc-group + .svc-group{margin-top:var(--s4)} .svc-title{ display:flex;align-items:center;gap:12px; font-size:.74rem;font-weight:700;letter-spacing:.18em;color:var(--brass); margin:0 0 var(--s2); } .svc-title::after{content:"";flex:1;height:1px;background:var(--line)} .svc-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} @media(min-width:700px){.svc-list{grid-template-columns:1fr 1fr}} .svc{ background:var(--surface); padding:18px 20px; display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2); } .svc b{font-weight:500;font-size:1.02rem} .svc span{ font-size:.95rem;font-weight:700;color:var(--accent-ink); font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap; } .note{ margin:var(--s3) 0 0; display:flex;gap:11px;align-items:flex-start; font-size:.9rem;color:var(--ink-2); background:var(--accent-soft); border-radius:var(--r); padding:15px 18px; } .note svg{width:19px;height:19px;color:var(--accent-ink);flex:none;margin-top:5px} /* ---------- gallery ---------- */ .gal{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(min-width:760px){.gal{grid-template-columns:repeat(4,1fr);gap:14px}} .tile{ margin:0;padding:0;border:0;background:none; position:relative;overflow:hidden;border-radius:var(--r); cursor:zoom-in;display:block;width:100%; color:inherit;text-align:inherit; } .tile .shot{border-radius:0;transition:transform .4s ease} .tile:hover .shot{transform:scale(1.04)} .tile .cap{ position:absolute;inset-inline:0;bottom:0; padding:26px 14px 11px; font-size:.78rem;font-weight:500;color:#fff; background:linear-gradient(to top,rgba(20,12,10,.72),transparent); text-align:start; pointer-events:none; } /* ---------- lightbox ---------- */ dialog.lightbox{ border:0;padding:0;background:transparent; max-width:min(92vw,560px);max-height:92dvh; margin:auto;overflow:visible; color:var(--ink); } dialog.lightbox::backdrop{background:rgba(20,12,10,.86);backdrop-filter:blur(3px)} .lightbox-figure{margin:0;position:relative} .lightbox-figure img{ display:block;width:100%;height:auto; max-height:80dvh;object-fit:contain; border-radius:var(--r);background:var(--bg-alt); } .lightbox-figure figcaption{ margin-top:10px;text-align:center; font-size:.88rem;color:#F2E9E3; } .lightbox-close{ position:absolute;top:10px;inset-inline-end:10px; width:38px;height:38px;border-radius:50%; border:0;cursor:pointer; background:rgba(20,12,10,.6);color:#fff; display:grid;place-items:center;font-size:1.1rem;line-height:1; } .lightbox-close:hover{background:rgba(20,12,10,.85)} /* ---------- steps ---------- */ .steps{display:grid;gap:var(--s3)} @media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:var(--s4)}} .step{display:flex;gap:14px;align-items:flex-start} .step-n{ flex:none;width:34px;height:34px;border-radius:50%; border:1px solid var(--accent);color:var(--accent-ink); display:grid;place-items:center;font-weight:700;font-size:.9rem; font-variant-numeric:tabular-nums; } .step b{display:block;font-weight:700;margin-bottom:2px} .step p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.65} /* ---------- testimonials ---------- */ .revs{display:grid;gap:var(--s3)} @media(min-width:760px){.revs{grid-template-columns:repeat(2,1fr)}} .rev{ background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:22px 22px 18px; display:flex;flex-direction:column;gap:14px; } .rev q{ font-family:var(--f-display);font-size:1.05rem;line-height:1.95; quotes:"»" "«";display:block; } .rev footer{ display:flex;align-items:center;gap:10px;margin-top:auto; font-size:.84rem;color:var(--ink-2); } .av{ width:32px;height:32px;border-radius:50%;flex:none; background:var(--accent-soft);color:var(--accent-ink); display:grid;place-items:center;font-weight:700;font-size:.82rem; font-family:var(--f-body); } /* ---------- coverage ---------- */ .cover{display:grid;gap:var(--s4)} @media(min-width:820px){.cover{grid-template-columns:1.15fr 1fr;gap:var(--s5)}} .cover-card{ background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:26px; display:flex;flex-direction:column;gap:12px; } .cover-card svg{width:26px;height:26px;color:var(--accent-ink)} .cover-card b{ font-family:var(--f-display);font-weight:600; font-size:clamp(1.35rem,4.5vw,1.8rem);line-height:1.4; } .cover-card p{margin:0;color:var(--ink-2);font-size:.94rem} .hours{ background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:22px 26px; } .hours h3{ font-family:var(--f-body);font-size:.74rem;font-weight:700; letter-spacing:.18em;color:var(--brass);margin:0 0 var(--s2); } .hrow{ display:flex;justify-content:space-between;gap:var(--s2); padding-block:11px;font-size:.94rem; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; } .hrow:last-child{border-bottom:0;padding-bottom:0} .hrow span{color:var(--ink-2)} .hrow b{text-align:end;font-weight:700} /* ---------- areas served ---------- */ .areas{margin-top:var(--s4)} .areas h3{ font-family:var(--f-body);font-size:.74rem;font-weight:700; letter-spacing:.18em;color:var(--brass);margin:0 0 var(--s2); } .area-list{ display:flex;flex-wrap:wrap;gap:8px; list-style:none;margin:0;padding:0; } .area-list li{ font-size:.85rem;color:var(--ink-2); border:1px solid var(--line);border-radius:999px; padding:5px 13px;background:var(--surface); } .area-note{margin:var(--s2) 0 0;font-size:.86rem;color:var(--ink-2)} /* ---------- faq ---------- */ .faq{ display:grid;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r);overflow:hidden; } .faq details{background:var(--surface)} .faq summary{ padding:16px 20px;cursor:pointer; font-weight:500;font-size:1rem; display:flex;align-items:center;justify-content:space-between;gap:var(--s2); list-style:none; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";flex:none; color:var(--accent-ink);font-weight:700;font-size:1.25rem;line-height:1; } .faq details[open] summary::after{content:"\2212"} .faq summary:hover{color:var(--accent-ink)} .faq p{ margin:0;padding:0 20px 18px; color:var(--ink-2);font-size:.94rem;line-height:1.75; } /* ---------- closing ---------- */ .close{background:var(--bg-alt);border-top:1px solid var(--line)} .close-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s3)} .close h2{margin-bottom:0} .close p{margin:0;color:var(--ink-2);max-width:32em;font-weight:300} .socials{display:flex;gap:var(--s2);align-items:center;justify-content:center;flex-wrap:wrap} .soc{ display:inline-flex;align-items:center;gap:8px; border:1px solid var(--line);border-radius:999px; padding:10px 18px;font-size:.9rem;font-weight:500;background:var(--surface); transition:border-color .18s ease,color .18s ease; } .soc:hover{border-color:var(--accent);color:var(--accent-ink)} .soc svg{width:18px;height:18px;color:var(--accent-ink);flex:none} .soc span{font-variant-numeric:tabular-nums;direction:ltr} footer.foot{ border-top:1px solid var(--line); padding-block:var(--s3) 110px; font-size:.8rem;color:var(--ink-2); display:flex;flex-wrap:wrap;gap:8px var(--s3); justify-content:space-between;align-items:center; } @media(min-width:760px){footer.foot{padding-bottom:var(--s3)}} /* ---------- 404 page ---------- */ .oops{ min-height:100dvh; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--s3);text-align:center;padding-block:var(--s5); } .oops img{height:46px;width:auto;margin-bottom:var(--s2)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .oops img{filter:invert(1)}} .oops h1{font-size:clamp(1.8rem,6vw,2.6rem);margin:0} .oops p{margin:0;color:var(--ink-2);max-width:30em;font-weight:300} /* ---------- mobile sticky cta ---------- */ .dock{ position:fixed;inset-inline:0;bottom:0;z-index:50; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(14px); border-top:1px solid var(--line); } .dock .btn{width:100%} @media(min-width:760px){.dock{display:none}} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }