/* -------------------------------------------------- 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; } html{ width:100%; overflow-x:hidden; } body{ background:#f0f0f0; color:#0f1c3d; font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display:flex; flex-direction:column; min-height:100vh; overflow-x:hidden; } /* -------------------------------------------------- Header & hero -------------------------------------------------- */ header { background:#ffffff; padding:15px 0; box-shadow:0 2px 4px rgba(0,0,0,0.1); } .header-content{ margin:0 auto; display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; width:100%; max-width:1100px; padding:0 20px; } .logo-link{display:inline-block;} .logo-container{ display:flex; align-items:center; gap:10px; } .logo{ height:40px; } .site-title{ font-weight:600; color:#0021A7; font-size:1.2rem; } .header-links{ display:flex; align-items:center; gap:12px; min-width:0; } .header-link{ font-weight:600; color:#333; padding:8px 10px; border-radius:8px; transition:background-color 0.2s ease, color 0.2s ease; font-size:0.95rem; text-decoration:none; } .header-link:hover{ background-color:#e7ebff; color:#0021A7; text-decoration:none; } .header-link.primary{ background-color:#0021A7; color:#fff; } .header-link.primary:hover{ background-color:#001a85; } .header-link.icon-link{ padding:6px; display:flex; align-items:center; justify-content:center; } .hero__back{ color:#0021A7; font-weight:600; display:inline-flex; align-items:center; gap:6px; } /* -------------------------------------------------- 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-back{ max-width:1100px; margin:34px auto 14px; padding:0 clamp(20px,6vw,80px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; } .instagram-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: #ebf5ff; border: 1px solid #0021A7; border-radius: 999px; color: #0021A7; font-weight: 700; font-size: 0.92rem; text-decoration: none; margin-top: 0; } .instagram-pill:hover { background: #d1e9ff; } .instagram-pill-icon { width: 18px; height: 18px; display: inline-flex; color: inherit; } .instagram-pill-icon svg { width: 100%; height: 100%; display: block; } .job-detail { display: flex; justify-content: center; margin: 40px auto 60px; padding: 0 clamp(20px, 6vw, 80px); } /* The main job-description area (white box with text) */ .job-description { display: flex; flex-direction: column; padding: clamp(32px, 4vw, 48px); width: min(920px, 100%); gap: clamp(18px, 2.5vw, 32px); background-color: #fff; border-radius: 28px; font-size: 1rem; box-shadow: 0 24px 80px rgba(0,0,0,0.07); box-sizing: border-box; } /* 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 */ .job-description h1{ font-size: clamp(2.2rem, 4vw, 3rem); color:#0021A7; margin:0; line-height:1.1; letter-spacing:-0.01em; max-width:100%; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } .company-name { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; color:#0021A7; font-size: 1rem; } .company-name span { display: inline-flex; align-items: center; gap:6px; color:#0021A7; } .company-name__company a, .company-name__address a{ color:#0021A7; text-decoration:none; display:inline-flex; align-items:center; gap:4px; font-weight:600; border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color 0.2s ease; } .company-name__company a:hover, .company-name__address a:hover{ border-color:#90a8ff; } .company-name__date{ color:#0021A7; font-weight:500; } /* Tag container (reuse your existing .tags styles from index, or override if you want a different look) */ .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .tags span{ background:#e8edff; color:#0021A7; padding:8px 16px; border-radius:20px; font-size:0.9rem; font-weight:600; letter-spacing:0.01em; } /* 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: 10px; font-size:1.08rem; line-height:1.7; } /* 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; color:#0021A7; } .contact-category--email { display:flex; align-items:center; gap:8px; } .contact-value, .contact-value-italic { background-color: #f1f1f1; border-radius: 20px; padding: 8px 14px; width: 100%; font-weight: 500; } .contact-value-italic { font-style: italic; } .contact-value-row { display: flex; flex-direction: row; gap: 5px; } .contact-value-row--email { flex-direction: column; gap: 16px; } .application-cta{ border-radius:28px; padding:32px; background:#f0f5ff; display:flex; flex-direction:column; gap:18px; } .application-cta h2{ font-size:1.4rem; font-weight:700; color:#0021A7; margin:0; } .application-cta__info{ display:flex; flex-direction:column; gap:8px; font-size:1rem; color:#0021A7; } .application-cta__info span{ font-weight:600; } .application-cta__primary{ display:inline-flex; justify-content:center; align-items:center; padding:16px 24px; border-radius:18px; background:#0021A7; color:#fff; font-weight:600; font-size:1rem; } .application-cta__email{ font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 700; padding: 16px 18px; background: #ffffff; border: 2px solid #0021A7; color: #0021A7; border-radius: 16px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; width:100%; max-width: 520px; box-sizing: border-box; } .email-address{ color:#0021A7; word-break: break-all; font-size: clamp(1.1rem, 2.4vw, 1.5rem); line-height:1.4; width:100%; } .email-copy{ border:1px solid #0021A7; background:transparent; color:#0021A7; border-radius:999px; font-size:0.9rem; font-weight:600; padding:10px 14px; cursor:pointer; display:flex; gap:6px; align-items:center; width:100%; justify-content:center; } .application-cta__helpers{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .helper-label{ font-size:0.9rem; color:rgba(0,33,167,0.7); display:flex; align-items:center; } .helper-actions{ display:flex; gap:10px; flex-wrap:wrap; } .helper-chip{ border-radius:999px; border:1px solid #0021A7; padding:8px 16px; font-weight:600; color:#ffffff; background:#0021A7; display:inline-flex; align-items:center; gap:6px; } .email-actions { display: flex; flex-wrap: wrap; gap: 12px; } .email-action { border: 1px solid #ccd6ff; background: #fff; color: #0021A7; border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 0.95rem; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .email-action:hover { transform: translateY(-1px); background: #f3f6ff; } .email-action--primary { border-color: #0021A7; color:#0021A7; } .archjobs-mention{ margin-top:24px; font-size:0.9rem; color:#0021A7; font-weight:600; text-align:center; } /* Footer (match index) */ .footer { padding:20px 50px; display:flex; flex-direction:row; justify-content:center; align-items:center; width:100%; } .footer nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; } .footer nav a { color: black; text-decoration: none; font-size: medium; font-weight:500; } .footer nav a:hover { text-decoration: underline; } main{ flex:1; } @media only screen and (min-width: 769px) { .header-content{ padding:0 50px; } } @media only screen and (max-width: 768px) { .header-content{ padding:0 16px; flex-wrap:nowrap; gap:10px; } .header-links{ flex:0 1 auto; justify-content:flex-end; flex-wrap:nowrap; gap:8px; } .header-link{ padding:6px 10px; font-size:0.85rem; white-space:nowrap; } .logo{ height:40px; } .site-title{ font-size:medium; } nav ul{ gap:15px; } nav ul li{ font-size:smaller; padding:10px; } .social-nav{ gap:12px; } } /* 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 14px; margin: 24px auto 44px; width: 100%; box-sizing: border-box; } .job-detail-back{ margin:20px auto 0; padding:0 14px; } .hero__back{ font-size:0.95rem; } .job-description { width: 100%; order: 2; box-sizing: border-box; padding: 22px 18px; gap: 14px; font-size: 0.98rem; line-height: 1.6; } .job-description h1{ font-size: clamp(1.9rem, 6vw, 2.3rem); line-height:1.15; } .job-image { order: 1; width: 100%; margin-bottom: 10px; } .company-name { gap: 10px 14px; font-size: 0.95rem; } .tags { gap: 6px; } .tags span{ padding: 6px 12px; font-size:0.85rem; } .job-description-text { font-size: 1rem; line-height: 1.6; } .application-cta{ padding:20px; gap:14px; } .application-cta__email{ padding:14px 16px; gap:10px; } .email-address{ font-size: clamp(1rem, 4vw, 1.2rem); line-height:1.3; } .email-copy{ font-size:0.9rem; padding:10px 12px; } .helper-actions{ gap:8px; } .helper-actions .helper-chip[href*="mail.google.com"]{ display:none; } } .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: 0; } /* 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; overscroll-behavior-x: contain; 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; }