*{
box-sizing:border-box
}
html{
scroll-behavior:smooth
}
body{
margin:0;
background:#f7f7f7;
color:#073c45;
font-family:Arial,Helvetica,sans-serif;
font-size:14px
}
a{
color:inherit;
text-decoration:none
}
button,input,select{
font:inherit
}
.topbar{
height:27px;
background:#082f35;
color:#fff;
display:flex;
justify-content:space-between;
padding:0 31%;
font-size:10px;
align-items:center
}
.toplinks{
display:flex;
gap:13px;
align-items:center
}
.account{
background:#00a9a9;
padding:8px 12px;
font-weight:700
}
header{
height:54px;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
gap:25px;
border-bottom:1px solid #eee;
position:relative;
z-index:5
}
.logo{
position:absolute;
left:31.5%;
top:-20px;
background:#042126;
color:#fff;
width:100px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
gap:4px;
font-weight:800;
font-size:13px;
clip-path:polygon(0 0,100% 0,78% 100%,0 100%)
}
.logo img{
width:24px;
height:24px;
object-fit:contain
}
.logo span{
display:block
}
.site-header nav,header nav{
display:flex;
gap:17px;
font-size:11px;
margin-left:170px
}
.site-header nav a:hover,header nav a:hover,nav .active{
color:#042126
}
.mobile-menu{
display:none;
border:0;
background:none;
font-size:22px
}
.home-hero{
width:440px;
margin:20px auto 0;
display:grid;
grid-template-columns:216px 216px;
gap:12px;
align-items:start
}
.booking-panel{
background:#fff;
padding:15px 13px;
min-height:420px
}
.booking-panel h1{
font-size:18px;
font-weight:400;
margin:0 0 10px
}
.signin-note{
font-size:7px;
background:#f5f5f5;
padding:8px;
color:#555;
line-height:1.4
}
.small-link{
font-size:8px;
color:#008d92;
font-weight:700;
display:block;
margin:10px 0
}
.booking-panel label,.card label{
display:block;
font-size:7px;
color:#555;
margin-top:10px
}
.booking-panel input,.booking-panel select,.card input,.card select{
display:block;
width:100%;
border:0;
border-bottom:1px solid #777;
background:#fff;
padding:8px 4px;
font-size:10px;
color:#333;
outline:0
}
.booking-panel input:focus,.card input:focus{
border-color:#042126
}
.switch{
border:0;
background:none;
color:#008d92;
font-size:7px;
float:right;
margin-top:-19px
}
.discount{
margin-top:12px
}
.date-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px
}
.primary{
background:#008f93;
color:#fff;
border:0;
padding:12px 18px;
font-weight:800;
font-size:10px;
cursor:pointer
}
.primary:hover{
background:#042126
}
.wide{
width:112px;
display:block;
margin:17px auto 0
}
.promo-column{
display:flex;
flex-direction:column;
gap:7px
}
.promo{
height:178px;
padding:20px 16px
}
.promo h2{
font-size:20px;
line-height:1.2;
margin:0 0 14px;
color:#fff
}
.promo p{
font-size:7px;
color:#fff;
line-height:1.5
}
.promo.teal{
background:#126067
}
.light-btn{
display:inline-block;
background:#008f93;
color:#fff;
padding:11px 15px;
font-size:8px;
font-weight:800
}
.image-slot,.photo-slot,.empty-image,.large-photo{
background:#e9e9e9;
display:flex;
align-items:center;
justify-content:center;
color:#777;
position:relative;
overflow:hidden
}
.image-slot{
height:215px
}
.image-slot span,.photo-slot span,.empty-image span,.large-photo span{
border:1px dashed #999;
padding:9px;
font-size:9px
}
.image-slot small{
position:absolute;
bottom:14px;
font-size:7px
}
.tile-row{
width:440px;
margin:70px auto 40px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:7px
}
.photo-slot{
height:100px
}
.center-section{
width:440px;
margin:75px auto;
text-align:center
}
.kicker{
font-size:7px;
letter-spacing:3px;
color:#008f93;
font-weight:800;
margin:0 0 7px
}
.center-section h2{
font-size:19px;
margin:0 0 25px
}
.icon-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:7px;
text-align:left
}
.icon-grid a{
background:#fff;
padding:14px 12px;
min-height:145px
}
.icon-grid i{
display:grid;
place-items:center;
width:27px;
height:27px;
border-radius:50%;
background:#f6f6f6;
font-style:normal;
font-size:10px
}
.icon-grid h3{
font-size:11px;
line-height:1.3;
margin:11px 0 7px
}
.icon-grid p{
font-size:7px;
color:#666;
line-height:1.45;
min-height:28px
}
.icon-grid b{
font-size:7px;
color:#008f93
}
.wide-banner{
width:440px;
margin:0 auto 40px;
background:#fff;
display:grid;
grid-template-columns:1fr 1fr;
min-height:125px
}
.banner-image{
background:#e7e7e7;
display:grid;
place-items:center;
color:#777
}
.banner-image span{
border:1px dashed #999;
padding:9px;
font-size:8px
}
.wide-banner>div:last-child{
padding:20px
}
.wide-banner h3{
font-size:12px;
margin:0 0 8px
}
.wide-banner p{
font-size:7px;
line-height:1.5;
color:#666
}
.wide-banner a,.travel-cards a,.article-card a{
font-size:7px;
color:#008f93;
font-weight:800
}
.featured{
margin-top:40px
}
.fare-picker{
background:#fff;
padding:22px;
width:100%;
margin-bottom:15px
}
.fare-picker p{
font-size:7px;
letter-spacing:3px;
color:#008f93
}
.fare-picker select{
border:0;
border-bottom:1px solid #555;
padding:7px;
width:150px;
font-size:10px
}
.fare-picker small{
display:block;
text-align:left;
margin-top:12px;
font-size:6px;
color:#777
}
.fare-table{
background:#fff
}
.fare-table>div{
display:grid;
grid-template-columns:2fr 1fr 1fr .6fr;
text-align:left;
padding:10px 4px;
border-bottom:1px solid #ddd;
font-size:7px;
align-items:center
}
.fare-table a{
color:#008f93;
font-weight:800;
text-align:right
}
.fare-table em{
font-style:italic;
color:#777
}
.travel-cards{
display:flex;
flex-direction:column;
gap:10px
}
.travel-cards article{
background:#fff;
display:grid;
grid-template-columns:1fr 1fr;
min-height:125px
}
.large-photo{
min-height:125px
}
.travel-cards article>div:last-child{
padding:20px
}
.travel-cards h3{
font-size:12px;
margin:0 0 8px
}
.travel-cards p{
font-size:7px;
color:#666;
line-height:1.5
}
.app-strip{
width:440px;
margin:20px auto -1px;
background:#14383e;
color:#fff;
padding:14px 20px;
display:flex;
align-items:center;
gap:10px;
font-size:8px
}
.app-strip p{
margin:4px 0;
color:#bcd0d2;
font-size:7px
}
.store{
border:1px solid #fff;
padding:8px;
font-size:7px;
margin-left:auto
}
footer{
background:#126067;
color:#fff;
padding:28px max(calc((100% - 440px)/2),20px) 18px
}
.footer-main{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:20px
}
.footer-main h4{
font-size:8px;
margin:0 0 8px
}
.footer-main a:not(.logo){
display:block;
font-size:7px;
color:#dce9ea;
margin:5px 0
}
.footer-logo{
position:static;
clip-path:none;
background:none;
width:auto;
height:auto;
justify-content:flex-start
}
.copyright{
border-top:1px solid rgba(255,255,255,.2);
margin-top:20px;
padding-top:12px;
font-size:7px;
color:#c8d8d9
}
.page{
max-width:900px;
margin:0 auto;
padding:55px 20px 90px
}
.page-title{
margin-bottom:35px
}
.page-title h1{
font-size:40px;
letter-spacing:-1.5px;
margin:0 0 12px
}
.page-title p:not(.kicker){
color:#666
}
.card{
background:#fff;
padding:28px;
margin-bottom:25px;
box-shadow:0 1px 4px rgba(0,0,0,.04)
}
.booking-form{
max-width:680px
}
.booking-form .primary{
margin-top:20px
}
.data-note{
font-size:10px;
color:#777;
margin-top:20px
}
.results-list{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:50px
}
.flight-row{
background:#fff;
padding:20px;
display:grid;
grid-template-columns:1fr 90px 90px;
align-items:center;
gap:15px
}
.flight-row span,.flight-row small{
display:block;
color:#666;
margin-top:6px
}
.flight-row small{
font-size:10px
}
.seat-section{
margin:50px 0
}
.seat-map{
background:#fff;
padding:25px;
display:grid;
grid-template-columns:repeat(6,42px);
gap:8px;
width:max-content;
margin-top:20px
}
.seat{
height:38px;
border:1px solid #ccc;
background:#fff;
color:#333;
cursor:pointer;
font-size:10px
}
.seat:hover,.seat.chosen{
background:#d71920;
color:#fff;
border-color:#d71920
}
.checkin{
max-width:650px
}
.inline{
display:inline-block
}
.manage-card{
max-width:650px
}
.manage-card .primary{
margin-top:18px
}
.booking-summary{
margin-top:25px;
border-top:1px solid #ddd;
padding-top:20px
}
.success{
color:#008f93;
font-weight:700
}
.status-card{
max-width:650px
}
.status-card .primary{
margin-top:18px
}
.status-result{
margin-top:25px;
border-top:1px solid #ddd;
padding-top:20px;
display:flex;
gap:25px;
align-items:center
}
.status-result strong{
color:#008f93
}
.article-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px
}
.article-card{
background:#fff;
padding-bottom:25px
}
.article-card>*:not(.empty-image){
margin-left:20px;
margin-right:20px
}
.article-card h2{
font-size:20px
}
.article-card p:not(.kicker){
color:#666;
line-height:1.5;
font-size:12px
}
.empty-image{
height:180px;
margin-bottom:20px
}
.offer-grid{
display:flex;
flex-direction:column;
gap:20px
}
.offer-card{
background:#fff;
display:grid;
grid-template-columns:1fr 1fr
}
.offer-card .empty-image{
height:270px
}
.offer-card>div:last-child{
padding:35px
}
.offer-card h2{
font-size:28px
}
.help-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px
}
.help-grid a{
background:#fff;
padding:25px
}
.help-grid h2{
font-size:17px;
margin:0 0 8px
}
.help-grid p{
font-size:11px;
color:#666;
line-height:1.5
}
.empty{
padding:30px;
color:#777
}
@media(min-width:1000px){
body{
zoom:1.5
}
}
@media(max-width:700px){
.topbar{
padding:0 15px
}
.toplinks span:first-child{
display:none
}
header{
justify-content:flex-start;
padding:0 20px;
height:60px
}
.logo{
position:static;
clip-path:none;
width:auto;
height:42px;
padding:0 12px
}
.logo img{
width:25px
}
.site-header nav,header nav{
display:none
}
.mobile-menu{
display:block;
margin-left:auto
}
.home-hero,.tile-row,.center-section,.wide-banner,.app-strip{
width:min(94%,440px)
}
.home-hero{
grid-template-columns:1fr
}
.promo-column{
display:grid;
grid-template-columns:1fr 1fr
}
.promo{
height:180px
}
.promo.image-slot{
height:180px
}
.icon-grid{
grid-template-columns:1fr 1fr
}
.footer-main{
grid-template-columns:1fr 1fr
}
.page-title h1{
font-size:32px
}
.flight-row{
grid-template-columns:1fr
}
.article-grid,.help-grid{
grid-template-columns:1fr
}
.offer-card,.travel-cards article{
grid-template-columns:1fr
}
.seat-map{
grid-template-columns:repeat(3,42px)
}
.status-result{
flex-direction:column;
align-items:flex-start
}
.app-strip{
flex-wrap:wrap
}
.store{
margin-left:0
}
}
header {
height: 54px;
padding: 0;
}
.header-inner {
width: min(900px, 94%);
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
position: relative;
}
.header-inner .logo {
position: static;
flex: 0 0 auto;
width: 125px;
height: 54px;
margin-right: 28px;
clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}
.header-inner nav {
margin-left: 0;
flex: 1;
justify-content: center;
}
.header-inner .mobile-menu {
margin-left: auto;
}
@media (max-width: 700px) {
.header-inner {
width: 100%;
padding: 0 20px;
}
.header-inner .logo {
width: auto;
height: 42px;
margin-right: 0;
clip-path: none;
}
}
/* ============================================================
BOOKING FARES / CABINS / CONFIRMATION
============================================================ */
.fare-selection{
max-width:680px;
}
.fare-options{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:10px;
margin-top:20px;
}
.fare-option{
background:#fff;
border:1px solid #d8d8d8;
padding:16px;
cursor:pointer;
}
.fare-option:has(input:checked){
border-color:#d71920;
box-shadow:0 0 0 1px #d71920;
}
.fare-option input{
width:auto;
display:inline-block;
margin-right:8px;
}
.fare-option span{
display:inline-flex;
flex-direction:column;
vertical-align:top;
gap:5px;
}
.fare-option small{
color:#666;
}
.fare-note{
color:#666;
font-size:10px;
line-height:1.5;
margin-top:18px;
}
.seat-map.b787-seat-map{
grid-template-columns:repeat(9, 42px);
}
.seat-unavailable{
opacity:.35;
cursor:not-allowed;
background:#eee;
}
.booking-confirmation{
max-width:680px;
}
.booking-review{
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
padding:12px 0;
margin:20px 0;
}
.booking-review p{
margin:9px 0;
}
.reference{
color:#d71920;
letter-spacing:1px;
font-size:16px;
}
.gamepass-box{
margin-top:20px;
padding:20px;
background:#f7f7f7;
border-left:4px solid #d71920;
}
.gamepass-box h3{
margin-top:0;
}
.gamepass-check{
display:block;
margin:18px 0;
}
.gamepass-check input{
width:auto;
display:inline-block;
margin-right:8px;
}
.gamepass-missing{
color:#9a0000;
font-size:10px;
}
@media(max-width:700px){
.fare-options{
grid-template-columns:1fr;
}
.seat-map.b787-seat-map{
grid-template-columns:repeat(3, 42px);
}
}