/*
Theme Name: DayTrip Theme
Theme URI: www.e-com.hr
Description: A custom child theme for the Divi Theme.
Author: E-COM
Author URI: www.e-com.hr
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: daytrip-theme
*/
/* ==========================================================================
Google Fonts Import
Rubik → headings
Jost → body text (paragraphs, lists, etc.)
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&family=Jost:wght@300;400;500;600;700&display=swap');
/* ==========================================================================
Global Typography
========================================================================== */
/* -- Body / default font -------------------------------------------------- */
/* Applies Jost to everything by default: paragraphs, lists, spans, etc. */
body {
font-family: 'Jost', sans-serif !important;
}
/* -- Headings ------------------------------------------------------------- */
/* Override all heading levels to use Rubik. */
h1, h2, h3, h4, h5, h6,
.et_pb_module_header, /* Divi module titles */
.et_pb_slide_title, /* Divi slider titles */
.et_pb_toggle_title { /* Divi toggle/accordion titles */
font-family: 'Rubik', sans-serif !important;
color: #061423;
}
/* -- Body text catch-all -------------------------------------------------- */
/* Ensures Divi-generated elements that sometimes bypass inherit Jost. */
p,
li,
ol,
ul,
a,
span,
blockquote,
label,
input,
textarea,
select,
td,
th,
.et_pb_text_inner, /* Divi text module content */
.et_pb_blurb_description, /* Divi blurb descriptions */
.et_pb_toggle_content, /* Divi toggle/accordion body text */
.et_pb_tab_content, /* Divi tab body text */
.et_pb_pricing_content li { /* Divi pricing table features list */
font-family: 'Jost', sans-serif !important;
}
h1 {
font-weight:400;
font-size: 80px;
line-height: 80px;
}
h2 {
font-weight:400;
font-size: 60px;
line-height: 60px;
padding-bottom: 40px !important;
}
h3 {
font-weight:400;
font-size: 30px;
line-height: 30px;
}
@media (max-width: 980px) {
h1 {
font-size: 48px;
line-height: 50px;
}
h2 {
font-size: 36px !important;
line-height: 38px;
padding-bottom: 18px !important;
}
h3 {
font-size: 22px !important;
line-height: 24px;
}
}
/* ==========================================================================
Custom Styles
========================================================================== */
/* --------------------------------------------------------------------------
Icon + Text Row Component
Used in Divi Code Modules for icon-label pairs (e.g. feature lists).
-------------------------------------------------------------------------- */
.ico-text-row {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 18px;
}
.ico-text-row i {
display: inline-flex;
flex-shrink: 0;
line-height: 0;
}
.ico-text-row p {
margin: 0 !important;
padding: 0 !important;
font-size: 18px;
color: #38434F;
line-height: 1.4;
}
/* --------------------------------------------------------------------------
Asymmetric Dividers
Two decorative horizontal rules that span ~75% of the container width.
One is pinned to the left edge, the other to the right edge.
Usage in a Divi Code Module:
Make sure the parent Divi row/section has NO side padding so the
divider truly starts from the container edge.
-------------------------------------------------------------------------- */
/* -- Shared base styles for both dividers --------------------------------- */
.divider-left,
.divider-right {
/* Match the original SVG: 8px tall, light grey */
height: 8px;
background-color: #E9E9E9;
/* 75% of the parent container on desktop */
width: 65%;
/* No extra space by default — let the Divi module handle vertical spacing */
margin-top: 0;
margin-bottom: 0;
/* Remove any border/outline Divi might inject */
border: none;
outline: none;
}
/* -- Left-aligned divider ------------------------------------------------- */
/* Starts at the left edge; right side has the remaining 25% gap. */
.divider-left {
margin-left: 0;
margin-right: auto; /* pushes the bar to the left */
}
/* -- Right-aligned divider ------------------------------------------------ */
/* Starts at the right edge; left side has the remaining 25% gap. */
.divider-right {
margin-left: auto; /* pushes the bar to the right */
margin-right: 0;
}
/* --------------------------------------------------------------------------
Responsive Adjustments
On smaller screens the 75% width looks too short, so we progressively
widen the dividers to keep them visually balanced.
-------------------------------------------------------------------------- */
/* -- Tablet (≤ 768px) ----------------------------------------------------- */
@media (max-width: 768px) {
.divider-left,
.divider-right {
width: 85%; /* a bit wider so the line doesn't look stubby */
}
}
/* -- Mobile (≤ 480px) ----------------------------------------------------- */
@media (max-width: 480px) {
.divider-left,
.divider-right {
width: 92%; /* nearly full-width; keeps a subtle asymmetric feel */
height: 6px; /* slightly thinner so it doesn't dominate small screens */
}
}