/* ========================================================================= Adarsh Group — Digital Enquiry Form Design system: deep navy + brushed gold on warm cream, editorial display type paired with a clean grotesque for UI. Built on top of the existing bootstrap.min.css / vendors.css utility layer (grid + resets only). ========================================================================= */ :root { --navy-900: #0A1B33; --navy-800: #0F2A4D; --navy-700: #154985; /* brand primary */ --navy-600: #1E5CA0; --gold: #B68A4E; --gold-light: #D9B77E; --cream: #F6F3EC; --cream-dark: #ECE6D9; --white: #FFFFFF; --ink: #1B2534; --muted: #6B7686; --border: #E3E1D8; --border-strong: #CFCBBD; --error: #C94B4B; --success: #3FA34D; --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --shadow-card: 0 30px 70px -30px rgba(10, 27, 51, 0.35); --shadow-soft: 0 10px 30px -12px rgba(10, 27, 51, 0.18); --ff-display: 'Playfair Display', Georgia, serif; --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ease: cubic-bezier(.4,0,.2,1); } /* ---------------------------------------------------------------------- */ /* Base */ /* ---------------------------------------------------------------------- */ html, body { height: 100%; } body { font-family: var(--ff-sans); color: var(--ink); background: var(--panel-surface, var(--cream)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::-webkit-scrollbar { -webkit-appearance: none; } ::-webkit-scrollbar:vertical { width: 7px; } ::-webkit-scrollbar:horizontal { height: 7px; } ::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: 7px; border: 2px solid transparent; } ::-webkit-scrollbar-track { background-color: transparent; } a { color: var(--navy-700); } a:hover, a:focus { color: var(--navy-900); } /* ---------------------------------------------------------------------- */ /* Preloaders */ /* ---------------------------------------------------------------------- */ #preloader { position: fixed; inset: 0; width: 100%; height: 100%; background-color: var(--cream); z-index: 999999; display: flex; align-items: center; justify-content: center; } #loader_form { position: fixed; inset: 0; width: 100%; height: 100%; background-color: rgba(10, 27, 51, .35); z-index: 999999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(2px); } [data-loader="circle-side"], [data-loader="circle-side-2"] { width: 46px; height: 46px; animation: spin infinite .9s linear; border: 3px solid rgba(21, 73, 133, .15); border-top-color: var(--navy-700); border-radius: 100%; } [data-loader="circle-side-2"] { border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------------------- */ /* Page shell */ /* ---------------------------------------------------------------------- */ .full-height { height: 100%; } .row-height { height: 100vh; } @media (max-width: 991px) { .row-height { height: auto; min-height: 100vh; } } /* ---------------------------------------------------------------------- */ /* Brand panel (left) */ /* ---------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- BRAND / PAGE THEME Switch the whole page palette via data-brand-theme on in index.html. Options: pearl (default) | champagne | mist | linen Each palette sets the left panel's gradient + blooms, the linework colours, and --panel-surface (the flat tone the form panel sits on). ------------------------------------------------------------------------- */ body { /* --- default palette: "pearl" --- */ --panel-grad: linear-gradient(160deg, #FFFFFF 0%, #FDFCFA 45%, #F7F4EE 100%); --panel-bloom-a: radial-gradient(100% 80% at 0% 0%, rgba(21, 73, 133, .07) 0%, rgba(21, 73, 133, 0) 60%); --panel-bloom-b: radial-gradient(120% 90% at 100% 100%, rgba(182, 138, 78, .10) 0%, rgba(182, 138, 78, 0) 55%); --panel-surface: #F6F3EC; --orb-a: rgba(30, 92, 160, .20); --orb-b: rgba(182, 138, 78, .26); --decor-line: rgba(21, 73, 133, .13); --decor-1: rgba(21, 73, 133, .20); --decor-2: rgba(182, 138, 78, .48); --decor-3: rgba(21, 73, 133, .26); --seam-mid: rgba(21, 73, 133, .10); --seam-accent: rgba(182, 138, 78, .22); } /* "champagne" — warm ivory, gold-forward. Softest, most luxury-residential. */ body[data-brand-theme="champagne"] { --panel-grad: linear-gradient(160deg, #FFFDF8 0%, #FAF4E9 50%, #F2E9D8 100%); --panel-bloom-a: radial-gradient(100% 80% at 0% 0%, rgba(182, 138, 78, .10) 0%, rgba(182, 138, 78, 0) 62%); --panel-bloom-b: radial-gradient(120% 90% at 100% 100%, rgba(160, 118, 60, .16) 0%, rgba(160, 118, 60, 0) 58%); --panel-surface: #F3EADA; --orb-a: rgba(201, 165, 106, .26); --orb-b: rgba(160, 118, 60, .24); --decor-line: rgba(140, 104, 52, .14); --decor-1: rgba(21, 73, 133, .16); --decor-2: rgba(160, 118, 60, .52); --decor-3: rgba(140, 104, 52, .28); --seam-mid: rgba(160, 118, 60, .10); --seam-accent: rgba(160, 118, 60, .20); } /* "mist" — cool blue-grey, navy-forward. Crisp and corporate. */ body[data-brand-theme="mist"] { --panel-grad: linear-gradient(160deg, #FFFFFF 0%, #F4F7FB 48%, #E7EEF7 100%); --panel-bloom-a: radial-gradient(100% 80% at 0% 0%, rgba(21, 73, 133, .12) 0%, rgba(21, 73, 133, 0) 62%); --panel-bloom-b: radial-gradient(120% 90% at 100% 100%, rgba(30, 92, 160, .14) 0%, rgba(30, 92, 160, 0) 58%); --panel-surface: #EDF2F9; --orb-a: rgba(30, 92, 160, .26); --orb-b: rgba(21, 73, 133, .18); --decor-line: rgba(21, 73, 133, .15); --decor-1: rgba(21, 73, 133, .26); --decor-2: rgba(182, 138, 78, .42); --decor-3: rgba(21, 73, 133, .30); --seam-mid: rgba(21, 73, 133, .10); --seam-accent: rgba(21, 73, 133, .18); } /* "linen" — neutral warm taupe. Understated, editorial, very quiet. */ body[data-brand-theme="linen"] { --panel-grad: linear-gradient(160deg, #FBFAF8 0%, #F4F1EC 52%, #E9E4DB 100%); --panel-bloom-a: radial-gradient(100% 80% at 0% 0%, rgba(120, 108, 92, .08) 0%, rgba(120, 108, 92, 0) 62%); --panel-bloom-b: radial-gradient(120% 90% at 100% 100%, rgba(182, 138, 78, .12) 0%, rgba(182, 138, 78, 0) 58%); --panel-surface: #EFEAE1; --orb-a: rgba(120, 108, 92, .16); --orb-b: rgba(182, 138, 78, .22); --decor-line: rgba(90, 82, 70, .12); --decor-1: rgba(21, 73, 133, .18); --decor-2: rgba(182, 138, 78, .46); --decor-3: rgba(90, 82, 70, .24); --seam-mid: rgba(90, 82, 70, .09); --seam-accent: rgba(182, 138, 78, .18); } .content-left { background: var(--panel-bloom-b), var(--panel-bloom-a), var(--panel-grad); padding: 0; position: relative; overflow: hidden; } /* whisper-soft seam — just enough to separate the panels, never a hard edge */ .content-left::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, rgba(21,73,133,0) 0%, var(--seam-mid) 35%, var(--seam-accent) 70%, rgba(21,73,133,0) 100%); z-index: 2; } @media (max-width: 991px) { .content-left::after { display: none; } } /* ---- ambient blooms ---------------------------------------------------- */ .brand-ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .brand-ambient .orb { position: absolute; display: block; border-radius: 50%; filter: blur(56px); will-change: transform; } .brand-ambient .orb--navy { width: 46%; padding-bottom: 46%; top: -12%; left: -14%; background: radial-gradient(circle at 35% 35%, var(--orb-a), transparent 70%); animation: driftA 22s var(--ease) infinite alternate; } .brand-ambient .orb--gold { width: 52%; padding-bottom: 52%; right: -16%; bottom: 6%; background: radial-gradient(circle at 50% 50%, var(--orb-b), transparent 70%); animation: driftB 27s var(--ease) infinite alternate; } @keyframes driftA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14%, 12%, 0) scale(1.14); } } @keyframes driftB { from { transform: translate3d(0, 0, 0) scale(1.06); } to { transform: translate3d(-12%, -10%, 0) scale(.94); } } /* ---- architectural line motif ------------------------------------------ */ .brand-decor { position: absolute; right: -10%; bottom: -6%; width: 66%; max-width: 500px; pointer-events: none; z-index: 0; transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 10px), 0); transition: transform .9s cubic-bezier(.2, .8, .2, 1); } @media (max-width: 991px) { .brand-decor { width: 50%; right: -14%; bottom: -16%; } } .brand-decor .decor-tri { fill: none; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawIn 2.6s cubic-bezier(.4, 0, .2, 1) forwards; } .brand-decor .decor-tri--1 { stroke: var(--decor-1); animation-delay: .25s; } .brand-decor .decor-tri--2 { stroke: var(--decor-2); animation-delay: .5s; } .brand-decor .decor-tri--3 { stroke: var(--decor-3); animation-delay: .75s; } .brand-decor .decor-floors line { stroke: var(--decor-line); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawIn 1.5s cubic-bezier(.4, 0, .2, 1) forwards; } .brand-decor .decor-floors line:nth-child(1) { animation-delay: .55s; } .brand-decor .decor-floors line:nth-child(2) { animation-delay: .62s; } .brand-decor .decor-floors line:nth-child(3) { animation-delay: .69s; } .brand-decor .decor-floors line:nth-child(4) { animation-delay: .76s; } .brand-decor .decor-floors line:nth-child(5) { animation-delay: .83s; } .brand-decor .decor-floors line:nth-child(6) { animation-delay: .90s; } .brand-decor .decor-floors line:nth-child(7) { animation-delay: .97s; } .brand-decor .decor-floors line:nth-child(8) { animation-delay: 1.04s; } .brand-decor .decor-floors line:nth-child(9) { animation-delay: 1.11s; } .brand-decor .decor-floors line:nth-child(10) { animation-delay: 1.18s; } @keyframes drawIn { to { stroke-dashoffset: 0; } } .content-left-wrapper { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 100%; padding: 10px 80px 40px 80px; text-align: left; } @media (max-width: 991px) { .content-left-wrapper { height: auto; padding: 48px 40px 34px 40px; } } @media (max-width: 767px) { .content-left-wrapper { padding: 32px 24px 26px 24px; } } .brand-logo { max-width: 260px; height: auto; margin-bottom: 15px; } @media (max-width: 991px) { .brand-logo { max-width: 210px; margin-bottom: 22px; } } @media (max-width: 767px) { .brand-logo { max-width: 178px; margin-bottom: 18px; } } .brand-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark, var(--gold)); margin-bottom: 18px; } .brand-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); display: inline-block; } @media (max-width: 991px) { .brand-eyebrow { display: none; } } .enq-heading { font-family: var(--ff-display); font-weight: 700; color: var(--navy-900); line-height: 1.14; margin: 0 0 20px 0; letter-spacing: .002em; transition: opacity .25s var(--ease); } .content-left-wrapper .enq-heading { font-size: 44px; max-width: 460px; } @media (max-width: 1200px) { .content-left-wrapper .enq-heading { font-size: 36px; } } .brand-rule { width: 56px; height: 3px; background: var(--gold); border-radius: 2px; margin-bottom: 22px; } @media (max-width: 991px) { .brand-rule { display: none; } } .brand-subcopy { font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 400px; margin-bottom: 0; min-height: 82px; transition: opacity .3s var(--ease), transform .3s var(--ease); } @media (max-width: 991px) { .brand-subcopy { display: none; } } /* ---- assurance list ---------------------------------------------------- */ .brand-assurance { list-style: none; margin: 30px 0 0 0; padding: 0; max-width: 400px; } @media (max-width: 991px) { .brand-assurance { display: none; } } .brand-assurance li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; font-weight: 500; color: var(--navy-800); padding: 9px 0; border-top: 1px solid rgba(21, 73, 133, .09); } .brand-assurance li:last-child { border-bottom: 1px solid rgba(21, 73, 133, .09); } .brand-assurance svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--gold); } /* ---- staggered entrance ------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(14px); animation: revealUp .8s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--d, 0) * 110ms + 120ms); } @keyframes revealUp { to { opacity: 1; transform: translateY(0); } } /* replayed on the brand heading + subcopy each time the step changes */ .reveal-anim { animation: revealUp .55s cubic-bezier(.2, .8, .2, 1) both; } /* ---- motion preferences ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-anim { animation: none; opacity: 1; transform: none; } .brand-decor .decor-tri, .brand-decor .decor-floors line { animation: none; stroke-dashoffset: 0; } .brand-ambient .orb { animation: none; } .brand-decor { transition: none; transform: none; } .step.is-animating { animation: none; } } .brand-panel-footer { position: relative; z-index: 1; padding: 0 80px 32px 80px; font-size: 13px; color: var(--muted); } @media (max-width: 991px) { .brand-panel-footer { display: none; } } /* Mobile-only in-step heading (shown above the active step's fields) */ .step .enq-heading { display: none; } @media (max-width: 991px) { .step .enq-heading { display: block; font-size: 26px; color: var(--navy-900); margin-bottom: 24px; line-height: 1.25; } } /* ---------------------------------------------------------------------- */ /* Form panel (right) */ /* ---------------------------------------------------------------------- */ .content-right { background: #154987; padding: 22px 40px; height: 100%; min-height: 100%; display: flex; justify-content: center; align-items: center; overflow: auto; } @media (max-width: 991px) { .content-right { height: auto; padding: 30px 20px 48px; align-items: flex-start; } } @media (max-width: 480px) { .content-right { padding: 20px 14px 40px; } } #wizard_container { width: 100%; max-width: 640px; max-height: 100%; overflow-y: auto; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 26px 44px 22px; } @media (max-width: 767px) { #wizard_container { padding: 22px 18px 18px; border-radius: var(--radius); max-height: none; } } /* ---------------------------------------------------------------------- */ /* Stepper */ /* ---------------------------------------------------------------------- */ #top-wizard { padding-bottom: 16px !important; } .stepper { display: flex; align-items: flex-start; justify-content: space-between; list-style: none; margin: 0; padding: 0; } .stepper__item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .stepper__item:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 24px); width: calc(100% - 48px); height: 2px; background: var(--border); z-index: 0; transition: background .35s var(--ease); } .stepper__item.is-done:not(:last-child)::after { background: var(--navy-700); } .stepper__circle { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--white); border: 2px solid var(--border-strong); color: var(--muted); transition: all .3s var(--ease); } .stepper__label { margin-top: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); transition: color .3s var(--ease); } @media (max-width: 480px) { .stepper__label { font-size: 10px; } } .stepper__item.is-active .stepper__circle { background: var(--navy-700); border-color: var(--navy-700); color: #fff; box-shadow: 0 0 0 5px rgba(21, 73, 133, .14); } .stepper__item.is-active .stepper__label { color: var(--navy-900); } .stepper__item.is-done .stepper__circle { background: var(--navy-700); border-color: var(--navy-700); color: #fff; } .stepper__item.is-done .stepper__circle .num { display: none; } .stepper__item.is-done .stepper__circle .check { display: block; } .stepper__circle .check { display: none; width: 14px; height: 14px; } /* ---------------------------------------------------------------------- */ /* Step content */ /* ---------------------------------------------------------------------- */ #middle-wizard { min-height: unset; } .step-kicker { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark, var(--gold)); margin-bottom: 4px; } .step-title { text-align: left; font-family: var(--ff-sans); font-size: 19px; font-weight: 700; color: var(--navy-900); margin-bottom: 12px; padding-bottom: 0; text-decoration: none !important; } @media (max-width: 767px) { .step-title { font-size: 18px; margin-bottom: 12px; } } .step-subtitle { text-align: left; font-size: 13px; color: var(--muted); margin-top: -10px; margin-bottom: 16px; } /* ---------------------------------------------------------------------- */ /* Fields */ /* ---------------------------------------------------------------------- */ .form-group { position: relative; margin-bottom: 10px; } label { display: block; font-family: var(--ff-sans); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--navy-800); margin-bottom: 5px; } label .text-danger { color: var(--error); } .form-control { width: 100%; height: 40px; padding: 0 14px; font-family: var(--ff-sans); font-size: 14.5px; color: var(--ink); background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-sm); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .form-control::placeholder { color: #A7AEBA; } .form-control:focus { outline: 0; border-color: var(--navy-700); box-shadow: 0 0 0 4px rgba(21, 73, 133, .1); } .form-control.error { border-color: var(--error); } .form-control.error:focus { box-shadow: 0 0 0 4px rgba(201, 75, 75, .12); } select.form-control { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; } .styled-select { position: relative; } .styled-select:after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; } /* Error messages: quiet inline text under the field, not a floating badge */ span.errorMsg { display: none; position: static; height: auto; background: none; color: var(--error); font-size: 11px; font-weight: 500; padding: 3px 1px 0; line-height: 1.3; } span.errorMsg::after { display: none !important; content: none !important; } .error ~ span.errorMsg { display: block; } /* date input affordance */ input[type="date"].form-control { cursor: pointer; } /* ---------------------------------------------------------------------- */ /* Field grid helpers */ /* ---------------------------------------------------------------------- */ .field-row { display: flex; gap: 20px; align-items: flex-start; } .field-row .form-group { flex: 1; min-width: 0; } @media (max-width: 767px) { .field-row { flex-direction: column; gap: 0; } } /* ---------------------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------------------- */ #bottom-wizard { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; } button.backward, button.forward, .submit { border: none; outline: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--ff-sans); font-size: 14px; font-weight: 700; letter-spacing: .01em; line-height: 1; padding: 12px 28px; border-radius: var(--radius-sm); text-decoration: none; background: var(--navy-700); color: #fff; transition: background .25s var(--ease), transform .15s var(--ease), box-shadow .25s var(--ease); box-shadow: 0 10px 24px -10px rgba(21, 73, 133, .55); } button.backward { background: transparent; color: var(--navy-800); box-shadow: none; margin-right: auto; padding-left: 8px; padding-right: 8px; } button.backward:hover { background: var(--cream-dark); color: var(--navy-900); } button.forward:hover, .submit:hover { background: var(--navy-900); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(10, 27, 51, .55); } button.forward:active, .submit:active { transform: translateY(0); } button[disabled] { opacity: .6; cursor: not-allowed; } /* ---------------------------------------------------------------------- */ /* Step transition */ /* ---------------------------------------------------------------------- */ .step { will-change: opacity, transform; } .step.is-animating { animation: stepIn .4s var(--ease); } @keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------------------- */ /* Sub-section dividers (CP / referrer / employee blocks) */ /* ---------------------------------------------------------------------- */ #cpDetails, #refDetails, #empDetails { padding-top: 2px; } /* ---------------------------------------------------------------------- */ /* Success (thankyou) page */ /* ---------------------------------------------------------------------- */ body.thankyou-page { background: var(--panel-surface, var(--cream)); display: flex; align-items: center; justify-content: center; min-height: 100vh; } #success { position: static; width: 100%; max-width: 460px; margin: 24px; text-align: center; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 56px 40px; } #success .success-logo { max-width: 190px; margin: 0 auto 32px; display: block; } #success .icon--order-success { margin-bottom: 8px; } #success h4 { font-family: var(--ff-display); color: var(--navy-900); font-weight: 700; margin: 18px 0 10px; } #success h4 span { display: block; font-size: 24px; } #success small { display: block; color: var(--muted); font-size: 14px; line-height: 1.6; } #success .redirect-note { margin-top: 26px; font-size: 12px; color: #A7AEBA; letter-spacing: .02em; } /* ---------------------------------------------------------------------- */ /* Misc */ /* ---------------------------------------------------------------------- */ .copy { opacity: .7; } @media (max-width: 991px) { #wizard_container { max-width: 620px; } } /* ---------------------------------------------------------------------- */ /* Consent (privacy) row — sits above the submit buttons */ /* ---------------------------------------------------------------------- */ .consent-row { background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; } .consent-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; font-weight: 400; } .consent-check input[type="checkbox"] { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--navy-700); cursor: pointer; } .consent-check span { font-size: 12.5px; line-height: 1.55; color: var(--muted); } .consent-check a { color: var(--navy-700); font-weight: 600; } .consent-check a:hover { color: var(--navy-900); } .consent-row.error { border-color: var(--error); background: rgba(201, 75, 75, .05); } .consent-row .consent-error { display: none; padding: 8px 1px 0 27px; } .consent-row.error .consent-error { display: block; } /* ---------------------------------------------------------------------- */ /* Cookie notice banner */ /* ---------------------------------------------------------------------- */ .cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 99999; max-width: 760px; margin: 0 auto; background: var(--navy-900); color: #fff; border-radius: var(--radius); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); padding: 18px 20px; display: none; align-items: center; gap: 20px; flex-wrap: wrap; transform: translateY(16px); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease); } .cookie-banner.is-visible { display: flex; transform: translateY(0); opacity: 1; } .cookie-banner__text { flex: 1 1 380px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .82); } .cookie-banner__text strong { color: #fff; } .cookie-banner__text a { color: var(--gold-light); text-decoration: underline; } .cookie-banner__text a:hover { color: #fff; } .cookie-banner__actions { flex: 0 0 auto; } .btn-cookie-accept { border: 0; cursor: pointer; background: var(--gold); color: #fff; font-family: var(--ff-sans); font-size: 13.5px; font-weight: 700; padding: 11px 22px; border-radius: var(--radius-sm); white-space: nowrap; transition: background .2s; } .btn-cookie-accept:hover { background: var(--gold-light); } @media (max-width: 600px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px; } .cookie-banner__actions { width: 100%; } .btn-cookie-accept { width: 100%; } }