/* ============================================================ AD ASTRA LIMO — SITE STYLESHEET One file. It controls how all 30 pages look. ── HOW TO CHANGE THINGS ──────────────────────────────────── Everything you'd normally want to adjust lives in the block directly below, in plain values. Change one line here and it changes everywhere on the site at once. You never need to open the HTML pages to change how something looks. Fonts come from Google Fonts, loaded by each page's . ============================================================ */ :root{ /* ---- COLOURS ------------------------------------------- */ --ground: #131313; /* the site's black. Every page sits on this. */ --gold: #A88A54; /* the brand gold. Rules, labels, small caps. */ --gold-bright: #D4B27E; /* lighter gold. Hover states, highlights. */ --cream: #F0E6D2; /* warm white. Big numbers, prices. */ --ivory: #E8E8E6; /* normal text. */ --dim: #A6A6A2; /* quieter text. Descriptions, captions. */ --card-text: #C4C4C0; /* text inside cards. */ --eyebrow-col: #8A8A86; /* the small grey label above a headline. */ --glass: rgba(168,138,84,.06); /* card + panel tint */ --glass-hover: rgba(168,138,84,.10); --rule: rgba(168,138,84,.46); /* visible hairlines */ --rule-soft: rgba(168,138,84,.22); /* quieter hairlines */ /* ---- TYPE ---------------------------------------------- */ --display: 'Bodoni Moda','Times New Roman',serif; /* headlines, prices */ --body: 'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --text-size: 16.5px; /* base body size */ --measure: 64ch; /* how wide a paragraph gets before it wraps */ --wrap: 1180px; /* max width of page content */ /* ---- SPACING ------------------------------------------- */ --band: 7rem; /* vertical space between major sections */ --band-tight: 4.5rem; /* ---- MOTION -------------------------------------------- */ --sheen: 4.5s; /* button glare: lower = faster sweep */ --orb-float: 7s; /* how slowly the sphere rises and falls */ --twinkle: 4s; /* star breathing speed */ /* Shooting-star frequency is set on .shoot:nth-child() below. Bigger numbers = rarer. They must stay different from one another, or the stars start falling in visible patterns. */ } /* ============================================================ BASE ============================================================ */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--ground); color:var(--ivory); font-family:var(--body); font-weight:400; font-size:var(--text-size); line-height:1.68; letter-spacing:.004em; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3,h4{ font-family:var(--display); font-weight:400; margin:0; text-wrap:balance; font-optical-sizing:auto; font-variation-settings:'opsz' 96; } p{margin:0 0 1.1rem} p:last-child{margin-bottom:0} :focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px} .skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:#111; padding:.7rem 1.2rem;z-index:100;text-decoration:none} .skip-link:focus{left:0} .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0} /* spam trap — leave alone */ /* ============================================================ THE NIGHT SKY (fixed behind everything) ============================================================ */ .sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--ground)} .stars{position:absolute;inset:0;opacity:.4; animation:twinkle var(--twinkle) ease-in-out infinite alternate; background-image: radial-gradient(1.4px 1.4px at 12% 18%, #D4B27E 100%, transparent), radial-gradient(1.4px 1.4px at 27% 62%, #D4B27E 100%, transparent), radial-gradient(1px 1px at 41% 31%, #B8935A 100%, transparent), radial-gradient(1.4px 1.4px at 58% 12%, #D4B27E 100%, transparent), radial-gradient(1px 1px at 69% 47%, #B8935A 100%, transparent), radial-gradient(1.4px 1.4px at 83% 24%, #D4B27E 100%, transparent), radial-gradient(1px 1px at 91% 68%, #B8935A 100%, transparent), radial-gradient(1.2px 1.2px at 34% 84%, #D4B27E 100%, transparent), radial-gradient(1px 1px at 76% 89%, #B8935A 100%, transparent), radial-gradient(1.2px 1.2px at 6% 74%, #D4B27E 100%, transparent)} .stars--slow{opacity:.22;animation-duration:7s;animation-delay:-2s; background-image: radial-gradient(1px 1px at 19% 41%, #C9B896 100%, transparent), radial-gradient(1px 1px at 47% 71%, #C9B896 100%, transparent), radial-gradient(1px 1px at 63% 29%, #A88A54 100%, transparent), radial-gradient(1px 1px at 88% 52%, #C9B896 100%, transparent), radial-gradient(1px 1px at 8% 55%, #A88A54 100%, transparent), radial-gradient(1px 1px at 55% 92%, #C9B896 100%, transparent)} @keyframes twinkle{from{opacity:.2}to{opacity:.48}} /* wishing stars — the durations are deliberately unrelated so the pattern takes hours to repeat. Raise a number to make one rarer. */ .shoot{position:absolute;width:2px;height:2px;border-radius:50%; background:#FFF4DC;box-shadow:0 0 8px 2px rgba(255,244,220,.45); transform:rotate(-34deg);opacity:0;animation:shoot 16s linear infinite} .shoot::before{content:"";position:absolute;top:50%;left:2px;width:150px;height:1px; transform:translateY(-50%); background:linear-gradient(90deg,rgba(255,244,220,.85),rgba(212,178,126,.25) 45%,transparent)} .shoot:nth-child(1){top:8%; left:82%;animation-duration:17s;animation-delay:-3s} .shoot:nth-child(2){top:22%;left:58%;animation-duration:23s;animation-delay:-11s} .shoot:nth-child(3){top:4%; left:38%;animation-duration:31s;animation-delay:-19s} .shoot:nth-child(4){top:38%;left:94%;animation-duration:41s;animation-delay:-7s} .shoot:nth-child(5){top:15%;left:71%;animation-duration:53s;animation-delay:-34s} @keyframes shoot{ 0% {translate:0 0;opacity:0} 1.5%{opacity:1} 9% {translate:-460px 310px;opacity:0} 100%{translate:-460px 310px;opacity:0} } /* the sphere — a lit body, not a blur */ .orb{position:absolute;border-radius:50%; width:clamp(230px,24vw,400px);height:clamp(230px,24vw,400px); top:clamp(-70px,-4vw,-20px);right:7%;opacity:.85; animation:orbfloat var(--orb-float) ease-in-out infinite; background:radial-gradient(circle at 34% 28%, rgba(255,244,220,.52) 0%, rgba(212,178,126,.26) 38%, rgba(168,138,84,.12) 62%, transparent 78%); box-shadow: inset -22px -22px 62px rgba(0,0,0,.42), inset 16px 16px 48px rgba(255,244,220,.18), 0 0 110px rgba(168,138,84,.26)} .orb--far{width:clamp(150px,15vw,250px);height:clamp(150px,15vw,250px); top:auto;bottom:-6vw;left:6%;right:auto;opacity:.35; animation:orbfloat 11s ease-in-out infinite reverse; background:radial-gradient(circle at 40% 35%, rgba(212,178,126,.22) 0%, rgba(138,74,60,.10) 45%, transparent 72%); box-shadow:inset -14px -14px 44px rgba(0,0,0,.35),0 0 70px rgba(138,74,60,.16)} @keyframes orbfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .orb,.stars,.shoot,.btn::after,.btn-primary::after,.btn-ghost::after{animation:none} .shoot{opacity:0} } /* ============================================================ LAYOUT ============================================================ */ .container,.wrap{position:relative;z-index:2; width:min(100% - 2.5rem, var(--wrap));margin-inline:auto} header,main,footer,section{position:relative;z-index:2} .section{padding:var(--band) 0;border-top:1px solid var(--rule-soft)} .section-tight{padding:var(--band-tight) 0} .section-dark{background:rgba(255,255,255,.014)} .section-head{margin-bottom:3.6rem} .section-head h2{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.15;letter-spacing:-.012em;max-width:20ch} .section-head p{color:var(--dim);max-width:var(--measure);margin-top:1rem} .eyebrow{display:block;font-family:var(--body);font-size:.7rem;letter-spacing:.4em; text-transform:uppercase;color:var(--eyebrow-col);font-weight:400;margin-bottom:.85rem} .section-head .eyebrow{color:var(--gold)} .lede{color:var(--dim);font-size:1.05rem;max-width:var(--measure)} .breadcrumb{position:relative;z-index:2;width:min(100% - 2.5rem,var(--wrap));margin:1.6rem auto 0; font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow-col)} .breadcrumb a{color:var(--gold);text-decoration:none} .breadcrumb a:hover{color:var(--gold-bright)} /* ============================================================ HEADER ============================================================ */ .site-header{border-bottom:1px solid var(--rule-soft);position:relative;z-index:5} .site-header .container{display:flex;align-items:center;gap:1.5rem;padding:1.6rem 0;flex-wrap:wrap} .wordmark{font-family:var(--display);font-size:1rem;letter-spacing:.3em;text-transform:uppercase; text-decoration:none;color:var(--ivory);margin-right:auto} .wordmark span{color:var(--gold)} .header-tel{font-size:.75rem;letter-spacing:.18em;color:var(--dim);text-decoration:none; transition:color .3s} .header-tel:hover{color:var(--gold-bright)} .site-nav{display:flex;gap:2.1rem;list-style:none;margin:0;padding:0; font-size:.72rem;letter-spacing:.22em;text-transform:uppercase} .site-nav a{text-decoration:none;color:var(--dim);padding-bottom:.25rem; border-bottom:1px solid transparent;transition:color .3s,border-color .3s} .site-nav a:hover,.site-nav a:focus-visible,.site-nav a[aria-current="page"]{ color:var(--ivory);border-color:var(--gold)} .nav-toggle{display:none;background:none;border:1px solid var(--rule);color:var(--ivory); font-family:var(--body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; padding:.6rem 1.1rem;cursor:pointer} @media (max-width:900px){ .nav-toggle{display:block} .site-nav{display:none;flex-direction:column;gap:1.1rem;width:100%;padding:1.4rem 0 .4rem} .site-nav.is-open{display:flex} } /* ============================================================ HERO ============================================================ */ .hero{padding:6rem 0 5rem;text-align:center} .hero .container{display:flex;flex-direction:column;align-items:center} .hero h1{font-size:clamp(2.7rem,6.6vw,5.3rem);line-height:1.02;letter-spacing:-.02em;max-width:15ch} .hero .eyebrow{margin-bottom:1.9rem} .hero .lede{margin:2rem auto 0;max-width:52ch;font-size:1.02rem;text-align:center} .hero--page{padding:4.5rem 0 3.5rem;text-align:left} .hero--page .container{align-items:flex-start} .hero--page h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:22ch} .hero--page .lede{margin-left:0;text-align:left} .hero-note{color:var(--eyebrow-col);font-size:.85rem;margin-top:1rem} .hairline{width:44px;height:1px;background:var(--gold-bright);margin:2.5rem auto;opacity:.9} .sunburst{display:none} /* superseded by the night sky */ /* ============================================================ BUTTONS — the glass glare ============================================================ */ .btn-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem} .hero .btn-row{justify-content:center} .hero--page .btn-row{justify-content:flex-start} .btn{position:relative;overflow:hidden;display:inline-block;text-decoration:none; font-family:var(--body);font-size:.74rem;letter-spacing:.26em;text-transform:uppercase; padding:1.15rem 2.6rem;color:var(--ivory); border:1px solid rgba(168,138,84,.68);background:rgba(168,138,84,.05); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:color .35s,border-color .35s,background .35s;cursor:pointer} .btn-primary{background:rgba(168,138,84,.14);backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);box-shadow:0 0 26px rgba(212,178,126,.10)} .btn-ghost{border-color:var(--rule);color:var(--dim)} .btn::after{content:"";position:absolute;top:-20%;left:-160%;width:62%;height:140%;z-index:2; transform:skewX(-18deg);pointer-events:none; background:linear-gradient(100deg,transparent 0%, rgba(255,255,255,.10) 34%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.10) 66%,transparent 100%); animation:sheen var(--sheen) ease-in-out infinite} .btn-ghost::after{animation-duration:6s; background:linear-gradient(100deg,transparent 0%, rgba(255,255,255,.06) 38%,rgba(255,255,255,.24) 50%,rgba(255,255,255,.06) 62%,transparent 100%)} .btn-row .btn:nth-child(2)::after{animation-delay:1.4s} .btn:hover::after,.btn:focus-visible::after{animation-duration:1.6s} .btn:hover,.btn:focus-visible{border-color:var(--gold-bright);color:#fff} .btn-ghost:hover,.btn-ghost:focus-visible{color:var(--ivory);border-color:var(--gold)} /* ============================================================ CARDS ============================================================ */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.25rem;perspective:1200px} .card{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid var(--rule);padding:2.1rem 1.9rem 2.2rem; display:flex;flex-direction:column;gap:.9rem; transform:rotateX(2deg);transition:transform .35s ease,background .35s} .card:hover{transform:rotateX(0) translateY(-4px);background:var(--glass-hover)} .card h3{font-family:var(--body);font-size:.8rem;font-weight:400;letter-spacing:.15em; text-transform:uppercase;color:var(--gold)} .card p{font-family:var(--display);font-size:1rem;line-height:1.5;color:var(--card-text); margin:0;flex:1} .card-link{font-family:var(--body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gold);text-decoration:none;border-bottom:1px solid var(--rule); padding-bottom:.3rem;align-self:flex-start;transition:color .3s,border-color .3s} .card-link:hover,.card-link:focus-visible{color:var(--gold-bright);border-color:var(--gold-bright)} /* ============================================================ RATE TABLES ============================================================ */ .table-wrap{overflow-x:auto;margin:2rem 0 1rem; border-top:1px solid var(--rule);border-bottom:1px solid var(--rule-soft)} .rate-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px} .rate-table th{font-family:var(--body);font-weight:400;font-size:.68rem;letter-spacing:.2em; text-transform:uppercase;color:var(--gold);text-align:left; padding:1.1rem 1rem;border-bottom:1px solid var(--rule-soft)} .rate-table td{padding:1.1rem 1rem;border-bottom:1px solid rgba(168,138,84,.10);color:var(--card-text)} .rate-table tr:last-child td{border-bottom:0} .rate-table td:first-child{font-family:var(--display);font-size:1.05rem;color:var(--ivory)} .rate-table .num{font-family:var(--display);font-variant-numeric:tabular-nums; text-align:right;color:var(--cream);letter-spacing:-.01em;white-space:nowrap} .rate-table th.num{text-align:right} .table-note{color:var(--eyebrow-col);font-size:.85rem;margin-top:.9rem} /* ============================================================ LISTS, STATS, FAQ ============================================================ */ .star-list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.05rem} .star-list li{display:flex;gap:.85rem;align-items:flex-start;color:var(--dim)} .star-mark{flex:none;width:14px;height:14px;margin-top:.42em;color:var(--gold)} .star-list strong{color:var(--ivory);font-weight:400} .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin-top:2rem} .stat{padding:0 2rem;border-left:1px solid var(--rule-soft)} .stat:first-child{border-left:0;padding-left:0} .num{font-family:var(--display);font-variant-numeric:tabular-nums} .stat .num{display:block;font-size:2.5rem;line-height:1;color:var(--cream); letter-spacing:-.015em;margin-bottom:.6rem} .stat .label{display:block;font-family:var(--body);font-size:.72rem;letter-spacing:.2em; text-transform:uppercase;color:var(--eyebrow-col)} @media (max-width:720px){ .stat{border-left:0;border-top:1px solid var(--rule-soft);padding:1.4rem 0 0} .stat:first-child{border-top:0;padding-top:0} } .faq{margin-top:2.2rem;border-top:1px solid var(--rule-soft)} .faq h3{font-family:var(--display);font-size:1.2rem;color:var(--ivory); padding-top:1.9rem;margin-bottom:.7rem;letter-spacing:-.005em} .faq p{color:var(--dim);padding-bottom:1.9rem;border-bottom:1px solid rgba(168,138,84,.10);margin:0} .faq p:last-child{border-bottom:0} .town-links{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:1.6rem 0 0;padding:0} .town-links a{display:inline-block;text-decoration:none;font-size:.78rem;letter-spacing:.06em; color:var(--card-text);border:1px solid var(--rule-soft);padding:.55rem 1rem; transition:border-color .3s,color .3s,background .3s} .town-links a:hover,.town-links a:focus-visible{color:var(--ivory);border-color:var(--gold); background:var(--glass)} .cluster{margin-top:2.6rem} .cluster h3{font-family:var(--body);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);margin-bottom:.9rem} .cluster-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem} /* ============================================================ FORMS ============================================================ */ .field{display:grid;gap:.5rem;margin-bottom:1.4rem} .field label{font-family:var(--body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gold)} .field input,.field textarea,.field select{ font-family:var(--body);font-size:1rem;color:var(--ivory); background:rgba(255,255,255,.02);border:1px solid var(--rule-soft); padding:.9rem 1rem;transition:border-color .3s,background .3s} .field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--gold);background:rgba(255,255,255,.04);outline:none} .field textarea{min-height:150px;resize:vertical} /* ============================================================ FOOTER ============================================================ */ .site-footer{border-top:1px solid var(--rule-soft);padding:3.5rem 0 4rem;margin-top:2rem; color:var(--dim);font-size:.85rem} .site-footer .wordmark{display:inline-block;margin-bottom:2.2rem} .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.5rem} .footer-grid h4{font-family:var(--body);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase; color:var(--gold);margin-bottom:1rem;font-weight:400} .footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .footer-grid a{text-decoration:none;transition:color .3s} .footer-grid a:hover,.footer-grid a:focus-visible{color:var(--ivory)} .footer-grid p{margin:0 0 .5rem} .footer-bottom{margin-top:3rem;padding-top:1.8rem;border-top:1px solid rgba(168,138,84,.10); font-size:.78rem;color:var(--eyebrow-col);display:flex;justify-content:space-between; gap:1.5rem;flex-wrap:wrap} /* the accessible-service mark, so it reads without being read */ .wc{width:13px;height:13px;vertical-align:-2px;margin-right:.45rem;color:var(--gold)} /* ============================================================ HOMEPAGE COMPONENTS Only used on index.html. Everything above is sitewide. ============================================================ */ /* published-fare rows */ .fare{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap; padding:2.2rem 0;border-top:1px solid var(--rule-soft)} .fare:last-of-type{border-bottom:1px solid var(--rule-soft)} .fare-route{font-family:var(--display);font-size:1.3rem;letter-spacing:-.005em} .fare-note{color:var(--eyebrow-col);font-size:.85rem} .fare-price{font-family:var(--display);font-size:2.1rem;color:var(--cream); font-variant-numeric:tabular-nums;letter-spacing:-.015em;font-variation-settings:'opsz' 96} /* corporate panel */ .corp{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid var(--rule);border-bottom:1px solid var(--rule-soft); padding:clamp(2.2rem,5vw,3.6rem)} .corp h2{font-size:clamp(1.6rem,2.9vw,2.2rem);margin-top:1rem} .corp ul{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.1rem} .corp li{padding-left:1.6rem;position:relative;color:var(--dim)} .corp li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--gold)} .corp li strong{color:var(--ivory);font-weight:400} /* sister-brand referral strip */ .sister{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap; background:rgba(168,138,84,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-top:1px solid var(--rule);padding:2rem clamp(1.5rem,4vw,2.6rem)} .sister p{margin:0;color:var(--dim);max-width:56ch;font-size:.95rem} .sister strong{color:var(--ivory);font-weight:400} .access{display:flex;align-items:center;gap:1.4rem;flex:1;min-width:min(100%,22rem)} .access-mark{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--rule);color:var(--gold-bright);background:rgba(168,138,84,.06)} .access-mark svg{width:28px;height:28px} .sister .btn .wc{width:15px;height:15px;color:currentColor} /* modifiers */ .btn-submit{width:100%;justify-content:center;text-align:center;margin-top:.6rem} .town-links--feature a{border-color:var(--rule);color:var(--ivory);background:var(--glass); font-size:.82rem;padding:.65rem 1.15rem} .town-links--feature a:hover,.town-links--feature a:focus-visible{border-color:var(--gold-bright)} /* ---- PHOTOGRAPHY ---------------------------------------- Full-bleed bands that sit between sections. The images are already graded warm-on-blue, so this does almost nothing — a hairline rule, a whisper of contrast, and a fade at the top and bottom edges so they don't read as pasted rectangles. --------------------------------------------------------- */ .photo-band{position:relative;width:100%;margin:0;overflow:hidden; border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)} .photo-band img{display:block;width:100%; height:clamp(240px,40vw,540px);object-fit:cover; filter:saturate(.95) contrast(1.02)} .photo-band::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom, var(--ground) 0%, transparent 12%, transparent 88%, var(--ground) 100%)} /* the line of vans came out darker than the rest of the set */ .photo-band--bright img{filter:saturate(.97) contrast(1.01) brightness(1.14)} @media(max-width:640px){ .photo-band img{height:clamp(200px,56vw,320px)} }