.elementor-30664 .elementor-element.elementor-element-c76e210{--display:flex;--min-height:660px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--overlay-opacity:0.92;--padding-top:104px;--padding-bottom:104px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-c76e210:not(.elementor-motion-effects-element-type-background), .elementor-30664 .elementor-element.elementor-element-c76e210 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://theothertour.co/wp-content/uploads/2026/09/omer-and-deniz-with-a-group-on-the-galata-bridge.jpg");background-position:custom;background-repeat:no-repeat;background-size:cover;}.elementor-30664 .elementor-element.elementor-element-c76e210::before, .elementor-30664 .elementor-element.elementor-element-c76e210 > .elementor-background-video-container::before, .elementor-30664 .elementor-element.elementor-element-c76e210 > .e-con-inner > .elementor-background-video-container::before, .elementor-30664 .elementor-element.elementor-element-c76e210 > .elementor-background-slideshow::before, .elementor-30664 .elementor-element.elementor-element-c76e210 > .e-con-inner > .elementor-background-slideshow::before, .elementor-30664 .elementor-element.elementor-element-c76e210 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(90deg, #08151F 0%, #08151F4D 100%);}.elementor-30664 .elementor-element.elementor-element-0c11da5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-908123a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-0a8ab72{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:30px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-0a8ab72:not(.elementor-motion-effects-element-type-background), .elementor-30664 .elementor-element.elementor-element-0a8ab72 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F0F9FF;}.elementor-30664 .elementor-element.elementor-element-ac326c7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:80px;--padding-bottom:84px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-ac326c7:not(.elementor-motion-effects-element-type-background), .elementor-30664 .elementor-element.elementor-element-ac326c7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0C4A6E;}.elementor-30664 .elementor-element.elementor-element-5df7cf6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:76px;--padding-bottom:76px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-5eeedea{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:48px 48px;--row-gap:48px;--column-gap:48px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-66022c7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-5d18eed{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-feba9c0 img{border-radius:14px 14px 14px 14px;}.elementor-30664 .elementor-element.elementor-element-69e21d7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:76px;--padding-bottom:76px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-69e21d7:not(.elementor-motion-effects-element-type-background), .elementor-30664 .elementor-element.elementor-element-69e21d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F0F9FF;}.elementor-30664 .elementor-element.elementor-element-88cd6b3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--overlay-opacity:0.92;--padding-top:80px;--padding-bottom:84px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-88cd6b3:not(.elementor-motion-effects-element-type-background), .elementor-30664 .elementor-element.elementor-element-88cd6b3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://theothertour.co/wp-content/uploads/2026/07/Buse-Burcu-Guide-with-Guests.jpg");background-position:custom;background-repeat:no-repeat;background-size:cover;}.elementor-30664 .elementor-element.elementor-element-88cd6b3::before, .elementor-30664 .elementor-element.elementor-element-88cd6b3 > .elementor-background-video-container::before, .elementor-30664 .elementor-element.elementor-element-88cd6b3 > .e-con-inner > .elementor-background-video-container::before, .elementor-30664 .elementor-element.elementor-element-88cd6b3 > .elementor-background-slideshow::before, .elementor-30664 .elementor-element.elementor-element-88cd6b3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-30664 .elementor-element.elementor-element-88cd6b3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(90deg, #08151F 0%, #08151F4D 100%);}.elementor-30664 .elementor-element.elementor-element-a07f8c0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:76px;--padding-bottom:76px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-ccdb399{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:76px;--padding-bottom:76px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-ccdb399:not(.elementor-motion-effects-element-type-background), .elementor-30664 .elementor-element.elementor-element-ccdb399 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F0F9FF;}.elementor-30664 .elementor-element.elementor-element-30faa49{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-0f8c79b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:14px 14px;--row-gap:14px;--column-gap:14px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-ca00998 img{border-radius:14px 14px 14px 14px;}.elementor-30664 .elementor-element.elementor-element-c9b46b5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-39eefcd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:14px 14px;--row-gap:14px;--column-gap:14px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-78356a6 img{border-radius:14px 14px 14px 14px;}.elementor-30664 .elementor-element.elementor-element-2824cc8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-cf42eb0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:14px 14px;--row-gap:14px;--column-gap:14px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-e081e4e img{border-radius:14px 14px 14px 14px;}.elementor-30664 .elementor-element.elementor-element-dd176ed{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-0d7186e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:80px;--padding-bottom:84px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-0d7186e:not(.elementor-motion-effects-element-type-background), .elementor-30664 .elementor-element.elementor-element-0d7186e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0C4A6E;}.elementor-30664 .elementor-element.elementor-element-514628a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:76px;--padding-bottom:76px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-d70a7a6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-d70a7a6:not(.elementor-motion-effects-element-type-background), .elementor-30664 .elementor-element.elementor-element-d70a7a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A2A3D;}.elementor-30664 .elementor-element.elementor-element-15c7ca6{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:48px 48px;--row-gap:48px;--column-gap:48px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-09cecf5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-field-type-html{padding-bottom:0px;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-button[type="submit"]{color:#ffffff;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-30664 .elementor-element.elementor-element-e40ea35 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-30664 .elementor-element.elementor-element-e40ea35{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-30664 .elementor-element.elementor-element-b3f84b7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-e1010da img{width:100%;max-width:100%;height:500px;border-radius:14px 14px 14px 14px;}@media(min-width:768px){.elementor-30664 .elementor-element.elementor-element-0c11da5{--width:760px;}.elementor-30664 .elementor-element.elementor-element-908123a{--width:100%;}.elementor-30664 .elementor-element.elementor-element-66022c7{--width:54%;}.elementor-30664 .elementor-element.elementor-element-5d18eed{--width:46%;}.elementor-30664 .elementor-element.elementor-element-0f8c79b{--width:33%;}.elementor-30664 .elementor-element.elementor-element-c9b46b5{--width:100%;}.elementor-30664 .elementor-element.elementor-element-39eefcd{--width:33%;}.elementor-30664 .elementor-element.elementor-element-2824cc8{--width:100%;}.elementor-30664 .elementor-element.elementor-element-cf42eb0{--width:33%;}.elementor-30664 .elementor-element.elementor-element-dd176ed{--width:100%;}.elementor-30664 .elementor-element.elementor-element-09cecf5{--width:56%;}.elementor-30664 .elementor-element.elementor-element-b3f84b7{--width:44%;}}@media(max-width:767px){.elementor-30664 .elementor-element.elementor-element-c76e210{--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-0c11da5{--width:100%;}.elementor-30664 .elementor-element.elementor-element-0a8ab72{--padding-top:32px;--padding-bottom:32px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-ac326c7{--padding-top:56px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-5df7cf6{--padding-top:52px;--padding-bottom:52px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-5eeedea{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-30664 .elementor-element.elementor-element-66022c7{--width:100%;}.elementor-30664 .elementor-element.elementor-element-5d18eed{--width:100%;}.elementor-30664 .elementor-element.elementor-element-69e21d7{--padding-top:52px;--padding-bottom:52px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-88cd6b3{--padding-top:56px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-a07f8c0{--padding-top:52px;--padding-bottom:52px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-ccdb399{--padding-top:52px;--padding-bottom:52px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-30faa49{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-30664 .elementor-element.elementor-element-0f8c79b{--width:100%;}.elementor-30664 .elementor-element.elementor-element-39eefcd{--width:100%;}.elementor-30664 .elementor-element.elementor-element-cf42eb0{--width:100%;}.elementor-30664 .elementor-element.elementor-element-0d7186e{--padding-top:56px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-514628a{--padding-top:52px;--padding-bottom:52px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-d70a7a6{--padding-top:56px;--padding-bottom:56px;--padding-left:0px;--padding-right:0px;}.elementor-30664 .elementor-element.elementor-element-15c7ca6{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-30664 .elementor-element.elementor-element-09cecf5{--width:100%;}.elementor-30664 .elementor-element.elementor-element-b3f84b7{--width:100%;}}/* Start custom CSS *//* ========================================================================== THE OTHER TOUR — BLOG PAGE CUSTOM CSS -------------------------------------------------------------------------- CONTENTS 00. Fonts 01. Typography 02. Links 03. Editorial components 04. Images & captions 05. FAQ / accordion 06. Slides widget 07. Review cards 08. CTA card — structure 09. CTA card — text 10. CTA card — buttons 11. Light-mode colour locks 12. Dark mode NOTE ON ORDER: sections 11 and 12 both use !important at equal specificity, so source order decides the winner. Dark mode MUST stay last. ========================================================================== */ /* ========================================================================== 00. FONTS ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap'); /* ========================================================================== 01. TYPOGRAPHY ========================================================================== */ /* ---- Body text ---- */ body.elementor-page-30664 .elementor-widget-text-editor { font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 1.7; color: #1f2937; } /* ---- Headings ---- */ body.elementor-page-30664 .elementor-widget-heading h2 { font-family: 'Newsreader', serif; font-weight: 700; font-size: 31px; line-height: 1.2; } body.elementor-page-30664 .elementor-widget-heading h3 { font-family: 'Newsreader', serif; font-weight: 600; font-size: 23px; line-height: 1.3; } /* ---- Section divider accent before each H2 ---- */ body.elementor-page-30664 .elementor-widget-heading h2::before { content: ""; display: block; width: 48px; height: 3px; background: #EA580C; margin-bottom: 16px; border-radius: 2px; } /* ---- Lead paragraph: class "lead" on a Text Editor widget ---- */ body.elementor-page-30664 .lead p:first-of-type { font-size: 20px; line-height: 1.6; font-weight: 400; color: #334155; } /* ---- Drop cap: class "dropcap" on a Text Editor widget ---- */ body.elementor-page-30664 .dropcap p:first-of-type::first-letter { float: left; font-family: 'Newsreader', serif; font-size: 3.4em; line-height: 0.8; font-weight: 700; margin: 0.05em 0.1em 0 0; color: #0C4A6E; } /* ========================================================================== 02. LINKS ========================================================================== */ body.elementor-page-30664 a { transition: color 0.2s ease; } body.elementor-page-30664 a:hover { color: #2b8fc4; text-decoration: underline; } /* ========================================================================== 03. EDITORIAL COMPONENTS ========================================================================== */ /* ---- Pull-quote: class "pullquote" on a Text Editor widget ---- */ body.elementor-page-30664 .pullquote { border-left: 4px solid #EA580C; padding: 8px 0 8px 24px; margin: 24px 0; font-family: 'Newsreader', serif; font-size: 1.4em; font-style: italic; color: #0C4A6E; } /* ---- "Did You Know?" callout: class "didyouknow" on a Text Editor widget ---- */ body.elementor-page-30664 .didyouknow { background: #F0F9FF; border-radius: 12px; padding: 20px 24px; border-left: 4px solid #0EA5E9; font-size: 1.05em; } /* ========================================================================== 04. IMAGES & CAPTIONS ========================================================================== */ /* ---- Uniform framing for in-article images: class "frame" ---- */ body.elementor-page-30664 .frame img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; } /* ---- Captions (set Caption to "Custom Caption" on the image widget) ---- */ body.elementor-page-30664 .elementor-widget-image figcaption, body.elementor-page-30664 .elementor-image-caption { font-family: 'Newsreader', serif; font-style: italic; font-size: 14px; color: #64748b; text-align: center; margin-top: 8px; line-height: 1.4; } /* ========================================================================== 05. FAQ / ACCORDION ========================================================================== */ /* ---- Elementor accordion & toggle ---- */ body.elementor-page-30664 .elementor-accordion .elementor-tab-title, body.elementor-page-30664 .elementor-toggle .elementor-toggle-title { transition: background 0.2s ease, color 0.2s ease; font-family: 'Newsreader', serif; font-weight: 600; } body.elementor-page-30664 .elementor-accordion .elementor-tab-title.elementor-active, body.elementor-page-30664 .elementor-toggle .elementor-tab-title.elementor-active { background: #F0F9FF; color: #0C4A6E; } body.elementor-page-30664 .elementor-accordion .elementor-tab-content, body.elementor-page-30664 .elementor-toggle .elementor-tab-content { font-family: 'Roboto', sans-serif; font-size: 17px; line-height: 1.7; } /* ---- JNews FAQ block — question font ---- */ body.elementor-page-30664 .myra-faq .jeg_faq_title, body.elementor-page-30664 .myra-faq .jeg_faq_question, body.elementor-page-30664 .myra-faq h3, body.elementor-page-30664 .myra-faq a { font-family: 'Newsreader', serif !important; font-weight: 600; } /* ========================================================================== 06. SLIDES WIDGET ========================================================================== */ body.elementor-page-30664 .elementor-slides .elementor-slide-heading { font-family: 'Newsreader', serif; font-weight: 600; font-size: 22px; margin-bottom: 6px; } body.elementor-page-30664 .elementor-slides .elementor-slide-description { font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 1.5; } /* ========================================================================== 07. REVIEW CARDS Wrapper: class "totc-reviews" Card: class "totc-review" ========================================================================== */ body.elementor-page-30664 .totc-reviews { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; justify-content: center; } body.elementor-page-30664 .totc-review { flex: 1 1 260px; max-width: 340px; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid #E2E8F0; border-top: 3px solid #EA580C; border-radius: 14px; padding: 26px 26px 28px; box-shadow: 0 4px 6px rgba(12,74,110,.08); transition: transform .2s ease, box-shadow .2s ease; } body.elementor-page-30664 .totc-review:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(12,74,110,.14); } /* ---- Quote ---- */ body.elementor-page-30664 .totc-quote, body.elementor-page-30664 .totc-quote * { font-size: 15.5px; line-height: 1.65; color: #334155; margin: 0; } body.elementor-page-30664 .totc-quote { position: relative; padding-top: 6px; } body.elementor-page-30664 .totc-quote::before { content: "“"; font-family: 'Newsreader', serif; font-size: 52px; line-height: 0; color: #EA580C; opacity: .22; position: absolute; top: 22px; left: -8px; } /* ---- Attribution ---- */ body.elementor-page-30664 .totc-name { margin-top: auto; } body.elementor-page-30664 .totc-name, body.elementor-page-30664 .totc-name * { font-family: 'Newsreader', serif; font-size: 17px; font-weight: 600; color: #0C4A6E; margin: 0; } body.elementor-page-30664 .totc-role, body.elementor-page-30664 .totc-role * { font-size: 17px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #C2410C; margin: 0; } /* ---- Mobile: swipeable carousel ---- justify-content stays `center` from the base rule, and a centred flex row that OVERFLOWS spills equally off both ends. The left spill sits before scrollLeft 0, so it can never be scrolled back into view: measured 26 Aug 2026 at 390px, the first card began at -109px with scrollLeft already 0. Reset the axis to flex-start here, and snap to `start` so the first card rests flush against the left edge. */ @media (max-width: 767px) { body.elementor-page-30664 .totc-reviews { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 10px; } body.elementor-page-30664 .totc-review { flex: 0 0 82%; max-width: none; scroll-snap-align: start; } } /* ========================================================================== 08. CTA CARD — STRUCTURE Class "tot-cta-card" on the CONTAINER holding the whole card. Class "tot-cta-media" on the image column. ========================================================================== */ .tot-cta-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 6px rgba(12,74,110,.08); transition: transform .2s ease, box-shadow .2s ease; font-family: 'Roboto', sans-serif; margin: 10px 0; } .tot-cta-card:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(12,74,110,.14); } /* ---- Media column ---- */ .tot-cta-media { flex: 0 0 210px; min-height: 200px; align-self: stretch; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 0; } .tot-cta-card .tot-cta-media, .tot-cta-card .tot-cta-media .elementor-widget-container, .tot-cta-card .tot-cta-media figure { margin: 0; height: 100%; } .tot-cta-card .tot-cta-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- Mobile: media goes full width above the text ---- */ @media (max-width: 767px) { .tot-cta-media { flex-basis: auto; width: 100%; min-height: 170px; } } /* ========================================================================== 09. CTA CARD — TEXT ========================================================================== */ /* ---- Eyebrow: class "tot-cta-eyebrow" on a Heading or Text widget ---- */ .tot-cta-eyebrow, .tot-cta-eyebrow .elementor-heading-title, .tot-cta-eyebrow p { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #C2410C; margin: 0; } /* ---- Title: class "tot-cta-title" on a Heading widget ---- */ .tot-cta-title, .tot-cta-title .elementor-heading-title { font-family: 'Newsreader', serif; font-size: 23px; font-weight: 600; line-height: 1.22; color: #0C4A6E; margin: 0; } /* ---- Body: class "tot-cta-text" on a Text Editor widget ---- */ .tot-cta-text, .tot-cta-text p { font-size: 15px; line-height: 1.6; color: #334155; margin: 0; } /* ========================================================================== 10. CTA CARD — BUTTONS Row container -> class "tot-cta-actions" Primary button -> class "tot-cta-btn" Secondary button -> class "tot-cta-btn-alt" ========================================================================== */ /* ---- Button row ---- */ .tot-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } /* ---- Shared geometry: flex centring is what actually centres the label. Elementor's default inline-block dumps the min-height leftover at the bottom, which pushes the text visually high. ---- */ .tot-cta-btn .elementor-button, .tot-cta-btn a.elementor-button, .tot-cta-btn-alt .elementor-button, .tot-cta-btn-alt a.elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none !important; } /* ---- Primary (filled) ---- Colour is forced for the same reason as the secondary button: the theme styles .elementor-button as a link, and its blue wins whenever the widget's own text colour isn't set in Elementor. */ .tot-cta-btn .elementor-button, .tot-cta-btn a.elementor-button { background: #EA580C; color: #fff !important; padding: 12px 22px; border: 2px solid #EA580C; transition: background .2s ease, border-color .2s ease; } .tot-cta-btn .elementor-button .elementor-button-text, .tot-cta-btn .elementor-button .elementor-button-content-wrapper, .tot-cta-btn .elementor-button .elementor-button-icon, .tot-cta-btn .elementor-button i, .tot-cta-btn .elementor-button svg { color: #fff !important; fill: currentColor; } .tot-cta-btn .elementor-button:hover, .tot-cta-btn a.elementor-button:hover { background: #C2410C; border-color: #C2410C; color: #fff !important; } .tot-cta-btn .elementor-button:hover .elementor-button-text, .tot-cta-btn .elementor-button:hover .elementor-button-icon, .tot-cta-btn .elementor-button:hover i, .tot-cta-btn .elementor-button:hover svg { color: #fff !important; } /* ---- Secondary (outline) ---- The !important on colour is required: a button duplicated from the primary one keeps its widget-level "color: #fff" in Elementor's own stylesheet, which would otherwise win and leave the label invisible. The inner span is targeted too, since that's where the label lives. */ .tot-cta-btn-alt .elementor-button, .tot-cta-btn-alt a.elementor-button { background: transparent !important; color: #C2410C !important; padding: 12px 22px; border: 2px solid #EA580C; transition: background .2s ease, color .2s ease, border-color .2s ease; } .tot-cta-btn-alt .elementor-button .elementor-button-text, .tot-cta-btn-alt .elementor-button .elementor-button-content-wrapper, .tot-cta-btn-alt .elementor-button .elementor-button-icon, .tot-cta-btn-alt .elementor-button i, .tot-cta-btn-alt .elementor-button svg { color: #C2410C !important; fill: currentColor; } .tot-cta-btn-alt .elementor-button:hover, .tot-cta-btn-alt a.elementor-button:hover { background: #FFF7ED !important; color: #9A3412 !important; border-color: #C2410C; } .tot-cta-btn-alt .elementor-button:hover .elementor-button-text, .tot-cta-btn-alt .elementor-button:hover .elementor-button-icon, .tot-cta-btn-alt .elementor-button:hover i, .tot-cta-btn-alt .elementor-button:hover svg { color: #9A3412 !important; } /* Navy variant — if you'd rather the outline echo the card title, swap the three secondary values for: #0C4A6E text, #0C4A6E border, #F0F9FF hover. */ /* ---- Mobile: stack full width ---- */ @media (max-width: 480px) { .tot-cta-actions { flex-direction: column; } .tot-cta-actions .elementor-widget-button { width: 100%; } .tot-cta-actions .elementor-button { width: 100%; } } /* ========================================================================== 11. LIGHT-MODE COLOUR LOCKS These beat theme and widget-level colours. Section 12 overrides them by source order, so nothing below this point may be moved above it. ========================================================================== */ .tot-cta-card .tot-cta-eyebrow, .tot-cta-card .tot-cta-eyebrow .elementor-heading-title, .tot-cta-card .tot-cta-eyebrow p { color: #C2410C !important; } .tot-cta-card .tot-cta-title, .tot-cta-card .tot-cta-title .elementor-heading-title { color: #0C4A6E !important; } .tot-cta-card .tot-cta-text, .tot-cta-card .tot-cta-text p { color: #334155 !important; } body.elementor-page-30664 .didyouknow, body.elementor-page-30664 .didyouknow p { color: #1f2937 !important; } /* ========================================================================== 12. DARK MODE Body class: .jnews-dark-mode (JNews theme) ========================================================================== */ /* ---- Pull-quote ---- */ body.elementor-page-30664.jnews-dark-mode .pullquote, body.elementor-page-30664.jnews-dark-mode .elementor-widget-text-editor blockquote { border-left-color: #FB923C; color: #F1F5F9 !important; } /* ---- "Did You Know?" callout ---- */ body.elementor-page-30664.jnews-dark-mode .didyouknow { background: #152B3A !important; border-left-color: #38BDF8; } body.elementor-page-30664.jnews-dark-mode .didyouknow, body.elementor-page-30664.jnews-dark-mode .didyouknow p { color: #CBD5E1 !important; } body.elementor-page-30664.jnews-dark-mode .didyouknow strong { color: #F1F5F9 !important; } body.elementor-page-30664.jnews-dark-mode .didyouknow a, body.elementor-page-30664.jnews-dark-mode .didyouknow a strong { color: #7DD3FC !important; } /* ---- Image captions ---- */ body.elementor-page-30664.jnews-dark-mode .elementor-widget-image figcaption, body.elementor-page-30664.jnews-dark-mode .elementor-image-caption { color: #9FB3C4; } /* ---- FAQ accordion ---- */ body.elementor-page-30664.jnews-dark-mode .elementor-accordion .elementor-tab-title.elementor-active, body.elementor-page-30664.jnews-dark-mode .elementor-toggle .elementor-tab-title.elementor-active { background: #10344A; color: #F1F5F9 !important; } body.elementor-page-30664.jnews-dark-mode .elementor-accordion .elementor-tab-content, body.elementor-page-30664.jnews-dark-mode .elementor-toggle .elementor-tab-content { color: #DDE5EC !important; } /* ---- Review cards ---- */ body.elementor-page-30664.jnews-dark-mode .totc-review { background: #0F2A3D !important; border-color: rgba(255,255,255,.14); border-top-color: #FB923C; box-shadow: 0 4px 6px rgba(0,0,0,.40); } body.elementor-page-30664.jnews-dark-mode .totc-review:hover { box-shadow: 0 12px 22px rgba(0,0,0,.55); } body.elementor-page-30664.jnews-dark-mode .totc-quote, body.elementor-page-30664.jnews-dark-mode .totc-quote * { color: #CBD5E1 !important; } body.elementor-page-30664.jnews-dark-mode .totc-quote::before { color: #FB923C; } body.elementor-page-30664.jnews-dark-mode .totc-name, body.elementor-page-30664.jnews-dark-mode .totc-name * { color: #F1F5F9 !important; } body.elementor-page-30664.jnews-dark-mode .totc-role, body.elementor-page-30664.jnews-dark-mode .totc-role * { color: #FB923C !important; } /* ---- CTA card — structure ---- */ .jnews-dark-mode .tot-cta-card { background: #1B2733 !important; border-color: rgba(255,255,255,.10); box-shadow: none; } .jnews-dark-mode .tot-cta-card:hover { border-color: rgba(255,255,255,.18); box-shadow: 0 10px 24px rgba(0,0,0,.45); } .jnews-dark-mode .tot-cta-media { background-color: #22323F; } /* ---- CTA card — text ---- */ .jnews-dark-mode .tot-cta-eyebrow, .jnews-dark-mode .tot-cta-eyebrow .elementor-heading-title, .jnews-dark-mode .tot-cta-eyebrow p { color: #FB923C !important; } .jnews-dark-mode .tot-cta-title, .jnews-dark-mode .tot-cta-title .elementor-heading-title { color: #F1F5F9 !important; } .jnews-dark-mode .tot-cta-text, .jnews-dark-mode .tot-cta-text p { color: #CBD5E1 !important; } /* ---- CTA card — primary button ---- */ .jnews-dark-mode .tot-cta-btn .elementor-button:hover, .jnews-dark-mode .tot-cta-btn a.elementor-button:hover { background: #F97316; border-color: #F97316; color: #fff !important; } .jnews-dark-mode .tot-cta-btn .elementor-button:hover .elementor-button-text, .jnews-dark-mode .tot-cta-btn .elementor-button:hover .elementor-button-icon, .jnews-dark-mode .tot-cta-btn .elementor-button:hover i, .jnews-dark-mode .tot-cta-btn .elementor-button:hover svg { color: #fff !important; } /* ---- CTA card — secondary button ---- */ .jnews-dark-mode .tot-cta-btn-alt .elementor-button, .jnews-dark-mode .tot-cta-btn-alt a.elementor-button { background: transparent !important; color: #FDBA74 !important; border-color: rgba(251,146,60,.55); } .jnews-dark-mode .tot-cta-btn-alt .elementor-button .elementor-button-text, .jnews-dark-mode .tot-cta-btn-alt .elementor-button .elementor-button-icon, .jnews-dark-mode .tot-cta-btn-alt .elementor-button i, .jnews-dark-mode .tot-cta-btn-alt .elementor-button svg { color: #FDBA74 !important; } .jnews-dark-mode .tot-cta-btn-alt .elementor-button:hover, .jnews-dark-mode .tot-cta-btn-alt a.elementor-button:hover { background: rgba(249,115,22,.14) !important; color: #FED7AA !important; border-color: #FB923C; } .jnews-dark-mode .tot-cta-btn-alt .elementor-button:hover .elementor-button-text, .jnews-dark-mode .tot-cta-btn-alt .elementor-button:hover .elementor-button-icon, .jnews-dark-mode .tot-cta-btn-alt .elementor-button:hover i, .jnews-dark-mode .tot-cta-btn-alt .elementor-button:hover svg { color: #FED7AA !important; } /* ========================================================================== 13. PAGE ADDITIONS — services/guide v4 gateway (6 Sep 2026) Same additions block as the private-guides landing, with this page's media crops (landscape scenes, 4:3) and a pull-quote blockquote reset. ========================================================================== */ body.elementor-page-30664 .elementor-widget-heading h1 { font-family: 'Newsreader', serif; font-weight: 700; font-size: 46px; line-height: 1.08; letter-spacing: -0.01em; color: #0C4A6E; text-wrap: balance; margin: 0; } @media (max-width: 767px) { body.elementor-page-30664 .elementor-widget-heading h1 { font-size: 32px; } } body.elementor-page-30664 .elementor-widget-heading h2, body.elementor-page-30664 .elementor-widget-heading h3 { color: #0C4A6E; } /* ---- Rhythm: the flex gap is the single source of spacing between blocks ---- */ body.elementor-page-30664 .elementor-widget-text-editor p:last-child, body.elementor-page-30664 .elementor-widget-text-editor ul:last-child { margin-bottom: 0; } body.elementor-page-30664 .pullquote { margin: 0; } body.elementor-page-30664 .tot-cta-card { margin: 0; } body.elementor-page-30664 .elementor-widget-text-editor a, body.elementor-page-30664 .elementor-tab-content a { color: #6EC1E4; } body.elementor-page-30664 .elementor-widget-text-editor a:hover, body.elementor-page-30664 .elementor-tab-content a:hover { color: #2b8fc4; } body.elementor-page-30664 .elementor-widget-text-editor ul, body.elementor-page-30664 .elementor-tab-content ul { list-style: square; padding-left: 1.4em; margin: 0 0 1em; } body.elementor-page-30664 .elementor-widget-text-editor li, body.elementor-page-30664 .elementor-tab-content li { margin: 0 0 6px; } body.elementor-page-30664 .didyouknow, body.elementor-page-30664 .didyouknow p, body.elementor-page-30664 .didyouknow li { font-size: 17px; line-height: 1.6; } body.elementor-page-30664 .elementor-accordion .elementor-accordion-title { font-family: 'Newsreader', serif; font-weight: 600; font-size: 21px; line-height: 1.3; } body.elementor-page-30664 .elementor-accordion .elementor-tab-content, body.elementor-page-30664 .elementor-accordion .elementor-tab-content p { font-family: 'Roboto', sans-serif; font-size: 17px; line-height: 1.7; color: #1f2937; } body.elementor-page-30664 .tot-hero-media img, body.elementor-page-30664 .tot-guide-media img { width: 100%; object-fit: cover; border-radius: 14px; display: block; } body.elementor-page-30664 .tot-hero-media img { aspect-ratio: 1 / 1; } body.elementor-page-30664 .tot-guide-media img { aspect-ratio: 4 / 3; } /* desktop: the photo fills its column's full height beside the text */ @media (min-width: 768px) { body.elementor-page-30664 .tot-hero-media, body.elementor-page-30664 .tot-guide-media, body.elementor-page-30664 .tot-hero-media .elementor-widget-container, body.elementor-page-30664 .tot-guide-media .elementor-widget-container { height: 100%; } body.elementor-page-30664 .tot-hero-media img, body.elementor-page-30664 .tot-guide-media img { aspect-ratio: auto; height: 100%; } } @media (max-width: 767px) { body.elementor-page-30664 .tot-guide-media img { aspect-ratio: 3 / 2; } } body.elementor-page-30664 .tot-trust { background: #F0F9FF; border-radius: 12px; padding: 14px 22px; } body.elementor-page-30664 .tot-trust, body.elementor-page-30664 .tot-trust p { font-size: 15px; line-height: 1.6; color: #334155; text-align: center; margin: 0; } body.elementor-page-30664 .tot-trust strong { color: #0C4A6E; } body.elementor-page-30664 .tot-trust a, body.elementor-page-30664 .tot-trust a strong { color: #C2410C; } /* pull-quote written as a real
for machine readability; neutralise any theme/editor blockquote chrome inside it */ body.elementor-page-30664 .pullquote blockquote { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; } body.elementor-page-30664 .tot-quote-by, body.elementor-page-30664 .tot-quote-by p { font-size: 14px; line-height: 1.5; color: #64748b; margin: -6px 0 0 28px; } .tot-cta-card .totc-body { padding: 22px 26px; } .tot-form-lede, .tot-form-lede .elementor-heading-title { font-family: 'Newsreader', serif; font-size: 22px; font-weight: 600; line-height: 1.3; color: #0C4A6E; margin: 0 0 4px; } body.elementor-page-30664 .tot-book .elementor-field-group label { font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; color: #334155; } body.elementor-page-30664 .tot-book .elementor-button[type="submit"] { min-height: 46px; } @media (prefers-reduced-motion: reduce) { .tot-cta-card, body.elementor-page-30664 .totc-review, body.elementor-page-30664 a { transition: none; } .tot-cta-card:hover { transform: none; } } /* ========================================================================== 14. DARK MODE — page additions ========================================================================== */ body.elementor-page-30664.jnews-dark-mode .elementor-widget-heading h1 { color: #F1F5F9; } body.elementor-page-30664.jnews-dark-mode .elementor-widget-heading h2, body.elementor-page-30664.jnews-dark-mode .elementor-widget-heading h3 { color: #F1F5F9; } body.elementor-page-30664.jnews-dark-mode .tot-trust { background: #152B3A; } body.elementor-page-30664.jnews-dark-mode .tot-trust, body.elementor-page-30664.jnews-dark-mode .tot-trust p { color: #CBD5E1 !important; } body.elementor-page-30664.jnews-dark-mode .tot-trust strong { color: #F1F5F9; } body.elementor-page-30664.jnews-dark-mode .tot-trust a, body.elementor-page-30664.jnews-dark-mode .tot-trust a strong { color: #FDBA74 !important; } body.elementor-page-30664.jnews-dark-mode .tot-quote-by, body.elementor-page-30664.jnews-dark-mode .tot-quote-by p { color: #9FB3C4; } .jnews-dark-mode .tot-form-lede, .jnews-dark-mode .tot-form-lede .elementor-heading-title { color: #F1F5F9 !important; } body.elementor-page-30664.jnews-dark-mode .tot-book { background-color: #0F2A3D !important; } body.elementor-page-30664.jnews-dark-mode .tot-book .elementor-field-group label { color: #CBD5E1; } /* ========================================================================== 15. FULL-BLEED VARIANT BANDS (explicit colours; identical in both themes) ========================================================================== */ body.elementor-page-30664 .tot-hero-full .elementor-widget-heading h1 { color: #FFFFFF; font-size: 54px; } @media (max-width: 767px) { body.elementor-page-30664 .tot-hero-full .elementor-widget-heading h1 { font-size: 34px; } } body.elementor-page-30664 .tot-hero-full .lead p:first-of-type { color: #E2E8F0; } body.elementor-page-30664 .tot-band-dark .elementor-widget-heading h2, body.elementor-page-30664 .tot-band-dark .elementor-widget-heading h3 { color: #F1F5F9; } body.elementor-page-30664 .tot-band-dark .elementor-widget-text-editor, body.elementor-page-30664 .tot-band-dark .elementor-widget-text-editor p, body.elementor-page-30664 .tot-band-dark .elementor-widget-text-editor li { color: #CBD5E1; } body.elementor-page-30664 .tot-band-dark .elementor-widget-text-editor strong { color: #F1F5F9; } body.elementor-page-30664 .tot-band-dark .elementor-widget-text-editor a, body.elementor-page-30664 .tot-band-dark .elementor-widget-text-editor a strong { color: #7DD3FC; } body.elementor-page-30664 .tot-band-dark .elementor-widget-text-editor a:hover, body.elementor-page-30664 .tot-band-dark .elementor-widget-text-editor a:hover strong { color: #BAE6FD; } body.elementor-page-30664 .tot-band-dark .pullquote, body.elementor-page-30664 .tot-band-dark .pullquote blockquote, body.elementor-page-30664 .tot-band-dark .pullquote p { color: #F1F5F9; } body.elementor-page-30664 .tot-band-dark .pullquote { border-left-color: #FB923C; } body.elementor-page-30664 .tot-band-dark .tot-quote-by, body.elementor-page-30664 .tot-band-dark .tot-quote-by p, body.elementor-page-30664 .tot-band-dark .tot-quote-by em { color: #9FB3C4; } body.elementor-page-30664 .tot-band-dark .tot-cta-btn-alt .elementor-button, body.elementor-page-30664 .tot-band-dark .tot-cta-btn-alt a.elementor-button { color: #FDBA74 !important; border-color: rgba(251, 146, 60, .55); } body.elementor-page-30664 .tot-band-dark .tot-cta-btn-alt .elementor-button .elementor-button-text, body.elementor-page-30664 .tot-band-dark .tot-cta-btn-alt .elementor-button .elementor-button-content-wrapper { color: #FDBA74 !important; } body.elementor-page-30664 .tot-band-dark .tot-cta-btn-alt .elementor-button:hover, body.elementor-page-30664 .tot-band-dark .tot-cta-btn-alt a.elementor-button:hover { background: rgba(249, 115, 22, .14) !important; color: #FED7AA !important; border-color: #FB923C; } body.elementor-page-30664 .tot-band-dark .tot-cta-btn-alt .elementor-button:hover .elementor-button-text { color: #FED7AA !important; } body.elementor-page-30664 .tot-band-dark .tot-form-lede, body.elementor-page-30664 .tot-band-dark .tot-form-lede .elementor-heading-title { color: #F1F5F9; } body.elementor-page-30664 .tot-band-dark .elementor-field-group label { color: #CBD5E1; } body.elementor-page-30664 .tot-band-tint .tot-trust { background: transparent; padding: 6px 0; } body.elementor-page-30664 .tot-band-tint .didyouknow { background: #FFFFFF; } /* ========================================================================== 15b. REVIEW CARD SOURCE LINKS (pinned over the kit's link colour) ========================================================================== */ body.elementor-page-30664 .totc-role a, body.elementor-page-30664 .totc-role a:visited { color: #C2410C !important; text-decoration: none; } body.elementor-page-30664 .totc-role a:hover { color: #9A3412 !important; text-decoration: underline; } /* ========================================================================== 15c. HOUSE COMPONENTS - icon trust bar, labelled icon row, comparison table ========================================================================== */ /* Trust bar: one icon per fact, wraps on small screens */ body.elementor-page-30664 .tot-trustbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; } body.elementor-page-30664 .tot-trustfact { display: flex; align-items: center; gap: 10px; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 500; color: #0C4A6E; } body.elementor-page-30664 .tot-trustfact strong { font-weight: 700; } body.elementor-page-30664 .tot-trust-ico { width: 34px; height: 34px; flex: none; } /* Labelled icon row */ body.elementor-page-30664 .tot-kindsrow { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 2px 0 4px; } body.elementor-page-30664 .tot-kind { display: flex; align-items: center; gap: 10px; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 600; color: #0C4A6E; } body.elementor-page-30664 .tot-kind-ico { width: 34px; height: 34px; flex: none; } /* Comparison table */ body.elementor-page-30664 .tot-table-wrap { overflow-x: auto; margin: 6px 0 2px; } body.elementor-page-30664 .tot-table { width: 100%; border-collapse: collapse; font-size: 16.5px; min-width: 520px; } body.elementor-page-30664 .tot-table th { text-align: left; font-family: 'Newsreader', Georgia, serif; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: #0C4A6E; border-bottom: 2px solid #EA580C; padding: 10px 14px 8px 0; } body.elementor-page-30664 .tot-table td { padding: 11px 14px 11px 0; border-bottom: 1px solid #E2E8F0; color: #334155; vertical-align: top; } body.elementor-page-30664 .tot-table tr:last-child td { border-bottom: none; } body.elementor-page-30664 .tot-table td strong { color: #0C4A6E; } /* ========================================================================== 19. V4 GATEWAY (value lattice, routing rail, full-bleed folds) ========================================================================== */ /* --- the fold: every band owns its ground, so the page reads as a sequence of rooms rather than a scroll of prose. Width is handled by the container; this only owns the inner alignment to the 1140 frame. --------------------------- */ body.elementor-page-30664 .tot-fold-pad { padding-left: max(20px, calc((100vw - 1140px) / 2)); padding-right: max(20px, calc((100vw - 1140px) / 2)); } @media (max-width: 767px) { body.elementor-page-30664 .tot-fold-pad { padding-left: 16px !important; padding-right: 16px !important; } } /* --- value lattice --------------------------------------------------------- NOT a card grid. One continuous field cut by hairline rules, so six values read as one argument instead of six boxes. 🔴 Fixed 3 columns, not auto-fit: auto-fit at minmax(260px) resolved to FOUR on a 1140 frame, which left a six-item lattice with two filled cells and two holes on its second row. A lattice's column count has to divide its item count. */ body.elementor-page-30664 .tot-lattice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.18); border-left: 1px solid rgba(255,255,255,.18); margin: 6px 0 0; } @media (max-width: 999px) { body.elementor-page-30664 .tot-lattice { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { body.elementor-page-30664 .tot-lattice { grid-template-columns: 1fr; } } body.elementor-page-30664 .tot-lattice > div { border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); padding: 30px 28px 32px; min-width: 0; } /* The icon is a MASK, not a filtered PNG: a filter chain that tries to reach amber from navy is guesswork and measured as a washed grey. A mask paints the exact token colour, and it is the same PNG either way. */ body.elementor-page-30664 .tot-lattice .tot-ico { display: block; width: 44px; height: 44px; margin: 0 0 18px; background-color: #FDBA74; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } body.elementor-page-30664 .tot-lattice h4 { font-family: 'Newsreader', Georgia, serif; font-size: 21px; line-height: 1.25; font-weight: 600; color: #FFFFFF; margin: 0 0 9px; text-wrap: balance; } body.elementor-page-30664 .tot-lattice p { font-family: 'Roboto', system-ui, sans-serif; font-size: 16px; line-height: 1.62; color: #CBD5E1; margin: 0; max-width: 42ch; text-wrap: pretty; } /* --- routing rail ---------------------------------------------------------- The doors. A destination, a reason, a whole-tile hit area. */ body.elementor-page-30664 .tot-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 8px 0 0; } body.elementor-page-30664 .tot-route { display: block; padding: 22px 24px 24px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.20); border-radius: 14px; text-decoration: none !important; /* 180ms, strong ease-out: a hover is seen tens of times a day, so it has to feel instant. 280ms read as the tile lagging the cursor. */ transition: background-color 180ms cubic-bezier(.23,1,.32,1), border-color 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1); } /* hover only where a hover exists: touch fires it on tap and leaves the tile raised */ @media (hover: hover) and (pointer: fine) { body.elementor-page-30664 .tot-route:hover { background: rgba(255,255,255,.11); border-color: rgba(253,186,116,.75); transform: translateY(-2px); } } body.elementor-page-30664 .tot-route:focus-visible { background: rgba(255,255,255,.11); border-color: rgba(253,186,116,.75); outline: 2px solid #FDBA74; outline-offset: 2px; } /* press feedback: the interface heard the tap */ body.elementor-page-30664 .tot-route:active { transform: scale(.985); transition-duration: 120ms; } body.elementor-page-30664 .tot-route span.r-t { display: block; font-family: 'Newsreader', Georgia, serif; font-size: 19px; font-weight: 600; line-height: 1.3; color: #FFFFFF !important; margin: 0 0 6px; } body.elementor-page-30664 .tot-route span.r-d { display: block; font-family: 'Roboto', system-ui, sans-serif; font-size: 15px; line-height: 1.55; color: #CBD5E1 !important; margin: 0; } /* 🔴 A LITERAL arrow glyph, never the CSS escape. `update_post_meta` unslashes what it stores, so `content: "\2192"` loses its backslash on the way into _elementor_page_settings and the tile prints the digits 2192. Measured on tot-test-2, 6 Sep. Same class of bug the house CSS hit with its curly quotes. */ /* The space before the arrow is a LITERAL no-break space (U+00A0), so the arrow can never wrap onto a line of its own. An orphaned arrow under a two-line title read as a bug on three of the eight tiles. */ body.elementor-page-30664 .tot-route span.r-t::after { content: " →"; color: #FDBA74; font-weight: 400; } @media (prefers-reduced-motion: reduce) { body.elementor-page-30664 .tot-route { transition: background-color .01ms linear; } body.elementor-page-30664 .tot-route:hover, body.elementor-page-30664 .tot-route:focus-visible { transform: none; } } /* --- face row: three guides as a row of portraits, nav-paced ---------------- 🔴 A FIXED height, not height:100%. The roster's photographs are a mix of portrait and landscape, so height:100% let each one keep its own aspect and the tallest pushed its whole column out of line with the other two. A face row is a row. */ body.elementor-page-30664 .tot-face-media img { width: 100%; height: 360px; object-fit: cover; object-position: center 26%; } @media (max-width: 767px) { body.elementor-page-30664 .tot-face-media img { height: 280px; } } /* Each face column is a flex column; pushing the actions row to the bottom lines the three buttons up even when the credential lines run 2, 3 and 4 lines. */ body.elementor-page-30664 .tot-face { display: flex; flex-direction: column; } body.elementor-page-30664 .tot-face > .e-con-inner, body.elementor-page-30664 .tot-face .tot-cta-actions { margin-top: auto; } /* --- step strip: a REAL sequence, so the numerals are earned --------------- Four light tiles on a photo fold: a different family from the navy route rail, the navy lattice and the white/tint splits, so the page keeps changing shape. */ body.elementor-page-30664 .tot-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 10px 0 0; } @media (max-width: 999px) { body.elementor-page-30664 .tot-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { body.elementor-page-30664 .tot-steps { grid-template-columns: 1fr; } } body.elementor-page-30664 .tot-step { background: rgba(255,255,255,.94); border-radius: 14px; padding: 22px 22px 24px; min-width: 0; } body.elementor-page-30664 .tot-step b { display: block; font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 30px; line-height: 1; color: #EA580C; margin: 0 0 12px; } body.elementor-page-30664 .tot-step h4 { font-family: 'Newsreader', Georgia, serif; font-size: 20px; line-height: 1.25; font-weight: 600; color: #0C4A6E !important; margin: 0 0 8px; text-wrap: balance; } body.elementor-page-30664 .tot-step p { font-family: 'Roboto', system-ui, sans-serif; font-size: 15.5px; line-height: 1.58; color: #334155 !important; margin: 0; } /* --- shape list: the six things that decide a quote, scannable, no paragraph ------- */ body.elementor-page-30664 .tot-shape { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin: 6px 0 0; } @media (max-width: 767px) { body.elementor-page-30664 .tot-shape { grid-template-columns: 1fr; } } body.elementor-page-30664 .tot-shape div { border-top: 1px solid #E2E8F0; padding: 16px 0 18px; min-width: 0; } body.elementor-page-30664 .tot-shape h4 { font-family: 'Newsreader', Georgia, serif; font-size: 20px; line-height: 1.25; font-weight: 600; color: #0C4A6E; margin: 0 0 6px; } body.elementor-page-30664 .tot-shape p { font-family: 'Roboto', system-ui, sans-serif; font-size: 16px; line-height: 1.58; color: #334155; margin: 0; } /* --- press feedback on every house button: the house CSS transitions hover but has no :active, so a tap gave nothing back. 120ms, scale only. ------------------------- */ body.elementor-page-30664 .tot-cta-btn .elementor-button, body.elementor-page-30664 .tot-cta-btn-alt .elementor-button, body.elementor-page-30664 .elementor-button[type="submit"] { transition: transform 120ms cubic-bezier(.23,1,.32,1), background-color .2s ease, color .2s ease, border-color .2s ease; } body.elementor-page-30664 .tot-cta-btn .elementor-button:active, body.elementor-page-30664 .tot-cta-btn-alt .elementor-button:active, body.elementor-page-30664 .elementor-button[type="submit"]:active { transform: scale(.97); } @media (prefers-reduced-motion: reduce) { body.elementor-page-30664 .tot-cta-btn .elementor-button:active, body.elementor-page-30664 .tot-cta-btn-alt .elementor-button:active, body.elementor-page-30664 .elementor-button[type="submit"]:active, body.elementor-page-30664 .tot-route:active { transform: none; } } /* --- comparison table on a phone ------------------------------------------- Three prose columns do not fit 390px; the house .tot-table-wrap falls back to a horizontal scroll, which on a nav page reads as a cut-off column (measured: the "Group tour" column clipped at the viewport edge). Under 600px each row becomes a block: the label full width, the two values side by side with their column name restated as a literal-text ::before, so nothing depends on the hidden header. */ @media (max-width: 599px) { body.elementor-page-30664 .tot-table-wrap { overflow: visible; } /* the house component sets a min-width so the columns never crush; on a phone the columns no longer exist, so the floor goes with them */ body.elementor-page-30664 .tot-table, body.elementor-page-30664 .tot-table tbody { display: block; width: 100%; min-width: 0 !important; } body.elementor-page-30664 .tot-table thead { display: none; } body.elementor-page-30664 .tot-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 12px 0 14px; border-bottom: 1px solid #E2E8F0; } body.elementor-page-30664 .tot-table tr:last-child { border-bottom: none; } body.elementor-page-30664 .tot-table td { display: block; border: none !important; padding: 0 !important; } body.elementor-page-30664 .tot-table td:first-child { grid-column: 1 / -1; padding-bottom: 2px !important; } body.elementor-page-30664 .tot-table td:nth-child(2)::before, body.elementor-page-30664 .tot-table td:nth-child(3)::before { display: block; font: 600 11px/1.4 'Roboto', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #64748B; margin: 0 0 2px; } body.elementor-page-30664 .tot-table td:nth-child(2)::before { content: "Private day"; } body.elementor-page-30664 .tot-table td:nth-child(3)::before { content: "Group tour"; } } /* --- ordered lists --------------------------------------------------------- Elementor Full Width has no .entry-content, so the theme's OL styling never arrives and a numbered sequence renders with no numbers at all. */ body.elementor-page-30664 .elementor-widget-text-editor ol { list-style: decimal; padding-left: 24px; margin: 0 0 16px; } body.elementor-page-30664 .elementor-widget-text-editor ol > li { margin: 0 0 13px; padding-left: 4px; } body.elementor-page-30664 .elementor-widget-text-editor ol > li::marker { color: #EA580C; font-weight: 700; } body.elementor-page-30664 .tot-fold-dark .elementor-widget-text-editor ol > li::marker { color: #FDBA74; } /* --- kit pins: values measured on LIVE, because the tot-test-2 kit is empty and paints both of these green. Reference pages /private-istanbul-tour-guides/ and /services/culinary-tours/, 6 Sep. ------------------------------------------ */ body.elementor-page-30664 .elementor-accordion .elementor-accordion-title, body.elementor-page-30664 a.elementor-accordion-title { color: #0C4A6E !important; font-family: 'Newsreader', Georgia, serif !important; font-size: 21px !important; } body.elementor-page-30664 .elementor-button[type="submit"] { background-color: #EA580C !important; color: #ffffff !important; border-radius: 8px !important; } /* --- oversized fold heading, one per fold ---------------------------------- */ body.elementor-page-30664 .tot-fold h2.elementor-heading-title, body.elementor-page-30664 .tot-fold .elementor-widget-heading h2 { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.14; letter-spacing: -0.015em; text-wrap: balance; } body.elementor-page-30664 .tot-fold-dark h2.elementor-heading-title, body.elementor-page-30664 .tot-fold-dark .elementor-widget-heading h2, body.elementor-page-30664 .tot-fold-dark .elementor-widget-heading h3 { color: #FFFFFF !important; } body.elementor-page-30664 .tot-fold-dark .elementor-widget-text-editor, body.elementor-page-30664 .tot-fold-dark .elementor-widget-text-editor p, body.elementor-page-30664 .tot-fold-dark .elementor-widget-text-editor li { color: #CBD5E1; } body.elementor-page-30664 .tot-fold-dark .elementor-widget-text-editor a, body.elementor-page-30664 .tot-fold-dark .elementor-widget-text-editor a strong { color: #7DD3FC; } /* hero: the photograph is the design, so the type sits on it rather than beside it */ body.elementor-page-30664 .tot-fold-hero h1.elementor-heading-title, body.elementor-page-30664 .tot-fold-hero h1 { color: #FFFFFF !important; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; } body.elementor-page-30664 .tot-fold-hero .elementor-widget-text-editor, body.elementor-page-30664 .tot-fold-hero .elementor-widget-text-editor p { color: #E2E8F0; font-size: 19px; line-height: 1.62; max-width: 56ch; } /* ========================================================================== 16. DARK MODE - full-bleed bands Bands carry an explicit background from the Elementor container, which does not follow the theme, so they are flipped here. Must stay the LAST section. ========================================================================== */ body.elementor-page-30664.jnews-dark-mode .tot-band-tint { background-color: #10344A !important; } body.elementor-page-30664.jnews-dark-mode .tot-band-tint .elementor-widget-heading h2, body.elementor-page-30664.jnews-dark-mode .tot-band-tint .elementor-widget-heading h3 { color: #F1F5F9 !important; } body.elementor-page-30664.jnews-dark-mode .tot-band-tint .elementor-widget-text-editor, body.elementor-page-30664.jnews-dark-mode .tot-band-tint .elementor-widget-text-editor p, body.elementor-page-30664.jnews-dark-mode .tot-band-tint .elementor-widget-text-editor li { color: #CBD5E1 !important; } body.elementor-page-30664.jnews-dark-mode .tot-band-tint .elementor-widget-text-editor strong { color: #F1F5F9 !important; } body.elementor-page-30664.jnews-dark-mode .tot-band-tint .elementor-widget-text-editor a, body.elementor-page-30664.jnews-dark-mode .tot-band-tint .elementor-widget-text-editor a strong { color: #7DD3FC !important; } body.elementor-page-30664.jnews-dark-mode .tot-band-tint .didyouknow { background: #152B3A !important; border-left-color: #38BDF8 !important; } /* The trust strip paints its own pale panel (.tot-trust{background:#F0F9FF}), separate from the band behind it. Inside a band it stays transparent as it does in light mode; standing on its own (the private-guides layout) it needs repainting. */ body.elementor-page-30664.jnews-dark-mode .tot-trust { background: #152B3A !important; } body.elementor-page-30664.jnews-dark-mode .tot-band-tint .tot-trust, body.elementor-page-30664.jnews-dark-mode .tot-band-dark .tot-trust { background: transparent !important; } body.elementor-page-30664.jnews-dark-mode .tot-band-tint .tot-trust, body.elementor-page-30664.jnews-dark-mode .tot-band-tint .tot-trust p { color: #CBD5E1 !important; } body.elementor-page-30664.jnews-dark-mode .tot-band-tint .tot-trust strong { color: #F1F5F9 !important; } body.elementor-page-30664.jnews-dark-mode .tot-band-tint .tot-trust a, body.elementor-page-30664.jnews-dark-mode .tot-band-tint .tot-trust a strong { color: #FDBA74 !important; } /* ---- Review cards: readable on both the page ground and a flipped band ---- */ body.elementor-page-30664.jnews-dark-mode .totc-review { background: #0F2A3D !important; border-color: rgba(255,255,255,.16) !important; border-top-color: #FB923C !important; } body.elementor-page-30664.jnews-dark-mode .tot-band-tint .totc-review { background: #0C2637 !important; } body.elementor-page-30664.jnews-dark-mode .totc-quote, body.elementor-page-30664.jnews-dark-mode .totc-quote p, body.elementor-page-30664.jnews-dark-mode .totc-quote * { color: #CBD5E1 !important; } body.elementor-page-30664.jnews-dark-mode .totc-name, body.elementor-page-30664.jnews-dark-mode .totc-name * { color: #F1F5F9 !important; } body.elementor-page-30664.jnews-dark-mode .totc-role a, body.elementor-page-30664.jnews-dark-mode .totc-role * { color: #FDBA74 !important; } /* ---- Accordion: its white panels come from widget settings, not from CSS ---- */ body.elementor-page-30664.jnews-dark-mode .elementor-accordion .elementor-tab-title, body.elementor-page-30664.jnews-dark-mode .elementor-accordion .elementor-tab-content { background-color: #0F2A3D !important; border-color: rgba(255,255,255,.14) !important; } body.elementor-page-30664.jnews-dark-mode .elementor-accordion .elementor-tab-title, body.elementor-page-30664.jnews-dark-mode .elementor-accordion .elementor-tab-title a, body.elementor-page-30664.jnews-dark-mode .elementor-accordion a.elementor-accordion-title { color: #F1F5F9 !important; } body.elementor-page-30664.jnews-dark-mode .elementor-accordion .elementor-tab-content, body.elementor-page-30664.jnews-dark-mode .elementor-accordion .elementor-tab-content p { color: #DDE5EC !important; } body.elementor-page-30664.jnews-dark-mode .elementor-accordion .elementor-tab-content a { color: #7DD3FC !important; } /* ---- CTA card sitting on a flipped band ---- */ body.elementor-page-30664.jnews-dark-mode .tot-cta-card { background: #12293A !important; border-color: rgba(255,255,255,.12) !important; } /* ---- In-body links on the plain (theme-darkened) ground ---- */ body.elementor-page-30664.jnews-dark-mode .elementor-widget-text-editor a, body.elementor-page-30664.jnews-dark-mode .elementor-widget-text-editor a strong { color: #7DD3FC !important; } body.elementor-page-30664.jnews-dark-mode .elementor-widget-text-editor a:hover, body.elementor-page-30664.jnews-dark-mode .elementor-widget-text-editor a:hover strong { color: #BAE6FD !important; } /* ---- The navy bands and the photo hero are already dark in both themes and are deliberately NOT flipped here: section 14 deepens .tot-book, and touching background-color on .tot-band-dark would wipe the hero's photo. ---- */ /* ---- 15c components in dark mode ---- */ body.elementor-page-30664.jnews-dark-mode .tot-trustfact, body.elementor-page-30664.jnews-dark-mode .tot-kind { color: #CBD5E1 !important; } body.elementor-page-30664.jnews-dark-mode .tot-trustfact strong { color: #F1F5F9 !important; } body.elementor-page-30664.jnews-dark-mode .tot-trust-ico, body.elementor-page-30664.jnews-dark-mode .tot-kind-ico { filter: brightness(0) invert(1); opacity: .88; } body.elementor-page-30664.jnews-dark-mode .tot-table th { color: #F1F5F9 !important; border-bottom-color: #FB923C !important; } body.elementor-page-30664.jnews-dark-mode .tot-table td { color: #CBD5E1 !important; border-bottom-color: rgba(255,255,255,.14) !important; } body.elementor-page-30664.jnews-dark-mode .tot-table td strong { color: #F1F5F9 !important; } /* A linked cell must still read as a link once the row goes near-white */ body.elementor-page-30664.jnews-dark-mode .tot-table td a, body.elementor-page-30664.jnews-dark-mode .tot-table td a strong { color: #7DD3FC !important; } /* --- 19d. v4 gateway, dark mode ------------------------------------------- The lattice and the rail paint their own dark ground from the container, so they are already correct; what needs restating is anything the shared dark block or a light-mode lock would otherwise flip back. */ body.elementor-page-30664.jnews-dark-mode .tot-lattice h4 { color: #FFFFFF !important; } body.elementor-page-30664.jnews-dark-mode .tot-lattice p { color: #CBD5E1 !important; } body.elementor-page-30664.jnews-dark-mode .tot-route span.r-t { color: #FFFFFF !important; } body.elementor-page-30664.jnews-dark-mode .tot-route span.r-d { color: #CBD5E1 !important; } body.elementor-page-30664.jnews-dark-mode .elementor-accordion .elementor-accordion-title, body.elementor-page-30664.jnews-dark-mode a.elementor-accordion-title { color: #F1F5F9 !important; } /* the outline button's light lock colours the , the wrapper AND the text span, each with !important; naming only some of them leaves the wrapper orange on dark */ body.elementor-page-30664.jnews-dark-mode .tot-cta-btn-alt, body.elementor-page-30664.jnews-dark-mode .tot-cta-btn-alt * { color: #FDBA74 !important; } body.elementor-page-30664.jnews-dark-mode .tot-cta-btn-alt .elementor-button { border-color: #FDBA74 !important; } body.elementor-page-30664.jnews-dark-mode .tot-fold-dark .elementor-widget-text-editor, body.elementor-page-30664.jnews-dark-mode .tot-fold-dark .elementor-widget-text-editor p { color: #CBD5E1 !important; } /* Step tiles keep a LIGHT ground in dark mode (they sit on a photograph, not the theme), so the shared rule above that lightens every paragraph inside a dark fold turned their text #CBD5E1 on #F1F1F1: measured 1.32:1. Restate the tile's own ink after it. */ body.elementor-page-30664.jnews-dark-mode .tot-step h4 { color: #0C4A6E !important; } body.elementor-page-30664.jnews-dark-mode .tot-step p { color: #334155 !important; } body.elementor-page-30664.jnews-dark-mode .tot-step b { color: #EA580C !important; } /* 17d. DARK MODE - step tiles on a photo fold keep their light ground, so they keep their dark ink. The shared dark-fold rule (.tot-fold-dark .elementor-widget-text-editor p) outranks the plain tile rules; restated one level deeper. Was 1.32:1 on #F1F1F1. */ body.elementor-page-30664.jnews-dark-mode .tot-fold-dark .elementor-widget-text-editor .tot-step h4 { color: #0C4A6E !important; } body.elementor-page-30664.jnews-dark-mode .tot-fold-dark .elementor-widget-text-editor .tot-step p { color: #334155 !important; } body.elementor-page-30664.jnews-dark-mode .tot-fold-dark .elementor-widget-text-editor .tot-step b { color: #EA580C !important; } body.elementor-page-30664.jnews-dark-mode .tot-fold-dark .elementor-widget-text-editor .tot-step a { color: #0369A1 !important; }/* End custom CSS */