/* Platinium Rewal Aparthotel — motyw „pierwsza linia brzegowa” Paleta: granat morski / piasek / złoto szampańskie. Fonty: Marcellus + Mulish. */ :root{ --navy:#0e2a3f; --navy-2:#123448; --navy-3:#1a4159; --sea:#2e6e8e; --sea-soft:#e3edf2; --sand:#ede4d3; --cream:#faf7f1; --white:#ffffff; --gold:#c8a96a; --gold-deep:#a9884b; --gold-text:#7d6230; --ink:#22303b; --ink-soft:#4c5d6b; --rad:14px; --rad-sm:9px; --shadow:0 10px 34px rgba(14,42,63,.12); --shadow-soft:0 4px 16px rgba(14,42,63,.08); --wrap:1180px; --serif:'Marcellus',Georgia,serif; --sans:'Mulish',system-ui,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:clip} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.65;font-size:16.5px} img{max-width:100%;display:block} a{color:var(--sea);text-decoration:none} a:hover{color:var(--gold-deep)} :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:3px} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.18;color:var(--navy)} h1{font-size:clamp(2rem,5vw,3.4rem)} h2{font-size:clamp(1.6rem,3.4vw,2.4rem)} h3{font-size:1.28rem} p{margin-bottom:1em} section{padding:78px 0} .sec-alt{background:var(--white)} .sec-navy{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:var(--sand)} .sec-navy h2,.sec-navy h3{color:var(--white)} .sec-navy p{color:#d7dee2} .sec-sand{background:var(--sand)} /* ---------- reveal ---------- */ html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease} html.js .reveal.in{opacity:1;transform:none} /* kaskada kart w siatkach */ html.js .grid>.reveal:nth-child(2),html.js .price-cards>.reveal:nth-child(2){transition-delay:.08s} html.js .grid>.reveal:nth-child(3),html.js .price-cards>.reveal:nth-child(3){transition-delay:.16s} html.js .grid>.reveal:nth-child(4),html.js .price-cards>.reveal:nth-child(4){transition-delay:.24s} html.js .grid>.reveal:nth-child(5),html.js .price-cards>.reveal:nth-child(5){transition-delay:.32s} html.js .grid>.reveal:nth-child(6),html.js .price-cards>.reveal:nth-child(6){transition-delay:.4s} @media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}} /* ---------- przejścia między podstronami ---------- UWAGA: na wolno animować TYLKO opacity — animacja transform na body robi z niego containing block dla position:fixed (przewodnik/ring/header uciekają z ekranu). */ html.js body{animation:page-fade .45s ease} @keyframes page-fade{from{opacity:0}} html.js main{animation:page-slide .5s ease} @keyframes page-slide{from{transform:translateY(12px)}} body.page-out{opacity:0;transition:opacity .19s ease} @media (prefers-reduced-motion:reduce){ html.js body,html.js main{animation:none} body.page-out{opacity:1;transition:none} } /* ---------- Ken Burns na hero ---------- */ html.js .hero .hero-bg{animation:hero-zoom 16s ease-out both} html.js .breadcrumb-hero .hero-bg{animation:hero-zoom 12s ease-out both} @keyframes hero-zoom{from{transform:scale(1.08)}to{transform:scale(1)}} @media (prefers-reduced-motion:reduce){html.js .hero-bg{animation:none !important}} /* ---------- header ---------- */ .site-header{position:fixed;inset:0 0 auto 0;z-index:90;transition:background .3s,box-shadow .3s;background:linear-gradient(rgba(10,26,38,.62),transparent)} .site-header.scrolled{background:var(--navy);box-shadow:0 3px 18px rgba(0,0,0,.28)} .nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 22px;max-width:var(--wrap);margin:0 auto} .brand{display:flex;align-items:center;gap:12px;color:var(--white);font-family:var(--serif);font-size:1.12rem;letter-spacing:.5px;line-height:1.1;white-space:nowrap} .brand svg{width:34px;height:34px;flex:none;color:var(--gold)} .brand small{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:2.2px;color:var(--sand);text-transform:uppercase;margin-top:3px;white-space:nowrap} .nav-links{display:flex;align-items:center;gap:4px;list-style:none} .nav-links a{display:block;position:relative;padding:9px 13px;color:#e8eef2;font-size:.95rem;letter-spacing:.3px;border-radius:8px;white-space:nowrap;transition:background .2s,color .2s} .nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s ease} .nav-links a:hover{background:rgba(255,255,255,.1);color:var(--white)} .nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)} .nav-links .nav-cta::after{display:none} @media (prefers-reduced-motion:reduce){.nav-links a::after{transition:none}} .nav-links a[aria-current]{color:var(--gold)} .nav-cta{background:var(--gold);color:var(--navy) !important;font-weight:700;margin-left:8px} .nav-cta:hover{background:#d6ba7f !important} .burger{display:none;appearance:none;background:none;border:0;cursor:pointer;width:44px;height:40px;position:relative;z-index:120} .burger span{display:block;width:24px;height:2px;background:var(--white);margin:5px auto;transition:transform .3s,opacity .3s} body.nav-open{overflow:hidden} @media (max-width:960px){ .burger{display:block} .nav-links{position:fixed;inset:0 0 0 auto;width:min(320px,84vw);background:var(--navy);flex-direction:column;align-items:stretch;gap:2px;padding:86px 26px 26px;transform:translateX(100%);visibility:hidden;transition:transform .32s ease,visibility .32s;z-index:110;overflow-y:auto} body.nav-open .nav-links{transform:none;visibility:visible;box-shadow:-12px 0 40px rgba(0,0,0,.4)} body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.nav-open .burger span:nth-child(2){opacity:0} body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-links a{padding:13px 14px;font-size:1.04rem} .nav-cta{margin-left:0;text-align:center;margin-top:10px} } /* ---------- hero ---------- */ .hero{position:relative;min-height:92svh;display:flex;align-items:center;color:var(--white);overflow:hidden} .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,38,.55) 0%,rgba(10,26,38,.28) 45%,rgba(10,26,38,.72) 100%);z-index:1} .hero .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:70px} .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.8rem;letter-spacing:3.2px;text-transform:uppercase;color:var(--sand);margin-bottom:18px} .hero-eyebrow svg{width:20px;height:20px;color:var(--gold)} .hero h1{color:var(--white);max-width:17ch;text-shadow:0 3px 24px rgba(0,0,0,.45)} .hero p.lead{font-size:clamp(1.02rem,2vw,1.25rem);max-width:52ch;margin:20px 0 30px;color:#eef2f4;text-shadow:0 2px 12px rgba(0,0,0,.5)} .hero-ctas{display:flex;flex-wrap:wrap;gap:14px} .hero-badges{display:flex;flex-wrap:wrap;gap:22px;margin-top:44px} .hero-badge{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--sand)} .hero-badge svg{width:21px;height:21px;color:var(--gold);flex:none} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:.98rem;letter-spacing:.4px;cursor:pointer;border:0;transition:transform .18s,box-shadow .18s,background .18s;font-family:var(--sans)} .btn svg{width:17px;height:17px;flex:none} .btn-gold{background:var(--gold);color:var(--navy)} .btn-gold:hover{background:#d6ba7f;color:var(--navy);transform:translateY(-2px);box-shadow:0 8px 22px rgba(200,169,106,.4)} .btn-ghost{background:rgba(255,255,255,.1);color:var(--white);border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(3px)} .btn-ghost:hover{background:rgba(255,255,255,.2);color:var(--white);transform:translateY(-2px)} .btn-navy{background:var(--navy);color:var(--sand)} .btn-navy:hover{background:var(--navy-3);color:var(--white);transform:translateY(-2px)} /* ---------- section head ---------- */ .sec-head{text-align:center;max-width:760px;margin:0 auto 46px} .sec-head .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.76rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold-text);margin-bottom:12px} .sec-head .eyebrow svg{width:18px;height:18px} .sec-navy .sec-head .eyebrow{color:var(--gold)} .sec-head p.lead{color:var(--ink-soft);font-size:1.06rem;margin-top:14px} .sec-navy .sec-head p.lead{color:#c9d4da} /* ---------- stats ---------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;text-align:center} .stat{background:rgba(255,255,255,.06);border:1px solid rgba(200,169,106,.3);border-radius:var(--rad);padding:28px 16px} .stat b{display:block;font-family:var(--serif);font-size:2.5rem;color:var(--gold);line-height:1} .stat span{font-size:.85rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--sand)} /* ---------- cards ---------- */ .grid{display:grid;gap:26px} .grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .card{background:var(--white);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s} .card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .card .thumb{aspect-ratio:4/3;overflow:hidden;position:relative} .card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .card:hover .thumb img{transform:scale(1.05)} .card .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:9px;flex:1} .card .body h3{display:flex;align-items:center;gap:9px} .card .body h3 svg{width:20px;height:20px;color:var(--gold-deep);flex:none} .card .meta{display:flex;flex-wrap:wrap;gap:14px;font-size:.86rem;color:var(--ink-soft)} .card .meta span{display:inline-flex;align-items:center;gap:6px} .card .meta svg{width:15px;height:15px;color:var(--sea)} .card .price{margin-top:auto;padding-top:12px;font-size:.95rem;color:var(--ink-soft)} .card .price b{font-family:var(--serif);font-size:1.5rem;color:var(--navy)} .tag{position:absolute;top:12px;left:12px;background:var(--navy);color:var(--sand);font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;padding:6px 12px;border-radius:999px;opacity:.94} .tag-gold{background:var(--gold);color:var(--navy);font-weight:700} /* ---------- feature list ---------- */ .feat-list{list-style:none;display:grid;gap:13px} .feat-list li{display:flex;gap:12px;align-items:flex-start} .feat-list svg{width:20px;height:20px;color:var(--gold-deep);flex:none;margin-top:3px} .feat-list b{color:var(--navy)} /* ---------- split ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center} .split .img-stack{position:relative} .split .img-stack img{border-radius:var(--rad);box-shadow:var(--shadow)} @media (max-width:880px){.split{grid-template-columns:1fr;gap:34px}} /* ---------- tour section ---------- */ .tour-frame{position:relative;border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;background:var(--navy)} .tour-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media (max-width:700px){.tour-frame{aspect-ratio:4/5}} .tour-note{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--ink-soft);margin-top:14px} .tour-note svg{width:17px;height:17px;color:var(--gold-deep);flex:none;margin-top:2px} .sec-navy .tour-note{color:#c9d4da} /* ---------- masonry gallery ---------- */ .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px} .chip{appearance:none;border:1.5px solid var(--navy);background:transparent;color:var(--navy);padding:9px 18px;border-radius:999px;font-size:.9rem;cursor:pointer;transition:background .2s,color .2s;font-family:var(--sans)} .chip:hover{background:var(--sea-soft)} .chip.active{background:var(--navy);color:var(--sand)} .masonry{columns:3 300px;column-gap:18px} .masonry .tile{break-inside:avoid;margin-bottom:18px;border-radius:var(--rad-sm);overflow:hidden;cursor:zoom-in;position:relative;box-shadow:var(--shadow-soft)} .masonry .tile img{width:100%;transition:transform .4s} .masonry .tile:hover img{transform:scale(1.04)} .masonry .tile.hidden{display:none} /* ---------- lightbox ---------- */ .lb{position:fixed;inset:0;z-index:200;background:rgba(8,20,30,.94);display:none;align-items:center;justify-content:center;padding:30px} .lb.open{display:flex;animation:lb-bg .25s ease} .lb.open figure{animation:lb-in .3s ease} @keyframes lb-bg{from{opacity:0}} @keyframes lb-in{from{opacity:0;transform:scale(.955)}} @media (prefers-reduced-motion:reduce){.lb.open,.lb.open figure{animation:none}} .lb figure{max-width:min(1200px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:12px} .lb img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px} .lb figcaption{color:var(--sand);text-align:center;font-size:.92rem} .lb button{position:absolute;appearance:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:var(--white);width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:background .2s} .lb button:hover{background:rgba(255,255,255,.22)} .lb-close{top:20px;right:20px} .lb-prev{left:18px;top:50%;transform:translateY(-50%)} .lb-next{right:18px;top:50%;transform:translateY(-50%)} /* ---------- pricing ---------- */ .price-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px} .price-card{background:var(--white);border-radius:var(--rad);box-shadow:var(--shadow-soft);padding:28px 26px;display:flex;flex-direction:column;gap:14px;border-top:4px solid var(--gold)} .price-card h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .price-card h3 small{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);letter-spacing:.4px} .price-rows{display:grid;gap:8px;font-size:.94rem} .price-row{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:8px;background:var(--cream)} .price-row b{color:var(--navy);white-space:nowrap} .price-row.hi{background:var(--sea-soft)} .price-note{font-size:.82rem;color:var(--ink-soft)} .legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:34px;font-size:.88rem;color:var(--ink-soft)} .legend span{display:inline-flex;align-items:center;gap:8px;background:var(--white);padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-soft)} .legend i{width:11px;height:11px;border-radius:50%;display:inline-block} /* ---------- reviews ---------- */ .reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px} .review{background:var(--white);border-radius:var(--rad);padding:26px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:12px} .review .stars{color:var(--gold-deep);letter-spacing:3px;font-size:1.05rem} .review p{font-size:.96rem;color:var(--ink-soft);font-style:italic;margin:0} .review footer{font-size:.85rem;color:var(--navy);font-weight:700} /* ---------- contact / forms ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:44px} @media (max-width:880px){.contact-grid{grid-template-columns:1fr}} .contact-list{list-style:none;display:grid;gap:18px} .contact-list li{display:flex;gap:14px;align-items:flex-start} .contact-list svg{width:22px;height:22px;color:var(--gold-deep);flex:none;margin-top:3px} .contact-list b{display:block;color:var(--navy)} form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:620px){form .row{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .field label{font-size:.86rem;font-weight:700;color:var(--navy);letter-spacing:.3px} .field input,.field textarea{appearance:none;border:1.5px solid #d5ccbc;background:var(--white);border-radius:var(--rad-sm);padding:13px 15px;font-family:var(--sans);font-size:.98rem;color:var(--ink);transition:border .2s,box-shadow .2s} .field input:focus,.field textarea:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(200,169,106,.25)} .field textarea{min-height:130px;resize:vertical} /* custom select */ .cselect{position:relative} .cselect button.cs-btn{width:100%;appearance:none;border:1.5px solid #d5ccbc;background:var(--white);border-radius:var(--rad-sm);padding:13px 42px 13px 15px;font-family:var(--sans);font-size:.98rem;color:var(--ink);text-align:left;cursor:pointer} .cselect button.cs-btn::after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:translateY(-70%) rotate(45deg);transition:transform .2s} .cselect.open button.cs-btn::after{transform:translateY(-30%) rotate(-135deg)} .cs-list{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;background:var(--navy);border:1px solid rgba(200,169,106,.4);border-radius:var(--rad-sm);overflow:hidden;display:none;box-shadow:0 14px 34px rgba(0,0,0,.35);max-height:280px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gold) var(--navy)} .cselect.open .cs-list{display:block} .cs-list li{list-style:none;padding:12px 16px;color:var(--sand);font-size:.94rem;cursor:pointer} .cs-list li:hover,.cs-list li.sel{background:rgba(200,169,106,.22);color:var(--white)} .demo-banner{background:var(--navy);color:var(--sand);border:1px solid rgba(200,169,106,.45);border-radius:var(--rad-sm);padding:13px 18px;font-size:.9rem;display:flex;gap:11px;align-items:flex-start;margin-bottom:22px} .demo-banner svg{width:19px;height:19px;color:var(--gold);flex:none;margin-top:2px} /* ---------- map ---------- */ .map-frame{border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/8} .map-frame iframe{width:100%;height:100%;border:0;display:block} @media (max-width:700px){.map-frame{aspect-ratio:1/1}} /* ---------- footer ---------- */ .site-footer{background:var(--navy);color:#c9d4da;padding:64px 0 30px;font-size:.94rem} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px} @media (max-width:820px){.footer-grid{grid-template-columns:1fr}} .footer-brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:1.15rem;color:var(--white);margin-bottom:14px} .footer-brand svg{width:30px;height:30px;color:var(--gold)} .site-footer h4{color:var(--gold);font-family:var(--sans);font-size:.82rem;letter-spacing:2.4px;text-transform:uppercase;margin-bottom:16px} .footer-links{list-style:none;display:grid;gap:9px} .footer-links a{color:#c9d4da} .footer-links a:hover{color:var(--gold)} .footer-legal{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.82rem;color:#8fa1ac} .demo-note{color:var(--gold)} /* ---------- misc ---------- */ .totop{position:fixed;right:20px;bottom:20px;z-index:80;width:46px;height:46px;border-radius:50%;border:0;background:var(--navy);color:var(--gold);font-size:1.15rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:var(--shadow)} .totop.show{opacity:1;pointer-events:auto} .totop:hover{transform:translateY(-3px)} .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:300;background:var(--navy);color:var(--sand);border:1px solid rgba(200,169,106,.5);padding:15px 22px;border-radius:12px;font-size:.94rem;max-width:min(480px,90vw);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 12px 36px rgba(0,0,0,.35)} .toast.show{opacity:1;transform:translate(-50%,0)} .breadcrumb-hero{position:relative;min-height:44svh;display:flex;align-items:flex-end;color:var(--white);overflow:hidden} .breadcrumb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,38,.5),rgba(10,26,38,.75));z-index:1} .breadcrumb-hero .wrap{position:relative;z-index:2;padding-top:130px;padding-bottom:44px} .breadcrumb-hero h1{color:var(--white)} .breadcrumb-hero .crumbs{font-size:.85rem;color:var(--sand);letter-spacing:.5px;margin-bottom:10px} .breadcrumb-hero .crumbs a{color:var(--gold)} table.simple{width:100%;border-collapse:collapse;font-size:.94rem;background:var(--white);border-radius:var(--rad-sm);overflow:hidden;box-shadow:var(--shadow-soft)} table.simple th{background:var(--navy);color:var(--sand);text-align:left;padding:13px 16px;font-family:var(--sans);letter-spacing:.6px;font-size:.84rem;text-transform:uppercase} table.simple td{padding:12px 16px;border-bottom:1px solid #efe9dd} table.simple tr:last-child td{border-bottom:0} .table-scroll{overflow-x:auto;border-radius:var(--rad-sm)} .divider-wave{display:block;width:100%;height:36px;color:var(--gold);opacity:.55;margin:0 auto} .notice{background:var(--sea-soft);border-left:4px solid var(--sea);border-radius:0 var(--rad-sm) var(--rad-sm) 0;padding:16px 20px;font-size:.95rem;margin:18px 0} .notice svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--sea)} /* ---------- przewodnik (guide.js) ---------- */ .gd-ring{ position:fixed;z-index:390;pointer-events:none;border:2.5px solid var(--gold); border-radius:14px;box-shadow:0 0 0 9999px rgba(8,20,30,.74),0 0 22px rgba(200,169,106,.55); transition:top .35s ease,left .35s ease,width .35s ease,height .35s ease } @media (prefers-reduced-motion:reduce){.gd-ring{transition:none}} .gd-card{ position:fixed;z-index:400;background:var(--white);color:var(--ink);border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.45);padding:22px 24px;width:min(430px,calc(100vw - 32px)); border-top:4px solid var(--gold) } .gd-card.gd-bottom{left:50% !important;transform:translateX(-50%);bottom:18px;top:auto !important} .gd-eyebrow{font-size:.72rem;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px;font-weight:700} .gd-card h3{font-family:var(--serif);font-size:1.35rem;color:var(--navy);margin-bottom:8px} .gd-card p{font-size:.94rem;color:var(--ink-soft);margin-bottom:10px;line-height:1.55} .gd-note{display:flex;gap:8px;align-items:flex-start;background:var(--sea-soft);border-radius:9px;padding:10px 12px;font-size:.84rem !important;color:var(--navy) !important} .gd-note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--sea)} .gd-actions{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap} .gd-spacer{flex:1} .gd-btn{ appearance:none;border:0;cursor:pointer;border-radius:999px;padding:10px 16px; font-family:var(--sans);font-size:.88rem;font-weight:700;letter-spacing:.3px; transition:transform .15s,background .15s;text-decoration:none;display:inline-flex;align-items:center } .gd-btn:hover{transform:translateY(-1px)} .gd-next{background:var(--gold);color:var(--navy)} .gd-next:hover{background:#d6ba7f;color:var(--navy)} .gd-prev{background:var(--sea-soft);color:var(--navy)} .gd-skip{background:transparent;color:var(--ink-soft);font-weight:400;padding-left:0} .gd-skip:hover{color:var(--navy)} body.gd-on{overflow-x:clip}