/* Theme Name: Perro Ankush Description: Standalone Perro Air theme (Elementor-ready). Author: Ankush Dev Contact: ankush.perroair@outlook.com Version: 1.1.20261014b */ /*------------------------------------------------*/ /*-------------------[GENERAL]--------------------*/ /*------------------------------------------------*/ /* ========================================================================== 1. Design tokens ========================================================================== */ :root{ /* Type */ --font-display: "Inter Display", "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-heading: "Google Sans Flex", "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-ui: Inter, "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Colour */ --c-ink: #0A0A0A; /* headings, nav */ --c-ink-soft: #21272A; /* form helper text */ --c-navy: #080B2B; /* field labels, airport codes, price */ --c-blue: #112D7C; /* brand blue: progress fill, brush, icons */ --c-blue-bright: #1946C5; --c-sky: #98C3E1; /* input + radio borders */ --c-cyan: #37E1FB; /* status pill border */ --c-cyan-deep: #0AA2BA; /* status pill text */ --c-melon: #E96A6F; /* asterisk, "booked" count */ --c-grey-text: #6D6D6D; /* input placeholders */ --c-grey-legal: #7D7D7D; /* footer legal line */ --c-page: #FFFFFF; --c-band: #F3F3F3; /* masthead band */ --c-panel: #F5F5F5; /* hero inner panel, section pills */ --c-card: #FAFAFA; /* detail cards */ --c-line: #E2E3E5; /* detail card border */ --c-hairline: rgba(168,168,168,.2); --c-btn: #2E2E2E; --c-btn-text: #FAFAFA; --c-watermark: #EBECED; --c-scrim: #232E3E; /* inquiry section scrim */ --c-panel-top: #00143A; --c-panel-mid: #3070B0; --c-panel-bottom: #BED0E0; --c-label: rgba(0,0,0,.9); --c-value: #000000; --c-card-label: rgba(8,11,43,.6); --c-field-active: #1A45BD; --c-error: #D00416; --c-error-fill: rgba(233,106,111,.1); --c-banner-fill: rgba(233,106,111,.2); --c-glyph: #141B34; --c-textarea-line: rgba(168,168,168,.3); --c-icon-btn-line: #D0D0D0; --c-delete-line: #FB3748; --c-secondary-fill: rgba(207,227,241,.2); --c-plus-fill: rgba(152,195,225,.1); --c-dialog-btn: #000000; --c-dialog-btn-text: #FFFFFF; --c-dialog-sub: rgba(0,0,0,.7); --c-overlay: rgba(0,0,0,.5); --c-flight-path-end: #1F52E2; --c-frame-line-a: #FFFFFF; --c-frame-line-b: rgba(255,255,255,.5); --c-rule: rgba(17,45,124,.16); --c-confirm-edge-start: var(--c-blue-bright); --c-confirm-edge-end: var(--c-melon); --c-confirm-card: rgba(255,255,255,.8); /* Radius */ --r-hero: 30px; --r-card: 24px; --r-panel: 20px; --r-inner: 16px; --r-btn: 14px; --r-input: 12px; --r-pill: 999px; --r-icon-btn: 9px; --r-frame-a: 86px; --r-frame-a-sm: 28.12px; --r-frame-b: 63.01px; --r-frame-b-sm: 36.06px; --r-frame-c-sm: 27.61px; /* Shadow */ --shadow-hero: 0 24px 24px rgba(0,0,0,.04); --shadow-btn: 0 16px 8px rgba(31,31,31,.01), 0 12px 6px rgba(31,31,31,.04), 0 4px 4px rgba(31,31,31,.07), 0 1.5px 3px rgba(31,31,31,.08), 0 0 0 1px #0F0F0F, inset 0 1px 2px rgba(255,255,255,.12); --shadow-frame-a: 0 24px 64px 15px rgba(165,165,165,.26); --shadow-frame-a-sm: 0 7.85px 20.92px 4.9px rgba(165,165,165,.26); --shadow-frame-b: 0 17.58px 46.89px 10.99px rgba(38,38,38,.26); --shadow-frame-b-sm: 0 10.06px 26.84px 6.29px rgba(38,38,38,.26); --shadow-frame-c-sm: 0 7.7px 20.55px 4.82px rgba(165,165,165,.26); --b-confirm-edge: 1px; --o-inert: .5; /* Rhythm — mobile first, raised at the 768px breakpoint */ --gap-section: 110px; } /* ========================================================================== 2. Reset / base ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--c-page); color:var(--c-navy); font-family:var(--font-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{display:block;max-width:100%} p,h1,h2,h3,dl,dd,dt,ul,li,figure{margin:0;padding:0} ul{list-style:none} fieldset{margin:0;padding:0;border:0;min-width:0} legend{padding:0;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} .container{width:min(1216px, 100% - 32px) !important; max-width: 1216px !important; margin-inline:auto} .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ========================================================================== 10. Desktop — 769px and up ========================================================================== */ @media (min-width:769px){ :root{--gap-section:153px} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} } /*------------------------------------------------*/ /*-----------------[HEADER-MENU]------------------*/ /*------------------------------------------------*/ /*------------------------------------------------*/ /*------------------[HOMEPAGE]--------------------*/ /*------------------------------------------------*/ /*------------------------------------------------*/ /*------------------[SUBPAGES]--------------------*/ /*------------------------------------------------*/ /*------------------------------------------------*/ /*-------------------[Footer]---------------------*/ /*------------------------------------------------*/ /*------------------------------------------------*/ /*--------------------[RWD]-----------------------*/ /*------------------------------------------------*/ /*------------------------------------------------*/ /*------------------------------------------------*/ /*------------------------------------------------*/ /*--[ADD TUTORIAL CUSTOMIZATION BELOW THIS LINE]--*/ /*------------------------------------------------*/ /*------------------------------------------------*/ /*------------------------------------------------*/ /* Departure page title (Ubuntu 30px regular, #333) */ h1#departure-heading:not([class]){font-family:'Ubuntu',Helvetica,Arial,Lucida,sans-serif;font-size:30px;line-height:1em;font-weight:400;color:#333;padding-bottom:10px} h1#departure-heading:not([class]) span{line-height:inherit;font-weight:400} /* pa-floating-header: header 4496 floats over content; non-Elementor pages keep space for it */ body{position:relative} body:not(.elementor-page):not(.page-template-perroair-homepage){padding-top:120px} body:not(.elementor-page):not(.page-template-perroair-homepage)::before{content:"";position:absolute;top:0;left:0;right:0;height:120px;background:#F3F3F3;pointer-events:none} @media (max-width:1024px){body:not(.elementor-page):not(.page-template-perroair-homepage){padding-top:106px}body:not(.elementor-page):not(.page-template-perroair-homepage)::before{height:106px}} /* editor-only header backdrop: gray page behind the floating header while editing template 4496 */ body.elementor-editor-active.postid-4496,body.elementor-editor-preview.postid-4496{background:#F3F3F3} /* editor-only: header 4496 sits in normal flow while editing so the burger menu can be clicked and its dropdown has room */ body.elementor-editor-active.postid-4496 .elementor-4496 .elementor-element.elementor-element-c5fc8fb{position:relative!important;top:auto!important;margin-top:22px} body.elementor-editor-active.postid-4496 .elementor-4496{min-height:420px} /* editor-only: at fractional browser zoom the editor's desktop canvas can be 1024.x px wide, where neither nav-menu media query matches; hide the burger in desktop mode */ body.elementor-editor-active[data-elementor-device-mode=desktop] .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle,body.elementor-editor-active[data-elementor-device-mode=desktop] .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown{display:none} /* admin bar on phones (<=600px): WP makes it position:absolute; body{position:relative} would push it below html's 46px margin, so pull it back up */ @media screen and (max-width:600px){body.admin-bar #wpadminbar{top:-46px}} /* fixed floating header (2026-10-14): header 4496 stays fixed on every page; js/pa-header.js adds body.pa-hdr-hidden while scrolling down */ .elementor-4496 .elementor-element.elementor-element-c5fc8fb{position:fixed!important;top:22px;transition:transform .3s ease} body.admin-bar .elementor-4496 .elementor-element.elementor-element-c5fc8fb{top:54px} @media screen and (max-width:782px){body.admin-bar .elementor-4496 .elementor-element.elementor-element-c5fc8fb{top:68px}} @media screen and (max-width:600px){body.admin-bar .elementor-4496 .elementor-element.elementor-element-c5fc8fb{top:22px}} body.pa-hdr-hidden .elementor-4496 .elementor-element.elementor-element-c5fc8fb{transform:translateY(calc(-100% - 80px))}