/* Style Sheet for Ciao Napoli 2025 - www.ciaonapoli.info Design and Development by Svevo Romano for Mavo Studio (www.mavostudio.com) - ©2025 All Rights Reserved NOTES # Color Palette Light blue: #1AA0D7 Dark blue: #1F417F # Fonts Sans: Helvetica Neue */ /* PX to EM table 1px - 0.0625em 2px - 0.125em 3px - 0.1875em 4px - 0.25em 5px - 0.3125em 6px - 0.375em 7px - 0.4375em 8px - 0.5em 9px - 0.5625em 10px - 0.625em 11px - 0.6875em 12px - 0.75em 13px - 0.8125em 14px - 0.875em 15px - 0.9375em 17px - 1.0625em 18px - 1.125em 19px - 1.1875em 20px - 1.250em 21px - 1.3125em 22px - 1.375em 23px - 1.4375em 24px - 1.5em 25px - 1.5625em 26px - 1.625em 27px - 1.6875em 28px - 1.75em 29px - 1.8125em 30px - 1.875em 31px - 1.9375em 32px - 2em 33px - 2.0625em 34px - 2.125em 35px - 2.1875em 36px - 2.25em 37px - 2.3125em 38px - 2.375em 39px - 2.4375em 40px - 2.5em */ /* Let's load the Helvetica Neue font faces we need */ /* Light – 300 */ @font-face { font-family: 'Helvetica Neue'; src: url('../fonts/HelveticaNeue-Light.woff2') format('woff2'), url('../fonts/HelveticaNeue-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } /* Regular – 400 */ @font-face { font-family: 'Helvetica Neue'; src: url('../fonts/HelveticaNeue.woff2') format('woff2'), url('../fonts/HelveticaNeue.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } /* Italic – 400 */ @font-face { font-family: 'Helvetica Neue'; src: url('../fonts/HelveticaNeue-Italic.woff2') format('woff2'), url('../fonts/HelveticaNeue-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } /* Medium – 500 */ @font-face { font-family: 'Helvetica Neue'; src: url('../fonts/HelveticaNeue-Medium.woff2') format('woff2'), url('../fonts/HelveticaNeue-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } /* Bold – 700 */ @font-face { font-family: 'Helvetica Neue'; src: url('../fonts/HelveticaNeue-Bold.woff2') format('woff2'), url('../fonts/HelveticaNeue-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* Condensed Bold – 700 */ @font-face { font-family: 'Helvetica Neue Condensed'; src: url('../fonts/HelveticaNeue-CondensedBold.woff2') format('woff2'), url('../fonts/HelveticaNeue-CondensedBold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* Condensed Black – 900 */ @font-face { font-family: 'Helvetica Neue Condensed'; src: url('../fonts/HelveticaNeue-CondensedBlack.woff2') format('woff2'), url('../fonts/HelveticaNeue-CondensedBlack.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } /* ###################################################### */ /* ################# BASIC RESET STYLES ################# */ /* ###################################################### */ /* --- Modern baseline / reset --- */ /* Box sizing */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margin */ body { margin: 0; } /* Better defaults */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* iOS Safari */ text-size-adjust: 100%; } /* Media elements behave predictably */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Form controls inherit typography */ input, button, textarea, select { font: inherit; color: inherit; } /* Buttons: consistent baseline */ button { cursor: pointer; } button:disabled { cursor: default; } /* Tables */ table { border-collapse: collapse; border-spacing: 0; } .clearfix::after { content: ""; display: block; clear: both; } /* Optional: reduce motion if user requests it */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Define the colors of the various sections */ :root { --cat-explore: #3f77d4; --cat-activities: #0ca056; --cat-sleep: #002269; --cat-eat: #761d0c; --cat-hangouts: #fc7d1d; --cat-shopping: #d0112b; --cat-whats-on: #cb1fea; --cat-all-places: #0e2041; } :root { --local-love-tip-bg: #E9F4FA; --local-love-warning-bg: #fffdbe; } /** * * ▄▄▄▄ ▄▄▄▄ * ██▀▀▀▀█ ▀▀██ * ██ ▄████▄ ██▄████▄ ▄████▄ ██▄████ ▄█████▄ ██ * ██ ▄▄▄▄ ██▄▄▄▄██ ██▀ ██ ██▄▄▄▄██ ██▀ ▀ ▄▄▄██ ██ * ██ ▀▀██ ██▀▀▀▀▀▀ ██ ██ ██▀▀▀▀▀▀ ██ ▄██▀▀▀██ ██ * ██▄▄▄██ ▀██▄▄▄▄█ ██ ██ ▀██▄▄▄▄█ ██ ██▄▄▄███ ██▄▄▄ * ▀▀▀▀ ▀▀▀▀▀ ▀▀ ▀▀ ▀▀▀▀▀ ▀▀ ▀▀▀▀ ▀▀ ▀▀▀▀ * * */ body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; background: #f4f7f8; line-height: 1.4em; } /* The site wrapper defines the total maximum width of the website */ #site_wrapper { max-width: 1200px; /* Was 1200 */ background: #fff; margin: 0 auto 0 auto; box-shadow: none; } .wrapped_contents { margin: 0; padding: 3% 0; max-width: 1200px; margin: 0 auto 0 auto; background: #fff; } .wrapped_contents--long_form { padding: 6% 3%; } /* ## Long form layouts ## A: READING COL B: READING COL + RAIL */ .longform_header { margin-bottom: 2em; /* tune */ } .longform_layout { display: flex; gap: 2em; align-items: flex-start; flex-wrap: wrap; /* lets it stack if needed */ justify-content: center; } .longform_body { flex: 1 1 38rem; /* grows, has a sensible minimum */ max-width: clamp(70ch, 70vw, 86ch); /* Make it max 70 characters */ } .longform_rail { flex: 0 0 18rem; /* fixed-ish sidebar width */ } .postcard_image { border: 0; box-shadow: 0 4px 5px rgba(0,0,0,.1); outline: 10px solid #F5F4F4; outline-offset: -10px; } /* img { border: solid 10px #F5F4F4; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1); } */ a img { border: 0; outline: none; } /* GENERAL TYPOGRAPHY */ a { color: #12A0D7; cursor: pointer; } a:link { color: #12A0D7; } a:visited { color: #12A0D7; } a:hover { color: #83c6e1; backface-visibility: hidden; } h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link { color: #1d1d1f; text-decoration: none; } h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: #1d1d1f; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #1d1d1f; -webkit-transition: color 0.1s; transition: color 0.1s; } p { margin: 0 0 20px 0; padding: 0; font-size: clamp(1.0625rem, 0.96rem + 0.28vw, 1.125rem); /* 18px on large screens */ line-height: 1.4444444444444444em; /* 26px on large screens */ color: #1d1d1f; } ul, ol { font-size: clamp(1.0625rem, 0.96rem + 0.28vw, 1.125rem); /* 18px on large screens */ } h1 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: clamp(42px, calc(24px + 4.4vw), 80px); line-height: 1.1em; margin: 0; padding: 2% 0 0 0; color: #1d1d1f; } h2 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: clamp(26px, calc(26px + 0.5vw), 32px); line-height: 1.1875em; margin: 0 0 28px 0; padding: 0; text-align: left; color: #1d1d1f; } h2.section_title { border-bottom: 1px solid #ddd; padding-bottom: 10px; } h3 { /* The h3 headings at present appear only in the content boxes (vertical, horizontal, banners etc.) The following values apply to all of them Other values (specifically sizes) are defined below according to where the h3s appear */ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; line-height: 1.125em; margin: 0 0 15px 0; padding: 0; color: #1d1d1f; } h4 { /* On mobile all h4 look the same - They may be different on larger screens */ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; color: #1d1d1f; font-size: 1.250em; line-height: 1.125em; margin: 0 0 14px 0; padding: 0; } /* GENERAL HELPER CLASSES */ .strong { font-weight: 700; } .italic { font-style: italic; } .notes { font-size: 1em; line-height: 1.250em; } p.small_notes.small_notes { /* Element with class + class to beat the layout containers styles where font-size is declared */ font-size: 0.75em; } .right_aligned { /* Clear all the floats of the boxes for mobile layout */ float: none; } .left_aligned { /* Clear all the floats of the boxes for mobile layout */ float: none; } .centered { text-align: center; } /* We take advantage of the flex vertical alignment capabilities */ .v_align_center { /* We have to make this element a flex container in order to vertically center it's contents */ display: flex; align-items: center; } .right_to_left { flex-direction: row-reverse; } .box_paragraph:last-child { margin: 0; padding: 0; } .wrapper_for_pill { position: relative; display: inline-block; } span.pill { position: absolute; top: 25px; left: 25px; background-color: rgba(255, 255, 255, 0.8); color: #fff; font-weight: 700; padding: 5px 10px; border-radius: 20px; font-size: 0.875em; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Make iframes responsive */ .iframe-wrapper { box-sizing: border-box; border: solid 10px #F5F4F4; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1); aspect-ratio: 16 / 9; /* change if needed */ width: 100%; height: auto; margin-bottom: 15px; } .iframe-wrapper iframe { display: block; width: 100%; height: 100%; border: 0; } /************************************** ********** THE GRID SYSTEM ************ ***************************************/ /* Just in case we need to use floats or other width reduction */ .width_50_percent { width: 50%; } /* THE CONTENT GRID STYLES */ /* The content row */ .content_row { margin: 0; padding: 0; } .content_sub_row { /* The row used in sub wrappers */ margin: 0; padding: 0; } /* The content box */ .content_box { margin: 0 0 30px 0; padding: 0 3%; } .content_box img, .content_box_nopadding img { width: 100%; height: auto; display: block; margin: 0 0 20px 0; } .content_box h3 { font-size: clamp(24px, calc(24px + 0.333vw), 29px); } .content_box h3 a { color: #3f75d9; text-decoration: underline; } .content_box h4 { font-size: 1.250em; } /* CKEditor images styles (for inline images) */ /* full editor defaults */ .full_richtext img { width: 100%; height: auto; display: block; margin: 0 0 20px 0; } /* CKEditor figure images behave correctly */ .full_richtext figure.image img { width: auto; max-width: 100%; height: auto; margin: 0; } /* text-wrap images */ .full_richtext figure.image.image-style-align-left { float: left; max-width: 320px; margin: 0.3em 1em 0.6em 0; } .full_richtext figure.image.image-style-align-right { float: right; max-width: 320px; margin: 0.3em 0 0.6em 1em; } .full_richtext::after { content:""; display:block; clear:both; } /* And the sub box, which is essentially the partial box (1 of 2 boxes) in horizontal layouts */ .content_box.sub_box { margin: 0; padding: 0 3%; } /* The content box wrappers used for nested grids */ .sub_wrapper_50_percent { margin: 0; padding: 0; } .sub_wrapper_66_percent { margin: 0; padding: 0; } .sub_wrapper_75_percent { margin: 0; padding: 0; } /* The different box widths */ /* 25% boxes (3 cols) */ .flex_25_percent { flex: 0 0 100%; } /* 33% boxes (4 cols) */ .flex_33_percent { flex: 0 0 100%; } /* 40% boxes (5 cols) */ .flex_40_percent { flex: 0 0 100%; } /* 50% boxes (6 cols) */ .flex_50_percent { flex: 0 0 100%; } /* 60% boxes (7 cols) */ .flex_60_percent { flex: 0 0 100%; } /* 66% boxes (8 cols) */ .flex_66_percent { flex: 0 0 100%; } /* 75% boxes (9 cols) */ .flex_75_percent { flex: 0 0 100%; } /* 100% boxes (12 cols) */ .flex_100_percent { flex: 0 0 100%; } /********** HEADER **********/ header { background: #fff; position: relative; text-align: center; padding: 30px 0 0 0; margin: 0; } div#header_inner_wrapper { background: transparent; position: relative; max-width: 1280px; margin: 0 auto; } #mobile_logo_header { display: block; margin: 30px auto; height: auto !important; width: 70%; max-width: 360px; } #contact_icon { position: absolute; top: 30px; left: 30px; width: 43px; border: 0; box-shadow: none; } button#mobile_menu_icon { position: absolute; top: 30px; right: 30px; width: 36px; } button#mobile_menu_icon img { width: 35px; border: 0; box-shadow: none; } /* Social icons header */ #social_icons_header ul { padding: 0; margin: 0; } #social_icons_header ul li { list-style: none; display: inline-block; margin: 0 6px 0 0; padding: 0; } #social_icons_header ul li a { display: block; } #social_icons_header ul li a:hover { opacity: .88; } #social_icons_header ul li img { width: 42px; height: auto; box-shadow: none; display: block; } #social_icons_header ul li:last-child { margin: 0; } #logo_header { text-align: center; width: 80%; max-width: 400px; margin: 50px auto 0 auto; } #logo_claim { font-size: 4.7vw; white-space: nowrap; margin: 6px 0 0 0; } #logo_header img { width: 100%; height: auto !important; } /* Gennarino */ header #gennarino { position: absolute; left: 64%; top: 14.5%; width: 110px; height: auto; } /* hide desktop navigation */ #desktop_nav { display: none; } /********** FOOTER **********/ footer { background: #1f4180; text-align: center; position: relative; color: #e8f3f7; } footer a:link, footer a:visited { color: inherit; } footer a:hover { color: inherit; } div#inner_footer { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 3%; align-items: start; align-items: stretch; /* important */ } div.footer_col { border-bottom: 1px solid rgba(255,255,255,0.15); /* adjust */ padding: 0 0 24px 0; } div.footer_col { border-bottom: 1px solid rgba(255,255,255,0.15); /* adjust */ padding: 0 0 24px 0; } footer div#inner_footer p { color: inherit; } footer div#inner_footer h3 { color: inherit; font-size: clamp(1.375rem, 1.05rem + 0.8vw, 1.5rem); margin: 0 0 17px 0; } #inner_footer blockquote { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-style: italic; font-size: 1.1375em; color: inherit; margin: 0 0 10px 0; opacity: 0.8; } #inner_footer blockquote::before { content: '“'; font-size: 2em; line-height: 0; } #inner_footer blockquote::after { content: '”'; font-size: 2em; line-height: 0; position: relative; top: 9px; } #inner_footer p.quote_author { font-size: 1; font-weight: 700; } footer .credits_and_social_footer { grid-column: 1 / -1; /* full width row */ margin-top: 8px; padding-top: 16px; } footer p.footer_credits { text-align: center; font-size: 0.875em; } #mobile_logo_footer { margin: 20px auto 30px auto; width: 70%; max-width: 360px; } nav.footer_nav ul { padding: 0; margin: 0; } nav.footer_nav ul li { list-style: none; margin: 0 0 4px 0; padding: 0; } /* Social icons footer */ div#social_icons_footer { margin: 0 0 24px 0; padding: 0; } #social_icons_footer ul { padding: 0; margin: 0; line-height: 0; } #social_icons_footer ul li { list-style: none; display: inline-block; margin: 0 6px 0 0; padding: 0; } #social_icons_footer ul li a { display: block; } #social_icons_footer ul li a img { width: 36px; height: auto; display: block; margin: 0; box-shadow: none; } #social_icons_footer ul li:last-child { margin: 0; } /** * * ▄▄▄▄▄▄ * ██▀▀▀▀█▄ * ██ ██ ▄█████▄ ▄███▄██ ▄████▄ ▄▄█████▄ ██▄███▄ ▄████▄ ▄█████▄ * ██████▀ ▀ ▄▄▄██ ██▀ ▀██ ██▄▄▄▄██ ██▄▄▄▄ ▀ ██▀ ▀██ ██▄▄▄▄██ ██▀ ▀ * ██ ▄██▀▀▀██ ██ ██ ██▀▀▀▀▀▀ ▀▀▀▀██▄ ██ ██ ██▀▀▀▀▀▀ ██ * ██ ██▄▄▄███ ▀██▄▄███ ▀██▄▄▄▄█ █▄▄▄▄▄██ ███▄▄██▀ ▀██▄▄▄▄█ ▀██▄▄▄▄█ * ▀▀ ▀▀▀▀ ▀▀ ▄▀▀▀ ██ ▀▀▀▀▀ ▀▀▀▀▀▀ ██ ▀▀▀ ▀▀▀▀▀ ▀▀▀▀▀ * ▀████▀▀ ██ * */ /* ############ INTERNAL PAGES TEMPLATE ############ */ section#page_contents { padding: 0; } section#longform_page_contents { padding: 2% 0 0 0; } /* The full width cover image */ #cover_image { width: 100%; height: auto !important; display: block; } .place_cover_image { display: block; width: 100%; aspect-ratio: 21 / 9; /* smooth: height follows width */ min-height: 320px; /* don’t get too short */ max-height: 520px; /* don’t get too tall */ overflow: hidden; margin-top: 30px; } .place_cover_image img { display:block; width: 100%; height: 100%; object-fit: cover; object-position: center; /* or rely on focal point */ } #main_headlines { margin: 6% 4.4% 6% 4.4%; } /**************************************/ /************ NEW HOME PAGE ***********/ /**************************************/ .homepage_cover { width: 100%; height: 240px; /* slightly less high */ object-fit: cover; object-position: 30% 10%; /* more centered, still crops right */ display: block; margin-top: 20px; } .home_hero_text { /* mobile default: just a block below the image */ margin: -38px 3% 0; padding: 6px 10px; position: relative; background: #fff; } .home_hero_text h1 { white-space: nowrap; font-size: clamp(1.65rem, 7.4vw, 3rem); line-height: 1; margin: 0 0 16px; padding: 0; } .home_hero_text h2 { font-size: clamp(1.15rem, 4.8vw, 1.6rem); line-height: 1.4; margin: 0; } /* Home CTAs */ .home_ctas { margin-top: 28px; padding: 0 16px; display: grid; grid-template-columns: 1fr; gap: 18px; } .home_cta { display: block; text-decoration: none; border: 1px solid #D1DAE7; border-radius: 10px; overflow: hidden; background: #fff; transition: transform 0.15s ease, box-shadow 0.15s ease; } .home_cta:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(191, 191, 191, 0.28); } .home_cta_img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; } .home_cta_card_title { margin: 0; padding: 16px 18px 18px; text-align: center; font-weight: 300; font-size: clamp(1.4rem, 2.5vw, 26px); line-height: 1.15; } /* HOME STARTiNG POINTS */ .home_starting_points { padding-left: 3%; padding-right: 3%; margin-top: 72px; /* tune as needed */ } .home_starting_points_section_title { margin: 0 0 30px; text-align: center; text-transform: uppercase; font-weight: 300; color: #7F7F7F; letter-spacing: 0.08em; font-size: 20px; /* mobile */ } .home_starting_points_grid { display: grid; grid-template-columns: 1fr; gap: 18px; } .home_starting_points_img { width: 100%; display: block; aspect-ratio: 2 / 1; object-fit: cover; border: 10px solid #F5F4F4; box-shadow: 2px 2px 3px rgba(191, 191, 191, 0.5); /* subtle */ } .home_starting_points_card_title { margin: 14px 0 8px; font-size: clamp(1.35rem, 3.4vw, 30px); line-height: 1.1; } .home_starting_points_text { margin: 0; font-size: clamp(1rem, 2.2vw, 18px); /* max 18px */ line-height: 1.45; color: #1d1d1f; } /* HOME DID YOU KNOW */ .home_did_you_know { padding-left: 3%; padding-right: 3%; margin-top: 72px; } .home_did_you_know_grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .home_did_you_know_section_title { text-transform: uppercase; font-weight: 300; letter-spacing: 0.08em; color: #7F7F7F; font-size: 20px; /* match other section titles */ text-align: center; /* center on mobile */ margin: 0 0 10px; } .home_did_you_know_card_title { margin: 0 0 10px; font-size: clamp(1.4rem, 3.2vw, 28px); line-height: 1.15; } .home_did_you_know_text { margin: 0; font-size: clamp(1rem, 2.2vw, 18px); line-height: 1.5; } /* HOME SEASONAL PICKS */ .home_seasonal_picks { padding-left: 3%; padding-right: 3%; margin-top: 72px; } .home_seasonal_picks_section_title { margin: 0 0 30px; text-align: center; text-transform: uppercase; font-weight: 300; color: #7F7F7F; letter-spacing: 0.08em; font-size: 20px; } .home_seasonal_picks_grid { display: grid; grid-template-columns: 1fr; gap: 18px; } .home_seasonal_picks_img { width: 100%; display: block; aspect-ratio: 7 / 5; object-fit: cover; border: 10px solid #F5F4F4; box-shadow: 2px 2px 3px rgba(191, 191, 191, 0.5); /* subtle */ } .home_seasonal_picks_card_title { margin: 14px 0 8px; font-size: clamp(1.35rem, 3.4vw, 30px); line-height: 1.1; } .home_seasonal_picks_text { margin: 0; font-size: clamp(1rem, 2.2vw, 18px); line-height: 1.45; } /* FULL WIDTH DRAWING */ .full_width_drawing_wrapper { position: relative; margin-top: 40px; } .full_width_drawing_wrapper .full_width_banner { width: 100%; height: 190px; /* include more of the image */ object-fit: cover; object-position: 66% 50%; display: block; } .flying_gennarino { position: absolute; bottom: -20px; left: 10px; width: 220px; height: auto; z-index: 2; } /* ############# OLD HOME PAGE ############# */ /* FEATURED RECIPES */ .featured_recipes { border: #dec6b5 solid 1px; background-color: #fff9f1; padding: 20px 15px 15px 15px; } .featured_recipes .header { border-bottom: #dec6b5 solid 1px; display: flex; justify-content: space-between; padding-bottom: 5px; } .featured_recipes .header h2 { font-size: clamp(1.375rem, 1.05rem + 0.8vw, 1.5rem); margin: 0; color: #857266; } .featured_recipes .header .icon { border: 0; box-shadow: none; width: 32px; height: 32px; background-color: #857266; -webkit-mask: url("../images/icons/cooking-pot.png") no-repeat center; mask: url("../images/icons/cooking-pot.png") no-repeat center; -webkit-mask-size: contain; mask-size: contain; } .featured_recipes .recipe_box { padding: 15px 0; border-bottom: solid 1px #dec6b5; } .featured_recipes .recipe_box:last-child { border-bottom: none; } .featured_recipes .recipe_box .image_text_row { display: flex; flex-direction: row; margin: 15px 0 0 0; gap: 20px; } .featured_recipes .recipe_box .image_text_row .recipe_image { flex: 0 0 40%; } .featured_recipes .recipe_box .image_text_row .recipe_imageimg { display: block; width: 100%; height: auto; } .featured_recipes .recipe_box .image_text_row p { font-size: 1em; flex: 1; margin: 0; } .featured_recipes .recipe_box .prep_nutrition_row { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; margin: 10px 0 0 0; } .featured_recipes .recipe_box .prep_nutrition_row p { margin: 0; } .featured_recipes .recipe_box .prep_nutrition_row .nutrition_badges_list { margin: 0; padding: 0; display: flex; flex-direction: row; align-items: top; gap: 10px; list-style: none; } .featured_recipes .recipe_box .prep_nutrition_row .nutrition_badges_list img { width: 36px; height: auto; box-shadow: none; border: 0; margin: 0; } /* Home Page seasonal picks */ #seasonal_picks_section { background: linear-gradient(90deg,rgb(26,51,6) 0%,rgb(41,34,12) 100%); padding: 2% 0 3% 0; margin: 0; } #seasonal_picks_section h2 { color: #fff; margin-left: 3%; text-align: left; } #seasonal_picks_section h3 { color: #fff; font-size: 1.5em; margin: 0 0 17px 0; } #seasonal_picks_section h3 a:link, #seasonal_picks_section h3 a:visited, #seasonal_picks_section h3 a:hover { color: #fff; } #seasonal_picks_section p { color: #fff; } /* Featured Restaurant Box */ .featured_restaurant { display: flex; flex-wrap: wrap; /* allow new rows - i.e. the header is full width */ background: #f1f8ff; border: solid 1px #c4d4f1; padding: 15px; margin: 0; } .featured_restaurant .header { flex: 0 0 100%; /* span full width */ width: 100%; /* extra safety */ border-bottom: #c4d4f1 solid 1px; display: flex; justify-content: space-between; padding-bottom: 5px; margin-bottom: 14px; } .featured_restaurant .header h2 { font-size: clamp(1.5em, 1.15em + 0.9vw, 1.65em); margin: 0; color: #3a5890; } .featured_restaurant .header .icon { border: 0; box-shadow: none; width: 36px; height: 36px; background-color: #3a5890; -webkit-mask: url("../images/icons/chef-hat.png") no-repeat center; mask: url("../images/icons/chef-hat.png") no-repeat center; -webkit-mask-size: contain; mask-size: contain; } .featured_restaurant .content { display: flex; flex-direction: column; flex-wrap: wrap; /* allows stacking */ } .featured_restaurant .content p { font-size: 1em; /*16px*/ } .featured_restaurant .restaurant_image { flex: 0 0 40%; } .featured_restaurant .restaurant_info { flex: 1; } /* Did you know section */ .did_you_know_section { display: flex; flex-wrap: wrap; /* allow new rows - i.e. the header is full width */ background: #fffde5; border: solid 1px #fff1ba; padding: 20px 15px 15px 15px; margin: 0; } .did_you_know_section .header { flex: 0 0 100%; /* span full width */ width: 100%; /* extra safety */ border-bottom: #fff1ba solid 1px; display: flex; justify-content: space-between; padding-bottom: 5px; margin-bottom: 14px; } .did_you_know_section .header h2 { font-size: clamp(1.5em, 1.15em + 0.9vw, 1.65em); margin: 0; color: #b79b48 } .did_you_know_section .header .icon { border: 0; box-shadow: none; width: 36px; height: 36px; background-color: #b79b48; -webkit-mask: url("../images/icons/question-mark.png") no-repeat center; mask: url("../images/icons/question-mark.png") no-repeat center; -webkit-mask-size: contain; mask-size: contain; } /* Home Page sub section headings */ .content_box.sub_section_heading { margin: 0; } .sub_section_heading h2 { padding: 7px 15px; color: #fff; background: #1F417F; font-size: 1.5em; margin: 0 0 20px 0; } .sub_section_heading h2 img { margin: 0; display: inline; width: auto; height: 0.8em; } /* ############# GENERAL SINGLE PAGES ############# */ /* ############# SINGLE PLACE PAGE ############# */ .content_box.sidebar.single_place_sidebar ul { padding: 0; } .single_place_meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 10px 0 24px 0; flex-wrap: wrap; } .single_place_meta .place_category_pills { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .single_place_meta .meta_pill { padding: 10px 16px; font-size: 13px; border-radius: 999px; color: #fff; line-height: 1; white-space: nowrap; font-weight: 600; } .single_place_meta .place_dietary_options { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .single_place_meta .place_dietary_options img { height: 38px; width: auto; display: block; margin: 0; } /* ############# 404 PAGE ############# */ .four_oh_four { text-align: center; margin: 0; } .four_oh_four img { display: block; width: 80%; height: auto; display: block; margin: 0 auto; } /* ############# ABOUT-US PAGE ############# */ .team_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; margin: 0; padding: 3% 3% 6%; } .team_member_title { text-align: center; } .team_member_portrait { width: 100%; height: auto; display: block; margin: 0 0 20px 0; border-radius: 50%; border: solid 1px #b1b1b1 } .team_member_bio p { font-size: 0.95em; line-height: 1.4em; color: #333; } /* ############# ARCHIVE PAGES ############# */ .archive_header { padding: 6% 3% 0 3%; } .archive_header h1.section_title { margin: 0; font-size: clamp(2.250rem, 1.4rem + 2.2vw, 3.2rem); line-height: 1.05; /* border-bottom: 1px solid #d9e5f6; */ padding-top: 0; padding-bottom: 20px; text-align: left; } /* If we choose subtitle under main heading */ .category_page_intro h2, .category_page_intro p { font-size: clamp(21px, 1.2vw, 24px); line-height: 1.250em; text-align: left; font-weight: 300; } /* General archive grid that holds the cards */ .archive_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(344px, 1fr)); gap: 24px; margin: 0; padding: 20px 3% 6% 3%; } /* If we choose subtitle as first card */ .archive_intro_card { padding: 0 20px; /* border: 1px solid #d9e5f6; */ border-radius: 12px; display: flex; flex-direction: column; justify-content: flex-start; } .archive_intro_card p, .archive_intro_card h2 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: clamp(26px, 1.6vw, 28px); line-height: 1.250em; } .archive_body_card { grid-column: 1 / -1; padding: 2rem; border-radius: 16px; background: var(--surface-2); } /** * * ▄▄▄▄ * ██▀▀▀▀█ ██ * ██▀ ▄████▄ ████▄██▄ ██▄███▄ ▄████▄ ██▄████▄ ▄████▄ ██▄████▄ ███████ ▄▄█████▄ * ██ ██▀ ▀██ ██ ██ ██ ██▀ ▀██ ██▀ ▀██ ██▀ ██ ██▄▄▄▄██ ██▀ ██ ██ ██▄▄▄▄ ▀ * ██▄ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██▀▀▀▀▀▀ ██ ██ ██ ▀▀▀▀██▄ * ██▄▄▄▄█ ▀██▄▄██▀ ██ ██ ██ ███▄▄██▀ ▀██▄▄██▀ ██ ██ ▀██▄▄▄▄█ ██ ██ ██▄▄▄ █▄▄▄▄▄██ * ▀▀▀▀ ▀▀▀▀ ▀▀ ▀▀ ▀▀ ██ ▀▀▀ ▀▀▀▀ ▀▀ ▀▀ ▀▀▀▀▀ ▀▀ ▀▀ ▀▀▀▀ ▀▀▀▀▀▀ * ██ * */ /**************************************************************/ /******************** ARCHIVE PAGE TOOLBAR ********************/ /**************************************************************/ /* .archive_toolbar{ display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 12px; } .archive_toolbar_left { flex: 1; min-width: 0; } .active_filters_summary { min-height: 1.6em; line-height: 1.6; font-size: 13px; color: #555; margin: 0 0 12px 0; } .active_filters_summary .afs_label { font-weight: 400; color: #666; } .active_filters_summary .afs_value { font-weight: 600; color: #222; } .active_filters_summary:empty { visibility: hidden; } */ /* ACTIVE FILTER CHIPS */ .active_chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; padding: 0 3%; } a.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 12px; border-radius: 20px; background: #ddd; color: #0b2a4a; font-weight: 400; font-size: .85em; text-decoration: none; } .chip_x { width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #9aa7b6; position: relative; } /* draw the X */ .chip_x::before, .chip_x::after { content: ""; position: absolute; width: 10px; height: 2px; background: #fff; border-radius: 2px; } .chip_x::before { transform: rotate(45deg); } .chip_x::after { transform: rotate(-45deg); } .chip:focus-visible { outline: 3px solid rgba(31,65,128,0.35); outline-offset: 2px; } /*************************************************************/ /******************** SEARCH + FILTER BAR ********************/ /*************************************************************/ .filters_toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 3% 0 3%; } .filters_toolbar_right { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; } /* button reset-ish */ .filters_toggle { padding: 0; display: flex; align-items: center; justify-content: flex-start; gap: 4px; color: #0b2a4a; cursor: pointer; font-weight: 500; background: transparent; border: 0; } /* custom arrow BEFORE text */ .filters_toggle::before { content:'▶'; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; font-size:13px; line-height:1; transition: transform 0.15s ease; } /* open state */ .filters_bar.is-open .filters_toggle::before { transform: rotate(90deg); } /* SHOW FAVS*/ a.favourites_link { display: inline-flex; align-items: center; border: 0; padding: 0; font: inherit; font-weight: 500; /* medium */ color: #0b2550; /* your blue */ font-size: 1em; text-decoration: none; } a.favourites_link::before { content: ""; width: 20px; height: 20px; background: url("../images/icons/heart_outline_blue.png") center/contain no-repeat; display: inline-block; margin-right: 6px; } /* NEAR ME BUTTON */ .near_me_toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; /* medium */ color: #0b2550; /* your blue */ font-size: 1em; cursor: pointer; } .near_me_toggle::before { content: ""; width: 20px; height: 20px; background: url("../images/icons/near_me_2.png") center/contain no-repeat; flex-shrink: 0; } .near_me_toggle[data-cn-state="blocked"] { opacity: 0.6; } .near_me_toggle.is-loading { opacity: 0.6; } /* The actual filters and search panel */ .content_filters { display: none; grid-template-columns: repeat(auto-fill, minmax(344px, 1fr)); gap: 24px; margin: 0; padding: 12px 3% 0 3%; } .filters_bar.is-open .content_filters{ display: grid; } .filter_col { background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); } .filter_title { grid-column: 1 / -1; font-size: 0.9rem; font-weight: 700; margin: 0 0 10px; color: #222; } /* Filter groups (pills) */ .filter_group { background: #f6f9fd;; border-radius: 12px; padding: 14px 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .filter_group h3 { margin: 0 0 10px; font-size: 0.9rem; font-weight: 700; } /* Pills */ .filter_group .pill { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.85rem; line-height: 1; background: #e7eefb; color: #0b2550; margin: 0 10px 10px 0; } .filter_group .pill:hover { transform: translateY(-1px); } .filter_group .pill.is-active { background: #1F4180; color: #fff; } /* Subcategories */ .filter_subgroups { padding-top: 16px; border-top: 1px dotted #8a93a5; margin-top: 10px; } /* Search and hidden gem checkbox */ /* The block that contain both */ .filter_search_block{ background: #f6f9fd; border-radius: 12px; padding: 14px 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: space-between; } .filter_search_hint { font-size: 0.85rem; line-height: 1.3; color: #555; margin: 0 0 10px; } .filter_search { display: flex; flex-wrap: wrap; row-gap: 4px; column-gap: 10px; align-items: center; align-self: start; justify-content: flex-start; margin-bottom: 20px; } .filter_search_title { flex: 0 0 100%; margin: 0 0 4px 0; } .filter_search input[type="search"] { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #ddd; font: inherit; } .filter_search button { padding: 10px 12px; border-radius: 10px; border: 0; background: #0e2041; color: #fff; font-weight: 700; cursor: pointer; } .filter_search button:hover { filter: brightness(1.05); } /* The hidden gem link checkbox - it is a link but looks like a CB */ a.filter_checkbox_link, a.filter_checkbox_link:visited, a.filter_checkbox_link:hover, a.filter_checkbox_link:active, a.filter_checkbox_link:focus { text-decoration: none; color: #0b2550; } .filter_checkbox_link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9rem; text-decoration: none; color: #0b2550; } .filter_checkbox_link .fake_checkbox { width: 18px; height: 18px; border-radius: 4px; border: 2px solid #0b2550; display: inline-block; position: relative; } .filter_checkbox_link.is-on .fake_checkbox { background: #1F4180; border-color: #1F4180; } .filter_checkbox_link.is-on .fake_checkbox::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /************** LOCAL LOVE BLOCK ***************/ .local-love { position: relative; border-left: 4px solid #1F4180; padding: clamp(16px, 3vw, 32px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .local-love h3 { color: #1F4180; display: flex; align-items: center; gap: 0.4em; } /* icon */ .local-love h3::before { content: ''; width: 24px; height: 24px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; background-position: center; } .local-love--tip h3::before { background-image: url('../images/icons/red_heart_icon.png'); } .local-love--warning h3::before { background-image: url('../images/icons/warning_icon.png'); } .local-love--tip { background-color: var(--local-love-tip-bg); } .local-love--warning { background-color: var(--local-love-warning-bg); } /*************************************************/ /************ GENERAL SIDEBAR STYLES *************/ /*************************************************/ /* The sidebar content box */ .content_box.sidebar { font-size: clamp(1.0625rem, 0.96rem + 0.28vw, 1.125rem); /* 18px on large screens */ border-left: solid 3px #d9dfe9; padding-left: clamp(12px, 0.375em + 1.75vw, 1.5em); padding-bottom: clamp(12px, 0.375em + 1.75vw, 1.5em); padding-right: clamp(12px, 0.375em + 1.75vw, 1.5em); margin: 0 3%; align-self: stretch; /* belt + braces */ } .content_box .sidebar_section { margin: 0 0 30px 0; } /* All sidebar headings */ .content_box.sidebar h3 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); line-height: 1.3; font-weight: 500; margin-bottom: 11px; text-transform: uppercase; } .content_box.sidebar ul { padding: 0; } .content_box.sidebar div.sidebar_freeform ul { padding: 0 0 0 20px; } /* Single page sidebar tag pills list */ .tags_list { list-style: none; padding: 0; margin: 0 0 24px 0; } .tags_list li { display: inline-block; margin: 0 8px 8px 0; padding: 0; } .tags_list li a { display: inline-block; background-color: #1e90ff; color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 0.9em; line-height: 1.1; white-space: nowrap; text-decoration: none; } /* Single page sidebar categories pills list */ .categories_list { list-style: none; padding: 0; margin: 0 0 24px 0; } .categories_list li { display: inline-block; margin: 0 8px 8px 0; padding: 0; } .categories_list li a { display: inline-block; background-color: #1F4180; color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 0.9em; line-height: 1.1; white-space: nowrap; text-decoration: none; } /* Sidebar related places list */ .related_entries_list { list-style: none; padding: 0; margin: 0 0 20px 0; } .related_entries_list li { margin: 0 0 8px 0; } /**** PLACE SIDEBAR ****/ .sidebar_dietary_icons_section { display: none; } /* Sidebar dietary icons */ .sidebar_dietary_icons { display:flex; align-items:center; gap: 12px; } /* Sidebar size (larger than card) */ img.dietary_icon_sidebar { height: 38px; /* tweak 32–40 */ width: auto; display: block; margin: 0; } /* Place extra info and getting there info */ ul.place_details, ul.place_getting_there_info { list-style: none; padding: 0; margin: 0 0 24px 0; } ul.place_details li, ul.place_getting_there_info li { position: relative; line-height: 1.25em; padding-left: 30px; margin: 0 0 12px 0; } ul.place_details p, ul.place_getting_there_info p { margin: 0; } ul.place_details li::before, ul.place_getting_there_info li::before { content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; background-size: contain; background-repeat: no-repeat; opacity: 0.7; } li.place_opening_hours::before { background-image: url(../images/icons/place-extra-info-icons/clock.png); } li.place_address::before { background-image: url(../images/icons/place-extra-info-icons/address.png); } li.place_neighborhood::before { background-image: url(../images/icons/place-extra-info-icons/area.png); } li.place_phone::before { background-image: url(../images/icons/place-extra-info-icons/phone.png); } li.place_email::before { background-image: url(../images/icons/place-extra-info-icons/mail.png); } li.place_website::before { background-image: url(../images/icons/place-extra-info-icons/web.png); } li.place_booking_url::before { background-image: url(../images/icons/place-extra-info-icons/ticket.png); } li.place_transport::before { background-image: url(../images/icons/place-extra-info-icons/tram.png); } li.place_map_url::before { background-image: url(../images/icons/place-extra-info-icons/map.png); } /*************************************************/ /********** ARCHIVE CARDS SHARED STYLES **********/ /*************************************************/ .archive_card { background: #f7fbff; border: 1px solid #d9e5f6; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; } /* the image */ .archive_card_image { position: relative; } .archive_card_image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } /* Archive card category pills */ .archive_card_category_pills { align-items: flex-start; /* stops equal-width pills */ position: absolute; top: 15px; left: 15px; display: flex; flex-direction: column; /* vertical stack */ gap: 6px; z-index: 2; } .archive_card_category_pill { position: absolute; top: 15px; left: 15px; background-color: #1F4180; color: #fff; font-weight: 700; padding: 6px 12px; border-radius: 20px; font-size: 0.875em; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } /* override absolute positioning when inside the container */ .archive_card_category_pills .archive_card_category_pill { position: static; width: fit-content; /* optional extra safety */ } /* Archive card meta row */ .archive_card_meta { display: flex; align-items: center; justify-content:space-between; gap: 12px; font-size: 0.9375em; padding: 12px 16px 0; margin: 0 0 10px 0; } /* Left cluster: distance + map */ .place_location_info { display:flex; align-items:center; gap: 14px; min-width: 0; } .place_location_info img { width: 13px; height: 20px; object-fit: contain; } /* This is the right block of the place card meta where gem and dietrary options live */ .place_meta_right { display:flex; align-items:center; gap: 12px; /* spacing between gem and dietary */ } .place_hidden_gem img{ display:block; width: auto; height: 20px; } /* Right cluster: dietary icons */ .place_dietary_info { display:flex; align-items:center; justify-content:flex-end; gap: 10px; flex: 0 0 auto; } /* Dietary icon sizing */ .place_dietary_info .dietary_icon { display:block; width: auto; height: 32px; } /* Optional: keep icons crisp on hover without implying click */ .place_dietary_info .dietary_icon{ cursor: default; } /* Place favourite icon */ .fav_toggle { background: none; border: none; padding: 0; margin: 0; appearance: none; -webkit-appearance: none; box-shadow: none; outline: none; cursor: pointer; width: 24px; height: auto; } /* Archive card title */ .archive_card_title { font-size: 1.25rem; margin: 10px 16px 2px; line-height: 1.3; } .archive_card_title a:link, .archive_card_title a:visited { text-decoration: underline; } .archive_card_title a:hover, .archive_card_title a:focus { text-decoration: underline; } /* Archive card short description */ .archive_card p { margin: 0 16px 16px; font-size: 0.95rem; line-height: 1.45; color: #444; } /* Archive Card footer */ .archive_card_footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin-top: auto; /* pushes footer down */ border-top: 1px solid #eee; font-size: 0.9375em; } /* Card tags row */ .archive_card_tags_list { display: inline-flex; /* ← key change */ align-items: center; flex-wrap: wrap; gap: 6px; } /* Leading tag icon */ .archive_card_tags_list_icon { width: 22px; height: 22px; margin-right: 3px; } /* Card tag pills (small, same language as single pages) */ span.archive_card_tag_pill { display: inline-block; padding: 6px 10px; font-size: 0.78rem; line-height: 1; border-radius: 999px; text-decoration: none; background: #1e90ff; color: #fff; white-space: nowrap; } /******************************************/ /**************** PLACE CARD **************/ /******************************************/ .place_category_pill { position: absolute; top: 15px; left: 15px; background-color: rgba(69, 57, 12, 0.6); color: #fff; font-weight: 700; padding: 6px 12px; border-radius: 20px; font-size: 0.875em; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .place_card_pills { align-items: flex-start; /* stops equal-width pills */ position: absolute; top: 15px; left: 15px; display: flex; flex-direction: column; /* vertical stack */ gap: 6px; z-index: 2; } /* override absolute positioning when inside the container */ .place_card_pills .place_category_pill { position: static; width: fit-content; /* optional extra safety */ } /* Place distance and map */ .place_distance { background: none; border: 0; padding: 0; font: inherit; color: inherit; } .place_distance, .place_map_link { display: inline-flex; align-items: center; gap: 6px; } .place_distance::before { content: ""; width: 22px; height: 22px; background: url("../images/icons/place-extra-info-icons/path.png") no-repeat center / contain; } .place_map_link::before { content: ""; width: 22px; height: 22px; background: url("../images/icons/place-extra-info-icons/map.png") no-repeat center / contain; } /* Place card advice badge and quick insight */ .place_card_advice_badge { display: flex; align-items: center; gap: 6px; } .place_card_advice_badge img { width: 22px; height: 19px; } .place_card_quick_insight { font-weight: 600; white-space: nowrap; } /******************************************/ /**************** RECIPE CARD *************/ /******************************************/ /* Nothing special about recipe cards */ /******************************************/ /************** ARTICLE CARD **************/ /******************************************/ /* Article published date */ .article_published_date { background: none; border: 0; padding: 0; font: inherit; color: inherit; } .article_published_date { display: inline-flex; align-items: center; gap: 6px; } .article_published_date::before { content: ""; width: 22px; height: 22px; background: url("../images/icons/pen-nib.png") no-repeat center / contain; } /******************************************/ /************** CONTACT PAGE **************/ /******************************************/ /***** FORM STYLES (unchanged, reused) *****/ #contact_form input#name { color: #4A4A4A; display: block; font-size: 1.375em; width: 100%; margin: 0 0 4% 0; padding: 0.5em; border: solid 1px #ccc; } #contact_form input#email { color: #4A4A4A; display: block; font-size: 1.375em; width: 100%; margin: 0 0 4% 0; padding: 0.5em; border: solid 1px #ccc; } #contact_form textarea { color: #4A4A4A; display: block; font-size: 1.375em; width: 100%; margin: 0 0 6% 0; border: solid 1px #ccc; padding: 0.5em; } #contact_form input::placeholder, #contact_form textarea::placeholder { color: #bbb; font-style: italic; } #contact_form input#submit_button { display: block; font-weight: 500; font-size: 1.5em; background-color: #1f4180; color: #fff; width: 100%; padding: 12px 20px; border: none; border-radius: 6px; cursor: pointer; margin-bottom: 20px; } #contact_form .g-recaptcha { margin-bottom: 20px; } p.form_success { color: #28a745; font-size: 0.9em; margin: 0 0 20px 0; } p.form_error { color: #d9534f; font-size: 0.9em; margin: 0 0 20px 0; } /** * * ▄▄▄▄▄▄▄▄ * ▀▀▀██▀▀▀ * ██ ▄████▄ ████▄██▄ ██▄███▄ * ██ ██▄▄▄▄██ ██ ██ ██ ██▀ ▀██ * ██ ██▀▀▀▀▀▀ ██ ██ ██ ██ ██ * ██ ▀██▄▄▄▄█ ██ ██ ██ ███▄▄██▀ * ▀▀ ▀▀▀▀▀ ▀▀ ▀▀ ▀▀ ██ ▀▀▀ * ██ * */ /** * * ▄▄▄ ▄▄▄ ▄▄▄▄ ██ * ███ ███ ██▀▀██ ▀▀ * ████████ ██ ██ ██ ██ ▄████▄ ██▄████ ████ ▄████▄ ▄▄█████▄ * ██ ██ ██ ██ ██ ██ ██ ██▄▄▄▄██ ██▀ ██ ██▄▄▄▄██ ██▄▄▄▄ ▀ * ██ ▀▀ ██ ██ ██ ██ ██ ██▀▀▀▀▀▀ ██ ██ ██▀▀▀▀▀▀ ▀▀▀▀██▄ * ██ ██ ██ ██▄▄██▀ ██▄▄▄███ ▀██▄▄▄▄█ ██ ▄▄▄██▄▄▄ ▀██▄▄▄▄█ █▄▄▄▄▄██ * ▀▀ ▀▀ ▀▀ ▀▀▀██ ▀▀▀▀ ▀▀ ▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀ ▀▀▀▀▀ ▀▀▀▀▀▀ * ▀ * */ /** * * ▄▄▄▄▄ ▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄ * █▀▀▀▀██▄ ▀▀▀▀▀███ ██▀▀▀▀▀ * ▄██ ▄██ ██▄▄▄▄ * █████ ██ █▀▀▀▀██▄ * ▀██ ██ ██ * █▄▄▄▄██▀ ██ █▄▄▄▄██▀ * ▀▀▀▀▀ ▀▀ ▀▀▀▀▀ * * */ @media only screen and (min-width: 375px) { /* This media query targets mobile phones in portrait view */ } /** * * ▄▄▄▄▄▄▄ ▄▄▄▄ ▄▄▄ * ██▀▀▀▀▀ ██▀▀██ █▀██ * ██▄▄▄▄ ██ ██ ██ * █▀▀▀▀██▄ ██ ██ ██ ██ * ██ ██ ██ ██ * █▄▄▄▄██▀ ██▄▄██ ▄▄▄██▄▄▄ * ▀▀▀▀▀ ▀▀▀▀ ▀▀▀▀▀▀▀▀ * * */ @media only screen and (min-width: 501px) { #logo_claim { font-size: 23px; } } /** * * ▄▄▄▄▄▄▄▄ ▄▄▄▄ ▄▄▄ * ▀▀▀▀▀███ ██▀▀██ █▀██ * ▄██ ██ ██ ██ * ██ ██ ██ ██ ██ * ██ ██ ██ ██ * ██ ██▄▄██ ▄▄▄██▄▄▄ * ▀▀ ▀▀▀▀ ▀▀▀▀▀▀▀▀ * * */ @media only screen and (min-width: 701px) { } /** * * ▄▄▄▄▄▄▄▄ ▄▄▄▄ ▄▄▄▄ * ▀▀▀▀▀███ ▄██▀▀██▄ ██▀▀██ * ▄██ ██▄ ▄██ ██ ██ * ██ ██████ ██ ██ ██ * ██ ██▀ ▀██ ██ ██ * ██ ▀██▄▄██▀ ██▄▄██ * ▀▀ ▀▀▀▀ ▀▀▀▀ * * */ @media only screen and (min-width: 780px) { #site_wrapper { box-shadow: 0 0 8px #888888; } .wrapped_contents--long_form { padding: 6%; } /* Main page headings */ h4 { font-size: 1.4375em; } /* Header layout changes */ header { text-align: left; padding: 30px 0 20px 0; } header #gennarino { left: 314px; top: 7%; } /* ...first hide mobile stuff */ #contact_icon { display: none; } #mobile_menu_icon { display: none; } #mobile_logo_header { display: none; } /* Then make the desktop stuff appear */ /* THE HERO MENU */ #desktop_nav { display: block; text-transform: uppercase; font-size: 1.1875em; } #desktop_nav ul.menu { display: flex; position: relative; /* To position the hero drop down relative to the