/* ══════════════════════════════════════════════════════════ Oklahoma.ai — template Type: system stack · Palette: Red Earth and Big Sky ══════════════════════════════════════════════════════════ */ :root{ /* Red Earth and Big Sky palette (Oklahoma). Namespaced --okai-*: the CMS ships its own :root{--c-primary} and the plain --c-* names collided with it. Do not rename back. */ --okai-primary:#1D2B36; --okai-secondary:#5C6B75; --okai-accent:#B54520; --okai-white:#FFFFFF; --okai-cream:#F7F0E3; --okai-blue:#2E6485; --okai-blue-16:rgba(46,100,133,.16); --okai-blue-25:rgba(46,100,133,.25); --okai-primary-08:rgba(29,43,54,.08); --okai-primary-25:rgba(29,43,54,.25); --okai-offwhite:#FDFAF2; /* Image placeholders (swap for the real photos) */ --okai-ph:#BCC7CE; /* image with no text over it */ --okai-ph-dark:#345E75; /* image with light text over it */ --okai-shell:5%; /* section side padding (72px @1440) */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--okai-cream); color:var(--okai-primary); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Arial,sans-serif; font-size:20px; font-weight:400; line-height:30px; /* = 1.5em of 20px, inherited in px as in the original */ letter-spacing:-.7px; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4,h5,h6,p{margin:0} ul{margin:0;padding:0;list-style:none} button,input,select{font:inherit;letter-spacing:inherit;color:inherit} svg{display:block} .ph{background:var(--okai-ph)} .ph-dark{background:var(--okai-ph-dark)} /* ── Buttons ─────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:5px; border-radius:25px;text-align:center;cursor:pointer; font-weight:900; padding:12px 24px;border:none; transition:background-color .3s,color .3s,border-color .3s,transform .3s; } .btn svg{width:1em;height:1em;fill:currentColor} .btn--outline{ background:var(--okai-cream);color:var(--okai-accent); border:3px solid var(--okai-accent); } .btn--solid{background:var(--okai-accent);color:var(--okai-cream);border:1px solid var(--okai-accent)} .btn--18{font-size:18px;line-height:18px;letter-spacing:-.6px} .btn--24{font-size:24px;line-height:24px;letter-spacing:-.6px} .btn--16{font-size:16px;line-height:16px} /* ── Divider with title ──────────────────────────────── */ .divider{display:flex;align-items:center;padding:15px 0} .divider__text{ color:var(--okai-accent);font-weight:900;margin-right:10px;white-space:nowrap; } .divider::after{ content:"";flex:1;border-top:2px solid var(--okai-accent); } .divider--center{text-align:center} .divider--40 .divider__text{font-size:40px;line-height:40px} .divider--26 .divider__text{font-size:26px;line-height:26px} /* ══ HEADER ══════════════════════════════════════════ */ .site-header{ position:absolute;inset:0 0 auto 0;height:97px;min-height:97px; display:flex;align-items:center;justify-content:flex-end;gap:20px; padding:0 40px;z-index:99; } .nav{flex:1;display:flex;justify-content:flex-end;position:relative} .nav__toggle{ display:none;background:none;border:none;padding:0;cursor:pointer; width:20px;height:20px;color:#fff; } .nav__toggle span{display:block;height:2px;background:currentColor;border-radius:2px;margin:4px 0} .nav__list{display:flex;justify-content:flex-end} .nav__item{display:flex;position:relative} .nav__title{ display:flex;align-items:center;text-align:start; padding:8px 16px;color:#fff;font-weight:900;cursor:pointer; background:none;border:none; } .nav__caret{width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-left:5px} .nav__caret svg{width:20px;height:20px;fill:currentColor} .nav__caret svg path{transform-origin:center} .header-tools{ display:grid;grid-template-columns:repeat(4,48px);gap:20px; padding:10px;z-index:99;justify-content:start; } .tool{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;width:48px} .tool__icon{width:24px;height:24px} .tool__icon svg{width:24px;height:24px;fill:currentColor} .tool__label{width:100%;font-size:15px;line-height:15px;font-weight:700;text-align:center} .weather{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;gap:5px} .weather__icon,.weather__temp{color:#fff} .weather__icon svg{width:21px;height:20px;fill:currentColor} .weather__temp{font-size:16px;line-height:16px;font-weight:700} .fave{position:relative;font-size:12.8px;line-height:12.8px;font-weight:700;text-align:center} .fave__count{ display:inline-block;background:rgba(255,255,255,.25);border-radius:25px; padding:3px;margin:-5px 15px 0; } /* ══ HERO ════════════════════════════════════════════ */ .hero{position:relative;display:flex;flex-direction:column} .hero__inner{ position:relative;min-height:72vh;background:var(--okai-blue); padding:0 10px;display:flex;flex-direction:column; } .hero__media{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--okai-ph-dark)} .hero__media img{width:100%;height:100%;object-fit:cover} .hero__row{ max-width:1140px;width:100%;margin:0 auto;flex:1; display:flex;align-items:center;padding:10px 0;position:relative; } .hero__content{ position:relative;width:100%;padding:40px; display:flex;flex-direction:column;gap:20px; } .hero__title{ color:#fff;font-size:100px;line-height:100px;font-weight:900;text-align:center; } .hero__sub{ color:#fff;font-size:26px;line-height:1.3em;letter-spacing:-.8px; text-align:center;width:816px;max-width:100%;margin:0 auto; } /* ══ SEARCH BAR ══════════════════════════════════════ */ .searchbar{ position:relative;z-index:10;margin-top:-40px;padding:0 10px; display:flex;flex-direction:column; } .searchbar__row{ max-width:866px;width:100%;margin:0 auto;padding:10px 0; display:flex;align-items:center;justify-content:center; } .searchbar__card{ width:100%;display:flex;gap:10px;justify-content:flex-start;align-items:center; background:#fff;border-radius:15px;padding:10px; box-shadow:0 3px 10px 3px rgba(179,179,179,.5); } .sfield{ display:flex;flex:1;align-items:center;gap:14px;min-height:56px; border:1px solid var(--okai-blue-16);border-radius:5px;padding:0 14px; } .sfield__icon{color:var(--okai-blue);font-size:20px;flex:none;display:flex} .sfield__icon svg{width:20px;height:20px;fill:currentColor} .sfield__input{ flex:1;min-width:0;height:24px; background:none;border:none;outline:none; font-size:20px;line-height:24px;letter-spacing:-.8px;color:var(--okai-primary); -webkit-appearance:none;appearance:none; } .sfield__input::placeholder{color:rgba(29,43,54,.55);opacity:1} .sfield__input::-webkit-search-cancel-button{-webkit-appearance:none} .sbtn{ flex:none;width:127px;background:var(--okai-accent);color:#fff;font-size:18px;font-weight:700;line-height:1px; border-radius:50px;border:1px solid #c36;padding:18px;cursor:pointer; white-space:nowrap; } /* ══ CHOOSE YOUR ADVENTURE ═══════════════════════════ */ .adventure{ position:relative;display:flex;flex-direction:column; padding:2% var(--okai-shell); } /* 6-column grid inside the same margins as every other section (no bleed towards the page edge). */ .adv-grid{ display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-bottom:2%; } .adv-card{ position:relative;aspect-ratio:257/450;border-radius:20px;overflow:hidden;display:block; } .adv-card__bg{position:absolute;inset:0;border-radius:25px;background:var(--okai-ph-dark);z-index:1} .adv-card__ov{position:absolute;inset:0;border-radius:25px;background:transparent;transition:background-color .5s;z-index:2} .adv-card__content{ position:relative;z-index:3;height:100%;display:flex;align-items:flex-end; padding:20px;color:#fff; } .adv-card__title{font-size:30px;font-weight:900;} .adv-copy{ columns:2;column-gap:60px; } .adv-copy p{margin-bottom:14.4px} .adv-copy a{color:var(--okai-accent);text-decoration:underline} /* ══ QUICKLINKS ══════════════════════════════════════ */ .quicklinks{ display:flex;align-items:center;gap:5px;flex-wrap:wrap; padding:1% var(--okai-shell) var(--okai-shell); } .quicklinks__title{ color:var(--okai-accent);font-size:25px;line-height:25px;font-weight:800; margin-right:20px; } .quicklinks .btn svg{width:18px;height:18px} /* Hidden at every breakpoint, as in the original */ .is-hidden-desktop{display:none} /* Buttons that only show up on mobile */ .only-mobile{display:none} /* ══ CITY CARDS ═════════════════════════════════════ */ .cabins{display:flex;flex-direction:column;padding:3% var(--okai-shell) 1%} .sec-head{display:flex;align-items:center;justify-content:space-between;gap:20px} .sec-head .divider{flex:1} .cabin-grid{display:flex;flex-wrap:wrap;margin:0 -10px} .cabin-cell{width:20%;min-width:0;padding:10px} .cabin-card{ height:100%;display:flex;flex-direction:column;gap:15px;padding:10px;position:relative; } .cabin-card__media{ position:relative;height:200px;min-height:200px;border-radius:15px; background:var(--okai-blue-16); } .cabin-card__fav{ position:absolute;right:0;top:215px;width:40px;height:40px; display:flex;align-items:center;justify-content:center; border-radius:25px;padding:10px;z-index:2;color:var(--okai-primary-25); } .cabin-card__fav svg{width:20px;height:20px;fill:currentColor} .cabin-card__body{ display:flex;flex-direction:column;justify-content:center; padding:0 5px 20px;width:90%; } .cabin-card__title{font-size:20px;line-height:24px;font-weight:800;margin-bottom:5px} .cabin-meta{display:flex;flex-wrap:wrap;margin:0 -4.5px} .cabin-meta li{display:flex;align-items:center;margin:0 4.5px;font-size:15px;line-height:22.5px} .cabin-meta svg{width:14px;height:14px;fill:currentColor;margin-right:3.5px} .cabin-meta span{padding-left:5px} .cabin-card__cta{height:30px;display:flex;align-items:center} .quickview{ display:inline-flex;align-items:center;gap:5px; color:var(--okai-accent);font-size:14px;line-height:14px;font-weight:700; } .quickview svg{width:14px;height:14px;fill:currentColor} /* ══ CATEGORY CAROUSEL ══════════════════════════════ */ .features{display:flex;flex-direction:column;border-radius:15px} .feat-slider{position:relative} .feat-viewport{overflow:hidden} .feat-track{display:flex;transition:transform .45s ease} .feat-cell{flex:0 0 12.5%;min-width:0;padding:10px} .feat-card{ display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px; min-height:146px; } .feat-card__icon{width:64px;height:64px;color:var(--okai-accent)} .feat-card__icon svg{width:64px;height:64px;fill:currentColor} .feat-card__label{font-size:16px;line-height:16px;text-align:center} .feat-arrow{ position:absolute;top:50%;margin-top:-24px;z-index:90; width:48px;height:48px;padding:0;cursor:pointer;border:none; display:flex;align-items:center;justify-content:center; background:var(--okai-cream);color:var(--okai-primary); font-size:32px;line-height:48px; transition:color .3s,background-color .3s; } .feat-arrow svg{width:32px;height:32px;fill:currentColor} .feat-arrow--prev{left:-1.5%} .feat-arrow--next{right:-1.5%} /* ══ DRIVE BAND ══════════════════════════════════════ */ .drive{ position:relative;display:flex;flex-direction:column;align-items:center; justify-content:flex-start;gap:20px; padding:5%;border:3px solid var(--okai-primary);overflow:hidden; } .drive__bg{position:absolute;inset:0;background:var(--okai-ph-dark);z-index:0} .drive__bg::before{ content:"";position:absolute;inset:0;opacity:.65; background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 100%); } .drive__inner{position:relative;z-index:1;width:100%;display:flex;flex-direction:column} .drive__row{max-width:1140px;width:100%;margin:0 auto} .drive__col{display:flex;flex-direction:column;gap:20px;padding-bottom:19%} .drive-towns{ display:flex;justify-content:center;text-align:center;margin:0 -7px; } .drive-towns li{ display:flex;align-items:center;justify-content:center;margin:0 7px; color:var(--okai-cream);font-weight:700;letter-spacing:1.3px;text-transform:uppercase; } .drive-towns__icon{display:flex;margin-right:5.5px} .drive-towns__icon svg{width:22px;height:22px;fill:var(--okai-cream)} .drive-towns__icon + .t{padding-left:5px} .drive__title{ color:var(--okai-cream);font-size:40px;line-height:40px;font-weight:900;text-align:center; } .drive-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:30px;justify-items:center; width:72%;margin:0 auto; } .drive-card{ width:100%; display:flex;flex-direction:column;justify-content:center; border:8px solid var(--okai-cream);border-radius:25px;padding:20px; color:var(--okai-cream);text-align:center; } .drive-card__city{font-size:30px;font-weight:900;} .drive-card__num{font-size:60px;line-height:60px;font-weight:900} .drive-card__unit{font-size:16px;line-height:16px;text-transform:uppercase} .drive__cta{text-align:center} /* ══ PROMO + POPULAR GUIDES ═════════════════════════ */ .duo{display:flex;flex-direction:column;padding:5%} .duo__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:60px;align-items:stretch} .app-card{ position:relative;border-radius:15px;padding:40px;min-height:420px; display:flex;align-items:center;gap:60px;overflow:hidden; } .app-card__bg{position:absolute;inset:0;background:var(--okai-ph-dark);z-index:0} .app-card__col{ position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:20px; width:301px;max-width:100%;padding-right:53.8px; } .app-card__title{color:#fff;font-size:30px;font-weight:900;} .app-card__text{color:#fff;line-height:20px;margin-bottom:40px} .app-card__btns{display:flex;flex-direction:column;gap:10px} .app-card__btns .btn{background:var(--okai-accent);color:#fff;border:none;width:100%;padding:12px 24px} .news-card{ background:#fff;border-radius:15px;display:flex;align-items:center;min-height:420px; } .news-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start; background:#fff;border-radius:25px;padding:40px;width:100%; } .news-col{display:flex;flex-direction:column;gap:20px;padding-right:25.9px} .news-title{font-size:30px;font-weight:900;} .news-text{line-height:20px;margin-bottom:40px} .news-form{display:flex;flex-direction:column;gap:20px} .news-form form{display:flex;flex-direction:column} .news-form input{ width:100%;height:33px;background:#fff;color:#1F2124; font-size:16px;line-height:22.4px;letter-spacing:normal; border:1px solid #69727D;border-radius:2px;padding:4px 12px;margin-bottom:10px; } .news-form button{ width:100%;height:40px;background:var(--okai-accent);color:#fff;font-weight:900; line-height:20px;border:none;border-radius:25px;padding:10px 20px;cursor:pointer; } .news-fine{ color:var(--okai-secondary);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Arial,sans-serif; font-size:12px;line-height:12px; } .news-fine a{text-decoration:underline} /* ══ BLOG ════════════════════════════════════════════ */ .blog{display:flex;flex-direction:column;padding:5%} .blog__sub{line-height:20px} .blog-grid-wrap{padding-top:40px} .blog-grid{display:flex;flex-wrap:wrap;margin:0 -10px} .blog-cell{width:33.3333%;min-width:0;padding:10px} .blog-card{display:flex;flex-direction:column;padding:10px} .blog-card__media{ height:200px;min-height:200px;border-radius:25px;padding:10px;background:var(--okai-ph); } .blog-card__body{ display:flex;flex-direction:column;justify-content:center;padding:10px; } .blog-cat{ display:flex;flex-wrap:wrap;margin:10px -8px 0; } .blog-cat li{ display:flex;align-items:center;margin:0 8px; font-size:16px;font-weight:700;color:var(--okai-accent);line-height:30px; } .blog-cat svg{width:11px;height:11px;fill:currentColor} .blog-cat span{padding-left:5px} .blog-card__title{font-size:30px;font-weight:900;line-height:30px} .blog-card__ex{margin:10px 0;line-height:30px} .blog-card__more{margin-top:20px;height:30px;display:flex;align-items:center} .read-article{ display:inline-flex;flex-direction:row-reverse;align-items:center;gap:5px; color:var(--okai-accent);font-size:18px;line-height:18px;font-weight:900; } .read-article svg{width:18px;height:18px;fill:currentColor} /* ══ FOOTER ══════════════════════════════════════════ */ .site-footer{ background:var(--okai-primary);display:flex;flex-direction:column;gap:20px;padding:60px; } .footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px} .footer-col{display:flex;flex-direction:column;gap:20px;padding:10px} .footer-col h6{color:var(--okai-cream);font-size:20px;line-height:20px;font-weight:900} .footer-col li a{ display:flex;align-items:center;color:var(--okai-accent);font-size:16px;line-height:30px; } .footer-bottom{padding:10px} .footer-bottom p{color:var(--okai-cream);font-size:16px;line-height:16px} /* ══ RESPONSIVE ═════════════════════════════════════ Elementor breakpoints: tablet ≤1024px · mobile ≤767px Values taken from the original site. ══════════════════════════════════════════════════ */ @media (max-width:1024px){ /* Header: the menu becomes a centred hamburger */ .nav{justify-content:center;align-items:center} .nav__list{display:none} .nav__toggle{display:block} .header-tools{grid-template-columns:repeat(4,1fr);max-width:189px;width:189px} .tool,.weather{width:auto} .hero__inner{min-height:496px} .hero__title{font-size:66px;line-height:66px} .hero__sub{font-size:22px;line-height:1.3em} .divider--40 .divider__text, .divider--26 .divider__text{font-size:32px;line-height:32px} .adv-grid{grid-template-columns:repeat(3,1fr)} .cabin-grid{margin:0 -5px} .cabin-cell{width:33.3333%;padding:10px 5px} .blog-cell{width:33.3333%} .drive-grid{width:100%;justify-items:stretch} .drive__title{font-size:32px;line-height:32px} .site-footer{padding:40px} } @media (max-width:767px){ .site-header{min-height:0;height:61px;padding:10px 20px 10px 10px;gap:20px} .nav{flex:none;order:2;width:30px;justify-content:flex-end} .nav__toggle{width:30px;height:30px} .header-tools{order:1;grid-template-columns:repeat(3,auto);width:auto;max-width:none;gap:20px;padding:0} .hero__inner{min-height:420px;padding:0 20px} .hero__title{font-size:32px;line-height:32px} .hero__sub{font-size:20px;line-height:1.3em;width:100%} .hero__content{padding:20px 0} /* Search bar: wraps */ .searchbar__card{flex-wrap:wrap;column-gap:2.5%;row-gap:2.37vw} .sfield{flex:1 0 100%;min-height:52px;gap:10px;padding:0 10px} .sfield__icon{font-size:16px} .sfield__icon svg{width:16px;height:16px} .sfield__input{height:auto;font-size:16px;line-height:20px} .sbtn{flex:1 0 100%;width:auto;padding:10px;line-height:15px} /* Choose Your Adventure */ .adventure{padding:10% 5% 5%;gap:10px} .divider{padding:2px 0} .divider--40 .divider__text{font-size:24px;line-height:24px} .divider--26 .divider__text{font-size:30px;line-height:30px} .adv-grid{grid-template-columns:repeat(2,1fr);gap:15px} .adv-card__title{font-size:20px;line-height:20px} .adv-copy{columns:auto;column-gap:normal;font-size:18px;line-height:23.4px} /* Quicklinks */ .quicklinks{padding:1% 5% 5%} .quicklinks .btn{font-size:15px;line-height:15px;padding:11.25px;white-space:nowrap} .quicklinks .btn svg{width:15px;height:15px} /* City cards */ .cabins{padding:40px 20px 20px;gap:20px} .sec-head{flex-wrap:wrap;gap:20px} .sec-head .btn{display:none} .cabin-grid{margin:0 -5px} .cabin-cell{width:100%;padding:0 5px} .cabin-card{gap:0;padding:0} .cabin-card__media{min-height:100px;height:200px} .cabin-card__fav{right:10px;top:210px} .cabin-card__body{width:85%;padding:7.5px 7.5px 20px} .cabin-card__title{margin:10px 0} .cabin-meta li{line-height:21px} .features{padding:20px;gap:20px} .feat-cell{flex:0 0 33.3333%;padding:10px 0} .feat-card{min-height:130px} /* City band */ .drive{padding:12% 5% 32%;border-width:0} .drive__col{padding-bottom:40px} .drive-grid{grid-template-columns:repeat(2,1fr);gap:4px;width:100%} .drive-card{padding:10px;border-width:5px} .drive-card__city{font-size:20px;line-height:20px} .drive-card__num{font-size:46px;line-height:46px} .drive-card__unit{font-size:14px;line-height:14px} .drive__title{font-size:24px;line-height:24px} .drive__cta .btn{width:100%} /* Promo + Popular Guides */ .duo{padding:5%} .duo__grid{grid-template-columns:1fr;gap:60px} .app-card{padding:20px;gap:40px;min-height:0} .app-card__col{width:100%;padding:0 30% 20% 0} .app-card__title{font-size:20px;line-height:20px} .app-card__text{margin-bottom:0} .news-card{min-height:0;padding:30px;gap:40px} .news-grid{grid-template-columns:1fr;padding:30px;gap:20px} .news-col{padding-right:0} .news-title{font-size:20px;line-height:20px} .news-text{margin-bottom:0} /* Read All About It */ .blog{padding:5%} .blog-cell{width:100%} .blog-card{padding:0} .blog-card__body{padding:0} .blog-card__title{font-size:22px;line-height:22px} .blog-card__ex{font-size:16px;line-height:20.8px;margin:8px 0} /* Footer */ /* Mobile-only buttons */ .only-mobile{display:block} .only-mobile .btn{width:100%} .cabins__more .btn{font-size:15px;line-height:15px;padding:12px 24px} .blog__more .btn{ font-size:20px;line-height:20px;padding:12px 24px; background:#69727D;color:#fff;border-color:#69727D; } .site-footer{padding:20px} .footer-grid{grid-template-columns:1fr} } /* ══════════════════════════════════════════════════ HOVERS (taken one by one from the original site) ══════════════════════════════════════════════════ */ /* Header: the favourites and search icons turn orange. The menu items do NOT change in the original. */ .tool__icon{transition:color .3s} .tool:hover .tool__icon{color:var(--okai-accent)} /* Outline buttons → fill with orange */ .btn--outline:hover, .btn--outline:focus{ background:var(--okai-accent);color:var(--okai-cream);border-color:var(--okai-accent); } /* Buttons with Elementor's "grow" animation */ .btn--solid:hover, .quickview:hover, .read-article:hover{transform:scale(1.1)} .quickview,.read-article{transition:transform .3s} /* Choose Your Adventure cards: they darken */ .adv-card:hover .adv-card__ov{background:rgba(0,0,0,.3)} /* Two-column copy links: they drop the underline */ .adv-copy a{transition:color .3s} .adv-copy a:hover{color:var(--okai-primary);text-decoration:none} /* Article cards */ .cabin-card__title a, .cabin-card__fav{transition:color .3s} .cabin-card__title a:hover{color:var(--okai-accent)} .cabin-card__fav:hover{color:var(--okai-accent)} /* Carousel arrows */ .feat-arrow:hover{color:var(--okai-accent);background:var(--okai-primary-08)} /* Blog cards */ .blog-card__title a{transition:color .3s} .blog-card__title a:hover{color:var(--okai-accent)} /* ══ MEGA MENUS ═════════════════════════════════════ */ .nav__panel{ position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-8px); background:var(--okai-cream);border-radius:25px;overflow:hidden; box-shadow:0 3px 10px 3px rgba(29,43,54,.09); display:flex;flex-direction:column; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s ease,transform .3s ease,visibility .3s; z-index:200; } .nav__item.is-open .nav__panel{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); } .nav__item.is-open .nav__caret{transform:scaleY(-1)} .mm-cta:hover .mm-cta__title{color:var(--okai-accent)} .mm-cta{ position:relative;display:flex;flex-direction:column;align-items:flex-start; padding:20px;border-radius:25px;overflow:hidden;color:#fff; } .mm-cta > *{position:relative;z-index:1} .mm-cta > .mm-cta__bg{position:absolute;inset:0;background:var(--okai-ph-dark);border-radius:25px;z-index:0} .mm-cta__bg::after{content:"";position:absolute;inset:0;background:var(--okai-primary-25);border-radius:25px;transition:background-color .5s} .mm-cta:hover .mm-cta__bg::after{background:rgba(0,0,0,.3)} .mm-cta__title{font-size:32px;font-weight:900;margin-bottom:7.68px;transition:color .3s} .mm-cta__title--sm{font-size:20px;line-height:20px;font-weight:900;margin-bottom:0} .mm-cta__desc{font-size:16px;line-height:19.2px} .mm-cta__desc--mb{margin-bottom:12px} .mm-cta__btn{ display:inline-block;background:var(--okai-accent);color:var(--okai-cream); font-size:16px;line-height:16px;font-weight:900;border-radius:25px; padding:10px;text-align:center; } /* Menu 1 — Cities & Regions */ .mm--stay{width:800px;padding:10px;gap:20px} .mm--stay__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:10px} .mm--stay__col{display:grid;grid-template-columns:1fr;gap:20px} .mm--stay__col .mm-cta{height:130px} .mm--stay .mm-cta--big{height:430px} /* Menu 2 — Health & Services */ .mm--todo{width:1000px} .mm--todo__row{display:flex} .mm--todo__grid{ flex:none;width:650px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:20px; } .mm--todo__grid .mm-cta{height:427px} /* Menu 3 — Arts & Culture */ .mm--plan{width:700px} .mm--plan__row{display:flex} .mm--plan__main{flex:none;width:296px;display:flex;flex-direction:column;gap:20px;padding:20px} .mm--plan__main .mm-cta{height:400px} /* Blue link columns */ .mm-links{ display:flex;flex-direction:column;gap:20px;justify-content:flex-start; background:var(--okai-blue);padding:40px 20px 20px; } .mm-links--stay{flex:none;width:350px} .mm-links--plan{flex:none;width:202px} .mm-links__title{color:#fff;font-size:20px;line-height:20px;font-weight:900} .mm-links li{display:flex;align-items:center;padding-bottom:5px} .mm-links li + li{margin-top:5px} .mm-links li:last-child{padding-bottom:0} .mm-links li a{display:flex;align-items:center;color:#fff;font-size:18px;line-height:19.8px;transition:color .3s} .mm-links li a:hover{color:var(--okai-accent)} .mm-links__all{color:var(--okai-accent);font-size:16px;line-height:16px;font-weight:900} @media (max-width:1100px){ .mm--stay,.mm--todo,.mm--plan{width:min(92vw,1000px)} .mm--todo__row,.mm--plan__row{flex-wrap:wrap} .mm--todo__grid,.mm--plan__main{width:100%} .mm-links--stay,.mm-links--plan{width:100%} } /* ══════════════════════════════════════════════════════ LASSO SHELL ADAPTATIONS (structure the CMS requires: logo, search bar, mobile menu, scrim, .pages containers) ══════════════════════════════════════════════════════ */ body{display:flex;flex-direction:column;min-height:100vh} .main-wrapper{overflow-x:hidden} /* Logo (fixed shell markup) */ .logo{max-width:120px} .logo a{display:flex} /* Header: floats over the hero on the home page, solid on interior pages */ .site-header{justify-content:space-between} .pages .site-header{position:static;background:var(--okai-primary)} .pages .main-wrapper{background:var(--okai-cream)} /* Mega menus: open on hover and via keyboard, no JS */ .nav-item.has-dropdown:hover > .nav__panel, .nav-item.has-dropdown:focus-within > .nav__panel{ opacity:1;visibility:visible;pointer-events:auto; transform:translateX(-50%) translateY(0); } .nav-item.has-dropdown:hover .nav__caret, .nav-item.has-dropdown:focus-within .nav__caret{transform:scaleY(-1)} .nav__title{cursor:pointer} /* The first panel anchors left: centred it ran off the screen. The original design hid that with overflow-x:hidden on body, which Lasso forbids. */ .nav-links > .nav-item.has-dropdown:first-child > .nav__panel{ left:0;transform:translateX(0) translateY(-8px); } .nav-links > .nav-item.has-dropdown:first-child:hover > .nav__panel, .nav-links > .nav-item.has-dropdown:first-child:focus-within > .nav__panel{ transform:translateX(0) translateY(0); } .nav__panel{max-width:min(96vw,1000px)} /* Mega menus are clipped to the window width instead of pushing horizontal scroll (this replaces the body overflow-x:hidden Lasso forbids). overflow-x:clip keeps the panel visible downwards. */ .site-header{overflow-x:clip;overflow-y:visible} /* 7 nav items (5 categories + About Us + Contact Us, the last two required by Lasso) no longer fit at 1024px the way the original 5 did: the hamburger now takes over below 1300px instead of 1024px. */ .nav__title{white-space:nowrap} @media (max-width:1300px){ .nav__list{display:none} /* The