/* ========================================================================= ONE stylesheet, every brand. Nothing here hard-codes a colour, font, or radius — it all reads CSS custom properties injected per studio in from the config's `brand` block. Body classes (mood-*, corners-*, motif-*) switch structural treatments. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } :root { color-scheme: dark; } body.mood-light { color-scheme: light; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); background: var(--bg); color: var(--fg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, .display { font-family: var(--font-display); line-height: 1.05; font-weight: 800; } a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; } img { display: block; max-width: 100%; height: auto; } .container { width: min(1120px, 92vw); margin-inline: auto; } .eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 700; color: var(--accent); } .section { padding: clamp(3.5rem, 7vw, 6rem) 0; } .section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; } /* ---- Buttons ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 0.98rem; line-height: 1; padding: 0.95rem 1.5rem; border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; text-decoration: none; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--accent); color: var(--accent-fg); box-shadow: 0 10px 30px -10px var(--accent-glow); } .btn--primary:hover { background: var(--accent-strong); box-shadow: 0 16px 40px -12px var(--accent-glow); } .btn--ghost { background: transparent; color: var(--fg); border-color: var(--border); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } /* ---- Header ----------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; } .brandmark { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; letter-spacing: 0.01em; text-decoration: none; } .brandmark .dot { width: 0.6rem; height: 0.6rem; border-radius: var(--radius-pill); background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); } .nav { display: flex; align-items: center; gap: 1.4rem; } /* Scope link styling to the text links only — NOT the header's .btn--primary (a direct child of .nav), whose own colour rules would otherwise be lost to `.nav a` on specificity, leaving the CTA text muted-on-accent. */ .nav__links a { font-size: 0.92rem; font-weight: 600; text-decoration: none; color: var(--fg-muted); } .nav__links a:hover { color: var(--accent); } .nav__links { display: flex; gap: 1.3rem; } @media (max-width: 760px) { .nav__links { display: none; } } /* ---- Hero ------------------------------------------------------------- */ .hero { position: relative; padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } @media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; } } .hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); letter-spacing: -0.01em; } .hero h1 .accent { color: var(--accent); } .hero__fact { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--fg-muted); max-width: 46ch; margin-top: 1.2rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; } .hero__meta { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.8rem; font-size: 0.9rem; color: var(--fg-muted); } .hero__meta strong { color: var(--fg); } /* Rating chip (real social proof) */ .rating { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--accent-soft); font-size: 0.92rem; } .rating .stars { color: var(--accent); letter-spacing: 0.1em; } .rating strong { font-weight: 800; } /* Hero visual panel */ .hero__panel { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4 / 5; background: var(--bg-2); box-shadow: var(--shadow); } .hero__panel img { width: 100%; height: 100%; object-fit: cover; } .hero__panel--empty { display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--fg-muted); } /* ---- Facts block (machine + human readable) --------------------------- */ .facts { border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--bg-2), var(--bg)); padding: clamp(1.4rem, 3vw, 2.2rem); } .facts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.3rem 1.6rem; } .facts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); font-weight: 700; margin-bottom: 0.3rem; } .facts dd { font-size: 1rem; color: var(--fg); } .facts dd a { color: var(--fg); text-decoration: none; } .facts dd a:hover { color: var(--accent); } /* ---- Section heading -------------------------------------------------- */ .section-head { max-width: 60ch; margin-bottom: 2.2rem; } .section-head h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin-top: 0.5rem; } .section-head p { color: var(--fg-muted); margin-top: 0.7rem; font-size: 1.05rem; } /* ---- Services --------------------------------------------------------- */ .services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .service-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; transition: border-color .2s ease, transform .2s ease; } .service-card:hover { border-color: var(--accent); transform: translateY(-3px); } .service-card h3 { font-size: 1.2rem; } .service-card .price { color: var(--accent); font-weight: 700; } .service-card .price--ask { color: var(--fg-muted); font-weight: 500; font-style: italic; } /* ---- Gallery ---------------------------------------------------------- */ .gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; } .gallery__item { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg-2); aspect-ratio: 1 / 1; } .gallery__item img, .gallery__item picture { width: 100%; height: 100%; } .gallery__item img { object-fit: cover; transition: transform .4s ease; } .gallery__item:hover img { transform: scale(1.05); } /* ---- FAQ -------------------------------------------------------------- */ .faq__list { display: grid; gap: 0.8rem; } .faq__item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; } .faq__item h3, .faq__q { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; } details.faq__item > summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } details.faq__item > summary::-webkit-details-marker { display: none; } details.faq__item > summary .chev { color: var(--accent); transition: transform .2s ease; font-size: 1.4rem; line-height: 1; } details.faq__item[open] > summary .chev { transform: rotate(45deg); } .faq__answer { padding: 0 1.3rem 1.2rem; color: var(--fg-muted); } /* ---- About / trust ---------------------------------------------------- */ .about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } @media (max-width: 820px) { .about__grid { grid-template-columns: 1fr; } } .stat-row { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 1.4rem; } .stat b { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--accent); line-height: 1; } .stat span { font-size: 0.85rem; color: var(--fg-muted); } /* ---- CTA band --------------------------------------------------------- */ .cta-band { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: clamp(2.2rem, 5vw, 3.5rem); text-align: center; border: 1px solid var(--border); background: radial-gradient(120% 140% at 50% 0%, var(--accent-soft), var(--bg-2) 60%); } .cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); } .cta-band p { color: var(--fg-muted); margin: 0.7rem auto 1.6rem; max-width: 50ch; } .cta-band .hero__cta { justify-content: center; } /* ---- Footer ----------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem; margin-top: 2rem; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; } @media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } } .footer__grid h3 { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 0.8rem; font-weight: 700; } .footer__grid a { color: var(--fg-muted); text-decoration: none; display: block; margin-bottom: 0.4rem; } .footer__grid a:hover { color: var(--accent); } .footer__bottom { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--fg-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; } address.nap { font-style: normal; color: var(--fg-muted); line-height: 1.8; } /* ========================================================================= MOTIFS — the configurable hero signature. Gated on body.motif-*. ========================================================================= */ /* drip: blood/ink drips hanging off the hero (Dark-Ink pole) */ .motif-drip .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; background: radial-gradient(14px 26px at 12% 0, var(--accent) 49%, transparent 50%), radial-gradient(10px 20px at 28% 0, var(--accent) 49%, transparent 50%), radial-gradient(18px 34px at 47% 0, var(--accent) 49%, transparent 50%), radial-gradient(9px 16px at 66% 0, var(--accent) 49%, transparent 50%), radial-gradient(13px 24px at 83% 0, var(--accent) 49%, transparent 50%); opacity: 0.85; pointer-events: none; } .motif-drip .hero { border-bottom: 2px solid var(--accent); } /* wave: aqua water-glow + wave divider (H2O pole) */ .motif-wave .hero { background: radial-gradient(60% 50% at 70% 18%, var(--accent-soft), transparent 70%), radial-gradient(50% 40% at 20% 90%, var(--accent-soft), transparent 70%); } .motif-wave .hero__panel { box-shadow: 0 0 0 1px var(--border), 0 30px 80px -30px var(--accent-glow); } .motif-wave .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; pointer-events: none; background: var(--bg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C 150 48 300 0 450 24 C 600 48 750 0 900 24 C 1050 48 1150 8 1200 24 V48 H0 Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C 150 48 300 0 450 24 C 600 48 750 0 900 24 C 1050 48 1150 8 1200 24 V48 H0 Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; } /* rule: a real editorial double rule under the hero (timeless / classic feel) */ .motif-rule .hero { border-bottom: 4px double var(--accent); } .motif-rule .section-head h2 { padding-bottom: 0.5rem; box-shadow: 0 2px 0 -1px var(--accent); width: fit-content; } /* corners: sharp brands stay flat & graphic (tighter display); soft brands get a gentle accent-tinted elevation on cards. Both classes now do real work. */ .corners-sharp .hero h1 { letter-spacing: -0.015em; } .corners-soft .service-card, .corners-soft .gallery__item { box-shadow: 0 14px 34px -26px var(--accent-glow); } @media (max-width: 880px) { .hero__panel { aspect-ratio: 16 / 11; } } /* skip link for a11y */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-fg); padding: 0.6rem 1rem; z-index: 100; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ========================================================================= STREET SKIN — neo-brutalist "sticker shop". ALL rules scoped to body.style-street, so the other four studios render byte-identical. Tokens emitted by lib/theme.js only for brand.style === 'street': --ink (= --fg #13151f) : every 2px outline + every hard offset shadow. --accent-2 #FFB200 : marigold pop — fills/tape/halftone/large only. --accent-2-soft #FFEFC2: pale marigold wash (CTA band base). Fallbacks (var(--ink, var(--fg)) etc.) keep it safe if a token is absent. Marigold is NEVER used as small text on bone (~1.6:1). Text on marigold uses --ink (#13151f on #FFB200 = 10.06:1, AA/AAA). CTA cobalt/white is untouched (5.18:1) so scripts/check.js passes. ========================================================================= */ /* ---- Eyebrow -> marigold sticker label -------------------------------- */ body.style-street .eyebrow { display: inline-block; background: var(--accent-2, #FFB200); color: var(--ink, var(--fg)); border: 2px solid var(--ink, var(--fg)); box-shadow: 3px 3px 0 var(--ink, var(--fg)); border-radius: var(--radius-sm); padding: 0.25rem 0.6rem; } /* ---- Hero: poster "two-plate" offset on the headline (graft from Riso, * * font-safe: no brand.display swap, no .accent span needed) -------------- */ body.style-street .hero h1 { text-shadow: -2px -2px 0 var(--accent), /* cobalt plate, up-left */ 3px 3px 0 var(--accent-2, #FFB200); /* marigold plate, down-right */ } /* faint marigold halftone "sticker sheet" texture behind hero content. .hero is position:relative;overflow:hidden (site.css L75) and motif-none means no ::after collision. Sits behind content, pointer-events:none. */ body.style-street .hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient( color-mix(in srgb, var(--accent-2, #FFB200) 55%, transparent) 1.2px, transparent 1.2px); background-size: 14px 14px; opacity: 0.10; pointer-events: none; z-index: 0; } body.style-street .hero__grid { position: relative; z-index: 1; } /* ---- Buttons: chunky pill on a hard offset, presses down on hover ------ */ body.style-street .btn { border: 2px solid var(--ink, var(--fg)); } body.style-street .btn--primary { /* colour values UNCHANGED (CTA gate); only the shadow becomes a hard offset */ background: var(--accent); color: var(--accent-fg); box-shadow: 5px 5px 0 var(--ink, var(--fg)); } body.style-street .btn--ghost { background: var(--card); color: var(--fg); border-color: var(--ink, var(--fg)); box-shadow: 5px 5px 0 var(--ink, var(--fg)); } /* override base .btn:hover translateY(-2px) — press INTO the shadow */ body.style-street .btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink, var(--fg)); } body.style-street .btn--primary:hover { background: var(--accent-strong); } body.style-street .btn--ghost:hover { border-color: var(--ink, var(--fg)); color: var(--fg); } body.style-street .btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink, var(--fg)); } /* ---- Section headings: solid marigold underline bar -------------------- */ body.style-street .section-head h2 { width: fit-content; padding-bottom: 0.35rem; box-shadow: 0 3px 0 var(--accent-2, #FFB200); } /* ---- Facts block: blocky bone panel with hard offset ------------------- */ body.style-street .facts { border: 2px solid var(--ink, var(--fg)); background: var(--bg); /* override the L96 gradient */ border-radius: var(--radius-sm); box-shadow: 6px 6px 0 var(--ink, var(--fg)); } /* dt labels stay cobalt (site.css L98) — untouched */ /* ---- Service cards: tilted stickers + numbered badge (graft from Flash) */ body.style-street .services__grid { counter-reset: flash; } body.style-street .service-card { counter-increment: flash; position: relative; border: 2px solid var(--ink, var(--fg)); background: var(--card); /* REPLACES corners-soft glow (site.css L194-195); this rule is later in the file at equal (0,2,0) specificity so it wins on source order — no glow stack */ box-shadow: 6px 6px 0 var(--ink, var(--fg)); border-radius: var(--radius-sm); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } body.style-street .service-card:nth-child(3n+1) { rotate: -1.2deg; } body.style-street .service-card:nth-child(3n+2) { rotate: 1deg; } body.style-street .service-card:nth-child(3n) { rotate: -0.5deg; } body.style-street .service-card:hover { rotate: 0deg; /* straighten = "corrective", tasteful */ transform: translateY(-3px); box-shadow: 8px 8px 0 var(--ink, var(--fg)); border-color: var(--accent); } body.style-street .service-card::after { content: counter(flash, decimal-leading-zero); /* 01, 02, ... */ position: absolute; top: 0.5rem; right: 0.6rem; font: 700 0.7rem/1 var(--font-body); color: var(--ink, var(--fg)); background: var(--accent-2, #FFB200); border: 1.5px solid var(--ink, var(--fg)); padding: 0.12rem 0.4rem; border-radius: var(--radius-pill); } /* .price stays cobalt (site.css L113) — untouched */ /* ---- Gallery tiles: double-inked frame (graft) + tilt + tape ---------- */ body.style-street .gallery__item { position: relative; border: 2px solid var(--ink, var(--fg)); border-radius: var(--radius-sm); /* hard offset REPLACES the corners-soft glow with a blocky sticker shadow. (No inset rings here: .gallery__item is overflow:hidden to contain the hover zoom, so the img would paint over any inset frame.) */ box-shadow: 5px 5px 0 var(--ink, var(--fg)); } body.style-street .gallery__item:nth-child(even) { rotate: 1deg; } body.style-street .gallery__item:nth-child(odd) { rotate: -1deg; } body.style-street .gallery__item:hover { rotate: 0deg; } /* .gallery__item:hover img scale(1.05) (site.css L121) — preserved */ /* translucent "tape" tab on service cards — the stuck-on-the-wall cue. (Not on .gallery__item: its overflow:hidden would clip a top:-9px tab.) */ body.style-street .service-card::before { content: ""; position: absolute; top: -9px; left: 50%; width: 54px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: color-mix(in srgb, var(--accent-2, #FFB200) 70%, transparent); border: 1px solid color-mix(in srgb, var(--ink, var(--fg)) 35%, transparent); pointer-events: none; z-index: 2; } /* ---- FAQ items: outlined blocks; chev becomes a marigold "+" box ------- */ body.style-street .faq__item { border: 2px solid var(--ink, var(--fg)); border-radius: var(--radius-sm); box-shadow: 4px 4px 0 var(--ink, var(--fg)); } body.style-street details.faq__item > summary .chev { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; background: var(--accent-2, #FFB200); color: var(--ink, var(--fg)); border: 2px solid var(--ink, var(--fg)); border-radius: var(--radius-sm); font-size: 1.1rem; } /* [open] chev rotate(45deg) (site.css L130) and .faq__answer text — untouched */ /* ---- Rating chip: marigold sticker with ink text ---------------------- */ body.style-street .rating { background: var(--accent-2, #FFB200); color: var(--ink, var(--fg)); border: 2px solid var(--ink, var(--fg)); box-shadow: 3px 3px 0 var(--ink, var(--fg)); } body.style-street .rating .stars { color: var(--ink, var(--fg)); } /* on marigold: 10:1 */ body.style-street .rating span[style] { color: var(--ink, var(--fg)) !important; } /* the inline "(n reviews)" muted span sits on marigold -> force ink for contrast */ /* ---- CTA band: pale-marigold wash, outlined, hard offset -------------- */ body.style-street .cta-band { background: var(--accent-2-soft, #FFEFC2); /* overrides the radial (site.css L141) */ border: 2px solid var(--ink, var(--fg)); box-shadow: 8px 8px 0 var(--ink, var(--fg)); border-radius: var(--radius); } /* h2 (#13151f on #FFEFC2 = 15.9:1) + muted p (5.86:1) + cobalt/white CTA — all pass */ /* ---- Header + brandmark: stickered ------------------------------------ */ body.style-street .site-header { border-bottom: 2px solid var(--ink, var(--fg)); } body.style-street .brandmark .dot { box-shadow: 2px 2px 0 var(--ink, var(--fg)); } /* ---- Optional marquee strip (only renders if index.njk graft is added) - * Shipped AA-safe: --ink text on a SOLID marigold band = 10:1 (NOT the * rejected cobalt-on-tint ~3.7:1). aria-hidden, reduced-motion-paused. */ body.style-street .marquee { overflow: hidden; background: var(--accent-2, #FFB200); border-block: 2px solid var(--ink, var(--fg)); } body.style-street .marquee__track { display: inline-flex; align-items: center; gap: 1.4rem; white-space: nowrap; will-change: transform; padding: 0.5rem 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; color: var(--ink, var(--fg)); /* on marigold band -> 10.06:1 */ animation: street-marquee 26s linear infinite; } body.style-street .marquee:hover .marquee__track { animation-play-state: paused; } body.style-street .marquee__sep { opacity: 0.65; } @keyframes street-marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { body.style-street .marquee__track { animation: none; } } /* ========================================================================= CLEAN-GIRL SKIN — soft "quiet-luxury" beauty pole (cream / blush / sage). ALL rules scoped to body.style-clean-girl, so the five tattoo studios render byte-identical. Built for a nail studio: pretty, glossy, gallery-first, phone-first — never a clinic. Contrast contract (the brief bans stark black-on-white AND illegible pastel): the signature blush --accent is PALE, so it is used ONLY for fills/glows/soft washes. Anywhere the shared CSS paints TEXT in the accent colour, this skin re-points it to --accent-deep (a muted rose that clears WCAG AA on cream). --fg / --fg-muted are retuned to warm espresso/taupe (no pure black), both AA on the cream base. Hard 1px borders are dropped for soft shadows + big radii. Tokens (--accent-deep, --sage, --almond, --gloss) come from theme.js. ========================================================================= */ /* ---- Palette retune + soft background wash + faint grain --------------- */ body.style-clean-girl { --fg: #3E322E; /* warm espresso, not black */ --fg-muted: #6E5E57; /* warm taupe — AA (5.3:1) on cream */ --border: rgba(150, 120, 108, 0.18); /* whisper-soft, mostly replaced by shadow */ --radius-sm: 14px; --radius: 22px; --radius-lg: 34px; --shadow: 0 26px 60px -34px rgba(120, 84, 72, 0.45); /* layered, fixed pastel blobs + a barely-there grain tile, all BEHIND content */ background-color: var(--bg); background-image: radial-gradient(48% 42% at 8% -6%, var(--accent-deep-soft), transparent 62%), radial-gradient(42% 40% at 98% 4%, var(--sage-soft), transparent 60%), radial-gradient(46% 44% at 88% 96%, var(--almond-soft), transparent 62%), radial-gradient(40% 38% at 4% 100%, var(--accent-soft), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); background-attachment: fixed, fixed, fixed, fixed, fixed; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat; } /* slightly looser, airier body rhythm + a touch more display tracking */ body.style-clean-girl { line-height: 1.65; } body.style-clean-girl h1, body.style-clean-girl h2 { letter-spacing: -0.015em; } /* ---- Accent-as-text → readable deep rose ------------------------------ */ body.style-clean-girl .eyebrow, body.style-clean-girl .facts dt, body.style-clean-girl .footer__grid h3, body.style-clean-girl .service-card .price, body.style-clean-girl .stat b, body.style-clean-girl details.faq__item > summary .chev { color: var(--accent-deep); } body.style-clean-girl a { text-decoration-color: var(--accent-deep); } body.style-clean-girl .nav__links a:hover, body.style-clean-girl .facts dd a:hover, body.style-clean-girl .footer__grid a:hover { color: var(--accent-deep); } /* eyebrows become little uppercase "labels" with extra air */ body.style-clean-girl .eyebrow { letter-spacing: 0.26em; } /* ---- Header: frosted cream, hairline, no hard edge -------------------- */ body.style-clean-girl .site-header { background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } body.style-clean-girl .brandmark { letter-spacing: 0.005em; } body.style-clean-girl .brandmark .dot { background: radial-gradient(circle at 32% 30%, #fff 0 18%, var(--accent) 55%); box-shadow: 0 0 0 4px var(--accent-soft); } /* ---- Buttons: glossy soft pills --------------------------------------- */ body.style-clean-girl .btn { padding: 1rem 1.7rem; font-weight: 600; letter-spacing: 0.01em; } body.style-clean-girl .btn--primary { background: linear-gradient(180deg, var(--gloss), transparent 42%), var(--accent); color: var(--accent-fg); box-shadow: 0 14px 30px -12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.5); } body.style-clean-girl .btn--primary:hover { box-shadow: 0 20px 40px -12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.5); } body.style-clean-girl .btn--ghost { background: rgba(255, 255, 255, 0.55); color: var(--fg); border-color: color-mix(in srgb, var(--accent) 40%, transparent); backdrop-filter: blur(4px); } body.style-clean-girl .btn--ghost:hover { border-color: var(--accent-deep); color: var(--accent-deep); background: #fff; } /* ---- Hero: gentle glow + floating, scalloped image -------------------- */ body.style-clean-girl .hero h1 { font-weight: 600; } body.style-clean-girl .hero__fact { color: var(--fg-muted); } body.style-clean-girl .hero__panel { border: 6px solid #fff; border-radius: 36px; box-shadow: 0 40px 80px -36px var(--accent-glow), 0 8px 24px -16px rgba(120,84,72,0.4); animation: cg-float 7s ease-in-out infinite; } body.style-clean-girl .hero__panel::after { /* soft blush halo behind the photo */ content: ""; position: absolute; inset: -14% -10% -18% -12%; z-index: -1; background: radial-gradient(60% 60% at 50% 40%, var(--accent-glow), transparent 70%); filter: blur(8px); } @keyframes cg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ---- Rating: glossy "sticker" -------------------------------- */ body.style-clean-girl .rating { background: linear-gradient(180deg, #fff, var(--accent-soft)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 12px 26px -16px var(--accent-glow); font-weight: 600; rotate: -2deg; } body.style-clean-girl .rating .stars { color: var(--accent-deep); } body.style-clean-girl .rating strong { color: var(--fg); } /* ---- Sticker badge row (hero) ----------------------------------------- */ body.style-clean-girl .badge-row { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 1.4rem 0 0; } body.style-clean-girl .badge { font-size: 0.82rem; font-weight: 600; color: var(--fg); background: #fff; border-radius: var(--radius-pill); padding: 0.5rem 0.95rem; box-shadow: 0 10px 22px -14px rgba(120,84,72,0.55), inset 0 0 0 1px var(--accent-soft); } body.style-clean-girl .badge:nth-child(even) { rotate: 2deg; } body.style-clean-girl .badge:nth-child(odd) { rotate: -2deg; } body.style-clean-girl .badge:hover { animation: cg-wiggle 0.5s ease; } @keyframes cg-wiggle { 0%,100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } } /* ---- Soft marquee ribbon ---------------------------------------------- */ body.style-clean-girl .marquee { overflow: hidden; background: linear-gradient(90deg, var(--accent-soft), var(--sage-soft), var(--almond-soft)); border-block: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); margin-top: 0.5rem; } body.style-clean-girl .marquee__track { display: inline-flex; align-items: center; gap: 1.5rem; white-space: nowrap; padding: 0.7rem 0; will-change: transform; font-family: var(--font-display); font-weight: 500; letter-spacing: 0.04em; font-size: 0.9rem; color: var(--fg); animation: cg-marquee 38s linear infinite; } body.style-clean-girl .marquee:hover .marquee__track { animation-play-state: paused; } body.style-clean-girl .marquee__sep { color: var(--accent-deep); opacity: 0.7; } @keyframes cg-marquee { to { transform: translateX(-50%); } } /* ---- Facts strip: cute soft panel, not a table ------------------------ */ body.style-clean-girl .facts { border: none; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(6px); box-shadow: 0 30px 60px -40px rgba(120,84,72,0.5), inset 0 0 0 1px var(--accent-soft); } body.style-clean-girl .facts__grid { gap: 1.5rem 1.8rem; } body.style-clean-girl .facts dt { letter-spacing: 0.18em; } /* ---- Section headings: a soft underline flourish ---------------------- */ body.style-clean-girl .section-head h2 { font-weight: 600; } /* ---- Service cards: glossy rounded tiles ------------------------------ */ body.style-clean-girl .service-card { border: none; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7)), var(--card); padding: 1.5rem 1.4rem; box-shadow: 0 24px 50px -34px rgba(120,84,72,0.55), inset 0 0 0 1px var(--accent-soft); transition: transform .25s ease, box-shadow .25s ease; } body.style-clean-girl .service-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -32px var(--accent-glow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } body.style-clean-girl .service-card h3 { font-weight: 600; } body.style-clean-girl .service-card .price { font-style: normal; } body.style-clean-girl .service-card .price--ask { color: var(--fg-muted); } /* ---- Gallery: Pinterest-style masonry with varied tile heights -------- */ body.style-clean-girl .gallery__grid { display: block; column-count: 3; column-gap: 1.1rem; } @media (max-width: 900px) { body.style-clean-girl .gallery__grid { column-count: 2; } } body.style-clean-girl .gallery__item { break-inside: avoid; margin: 0 0 1.1rem; border: 5px solid #fff; border-radius: 26px; box-shadow: 0 26px 50px -34px rgba(120,84,72,0.55); aspect-ratio: 4 / 5; } /* varied aspect ratios give the staggered, screenshot-worthy rhythm */ body.style-clean-girl .gallery__item:nth-child(3n+1) { aspect-ratio: 1 / 1; } body.style-clean-girl .gallery__item:nth-child(3n+2) { aspect-ratio: 4 / 5; } body.style-clean-girl .gallery__item:nth-child(3n) { aspect-ratio: 3 / 4; } body.style-clean-girl .gallery__item:nth-child(5n) { aspect-ratio: 5 / 6; } body.style-clean-girl .gallery__item:hover { transform: translateY(-3px); transition: transform .25s ease; } /* ---- Why-us soft cards ------------------------------------------------- */ body.style-clean-girl .section--why { padding-top: clamp(1rem, 3vw, 2rem); } body.style-clean-girl .why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; } body.style-clean-girl .why-card { border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.66); backdrop-filter: blur(6px); padding: 1.7rem 1.5rem; box-shadow: 0 26px 54px -38px rgba(120,84,72,0.5), inset 0 0 0 1px var(--accent-soft); } body.style-clean-girl .why-card__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.9rem; font-size: 1.4rem; border-radius: var(--radius-pill); background: linear-gradient(180deg, var(--accent-soft), var(--sage-soft)); } body.style-clean-girl .why-card h3 { font-weight: 600; font-size: 1.2rem; margin-bottom: 0.4rem; } body.style-clean-girl .why-card p { color: var(--fg-muted); } /* ---- FAQ: pretty soft accordion --------------------------------------- */ body.style-clean-girl .faq__item { border: none; border-radius: var(--radius); background: rgba(255, 255, 255, 0.7); box-shadow: 0 18px 40px -32px rgba(120,84,72,0.5), inset 0 0 0 1px var(--accent-soft); } body.style-clean-girl details.faq__item > summary { padding: 1.25rem 1.5rem; } body.style-clean-girl .faq__item h3, body.style-clean-girl .faq__q { font-weight: 600; } body.style-clean-girl details.faq__item > summary .chev { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; background: var(--accent-soft); border-radius: var(--radius-pill); } /* ---- CTA band: dreamy blush→sage gradient ----------------------------- */ body.style-clean-girl .cta-band { border: none; border-radius: var(--radius-lg); background: radial-gradient(120% 130% at 50% 0%, var(--accent-soft), transparent 60%), linear-gradient(160deg, #fff, var(--sage-soft)); box-shadow: 0 40px 80px -44px rgba(120,84,72,0.5), inset 0 0 0 1px var(--accent-soft); } body.style-clean-girl .cta-band h2 { font-weight: 600; } /* ---- Footer ----------------------------------------------------------- */ body.style-clean-girl .site-footer { border-top: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); background: color-mix(in srgb, var(--bg) 80%, #fff); } /* ---- Sticky mobile booking bar (phone-first) -------------------------- */ body.style-clean-girl .mobile-cta { display: none; } @media (max-width: 760px) { body.style-clean-girl .mobile-cta { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 80; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.4rem; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 700; text-decoration: none; color: var(--accent-fg); background: linear-gradient(180deg, var(--gloss), transparent 42%), var(--accent); box-shadow: 0 18px 36px -12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.5); } body.style-clean-girl .mobile-cta__icon { color: var(--accent-fg); } /* lift content above the floating bar so nothing hides behind it */ body.style-clean-girl .site-footer { padding-bottom: 5.5rem; } } /* ---- Respect reduced-motion ------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.style-clean-girl .marquee__track, body.style-clean-girl .hero__panel { animation: none; } body.style-clean-girl .badge:hover { animation: none; } }