@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700&family=Frank+Ruhl+Libre:wght@500;700&display=swap");
/* ==========================================================================
Rotem Place — קליניקת קוסמטיקה, סירקין 5 גבעתיים
Design tokens + base + components. Hebrew / RTL / mobile-first.
Requires in the HTML:
For better performance, replace the @import above with, in :
========================================================================== */
/* ==========================================================================
1. TOKENS — LIGHT (complete palette on bare :root)
========================================================================== */
:root {
color-scheme: light dark;
/* --- colour ------------------------------------------------------------ */
/* Ratios below are computed, not estimated. */
--bg: #F7F2EE; /* warm ivory, taken from the logo field */
--surface: #FFFFFF; /* raised panels */
--ink: #241C17; /* 15.07:1 on --bg */
--ink-muted: #6B5B4E; /* 5.85:1 on --bg */
--accent: #8A6220; /* antique gold 4.91:1 on --bg, 5.46:1 on --surface */
--accent-wash: #F3E9DC; /* warm wash — --ink on it is 13.96:1 */
--line: #E4D9CD; /* hairline */
--line-strong: #A9998A; /* meaningful boundary */
--on-ink: #F7F2EE; /* label on an --ink surface — 15.07:1 */
--scrim: rgba(36, 28, 23, .78);
/* --- the plate ----------------------------------------------------------
A mounted object that carries its own light in BOTH themes, so it is
declared once here and never overridden below. Two of Rotem's own assets
require it: the studio portrait is shot on a white ground, and logo.png
is a transparent PNG whose script wordmark is black — on a near-black
page both would break. Mounting them reads as a lit frame on a dark
wall, which is truer to a clinic than a knocked-out cut-out. */
--plate: #EFE6DC;
--on-plate: #2A2119; /* 12.80:1 on --plate */
--plate-line: #8A6220; /* 4.42:1 on --plate — the inner mount hairline */
--brand-plate: transparent; /* light theme needs no mount for the logo */
--brand-pad: 0;
--font-display: "Frank Ruhl Libre", "David Libre", "Narkisim", "Times New Roman", serif;
--font-body: "Assistant", "Heebo", "Arial Hebrew", "Segoe UI", Arial, sans-serif;
/* Frank Ruhl Libre carries the personality here, so it is set large and at
700 — the 500 weight it used to run at was the reason the page read as a
well-set document rather than a place. Two display tiers, not one:
--t-h2 opens a section, --t-h2-sub titles a group inside one. */
--t-display: clamp(2.3rem, 7.6vw, 3.75rem);
--t-h2: clamp(1.7rem, 4.6vw, 2.5rem);
--t-h2-sub: clamp(1.3rem, 3vw, 1.75rem);
--t-h3: 1.1875rem;
--t-lead: 1.0625rem;
--t-body: 1rem;
--t-small: .875rem;
--t-label: .6875rem;
--t-num: .9375rem;
--lh-display: 1.07;
--lh-h2: 1.15;
--lh-h3: 1.35;
--lh-lead: 1.75;
--lh-body: 1.80;
--lh-small: 1.65;
--ls-display: -.028em;
--ls-h2: -.020em;
--ls-label: .14em;
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
/* --- layout ------------------------------------------------------------- */
--gutter: 20px;
--measure: 34rem;
--measure-wide: 46rem;
--shell: 72rem;
--section-y: var(--s7);
--radius: 2px;
--radius-frame: 5px;
/* measured, not guessed: 48px button + 10px + (10px + safe-area) + 1px rule */
--dock-h: 70px;
/* Every rule on the page: a solid gold run at the right-hand end (where
RTL reading starts), hairline for the remainder, a hard stop between
them. Two solid segments, never a gradient wash. */
--rule-gold: 4.5rem;
--rule-fill: linear-gradient(to left,
var(--accent) 0 var(--rule-gold),
var(--line) var(--rule-gold) 100%);
--ease: cubic-bezier(.22, .61, .36, 1);
--dur-fast: 120ms;
--dur-mid: 240ms;
--dur-slow: 500ms;
--annot-scale: 1;
}
/* ==========================================================================
2. TOKENS — DARK
Two identical blocks, per the required pattern. Never define a colour
for the first time inside a media query.
========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #1A1512; /* warm near-black */
--surface: #221C18;
--ink: #F2EAE2; /* 15.21:1 on --bg, 14.14:1 on --surface */
--ink-muted: #B5A79A; /* 7.72:1 on --bg */
--accent: #E0B463; /* gold, lifted 9.38:1 on --bg, 8.72:1 on --surface */
--accent-wash: #2E2418; /* --ink on it is 12.77:1 */
--line: #362D27;
--line-strong: #6B5C50;
--on-ink: #1A1512;
/* the logo's script wordmark is black on transparent — mount it */
--brand-plate: var(--plate);
--brand-pad: var(--s3);
--scrim: rgba(12, 9, 7, .80);
}
}
:root[data-theme="dark"] {
--bg: #1A1512; /* warm near-black */
--surface: #221C18;
--ink: #F2EAE2; /* 15.21:1 on --bg, 14.14:1 on --surface */
--ink-muted: #B5A79A; /* 7.72:1 on --bg */
--accent: #E0B463; /* gold, lifted 9.38:1 on --bg, 8.72:1 on --surface */
--accent-wash: #2E2418; /* --ink on it is 12.77:1 */
--line: #362D27;
--line-strong: #6B5C50;
--on-ink: #1A1512;
/* the logo's script wordmark is black on transparent — mount it */
--brand-plate: var(--plate);
--brand-pad: var(--s3);
--scrim: rgba(12, 9, 7, .80);
}
/* ==========================================================================
3. RESET
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
direction: rtl;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--t-body);
font-weight: 400;
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* clear the sticky dock */
padding-block-end: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
}
img, picture, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
/* Hebrew has no true italic — a synthetic oblique looks broken. */
i, em, cite, address { font-style: normal; font-weight: 600; }
:target { scroll-margin-block-start: var(--s7); }
/* ==========================================================================
4. FOCUS (visible in both themes: the offset reveals the page ground)
========================================================================== */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius);
}
/* ==========================================================================
5. BASE TYPOGRAPHY
========================================================================== */
h1, .t-display {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--t-display);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
text-wrap: balance;
}
h2, .t-h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--t-h2);
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
text-wrap: balance;
}
h3, .t-h3 {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--t-h3);
line-height: var(--lh-h3);
}
.t-lead {
font-size: var(--t-lead);
line-height: var(--lh-lead);
max-inline-size: var(--measure);
}
.t-small { font-size: var(--t-small); line-height: var(--lh-small); }
.t-muted { color: var(--ink-muted); }
/* Hebrew has no uppercase — small-label hierarchy is weight + tracking + colour.
Never use text-transform here. */
.t-label {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--t-label);
line-height: 1;
letter-spacing: var(--ls-label);
color: var(--ink-muted);
}
.t-label--accent { color: var(--accent); }
p { max-inline-size: var(--measure); }
p + p { margin-block-start: var(--s4); }
/* Isolate LTR runs: times, phone numbers, "PME", "RF".
Without this the en-dash and digits reorder inside RTL text. */
.num {
direction: ltr;
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ==========================================================================
6. LAYOUT
========================================================================== */
.shell {
inline-size: 100%;
max-inline-size: var(--shell);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
/* Bleed a child to the viewport edges from inside .shell */
.bleed {
margin-inline: calc(var(--gutter) * -1);
}
.stack > * + * { margin-block-start: var(--s4); }
.stack-lg > * + * { margin-block-start: var(--s5); }
.hr { block-size: 1px; background: var(--line); border: 0; }
/* --- the signature: the annotation ---------------------------------------
label ▪ ══════——————————————⟵ (RTL flow puts the label at the right)
This is the page's whole notation system, and every other structural
device on the page quotes it: the same 6px gold tick marks a section
label, a treatment entry, a reel caption and today's opening hours; the
same rule — a solid gold run at the right-hand end, hairline for the rest,
hard stop between them, never a wash — sits under every group heading.
It draws itself right-to-left on scroll where the browser supports it,
and its finished state is the default everywhere else. */
.annot {
display: flex;
align-items: center;
gap: var(--s3);
margin-block-end: var(--s5);
}
.annot__label {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--t-label);
line-height: 1;
letter-spacing: var(--ls-label);
color: var(--ink-muted);
white-space: nowrap;
}
.annot__tick {
flex: none;
inline-size: 6px;
block-size: 6px;
background: var(--accent);
}
.annot__rule {
flex: 1 1 auto;
block-size: 1px;
background: var(--rule-fill);
transform-origin: right; /* RTL: the rule grows away from the label */
transform: scaleX(var(--annot-scale, 1));
}
/* ==========================================================================
7. COMPONENTS
========================================================================== */
/* --- buttons -------------------------------------------------------------
Rectangles, 2px radius. No pills, no gradients, no shadows. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
min-block-size: 48px;
padding-inline: var(--s5);
padding-block: var(--s3);
border: 1px solid transparent;
border-radius: var(--radius);
font-weight: 600;
font-size: var(--t-body);
line-height: 1.2;
text-decoration: none;
transition: background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
transform 80ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
background: var(--ink);
color: var(--on-ink);
}
@media (hover: hover) {
.btn--primary:hover { background: color-mix(in srgb, var(--ink) 88%, var(--bg)); }
}
.btn--secondary {
background: transparent;
color: var(--ink);
border-color: var(--line-strong);
}
@media (hover: hover) {
.btn--secondary:hover { background: var(--surface); border-color: var(--ink); }
}
.btn--block { display: flex; inline-size: 100%; }
.btn--hero { min-block-size: 52px; }
/* Icon-only target (the "just call me" users) */
.btn--icon {
min-inline-size: 48px;
inline-size: 48px;
padding-inline: 0;
}
.btn[disabled], .btn[aria-disabled="true"] {
cursor: not-allowed;
background: var(--line-strong);
color: var(--bg);
border-color: transparent;
/* never fade below AA */
opacity: 1;
}
.btn--secondary[disabled], .btn--secondary[aria-disabled="true"] {
background: transparent;
color: var(--ink-muted);
border-color: var(--line);
}
.btn__icon { inline-size: 16px; block-size: 16px; flex: none; fill: none;
stroke: currentColor; stroke-width: 1.6; }
/* --- sticky mobile CTA ---------------------------------------------------- */
.cta-dock {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 60;
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
background: var(--surface);
border-block-start: 1px solid var(--line-strong);
padding-inline: var(--gutter);
padding-block-start: 10px;
/* clears the iPhone home indicator; needs viewport-fit=cover */
padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
}
/* It never hides, never animates in, never reacts to scroll direction. */
@media (min-width: 900px) {
.cta-dock { display: none; }
body { padding-block-end: 0; }
}
/* --- service row ---------------------------------------------------------- */
.svc {
display: block;
padding-block: var(--s5);
padding-inline: 0;
border-block-end: 1px solid var(--line);
border-radius: var(--radius);
text-decoration: none;
transition: background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
transform 80ms var(--ease);
}
.svc__title { font-weight: 600; font-size: var(--t-h3); line-height: var(--lh-h3); }
.svc__desc { margin-block-start: var(--s2); font-size: var(--t-small);
line-height: var(--lh-small); color: var(--ink-muted); }
.svc__meta { margin-block-start: var(--s3); font-weight: 700;
font-size: var(--t-label); letter-spacing: var(--ls-label);
color: var(--accent); }
/* Background shift, not an accent rail. */
@media (hover: hover) {
.svc:hover {
background: var(--surface);
border-block-end-color: var(--line-strong);
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
}
}
.svc:active { transform: translateY(1px); }
/* --- FAQ accordion -------------------------------------------------------
The markup is a native , which needs neither JS nor a height
transition to open. The button/[aria-expanded] machinery that used to
live here targeted a state this page never sets, so it is gone; what the
accordion actually needs — the ruled row and the "+" sign — is below and
in site.css, in one place each. */
.faq__item { border-block-end: 1px solid var(--line); }
/* "+" drawn in CSS; the vertical bar collapses to make "−". */
.faq__sign { position: relative; inline-size: 14px; block-size: 14px; flex: none; }
.faq__sign::before,
.faq__sign::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
inline-size: 14px;
block-size: 1.5px;
margin-block-start: -.75px;
background: var(--accent);
transition: transform var(--dur-mid) var(--ease);
}
.faq__sign::before { transform: rotate(90deg); }
/* --- hours table ---------------------------------------------------------- */
.hours { display: grid; grid-template-columns: 1fr auto; }
.hours__day,
.hours__time {
padding-block: 10px;
border-block-end: 1px solid var(--line);
}
.hours__day { color: var(--ink-muted); }
.hours__time { color: var(--ink); font-weight: 500; font-size: var(--t-num);
text-align: start; }
.hours__day[data-today],
.hours__time[data-today] {
color: var(--ink);
font-weight: 600;
background: var(--accent-wash);
}
/* one marker, not a badge */
.hours__day[data-today]::before {
content: "";
display: inline-block;
inline-size: 6px;
block-size: 6px;
margin-inline-end: var(--s2);
background: var(--accent);
vertical-align: .1em;
}
.hours__day[data-today] { padding-inline-start: var(--s3); }
.hours__time[data-today] { padding-inline-end: var(--s3); }
.hours__closed { color: var(--ink-muted); font-weight: 400; }
/* --- photo frame ----------------------------------------------------------
Full colour, deliberately. An earlier pass ran a CSS duotone here to
unify two dozen mismatched phone frames; the page now runs on seven
chosen photographs, and for a skin clinic the colour IS the evidence —
a grayscale before/after proves nothing about skin or brows. The duotone
and its tokens are removed rather than declared and then cancelled. */
.photo {
position: relative;
isolation: isolate;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-frame);
background: var(--surface);
}
.photo > img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
/* Ratios */
.photo--r1x1 { aspect-ratio: 1 / 1; }
.photo--r4x5 { aspect-ratio: 4 / 5; }
.photo--r16x9 { aspect-ratio: 16 / 9; }
.photo--r21x9 { aspect-ratio: 21 / 9; }
/* Safe crops — the burned-in Instagram captions live in the middle band,
so only the top third and bottom third are usable. */
.photo--crop-top > img { object-position: 50% 12%; }
.photo--crop-bottom > img { object-position: 50% 86%; }
/* Text over a photo: flat scrim, porcelain text (~8:1). */
.photo__scrim {
position: absolute;
inset: 0;
z-index: 2;
background: var(--scrim);
}
.photo__content {
position: absolute;
z-index: 3;
inset-block-end: 0;
inset-inline: 0;
padding: var(--s5);
color: #EEF1EF;
}
/* Photographs never move. No hover, no focus, no transition. */
/* ==========================================================================
8. RESPONSIVE
========================================================================== */
@media (min-width: 380px) { :root { --gutter: 24px; } }
/* The 12-column helpers, .hero__type/.hero__photo, .about__* and
.site-header that used to live here described markup this page does not
have. Page composition is in site.css, where the markup is. */
@media (min-width: 600px) { :root { --section-y: var(--s8); } }
@media (min-width: 768px) { :root { --gutter: 40px; } }
/* Section padding lands twice between any two sections, so s8 here reads as
128px of separation — grand enough without opening a hole. */
@media (min-width: 900px) { :root { --section-y: var(--s8); } }
/* ==========================================================================
9. REDUCED MOTION
The annotation reveal is decorative — its absence must leave the finished
state, never a blank line.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.annot__rule { transform: scaleX(1) !important; }
}
/* ==========================================================================
10. UTILITIES
========================================================================== */
.visually-hidden {
position: absolute;
inline-size: 1px; block-size: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* The skip link was clipped even while focused, so a keyboard visitor could
reach it and never see where they were. Focusing it now shows it. */
.visually-hidden:focus-visible {
position: fixed;
inset-block-start: var(--s3);
inset-inline-start: var(--s3);
z-index: 100;
inline-size: auto;
block-size: auto;
min-block-size: 44px;
margin: 0;
padding-inline: var(--s4);
overflow: visible;
clip-path: none;
display: inline-flex;
align-items: center;
background: var(--surface); /* --ink on it: 16.75:1 light, 14.14:1 dark */
color: var(--ink);
border: 1px solid var(--accent);
border-radius: var(--radius);
font-weight: 600;
text-decoration: none;
}
.no-wrap { white-space: nowrap; }