/* Bellfy brand foundation. Shared by the marketing site, every salon page and the app.
   Bodoni Moda is the fashion-magazine face a beauty club belongs to; Schibsted Grotesk comes from
   newspaper design and carries long reading. Both are SIL Open Font License 1.1 and self-hosted:
   the CSP only allows this origin, and a beauty client's visit is nobody else's business. */

@font-face{font-family:'Bodoni Moda';src:url('/fonts/bodoni-moda.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url('/fonts/bodoni-moda-italic.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('/fonts/schibsted-grotesk.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}

:root{
 /* Paper and ink: a printed beauty magazine, not a SaaS dashboard. */
 --paper:#f4ede4;
 --paper-raised:#faf6f1;
 --paper-deep:#e9dfd2;
 --ink:#241621;
 --ink-soft:#5d4b57;
 /* Darkest quiet tone that still reads as quiet: 4.81:1 on --paper-deep, 5.45:1 on --paper. */
 --ink-faint:#6c5b65;
 --line:#ddd0c3;
 --line-strong:#c9b8a9;

 /* Bellfy's own accent. Every salon page replaces --salon with the salon's colour. */
 --accent:#8f3355;
 --accent-ink:#fff7f1;
 --salon:var(--accent);
 --salon-soft:color-mix(in srgb,var(--salon) 12%,var(--paper));
 --salon-ink:var(--accent-ink);

 --display:'Bodoni Moda',Georgia,'Times New Roman',serif;
 --text:'Schibsted Grotesk','Segoe UI',sans-serif;

 /* Motion with weight: things arrive and settle, they do not slide on rails. */
 --ease-out:cubic-bezier(.16,1,.3,1);
 --ease-in-out:cubic-bezier(.65,0,.35,1);

 --radius:4px;
 --radius-lg:22px;
 --gutter:clamp(20px,5vw,72px);
 --measure:62ch;

 color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
/* The hidden attribute loses to any author display rule, so a section styled as a grid would stay
   on screen after being hidden. This keeps hidden meaning hidden everywhere. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
 margin:0;min-height:100vh;
 font-family:var(--text);font-size:16px;line-height:1.6;color:var(--ink);
 background:
  radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--salon) 9%,transparent),transparent 60%),
  radial-gradient(90% 60% at 0% 100%,color-mix(in srgb,var(--salon) 6%,transparent),transparent 55%),
  var(--paper);
 background-attachment:fixed;
 font-synthesis:none;-webkit-font-smoothing:antialiased;
}
/* Paper grain. A flat colour reads as a template; a printed page has tooth. */
body::before{
 content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .09 0 0 0 0 .13 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

/* Headings inherit their colour. Forcing ink here would put ink on ink in every dark section and
   on every coloured card, which is exactly what it did before this line said so. */
h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.02em;line-height:1.02;margin:0;color:inherit;font-optical-sizing:auto}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300;color:var(--salon)}
p{margin:0;color:var(--ink-soft)}
a{color:inherit}
:focus-visible{outline:2px solid var(--salon);outline-offset:4px;border-radius:2px}
img{max-width:100%;display:block}

/* A label is set in small caps of the reading face, wide and quiet, never shouting. */
.label{font-family:var(--text);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}

.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:12px;
 min-height:52px;padding:0 28px;border:1px solid var(--ink);border-radius:999px;
 font:600 14px/1 var(--text);letter-spacing:.02em;text-decoration:none;cursor:pointer;
 background:var(--ink);color:var(--paper-raised);
 transition:background .5s var(--ease-out),color .5s var(--ease-out),transform .5s var(--ease-out);
}
.btn:hover{background:var(--salon);border-color:var(--salon);color:var(--salon-ink)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper-raised)}
.btn .arrow{transition:transform .5s var(--ease-out)}
.btn:hover .arrow{transform:translate(3px,-3px)}

@media (prefers-reduced-motion:reduce){
 /* The delays go too: a staggered entrance is still motion, even when each step is instant. */
 *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}