/* ============================================================ MYW — Make Your Wish Events Shared stylesheet ============================================================ */ /* ---------- Fonts ---------- Headings: Cormorant Garamond · Body: Montserrat (loaded via Google Fonts in ) TheChairman kept for decorative numerals only. */ @font-face { font-family: "TheChairman"; src: url("../assets/fonts/TheChairman.otf") format("opentype"); font-weight: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { --navy: #001029; --navy-2: #041a3a; --navy-3: #071f42; --cream: #f6f3ec; --cream-2: #ece5d8; --silver: #d6dce8; --silver-2: #aeb8ca; --gold: #c9a24b; --gold-2: #e6c67e; --gold-soft: rgba(201,162,75,.4); --ink: #22262e; --serif: "Playfair Display", Georgia, "Times New Roman", serif; --caps: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --script: "Playfair Display", Georgia, serif; --body: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --num: "TheChairman", "Playfair Display", Georgia, serif; --maxw: 1200px; --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--body); color: var(--silver); background: var(--navy); line-height: 1.7; letter-spacing: .01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---------- Typo helpers ---------- */ h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: .005em; } .eyebrow { font-family: var(--caps); text-transform: uppercase; letter-spacing: .38em; font-size: .72rem; color: var(--gold-2); margin-bottom: 18px; } .script { font-family: var(--script); font-style: italic; font-weight: 500; color: var(--silver); } .gold { color: var(--gold-2); } /* Section title block */ .sec-head { text-align: center; max-width: 640px; margin: 0 auto 56px; } .sec-head h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--cream); } .sec-head .script { font-size: clamp(2.4rem, 6vw, 4rem); display: block; margin-top: -6px; } .sec-head p { margin-top: 18px; color: var(--silver-2); } /* Gold divider with diamond, like the flyers */ .divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px auto; max-width: 240px; color: var(--gold); } .divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-soft)); } .divider::after { background: linear-gradient(90deg, var(--gold-soft), transparent); } .divider span { font-size: .8rem; } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--caps); text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; padding: 16px 34px; border: 1px solid var(--gold); color: var(--gold-2); border-radius: 2px; transition: all .35s var(--ease); cursor: pointer; background: transparent; } .btn:hover { background: var(--gold); color: var(--navy); box-shadow: 0 10px 30px -10px var(--gold-soft); transform: translateY(-2px); } /* Solid CTA — filled with our silver glitter texture (matches the logo) */ .btn--solid { color: var(--navy); font-weight: 600; border-color: rgba(255,255,255,.55); background: linear-gradient(rgba(255,255,255,.08), rgba(0,16,41,.12)), url("../assets/tex/glitter.jpg") center/cover; text-shadow: 0 1px 1px rgba(255,255,255,.45); box-shadow: 0 8px 22px -8px rgba(0,0,0,.45); } .btn--solid:hover { color: var(--navy); background: linear-gradient(rgba(255,255,255,.16), rgba(0,16,41,.06)), url("../assets/tex/glitter.jpg") center/cover; filter: brightness(1.05); box-shadow: 0 12px 30px -8px rgba(0,0,0,.5), 0 0 22px 2px rgba(230,198,126,.55); transform: translateY(-2px); } /* random sparkle glints on the glitter CTAs (positions spawned by main.js) */ .btn--solid { position: relative; overflow: hidden; } .btn-spark { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, #fff 18%, rgba(255,255,255,.7) 40%, rgba(230,198,126,.5) 60%, transparent 75%); opacity: 0; animation: btn-spark .35s ease-out forwards; } @keyframes btn-spark { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.5); } } /* ============================================================ HEADER / NAV ============================================================ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 18px 0; transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease); } .site-header.scrolled { background: rgba(0,16,41,.96); padding: 10px 0; box-shadow: 0 1px 0 var(--gold-soft), 0 12px 40px -20px #000; } .nav { display: flex; align-items: center; justify-content: space-between; } .nav__logo img { height: 66px; width: auto; transition: height .4s var(--ease); } .site-header.scrolled .nav__logo img { height: 54px; } .nav__links { display: flex; align-items: center; gap: 34px; list-style: none; } .nav__links a { font-family: var(--caps); text-transform: uppercase; letter-spacing: .2em; font-size: .74rem; color: var(--silver); position: relative; padding: 6px 0; transition: color .3s; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--gold-2); transition: width .3s var(--ease); } .nav__links a:hover, .nav__links a.active { color: var(--gold-2); } .nav__links a:hover::after, .nav__links a.active::after { width: 100%; } .nav__cta { margin-left: 8px; } .nav__cta .btn { padding: 11px 24px; } .menu-logo { display: none; } body.menu-open { overflow: hidden; } /* burger */ .burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .burger span { display: block; width: 26px; height: 2px; background: var(--silver); margin: 5px 0; transition: .3s var(--ease); } .burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .burger.open span:nth-child(2){ opacity: 0; } .burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--navy); } /* Party photo — kept almost fully visible on the right, fades into navy on the left */ .hero__bg { position: absolute; inset: 0; background: url("../assets/img/party-hero.jpg") center right / cover no-repeat; z-index: 0; } .hero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #001029 0%, #001029 30%, rgba(0,16,41,.90) 42%, rgba(0,16,41,.55) 60%, rgba(0,16,41,.18) 78%, rgba(0,16,41,.35) 100%), linear-gradient(0deg, rgba(0,8,26,.85) 0%, transparent 32%); } /* twinkling glitter field */ .hero__stars { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.6px 1.6px at 20% 30%, rgba(255,255,255,.9), transparent), radial-gradient(1.4px 1.4px at 70% 20%, rgba(230,198,126,.8), transparent), radial-gradient(1.2px 1.2px at 40% 70%, rgba(255,255,255,.7), transparent), radial-gradient(1.8px 1.8px at 85% 60%, rgba(255,255,255,.85), transparent), radial-gradient(1.3px 1.3px at 15% 80%, rgba(230,198,126,.7), transparent), radial-gradient(1.5px 1.5px at 60% 85%, rgba(255,255,255,.75), transparent), radial-gradient(1.2px 1.2px at 90% 35%, rgba(255,255,255,.6), transparent), radial-gradient(1.4px 1.4px at 33% 15%, rgba(255,255,255,.7), transparent); animation: twinkle 6s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: .35; } to { opacity: 1; } } .hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 140px 24px 90px; text-align: left; } .hero__textbox { max-width: 620px; } .hero__eyebrow { font-family: var(--num); letter-spacing: .02em; font-size: clamp(1.2rem, 2.8vw, 1.7rem); color: var(--gold-2); margin-bottom: 20px; } .hero__title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1.04; color: var(--cream); margin-bottom: 6px; } .hero__accent { font-family: var(--script); font-style: italic; font-weight: 500; font-size: clamp(2rem, 5.2vw, 3.4rem); color: var(--gold-2); margin-bottom: 22px; } .hero__lead { color: var(--silver); font-size: clamp(.98rem, 1.5vw, 1.12rem); max-width: 480px; margin-bottom: 36px; } .hero__logo { width: min(520px, 82vw); margin: 0 0 8px; } .hero__tag { font-family: var(--script); font-style: italic; font-size: clamp(1.8rem, 5vw, 3.1rem); color: var(--silver); line-height: 1.2; margin: 10px 0 4px; } .hero__sub { font-family: var(--caps); text-transform: uppercase; letter-spacing: .32em; font-size: clamp(.7rem, 1.6vw, .9rem); color: var(--gold-2); margin-bottom: 34px; } .hero__cta { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; } .hero__scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--silver-2); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; font-family: var(--caps); } .hero__scroll::after { content: ""; display: block; width: 1px; height: 40px; margin: 10px auto 0; background: linear-gradient(var(--gold), transparent); animation: scrolldot 2s ease-in-out infinite; } @keyframes scrolldot { 0%,100%{opacity:.3;transform:scaleY(.6);} 50%{opacity:1;transform:scaleY(1);} } /* small page hero for inner pages */ .page-hero { position: relative; padding: 190px 0 90px; text-align: center; overflow: hidden; background: radial-gradient(900px 500px at 50% 0%, var(--navy-3), transparent 70%), linear-gradient(180deg, #00081a, var(--navy)); } .page-hero .hero__stars { opacity: .6; } .page-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); color: var(--cream); position: relative; z-index: 2; } .page-hero .script { font-size: clamp(2.6rem, 7vw, 4.4rem); } .page-hero .breadcrumb { position: relative; z-index: 2; margin-top: 16px; font-family: var(--caps); text-transform: uppercase; letter-spacing: .28em; font-size: .72rem; color: var(--gold-2); } /* ============================================================ SECTION SHELLS ============================================================ */ .section { padding: 110px 0; position: relative; } .section--navy { background: var(--navy); } .section--panel { background: linear-gradient(180deg, var(--navy-2), var(--navy-3)); } .section--silk { color: var(--ink); background: linear-gradient(180deg, var(--cream), var(--cream-2)); position: relative; } .section--silk::before { content: ""; position: absolute; inset: 0; background: url("../assets/tex/silk.jpg") center/cover; opacity: .35; mix-blend-mode: luminosity; pointer-events: none; } .section--silk > .container { position: relative; z-index: 1; } .section--silk .sec-head h2 { color: var(--navy); } .section--silk .sec-head .script { color: var(--gold); } .section--silk .sec-head p { color: #5a5f68; } .section--silk .eyebrow { color: var(--gold); } /* Readable steps on the light (silk) background */ .section--silk .step h3 { color: var(--navy); } .section--silk .step p { color: #5a5f68; } .section--silk .step__no { color: var(--navy); border-color: var(--gold); background: rgba(201,162,75,.10); } /* ============================================================ ABOUT (intro two-col) ============================================================ */ .about { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; } .about__text .eyebrow { text-align: left; } .about__text h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--navy); margin-bottom: 8px; } .about__text .script { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--gold); display: block; margin-bottom: 18px; } .about__text p { color: #4d525b; margin-bottom: 16px; } .about__media { position: relative; } .about__media img { border-radius: 4px; box-shadow: 0 30px 60px -25px rgba(0,16,41,.6); border: 1px solid rgba(201,162,75,.35); } /* Gold corner brackets — sit OUTSIDE the image, so they never get covered when the photo loads. Each line is solid at the corner and fades out toward its end. */ .about__media::before, .about__media::after { content: ""; position: absolute; width: 58px; height: 58px; pointer-events: none; } .about__media::before { top: -12px; left: -12px; background: linear-gradient(to right, var(--gold) 0%, var(--gold) 26%, transparent 100%) left top / 100% 2px no-repeat, linear-gradient(to bottom, var(--gold) 0%, var(--gold) 26%, transparent 100%) left top / 2px 100% no-repeat; } .about__media::after { right: -12px; bottom: -12px; background: linear-gradient(to left, var(--gold) 0%, var(--gold) 26%, transparent 100%) right bottom / 100% 2px no-repeat, linear-gradient(to top, var(--gold) 0%, var(--gold) 26%, transparent 100%) right bottom / 2px 100% no-repeat; } .abt-points { list-style: none; margin-top: 30px; display: grid; gap: 16px; } .abt-points li { display: flex; gap: 15px; align-items: flex-start; } .abt-points li > span { color: var(--gold); font-size: .85rem; margin-top: 7px; flex: none; } .abt-points b { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--navy); display: block; line-height: 1.3; } .abt-points small { color: #5a5f68; font-size: .92rem; } /* ============================================================ SERVICES ============================================================ */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(201,162,75,.28); border-radius: 4px; padding: 42px 32px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s; background: radial-gradient(400px 200px at 50% 0%, rgba(201,162,75,.14), transparent 70%); } .card:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); } .card:hover::before { opacity: 1; } .card__num { font-family: var(--num); font-size: 1.05rem; color: var(--gold-2); border: 1px solid var(--gold-soft); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 22px; } .card h3 { font-size: 1.5rem; color: var(--cream); margin-bottom: 8px; } .card .card__sub { font-family: var(--caps); text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; color: var(--gold-2); margin-bottom: 16px; display: block; } .card p { color: var(--silver-2); font-size: .96rem; } .card ul { list-style: none; margin-top: 16px; } .card ul li { position: relative; padding-left: 20px; margin: 7px 0; color: var(--silver-2); font-size: .92rem; } .card ul li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: .7rem; top: 3px; } /* ============================================================ GALLERY (grid — row by row, NOT masonry) ============================================================ */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .gallery--home { grid-template-columns: repeat(4, 1fr); } .g-item { position: relative; overflow: hidden; border-radius: 3px; cursor: pointer; aspect-ratio: 4/3; background: var(--navy-2); } .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .g-item::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold-2); font-size: 1.6rem; opacity: 0; background: rgba(0,16,41,.45); transition: opacity .4s; } .g-item:hover img { transform: scale(1.08); } .g-item:hover::after { opacity: 1; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(0,6,18,.94); align-items: center; justify-content: center; padding: 30px; } .lightbox.open { display: flex; } .lightbox img { max-width: 92vw; max-height: 86vh; border: 1px solid var(--gold-soft); border-radius: 3px; } .lightbox__close, .lightbox__nav { position: absolute; background: none; border: 1px solid var(--gold-soft); color: var(--gold-2); width: 52px; height: 52px; border-radius: 50%; cursor: pointer; font-size: 1.4rem; transition: .3s; display: grid; place-items: center; } .lightbox__close { top: 26px; right: 26px; } .lightbox__nav { top: 50%; transform: translateY(-50%); } .lightbox__nav:hover, .lightbox__close:hover { background: var(--gold); color: var(--navy); } .lb-prev { left: 26px; } .lb-next { right: 26px; } /* ============================================================ PROCESS / CHECKLIST ============================================================ */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .step { text-align: center; position: relative; } .step__no { font-family: var(--num); font-size: 1.4rem; color: var(--gold); width: 62px; height: 62px; border: 1px solid var(--gold-soft); border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; background: rgba(201,162,75,.06); } .step__no svg { width: 24px; height: 24px; } .step h3 { font-size: 1.15rem; color: var(--cream); margin-bottom: 8px; } .step p { font-size: .9rem; color: var(--silver-2); } /* ---------- Packages ---------- */ #paketi { scroll-margin-top: 88px; } .pkgs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .pkg { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid rgba(201,162,75,.28); border-radius: 6px; padding: 40px 34px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; } .pkg--featured { border-color: var(--gold); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); } .pkg:hover { transform: translateY(-6px); border-color: var(--gold); } .pkg__tag { font-family: var(--caps); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; color: var(--gold-2); } .pkg h3 { font-size: 1.7rem; color: var(--cream); margin: 8px 0 6px; } .pkg__lead { font-family: var(--script); font-style: italic; font-weight: 500; color: var(--gold-2); font-size: 1.18rem; margin-bottom: 14px; line-height: 1.4; } .pkg__desc { color: var(--silver-2); margin-bottom: 22px; } .pkg__label { font-family: var(--caps); text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: var(--gold-2); margin-bottom: 12px; } .pkg__list { list-style: none; margin: 0 0 24px; } .pkg__list li { position: relative; padding-left: 26px; margin: 11px 0; color: var(--silver); font-size: .95rem; line-height: 1.45; } .pkg__list li::before { content: "✦"; position: absolute; left: 0; top: 2px; color: var(--gold); font-size: .78rem; } .pkg__list li b { color: var(--cream); font-weight: 600; } .pkg__result { background: rgba(201,162,75,.08); border-left: 2px solid var(--gold); border-radius: 4px; padding: 15px 17px; color: var(--silver); font-size: .93rem; line-height: 1.5; } .pkg__result b { display: block; color: var(--gold-2); font-family: var(--caps); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; margin-bottom: 4px; } /* ============================================================ CTA band ============================================================ */ .cta-band { text-align: center; padding: 96px 0; position: relative; overflow: hidden; } .cta-band .hero__stars { opacity: .5; } .cta-band h2 { font-size: clamp(1.8rem, 4.5vw, 3rem); color: var(--cream); position: relative; z-index: 2; } .cta-band .cta-script { position: relative; z-index: 2; font-family: var(--script); font-style: italic; font-weight: 500; font-size: clamp(1.9rem, 5vw, 3rem); color: var(--gold-2); margin: 4px 0 0; max-width: none; } .cta-band p { position: relative; z-index: 2; color: var(--silver-2); margin: 18px auto 30px; max-width: 520px; } .dia { font-family: var(--body); font-style: normal; color: var(--gold-2); margin-left: 8px; } .cta-band .btn { position: relative; z-index: 2; } /* ============================================================ CONTACT ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .contact-info .eyebrow { text-align: left; } .contact-info h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--cream); margin-bottom: 6px; } .contact-info .script { font-size: clamp(2.2rem,5vw,3.2rem); color: var(--gold-2); display: block; margin-bottom: 18px; } .contact-info > p { color: var(--silver-2); margin-bottom: 28px; } .c-line { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(201,162,75,.18); } .c-line__ic { width: 46px; height: 46px; flex: none; border: 1px solid var(--gold-soft); border-radius: 50%; display: grid; place-items: center; color: var(--gold-2); } .c-line__ic svg { width: 21px; height: 21px; } .c-line b { color: var(--cream); font-weight: 400; font-family: var(--caps); letter-spacing: .1em; font-size: 1rem; } .c-line--link { transition: color .3s; } .c-line--link:hover .c-line__ic { border-color: var(--gold); background: var(--gold); color: var(--navy); } .c-line--link:hover b { color: var(--gold-2); } .form { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(201,162,75,.25); border-radius: 4px; padding: 36px; } .form label { display: block; font-family: var(--caps); text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: var(--gold-2); margin: 0 0 8px; } .field { margin-bottom: 20px; } .form input, .form textarea, .form select { width: 100%; background: rgba(0,8,24,.5); border: 1px solid rgba(201,162,75,.25); color: var(--cream); padding: 13px 15px; border-radius: 3px; font-family: var(--body); font-size: .95rem; transition: border-color .3s; } .form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--gold); } .form select { color-scheme: dark; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23c9a24b' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px; padding-right: 40px; cursor: pointer; } .form select option { background-color: var(--navy-2); color: var(--cream); padding: 10px; } .form textarea { min-height: 120px; resize: vertical; } .form .btn { width: 100%; margin-top: 6px; } .form__note { font-size: .78rem; color: var(--silver-2); margin-top: 14px; text-align: center; } /* ============================================================ FOOTER ============================================================ */ .footer { background: #00081a; padding: 70px 0 30px; border-top: 1px solid rgba(201,162,75,.18); } .footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; align-items: start; } .footer__logo img { width: 210px; max-width: 100%; margin-bottom: 18px; } .footer__logo p { color: var(--silver-2); font-size: .9rem; max-width: 300px; } .footer h4 { font-family: var(--caps); text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; color: var(--gold-2); margin-bottom: 18px; } .footer ul { list-style: none; } .footer ul li { margin: 10px 0; } .footer ul a { color: var(--silver-2); font-size: .92rem; transition: color .3s; } .footer ul a:hover { color: var(--gold-2); } .socials { display: flex; gap: 12px; margin-top: 4px; } .socials a { width: 42px; height: 42px; border: 1px solid var(--gold-soft); border-radius: 50%; display: grid; place-items: center; color: var(--gold-2); transition: .3s; } .soc-ic { display: block; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } /* icons inlined as data URIs so they also work when opened from disk (file://) */ .soc-ic--fb { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E"); } .soc-ic--ig { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"); } .soc-ic--viber { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.4 0C9.473.028 5.333.344 3.02 2.467 1.302 4.187.696 6.7.633 9.817.57 12.933.488 18.776 6.12 20.36h.003l-.004 2.416s-.037.977.61 1.177c.777.242 1.234-.5 1.98-1.302.407-.44.972-1.084 1.397-1.58 3.85.326 6.812-.416 7.15-.525.776-.252 5.176-.816 5.892-6.657.74-6.02-.36-9.83-2.34-11.546-.596-.55-3.006-2.3-8.375-2.323 0 0-.395-.025-1.037-.017zm.058 1.693c.545-.004.88.017.88.017 4.542.02 6.717 1.388 7.222 1.846 1.675 1.435 2.53 4.868 1.906 9.897v.002c-.604 4.878-4.174 5.184-4.832 5.395-.28.09-2.882.737-6.153.524 0 0-2.436 2.94-3.197 3.704-.12.12-.26.167-.352.144-.13-.033-.166-.188-.165-.414l.02-4.018c-4.762-1.32-4.485-6.292-4.43-8.895.054-2.604.543-4.738 1.996-6.173 1.96-1.773 5.474-2.018 7.11-2.03zm.38 2.602c-.167 0-.303.135-.304.302 0 .167.133.303.3.305 1.624.01 2.946.537 4.028 1.592 1.073 1.046 1.62 2.468 1.633 4.334.002.167.14.3.307.3.166-.002.3-.138.3-.304-.014-1.984-.618-3.596-1.816-4.764-1.19-1.16-2.692-1.753-4.447-1.765zm-3.96.695c-.19-.032-.4.005-.616.117l-.01.002c-.43.247-.816.562-1.146.932-.002.004-.006.004-.008.008-.267.323-.42.638-.46.948-.008.046-.01.093-.007.14 0 .136.022.27.065.4l.013.01c.135.48.473 1.276 1.205 2.604.42.768.903 1.5 1.446 2.186.27.344.56.673.87.984l.132.132c.31.308.64.6.984.87.686.543 1.418 1.027 2.186 1.447 1.328.733 2.126 1.07 2.604 1.206l.01.014c.13.042.265.064.402.063.046.002.092 0 .138-.008.31-.036.627-.19.948-.46.004 0 .003-.002.008-.005.37-.33.683-.72.93-1.148l.003-.01c.225-.432.15-.842-.18-1.12-.004 0-.698-.58-1.037-.83-.36-.255-.73-.492-1.113-.71-.51-.285-1.032-.106-1.248.174l-.447.564c-.23.283-.657.246-.657.246-3.12-.796-3.955-3.955-3.955-3.955s-.037-.426.248-.656l.563-.448c.277-.215.456-.737.17-1.248-.217-.383-.454-.756-.71-1.115-.25-.34-.826-1.033-.83-1.035-.137-.165-.31-.265-.502-.297zm4.49.88c-.158.002-.29.124-.3.282-.01.167.115.312.282.324 1.16.085 2.017.466 2.645 1.15.63.688.93 1.524.906 2.57-.002.168.13.306.3.31.166.003.305-.13.31-.297.025-1.175-.334-2.193-1.067-2.994-.74-.81-1.777-1.253-3.05-1.346h-.024zm.463 1.63c-.16.002-.29.127-.3.287-.008.167.12.31.288.32.523.028.875.175 1.113.422.24.245.388.62.416 1.164.01.167.15.295.318.287.167-.008.295-.15.287-.317-.03-.644-.215-1.178-.58-1.557-.367-.378-.893-.574-1.52-.607h-.018z'/%3E%3C/svg%3E"); } .socials a:hover { background: var(--gold); color: var(--navy); transform: translateY(-3px); } .footer__bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.06); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: var(--silver-2); letter-spacing: .05em; } .footer__credit { display: inline-flex; align-items: center; gap: 9px; text-transform: lowercase; letter-spacing: .1em; } .footer__credit img { height: 18px; width: auto; display: block; } .footer__credit a { display: inline-flex; opacity: .85; transition: opacity .3s; } .footer__credit a:hover { opacity: 1; } /* ============================================================ Reveal-on-scroll ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 940px) { /* Mobile menu — full-screen navy panel, staggered items, full logo at bottom */ .nav__menu { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; padding: 86px 24px 44px; background: #010c22; transform: translateX(100%); transition: transform .45s var(--ease); } .nav__menu.open { transform: none; } .nav__links { position: static; width: auto; background: none; border: none; padding: 0; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .nav__links li { opacity: 0; transform: translateX(55px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .nav__menu.open .nav__links li { opacity: 1; transform: none; } .nav__menu.open .nav__links li:nth-child(1) { transition-delay: .14s; } .nav__menu.open .nav__links li:nth-child(2) { transition-delay: .22s; } .nav__menu.open .nav__links li:nth-child(3) { transition-delay: .30s; } .nav__menu.open .nav__links li:nth-child(4) { transition-delay: .38s; } .nav__links a { font-size: 1.4rem; padding: 15px 0; letter-spacing: .28em; } .nav__links a::after { display: none; } .menu-logo { display: block; width: 230px; flex: none; opacity: 0; transition: opacity .6s var(--ease); } .nav__menu.open .menu-logo { opacity: .92; transition-delay: .48s; } .nav__cta { display: none; } .burger { display: block; z-index: 101; } .about, .contact-grid { grid-template-columns: 1fr; gap: 40px; } .about__media { order: -1; } .cards { grid-template-columns: 1fr; } .pkgs { grid-template-columns: 1fr; } .steps { grid-template-columns: repeat(2, 1fr); } .gallery, .gallery--home { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr; gap: 30px; } .section { padding: 80px 0; } /* Hero: photo behind, stronger navy wash so text stays readable */ .hero__bg { background-position: center center; } .hero__overlay { background: linear-gradient(180deg, rgba(0,16,41,.72) 0%, rgba(0,16,41,.80) 55%, rgba(0,8,26,.94) 100%); } .hero__inner { padding: 130px 24px 90px; } .hero__lead { max-width: 100%; } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .hero__cta { flex-direction: column; } .hero__cta .btn { width: 100%; } }