/* Theme Name: kola Author: Your Name Description: My custom theme based on _s Version: 1.0.0 Text Domain: kola Domain Path: /languages */ /* * Global vars */ :root { /* * Typography */ /* font-family (Open Sans is added via Google Fonts as a web font in index.html header( */ --font-stack_sans: "Geologica", system-ui, Avenir, Helvetica, Arial, Verdana, sans-serif; --font-size_xs: 0.75rem; --font-size_sm: 0.875rem; --font-size_root: 16px; --font-size_l: 1.125rem; --font-size_xl: 1.375rem; --font-size_xxl: 1.75rem; --font-size_xxxl: 2.4rem; --font-size_xxxxl: 3.5rem; --line-height_xs: 1.1; --line-height_sm: 1.3; --line-height_md: 1.5; --line-height_lg: 1.7; --line-height_xl: 1.9; --line-height_xxl: 2.1; } :root { /* * Colors */ --color_black-100: #000000; --color_black-80: #4d4d4d; --color_black-60: #666666; --color_black-50: #999999; --color_black-40: #b3b3b3; --color_black-30: #cccccc; --color_black-20: #e6e6e6; --color_black-10: #f2f2f2; --color_blue-60: #4da6fe; --color_blue-50: #5aacfe; --color_blue-40: #80bffe; --color_blue-30: #b3d9ff; --color_blue-20: #cce6ff; --color_blue-10: #e6f2ff; --color_green-80: #2e5016; --color_green-50: #5ca02c; --color_green-20: #d5efc3; --color_green-10: #f1faeb; --color_yellow-70: #996600; --color_yellow-50: #ffaa00; --color_yellow-20: #ffd480; --color_yellow-10: #ffeecc; --color_red-60: #cc0000; --color_red-50: #e60000; --color_red-40: #ff2a2a; --color_red-30: #ff9999; --color_red-20: #ffcccc; --color_red-10: #ffe6e6; --color_success: var(--color_green-50); --color_warning: var(--color_yellow-50); --color_danger: var(--color_red-40); --color_info: var(--color_blue-60); --color_disabled: var(--color_black-30); --color_text-primary: #1a1a1a; --header_height: 100px; /* * Misc */ --border_radius_m: 11px; --border_radius_xxl: 20px; --max-page-width: 1440px; --spacing_xxs: 0.25rem; --spacing_xs: 0.5rem; --spacing_sm: 1rem; --spacing_m: 1.5rem; --spacing_ml: 2rem; --spacing_l: 3rem; --spacing_xl: 4rem; --spacing_xxl: 6rem; --spacing_xxxl: 8rem; } /* * */ :root { font-family: var(--font-stack_sans); line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: white; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #root { width: 100%; display: flex; flex-flow: column nowrap; align-items: center; } ul, p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } a { font-weight: 500; color: #646cff; text-decoration: inherit; } a:hover { color: #535bf2; } body { margin: 0; display: flex; min-width: 300px; min-height: 100dvh; } h1, h2, h3, h4, h5, h6 { font-weight: 600; } /* * Wordpress Accessability styles */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } /* Make the skip link visible when tabbing */ .skip-link:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.8rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px; position: absolute; top: 5px; text-decoration: none; width: auto; z-index: 100000; } /* * Global classes */ /* Layout */ .html { height: 100%; scroll-behavior: smooth; background-attachment: fixed; } .body { width: 100%; min-height: 100dvh; display: flex; flex-flow: column nowrap; /* font-size should be set on , otherwise chrome renders 1 px white line at the bottom of the page in mobile view */ font-size: var(--font-size_root); font-family: var(--font-stack_sans); color: var(--color_text-primary); line-height: 1.8; } @media screen and (min-width: 600px) { .body { font-size: var(--font-size_l); } } /* * Headings */ .page-title { font-size: 2.5rem; line-height: 1.1; font-weight: 600; text-align: center; } @media screen and (min-width: 500px) { .page-title { font-size: 3.2rem; line-height: 1.1; } } @media screen and (min-width: 900px) { .page-title { font-size: 5.5rem; } } /* * Link */ .link, .review-card a { color: inherit; text-decoration: underline; text-underline-offset: 0.4em; font-weight: 400; transition: text-decoration 0.5s linear; } .link:visited { color: inherit; } .link:hover { color: inherit; text-decoration: none; } .link:focus { color: inherit; text-decoration: none; outline: none; } .link:active { color: inherit; } .secondary-link { color: var(--color_black-50); text-decoration: none; transition: color 0.5s linear; } .secondary-link:visited { color: inherit; } .secondary-link:hover { color: inherit; text-decoration: none; } .secondary-link:focus { color: inherit; text-decoration: none; outline: none; } .secondary-link:active { color: inherit; } /* * Form input fields */ .textarea-input { padding: 0.4rem 0.8rem; border: none; background-color: var(--color_charcoal-10); border-radius: var(--border_radius_m); min-width: 7rem; height: var(--spacing_xxl); outline-color: var(--color_charcoal-40); color: var(--color_charcoal-100); } .text-input { /* Reset */ -webkit-box-sizing: border-box; /* Safari/Chrome */ -moz-box-sizing: border-box; /* Firefox */ box-sizing: border-box; -webkit-appearance: none; /* Safari/Chrome/Opera */ -moz-appearance: none; /* Firefox */ appearance: none; font-family: inherit; font-size: 1rem; /* Custom styles */ font-size: var(--font-size_l); line-height: 2; height: 3.2rem; width: 100%; min-width: 200px; padding: 0.35rem 0.75rem; margin: 0; display: block; color: var(--color_blue-60); background-color: var(--color_blue-10); border: none; border-radius: var(--border_radius_m); outline: none; } .text-input:focus, .textarea-input:focus { border: none; background-color: white; outline: 4px solid var(--color_blue-30); } .text-input::placeholder, .textarea-input::placeholder { color: var(--color_blue-50); opacity: 0.7; } /* * Form layout */ .form { display: grid; grid-template-rows: repeat(3, auto); width: 100%; } /* single input field + label tag */ .form__group { } .form_layout_col { display: flex; flex-flow: column nowrap; row-gap: var(--spacing_sm); } .form__layout_text-input { display: grid; grid-template-areas: "label input"; grid-template-columns: minmax(7rem, 25rem) minmax(50%, 1fr); justify-content: space-between; align-items: center; row-gap: var(--spacing_xs); column-gap: var(--spacing_ml); } @media (max-width: 330px) { .form__layout_text-input { display: grid; grid-template-columns: 1fr; grid-template-areas: "label" "input"; row-gap: var(--spacing_xs); column-gap: var(--spacing_sm); } } .form__layout_text-input_1col { display: grid; grid-template-columns: 1fr; grid-template-areas: "label" "input"; row-gap: var(--spacing_xs); column-gap: var(--spacing_sm); } .form__layout_textarea-input { display: grid; grid-template-areas: "label" "input"; align-items: flex-start; width: 100%; row-gap: var(--spacing_xs); column-gap: var(--spacing_sm); } .form__layout_checkbox-input { display: grid; grid-template-areas: "name checkbox"; grid-template-columns: minmax(80%, 0.7rem) minmax(auto, 3rem); row-gap: var(--spacing_xs); column-gap: var(--spacing_sm); } .form__layout_nested-rows { display: flex; flex-flow: column nowrap; row-gap: var(--spacing_xxs); } @media (max-width: 330px) { .form__layout_nested-rows { row-gap: 0; } } /* Form states and elements */ .form__text_success { text-align: right; color: var(--color_success); } .form__text_error { text-align: right; color: var(--color_danger); } .form__input-tip { color: var(--color_charcoal-50); font-size: var(--font-size_sm); letter-spacing: 0.015rem; } .form__label { display: flex; flex-flow: column nowrap; row-gap: 0; max-width: 100%; } .form__input-details { font-size: var(--font-size_sm); color: var(--color_charcoal-50); justify-self: flex-start; } /* * Misc */ .hr { height: 1px; background: var(--color_charcoal-20); width: 100%; border: none; padding: 0; margin: 0; } .hidden { display: none; } /* List with custim bullet points */ .itinerary__step ul, .full-post__content ul { display: grid; column-gap: 1rem; row-gap: var(--spacing_sm); margin-top: var(--spacing_m); list-style: none; } .itinerary__step ul li, .full-post__content ul li { position: relative; padding-left: 2rem; } .itinerary__step ul li::before, .full-post__content ul li::before { position: absolute; display: block; content: "\2022"; /* bullet point, for screen readers */ left: 0; top: 0; /* Align vertically relative to baseline */ width: 1.5em; height: 1.5em; color: transparent; background-repeat: no-repeat; background-size: contain; background-position: center; } @media screen and (max-width: 600px) { .itinerary__step ul li::before, .full-post__content ul li::before { } } /* .ul__li_bullet_star::before { background-image: url("img/icon_bullet_star.svg"); }*/ .itinerary__step ul li::before, .full-post__content ul li::before { background-image: url("img/icon_bullet_square.svg"); } /* */ .default-icon { box-sizing: border-box; margin: 0; /* Paths and strokes that overflow the viewBox can show in IE11. */ overflow: hidden; outline: none; transition: fill 0.2s ease, background-color 0.2s ease; cursor: pointer; } /* Prevents background scrolling on all platforms. This prvents the user from scrolling the background while the menu is open (refers to my scroll prevention code in js file) */ .no-scroll { overflow: hidden; overscroll-behavior: none; } /* For Safari */ @supports (-webkit-overflow-scrolling: touch) { body.no-scroll { position: fixed; width: 100%; } } /* * Headers */ .h1 { font-size: 2rem; line-height: var(--line-height_xs); font-weight: 400; } .h2 { font-size: var(--font-size_xxxl); line-height: var(--line-height_xl); } .h3 { font-size: var(--font-size_xxl); line-height: var(--line-height_xs); } .h4 { font-size: var(--font-size_xl); line-height: var(--line-height_md); } .h5 { font-size: var(--font-size_l); line-height: var(--line-height_sm); } .h6 { font-size: var(--font-size_root); line-height: var(--line-height_xs); } /* * Buttons */ .button { display: inline-flex; align-items: center; border-radius: 5000000px; border: none; padding: 0.5rem 1.2rem 0.6rem 1.2rem; min-height: 48px; font-size: 1em; font-weight: 400; font-family: inherit; white-space: nowrap; cursor: pointer; transition: background-color 0.25s, color 0.25s, opacity 0.25s; } .button:focus, .button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } /* Modifiers */ .button_state_disabled, .button:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; box-shadow: none; } .button_size_sm { font-size: 0.85rem; padding: 0.4rem 0.8rem; border-radius: 12px; } .button_size_lg { font-size: 1.2rem; padding: 1.2rem 2rem; } .button_type_primary { color: white; font-weight: 500; background-color: black; } .button_type_primary:hover { color: black; background-color: white; } .button_type_secondary { } .button_type_secondary:hover { } .button_type_tertiary { } .button_type_tertiary:hover { } /* * Typography */ /* : Use a value from 100 to 900 */ /* : Use a unique and descriptive class name */ .geologica-font { font-family: var(--font-stack_sans); font-optical-sizing: auto; font-style: normal; font-variation-settings: "slnt" 0, "CRSV" 0, "SHRP" 0; } .text-size-sm { font-family: var(--font-stack_sans); font-size: var(--font-size_sm); letter-spacing: 0.02rem; } .text-size-l { font-family: var(--font-stack_sans); font-size: 1.3rem; line-height: 1.6; } @media screen and (max-width: 600px) { .text-size-l { font-size: 1rem; line-height: 1.7; letter-spacing: 0.01rem; } } .section__title { text-align: center; margin-top: var(--spacing_xl); margin-bottom: var(--spacing_l); } /* */ .text-color-success { color: var(--color_success); } .text-color-warning { color: var(--color_danger); } .font-weight-normal { font-weight: 400; } .font-weight-semibold { font-weight: 600; } /* * * * Custom website styles * * */ .main { flex-grow: 1; } .side-padding { padding: 0 clamp(15px, 3%, 3%); } .price-xxl { font-size: var(--font-size_xxl); font-weight: 900; } /* * Common Input styles */ /* Application Form */ .send-inquire-form { display: flex; flex-flow: column nowrap; row-gap: 0.7rem; border-radius: 1rem; min-width: 220px; max-width: 460px; padding: 1rem; background-color: white; } .send-inquire-form_centered { align-self: center; margin: 0 auto; } .send-inquire-form__label { display: none; } .submit-button { font-size: var(--font-size_l); width: 100%; overflow: hidden; height: 3.2rem; padding: 10px 20px; background-color: var(--color_blue-50); color: white; border: none; cursor: pointer; border-radius: var(--border_radius_m); -webkit-border-radius: var(--border_radius_m); } .submit-button:hover { background-color: var(--color_blue-60); } .submit-button:focus { } .privacy-warning { color: var(--color_black-40); font-size: var(--font-size_sm); width: 100%; } /* ***************************************************** * Page styles ***************************************** * **************************************************** */ /* * * * Wordpress extra styles * * */ .hidden-fields-container { display: none; } /* Redefine