/* ========================================================================== CruiseNet event registration microsite -------------------------------------------------------------------------- Brand tokens below are taken verbatim from the live cruisenet.ca theme (the TTAND site sets them as inline CSS custom properties on ). Keep them in sync if the agency theme changes. ========================================================================== */ :root { /* --- live site theme tokens ------------------------------------------- */ --primary: #0fd8db; --primary-500: #27dcdf; --primary-400: #87eced; --primary-300: #e7fbfb; --primary-200: #f3fdfd; --primary-100: #f8fefe; --primary-50: #fafefe; --secondary: #121921; --dark-900: #051136; --dark-800: #1e294a; --dark-700: #37415e; --dark-600: #697186; /* --- microsite-only derivations --------------------------------------- */ --ink: var(--dark-900); --muted: var(--dark-600); --line: #e5e7eb; --surface: #ffffff; --surface-alt: var(--primary-50); --on-primary: var(--secondary); /* dark text on turquoise: legible CTA */ --shadow-menu: 0 6px 12px rgba(0, 0, 0, .175); --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); --radius: 4px; --header-h: 100px; --sans: "Poppins", "Helvetica Neue", Arial, sans-serif; /* Hero photo. Swap this one line for the event image CruiseNet wants to use (drop the file in assets/ and point at url("assets/your-photo.jpg")). Both events currently share a placeholder; .scenic-page below gives the Scenic page its own, so the two pages can be told apart at a glance. */ --hero-image: url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=1800&q=85"); } /* Give the Scenic page its own hero photo here (same placeholder for now). */ .scenic-page { --hero-image: url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=1800&q=85"); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 300; line-height: 1.6; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; } img { max-width: 100%; } .shell { width: min(1152px, calc(100% - 48px)); margin: 0 auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== Header The header is the live site's own markup (assets are identical; only the Next.js image pipeline was swapped for the same file on disk), styled by the live site's own compiled stylesheet in assets/cruisenet-site.css. None of its appearance is defined here. The two rules below cover behaviour that has no live counterpart to copy: the live dropdown/mobile menu are React state, and the live header sits over a 100vh hero so it never needs a solid state. ========================================================================== */ /* Open mobile panel. React renders this on click, so it is absent from the live server markup - there is no reference. Values follow the dropdown's. */ nav.mobile-open { display: block; position: absolute; top: 100px; left: 0; right: 0; max-height: calc(100vh - 100px); overflow-y: auto; padding: .75rem 1.75rem 1.25rem; background-color: #fff; color: var(--dark-900); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .175); } nav.mobile-open > ul { display: grid; } nav.mobile-open > ul > li > a { padding: .75rem 0; } nav.mobile-open .invisible { visibility: visible; } nav.mobile-open li > div { position: static; width: auto; background: transparent; box-shadow: none; } nav.mobile-open li > div > ul { padding: 0 0 .375rem .875rem; } /* Solid backing once this page's shorter hero has scrolled past. */ header.fixed.is-stuck { background-color: var(--secondary); transition: background-color .3s cubic-bezier(.165, .84, .44, 1); } /* ========================================================================== Hero — same treatment as the cruisenet.ca home hero: full-bleed photo, 40% black scrim, centred white type, uppercase title ========================================================================== */ .event-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: min(78vh, 680px); padding: calc(var(--header-h) + 56px) 0 64px; background: var(--secondary) center / cover no-repeat; background-image: var(--hero-image); text-align: center; color: #fff; } .event-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, .62) 100%); } .hero-copy { position: relative; z-index: 1; } .hero-copy .eyebrow { color: var(--primary-400); } .hero-copy h1, .hero-copy .hero-intro { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); } .eyebrow { margin: 0 0 18px; color: var(--primary); font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; } .hero-copy h1 { max-width: 900px; margin: 0 auto; text-wrap: balance; font-size: clamp(30px, 5vw, 48px); font-weight: 700; letter-spacing: .025em; line-height: 1.25; text-transform: uppercase; } .hero-intro { max-width: 620px; margin: 20px auto 0; font-size: 20px; font-weight: 300; color: rgba(255, 255, 255, .92); } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; } .hero-phone { font-size: 20px; font-weight: 300; } .hero-phone strong { font-weight: 500; } /* Buttons — bg-primary / rounded / hover:bg-primary-500, as on the live site */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 28px; border: 1px solid transparent; border-radius: var(--radius); background: var(--primary); color: var(--on-primary); font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; } .btn:hover { background: var(--primary-500); } .btn-outline { background: transparent; border-color: #fff; color: #fff; } .btn-outline:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } /* ========================================================================== Registration ========================================================================== */ .registration-section { padding: 80px 0 96px; background: var(--surface); } .registration-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: start; } .details-column h2 { margin: 0; font-size: clamp(26px, 3vw, 32px); font-weight: 600; line-height: 1.3; } .details-column h2 em { color: var(--primary); font-style: normal; } .details-column > p:not(.eyebrow):not(.fine-print) { max-width: 44ch; margin: 16px 0 0; color: var(--dark-700); } /* Emphasis in the body copy. The vendor reset makes only "bolder", which off a 300-weight body is barely visible - set it explicitly. */ .details-column strong { font-weight: 600; color: var(--dark-900); } .details-column .eyebrow { color: var(--dark-600); } .event-meta { display: grid; gap: 20px; padding: 24px; margin: 28px 0 24px; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--radius); background: var(--primary-100); } .event-meta div { display: grid; gap: 2px; } .meta-label { margin-bottom: 4px; color: var(--dark-600); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } .event-meta strong { font-size: 16px; font-weight: 500; } .event-meta span:not(.meta-label) { font-size: 14px; color: var(--dark-600); } .fine-print { margin: 0; color: var(--dark-600); font-size: 14px; } /* Root landing page: one card per session. */ .session-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; } .session-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px 32px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); color: var(--ink); transition: border-color .2s, transform .2s; } .session-card:hover { border-color: var(--primary); transform: translateY(-2px); } .session-card .eyebrow { margin: 0; color: var(--dark-600); } .session-card h2 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.3; } .session-card p:not(.eyebrow) { margin: 0 0 8px; color: var(--dark-700); } .session-card .btn { margin-top: auto; } .session-note { text-align: center; } @media (max-width: 760px) { .session-grid { grid-template-columns: 1fr; } } .registration-form { padding: 32px 36px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); } .form-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .form-heading:not(:first-child) { margin-top: 30px; } .form-heading span { color: var(--primary); font-size: 13px; font-weight: 600; letter-spacing: .1em; } .form-heading h3 { margin: 0; font-size: 22px; font-weight: 600; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; } .registration-form label { display: grid; gap: 6px; color: var(--dark-800); font-size: 14px; font-weight: 500; } .label-text { display: block; } .req { margin-left: 3px; color: #c0392b; font-weight: 600; } .required-note { margin: -14px 0 18px; color: var(--dark-600); font-size: 13px; } .required-note .req { margin-left: 0; } .registration-form input[type="text"], .registration-form input[type="email"], .registration-form input[type="tel"] { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #d6dae2; border-radius: var(--radius); outline: none; background: #fff; color: var(--ink); font-weight: 300; transition: border-color .2s, box-shadow .2s; } .registration-form input::placeholder { color: #9ca3af; } .registration-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15, 216, 219, .25); } .registration-form input[aria-invalid="true"] { border-color: #c0392b; } .full-width { grid-column: 1 / -1; } /* Selects match the text inputs. Scoped: the site header has its own select. */ .registration-form select { width: 100%; min-height: 46px; padding: 11px 36px 11px 13px; border: 1px solid #d6dae2; border-radius: var(--radius); outline: none; background-color: #fff; color: var(--ink); font-weight: 300; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23697186' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; transition: border-color .2s, box-shadow .2s; } .registration-form select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15, 216, 219, .25); } /* Yes/No groups */ .field-group { margin: 0 0 18px; padding: 0; border: 0; } .registration-form legend { padding: 0; margin-bottom: 10px; color: var(--dark-800); font-size: 14px; font-weight: 500; } .radio-row { display: flex; flex-wrap: wrap; gap: 10px; } .registration-form .radio-option { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid #d6dae2; border-radius: var(--radius); background: #fff; cursor: pointer; font-size: 14px; font-weight: 400; color: var(--dark-800); transition: border-color .15s, background-color .15s; } .registration-form .radio-option input { accent-color: var(--primary); margin: 0; } .registration-form .radio-option:hover { border-color: var(--primary-400); } .registration-form .radio-option:has(input:checked) { border-color: var(--primary); background: var(--primary-100); font-weight: 500; } .registration-form .radio-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; } /* Conditional blocks are toggled with the hidden attribute by script.js. */ .guest-block[hidden], .field-group[hidden], label[hidden], [data-detail-select][hidden], [data-detail-text][hidden] { display: none; } .guest-block { margin: 18px 0; } /* Honeypot: off-screen for people, present for bots. Not display:none, which some bots detect. */ .registration-form .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .optional { color: var(--dark-600); font-weight: 300; } .registration-form .consent-label { display: flex; align-items: flex-start; gap: 11px; margin: 24px 0 18px; color: var(--dark-700); font-size: 14px; font-weight: 300; line-height: 1.5; cursor: pointer; } .registration-form .consent-label input { position: absolute; opacity: 0; width: 1px; height: 1px; } .custom-checkbox { position: relative; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; border: 1px solid #b9bfc9; border-radius: 3px; background: #fff; transition: background-color .15s, border-color .15s; } .registration-form .consent-label input:checked + .custom-checkbox { border-color: var(--primary); background: var(--primary); } .registration-form .consent-label input:checked + .custom-checkbox::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--secondary); border-width: 0 2px 2px 0; transform: rotate(45deg); } .registration-form .consent-label input:focus-visible + .custom-checkbox { outline: 2px solid var(--primary); outline-offset: 2px; } .form-error { min-height: 20px; margin: 0 0 8px; color: #c0392b; font-size: 14px; } .submit-button { width: 100%; } .submit-button:disabled { opacity: .65; cursor: wait; } .privacy-note { margin: 14px 0 0; color: var(--dark-600); font-size: 13px; text-align: center; } /* ========================================================================== Footer — mirrors the live cruisenet.ca footer ========================================================================== */ .site-footer { padding: 56px 0 32px; background: var(--secondary); color: #9ca3af; font-size: 14px; } .footer-top { display: flex; flex-direction: column; gap: 32px 56px; width: min(1152px, calc(100% - 48px)); margin: 0 auto; } @media (min-width: 640px) { .footer-top { flex-direction: row; justify-content: space-between; } } .company-info { flex: 1; } /* The footer logo used to inherit .brand-image from the header block; that block now lives in the vendor stylesheet, so it needs its own sizing. */ .footer-brand-image { display: block; width: 180px; height: 64px; margin-bottom: 16px; } .footer-brand-image img { width: 100%; height: 100%; display: block; object-fit: contain; } .company-info p { max-width: 52ch; margin: 0 0 8px; font-weight: 300; } .footer-fact { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; font-style: normal; } .footer-fact svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .footer-links { flex: 1; display: flex; flex-wrap: wrap; gap: 24px 40px; } .footer-links section { min-width: 160px; } .footer-links h5 { margin: 0 0 16px; color: #fff; font-size: 16px; font-weight: 500; } .footer-links ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .footer-links a:hover { color: var(--primary); } .footer-rule { height: 2px; margin: 32px 0; background: var(--dark-700); } .footer-bottom { display: flex; flex-direction: column; gap: 12px; align-items: center; width: min(1152px, calc(100% - 48px)); margin: 0 auto; } @media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } } .social-media { display: flex; align-items: center; } .social-media h5 { margin: 0 16px 0 0; color: #fff; font-size: 14px; font-weight: 500; } .social-media a { display: inline-flex; } .social-media svg { width: 20px; height: 20px; fill: currentColor; } .social-media a:hover { color: var(--primary); } .copyright { text-align: center; } /* ========================================================================== Confirmation page ========================================================================== */ .success-main { min-height: 70vh; display: grid; place-items: center; padding: calc(var(--header-h) + 56px) 20px 80px; background: var(--primary-100); } .success-card { width: min(100%, 620px); padding: 56px 48px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); text-align: center; } .success-card .eyebrow { color: var(--dark-600); } .success-mark { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 24px; border-radius: 50%; background: var(--primary); color: var(--secondary); font-size: 26px; } .success-card h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: .025em; text-transform: uppercase; line-height: 1.3; } .success-card > p:not(.eyebrow) { max-width: 46ch; margin: 20px auto 30px; color: var(--dark-700); } .success-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .btn-secondary { background: transparent; border-color: #d6dae2; color: var(--dark-800); } .btn-secondary:hover { background: var(--primary-200); border-color: var(--primary-400); color: var(--dark-900); } /* Error variant of the confirmation card. */ .success-mark.is-error { background: var(--secondary); color: #fff; font-weight: 700; } .success-card .reassure { max-width: 46ch; margin: 0 auto 26px; color: var(--dark-800); font-weight: 400; } .success-card > p[data-reason] { margin-bottom: 14px; } .alt-contact { margin: 18px 0 0; color: var(--dark-600); font-size: 14px; } .alt-contact a { color: var(--dark-900); text-decoration: underline; text-underline-offset: 3px; } /* On the confirmation page there is no hero, so the header needs a backing. */ /* success.html has no hero, so the header needs a solid backing. */ .success-page header.fixed, .error-page header.fixed { background-color: var(--secondary); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1100px) { .registration-grid { grid-template-columns: 1fr; } .details-column > p:not(.eyebrow):not(.fine-print) { max-width: none; } } @media (max-width: 760px) { .shell { width: min(100% - 40px, 560px); } .event-hero { min-height: auto; padding: calc(var(--header-h) + 48px) 0 56px; } .hero-intro { font-size: 18px; } .hero-phone { font-size: 18px; } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; } .registration-section { padding: 56px 0 72px; } .registration-form { padding: 24px 20px 22px; } .form-grid { grid-template-columns: 1fr; gap: 16px; } .full-width { grid-column: auto; } .success-main { padding: calc(var(--header-h) + 40px) 20px 56px; } .success-card { padding: 40px 24px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }