/* ===== SalonRize global styles (merged: tokens + site + pages + about-v2) ===== */ /* ============================================================ SalonRize, COLORS & TYPE (from SalonRize Design System) Base tokens + semantic element styles. Self-hosted fonts. Set data-theme="dark|light" on . Light is default here. ============================================================ */ @font-face{font-family:"Be Vietnam Pro";font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/BeVietnamPro-Light.ttf") format("truetype")} @font-face{font-family:"Be Vietnam Pro";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/BeVietnamPro-Regular.ttf") format("truetype")} @font-face{font-family:"Be Vietnam Pro";font-weight:400;font-style:italic;font-display:swap;src:url("../fonts/BeVietnamPro-Italic.ttf") format("truetype")} @font-face{font-family:"Be Vietnam Pro";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/BeVietnamPro-Medium.ttf") format("truetype")} @font-face{font-family:"Be Vietnam Pro";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/BeVietnamPro-SemiBold.ttf") format("truetype")} @font-face{font-family:"Be Vietnam Pro";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/BeVietnamPro-Bold.ttf") format("truetype")} @font-face{font-family:"Be Vietnam Pro";font-weight:800;font-style:normal;font-display:swap;src:url("../fonts/BeVietnamPro-ExtraBold.ttf") format("truetype")} @font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/JetBrainsMono-Regular.ttf") format("truetype")} @font-face{font-family:"JetBrains Mono";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/JetBrainsMono-Medium.ttf") format("truetype")} @font-face{font-family:"JetBrains Mono";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/JetBrainsMono-Bold.ttf") format("truetype")} :root { --font-sans:"Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; --font-display:"Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --color-violet-50:#F7F1FE;--color-violet-100:#ECDDFD;--color-violet-200:#D6B6FC;--color-violet-300:#B77EFC;--color-violet-400:#9945FC;--color-violet-500:#7A0DFD;--color-violet-600:#6704DC;--color-violet-700:#5407B0;--color-violet-800:#400A80;--color-violet-900:#2B0953;--color-violet-950:#1A0632; --color-fuchsia-50:#FCF1FE;--color-fuchsia-100:#F8DDFD;--color-fuchsia-200:#F1B6FC;--color-fuchsia-300:#E77EFC;--color-fuchsia-400:#DE45FC;--color-fuchsia-500:#D60DFD;--color-fuchsia-600:#B904DC;--color-fuchsia-700:#9507B0;--color-fuchsia-800:#6D0A80;--color-fuchsia-900:#470953;--color-fuchsia-950:#2B0632; --color-blue-50:#F1F2FE;--color-blue-100:#DDE0FD;--color-blue-200:#B6BBFC;--color-blue-300:#7E87FC;--color-blue-400:#4552FC;--color-blue-500:#0D1EFD;--color-blue-600:#0414DC;--color-blue-700:#0713B0;--color-blue-800:#0A1280;--color-blue-900:#090E53;--color-blue-950:#060932; --color-neutral-50:#FBFBFB;--color-neutral-100:#F5F4F6;--color-neutral-200:#E5E3E8;--color-neutral-300:#C6C2CC;--color-neutral-400:#A29AAC;--color-neutral-500:#7D738C;--color-neutral-600:#645B71;--color-neutral-700:#4B4356;--color-neutral-800:#342D3E;--color-neutral-900:#201A28;--color-neutral-950:#130E1B; --color-success:#1FB57A;--color-warning:#F5A524;--color-danger:#F04E5E;--color-info:#4552FC; --on-success:#052E1E;--on-warning:#2E1B00;--on-danger:#FFFFFF;--on-info:#FFFFFF; --brand-primary:var(--color-violet-500);--brand-secondary:var(--color-fuchsia-500);--brand-tertiary:var(--color-blue-800); --brand-ink:#14012F;--brand-highlight:#FBF3FF; --gradient-mesh: linear-gradient(45deg, rgba(14,0,34,0) 0%, rgba(14,0,34,0.16) 13%, rgba(14,0,34,0.55) 24%, rgba(14,0,34,0.8) 33%, rgba(14,0,34,0.55) 42%, rgba(14,0,34,0.16) 55%, rgba(14,0,34,0) 70%), radial-gradient(ellipse 55% 50% at 70% 18%, rgba(108,19,242,0.45) 0%, rgba(108,19,242,0) 100%), radial-gradient(ellipse 50% 50% at 0% 100%, rgba(18,58,192,0.8) 0%, rgba(18,58,192,0) 100%), radial-gradient(ellipse 50% 45% at 100% 0%, rgba(177,31,203,0.85) 0%, rgba(177,31,203,0) 100%), linear-gradient(45deg, #0C1A86 0%, #240A7E 28%, #3E07B4 52%, #5E0EDC 74%, #8C1AC2 100%); --gradient-action:linear-gradient(45deg, var(--color-violet-500) 0%, var(--color-fuchsia-500) 100%); --gradient-glow:radial-gradient(circle at 50% 30%, rgba(122,13,253,.55), transparent 70%); --chart-1:#7A0DFD;--chart-2:#D60DFD;--chart-3:#4552FC;--chart-4:#1FB57A;--chart-5:#F5A524;--chart-6:#FF6FB5;--chart-7:#22C6E0;--chart-8:#A78BFA; --text-xs:0.75rem;--leading-xs:1.5;--text-sm:0.875rem;--leading-sm:1.55;--text-base:1rem;--leading-base:1.6;--text-lg:1.125rem;--leading-lg:1.55;--text-xl:1.25rem;--leading-xl:1.4;--text-2xl:1.5625rem;--leading-2xl:1.3;--text-3xl:1.953rem;--leading-3xl:1.2;--text-4xl:2.441rem;--leading-4xl:1.15;--text-5xl:3.052rem;--leading-5xl:1.08;--text-6xl:3.815rem;--leading-6xl:1.04; --weight-thin:100;--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;--weight-black:900; --tracking-tight:-0.02em;--tracking-normal:0;--tracking-wide:0.04em;--tracking-wider:0.12em; --prose-max:68ch;--prose-paragraph-gap:1.15em; --space-0:0;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:2.5rem;--space-8:3rem;--space-9:4rem;--space-10:6rem;--space-11:8rem; --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:26px;--radius-2xl:36px;--radius-full:9999px; --border-width:1px;--border-width-thick:2px;--border-subtle:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.16); --opacity-disabled:0.4;--opacity-muted:0.64;--opacity-hover:0.88;--opacity-overlay:0.72;--opacity-scrim:0.45; --shadow-sm:0 1px 2px rgba(10,2,30,.4);--shadow-md:0 6px 18px rgba(10,2,30,.45);--shadow-lg:0 18px 48px rgba(10,2,30,.55);--shadow-xl:0 32px 80px rgba(10,2,30,.6); --glow-brand:0 0 0 1px rgba(122,13,253,.4),0 8px 32px rgba(122,13,253,.45);--glow-fuchsia:0 8px 32px rgba(214,13,253,.4); --z-base:0;--z-raised:10;--z-sticky:100;--z-overlay:200;--z-drawer:300;--z-modal:400;--z-popover:500;--z-toast:600;--z-tooltip:700; --bp-sm:640px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1280px;--bp-2xl:1536px; --container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1180px;--container-prose:720px;--grid-columns:12;--grid-gutter:var(--space-5); --icon-xs:14px;--icon-sm:18px;--icon-md:22px;--icon-lg:28px;--icon-xl:40px;--icon-stroke:2px; --control-height-sm:34px;--control-height-md:42px;--control-height-lg:52px;--control-padding-x:var(--space-5);--control-gap:var(--space-2);--control-radius:var(--radius-full); --field-height:46px;--field-radius:var(--radius-md);--field-padding-x:var(--space-4);--card-radius:var(--radius-xl);--card-padding:var(--space-6);--focus-ring-width:3px;--focus-ring-offset:2px; --ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-spring:cubic-bezier(.34,1.56,.64,1); --duration-instant:80ms;--duration-fast:140ms;--duration-base:240ms;--duration-slow:420ms;--duration-slower:640ms; } /* LIGHT semantic tokens (default). Declared FIRST so :root holds the light defaults; the dark block below overrides only when data-theme="dark". */ :root, [data-theme="light"] { --bg-base:var(--color-neutral-50);--bg-surface:#FFFFFF;--bg-elevated:#F1EEF6;--bg-overlay:rgba(20,1,47,.45);--bg-scrim:rgba(20,1,47,.35); --text-primary:var(--color-neutral-900);--text-secondary:var(--color-neutral-700);--text-muted:var(--color-neutral-500);--text-on-brand:#FFFFFF; --border-default:var(--color-neutral-200);--border-hover:var(--color-neutral-300); --action-primary:var(--color-violet-600);--action-primary-hover:var(--color-violet-700);--action-secondary:var(--color-fuchsia-600);--focus-ring:var(--color-violet-500); --link:var(--color-violet-600);--link-hover:var(--color-violet-700);--link-visited:var(--color-fuchsia-700); --selection-bg:rgba(122,13,253,.85);--selection-fg:#FFFFFF;--scrollbar-thumb:rgba(45,27,62,.28);--scrollbar-track:transparent;--skeleton-base:#ECE9F1;--skeleton-shine:#F7F5FA; } /* DARK semantic tokens. Declared AFTER light so it overrides when present. */ [data-theme="dark"] { --bg-base:#17131F;--bg-surface:#201A2B;--bg-elevated:#2A2238;--bg-overlay:rgba(23,19,31,.72);--bg-scrim:rgba(12,9,18,.6); --text-primary:#F1ECF7;--text-secondary:#C4BBD3;--text-muted:#8C849C;--text-on-brand:#FFFFFF; --border-default:var(--border-subtle);--border-hover:var(--border-strong); --action-primary:var(--brand-primary);--action-primary-hover:var(--color-violet-400);--action-secondary:var(--brand-secondary);--focus-ring:var(--color-violet-400); --link:var(--color-violet-300);--link-hover:var(--color-fuchsia-300);--link-visited:var(--color-violet-200); --selection-bg:rgba(138,43,255,.62);--selection-fg:#FFFFFF;--scrollbar-thumb:rgba(199,187,230,.25);--scrollbar-track:transparent;--skeleton-base:#241F30;--skeleton-shine:#2E2740; } ::selection{background:var(--selection-bg);color:var(--selection-fg);-webkit-text-fill-color:var(--selection-fg)} body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--text-primary);background:var(--bg-base);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} .display{font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:var(--text-6xl);line-height:var(--leading-6xl);letter-spacing:var(--tracking-tight);text-wrap:balance} h1{font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:var(--text-5xl);line-height:var(--leading-5xl);letter-spacing:var(--tracking-tight);text-wrap:balance} h2{font-weight:var(--weight-extrabold);font-size:var(--text-4xl);line-height:var(--leading-4xl);letter-spacing:var(--tracking-tight);text-wrap:balance} h3{font-weight:var(--weight-bold);font-size:var(--text-2xl);line-height:var(--leading-2xl);letter-spacing:var(--tracking-tight)} h4{font-weight:var(--weight-bold);font-size:var(--text-xl);line-height:var(--leading-xl)} h5{font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--leading-lg)} h6{font-weight:var(--weight-semibold);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)} p{color:var(--text-secondary);font-size:var(--text-base);line-height:var(--leading-base)} .prose{max-width:var(--prose-max)} .prose p + p{margin-top:var(--prose-paragraph-gap)} .lead{font-size:var(--text-lg);line-height:var(--leading-lg);color:var(--text-muted);max-width:64ch} .eyebrow{display:inline-block;font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-violet-600)} [data-theme="dark"] .eyebrow{color:var(--color-violet-300)} small,.text-sm{font-size:var(--text-sm);line-height:var(--leading-sm)} .text-xs{font-size:var(--text-xs);line-height:var(--leading-xs)} a{color:var(--link);text-decoration:none} a:hover{color:var(--link-hover)} strong,b{font-weight:var(--weight-bold);color:var(--text-primary)} .mono,code,kbd,pre,samp{font-family:var(--font-mono);font-variant-ligatures:none;font-feature-settings:"liga" 0} code{font-size:.85em;background:var(--bg-elevated);padding:2px 7px;border-radius:6px;color:var(--text-primary)} .text-gradient{background:var(--gradient-action);-webkit-background-clip:text;background-clip:text;color:transparent} /* ============ site.css ============ */ /* ============================================================ SalonRize site — shared chrome + common components Built on the SalonRize Design System tokens (tokens.css). ============================================================ */ *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;overflow-x:clip} /* overflow-x:clip on both html and body prevents any transformed/translated child (e.g. the Rize fan-out cards) from creating a horizontally pannable area on iOS Safari, which would otherwise shift the fixed scroll-top button off-screen. clip (not hidden) keeps vertical scrolling untouched. */ body{margin:0;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);overflow-x:clip} img{max-width:100%;display:block} .lucide,svg.lucide{stroke-width:2;stroke-linecap:round;stroke-linejoin:round} [hidden]{display:none !important} :focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:4px} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:99px;border:3px solid transparent;background-clip:content-box} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .wrap-narrow{max-width:860px;margin:0 auto;padding:0 24px} section{position:relative} .eyebrow{margin-bottom:12px} /* ---------- Buttons ---------- */ .btn{font-family:var(--font-sans);font-weight:600;border:none;cursor:pointer;border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),background var(--duration-fast);white-space:nowrap;text-decoration:none} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn .lucide{width:18px;height:18px} .btn.lg{height:52px;padding:0 28px;font-size:1.125rem} .btn.md{height:44px;padding:0 22px;font-size:1rem} .btn.sm{height:36px;padding:0 16px;font-size:.875rem} .btn.primary{background:var(--gradient-action);color:#fff;box-shadow:var(--glow-brand)} .btn.primary:hover{color:#fff} .btn.ghost{background:transparent;color:var(--text-primary);border:1px solid var(--border-hover)} .btn.ghost:hover{color:var(--text-primary);background:var(--bg-elevated)} /* White ghost buttons sitting on a mesh band (hero pageheads + CTA bands): keep text white and use a translucent-white hover, like the homepage hero */ .pagehead .btn.ghost:hover,.ctaband .btn.ghost:hover{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)} .btn.subtle{background:var(--bg-elevated);color:var(--text-primary)} .btn.white{background:#fff;color:var(--brand-ink)} .btn.white:hover{color:var(--brand-ink)} .btn.block{width:100%} /* ---------- Pills / chips / badges ---------- */ .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-full);background:var(--bg-elevated);color:var(--text-secondary);font-size:.8rem;font-weight:600;border:1px solid var(--border-default)} .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:var(--radius-full);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:.8rem;font-weight:600;color:#F4EEFF;backdrop-filter:blur(6px)} .pill .lucide{width:15px;height:15px;color:var(--color-fuchsia-300)} .tag-violet{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-full);background:color-mix(in srgb,var(--color-violet-500) 12%,transparent);color:var(--action-primary);font-size:.78rem;font-weight:700;letter-spacing:.02em} /* ============================================================ TOP NAV + MEGA MENU Transparent over the dark hero, dark glass once scrolled. Text pinned light (every page opens on a dark mesh header). ============================================================ */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 24px;background:transparent;border-bottom:1px solid transparent;color:#F4EEFF;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out)} .nav.scrolled,.nav.menu-open{background:rgba(17,7,38,.82);backdrop-filter:blur(16px);border-bottom-color:rgba(255,255,255,.1)} .nav-inner{max-width:1180px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px} .nav .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.4rem;letter-spacing:-.02em;cursor:pointer;color:#F8F4FF;text-decoration:none} .nav .brand:hover{color:#F8F4FF} .nav .brand img{width:34px;height:34px} .nav-links{display:flex;gap:2px;align-items:center} .nav-item{position:relative} .nav-item>a,.nav-item>button{position:relative;font-family:var(--font-sans);font-size:.9rem;font-weight:600;color:#CBC0E6;padding:9px 14px;border-radius:var(--radius-full);cursor:pointer;background:none;border:none;display:inline-flex;align-items:center;gap:5px;text-decoration:none;transition:background var(--duration-fast),color var(--duration-fast)} /* hover bridge: only as wide as the button, sits in the gap directly below it, so it never overlaps neighbouring nav items */ .nav-item[data-mega].open>button::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px} .nav-item>a:hover,.nav-item>button:hover,.nav-item.open>button,.nav-item>a.active{background:rgba(255,255,255,.12);color:#fff} .nav-item .caret{width:15px;height:15px;transition:transform var(--duration-base) var(--ease-out)} .nav-item.open .caret{transform:rotate(180deg)} .nav .actions{display:flex;align-items:center;gap:10px} /* segmented switches (theme + lang) */ .seg{display:inline-flex;align-items:center;gap:2px;border-radius:var(--radius-full);padding:3px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);flex:0 0 auto} .seg button{min-width:30px;height:30px;padding:0 9px;border:none;background:none;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#C9BBE6;font-family:var(--font-sans);font-size:.75rem;font-weight:700;transition:background var(--duration-fast),color var(--duration-fast)} .seg button .lucide{width:16px;height:16px} .seg button.on{background:var(--gradient-action);color:#fff} .menubtn{display:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#F4EEFF;cursor:pointer;width:40px;height:40px;border-radius:var(--radius-full);align-items:center;justify-content:center} /* language dropdown (select-style, scales to many languages) */ .langsel{position:relative;flex:0 0 auto} .langsel-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;border-radius:var(--radius-full);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#F4EEFF;font-family:var(--font-sans);font-weight:700;font-size:.8rem;cursor:pointer} .langsel-btn:hover{background:rgba(255,255,255,.16)} .langsel-btn .lucide{width:15px;height:15px} .langsel-btn .caret{width:13px;height:13px;opacity:.8;transition:transform var(--duration-base) var(--ease-out)} .langsel.open .langsel-btn .caret{transform:rotate(180deg)} .langsel-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:178px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;transition:opacity var(--duration-fast),transform var(--duration-fast);z-index:130} .langsel.open .langsel-menu{opacity:1;visibility:visible;transform:none;pointer-events:auto} .langsel-menu button,.langsel-menu a{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;padding:9px 11px;border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);font-size:.9rem;font-weight:500;cursor:pointer;text-decoration:none} .langsel-menu button:hover,.langsel-menu a:hover{background:var(--bg-elevated)} .langsel-menu button.on,.langsel-menu a.on{color:var(--action-primary);font-weight:700} .langsel-menu .code{font-family:var(--font-mono);font-size:.7rem;font-weight:700;min-width:28px;height:22px;border-radius:6px;background:var(--bg-elevated);display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted)} .langsel-menu button.on .code,.langsel-menu a.on .code{background:var(--gradient-action);color:#fff} .drawer .langsel-btn{background:var(--bg-elevated);border-color:var(--border-default);color:var(--text-primary)} .drawer .langsel-menu{left:0;right:auto} /* mega menu panel */ .mega{position:absolute;top:calc(100% + 12px);left:0;transform:translateY(8px);min-width:560px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);z-index:120} .mega.mega-right{left:auto;right:0} .nav-item.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .mega.wide{min-width:720px} .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mega-grid.three{grid-template-columns:1fr 1fr 1fr} .mega-link{display:flex;gap:13px;padding:13px;border-radius:var(--radius-md);text-decoration:none;color:var(--text-primary);transition:background var(--duration-fast)} .mega-link:hover{background:var(--bg-elevated);color:var(--text-primary)} .mega-link .mi{width:42px;height:42px;border-radius:var(--radius-md);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;color:var(--action-primary);flex:0 0 auto;transition:background var(--duration-fast),color var(--duration-fast)} .mega-link:hover .mi{background:var(--gradient-action);color:#fff} .mega-link .mi .lucide{width:21px;height:21px} .mega-link .mt{display:block;font-weight:700;font-size:.95rem;margin:0 0 2px} .mega-link .md{display:block;font-size:.8rem;color:var(--text-muted);margin:0;line-height:1.45} .mega-foot{margin-top:14px;padding:16px;border-radius:var(--radius-lg);background:linear-gradient(120deg,var(--color-violet-600),var(--color-fuchsia-600));display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff} .mega-foot .mf-t{font-weight:700;font-size:.95rem;color:#fff} .mega-foot .mf-d{font-size:.8rem;color:rgba(255,255,255,.85)} .mega-col-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);font-weight:700;padding:8px 13px 4px} @media(max-width:1040px){.nav-links{display:none}.menubtn{display:flex}.nav .actions>.langsel,.nav .actions>.seg,.nav .actions>.btn{display:none}} /* mobile drawer */ .drawer{position:fixed;inset:0;z-index:300;background:var(--bg-base);padding:18px 20px 40px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;transform:translateX(100%);transition:transform var(--duration-base) var(--ease-out)} .drawer.open{transform:translateX(0)} .drawer .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .drawer .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;color:var(--text-primary)} .drawer .brand img{width:30px;height:30px} .drawer .closebtn{background:var(--bg-elevated);border:none;color:var(--text-primary);width:40px;height:40px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer} .drawer .d-link{font-size:1.1rem;font-weight:600;padding:14px 4px;border-bottom:1px solid var(--border-default);color:var(--text-primary);text-decoration:none;display:flex;justify-content:space-between;align-items:center} .drawer .d-group>button{width:100%;background:none;border:none;border-bottom:1px solid var(--border-default);color:var(--text-primary);font-family:var(--font-sans);font-size:1.1rem;font-weight:600;padding:14px 4px;display:flex;justify-content:space-between;align-items:center;cursor:pointer} .drawer .d-sub{display:none;flex-direction:column;padding:4px 0 10px 8px} .drawer .d-group.open .d-sub{display:flex} .drawer .d-group.open>button .caret{transform:rotate(180deg)} .drawer .d-sub a{padding:10px 6px;color:var(--text-secondary);font-size:.98rem;text-decoration:none} .drawer .d-sub a:hover{color:var(--action-primary)} .drawer .caret{width:18px;height:18px;transition:transform var(--duration-base)} .drawer .d-actions{display:flex;align-items:center;gap:10px;margin-top:20px} .drawer .seg{background:var(--bg-elevated);border-color:var(--border-default)} .drawer .seg button{color:var(--text-muted)} .drawer .seg button.on{color:#fff} /* ============================================================ HERO (dark mesh, pulled up behind fixed nav) ============================================================ */ .hero{position:relative;overflow:hidden;background-image:var(--gradient-mesh);padding:150px 0 110px} /* mobile: show the LEFT (blue/violet) portion of the desktop gradient, not the magenta right */ @media(max-width:760px){.hero,.pagehead,.nf{background-size:1440px 100%;background-position:left top;background-repeat:no-repeat}} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 60%,#160A2E 100%);pointer-events:none} /* dark mode: blend hero seamlessly into the page below instead of a hard edge */ [data-theme="dark"] .hero::after{background:linear-gradient(to bottom,transparent 48%,var(--bg-base) 100%)} .hero .wrap{position:relative;z-index:2} .hero h1{color:#F8F4FF;margin:0} .hero h1 .g{background:linear-gradient(90deg,#E77EFC,#B77EFC);-webkit-background-clip:text;background-clip:text;color:transparent} .hero p.sub{font-size:1.2rem;color:#D8CCEF;line-height:1.55} .hero-pagehead{padding:148px 0 90px} /* page header (compact mesh band for inner pages) */ .pagehead{position:relative;overflow:hidden;background-image:var(--gradient-mesh);padding:150px 0 70px} .pagehead::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,#160A2E 100%);pointer-events:none} [data-theme="dark"] .pagehead::after{background:linear-gradient(to bottom,transparent 50%,var(--bg-base) 100%)} .pagehead .wrap{position:relative;z-index:2} .pagehead .crumbs{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#C9BBE6;margin-bottom:18px;flex-wrap:wrap} .pagehead .crumbs a{color:#C9BBE6;text-decoration:none} .pagehead .crumbs a:hover{color:#fff} .pagehead .crumbs .lucide{width:14px;height:14px;opacity:.6} .pagehead h1{color:#F8F4FF;margin:0 0 14px;font-size:clamp(2.2rem,5vw,3.2rem)} .pagehead h1 .g{background:linear-gradient(90deg,#E77EFC,#B77EFC);-webkit-background-clip:text;background-clip:text;color:transparent} .pagehead .eyebrow{color:var(--color-fuchsia-300)} .pagehead p{color:#D8CCEF;font-size:1.15rem;max-width:60ch;margin:0} /* stat cards on dark hero */ .statcard{background:rgba(28,10,62,.55);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:18px 22px;min-width:148px;backdrop-filter:blur(8px)} .statcard .n{font-size:2rem;font-weight:800;letter-spacing:-.02em;background:var(--gradient-action);-webkit-background-clip:text;background-clip:text;color:transparent} .statcard .l{font-size:.8rem;color:#C9BBE6;margin-top:2px} /* ---------- Section heading ---------- */ .sec{padding:84px 0} .sec.nb{padding:84px 0} .sec.alt{background:var(--bg-surface)} .sechead{max-width:720px;margin:0 auto 48px;text-align:center} .sechead h2{font-size:var(--text-4xl);font-weight:800;letter-spacing:-.02em;margin:0 0 12px} .sechead p{font-size:1.125rem;color:var(--text-muted);margin:0} .sechead.left{margin-left:0;text-align:left} /* ---------- Service / feature cards ---------- */ .svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:860px){.svcgrid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.svcgrid{grid-template-columns:1fr}} .svc{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:26px;transition:border-color var(--duration-base),transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base);text-decoration:none;color:inherit;display:block} .svc:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-md)} .svc .ic{width:50px;height:50px;border-radius:var(--radius-md);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;color:var(--action-primary);margin-bottom:16px;transition:background var(--duration-base),color var(--duration-base)} .svc:hover .ic{background:var(--gradient-action);color:#fff} .svc .ic .lucide{width:24px;height:24px} .svc h3{font-size:1.2rem;font-weight:700;margin:0 0 7px;color:var(--text-primary)} .svc p{font-size:.92rem;margin:0;line-height:1.55} .svc .more{margin-top:16px;display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--action-primary)} .svc .more .lucide{width:15px;height:15px;transition:transform var(--duration-fast)} .svc:hover .more .lucide{transform:translateX(3px)} /* ---------- CTA band ---------- */ .ctaband{background-image:var(--gradient-mesh);border-radius:var(--radius-2xl);padding:64px 40px;text-align:center;position:relative;overflow:hidden} .ctaband h2{font-size:var(--text-4xl);font-weight:800;letter-spacing:-.02em;color:#F8F4FF;margin:0 0 12px;position:relative;z-index:1} .ctaband p{color:#D8CCEF;font-size:1.1rem;margin:0 auto 28px;max-width:46ch;position:relative;z-index:1} .ctaband .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1} /* ---------- Footer ---------- */ .foot{border-top:1px solid var(--border-default);padding:56px 0 36px;background:var(--bg-surface)} .footgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:28px} @media(max-width:860px){.footgrid{grid-template-columns:1fr 1fr}} @media(max-width:480px){.footgrid{grid-template-columns:1fr}} .foot .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35rem;letter-spacing:-.02em;margin-bottom:14px;color:var(--text-primary);text-decoration:none} .foot .brand img{width:34px;height:34px} .foot .ftag{color:var(--text-muted);font-size:.9rem;max-width:32ch;line-height:1.6} .foot h5{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin:0 0 14px;font-weight:700} .foot .col a{display:block;font-size:.9rem;color:var(--text-secondary);padding:5px 0;cursor:pointer;text-decoration:none} .foot .col a:hover{color:var(--action-primary)} .foot .social{display:flex;gap:10px;margin-top:18px} .foot .social a{width:38px;height:38px;border-radius:50%;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast)} .foot .social a:hover{background:var(--gradient-action)} .foot .social svg{width:17px;height:17px;fill:var(--text-secondary)} .foot .social a:hover svg{fill:#fff} .foot .social a img{width:17px;height:17px;transition:filter var(--duration-fast)} .foot .social a:hover img{filter:brightness(0) invert(1)} .foot .bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:42px;padding-top:24px;border-top:1px solid var(--border-default);color:var(--text-muted);font-size:.82rem} .foot .bottom .links{display:flex;gap:20px;flex-wrap:wrap} .foot .bottom a{color:var(--text-muted);text-decoration:none} .foot .bottom a:hover{color:var(--text-secondary)} @media(max-width:560px){.foot .bottom{flex-direction:column;align-items:center;text-align:center}} /* ---------- Reveal-on-scroll ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important;transition:none}*{scroll-behavior:auto}} /* lang visibility: JS sets [data-lang] on . Default vi. */ .scroll-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--gradient-action);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--glow-brand);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity var(--duration-base),transform var(--duration-base);z-index:90} .scroll-top.show{opacity:1;pointer-events:auto;transform:none} .scroll-top .lucide{width:20px;height:20px} /* ============ pages.css ============ */ /* ============================================================ SalonRize site — page-specific components ============================================================ */ /* ---------- Generic grid helpers ---------- */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:860px){.grid-2{grid-template-columns:1fr;gap:32px}.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:1fr 1fr}} @media(max-width:560px){.grid-4{grid-template-columns:1fr}} .card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--card-padding)} .card.pad-lg{padding:40px} .surface-soft{background:var(--bg-elevated);border-radius:var(--radius-xl)} /* abstract gradient placeholder (used instead of photos) */ .gfx{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--brand-ink);background-image:var(--gradient-mesh);min-height:280px;border:1px solid var(--border-default)} .gfx.tall{min-height:440px} .gfx.square{aspect-ratio:1/1;min-height:0} .gfx.wide{aspect-ratio:16/10;min-height:0} .gfx .orbit{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.16)} .gfx .blob{position:absolute;border-radius:50%;filter:blur(36px);opacity:.6} .gfx .glabel{position:absolute;left:22px;bottom:20px;z-index:3;color:#fff;font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:8px} .gfx .glabel .lucide{width:18px;height:18px;color:var(--color-fuchsia-300)} .gfx .ring-ic{position:absolute;width:54px;height:54px;border-radius:var(--radius-md);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;backdrop-filter:blur(6px)} .gfx .ring-ic .lucide{width:26px;height:26px} /* floating mini dashboard card (hero collage) */ .minicard{background:rgba(255,255,255,.95);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-lg);color:var(--color-neutral-900)} [data-theme="dark"] .minicard{background:var(--bg-elevated);color:var(--text-primary)} .minicard .mc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .minicard .mc-lab{font-size:.74rem;color:var(--color-neutral-500);font-weight:600} [data-theme="dark"] .minicard .mc-lab{color:var(--text-muted)} .minicard .mc-big{font-size:1.6rem;font-weight:800;letter-spacing:-.02em} .minicard .mc-up{font-size:.74rem;font-weight:700;color:var(--color-success);background:color-mix(in srgb,var(--color-success) 16%,transparent);padding:3px 8px;border-radius:99px} .bars{display:flex;align-items:flex-end;gap:6px;height:64px} .bars span{flex:1;border-radius:5px 5px 0 0;background:var(--gradient-action);opacity:.85} /* ---------- Proof / testimonial ---------- */ .proofgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center} @media(max-width:860px){.proofgrid{grid-template-columns:1fr;gap:32px}} .quote{font-size:1.7rem;font-weight:700;line-height:1.35;letter-spacing:-.01em;text-wrap:balance;color:var(--text-primary)} .quote .g{background:var(--gradient-action);-webkit-background-clip:text;background-clip:text;color:transparent} .byline{display:flex;align-items:center;gap:13px;margin-top:24px} .byline .av{width:46px;height:46px;border-radius:50%;background:var(--gradient-action);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex:0 0 auto} .byline .nm{font-weight:700;font-size:.95rem;color:var(--text-primary)} .byline .rl{font-size:.82rem;color:var(--text-muted)} .resultcard{background:var(--bg-base);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:26px;box-shadow:var(--shadow-md)} .resultcard .rhead{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-weight:700;margin-bottom:14px} .resultcard .rr{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border-default)} .resultcard .rr:last-child{border:none;padding-bottom:0} .resultcard .rr:first-of-type{padding-top:0} .resultcard .rl{font-size:.9rem;color:var(--text-secondary)} .resultcard .rv{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)} .resultcard .up{color:var(--color-success);font-size:.82rem;font-weight:700;display:inline-flex;align-items:center;gap:3px} .resultcard .up .lucide{width:13px;height:13px} /* testimonial cards grid */ .tcard{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:28px;height:100%;display:flex;flex-direction:column} .tcard .qicon{color:var(--action-primary);opacity:.3;margin-bottom:12px} .tcard .qicon .lucide{width:30px;height:30px} .tcard .stars{display:flex;gap:3px;margin:14px 0} .tcard .stars .lucide{width:17px;height:17px;fill:var(--color-warning);color:var(--color-warning)} .tcard p{color:var(--text-primary);line-height:1.6;font-size:.96rem} /* ---------- Logos / trust strip ---------- */ .trust-row{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center;opacity:.8} .trust-row .item{display:flex;align-items:center;gap:9px;color:var(--text-muted);font-weight:700;font-size:.95rem} .trust-row .item .lucide{width:20px;height:20px} /* ---------- Stat band ---------- */ .statband{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} @media(max-width:680px){.statband{grid-template-columns:1fr 1fr}} @media(max-width:560px){.statband{grid-template-columns:1fr}} .statband .s{text-align:center} .statband .s .v{font-size:clamp(2.2rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;background:var(--gradient-action);-webkit-background-clip:text;background-clip:text;color:transparent} .statband .s .l{color:var(--text-muted);font-size:.9rem;margin-top:4px} /* ---------- Steps / process ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:860px){.steps{grid-template-columns:1fr 1fr}} @media(max-width:520px){.steps{grid-template-columns:1fr}} .step{position:relative;overflow:hidden;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:26px} .step .num{position:absolute;top:-10px;right:6px;font-size:5rem;font-weight:800;color:var(--action-primary);opacity:.08;line-height:1} .step .k{font-size:.8rem;font-weight:700;color:var(--action-primary);margin-bottom:8px} .step h4{margin:0 0 6px;font-size:1.1rem} .step p{margin:0;font-size:.9rem} /* feature list with check */ .featlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px} .featlist li{display:flex;gap:11px;align-items:flex-start;color:var(--text-secondary);font-size:.96rem} .featlist li .lucide{width:20px;height:20px;color:var(--color-success);flex:0 0 auto;margin-top:2px} /* mini feature grid (Rize features) */ .featgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:860px){.featgrid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.featgrid{grid-template-columns:1fr}} .feat{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:22px} .feat .fi{width:46px;height:46px;border-radius:var(--radius-md);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;color:var(--action-primary);margin-bottom:14px} .feat .fi .lucide{width:22px;height:22px} .feat h4{margin:0 0 6px;font-size:1.02rem} .feat p{margin:0;font-size:.86rem;line-height:1.5} /* ---------- Pricing ---------- */ .toggle{display:inline-flex;background:var(--bg-elevated);border:1px solid var(--border-hover);border-radius:var(--radius-full);padding:4px;gap:4px} .toggle button{font-family:var(--font-sans);font-size:.875rem;font-weight:600;border:none;background:transparent;color:var(--text-secondary);padding:9px 18px;border-radius:var(--radius-full);cursor:pointer;transition:color var(--duration-fast)} .toggle button.on{background:var(--gradient-action);color:#fff} .toggle .save{font-size:.7rem;opacity:.85;margin-left:5px} .pricegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start} @media(max-width:860px){.pricegrid{grid-template-columns:1fr}} .plan{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:30px 26px;display:flex;flex-direction:column;gap:18px} .plan.feat{border-color:transparent;box-shadow:var(--glow-brand);position:relative;background:linear-gradient(180deg,#23104d,#1a0a3a)} .plan .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gradient-action);color:#fff;font-size:.72rem;font-weight:700;padding:5px 13px;border-radius:var(--radius-full);letter-spacing:.04em;white-space:nowrap} .plan h3{font-size:1.25rem;font-weight:700;margin:0} .plan .desc{font-size:.86rem;color:var(--text-muted);margin:-8px 0 0;min-height:38px} .plan .price{display:flex;align-items:flex-end;gap:5px} .plan .price .amt{font-size:2.6rem;font-weight:800;letter-spacing:-.02em;line-height:1} .plan .price .per{font-size:.85rem;color:var(--text-muted);padding-bottom:6px} .plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .plan li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--text-secondary)} .plan li .lucide{width:18px;height:18px;color:var(--action-primary);flex:0 0 auto;margin-top:1px} .plan.feat h3,.plan.feat .price .amt{color:#fff} .plan.feat .desc,.plan.feat .price .per{color:#C9BBE6} .plan.feat li{color:#E7DEF2} .plan.feat li .lucide{color:var(--color-fuchsia-300)} /* ---------- Blog ---------- */ .bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:900px){.bloggrid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.bloggrid{grid-template-columns:1fr}} .post{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base),border-color var(--duration-base)} .post:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-hover)} .post .cover{height:180px;position:relative;overflow:hidden;background-image:linear-gradient(180deg,rgba(20,1,47,.08),rgba(20,1,47,.28)),var(--cover-image,var(--gradient-mesh));background-size:cover;background-position:center} .post .cover .cat{position:absolute;top:12px;left:12px;z-index:2;background:rgba(20,1,47,.6);color:#fff;font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:99px;backdrop-filter:blur(6px)} .post .cover .glyph{position:absolute;right:14px;bottom:12px;color:rgba(255,255,255,.85)} .post .cover .glyph .lucide{width:30px;height:30px} .post .body{padding:20px;display:flex;flex-direction:column;flex:1} .post h3{font-size:1.08rem;font-weight:700;margin:0 0 9px;line-height:1.32;color:var(--text-primary)} .post .ex{font-size:.88rem;color:var(--text-muted);margin:0 0 16px;line-height:1.5;flex:1} .post .meta{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--text-muted);margin-top:auto} .post .meta .av{width:28px;height:28px;border-radius:50%;background:var(--gradient-action);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800} .post .meta .dot{opacity:.5} .post.feature{grid-column:1/-1;flex-direction:row} .post.feature .cover{width:46%;height:auto;min-height:300px;flex:0 0 auto} .post.feature .body{padding:36px;justify-content:center} .post.feature h3{font-size:1.7rem;line-height:1.2} .post.feature .ex{font-size:1rem} @media(max-width:760px){.post.feature{flex-direction:column}.post.feature .cover{width:100%;min-height:200px}} .blogfilters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px;justify-content:center} .blogfilters button{font-family:var(--font-sans);font-size:.85rem;font-weight:600;padding:9px 16px;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast)} .blogfilters button:hover{border-color:var(--border-hover);color:var(--text-primary)} .blogfilters button.on{background:var(--gradient-action);color:#fff;border-color:transparent} /* blog detail */ .article{max-width:760px;margin:0 auto} .article .ameta{display:flex;align-items:center;gap:14px;margin:0 0 30px;flex-wrap:wrap;color:var(--text-muted);font-size:.86rem} .article .ameta .av{width:42px;height:42px;border-radius:50%;background:var(--gradient-action);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800} .article .lede{font-size:1.2rem;color:var(--text-secondary);line-height:1.6;margin:0 0 28px} .article h2{font-size:1.7rem;margin:38px 0 14px} .article h3{font-size:1.3rem;margin:30px 0 12px} .article p{font-size:1.04rem;color:var(--text-secondary);line-height:1.7;margin:0 0 18px} .article ul,.article ol{color:var(--text-secondary);line-height:1.7;padding-left:22px;margin:0 0 18px} .article li{margin-bottom:8px} .article blockquote{margin:26px 0;padding:18px 24px;border-left:3px solid var(--action-primary);background:var(--bg-surface);border-radius:0 var(--radius-md) var(--radius-md) 0;font-size:1.1rem;font-weight:600;color:var(--text-primary)} .article .acover{height:340px;border-radius:var(--radius-xl);margin-bottom:34px;position:relative;overflow:hidden;background-image:linear-gradient(180deg,rgba(20,1,47,.04),rgba(20,1,47,.24)),var(--cover-image,var(--gradient-mesh));background-size:cover;background-position:center} .article figure{margin:26px 0} .tocbox{position:sticky;top:96px} .share-row{display:flex;gap:10px;align-items:center;margin:36px 0;padding:20px 0;border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default)} .share-row .sbtn{width:40px;height:40px;border-radius:50%;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);cursor:pointer;border:none} .share-row .sbtn:hover{background:var(--gradient-action);color:#fff} .share-row .sbtn .lucide{width:18px;height:18px} /* ---------- FAQ accordion ---------- */ .faqlist{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .faq{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden} .faq>button{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:1.05rem;font-weight:600;color:var(--text-primary);padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px} .faq .fq-ic{width:26px;height:26px;border-radius:50%;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background var(--duration-fast),transform var(--duration-base)} .faq .fq-ic .lucide{width:16px;height:16px;color:var(--action-primary)} .faq.open .fq-ic{background:var(--gradient-action);transform:rotate(45deg)} .faq.open .fq-ic .lucide{color:#fff} .faq .ans{max-height:0;overflow:hidden;transition:max-height var(--duration-slow) var(--ease-out)} .faq .ans-in{padding:0 22px 20px;color:var(--text-secondary);line-height:1.65;font-size:.96rem} .faqcats{display:flex;flex-direction:column;gap:30px} .faqcats h3{margin:0 0 14px;font-size:1.3rem} /* ---------- Contact ---------- */ .contactgrid{display:grid;grid-template-columns:1fr 1.2fr;gap:42px;align-items:start} @media(max-width:860px){.contactgrid{grid-template-columns:1fr;gap:32px}} .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} .field label{font-size:.85rem;font-weight:600;color:var(--text-secondary)} .field input,.field select,.field textarea{width:100%;height:var(--field-height);border-radius:var(--field-radius);border:1px solid var(--border-hover);background:var(--bg-base);color:var(--text-primary);padding:0 16px;font-family:var(--font-sans);font-size:1rem;transition:border-color var(--duration-fast)} .field textarea{height:auto;min-height:120px;padding:13px 16px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--focus-ring);outline-offset:2px;border-color:transparent} .field .err{font-size:.78rem;color:var(--color-danger);display:none} .field.invalid .err{display:block} .field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--color-danger)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:520px){.field-row{grid-template-columns:1fr}} .contact-info{display:flex;flex-direction:column;gap:16px} .cinfo{display:flex;gap:14px;align-items:flex-start;padding:18px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg)} .cinfo .ci{width:44px;height:44px;border-radius:var(--radius-md);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;color:var(--action-primary);flex:0 0 auto} .cinfo .ci .lucide{width:21px;height:21px} .cinfo .ct{font-weight:700;font-size:.95rem;margin:0 0 2px} .cinfo .cd{font-size:.88rem;color:var(--text-muted);margin:0} .form-ok{display:none;text-align:center;padding:30px} .form-ok.show{display:block} .form-ok .ck{width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--color-success) 16%,transparent);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--color-success)} .form-ok .ck .lucide{width:32px;height:32px} /* ---------- About timeline + values ---------- */ .timeline{display:flex;flex-direction:column;gap:0;position:relative} .tl-item{display:grid;grid-template-columns:130px 1fr;gap:28px;padding:0 0 36px;position:relative} .tl-item:last-child{padding-bottom:0} .tl-item::before{content:"";position:absolute;left:140px;top:34px;bottom:-2px;width:2px;background:var(--border-default)} .tl-item:last-child::before{display:none} .tl-year{justify-self:start;background:var(--gradient-action);color:#fff;font-weight:700;font-size:.85rem;padding:7px 15px;border-radius:var(--radius-full);height:fit-content} .tl-dot{position:absolute;left:135px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--action-primary);border:3px solid var(--bg-base);z-index:2} .tl-body h4{margin:0 0 7px;font-size:1.15rem} .tl-body p{margin:0} @media(max-width:620px){.tl-item{grid-template-columns:1fr;gap:12px}.tl-item::before,.tl-dot{display:none}} .value{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:26px;text-align:center;height:100%} .value .vi{width:56px;height:56px;border-radius:50%;background:var(--gradient-action);display:flex;align-items:center;justify-content:center;color:#fff;margin:0 auto 16px} .value .vi .lucide{width:26px;height:26px} .value h4{margin:0 0 7px;font-size:1.1rem} .value p{margin:0;font-size:.9rem} .team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:860px){.team{grid-template-columns:1fr 1fr}} .member{text-align:center} .member .ph{aspect-ratio:1/1;border-radius:var(--radius-xl);background-image:var(--gradient-mesh);position:relative;overflow:hidden;margin-bottom:14px;display:flex;align-items:center;justify-content:center} .member .ph .ini{font-size:2.2rem;font-weight:800;color:rgba(255,255,255,.9)} .member .mn{font-weight:700;font-size:1rem} .member .mr{font-size:.84rem;color:var(--text-muted)} /* ---------- Legal / doc prose ---------- */ .doc{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start} @media(max-width:860px){.doc{grid-template-columns:1fr}.doc .docnav{display:none}} .docnav{position:sticky;top:96px} .docnav .dn-title{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);font-weight:700;margin-bottom:12px} .docnav a{display:block;padding:8px 12px;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.88rem;text-decoration:none;border-left:2px solid transparent} .docnav a:hover,.docnav a.active{color:var(--action-primary);background:var(--bg-surface);border-left-color:var(--action-primary)} .docbody{max-width:720px} .docbody h2{font-size:1.5rem;margin:40px 0 14px;scroll-margin-top:96px} .docbody h2:first-child{margin-top:0} .docbody h3{font-size:1.15rem;margin:24px 0 10px} .docbody p,.docbody li{color:var(--text-secondary);line-height:1.7;font-size:1rem} .docbody p{margin:0 0 16px} .docbody ul{padding-left:22px;margin:0 0 16px} .docbody li{margin-bottom:8px} .doc-updated{color:var(--text-muted);font-size:.88rem;margin-bottom:8px} /* ---------- Partner badges ---------- */ .partners{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center} .partner{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border-default);border-radius:var(--radius-full);padding:9px 17px;font-size:.85rem;font-weight:600;color:var(--text-secondary);background:var(--bg-surface)} .partner img{width:18px;height:18px} .partner .lucide{width:17px;height:17px;color:var(--color-success)} /* ---------- Comparison ---------- */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch} @media(max-width:760px){.compare{grid-template-columns:1fr}} .compare .col{border-radius:var(--radius-xl);padding:30px;border:1px solid var(--border-default)} .compare .col.bad{background:var(--bg-surface)} .compare .col.good{background:linear-gradient(180deg,#23104d,#1a0a3a);border-color:transparent;box-shadow:var(--glow-brand)} .compare .ch{display:flex;align-items:center;gap:10px;margin-bottom:18px} .compare .ch .ci{width:38px;height:38px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .compare .bad .ci{background:var(--bg-elevated);color:var(--text-muted)} .compare .good .ci{background:var(--gradient-action);color:#fff} .compare h4{margin:0;font-size:1.15rem} .compare .good h4{color:#fff} .compare ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px} .compare li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;line-height:1.5} .compare li .lucide{width:19px;height:19px;flex:0 0 auto;margin-top:1px} .compare .bad li{color:var(--text-secondary)} .compare .bad li .lucide{color:var(--text-muted)} .compare .good li{color:#E7DEF2} .compare .good li .lucide{color:var(--color-fuchsia-300)} /* ---------- Case study highlight ---------- */ .casestudy{background-image:var(--gradient-mesh);border-radius:var(--radius-2xl);padding:48px;position:relative;overflow:hidden} .casestudy .cs-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;position:relative;z-index:1} @media(max-width:820px){.casestudy{padding:32px}.casestudy .cs-grid{grid-template-columns:1fr;gap:28px}} .casestudy .eyebrow{color:var(--color-fuchsia-300)} .casestudy h3{color:#F8F4FF;font-size:clamp(1.5rem,3vw,2rem);margin:10px 0 14px;line-height:1.2} .casestudy p{color:#D8CCEF;font-size:1.02rem;line-height:1.6;margin:0} .casestudy .cs-metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:560px){.casestudy .cs-metrics{grid-template-columns:1fr}} .casestudy .csm{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:20px;backdrop-filter:blur(6px)} .casestudy .csm .v{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#E77EFC);-webkit-background-clip:text;background-clip:text;color:transparent} .casestudy .csm .l{font-size:.82rem;color:#C9BBE6;margin-top:3px} /* ---------- FAQ teaser inline ---------- */ .faq-teaser{max-width:820px;margin:0 auto} /* ---------- 404 / misc ---------- */ .kpi-inline{display:inline-flex;align-items:baseline;gap:6px} .divider{height:1px;background:var(--border-default);border:none;margin:0} /* ============ about-v2.css ============ */ /* ============================================================ About v2 — section components (final layout) Reuses SalonRize tokens only. ============================================================ */ /* ============================================================ Story section = stats band + origin story (merged) ============================================================ */ .statsband{border-radius:var(--radius-2xl);overflow:hidden;background-image:var(--gradient-mesh);box-shadow:var(--shadow-lg)} .statsband .sbgrid{display:grid;grid-template-columns:repeat(3,1fr)} .statsband .sb{padding:38px 30px;text-align:center;position:relative} .statsband .sb + .sb::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:1px;background:rgba(255,255,255,.18)} .statsband .v{font-family:var(--font-mono);font-weight:800;font-size:clamp(2.6rem,5vw,3.4rem);line-height:1; letter-spacing:-.02em;background:linear-gradient(90deg,#FFFFFF,#E9DBFF);-webkit-background-clip:text;background-clip:text;color:transparent} .statsband .l{margin-top:10px;color:#EADFFB;font-size:.98rem} .statsband .sub{margin-top:3px;color:#C9BBE6;font-size:.82rem} @media(max-width:680px){.statsband .sbgrid{grid-template-columns:1fr} .statsband .sb + .sb::before{left:24px;right:24px;top:0;bottom:auto;width:auto;height:1px}} /* gap between the stats band and the story below (same section) */ .origin-wrap{margin-top:84px} @media(max-width:680px){.origin-wrap{margin-top:56px}} /* Origin story — centered, banner image on top */ .origin{display:block;max-width:880px;margin:0 auto;text-align:center} .origin-media{position:relative;margin-bottom:42px} .origin-media image-slot{display:block;width:100%;height:340px;border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);border:1px solid var(--border-default);background:var(--bg-elevated)} .origin-badge{position:absolute;right:18px;bottom:-16px;background:var(--bg-surface);border:1px solid var(--border-default); border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px 18px;display:flex;align-items:center;gap:12px} .origin-badge .bn{font-family:var(--font-mono);font-weight:800;font-size:1.7rem;line-height:1; background:var(--gradient-action);-webkit-background-clip:text;background-clip:text;color:transparent} .origin-badge .bl{font-size:.78rem;color:var(--text-muted);line-height:1.3;max-width:13ch} .origin-body h2{font-size:var(--text-4xl);font-weight:800;letter-spacing:-.02em;margin:14px 0 18px;text-wrap:balance} .origin-body p{color:var(--text-secondary);font-size:1.06rem;line-height:1.72;margin:0 auto 16px;max-width:60ch} .pullquote{margin:30px auto 0;max-width:600px;text-align:left;background:var(--bg-elevated);border:1px solid var(--border-default); border-radius:var(--radius-xl);padding:24px 26px;position:relative} .pullquote .qm{position:absolute;top:14px;right:18px;color:var(--action-primary);opacity:.28} .pullquote .qm .lucide{width:38px;height:38px} @media(max-width:560px){.pullquote .qm{top:12px;right:14px}.pullquote .qm .lucide{width:24px;height:24px}} .pullquote blockquote{margin:0;font-size:1.28rem;font-weight:700;line-height:1.45;letter-spacing:-.01em;color:var(--text-primary)} .pullquote .qa{margin-top:12px;display:flex;align-items:center;gap:9px;color:var(--text-muted);font-size:.88rem} .pullquote .qa::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--action-primary)} @media(max-width:860px){.origin-media image-slot{height:300px}.origin-body p{max-width:none}} /* ============================================================ Values — "Điều làm chúng tôi khác" (bento) ============================================================ */ .vbento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .vcard{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl); padding:30px;transition:border-color var(--duration-base),transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base); display:flex;flex-direction:column} .vcard:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-md)} .vcard .vi{width:52px;height:52px;border-radius:var(--radius-md);background:var(--bg-elevated); display:flex;align-items:center;justify-content:center;color:var(--action-primary);margin-bottom:18px; transition:background var(--duration-base),color var(--duration-base)} .vcard:hover .vi{background:var(--gradient-action);color:#fff} .vcard .vi .lucide{width:25px;height:25px} .vcard h3{margin:0 0 8px;font-size:1.18rem;font-weight:700;color:var(--text-primary)} .vcard p{margin:0;color:var(--text-secondary);font-size:.96rem;line-height:1.6} /* bento: 1st and 4th cards span two columns; lead card on mesh */ .vcard.lead{grid-column:span 2;background-image:var(--gradient-mesh);border:none;color:#fff; justify-content:flex-end;min-height:230px;box-shadow:var(--shadow-lg)} .vcard.lead .vi{background:rgba(255,255,255,.16);color:#fff} .vcard.lead:hover .vi{background:rgba(255,255,255,.26)} .vcard.lead h3{color:#fff;font-size:1.5rem} .vcard.lead p{color:#EADFFB;font-size:1.02rem} .vcard.wide{grid-column:span 2} @media(max-width:860px){.vbento{grid-template-columns:1fr 1fr}.vcard.lead,.vcard.wide{grid-column:span 2}} @media(max-width:560px){.vbento{grid-template-columns:1fr}.vcard.lead,.vcard.wide{grid-column:span 1}} /* ============================================================ Process — "Cách chúng tôi làm việc" (horizontal cards) ============================================================ */ .process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .step{position:relative;background:var(--bg-surface);border:1px solid var(--border-default); border-radius:var(--radius-xl);padding:28px 26px} .step .stepbody{display:contents} .step .num{font-family:var(--font-mono);font-weight:800;font-size:.92rem;color:var(--action-primary); letter-spacing:.04em;margin-bottom:14px} .step .si{width:46px;height:46px;border-radius:var(--radius-md);background:var(--gradient-action); display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:16px} .step .si .lucide{width:23px;height:23px} .step h3{margin:0 0 8px;font-size:1.1rem;font-weight:700;color:var(--text-primary)} .step p{margin:0;color:var(--text-secondary);font-size:.94rem;line-height:1.58} /* connecting arrow between cards */ .step .arrow{display:flex;position:absolute;right:-26px;top:50%;transform:translateY(-50%); width:36px;height:36px;align-items:center;justify-content:center;color:var(--text-muted);z-index:2} .step .arrow .lucide{width:20px;height:20px} .step:last-child .arrow{display:none} @media(max-width:860px){.process{grid-template-columns:1fr 1fr}.step .arrow{display:none}} @media(max-width:560px){.process{grid-template-columns:1fr}} /* ============================================================ Team — "Đội ngũ" (vertical cards) ============================================================ */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .member{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl); padding:26px;text-align:center;transition:border-color var(--duration-base),transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base); display:flex;flex-direction:column;align-items:center} .member:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-md)} .avatar{width:92px;height:92px;border-radius:50%;background:var(--bg-elevated);position:relative; display:flex;align-items:center;justify-content:center;margin-bottom:18px; box-shadow:0 0 0 4px var(--bg-surface),0 0 0 5px var(--border-default)} .avatar::after{content:"";position:absolute;inset:-5px;border-radius:50%;padding:2px; background:var(--gradient-action);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55} .avatar .lucide{width:38px;height:38px;color:var(--text-muted)} .member h3{margin:0 0 4px;font-size:1.06rem;font-weight:700;color:var(--text-primary)} .member .role{font-size:.85rem;font-weight:600;color:var(--action-primary);margin-bottom:8px} .member p{margin:0;font-size:.88rem;color:var(--text-secondary);line-height:1.55} @media(max-width:860px){.team-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.team-grid{grid-template-columns:1fr}} .team-note{margin-top:26px;text-align:center;color:var(--text-muted);font-size:.86rem} /* ===== Brand icons (astro-icon simple-icons) — replaces simpleicons CDN ===== */ .brandicon{width:1.2em;height:1.2em;flex:0 0 auto;color:currentColor} .logos .lg .brandicon{height:24px;width:24px;color:#645B71} .dashcard .gh .brandicon{width:20px;height:20px} .reviewbox .rhead .gg .brandicon{width:24px;height:24px} .partner .brandicon{width:18px;height:18px} .foot .social a .brandicon{width:17px;height:17px;color:var(--text-secondary)} .foot .social a:hover .brandicon{color:#fff} /* ===== Star rating icons: solid gold fill (tabler:star-filled, replaces outline lucide star) ===== */ [data-icon="tabler:star-filled"]{color:var(--color-warning)}