:root{ /* Color palette */ --bg: #ffffff; --surface: #f7f8fa; --text: #111827; --muted: #6b7280; --primary: #131145; --primary-600: #1d4ed8; --accent: #06b6d4; --success: #16a34a; --danger: #dc2626; --glass: rgb(255 255 255 / 70%); /* Spacing & sizes */ --container-max: 3200px; --main-container-max: 2400px; --radius: 8px; --shadow-sm: 0 1px 2px rgba(16,24,40,0.05); --shadow-md: 0 6px 18px rgba(15,23,42,0.08); /* Typography */ --font-sans:'Cicle', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; --base-font-size: 16px; --line-height: 1.5; } /* Dark theme override (optional): add data-theme="dark" on or */ [data-theme="dark"]{ --bg: #0b1220; --surface: #0f1724; --text: #e6eef8; --muted: #9aa7bf; --primary: #60a5fa; --primary-600: #3b82f6; --accent: #0891b2; --glass: rgba(255,255,255,0.03); } [data-theme="dark"] #bg-video{ opacity: 0.04; } img#bg-img { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 1; pointer-events: none; } /* ------------------------- Reset / Base ------------------------- */ *, *::before, *::after{ box-sizing: border-box; } html{ font-size: var(--base-font-size); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: var(--line-height); } body{ margin: 0; min-height: 100vh; /* faded background image + solid background on top to keep text readable */ color: var(--text); } /* Remove default link styles where appropriate */ a{ color: inherit; text-decoration: none; } img, picture, svg{ max-width: 100%; display: block; } /* ------------------------- Layout Helpers ------------------------- */ .container{ max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: 5rem; padding-right: 5rem; } main.container { max-width: var(--main-container-max); } /* Simple responsive grid */ .row{ display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr); } .col-6{ grid-column: span 6; } .col-4{ grid-column: span 4; } .col-3{ grid-column: span 3; } /* Flex helpers */ .flex{ display: flex; } .items-center{ align-items: center; } .justify-between{ justify-content: space-between; } .gap-sm{ gap: .5rem; } .gap-md{ gap: 1rem; } /* ------------------------- Header / Nav ------------------------- */ .header{ background: linear-gradient(180deg, rgba(255,255,255,0.6), var(--surface)); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 40; box-shadow: var(--shadow-sm); } .header-inner{ display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; } .brand{ font-weight: 600; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--text); } .nav{ display: flex; align-items: center; gap: 0.75rem; } .nav a{ padding: .45rem .6rem; border-radius: 6px; color: var(--muted); font-size: .95rem; transition: color .15s, background .15s, transform .08s; } .nav a:hover{ color: var(--text); background: rgba(0,0,0,0.03); transform: translateY(-1px); } /* Mobile nav toggle (simple) */ .nav-toggle{ display: none; background: transparent; border: none; font-size: 1.25rem; } /* Logo */ .logo{ display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.125rem; color: var(--text); vertical-align: middle; } .logo img{ width: 224px; height: 34px; object-fit: cover; display: block; } /* ------------------------- Hero ------------------------- */ .hero{ padding: 3.5rem 0; text-align: center; display: none; } .hero h1{ font-size: clamp(1.5rem, 3.5vw, 2.25rem); margin: 0 0 .5rem 0; } .hero p{ color: var(--muted); max-width: 65ch; margin: 0 auto; } /* ------------------------- Cards ------------------------- */ /* Cards grid and clickable card styles */ .cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin: 1rem 0; justify-items: center; transition-duration: 2000ms; transform: translateY(1500px); opacity: 0; } .coming_down{ transform: translateY(0px); } /* Use more specific selector to override any existing .card rules */ .cards .card{ display: block; background: var(--glass); /* semi-transparent */ border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; border: 1px solid rgba(0,0,0,0.04); max-width: 300px; /* transition-duration: 2000ms; transform: translateY(-1500px); */ /* transform: translateY(-1500px) matrix3d(1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1); */ } /* Image area */ .card-img{ width: 100%; /* aspect-ratio: 1/1; */ min-height: 108px; object-fit: cover; display: block; height: 200px; } /* Body area under the image */ .card-body{ padding: 0 0 0.9rem; } .card-title{margin: 0 0 0.35rem 0;font-weight: 700;text-align: center;color: #e98023;height: 70px;line-height: 70px;font-size: 22px;} .card-text{ margin: 0; color: var(--muted); font-size: .95rem; } /* Hover & focus */ .cards .card:hover, .cards .card:focus{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(2,6,23,0.08); outline: none; } .cards .card:focus{ box-shadow: 0 12px 30px rgba(2,6,23,0.12), 0 0 0 3px rgba(37,99,235,0.08); } .custom-divider{padding: 0 110px;margin-top: 10px;visibility: hidden;} .custom-divider line { /* Define the dash-gap pattern: Dash 1 (long), Gap 1, Dash 2 (short), Gap 2, Dash 3 (long), etc. The pattern repeats after the last value. Adjust these pixel values (px) to change the dash and gap lengths. */ stroke-dasharray: 20px 5px 5px 5px 20px 5px; stroke-linecap: round; /* Optional: Makes the dash ends rounded */ stroke: #00000030; } /* ------------------------- Buttons ------------------------- */ .btn{ display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; font-size: .95rem; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .btn:active{ transform: translateY(1px); } .btn-primary{ background: linear-gradient(180deg, var(--primary), var(--primary-600)); color: white; box-shadow: 0 6px 18px rgba(37,99,235,0.18); } .btn-primary:hover{ filter: brightness(.98); } .btn-ghost{ background: transparent; border: 1px solid rgba(0,0,0,0.06); color: var(--text); } /* Small / large modifiers */ .btn-sm{ padding: .35rem .6rem; font-size: .85rem; border-radius: 6px; } .btn-lg{ padding: .8rem 1.2rem; font-size: 1.05rem; border-radius: 10px; } /* ------------------------- Forms ------------------------- */ input, textarea, select{ padding: .4rem .75rem; border-radius: 8px; border: 1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.6); outline: none; font-size: .95rem; color: var(--text); box-shadow: var(--shadow-sm) inset; width: 210px; unicode-bidi: plaintext; } input:focus, textarea:focus{ border-color: var(--primary); box-shadow: 0 4px 12px rgba(37,99,235,0.08); } /* ------------------------- Tables ------------------------- */ .table{ width: 100%; border-collapse: collapse; background: transparent; } .table th, .table td{ padding: .75rem .9rem; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.04); } .table th{ color: var(--muted); font-weight: 600; font-size: .9rem; } /* ------------------------- Utilities ------------------------- */ .sr-only{ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .hidden{ display: none !important; opacity: 0; } .center{ display: grid; place-items: center; } .text-muted{ color: var(--muted); } .round{ border-radius: 9999px; } /* ------------------------- Simple Animations ------------------------- */ .fade-in{ animation: fadeIn .45s ease both; } @keyframes fadeIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } } .site-header .container, .site-header .header-inner{ display: flex; justify-content: space-between; align-items: center; padding: 1.75rem 49px; } /* Menu area (label + button) */ .menu-area{ display: inline-flex; align-items: center; gap: .5rem; } .menu-btn{ display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: none; padding: .35rem .45rem; font-size: .95rem; color: var(--muted); border-radius: 6px; cursor: pointer; transition: background .12s ease, color .12s ease, transform .08s; } .menu-btn:hover{ color: var(--text); background: rgba(0,0,0,0.03); transform: translateY(-1px); } .menu-btn:focus{ outline: 0px solid var(--primary); outline-offset: 2px; } /* textual label inside button */ .menu-label{ font-weight: 600; color: inherit; font-size: .95rem; line-height: 1; } /* icon image */ .menu-icon{ width: 20px; height: 20px; display: block; object-fit: contain; } /* Background video (fills screen, sits under content) */ #bg-video{ position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; /* low opacity - tweak 0.02..0.18 */ pointer-events: none; } #page, .site-header, main, .site-footer{ position: relative; z-index: 1; opacity: 1; transition-duration: 1500ms; } .not_shown{ opacity: 0; } .is_hidden{ pointer-events: none; opacity: 0; } section{ transition-duration: 1500ms; } /* Loader overlay (covers viewport while video loads) */ #loader{ position: fixed; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,0.92); z-index: 1000; transition: opacity .35s ease, visibility .35s; display: none !important; } #loader.hidden{ opacity: 0; visibility: hidden; pointer-events: none; } /* simple loader appearance */ .loader-inner{ font-weight: 600; color: var(--muted); padding: 1rem 1.25rem; border-radius: 10px; background: rgba(255,255,255,0.6); box-shadow: var(--shadow-sm); } .actions{ display: flex; margin: 3.05rem 0; justify-items: center; justify-content: center; flex-wrap: wrap; } .actions .wide-btn{ display: inline-flex; align-items: center; justify-content: center; width: 200px; padding: 0.95rem 1.2rem; border-radius: var(--radius); font-weight: 700; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; margin: 10px 30px; font-size: 16px; } /* Use existing button variants but ensure full-width appearance */ .btn-primary.wide-btn{ background: var(--primary); color: #fff; border: none; box-shadow: var(--shadow-md); } .btn-ghost.wide-btn{ background: transparent; color: var(--text); border: 1px solid rgba(0,0,0,0.06); } /* Footer: dark blue background and side padding */ .site-footer{ /* adjust as needed */ color: #ffffff; } .site-footer .container{ padding-left: 2.5rem; padding-right: 2.5rem; display: flex; justify-content: space-between; align-items: center; background: #131145; margin: 0 50px; height: 80px; } .site-footer a{ color: rgba(255,255,255,0.92); text-decoration: none; } .site-footer .logo img { width: 40px; height: auto; } a.social-link { display: flex; flex-direction: row-reverse; flex-wrap: nowrap; margin: 0 5px; align-content: center; align-items: center; } a.social-link img { height: 16px; width: auto; } .footer-socials { display: flex; } footer.site-footer span { direction: ltr; margin: 0 0px; font-size: 14px; unicode-bidi: plaintext; } html, body, #page{ height: 100%; } /* page column layout */ #page{ min-height: 100vh; display: flex; flex-direction: column; } /* main grows to fill available space */ main.container{ flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; } /* footer shouldn't shrink */ .site-footer{ display: block; margin: auto; max-width: 100%; width: var(--container-max); } /* make container padding responsive (avoid large fixed side padding) */ .container{ max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: clamp(0.75rem, 4vw, 3rem); padding-right: clamp(0.75rem, 4vw, 3rem); } /* footer inner spacing */ .site-footer .container{ padding-left: clamp(0.75rem, 4vw, 2.5rem); padding-right: clamp(0.75rem, 4vw, 2.5rem); display: flex; justify-content: space-between; align-items: center; } section.plant_form { position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; background: var(--glass); z-index: 2; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); transition-duration: 500ms; } section.plant_form form { width: 400px; background: white; height: fit-content; padding: 20px 30px; max-width: 100%; color: #000000; border-radius: 15px; box-shadow: #00000029 0px 0px 4px 0px; display: flex; flex-direction: column; align-content: center; align-items: center; position: relative; margin: 0px 20px; } section.plant_form form input[type="submit"] { background: var(--primary); padding: 10px 40px; border-radius: 10px; border: none; color: white; font-weight: 700; font-size: 20px; margin-top: 10px; } section.plant_form form h2 { font-weight: 700; margin: 10px 0; color: #e98023; } section.plant_form form div { display: flex; justify-content: space-between; width: 100%; margin: 9px 0px; } form button.close-btn { position: absolute; right: 10px; top: 10px; font-size: 42px; width: 30px; height: 30px; text-align: center; margin: auto; display: flex; justify-content: center; align-items: center; background: transparent; border: transparent; padding: 18px; } /* Container for centering the loader (optional, but good practice) */ .loader-container { display: none; justify-content: center; align-items: center; min-height: 100px; /* Adjust as needed */ /* Add background or overlay styles here if you want it to cover content */ /* background-color: rgba(255, 255, 255, 0.8); */ /* position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; */ position: fixed; z-index: 99999; background: var(--glass); width: 100%; height: 100%; backdrop-filter: blur(10px); } /* The actual spinner loader */ .spinner-loader { border: 4px solid rgba(0, 0, 0, 0.1); /* Light gray border for the base */ border-top: 4px solid #3498db; /* Blue border for the spinning part */ border-radius: 50%; /* Makes it a perfect circle */ width: 40px; /* Size of the loader */ height: 40px; /* Size of the loader */ animation: spin 1s linear infinite; /* Apply the spinning animation */ } .model { position: fixed; width: 100%; height: 100%; background: var(--glass); backdrop-filter: blur(10px); z-index: 100000; display: flex; justify-content: center; align-items: center; } .model-content { width: fit-content; margin: auto; height: 200px; text-align: center; max-width: 100%; padding: 10px; background: var(--glass); border-radius: 13px; box-shadow: #00000024 0px 0px 5px; min-width: 300px; } button.model-close { background: var(--primary); color: white; padding: 10px 20px; border-radius: 10px; border: none; font-size: 16px; font-weight: 700; } .map_details { width: fit-content; width: 60%; position: relative; max-width: 900px; color: black; } .map_details .title span, .stat-title span { display: inline-block; } .map_details .title { font-size: 57px; font-weight: 700; color: #e88024; margin-bottom: 9px; } .map_details .description { font-size: 28px; max-width: 100%; width: fit-content; min-height: 60px; margin-bottom: 45px; } .map_details .stats, .map_details .temp_stats { display: flex; justify-content: space-between; margin-bottom: 20px; } .map_details .stats{ display: none; } .map_details .stats .stat, .map_details .temp_stats .stat { display: flex; align-items: center; opacity: 0; padding: 0 0px; width: fit-content; gap: 0 17px; } .map_details .temp_stats .stat { opacity: 1; border: solid; border-radius: 15px; border-color: #00000008; width: fit-content; display: block; padding: 0; text-align: center; margin: 0 0px; height: 194px; padding: 0px; display: flex; align-content: flex-start; } .map_details .stats .stat .value, .map_details .temp_stats .stat .value { display: flex; flex-direction: column; height: 100%; justify-content: center; gap: 0 10px; } .map_details .stats .stat .value .stat-title, .map_details .temp_stats .stat .value .stat-title { font-weight: 700; color: var(--primary); font-size: 19px; margin-bottom: -10px; min-height: 60px; display: block; } .map_details .stats .stat .stat-number { width: fit-content; font-size: 55px; font-weight: 700; color: #e98023; font-family: 'Roboto'; min-height: 36px; } .map_details .temp_stats .stat .stat-number { width: 100%; font-size: 46px; font-weight: 700; color: #e98023; height: auto; font-size: clamp(30px, 3vw, 40px); text-align: center; font-family: 'Roboto'; } .icon.bigger {height: 100px !important;margin-top: -4px;margin-right: -30px;} .icon {height: 83px !important;margin-top: -4px;} .full-container{ width:100% } section.map_section { background-color: #f9f9f9; display: flex; justify-content: space-between; align-items: center; padding: 3.75rem 91px; width: 100%; height: 100%; } .corner_bg { background-image: url(../imgs/svg/map_header-02.svg); background-repeat: no-repeat; background-position: right top; background-position-y: -10px; background-size: 87px 36px; } .map-img img { height: 515px; } .map-img svg { height: 100%; width: 100%; } .map-img { width: calc(40% - 50px); display: flex; justify-content: center; height: 100%; } .map_buttons .color { width: 40%; aspect-ratio: 2/1; } .map_buttons .btn {display: flex;align-items: center;background: transparent;padding: 10px;font-size: 18px;font-weight: 100;width: 101px;justify-content: center;flex-wrap: wrap;text-align: center;flex-direction: column;box-shadow: #e2e2e2 0px 0px 0px 1px;flex: 1 1 calc((100% / 5) - 50px);aspect-ratio: 1/1;max-width: 122px;min-width: 100px;} .map_buttons { display: flex; width: 100%; flex-wrap: wrap; grid-template-columns: repeat(5, 1fr); margin-top: 40px; justify-items: center; justify-content: space-between; row-gap: 30px; column-gap: 50px; } .map_buttons .btn span { min-height: 20px; } .footer-contact a { display: flex; flex-direction: row; font-size: 14px; margin: 10px 0; justify-content: space-between; } .footer-contact a img { padding: 0px 10px; } section.plant_form form .description { font-size: 18px; margin: 20px 0px; } .map_details .description span { display: inline; } .map_details .stats .stat .value .stat-title {height: fit-content;font-size: 25px;height: 35px;min-height: unset;} .map_details .temp_stats .stat .value { padding: 0 10px; } .map_details .stats{ max-width: calc(95%); } form label { unicode-bidi: plaintext; text-align: right; } [lang="en"] form label { unicode-bidi: plaintext; text-align: left; } /* The keyframe animation for spinning */ @keyframes spin { 0% { transform: rotate(0deg); } /* Start at 0 degrees rotation */ 100% { transform: rotate(360deg); } /* End at 360 degrees rotation */ } @font-face{ font-family: 'Cicle'; src: url('./fonts/CicleFina.ttf') format('trueType'); font-weight: 400; font-style: normal; font-display: swap; } @font-face{ font-family: 'Cicle'; src: url('./fonts/CicleGordita.ttf') format('trueType'); font-weight: 700; font-style: normal; font-display: swap; } @font-face{ font-family: 'GES'; src: url('./fonts/GESSTwoMedium.otf') format('trueType'); font-weight: 400; font-style: normal; font-display: swap; } @font-face{ font-family: 'Roboto'; src: url('./fonts/Roboto-Bold.ttf') format('trueType'); font-weight: 700; font-style: normal; font-display: swap; } /* ------------------------- Responsive ------------------------- */ @media (max-width: 900px){ .row{ grid-template-columns: repeat(6, 1fr); } .col-6{ grid-column: span 6; } .col-4{ grid-column: span 6; } /* stack */ .nav a{ display: none; } /* simple hide for mobile; JS can toggle */ .nav-toggle{ display: inline-flex; } .header-inner{ gap: .5rem; } .hero{padding: 2.25rem 0;} .cards{grid-template-columns: repeat(1, 1fr);} } @media (max-width: 480px){ html{ font-size: 15px; } .row{ gap: .75rem; } .hero h1{ font-size: 1.25rem; } .logo img{width: auto;height: 30px;} .cards{ grid-template-columns: 1fr; } .card-img{ min-height: 200px; } .header-inner { padding: 1.75rem 15px !important; } .footer-inner { padding: 1.75rem 15px !important; margin: 0 10px !important; } .container, .site-footer .container{ padding-left: 0.75rem; padding-right: 0.75rem; } .cards .card{ max-width: 260px; width: 400px } .custom-divider { padding: 0 70px; margin-top: 20px; } .card-body { padding: 0 0 0; } .card-title { margin: 0 0 0rem 0; font-weight: 700; height: 59px; line-height: 50px; } .card-img { height: 150px; min-height: 108px; } .map_buttons { grid-template-columns: repeat(3, 1fr); justify-items: center; row-gap: 30px; column-gap: 0px; } section.map_section { padding: 50px 0; display: flex; flex-direction: column; } .map_details .stats .stat, .map_details .temp_stats .stat { padding: 0 0px; text-align: center; width: 100%; text-align: center; display: flex; justify-content: center; margin: 12px 0; } .map_details .stats, .map_details .temp_stats{ flex-wrap: wrap; max-width: 100%; } .map_buttons .btn{margin: 10px 0;flex: 1 1 calc((100% / 2) - 40px);max-width: calc(50% - 20px);} .map_details .temp_stats .stat{ width: 100%; height: 128px; margin: 10px 0px; } .map_details{ width:100%; padding: 0 30px; } .map-img{ width:100%; margin-top: 20px; padding: 0 30px; } .site-footer .logo img{ width: 22px; } footer.site-footer span{ font-size: 13px; } section.plant_form form{ padding: 9px 15px; } section.plant_form form .description{ font-size: 16px; margin: 4px 0px; } .map_details .title{ font-size: 38px; text-align: center; } .map_details .description{ font-size: 20px; text-align: center; } .map_details .stats .stat .stat-number{ font-size: 36px; width: 100%; } .icon{ height: 80px !important; margin-top: -4px; } .map_details .stats .stat .value .stat-title, .map_details .temp_stats .stat .value .stat-title{ min-height: auto; height: fit-content; } [lang="en"] .site-footer span{ font-size: 14px; } } /* Responsive: stack buttons on narrow screens */ @media (max-width: 600px){ .actions{ grid-template-columns: 1fr; } } /* End of stylesheet */