/* Halcyon Adventures — shared site styles Brand colors: #3D5568 (slate), #62959A (teal), #A6CACC (seafoam), #D3CCC5 (taupe), #AC9274 (tan/gold) */ /* Fonts are now loaded via tags in each page's (preconnect + stylesheet) instead of @import here — @import blocks CSS parsing and delays font discovery, which slows down page rendering. */ :root { --slate: #3D5568; --slate-deep: #2C3F4D; --teal: #62959A; --seafoam: #A6CACC; --taupe: #D3CCC5; --tan: #AC9274; --tan-deep: #8F7558; --cream: #FBF7F1; --cream-warm: #F4EEE5; --cream-deep: #ECE3D6; --ink: #2A2B28; --ink-soft: #5C5E58; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Karla', -apple-system, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); color: var(--ink); background: var(--cream-deep); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; } /* ---------- Eyebrow / labels ---------- */ .eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tan-deep); font-weight: 600; } .eyebrow.on-dark { color: var(--seafoam); } /* ---------- Headings ---------- */ h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: 0.01em; color: var(--slate-deep); } h1 { font-size: 56px; line-height: 1.08; text-transform: uppercase; letter-spacing: 0.02em; } h2 { font-size: 38px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; } h3 { font-size: 24px; line-height: 1.3; } .script { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--tan-deep); } p { color: var(--ink-soft); font-size: 16px; line-height: 1.75; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(251,247,241,0.96); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(61,85,104,0.1); } .nav-inner { max-width: 1180px; margin: 0 auto; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; } .nav-logo img { height: 96px; } .nav-links { display: flex; gap: 36px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); font-weight: 600; } .nav-links a { padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .2s; } .nav-links a:hover, .nav-links a.active { border-color: var(--tan); } .nav-cta { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; padding: 11px 22px; border-radius: 2px; background: var(--slate); color: var(--cream); transition: background .2s; } .nav-cta:hover { background: var(--slate-deep); } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 14px 30px; border-radius: 2px; transition: all .2s; cursor: pointer; border: 1px solid transparent; } .btn-light { background: var(--cream); color: var(--slate-deep); } .btn-light:hover { background: var(--taupe); } .btn-dark { background: var(--slate); color: var(--cream); } .btn-dark:hover { background: var(--slate-deep); } .btn-outline-light { border-color: rgba(251,247,241,0.6); color: var(--cream); } .btn-outline-light:hover { background: rgba(251,247,241,0.12); } .btn-tan { background: var(--tan); color: var(--cream); } .btn-tan:hover { background: var(--tan-deep); } /* ---------- Sections ---------- */ .section { padding: 100px 0; } .section.tight { padding: 70px 0; } .section.on-slate { background: var(--slate); color: var(--cream); } .section.on-slate p { color: var(--seafoam); } .section.on-slate h2, .section.on-slate h3 { color: var(--cream); } .section.on-taupe { background: var(--cream-warm); } .section-head { text-align: center; max-width: 600px; margin: 0 auto 56px; } .section-head .eyebrow { display: block; margin-bottom: 14px; } .section-head h2 { margin-bottom: 16px; } .section-head p { font-size: 17px; } /* ---------- Hero ---------- */ .hero { position: relative; height: 92vh; min-height: 620px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--slate-deep); } .hero video, .hero .hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(44,63,77,0.35) 0%, rgba(44,63,77,0.65) 100%); } .hero-content { position: relative; z-index: 2; padding: 0 24px; max-width: 720px; } .hero .eyebrow { color: var(--seafoam); display: block; margin-bottom: 20px; } .hero h1 { color: var(--cream); margin-bottom: 22px; } .hero-sub { font-size: 18px; color: var(--taupe); max-width: 480px; margin: 0 auto 34px; } .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .page-hero { background: var(--slate); padding: 160px 0 80px; text-align: center; position: relative; overflow: hidden; } .page-hero .eyebrow { color: var(--seafoam); display: block; margin-bottom: 16px; } .page-hero h1 { color: var(--cream); } .page-hero p { max-width: 540px; margin: 18px auto 0; font-size: 17px; color: var(--taupe); } /* ---------- Steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .step { text-align: center; } .step-num { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--tan-deep); margin-bottom: 14px; } .step h3 { margin-bottom: 12px; font-size: 20px; } .step p { font-size: 14px; } /* ---------- Cards ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .card { background: var(--cream); border: 1px solid rgba(61,85,104,0.26); padding: 32px 28px; transition: border-color .2s, transform .2s; } .card:hover { border-color: var(--tan); transform: translateY(-3px); } .card-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--seafoam); display: flex; align-items: center; justify-content: center; color: var(--slate-deep); margin-bottom: 18px; font-size: 18px; } .card h3 { font-size: 19px; margin-bottom: 10px; } .card p { font-size: 14px; } .card-link { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tan-deep); font-weight: 600; margin-top: 14px; display: inline-block; } /* ---------- Testimonial ---------- */ .testimonial { max-width: 640px; margin: 0 auto; text-align: center; } .stars { color: var(--tan); font-size: 16px; margin-bottom: 22px; letter-spacing: 3px; } .testimonial-quote { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.5; margin-bottom: 22px; } .on-slate .testimonial-quote { color: var(--cream); } .testimonial-name { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tan); font-weight: 600; } .badge-row { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; } .cred-badge { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; padding: 7px 16px; border-radius: 20px; border: 1px solid rgba(251,247,241,0.35); color: var(--taupe); } /* ---------- CTA band ---------- */ .cta-band { background: var(--slate-deep); padding: 90px 0; text-align: center; } .cta-band h2 { color: var(--cream); margin-bottom: 16px; } .cta-band p { max-width: 460px; margin: 0 auto 30px; color: var(--seafoam); } /* ---------- Footer ---------- */ .footer { background: var(--slate-deep); padding: 50px 0 30px; color: var(--taupe); } .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 30px; margin-bottom: 30px; } .footer-logo img { height: 94px; margin-bottom: 14px; } .footer-col h4 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--seafoam); margin-bottom: 14px; font-weight: 600; font-family: var(--sans); } .footer-col a, .footer-col p { display: block; font-size: 13px; color: var(--taupe); margin-bottom: 8px; } .footer-bottom { border-top: 1px solid rgba(251,247,241,0.12); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: rgba(211,204,197,0.6); } /* ---------- Forms ---------- */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); font-weight: 600; display: block; margin-bottom: 8px; } input, select, textarea { width: 100%; padding: 13px 14px; border: 1px solid rgba(61,85,104,0.25); background: var(--cream); font-family: var(--sans); font-size: 14px; color: var(--ink); border-radius: 2px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tan); } textarea { resize: vertical; min-height: 110px; } /* ---------- Misc ---------- */ .divider { width: 50px; height: 1px; background: var(--tan); margin: 0 auto 24px; } .tag-pill { display: inline-block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; padding: 5px 13px; border-radius: 20px; background: var(--seafoam); color: var(--slate-deep); margin: 3px; } @media (max-width: 880px) { .nav-links { display: none; } h1 { font-size: 38px; } h2 { font-size: 28px; } .steps, .grid-3, .grid-2 { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; } }