/* -------------------------------------------------- style_job.css (Simplified) Imports common styles from style_index.css and includes only what's unique or overridden. -------------------------------------------------- */ /* If needed, you can also @import within CSS: @import url('style_index.css'); But typically you'd just add both link tags in . */ /* -------------------------------------------------- 0) Global Overrides/Resets (If needed) -------------------------------------------------- */ /* Example: Force no underlines for all , unless we want them in certain places: */ a { text-decoration: none; } /* -------------------------------------------------- 1) Unique/Custom Classes for Job Detail Pages -------------------------------------------------- */ /* The "back button" at the top left, if not defined in style_index.css */ .back-button { background-color: #fff; color: #0021A7; border: none; padding: 10px; cursor: pointer; border-radius: 20px; font-weight: 500; font-size: small; text-decoration: none; /* no underline */ } .back-button:hover { background-color: #333; color: #fff; } /* The main job-detail container (unique layout for detail pages) */ .job-detail { display: flex; justify-content: center; margin: 20px auto; gap: 10px; /* We can override .job-listing or other index defaults here */ padding: 0 50px; /* Desktop padding; changed via media queries below */ } /* The main job-description area (white box with text) */ .job-description { display: flex; flex-direction: column; padding: 20px; width: 42%; gap: 15px; background-color: #fff; border-radius: 20px; font-size: small; } /* The optional image container on the right */ .job-image { width: 40%; display: flex; justify-content: center; align-items: baseline; } .job-image img { max-width: 100%; height: auto; border-radius: 20px; } /* If you have special container for success messages, forms, etc. */ .success-message { display: flex; justify-content: center; margin: 20px auto; gap: 10px; padding: 0 50px; } /* Company / position / date row at top */ .company-name { display: flex; justify-content: space-between; gap: 10px; flex-direction: row; margin-bottom: 20px; } .company-name span { display: flex; align-items: center; } /* Tag container (reuse your existing .tags styles from index, or override if you want a different look) */ .tags { display: flex; flex-wrap: wrap; justify-content: flex-start; row-gap: 5px; column-gap: 10px; } /* If you want to override the .tags span from style_index, do it here: .tags span { background-color: #f1f1f1; color: #0021A7; padding: 5px 10px; border-radius: 20px; line-height: 15px; } */ /* The main job-description text */ .job-description-text { margin-bottom: 20px; } /* Contact details in the job listing */ .contact { display: flex; flex-direction: column; gap: 10px; } .contact-row { display: flex; flex-direction: column; gap: 5px; } .contact-category { width: 200px; font-weight: 600; /* Example: highlight category label */ } .contact-value, .contact-value-italic { background-color: #f1f1f1; border-radius: 20px; padding: 5px 10px; width: 100%; font-weight: 500; } .contact-value-italic { font-style: italic; } .contact-value-row { display: flex; flex-direction: row; gap: 5px; } /* Copy button (if used for copying contact data) */ .copy-button { background-color: #0021A7; border-radius: 20px; padding: 4px 7px; width: fit-content; height: fit-content; color: #fff; /* ensure text is visible */ cursor: pointer; } .copy-button i { font-size: smaller; } /* The application button, if you have one */ .apply-btn { background-color: #0021A7; color: #fff; width: fit-content; border: none; padding: 10px 20px; cursor: pointer; border-radius: 20px; text-decoration: none; } .apply-btn:hover { background-color: #0056b3; } /* An "impressum" box if used on job detail pages */ .impressum { display: flex; flex-direction: column; align-items: center; padding: 20px; gap: 20px; background-color: #fff; border-radius: 20px; text-align: center; } /* newsletter-container, etc. if you specifically use them here */ .newsletter-container { display: flex; flex-direction: row; /* or column if different from index */ /* etc... */ } .newsletter-text { display: flex; flex-direction: column; gap: 15px; } /* Example forms */ .form-field input, .form-field textarea { /* If you want them different from index, define here. Else rely on style_index’s form styles. */ font-size: small; padding: 10px; border-radius: 20px; border: 1px solid #ccc; } /* -------------------------------------------------- 2) Media Queries Adjust only what's different vs. index on job pages -------------------------------------------------- */ @media only screen and (max-width: 768px) { .job-detail { flex-direction: column; padding: 0 15px; } .job-description { width: 100%; order: 2; box-sizing: border-box; } .job-image { order: 1; width: 100%; margin-bottom: 10px; } .company-name { gap: 15px; /* or 40px if you prefer */ } /* etc. for other unique mobile overrides */ } .company-name, .tags, .job-description-text, .apply-btn { margin-bottom: 20px; margin-block-end: 0; margin-block-start: 0; } /* --- Add this at the end of style_job.css --- */ /* Add padding to the bottom of the page to prevent the sticky bar from hiding content */ body { padding-bottom: 100px; } /* The sticky bar container */ .sticky-cta-bar { position: fixed; /* Fixes the element to the viewport */ bottom: 0; left: 0; width: 100%; background-color: #ffffff; /* White background */ padding: 15px 0; display: flex; justify-content: center; align-items: center; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Shadow on top for depth */ z-index: 999; /* Ensures it stays on top of other content */ } /* We can reuse the existing button style, but we might want it to be a bit bigger in the bar */ .sticky-cta-bar .apply-btn { padding: 12px 30px; /* Slightly larger padding for prominence */ font-size: 1rem; /* A clear, readable font size */ } /* --- Add this new CSS at the end of style_job.css --- */ /* The wrapper to stack the sub-text and button vertically and center them */ .cta-content-wrapper { display: flex; flex-direction: column; align-items: center; } /* The small grey text above the button */ .cta-subtext { color: #666666; /* A subtle grey color */ font-size: 12px; margin: 0 0 5px 0; /* Removes default margins and adds 5px space below */ line-height: 1; /* Ensures tight line spacing */ } /* --- Photo slider styles for job detail --- */ .job-photo-slider { margin-bottom: 20px; } .job-photo-slider .carousel { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: #fff; } .job-photo-slider .slides { display: flex; width: 100%; height: 100%; scroll-snap-type: x mandatory; overflow-x: scroll; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .job-photo-slider .slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; position: relative; } .job-photo-slider .slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; user-select: none; pointer-events: none; } .job-photo-slider .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0,0,0,0.35); color: #fff; font-size: 18px; line-height: 1; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 5; transition: background 0.15s ease; opacity: 0; } .job-photo-slider .carousel:hover .nav, .job-photo-slider .nav:focus { opacity: 1; } .job-photo-slider .prev { left: 8px; } .job-photo-slider .next { right: 8px; } .job-photo-slider .dots { display: flex; justify-content: center; gap: 4px; padding: 8px 0 0; } .job-photo-slider .dot { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; transition: background 0.2s ease, transform 0.2s ease; } .job-photo-slider .dot.active { background: #3897f0; transform: scale(1.4); } .job-photo-slider ::-webkit-scrollbar { display: none; }