/* Landing Teambuilding Carpat Inn — v0.2 „alpine warm editorial". Culori & rază: CSS variables din CMS (inline în ). Paleta pornește din carpatinn.ro: teracotă #B95E43 · negru cald #231F20 · peach #F6B392. Fundal crem editorial. */ /* ── Fonturi self-hosted (assets/fonts/) ─────────────────────────────── */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/roboto-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/roboto-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../fonts/playfair-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../fonts/playfair-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Bază ─────────────────────────────────────────────────────────────── */ :root { --cit-cream: #FAF6F1; --cit-cream-2: #F3ECE4; --cit-line: rgba(35, 31, 32, .1); --cit-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --cit-sans: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body.cit-body { font-family: var(--cit-sans); font-weight: 300; color: #4a4442; background: var(--cit-cream); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } h1, h2 { font-family: var(--cit-serif); font-weight: 600; color: var(--cit-dark); line-height: 1.12; } h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: -0.01em; } h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: .5em; max-width: 26ch; } h3 { font-family: var(--cit-sans); font-weight: 600; font-size: 1.2rem; color: var(--cit-dark); margin-bottom: .5em; } a { color: var(--cit-primary); } p { max-width: 65ch; } .cit-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .cit-narrow { max-width: 820px; } .cit-center { text-align: center; margin-top: 40px; } .cit-lead { font-size: 1.05rem; color: #6d6461; margin-bottom: 2rem; } .cit-note { font-size: .85rem; color: #8a817d; margin-top: 2rem; max-width: 70ch; } /* Eyebrow — eticheta mică de deasupra titlurilor */ .cit-eyebrow { font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--cit-primary); margin-bottom: 14px; } /* ── Butoane ──────────────────────────────────────────────────────────── */ .cit-btn { display: inline-block; background: linear-gradient(180deg, color-mix(in srgb, var(--cit-primary) 82%, #ffffff), var(--cit-primary) 55%, color-mix(in srgb, var(--cit-primary) 84%, #000000)); color: #fff; border: 0; border-radius: var(--cit-radius); padding: 17px 40px; font-family: var(--cit-sans); font-size: 15px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; box-shadow: 0 4px 0 color-mix(in srgb, var(--cit-primary) 65%, #000000), 0 14px 34px rgba(185, 94, 67, .45); } .cit-btn::after { content: ' →'; font-weight: 400; } .cit-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 6px 0 color-mix(in srgb, var(--cit-primary) 65%, #000000), 0 20px 44px rgba(185, 94, 67, .5); } .cit-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 color-mix(in srgb, var(--cit-primary) 65%, #000000), 0 8px 20px rgba(185, 94, 67, .4); } .cit-btn-lg { padding: 20px 52px; font-size: 16px; } /* microcopy sub CTA */ .cit-cta-note { font-size: .82rem; color: #8a817d; margin-top: 12px; max-width: none; } .cit-dark .cit-cta-note, .cit-final .cit-cta-note { color: rgba(255,255,255,.7); } .cit-btn-ghost { display: inline-block; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.55); border-radius: var(--cit-radius); padding: 17px 34px; font-size: 15px; font-weight: 500; letter-spacing: .04em; transition: background .18s ease, border-color .18s ease; } .cit-btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; } /* ── Bara de sus ──────────────────────────────────────────────────────── */ .cit-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: 16px 0; transition: background .25s ease, padding .25s ease, box-shadow .25s ease; } .cit-topbar.is-solid { background: rgba(35, 31, 32, .96); padding: 8px 0; box-shadow: 0 2px 18px rgba(0,0,0,.25); } .cit-topbar-in { display: flex; align-items: center; justify-content: space-between; } .cit-logo { height: 60px; width: auto; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4)); transition: height .25s ease; } .cit-topbar.is-solid .cit-logo { height: 44px; } .cit-logo-text { color: #fff; font-family: var(--cit-serif); font-size: 1.45rem; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.45); } .cit-topbar-right { display: flex; align-items: center; gap: 14px; } .cit-phone { color: #fff; font-weight: 500; text-decoration: none; font-size: .95rem; text-shadow: 0 1px 4px rgba(0,0,0,.5); } .cit-lang { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.5); border-radius: var(--cit-radius); padding: 4px 13px; font-size: .8rem; letter-spacing: .06em; } .cit-lang:hover { background: rgba(255,255,255,.15); } /* ── Hero ─────────────────────────────────────────────────────────────── */ .cit-hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; } .cit-hero-media, .cit-hero-media .cit-media, .cit-hero-media .cit-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cit-hero-media .cit-media { animation: cit-hero-zoom 18s ease-out forwards; } @keyframes cit-hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } } .cit-hero-overlay { position: absolute; inset: 0; background: linear-gradient(75deg, rgba(24, 20, 21, .82) 0%, rgba(24, 20, 21, .55) 45%, rgba(24, 20, 21, .22) 75%, rgba(24, 20, 21, .35) 100%); } .cit-hero-in { position: relative; z-index: 2; color: #fff; padding-top: 130px; padding-bottom: 90px; width: 100%; } .cit-hero .cit-eyebrow { color: var(--cit-accent); } .cit-hero h1 { color: #fff; margin-bottom: .35em; max-width: 16ch; text-shadow: 0 2px 24px rgba(0,0,0,.35); } .cit-hero-sub { font-size: 1.14rem; font-weight: 300; max-width: 52ch; margin-bottom: 2em; color: rgba(255,255,255,.92); } .cit-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .cit-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 2.4em; padding: 0; } .cit-badges li { font-size: .82rem; font-weight: 400; letter-spacing: .02em; border: 1px solid rgba(255,255,255,.32); border-radius: 100px; padding: 7px 16px; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); } .cit-badges li::before { content: '✓ '; color: var(--cit-accent); font-weight: 700; } .cit-scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 14px; } .cit-scrollcue::after { content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; background: #fff; border-radius: 2px; animation: cit-scroll 1.8s ease-in-out infinite; } @keyframes cit-scroll { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(12px); } 100% { opacity: 0; } } /* ── Trustbar ─────────────────────────────────────────────────────────── */ .cit-trustbar { background: var(--cit-dark); color: #fff; padding: 18px 0; } .cit-trustbar ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; padding: 0; } .cit-trustbar li { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: rgba(255,255,255,.85); padding: 0 28px; border-right: 1px solid rgba(255,255,255,.18); } .cit-trustbar li:last-child { border-right: 0; } /* ── Secțiuni ─────────────────────────────────────────────────────────── */ .cit-section { padding: 104px 0; } .cit-alt { background: #fff; } .cit-dark { background: var(--cit-dark); } .cit-dark h2 { color: #fff; } .cit-dark .cit-eyebrow { color: var(--cit-accent); } .cit-dark .cit-checklist li { color: rgba(255,255,255,.88); } /* Reveal la scroll (JS adaugă .is-visible; fără JS totul e vizibil) */ .cit-reveal { opacity: 1; transform: none; } .js .cit-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .js .cit-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .cit-reveal { opacity: 1; transform: none; transition: none; } .cit-hero-media .cit-media { animation: none; } html { scroll-behavior: auto; } } /* ── Split (text + imagine) ───────────────────────────────────────────── */ .cit-split-in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; } .cit-split-rev { grid-template-columns: 1.15fr 1fr; } .cit-split-rev .cit-split-text { order: 2; } .cit-split-text p { max-width: 58ch; margin-bottom: 1em; } .cit-split-media { position: relative; } .cit-split-media .cit-media { border-radius: 20px; width: 100%; height: clamp(400px, 46vw, 620px); object-fit: cover; box-shadow: 0 24px 60px rgba(35, 31, 32, .18); } .cit-split-media .cit-ph { border-radius: 20px; width: 100%; aspect-ratio: 4/3; box-shadow: 0 24px 60px rgba(35, 31, 32, .18); } /* accent decorativ în spatele imaginii */ .cit-split-media::before { content: ''; position: absolute; inset: 26px -26px -26px 26px; z-index: -1; border-radius: 20px; background: linear-gradient(135deg, var(--cit-accent), var(--cit-primary)); opacity: .16; } .cit-split-rev .cit-split-media::before { inset: 26px 26px -26px -26px; } /* ── Placeholder media (doar dacă o imagine e ștearsă din CMS) ────────── */ .cit-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--cit-cream-2), #e8ddd2); color: #a5968a; font-size: .88rem; font-weight: 400; text-align: center; padding: 24px; min-height: 240px; } /* ── Carduri „Pachet" ─────────────────────────────────────────────────── */ .cit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .cit-card { background: var(--cit-cream); border: 1px solid var(--cit-line); border-radius: 18px; padding: 30px 28px; transition: transform .22s ease, box-shadow .22s ease; } .cit-alt .cit-card { background: var(--cit-cream); } .cit-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(35, 31, 32, .1); } .cit-card h3 { font-family: var(--cit-serif); font-weight: 600; font-size: 1.35rem; color: var(--cit-dark); } .cit-card h3::after { content: ''; display: block; width: 34px; height: 2px; background: var(--cit-accent); margin-top: 10px; } .cit-card p { font-size: .94rem; color: #6d6461; margin-top: 12px; } /* ── Liste cu bife ────────────────────────────────────────────────────── */ .cit-checklist { list-style: none; padding: 0; } .cit-checklist li { padding: 7px 0 7px 32px; position: relative; } .cit-checklist li::before { content: '✓'; position: absolute; left: 0; top: 7px; color: color-mix(in srgb, var(--cit-primary) 70%, var(--cit-accent)); font-weight: 700; } .cit-cols2 { columns: 2; column-gap: 56px; } /* ── Activități — 3 coloane ───────────────────────────────────────────── */ .cit-cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; } .cit-col { background: var(--cit-cream); border: 1px solid var(--cit-line); border-radius: 18px; padding: 28px; } .cit-col h3 { font-family: var(--cit-serif); font-size: 1.35rem; } .cit-col h3::after { content: ''; display: block; width: 34px; height: 2px; background: var(--cit-accent); margin-top: 10px; } .cit-col ul { list-style: none; padding: 0; margin-top: 14px; } .cit-col li { padding: 6px 0; font-size: .94rem; color: #6d6461; border-bottom: 1px dashed var(--cit-line); } .cit-col li:last-child { border-bottom: 0; } /* ── Program 2 zile — timeline ────────────────────────────────────────── */ .cit-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; } .cit-day { background: #fff; border: 1px solid var(--cit-line); border-radius: 18px; padding: 32px; } .cit-day h3 { font-family: var(--cit-serif); font-size: 1.5rem; color: var(--cit-dark); margin-bottom: 18px; } .cit-day ol { list-style: none; padding: 0; position: relative; } .cit-day ol::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--cit-line); } .cit-day li { padding: 6px 0 6px 26px; font-size: .94rem; color: #6d6461; position: relative; } .cit-day li::before { content: ''; position: absolute; left: 0; top: 13px; width: 11px; height: 11px; border-radius: 50%; background: var(--cit-cream); border: 2.5px solid var(--cit-accent); } /* ── Excursii ─────────────────────────────────────────────────────────── */ .cit-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .cit-zone { background: var(--cit-cream); border: 1px solid var(--cit-line); border-radius: 18px; padding: 26px; } .cit-zone h3 { font-family: var(--cit-serif); font-size: 1.3rem; } .cit-zone p { font-size: .92rem; color: #6d6461; margin-top: 6px; } /* ── Testimoniale ─────────────────────────────────────────────────────── */ .cit-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .cit-quote { background: #fff; border: 1px solid var(--cit-line); border-radius: 18px; padding: 32px; } .cit-quote p { font-family: var(--cit-serif); font-size: 1.15rem; font-style: italic; color: var(--cit-dark); } .cit-quote cite { display: block; margin-top: 16px; font-style: normal; font-weight: 500; color: var(--cit-primary); font-size: .88rem; letter-spacing: .04em; } /* ── FAQ ──────────────────────────────────────────────────────────────── */ .cit-faq { border-bottom: 1px solid var(--cit-line); padding: 4px 0; background: transparent; } .cit-faq summary { font-weight: 500; font-size: 1.05rem; color: var(--cit-dark); cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; } .cit-faq summary::-webkit-details-marker { display: none; } .cit-faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--cit-serif); font-size: 1.6rem; font-weight: 500; color: var(--cit-primary); transition: transform .2s ease; } .cit-faq[open] summary::after { content: '–'; } .cit-faq p { padding: 0 0 20px; font-size: .95rem; color: #6d6461; max-width: 70ch; } /* ── CTA final ────────────────────────────────────────────────────────── */ .cit-final { position: relative; background-color: var(--cit-dark); background-size: cover; background-position: center; text-align: center; padding: 130px 0; } .cit-final-overlay { position: absolute; inset: 0; background: rgba(24, 20, 21, .8); } .cit-final-in { position: relative; z-index: 2; color: #fff; display: flex; flex-direction: column; align-items: center; } .cit-final h2 { color: #fff; max-width: 24ch; } .cit-final .cit-lead { color: rgba(255,255,255,.85); max-width: 56ch; } .cit-final-alt { margin-top: 1.6rem; font-size: .95rem; color: rgba(255,255,255,.75); } .cit-final-alt a { color: var(--cit-accent); font-weight: 500; text-decoration: none; } .cit-final-alt a:hover { text-decoration: underline; } /* ── Footer ───────────────────────────────────────────────────────────── */ .cit-footer { background: #1b1718; color: #93898a; padding: 44px 0; text-align: center; font-size: .84rem; } .cit-footer a { color: #c9bfc0; text-decoration: none; } .cit-footer a:hover { color: #fff; } .cit-footer-legal { margin-top: 10px; } /* ── Bara sticky pe mobil ─────────────────────────────────────────────── */ .cit-stickycta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(35, 31, 32, .97); box-shadow: 0 -4px 18px rgba(0,0,0,.3); transform: translateY(110%); transition: transform .3s ease; } .cit-stickycta.is-visible { transform: translateY(0); } .cit-stickycta .cit-btn { width: 100%; text-align: center; padding: 14px 20px; } /* ── Popup ────────────────────────────────────────────────────────────── */ .cit-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; } .cit-modal[hidden] { display: none; } .cit-modal-backdrop { position: absolute; inset: 0; background: rgba(24, 20, 21, .86); backdrop-filter: blur(3px); } .cit-modal-box { position: relative; z-index: 2; background: var(--cit-cream); border-radius: 20px; max-width: 520px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 36px 34px; box-shadow: 0 30px 80px rgba(0,0,0,.4); } .cit-modal-box h3 { font-family: var(--cit-serif); color: var(--cit-dark); font-size: 1.7rem; font-weight: 600; } .cit-modal-box > p { font-size: .92rem; color: #6d6461; margin: 8px 0 22px; } .cit-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: 0; font-size: 1.9rem; color: #a5968a; cursor: pointer; line-height: 1; } .cit-modal-close:hover { color: var(--cit-dark); } #cit-form label { display: block; margin-bottom: 14px; font-size: .8rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--cit-dark); } #cit-form input[type=text], #cit-form input[type=tel], #cit-form input[type=email], #cit-form select, #cit-form textarea { width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid #d8cfc5; border-radius: 10px; font-family: var(--cit-sans); font-size: .95rem; font-weight: 300; background: #fff; color: #4a4442; } #cit-form input:focus, #cit-form select:focus, #cit-form textarea:focus { outline: 2px solid var(--cit-primary); border-color: transparent; } .cit-touched:invalid { border-color: #c62828 !important; background: #fff7f7 !important; } .cit-btn:focus-visible, #cit-form input:focus-visible, #cit-form select:focus-visible, #cit-form textarea:focus-visible { outline: 2px solid var(--cit-primary); outline-offset: 1px; } .cit-gdpr { display: flex !important; gap: 10px; font-weight: 300 !important; text-transform: none !important; letter-spacing: 0 !important; align-items: flex-start; font-size: .82rem !important; color: #6d6461 !important; } .cit-gdpr input { margin-top: 3px; } .cit-submit { width: 100%; margin-top: 8px; } .cit-form-status { margin-top: 12px; font-size: .9rem; text-align: center; } .cit-form-status.ok { color: #2e7d32; font-weight: 500; } .cit-form-status.err { color: #c62828; } .cit-hp { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; } /* ── Mobil ────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .cit-section { padding: 64px 0; } .cit-split-in, .cit-split-rev { grid-template-columns: 1fr; gap: 36px; } .cit-split-rev .cit-split-text { order: 0; } .cit-split-media::before, .cit-split-rev .cit-split-media::before { inset: 16px -12px -12px 16px; } .cit-hero { min-height: 88vh; } .cit-hero-in { padding-top: 110px; padding-bottom: 70px; } .cit-cols2 { columns: 1; } .cit-logo { height: 46px; } .cit-topbar.is-solid .cit-logo { height: 38px; } .cit-phone { display: none; } .cit-trustbar li { border-right: 0; padding: 0 12px; } .cit-stickycta { display: block; } .cit-scrollcue { display: none; } .cit-footer { padding-bottom: 90px; } /* loc pentru bara sticky */ }