/* ============================================================ Centrul360 — shared service-page styles (c360.css) Dark monochrome + liquid-glass. Used by all /servicii pages. ============================================================ */ :root{ --ink:#0b0b0d; --paper:#0b0b0d; --paper-2:#141418; --surface-3:#1c1c22; --fg:#f5f4f2; --muted:rgba(245,244,242,0.58); --muted-2:rgba(245,244,242,0.38); --line:rgba(255,255,255,0.10); --line-on-dark:rgba(255,255,255,0.14); --glass:rgba(255,255,255,0.06); --glass-2:rgba(255,255,255,0.14); /* per-page accent (overridable inline on ) */ --accent:#cdd8f0; --accent-soft:rgba(150,170,255,0.06); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background: radial-gradient(120% 80% at 50% -8%, rgba(40,40,48,0.55) 0%, transparent 52%), radial-gradient(90% 60% at 100% 0%, var(--accent-soft), transparent 50%), linear-gradient(160deg, #060608 0%, #111116 48%, #1a1a20 100%); background-attachment:fixed; color:var(--fg); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:clip; } ::selection{ background:var(--fg); color:#0b0b0d; } ::-webkit-scrollbar{ width:7px; } ::-webkit-scrollbar-thumb{ background:#2c2c33; border-radius:10px; } ::-webkit-scrollbar-track{ background:transparent; } a{ color:inherit; text-decoration:none; } .wrap{ max-width:1120px; margin:0 auto; padding:0 1.25rem; } .display{ font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-0.035em; line-height:0.98; } .accent{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; letter-spacing:-0.01em; } .eyebrow{ font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; } .stars{ color:#fbbc05; letter-spacing:2px; } /* aurora */ .aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .aurora b{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.8; } .aurora b:nth-child(1){ width:46vw; height:46vw; top:-14vw; left:-8vw; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 70%); animation:drift1 24s ease-in-out infinite; } .aurora b:nth-child(2){ width:40vw; height:40vw; top:40vh; right:-12vw; background:radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 70%); animation:drift2 30s ease-in-out infinite; } .aurora b:nth-child(3){ width:32vw; height:32vw; bottom:-10vw; left:26vw; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 70%); animation:drift3 27s ease-in-out infinite; } @keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(6vw,4vh) scale(1.1);} } @keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-5vw,-3vh) scale(1.08);} } @keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(3vw,-5vh) scale(1.12);} } /* reveal on scroll */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .reveal.in{ opacity:1; transform:none; } .d1{ transition-delay:.08s; } .d2{ transition-delay:.16s; } .d3{ transition-delay:.24s; } .d4{ transition-delay:.32s; } .d5{ transition-delay:.40s; } /* pills */ .pill{ position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border-radius:999px; font-weight:600; cursor:pointer; -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); transition:transform .4s cubic-bezier(.16,1,.3,1), background-color .4s ease, box-shadow .4s ease; border:1px solid rgba(255,255,255,0.12); box-shadow:inset 0 1px 0.5px 0 rgba(255,255,255,0.55), inset 1.5px 2px 0 -1.5px rgba(255,255,255,0.45), inset -1.5px -2px 1px -1.5px rgba(255,255,255,0.22), inset 0 -10px 18px -12px rgba(0,0,0,0.65), 0 1px 2px rgba(0,0,0,0.5), 0 10px 28px -10px rgba(0,0,0,0.6); } .pill:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; } .pill-ink, .pill-on-dark{ background:var(--glass-2); color:#fff; } .pill-ink:hover, .pill-on-dark:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.22); } .pill-ink:active, .pill-on-dark:active{ transform:translateY(0) scale(.98); } .pill-glass{ background:var(--glass); color:var(--fg); } .pill-glass:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.12); } .pill-glass:active{ transform:translateY(0) scale(.98); } .pill .dot{ width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.18); display:inline-flex; align-items:center; justify-content:center; } .arrow{ transition:transform .3s cubic-bezier(.16,1,.3,1); display:inline-block; } .pill:hover .arrow{ transform:translateX(3px); } /* header + menu */ header.site{ position:fixed; top:1rem; left:0; right:0; z-index:50; padding:0 1rem; } header.site .bar{ max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; } .logo-pill{ padding:.4rem .95rem .4rem .55rem; display:inline-flex; align-items:center; gap:.5rem; } .logo-pill img{ height:12px; width:auto; object-fit:contain; } #logo3d-head, #logo3d-menu{ width:30px; height:30px; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35)); } .menu-overlay{ position:fixed; inset:0; z-index:60; background:rgba(8,8,10,0.96); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); color:#fff; opacity:0; visibility:hidden; transition:opacity .5s cubic-bezier(.16,1,.3,1), visibility .5s; display:flex; overflow-y:auto; } .menu-overlay.open{ opacity:1; visibility:visible; } .menu-inner{ width:100%; max-width:1120px; margin:0 auto; padding:0 1.5rem; display:flex; flex-direction:column; min-height:100%; } .menu-topbar{ position:fixed; top:1rem; left:0; right:0; padding:0 1rem; z-index:1; } .menu-topbar .bar{ max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; } .menu-links{ flex:1; display:flex; flex-direction:column; justify-content:safe center; gap:.1rem; padding:6rem 0 2.5rem; } .menu-link{ width:max-content; max-width:100%; font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-0.035em; font-size:clamp(2.1rem,7.5vw,4.6rem); line-height:1.08; color:#fff; opacity:.5; background:none; border:0; cursor:pointer; text-align:left; transition:opacity .3s ease; } .menu-link:hover, .menu-link.is-current{ opacity:1; } .menu-link .idx{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:.3em; vertical-align:super; opacity:.5; margin-right:.4rem; } .menu-dd-trigger{ display:inline-flex; align-items:center; gap:.32em; } .menu-chev{ width:.38em; height:.38em; flex:none; opacity:.4; transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .3s ease; } .menu-dd.open .menu-chev{ transform:rotate(180deg); opacity:.85; } .menu-sub{ overflow:hidden; max-height:0; opacity:0; transition:max-height .55s cubic-bezier(.16,1,.3,1), opacity .4s ease; } .menu-dd.open .menu-sub{ max-height:680px; opacity:1; } .menu-sub-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.05rem 2.5rem; padding:.9rem 0 1.3rem .15rem; } @media (max-width:560px){ .menu-sub-grid{ grid-template-columns:1fr; gap:.05rem; } } .menu-sub-head{ font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); margin:.7rem 0 .5rem; } .menu-sub-link{ display:block; width:max-content; max-width:100%; padding:.4rem 0; font-size:1.05rem; font-weight:500; color:rgba(245,244,242,.64); transition:color .25s ease, transform .3s cubic-bezier(.16,1,.3,1); } .menu-sub-link.is-current{ color:var(--fg); } .menu-sub-link .sm{ display:block; font-size:.8rem; font-weight:400; color:var(--muted-2); margin-top:1px; } .menu-sub-link:hover{ color:var(--fg); transform:translateX(5px); } .menu-cta{ padding-bottom:1.75rem; } .menu-foot{ display:flex; flex-wrap:wrap; gap:1.25rem 2rem; align-items:flex-end; justify-content:space-between; padding:2rem 0 2.5rem; border-top:1px solid rgba(255,255,255,.12); } /* breadcrumb */ .crumbs{ position:relative; z-index:10; padding-top:7.5rem; color:var(--muted-2); font-size:.82rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } .crumbs a{ transition:color .25s ease; } .crumbs a:hover{ color:var(--fg); } .crumbs .sep{ opacity:.5; } /* ===== HERO ===== */ .hero{ position:relative; z-index:10; padding:1.5rem 0 1rem; display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; } @media (max-width:880px){ .hero{ grid-template-columns:1fr; gap:1.8rem; padding-top:.5rem; } } .hero .cat{ color:var(--accent); display:flex; align-items:center; gap:.55rem; } .hero .cat i{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; } .hero h1{ font-size:clamp(2.5rem,6.4vw,4.6rem); margin:.8rem 0 0; } .hero .lead{ color:var(--muted); max-width:36rem; line-height:1.7; margin:1.3rem 0 0; font-size:1.05rem; } .hero .cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin:1.8rem 0 0; } .hero .trust-row{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 1.5rem; margin:1.8rem 0 0; color:var(--muted); font-size:.82rem; } .hero .trust-row .ti{ display:flex; align-items:center; gap:.45rem; } .hero .trust-row svg{ color:var(--accent); flex:none; } /* single-column hero (no image) */ .hero-solo{ grid-template-columns:1fr; padding-top:2rem; } .hero-solo > div{ max-width:50rem; } .hero-stats{ display:flex; gap:2.8rem; margin:2rem 0 0; flex-wrap:wrap; } .hero-stats .hs{ display:flex; flex-direction:column; } .hero-stats .num{ font-size:clamp(1.7rem,3.2vw,2.3rem); } .hero-stats .hsl{ color:var(--muted); font-size:.84rem; margin-top:.4rem; max-width:13rem; line-height:1.4; } .hero-media{ position:relative; border-radius:28px; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line); background:#0e0e12; box-shadow:0 40px 90px -40px rgba(0,0,0,.9); } @media (max-width:880px){ .hero-media{ aspect-ratio:16/12; } } .hero-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); } .hero-media:hover img{ transform:scale(1.04); } .hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,10,.6) 0%, rgba(8,8,10,.05) 45%, transparent 70%); pointer-events:none; } .hero-media .badge{ position:absolute; left:1rem; bottom:1rem; z-index:2; display:flex; align-items:center; gap:.6rem; background:rgba(8,8,10,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line-on-dark); border-radius:16px; padding:.7rem .95rem; } .hero-media .badge .rt{ font-weight:800; font-size:1.05rem; letter-spacing:-.02em; } .hero-media .badge .sm{ font-size:.7rem; color:var(--muted); } /* ===== STATS ===== */ .stats{ position:relative; z-index:10; margin:3rem 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:22px; overflow:hidden; } @media (max-width:680px){ .stats{ grid-template-columns:repeat(2,1fr); } } .stat{ background:var(--paper-2); padding:1.5rem 1.3rem; } .stat .num{ font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-.03em; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1; } .stat .num .accent{ font-size:.8em; } .stat .lbl{ color:var(--muted); font-size:.84rem; margin-top:.45rem; } /* ===== section helpers ===== */ .sec{ position:relative; z-index:10; padding:4.5rem 0 0; } .sec-eyebrow{ color:var(--muted-2); margin-bottom:1rem; display:flex; align-items:center; gap:.6rem; } .sec-eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; } .sec h2{ font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-.035em; font-size:clamp(1.9rem,5vw,3.2rem); margin:0; line-height:1.05; } .sec .sub{ color:var(--muted); max-width:44rem; line-height:1.7; margin:1.2rem 0 0; font-size:1.02rem; } /* ===== two-column info (ce este / pentru cine) ===== */ .split{ margin-top:2.2rem; display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; align-items:stretch; } @media (max-width:820px){ .split{ grid-template-columns:1fr; } } .split .media{ position:relative; border-radius:24px; overflow:hidden; min-height:320px; border:1px solid var(--line); background:#0e0e12; } .split .media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; } .split .media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,10,.45), transparent 55%); } .prose{ display:flex; flex-direction:column; justify-content:center; } .prose p{ color:var(--muted); line-height:1.75; font-size:1rem; margin:0 0 1rem; } .prose p strong{ color:var(--fg); font-weight:600; } .prose ul{ list-style:none; margin:.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:.7rem; } .prose ul li{ display:flex; gap:.7rem; color:rgba(245,244,242,.82); font-size:.98rem; line-height:1.5; } .prose ul li svg{ flex:none; color:var(--accent); margin-top:.15rem; } /* ===== scroll-reveal video (clip-path inset "opens" as it enters view) ===== */ .revealvid{ position:relative; width:100%; display:flex; justify-content:center; margin:2.4rem 0 .5rem; } .revealvid-inner{ position:relative; width:100%; max-width:360px; aspect-ratio:9/16; overflow:hidden; background:#0e0e12; will-change:clip-path, transform; backface-visibility:hidden; box-shadow:0 55px 110px -45px rgba(0,0,0,.95), 0 6px 22px -8px rgba(0,0,0,.6); clip-path:inset(35% 42% 35% 42% round 60px); } .revealvid-inner video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .revealvid-inner::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.06); } @media (max-width:520px){ .revealvid-inner{ max-width:300px; } } @media (prefers-reduced-motion: reduce){ .revealvid-inner{ clip-path:inset(0 0 0 0 round 18px) !important; transform:none !important; } } /* ===== tech scrollytelling: rotating device (frame seq) + small title-only callouts ===== */ .techscroll{ position:relative; z-index:10; min-height:280vh; } @media (max-width:820px){ .techscroll{ min-height:260vh; } } .techscroll-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; } .techstage{ position:relative; width:100%; max-width:1120px; height:100%; margin:0 auto; padding:0 1.25rem; } .th-head{ position:absolute; top:clamp(4.5rem,9vh,6.5rem); left:0; right:0; text-align:center; z-index:4; padding:0 1.25rem; } .th-head .eyebrow{ color:var(--accent); display:inline-flex; align-items:center; gap:.5rem; } .th-head .eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; } .th-head h2{ font-family:'Inter'; font-weight:800; letter-spacing:-.035em; font-size:clamp(1.6rem,4vw,2.8rem); line-height:1.05; margin:.7rem 0 0; } /* device: big, foreground, rotates via frame sequence; black frame bg feathered into the page + soft ground shadow */ .techdevice{ position:absolute; left:46%; top:54%; transform:translate(-50%,-50%); width:clamp(300px, min(42vw, 58vh), 480px); aspect-ratio:1/1; z-index:2; } .techdevice img{ width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 34px 40px rgba(0,0,0,.5)) drop-shadow(0 10px 18px rgba(0,0,0,.4)); } /* small, title-only callout — only the active one shows, beside the device */ .cco{ position:absolute; left:70%; top:50%; transform:translateY(-50%); z-index:5; display:flex; align-items:center; gap:.75rem; opacity:0; pointer-events:none; transition:opacity .4s ease; } .cco.cur{ opacity:1; } .cco-line{ position:relative; flex:none; height:1px; width:clamp(28px,4.5vw,64px); background:linear-gradient(90deg, var(--accent), rgba(255,255,255,.05)); transform:scaleX(0); transform-origin:left center; transition:transform .5s cubic-bezier(.16,1,.3,1); } .cco.cur .cco-line{ transform:scaleX(1); } .cco-dot{ position:absolute; left:-3px; top:50%; width:7px; height:7px; border-radius:50%; background:var(--accent); transform:translateY(-50%); box-shadow:0 0 0 4px var(--accent-soft), 0 0 10px var(--accent); } .cco-title{ font-size:clamp(1.05rem,1.9vw,1.4rem); font-weight:700; letter-spacing:-.01em; line-height:1.1; color:#fff; white-space:nowrap; margin:0; opacity:0; transform:translateX(-8px); transition:opacity .45s ease .1s, transform .5s cubic-bezier(.16,1,.3,1) .1s; } .cco.cur .cco-title{ opacity:1; transform:none; } .th-progress{ position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(1.6rem,5vh,3rem); width:min(260px,56%); height:3px; border-radius:999px; background:rgba(255,255,255,.12); z-index:6; overflow:hidden; } .th-progress span{ display:block; height:100%; border-radius:999px; background:var(--accent); width:0%; } .th-hint{ position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(.6rem,2.5vh,1.4rem); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); z-index:6; } @media (max-width:820px){ .techdevice{ left:40%; top:48%; width:min(72vw,340px); } .cco{ left:60% !important; } .cco-title{ white-space:normal; font-size:1.1rem; max-width:34vw; } .th-progress{ bottom:6rem; } .th-hint{ display:none; } } @media (prefers-reduced-motion: reduce){ .cco-line{ transform:scaleX(1) !important; } .cco-title{ opacity:1 !important; transform:none !important; } } /* ===== how it works (steps / timeline) ===== */ .steps{ margin-top:2.2rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; } @media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .steps{ grid-template-columns:1fr; } } .pstep{ border:1px solid var(--line); border-radius:20px; background:var(--paper-2); padding:1.4rem 1.35rem 1.5rem; transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease; } .pstep:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.2); box-shadow:0 28px 56px -30px rgba(0,0,0,.85); } .pstep .pn{ font-family:'Fraunces',serif; font-weight:500; color:var(--accent); opacity:.85; font-size:1.6rem; line-height:1; } .pstep h3{ font-size:1.05rem; font-weight:700; margin:.9rem 0 .45rem; letter-spacing:-.01em; } .pstep p{ color:var(--muted); font-size:.9rem; line-height:1.6; margin:0; } /* ===== vertical animated timeline (process) ===== */ .tl{ position:relative; margin-top:2.4rem; max-width:44rem; } .tl-track{ position:absolute; left:11px; top:9px; bottom:9px; width:2px; background:var(--line); border-radius:2px; } .tl-fill{ position:absolute; left:11px; top:9px; width:2px; height:0; background:var(--accent); border-radius:2px; box-shadow:0 0 10px var(--accent); transition:height .15s linear; } .tl-item{ position:relative; padding:0 0 1.9rem 2.7rem; opacity:.38; transition:opacity .5s ease; } .tl-item:last-child{ padding-bottom:0; } .tl-item.on{ opacity:1; } .tl-dot{ position:absolute; left:4px; top:3px; width:16px; height:16px; border-radius:50%; background:var(--paper-2); border:2px solid var(--line); transition:border-color .4s ease, background .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.16,1,.3,1); } .tl-item.on .tl-dot{ border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); } .tl-item.hl.on .tl-dot{ transform:scale(1.25); } .tl-k{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; } .tl-t{ font-size:1.06rem; font-weight:700; letter-spacing:-.01em; margin:.3rem 0 0; } .tl-d{ color:var(--muted); font-size:.9rem; line-height:1.55; margin:.4rem 0 0; max-width:30rem; } .tl-badge{ display:inline-block; margin-top:.55rem; font-size:.66rem; font-weight:700; letter-spacing:.05em; color:var(--accent); border:1px solid var(--line-on-dark); background:var(--accent-soft); border-radius:999px; padding:.24rem .65rem; } .tl-note{ color:var(--muted-2); font-size:.74rem; line-height:1.5; margin:1.3rem 0 0; padding-left:2.7rem; max-width:36rem; } @media (prefers-reduced-motion: reduce){ .tl-item{ opacity:1 !important; } .tl-fill{ height:100% !important; } } /* ===== benefits grid ===== */ .bgrid{ margin-top:2.2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; } @media (max-width:820px){ .bgrid{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .bgrid{ grid-template-columns:1fr; } } .bcard{ border:1px solid var(--line); border-radius:20px; background:var(--paper-2); padding:1.5rem 1.45rem; transition:border-color .4s ease, transform .4s cubic-bezier(.16,1,.3,1), background-color .4s ease; } .bcard:hover{ border-color:rgba(255,255,255,.18); transform:translateY(-3px); background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); } .bico{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:var(--accent); border:1px solid var(--line-on-dark); background:rgba(255,255,255,.04); margin-bottom:1rem; transition:transform .4s cubic-bezier(.16,1,.3,1); } .bcard:hover .bico{ transform:scale(1.08) rotate(-4deg); } .bcard h3{ font-size:1.05rem; font-weight:700; margin:0 0 .5rem; letter-spacing:-.01em; } .bcard p{ color:var(--muted); font-size:.92rem; line-height:1.62; margin:0; } /* ===== before/after compare slider ===== */ .ba{ position:relative; width:100%; aspect-ratio:4/3; border-radius:20px; overflow:hidden; background:#0e0e12; border:1px solid var(--line); user-select:none; touch-action:pan-y; cursor:ew-resize; } .ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none; } .ba .ba-before-wrap{ position:absolute; inset:0; overflow:hidden; width:50%; will-change:width; } .ba .ba-tag{ position:absolute; top:.7rem; z-index:4; font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(8,8,10,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); padding:.3rem .65rem; border-radius:999px; pointer-events:none; } .ba .ba-tag.b{ left:.7rem; } .ba .ba-tag.a{ right:.7rem; } .ba .ba-divider{ position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-1px); z-index:5; background:rgba(255,255,255,.85); box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 0 18px rgba(0,0,0,.4); will-change:left; } .ba .ba-handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:6; width:44px; height:44px; border-radius:999px; display:grid; place-items:center; color:#0b0b0d; background:#fff; box-shadow:0 6px 18px -4px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.6); transition:transform .25s cubic-bezier(.16,1,.3,1); will-change:left; } .ba:hover .ba-handle{ transform:translate(-50%,-50%) scale(1.07); } .ba .ba-handle:focus-visible{ outline:2px solid #fff; outline-offset:3px; } .ba.is-ph::after{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 14px, rgba(255,255,255,.045) 14px 28px); z-index:1; } /* ===== technology / device ===== */ .tech{ margin-top:2.2rem; display:grid; grid-template-columns:.9fr 1.1fr; gap:1.6rem; align-items:center; } @media (max-width:820px){ .tech{ grid-template-columns:1fr; } } .tech .media{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); background:#0e0e12; } .tech .media img{ width:100%; height:100%; object-fit:cover; } .tech .specs{ display:flex; flex-direction:column; gap:1rem; } .tech .specs .sp{ display:flex; gap:1rem; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:1rem; } .tech .specs .sp:last-child{ border-bottom:0; } .tech .specs .sp .k{ font-weight:700; font-size:.95rem; min-width:7.5rem; } .tech .specs .sp .v{ color:var(--muted); font-size:.92rem; line-height:1.55; } /* ===== pricing / offer ===== */ .price{ margin-top:2.2rem; display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; } @media (max-width:760px){ .price{ grid-template-columns:1fr; } } .pcard{ position:relative; border:1px solid var(--line); border-radius:24px; background:var(--paper-2); padding:2rem 1.9rem; overflow:hidden; transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease; } .pcard:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.18); box-shadow:0 30px 60px -28px rgba(0,0,0,.8); } .pcard.feature{ background:linear-gradient(160deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.02) 60%); border-color:rgba(255,255,255,.16); } .pcard .ribbon{ position:absolute; top:1.2rem; right:-2.4rem; transform:rotate(35deg); background:var(--fg); color:#0b0b0d; font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.3rem 2.6rem; } .pcard .pname{ font-weight:700; font-size:1.15rem; letter-spacing:-.01em; } .pcard .pdesc{ color:var(--muted); font-size:.9rem; margin-top:.4rem; line-height:1.55; } .pcard .pval{ display:flex; align-items:baseline; gap:.6rem; margin:1.3rem 0 .2rem; } .pcard .pval b{ font-family:'Inter'; font-weight:800; letter-spacing:-.03em; font-size:2.2rem; } .pcard .pval b .u{ font-size:.4em; font-weight:600; color:var(--muted); margin-left:.2em; } .pcard .pval s{ color:var(--muted-2); font-size:1rem; font-weight:600; } .pcard .pnote{ color:var(--muted-2); font-size:.78rem; margin-top:.3rem; } .pcard ul{ list-style:none; margin:1.3rem 0 1.6rem; padding:0; display:flex; flex-direction:column; gap:.6rem; } .pcard ul li{ display:flex; gap:.6rem; color:rgba(245,244,242,.82); font-size:.92rem; } .pcard ul li svg{ flex:none; color:var(--accent); } /* ===== package toggle + cards (service pages) ===== */ .ptoggle{ display:inline-flex; gap:.3rem; padding:.3rem; border:1px solid var(--line); border-radius:999px; background:var(--paper-2); margin-top:1.6rem; } .ptoggle button{ border:0; background:none; cursor:pointer; font-family:inherit; font-weight:600; font-size:.88rem; color:var(--muted); padding:.55rem 1.05rem; border-radius:999px; transition:color .25s ease, background-color .3s ease; } .ptoggle button.is-on{ color:#0b0b0d; background:#fff; } .ptoggle button:focus-visible{ outline:2px solid var(--fg); outline-offset:2px; } .pkgs{ margin-top:1.4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } @media (max-width:960px){ .pkgs{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .pkgs{ grid-template-columns:1fr; } } .pkgs[hidden]{ display:none; } .pkgs.swap{ animation:pkgpop .5s cubic-bezier(.16,1,.3,1); } @keyframes pkgpop{ 0%{ opacity:0; transform:translateY(12px); } 100%{ opacity:1; transform:none; } } .pkgc{ position:relative; border:1px solid var(--line); border-radius:22px; background:var(--paper-2); padding:1.5rem 1.4rem; display:flex; flex-direction:column; overflow:hidden; transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease; } .pkgc:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.2); box-shadow:0 30px 60px -28px rgba(0,0,0,.8); } .pkgc.feature{ background:linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 60%); border-color:rgba(255,255,255,.18); } .pkgc .pkn{ font-weight:700; font-size:1.02rem; letter-spacing:-.01em; line-height:1.25; padding-right:1.5rem; } .pkgc .pkmeta{ color:var(--muted-2); font-size:.78rem; margin-top:.35rem; line-height:1.4; min-height:2.5em; } .pkgc .pkprice{ margin-top:auto; padding-top:1.1rem; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; } .pkgc .pkprice b{ font-family:'Inter'; font-weight:800; letter-spacing:-.03em; font-size:1.7rem; } .pkgc .pkprice b .u{ font-size:.42em; font-weight:600; color:var(--muted); margin-left:.15em; } .pkgc .pkprice s{ color:var(--muted-2); font-size:.95rem; font-weight:600; } .pkgc .pksave{ align-self:flex-start; margin-top:.55rem; font-size:.7rem; font-weight:700; letter-spacing:.04em; color:var(--accent); border:1px solid var(--line-on-dark); border-radius:999px; padding:.22rem .6rem; } .pkgc .pkcta{ margin-top:1.2rem; width:100%; padding:.85rem 1.3rem; font-size:13.5px; } .pkg-badge{ position:absolute; top:0; right:0; background:var(--fg); color:#0b0b0d; font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .65rem; border-bottom-left-radius:12px; } /* zone teaser */ .zoneteaser{ margin-top:1.6rem; border:1px solid var(--line); border-radius:22px; background:var(--paper-2); padding:1.6rem 1.7rem; } .zoneteaser .zt-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .zoneteaser .zt-head h3{ font-size:1.05rem; font-weight:700; letter-spacing:-.01em; margin:0; } .zoneteaser .zt-head .note{ color:var(--muted-2); font-size:.8rem; } .zoneteaser .zt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem 1.6rem; margin:1.2rem 0 0; } @media (max-width:760px){ .zoneteaser .zt-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:420px){ .zoneteaser .zt-grid{ grid-template-columns:1fr; } } .zoneteaser .zt{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; border-bottom:1px solid var(--line); padding-bottom:.6rem; } .zoneteaser .zt .zn{ font-size:.92rem; color:rgba(245,244,242,.85); } .zoneteaser .zt .zp{ font-weight:700; white-space:nowrap; font-size:.95rem; } .zoneteaser .zt .zp .fr{ color:var(--muted-2); font-weight:500; font-size:.76rem; margin-right:.25em; } .zoneteaser .zt-foot{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; } .loc-note{ display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; color:var(--muted); border:1px solid var(--line-on-dark); border-radius:999px; padding:.35rem .8rem; } .loc-note i{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; } /* ===== recommended-treatments grid (concern pages) ===== */ .rxgrid{ margin-top:1.6rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:1rem; } .rxgrid .pkgc .pkmeta{ min-height:3.4em; } /* ===== faq accordion ===== */ .faq{ margin-top:1.6rem; } .faq-item{ border-top:1px solid var(--line); } .faq-item:last-child{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; text-align:left; padding:1.45rem 0; font-weight:600; font-size:1.04rem; color:var(--fg); cursor:pointer; background:none; border:0; font-family:inherit; } .faq-ic{ flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:transform .45s cubic-bezier(.16,1,.3,1), background-color .3s, color .3s; } .faq-item.open .faq-ic{ transform:rotate(45deg); background:var(--fg); color:#0b0b0d; } .faq-a{ overflow:hidden; max-height:0; transition:max-height .5s cubic-bezier(.16,1,.3,1); } .faq-a-inner{ padding:0 0 1.5rem; color:var(--muted); line-height:1.75; max-width:46rem; font-size:.96rem; } /* ===== reviews carousel ===== */ .no-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; } .no-scrollbar::-webkit-scrollbar{ display:none; } .reviews-track{ scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; display:flex; gap:1.25rem; overflow-x:auto; padding-bottom:.5rem; } .review-card{ scroll-snap-align:start; flex:none; width:300px; border:1px solid var(--line); border-radius:24px; background:var(--paper-2); padding:1.75rem; transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease; } @media (min-width:640px){ .review-card{ width:360px; } } .review-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.18); box-shadow:0 30px 60px -24px rgba(0,0,0,.75); } .review-card .rev-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; } .review-card .av{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:600; flex:none; } .review-card .nm{ font-weight:600; font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .review-card .rev-stars{ color:#fbbc05; letter-spacing:2px; font-size:14px; margin-bottom:.75rem; } .review-card p.rev-body{ color:var(--muted); font-size:15px; line-height:1.7; margin:0; } .rev-wrap{ position:relative; } .rev-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; display:none; place-items:center; color:#fff; background:var(--glass-2); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); cursor:pointer; z-index:5; transition:background .2s ease, transform .2s ease, opacity .2s ease; } .rev-arrow:hover{ background:rgba(255,255,255,.22); } .rev-arrow:active{ transform:translateY(-50%) scale(.94); } .rev-arrow:focus-visible{ outline:2px solid #fff; outline-offset:2px; } .rev-arrow[disabled]{ opacity:.3; pointer-events:none; } .rev-prev{ left:-6px; } .rev-next{ right:-6px; } @media (min-width:768px){ .rev-arrow{ display:grid; } .rev-prev{ left:-18px; } .rev-next{ right:-18px; } } .rev-modal{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease; } .rev-modal.open{ opacity:1; visibility:visible; } .rev-modal-backdrop{ position:absolute; inset:0; background:rgba(8,8,10,0.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .rev-modal-panel{ position:relative; z-index:1; width:100%; max-width:420px; background:var(--paper-2); border:1px solid var(--line); border-radius:26px; padding:34px 30px; text-align:center; box-shadow:0 40px 90px -30px rgba(0,0,0,.85); transform:translateY(14px) scale(.98); transition:transform .28s cubic-bezier(.16,1,.3,1); } .rev-modal.open .rev-modal-panel{ transform:none; } .rev-modal-x{ position:absolute; top:14px; right:16px; width:34px; height:34px; border-radius:999px; color:var(--muted); background:var(--glass); border:1px solid var(--line); display:grid; place-items:center; cursor:pointer; font-size:20px; line-height:1; transition:color .2s, background .2s; } .rev-modal-x:hover{ color:#fff; background:var(--glass-2); } /* ===== sticky booking bar (mobile) ===== */ .bookbar{ position:fixed; left:0; right:0; bottom:0; z-index:55; padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background:rgba(8,8,10,.82); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-top:1px solid var(--line); display:none; transform:translateY(110%); transition:transform .45s cubic-bezier(.16,1,.3,1); } .bookbar.show{ transform:none; } .bookbar .row{ display:flex; align-items:center; gap:.7rem; max-width:1120px; margin:0 auto; } .bookbar .lbl{ flex:1; min-width:0; } .bookbar .lbl b{ font-size:.92rem; font-weight:700; display:block; } .bookbar .lbl span{ font-size:.74rem; color:var(--muted); } @media (max-width:760px){ .bookbar{ display:block; } } /* ===== cta + footer ===== */ .cta{ position:relative; z-index:10; margin:5rem 0 0; border-radius:30px; text-align:center; padding:4rem 1.5rem 4.5rem; background:linear-gradient(160deg,#17171d 0%,#0c0c10 100%); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 40px 90px -40px rgba(0,0,0,.9); } .cta h2{ font-size:clamp(1.9rem,5vw,3.4rem); margin:.6rem 0 1.6rem; } .cta .row{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; } .related{ position:relative; z-index:10; margin-top:3.5rem; } .related-grid{ margin-top:1.4rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } @media (max-width:760px){ .related-grid{ grid-template-columns:1fr; } } .rel{ border:1px solid var(--line); border-radius:18px; background:var(--paper-2); padding:1.2rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; transition:border-color .35s ease, transform .35s cubic-bezier(.16,1,.3,1), background-color .35s ease; } .rel:hover{ border-color:rgba(255,255,255,.2); transform:translateY(-3px); background:rgba(255,255,255,.03); } .rel .rt{ font-weight:700; font-size:1rem; letter-spacing:-.01em; } .rel .rs{ color:var(--muted-2); font-size:.78rem; margin-top:.2rem; } .rel .ar{ color:var(--accent); transition:transform .3s cubic-bezier(.16,1,.3,1); flex:none; } .rel:hover .ar{ transform:translateX(4px); } footer.site{ position:relative; z-index:10; margin-top:3rem; border-top:1px solid var(--line); padding:2.5rem 0 6rem; color:var(--muted); font-size:.85rem; } footer.site .bar{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; } /* ===== rich footer (matches homepage) ===== */ .site-footer{ position:relative; z-index:10; border-top:1px solid var(--line); margin-top:3rem; } .site-footer .inner{ max-width:1120px; margin:0 auto; padding:4rem 1.25rem 4.5rem; } .site-footer .cols{ display:grid; gap:3rem; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr; } @media (max-width:900px){ .site-footer .cols{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .site-footer .cols{ grid-template-columns:1fr; gap:2.4rem; } } .site-footer .brandmark{ width:240px; max-width:85%; height:auto; display:block; margin-bottom:1.4rem; } .site-footer .tag{ color:var(--muted); font-size:15px; line-height:1.65; max-width:21rem; margin:0; } .site-footer .socs{ display:flex; gap:.75rem; margin-top:1.6rem; } .site-footer h4{ font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); margin:0 0 1.2rem; } .site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.8rem; font-size:15px; } .site-footer .loc{ display:flex; flex-direction:column; gap:1.2rem; font-size:15px; } .site-footer .loc b{ font-weight:600; } .site-footer .loc p{ margin:.15rem 0; color:var(--muted); } .foot-link{ color:var(--muted); transition:color .25s ease; } .foot-link:hover{ color:var(--fg); } .soc{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:var(--fg); transition:background-color .3s ease, color .3s ease, transform .3s ease, border-color .3s ease; } .soc:hover{ background:var(--fg); color:#0b0b0d; border-color:var(--fg); transform:translateY(-2px); } .site-footer .botbar{ margin-top:3.2rem; padding-top:2rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; } .site-footer .botbar .legal{ display:flex; gap:1.5rem; font-size:13px; } @media (max-width:760px){ .site-footer .inner{ padding-bottom:7rem; } } .disclaimer{ color:var(--muted-2); font-size:.78rem; line-height:1.6; margin-top:1.4rem; max-width:46rem; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1 !important; transform:none !important; } } /* ===== MOBILE PERF ===== */ /* Stop the continuous blur(90px) aurora drift + move the fixed background to a GPU-composited layer (background-attachment:fixed repaints the whole screen on every scroll frame). */ @media (max-width:768px){ .aurora b{ animation:none !important; } body{ background:#0b0b0d; background-attachment:initial; } body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(120% 80% at 50% -8%, rgba(40,40,48,0.55) 0%, transparent 52%), radial-gradient(90% 60% at 100% 0%, var(--accent-soft), transparent 50%), linear-gradient(160deg, #060608 0%, #111116 48%, #1a1a20 100%); } }