/* ========================================================================== Semi-permanent brows & lip blush — Burnley -------------------------------------------------------------------------- The design is not invented. It is Alison's own Facebook poster turned into a site, and every device below comes off one of her two SPMU posters: · gold and cream, and nothing else · a photograph bleeding down one side with a soft painted edge · small tracked caps over a large serif word, a script line beneath · a heart sitting on a hairline as the divider · a circular price roundel with a gold ring · thin outline icons in soft filled circles · a brush band closing the page: script sign-off, then NATURAL · ENHANCED · EFFORTLESS / BOOK YOUR APPOINTMENT TODAY Two standing rules, both from Andy: NO arched image frames, and no colour outside the gold/cream family. ========================================================================== */ :root { /* ====================================================================== PALETTE — cream and gold, with one berry for action. Every colour below has exactly one job. Nothing else is allowed on the page. Four golds, five creams and three inks is what "a random assortment of colours" looked like; this is the whole set. ====================================================================== */ /* grounds — a light cream and a dark cream, and the dark footer. Both are CREAM: hue ~43 degrees with the blue channel kept high. The moment the blue drops away it stops being cream and becomes sand or tan, which is what --sand #F1E7D3 and --taupe #E4D5B4 were. The two creams sit 10% apart in lightness so the change reads as a decision, not as a seam — the old pair were 2% apart, which is why the page looked either flat or random. */ --cream: #FDFAF2; /* light cream — the page */ --cream-d: #F4EEDE; /* dark cream — alternating bands */ --cream2: #FFFDF8; /* lightest — cards, so they lift off either band */ --foot: #241E15; /* the footer, and only the footer */ /* gold — two, one decorative and one that has to pass contrast */ --gold: #C9A64F; /* hairlines, the ampersand, the script */ --gold-d: #7D641B; /* gold that carries text: links, tracked labels */ /* berry — the action colour, from the sister salon. Buttons, and the heart */ --rose: #B32B50; --rose-d: #831F3B; /* its hover only */ /* ink — three, by weight of voice */ --ink: #1C1512; /* headings */ --body: #55493B; /* running text */ --mut: #6E644A; /* small tracked labels and fineprint */ /* Every rule on the site. This was #DCCBA8 — a tan, and the beige that kept showing up everywhere. A rule on this brand is a faint GOLD hairline, not a beige one, so it is the gold at low opacity and nothing else. */ --line: rgba(201, 166, 79, .38); --d: "Cormorant Garamond", Georgia, serif; --s: Lato, system-ui, -apple-system, sans-serif; /* Brittany Signature is a paid font and needs a webfont licence plus the .woff2 before it can go on a live site. Allura is the stand-in — swap this one line when the real file arrives. */ /* Placeholder only — Andy is having a custom script cut to match the brand lockup. Drop the .woff2 into assets-src/fonts/ and this is overridden automatically by the @font-face build.py emits. */ /* Pinyon Script — the face from the gold-and-cream direction board this site was signed off from. Overridden automatically if a custom .woff2 is dropped into assets-src/fonts/. */ --scr: Parisienne, "Apple Chancery", cursive; --sc: "Cormorant SC", "Cormorant Garamond", Georgia, serif; /* type scale — nothing on the site sets a size outside these */ --t-display: clamp(50px, 7.4vw, 90px); /* the poster word */ --t-1: clamp(30px, 3.6vw, 44px); /* section headings */ --t-2: clamp(21px, 2.2vw, 26px); /* sub-heads, quotes, prices */ --t-3: 20px; /* small headings, facts */ --t-lede: 19px; --t-body: 17px; --t-sm: 16px; --t-label: 12px; /* tracked caps */ --t-fine: 14px; --t-scr: clamp(28px, 3.5vw, 44px); /* script, in copy */ --t-scr-lg: clamp(42px, 5.6vw, 74px); /* script, her name */ --t-wm: clamp(34px, 6.2vw, 76px); /* the wordmark */ --wrap: 1180px; --gut: clamp(20px, 4.5vw, 48px); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--body); font-family: var(--s); font-weight: 400; font-size: var(--t-body); line-height: 1.7; -webkit-font-smoothing: antialiased; } img, picture { max-width: 100%; } picture { display: block; } picture img { display: block; width: 100%; height: 100%; object-fit: cover; } a { color: inherit; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 12px 18px; z-index: 200; } .skip:focus { left: 0; } :focus-visible { outline: 2px solid var(--gold-d); outline-offset: 3px; } /* -------------------------------------------------------------------------- Type -------------------------------------------------------------------------- */ .d { font-family: var(--d); font-weight: 600; color: var(--ink); } .scr { font-family: var(--scr); font-weight: 400; line-height: .95; color: var(--gold-d); } h1, h2, h3, h4 { font-family: var(--d); font-weight: 600; color: var(--ink); margin: 0 0 .5em; } h1 { font-size: var(--t-1); line-height: 1.08; letter-spacing: .04em; text-transform: uppercase; } h2 { font-size: var(--t-1); line-height: 1.14; letter-spacing: .04em; } h3 { font-size: var(--t-2); line-height: 1.2; } h4 { font-size: var(--t-3); line-height: 1.24; } p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; } .caps { font: 400 var(--t-label)/1.6 var(--s); letter-spacing: .34em; text-transform: uppercase; color: var(--mut); margin: 0 0 1em; } .lede { font-size: var(--t-lede); line-height: 1.8; color: var(--body); max-width: 44ch; } .fineprint { font-size: var(--t-fine); line-height: 1.6; color: var(--mut); } .lnk { color: var(--gold-d); font-weight: 400; text-decoration: none; border-bottom: 1px solid rgba(150,121,47,.4); padding-bottom: 2px; } .lnk:hover { border-bottom-color: var(--gold-d); } /* the heart divider */ .hr { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 22px 0; max-width: 240px; } .hr.c { margin-left: auto; margin-right: auto; } .hr::before, .hr::after { content: ""; flex: 1; height: 1px; background: var(--line); } .hr svg { width: 12px; height: 12px; flex: none; fill: var(--rose); } /* Repeated on every section the heart read as twee. Section rules are a plain gold hairline; the heart is kept for the masthead and sign-off. */ .head .hr svg { display: none; } .head .hr { max-width: 90px; gap: 0; } .head .hr::before, .head .hr::after { background: var(--gold); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-block; font: 400 var(--t-label)/1 var(--s); letter-spacing: .26em; text-transform: uppercase; padding: 19px 34px; text-decoration: none; margin: 0 10px 10px 0; border-radius: 0; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .b1 { background: var(--rose); color: #fff; border-color: var(--rose); border-radius: 999px; } .b1:hover { background: var(--rose-d); border-color: var(--rose-d); color: #fff; } .b2 { background: transparent; color: var(--ink); border-color: var(--gold); border-radius: 999px; } .b2:hover { background: var(--ink); color: var(--cream2); border-color: var(--ink); } .b3 { background: transparent; color: var(--ink); border-color: var(--ink); border-radius: 999px; } .b3:hover { background: var(--ink); color: var(--cream2); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .top { background: var(--ink); color: var(--gold); text-align: center; padding: 10px; font: 400 var(--t-label)/1.5 var(--s); letter-spacing: .3em; text-transform: uppercase; } .top a { color: inherit; } .mast { text-align: center; padding: 38px 0 0; position: relative; } .wm { display: inline-block; font-family: var(--sc); font-weight: 700; font-size: var(--t-wm); line-height: 1; letter-spacing: .015em; margin: 0; color: var(--ink); text-decoration: none; white-space: nowrap; } .wm .amp { font-family: var(--d); font-weight: 600; color: var(--gold); font-size: 1.04em; letter-spacing: 0; padding: 0 .1em; } /* Her name is the trust signal, so it gets the script face and real size — not a caption. The keyword wordmark wins the search; her name wins the room. */ .wm2 { display: block; font-family: var(--scr); font-weight: 400; font-size: var(--t-scr-lg); line-height: 1.12; color: var(--gold-d); margin-top: 2px; } /* "by" is a separate word, so it needs a real word-space — at .2em it was touching the A of Alison. */ .wm2 i { font-family: var(--s); font-style: normal; font-size: .26em; letter-spacing: .08em; text-transform: none; color: var(--mut); display: inline-block; transform: translateY(-.75em); margin-right: .55em; } .wm3 { display: block; font: 400 var(--t-label)/1 var(--s); letter-spacing: .36em; text-transform: uppercase; color: var(--mut); margin-top: 16px; text-indent: .36em; } /* When the real logo artwork is present it replaces the type lockup. */ .wm-img { display: inline-block; max-width: min(520px, 80vw); } .wm-img img { width: 100%; height: auto; } .foot .wm-img { max-width: 250px; } .burger { display: none; position: absolute; left: 0; top: 26px; width: 40px; height: 32px; background: none; border: 0; cursor: pointer; padding: 6px 4px; flex-direction: column; justify-content: space-between; } .burger span { display: block; height: 1px; background: var(--ink); } .nav { } .nav-in { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 28px; padding: 4px 0 26px; } /* The dropdown items are