diff --git a/css/main.css b/css/main.css index 257eccfa..5992de21 100644 --- a/css/main.css +++ b/css/main.css @@ -31,4 +31,5 @@ @import 'pages/_projects.css'; @import 'pages/_article.css'; @import 'pages/_about.css'; -@import 'pages/_timeline.css'; \ No newline at end of file +@import 'pages/_timeline.css'; +@import 'pages/_guide.css'; \ No newline at end of file diff --git a/css/pages/_guide.css b/css/pages/_guide.css new file mode 100644 index 00000000..6e6c6ed3 --- /dev/null +++ b/css/pages/_guide.css @@ -0,0 +1,1002 @@ +/* ========================================================================== + Student Welcome Guide + Reusable components for the guide landing page and topic pages. + ========================================================================== */ + +/* ---------- Page metadata strip (topic pages) ---------- */ +.guide-meta { + max-width: 720px; + margin: 0 auto 8px; + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + font-family: 'Inter', sans-serif; + font-size: 13px; + color: #667085; +} +.guide-meta .guide-tag { + display: inline-flex; + align-items: center; + gap: 6px; + background: #F9FAFB; + border: 1px solid #EAECF0; + border-radius: 999px; + padding: 4px 12px; + white-space: nowrap; +} +.guide-tag.is-evergreen { color: #2D738C; } +.guide-tag.is-annual { color: #B54708; background: #FFFAEB; border-color: #FEDF89; } +.guide-tag.is-frequent { color: #B42318; background: #FEF3F2; border-color: #FECDCA; } + +/* ---------- Information boxes ---------- */ +.guide-box { + max-width: 720px; + margin: 28px auto; + border: 1px solid #EAECF0; + border-left-width: 4px; + border-radius: 12px; + padding: 18px 20px; + background: #F9FAFB; + font-family: 'Inter', sans-serif; +} +.guide-box .guide-box-title { + display: flex; + align-items: center; + gap: 10px; + font-weight: 600; + font-size: 15px; + color: #101828; + margin: 0 0 6px; +} +.guide-box p { + font-size: 15px; + line-height: 24px; + color: #344054; + margin: 0; +} +.guide-box p + p { margin-top: 8px; } +.guide-box--warning { background: #FFFBFA; border-color: #FED4CB; border-left-color: #FA7850; } +.guide-box--warning .guide-box-title { color: #B42318; } +.guide-box--macedonia { background: #FFFAEB; border-color: #FEDF89; border-left-color: #F79009; } +.guide-box--macedonia .guide-box-title { color: #B54708; } +.guide-box--msos { background: #F5FAFB; border-color: #C3E0E7; border-left-color: #2D738C; } +.guide-box--msos .guide-box-title { color: #2D738C; } + +/* ---------- Checklists ---------- */ +.guide-checklist { + max-width: 720px; + margin: 16px auto; + padding: 0; + list-style: none; + display: grid; + gap: 10px; +} +.guide-checklist li { + position: relative; + padding-left: 34px; + font-family: 'Inter', sans-serif; + font-size: 16px; + line-height: 26px; + color: #344054; +} +.guide-checklist li::before { + content: "\f00c"; /* fa-check */ + font-family: "Font Awesome 6 Free"; + font-weight: 900; + position: absolute; + left: 0; + top: 2px; + width: 22px; + height: 22px; + font-size: 11px; + color: #2D738C; + background: #EAF3F5; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +/* Numbered (ordered) variant for step-by-step processes */ +.guide-steps { + max-width: 720px; + margin: 16px auto; + padding: 0; + list-style: none; + counter-reset: guide-step; + display: grid; + gap: 10px; +} +.guide-steps li { + position: relative; + padding-left: 40px; + font-family: 'Inter', sans-serif; + font-size: 16px; + line-height: 26px; + color: #344054; +} +.guide-steps li::before { + counter-increment: guide-step; + content: counter(guide-step); + position: absolute; + left: 0; + top: 1px; + width: 26px; + height: 26px; + font-size: 13px; + font-weight: 600; + color: #FFFFFF; + background: #2D738C; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +/* ---------- Stage timeline (journey page) ---------- */ +.guide-timeline { + max-width: 720px; + margin: 24px auto; + position: relative; + padding-left: 8px; +} +.guide-stage { + position: relative; + padding: 0 0 26px 40px; + border-left: 2px solid #EAECF0; +} +.guide-stage:last-child { border-left-color: transparent; padding-bottom: 0; } +.guide-stage .guide-stage-num { + position: absolute; + left: -17px; + top: -2px; + width: 32px; + height: 32px; + border-radius: 50%; + background: #2D738C; + color: #FFFFFF; + font-family: 'Inter', sans-serif; + font-weight: 600; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0 0 4px #FFFFFF; +} +.guide-stage h3 { + font-family: 'Inter', sans-serif; + font-size: 19px; + font-weight: 600; + color: #101828; + margin: 2px 0 10px; +} +.guide-stage .guide-substage { + font-weight: 600; + color: #2D738C; + font-size: 14px; + margin: 12px 0 6px; +} + +/* ---------- Deadline table ---------- */ +.guide-table-wrap { max-width: 860px; margin: 20px auto; overflow-x: auto; } +.guide-table { + width: 100%; + border-collapse: collapse; + font-family: 'Inter', sans-serif; + font-size: 15px; + min-width: 640px; +} +.guide-table th, .guide-table td { + text-align: left; + padding: 12px 14px; + border-bottom: 1px solid #EAECF0; + vertical-align: top; + color: #344054; + line-height: 22px; +} +.guide-table thead th { + background: #F9FAFB; + color: #101828; + font-weight: 600; + border-bottom: 1px solid #D0D5DD; +} +.guide-table tbody tr:hover { background: #FCFCFD; } +.guide-table td:first-child { font-weight: 600; color: #101828; white-space: nowrap; } + +/* ---------- Landing hero ---------- */ +.guide-landing { font-family: 'Inter', sans-serif; } +.guide-landing-hero { + background: linear-gradient(180deg, #F5FAFB 0%, #FFFFFF 100%); + border-bottom: 1px solid #EAECF0; + padding: 72px 24px 56px; + text-align: center; +} +.guide-landing-hero .guide-eyebrow { + display: inline-block; + color: #2D738C; + font-weight: 600; + font-size: 14px; + letter-spacing: 0.04em; + text-transform: uppercase; + margin-bottom: 14px; +} +.guide-landing-hero h1 { + max-width: 820px; + margin: 0 auto 18px; + font-size: 42px; + line-height: 1.15; + color: #101828; +} +.guide-landing-hero p { + max-width: 720px; + margin: 0 auto 12px; + font-size: 17px; + line-height: 28px; + color: #475467; +} +.guide-quote { + margin: 20px 0; + padding: 16px 20px; + border-left: 4px solid #2D738C; + background: #F5FAFB; + border-radius: 0 8px 8px 0; + color: #344054; + font-style: italic; + line-height: 26px; +} +.guide-linklist { + list-style: none; + margin: 16px 0; + padding: 0; +} +.guide-linklist li { + position: relative; + padding: 8px 0 8px 26px; + border-bottom: 1px solid #EAECF0; + line-height: 24px; +} +.guide-linklist li::before { + content: "\f0c1"; + font-family: "Font Awesome 6 Free"; + font-weight: 900; + position: absolute; + left: 0; + top: 9px; + font-size: 13px; + color: #2D738C; +} +.guide-linklist a { + color: #2D738C; + font-weight: 500; + text-decoration: none; + word-break: break-word; +} +.guide-linklist a:hover { + text-decoration: underline; +} +.guide-landing-hero .guide-lead { + max-width: 720px; + margin: 0 auto 4px; + font-size: 19px; + line-height: 30px; + color: #344054; + font-weight: 500; +} +.guide-last-checked { + margin-top: 10px; + font-size: 14px; + color: #667085; + font-style: italic; +} +.guide-hero-image { + max-width: 960px; + margin: 28px auto 24px; + width: 100%; + aspect-ratio: 3 / 1; + border-radius: 14px; + overflow: hidden; +} +.guide-hero-image img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.guide-hero-image--placeholder { + display: flex; + align-items: center; + justify-content: center; + background: #F2F4F7; + border: 2px dashed #D0D5DD; + color: #667085; +} +.guide-hero-image--placeholder span { + font-size: 15px; + font-weight: 500; +} +.guide-hero-image--placeholder i { + margin-right: 8px; +} + +/* ---------- Embedded video (webinar) ---------- */ +.guide-video { + margin: 24px 0 28px; +} +.guide-video-frame { + position: relative; + width: 100%; + aspect-ratio: 16 / 9; + border-radius: 16px; + overflow: hidden; + background: #000; + box-shadow: 0 14px 34px rgba(16, 24, 40, .20); +} +.guide-video-frame iframe { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + border: 0; +} +.guide-video-caption { + margin: 16px 2px 0; + color: #475467; + line-height: 25px; +} + +/* ---------- Still need help? ---------- */ +.guide-help { + max-width: 860px; + margin: 44px auto 0; + padding-top: 28px; + border-top: 1px solid #E4E7EC; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; +} +.guide-help-contact { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.guide-help-title { + display: flex; + align-items: center; + gap: 10px; + margin: 0 0 10px; + font-size: 20px; + font-weight: 700; + color: #101828; +} +.guide-help-title i { + color: #ff6b2c; +} +.guide-help-contact p { + margin: 0 0 16px; + color: #475467; + line-height: 25px; +} +.guide-help-email { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 18px; + border-radius: 8px; + background: #fff; + border: 1.5px solid #D0D5DD; + color: #344054; + font-weight: 600; + text-decoration: none; + transition: border-color .15s, color .15s, transform .15s; +} +.guide-help-email:hover { + border-color: #ff6b2c; + color: #ff6b2c; + transform: translateY(-1px); +} +/* Viber community card + button */ +.guide-viber { + background: linear-gradient(135deg, #f3f1ff 0%, #ece8ff 100%); + border: 1px solid #ddd6fe; + border-radius: 14px; + padding: 20px 22px; + display: flex; + flex-direction: column; + align-items: flex-start; +} +.guide-viber-title { + display: flex; + align-items: center; + gap: 10px; + margin: 0 0 8px; + font-size: 17px; + font-weight: 700; + color: #4b3fb0; + line-height: 22px; +} +.guide-viber-title i, +.guide-viber-btn i { + color: #7360F2; +} +.guide-viber-text { + margin: 0 0 16px; + color: #475467; + line-height: 24px; +} +.guide-viber-btn { + display: inline-flex; + align-items: center; + gap: 10px; + margin-top: auto; + padding: 13px 24px; + border-radius: 999px; + background: linear-gradient(135deg, #7360F2 0%, #8f7ff7 100%); + color: #fff; + font-weight: 700; + font-size: 16px; + text-decoration: none; + box-shadow: 0 8px 20px rgba(115, 96, 242, .35); + transition: transform .15s, box-shadow .15s; +} +.guide-viber-btn i { + color: #fff; + font-size: 20px; +} +.guide-viber-btn:hover { + transform: translateY(-2px); + box-shadow: 0 12px 26px rgba(115, 96, 242, .45); +} +/* Was this page helpful? */ +.guide-feedback { + grid-column: 1 / -1; + margin-top: 6px; + padding-top: 22px; + border-top: 1px solid #E4E7EC; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 14px; +} +/* Ensure hidden children stay hidden even though some have their own display rule. */ +.guide-feedback [hidden] { + display: none !important; +} +.guide-feedback-q { + margin: 0; + font-weight: 600; + color: #344054; +} +.guide-feedback-buttons { + display: flex; + gap: 10px; +} +.guide-feedback-btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 9px 20px; + border-radius: 8px; + background: #fff; + border: 1.5px solid #D0D5DD; + color: #344054; + font-weight: 600; + font-size: 15px; + cursor: pointer; + transition: border-color .15s, color .15s, background .15s; +} +.guide-feedback-btn i { + font-size: 13px; + color: #98A2B3; +} +.guide-feedback-btn[data-vote="yes"]:hover { + border-color: #12B76A; + color: #12B76A; + background: #F6FEF9; +} +.guide-feedback-btn[data-vote="yes"]:hover i { + color: #12B76A; +} +.guide-feedback-btn[data-vote="no"]:hover { + border-color: #F04438; + color: #F04438; + background: #FFFBFA; +} +.guide-feedback-btn[data-vote="no"]:hover i { + color: #F04438; +} +/* Locked state after voting: dim the buttons, keep the chosen one vivid. */ +.guide-feedback-btn:disabled { + cursor: default; + opacity: .55; +} +.guide-feedback-btn.is-selected { + opacity: 1; + color: #fff; +} +.guide-feedback-btn.is-selected[data-vote="yes"] { + background: #12B76A; + border-color: #12B76A; +} +.guide-feedback-btn.is-selected[data-vote="no"] { + background: #F04438; + border-color: #F04438; +} +.guide-feedback-btn.is-selected i { + color: #fff; +} +.guide-feedback-msg { + margin: 0; + color: #475467; + font-weight: 500; +} +.guide-feedback-msg a { + color: #7360F2; + font-weight: 600; +} +/* Optional comment box shown after "No". */ +.guide-feedback-comment { + flex-basis: 100%; + margin-top: 4px; + display: flex; + flex-wrap: wrap; + align-items: flex-end; + gap: 16px; +} +.guide-feedback-comment-label { + flex-basis: 100%; + margin: 0; + font-size: 14px; + font-weight: 600; + color: #344054; +} +.guide-feedback-comment-input { + flex: 1 1 300px; + max-width: 520px; + padding: 10px 12px; + border: 1.5px solid #D0D5DD; + border-radius: 8px; + font: inherit; + color: #101828; + resize: vertical; +} +.guide-feedback-comment-input:focus { + outline: none; + border-color: #7360F2; + box-shadow: 0 0 0 3px rgba(115, 96, 242, .15); +} +.guide-feedback-comment-send { + flex: 0 0 auto; + margin: 0; + padding: 11px 24px; + border: none; + border-radius: 8px; + background: #7360F2; + color: #fff; + font-weight: 600; + font-size: 15px; + cursor: pointer; + transition: background .15s, transform .15s; +} +.guide-feedback-comment-send:hover { + background: #5f4de6; + transform: translateY(-1px); +} +.guide-feedback-comment-send:disabled { + opacity: .6; + cursor: default; + transform: none; +} +.guide-feedback-comment-thanks { + flex-basis: 100%; + margin: 0; + color: #12B76A; + font-weight: 600; +} +@media (max-width: 640px) { + .guide-help { + grid-template-columns: 1fr; + } +} + +/* ---------- Route builder ---------- */ +.guide-route { + max-width: 920px; + margin: -36px auto 0; + position: relative; + background: #FFFFFF; + border: 1px solid #EAECF0; + border-radius: 20px; + box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08); + padding: 28px; +} +.guide-route h2 { + font-size: 22px; + color: #101828; + margin: 0 0 4px; + text-align: left; +} +.guide-route .guide-route-sub { color: #667085; font-size: 15px; margin: 0 0 20px; } +.guide-route-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 14px; +} +.guide-field { display: flex; flex-direction: column; gap: 6px; } +.guide-field label { font-size: 13px; font-weight: 600; color: #344054; } +.guide-field select { + appearance: none; + -webkit-appearance: none; + font-family: 'Inter', sans-serif; + font-size: 15px; + color: #101828; + padding: 11px 36px 11px 14px; + border: 1px solid #D0D5DD; + border-radius: 10px; + background: #FFFFFF url("data:image/svg+xml;utf8,") no-repeat right 12px center; + cursor: pointer; +} +.guide-field select:focus { outline: none; border-color: #2D738C; box-shadow: 0 0 0 3px rgba(45,115,140,0.12); } +.guide-field input[type="text"] { + font-family: 'Inter', sans-serif; + font-size: 15px; + color: #101828; + padding: 11px 14px; + border: 1px solid #D0D5DD; + border-radius: 10px; + background: #FFFFFF; +} +.guide-field input[type="text"]::placeholder { color: #98A2B3; } +.guide-field input[type="text"]:focus { outline: none; border-color: #2D738C; box-shadow: 0 0 0 3px rgba(45,115,140,0.12); } +.guide-route-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; } + +.guide-route-result { margin-top: 24px; border-top: 1px solid #EAECF0; padding-top: 22px; } +.guide-route-result[hidden] { display: none; } +.guide-route-result h3 { font-size: 19px; color: #101828; margin: 0 0 6px; } +.guide-route-result .guide-route-context { color: #667085; font-size: 14px; margin: 0 0 16px; } +.guide-route-result ol { + list-style: none; + counter-reset: guide-step; + padding: 0; + margin: 0; + display: grid; + gap: 12px; +} +.guide-route-result ol li { + position: relative; + padding-left: 40px; + font-size: 16px; + line-height: 25px; + color: #344054; +} +.guide-route-result ol li::before { + counter-increment: guide-step; + content: counter(guide-step); + position: absolute; + left: 0; top: 0; + width: 26px; height: 26px; + font-size: 13px; font-weight: 600; + color: #FFFFFF; background: #FA7850; + border-radius: 50%; + display: flex; align-items: center; justify-content: center; +} +.guide-route-result a { color: #2D738C; font-weight: 500; text-decoration: underline; } + +/* ---------- Quick links ---------- */ +.guide-section { max-width: 1080px; margin: 56px auto; padding: 0 24px; } +.guide-section > h2 { font-size: 26px; color: #101828; text-align: center; margin: 0 0 6px; } +.guide-section > .guide-section-sub { text-align: center; color: #667085; margin: 0 0 28px; } +/* Featured essentials row */ +.guide-featured { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 14px; + margin-bottom: 36px; +} +.guide-featured-card { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 3px; + padding: 18px; + border: 1px solid #D8E3E8; + border-radius: 14px; + background: linear-gradient(180deg, #f4f9fb 0%, #ffffff 70%); + text-decoration: none; + transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; +} +.guide-featured-card:hover { + transform: translateY(-3px); + border-color: #2D738C; + box-shadow: 0 12px 26px rgba(45, 115, 140, .18); +} +.guide-featured-icon { + display: flex; + align-items: center; + justify-content: center; + width: 42px; + height: 42px; + margin-bottom: 8px; + border-radius: 11px; + background: #2D738C; + color: #fff; + font-size: 18px; +} +.guide-featured-label { + font-size: 16px; + font-weight: 700; + color: #101828; +} +.guide-featured-sub { + font-size: 13px; + color: #667085; + line-height: 18px; +} + +/* Browse-by-stage label */ +.guide-browse-label { + max-width: 860px; + margin: 0 auto 14px; + font-size: 13px; + font-weight: 700; + letter-spacing: .04em; + text-transform: uppercase; + color: #98A2B3; +} + +/* Stage accordion (six journey stages) */ +.guide-cats { + display: flex; + flex-direction: column; + gap: 12px; + max-width: 860px; + margin: 0 auto; +} +.guide-cat { + border: 1px solid #EAECF0; + border-radius: 14px; + background: #FFFFFF; + overflow: hidden; + transition: border-color .15s ease, box-shadow .15s ease; +} +.guide-cat[open] { + border-color: #D8E3E8; + box-shadow: 0 8px 22px rgba(16, 24, 40, .06); +} +.guide-cat-head { + display: flex; + align-items: center; + gap: 14px; + padding: 16px 18px; + cursor: pointer; + list-style: none; +} +.guide-cat-head::-webkit-details-marker { display: none; } +.guide-cat-head:hover { background: #FCFCFD; } +.guide-cat-num { + flex-shrink: 0; + width: 34px; + height: 34px; + border-radius: 9px; + background: #2D738C; + color: #fff; + font-weight: 700; + font-size: 16px; + display: flex; + align-items: center; + justify-content: center; +} +.guide-cat-heading { flex: 1 1 auto; } +.guide-cat-heading h3 { + display: flex; + align-items: center; + gap: 9px; + margin: 0 0 2px; + font-size: 16px; + font-weight: 700; + color: #101828; + line-height: 21px; + text-align: left; +} +.guide-cat-heading h3 i { color: #2D738C; font-size: 14px; } +.guide-cat-heading p { + margin: 0; + font-size: 13px; + color: #667085; + line-height: 18px; +} +.guide-cat-caret { + flex-shrink: 0; + color: #98A2B3; + font-size: 14px; + transition: transform .2s ease; +} +.guide-cat[open] .guide-cat-caret { transform: rotate(180deg); } +.guide-cat-links { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 4px 10px; + padding: 2px 14px 16px 62px; +} +.guide-quicklink { + display: flex; + align-items: center; + gap: 11px; + padding: 9px 10px; + border-radius: 8px; + color: #344054; + font-weight: 500; + font-size: 14.5px; + text-decoration: none; + transition: background .15s ease, color .15s ease; +} +.guide-quicklink:hover { + background: #F2F7F9; + color: #1D5C72; +} +.guide-quicklink i { + color: #2D738C; + font-size: 15px; + width: 20px; + text-align: center; + flex-shrink: 0; +} +@media (max-width: 640px) { + .guide-cat-links { padding-left: 16px; } +} + +/* ---------- Notice / before-you-rely blocks on landing ---------- */ +.guide-notice { + max-width: 820px; + margin: 0 auto; + background: #FFFBFA; + border: 1px solid #FED4CB; + border-radius: 14px; + padding: 22px 24px; +} +.guide-notice h3 { color: #B42318; font-size: 17px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; } +.guide-notice ul { margin: 0; padding-left: 20px; color: #344054; line-height: 26px; } +.guide-notice li { margin-bottom: 4px; } + +/* ---------- Responsive ---------- */ +@media (max-width: 768px) { + .guide-landing-hero { padding: 52px 20px 44px; } + .guide-landing-hero h1 { font-size: 32px; } + .guide-hero-image { aspect-ratio: 2 / 1; } + .guide-route { margin-top: 24px; padding: 22px; border-radius: 16px; } + .guide-route-actions .btn { width: 100%; text-align: center; } +} + +/* ---------- Personal route results page ---------- */ +.route-report-page { max-width: 820px; margin: 56px auto 64px; padding: 0 24px; } +.route-report { + background: #fff; + border: 1px solid #EAECF0; + border-radius: 18px; + padding: 34px 38px; + box-shadow: 0 10px 30px rgba(16, 24, 40, .06); +} +.route-report-head { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 12px; + padding-bottom: 20px; + margin-bottom: 22px; + border-bottom: 2px solid #F2F4F7; +} +.route-report-logo { height: 46px; width: auto; } +.route-report h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: #101828; } +.route-report-date { margin: 6px 0 0; font-size: 13px; color: #98A2B3; } +.route-report-intro { color: #475467; line-height: 25px; margin: 0 0 8px; } +.route-report h2 { font-size: 17px; color: #101828; margin: 24px 0 10px; } +.route-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 6px; } +.route-chip { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 120px; + padding: 8px 12px; + border: 1px solid #EAECF0; + border-radius: 10px; + background: #FCFCFD; +} +.route-chip span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #98A2B3; } +.route-chip strong { font-size: 14px; font-weight: 600; color: #101828; } +.route-steps { list-style: none; counter-reset: rstep; padding: 0; margin: 0; } +.route-steps li { + counter-increment: rstep; + position: relative; + padding: 11px 0 11px 40px; + border-bottom: 1px solid #F2F4F7; + line-height: 24px; + color: #344054; +} +.route-steps li::before { + content: counter(rstep); + position: absolute; + left: 0; + top: 10px; + width: 26px; + height: 26px; + border-radius: 50%; + background: #2D738C; + color: #fff; + font-size: 13px; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; +} +.route-steps a, .route-focus a { color: #2D738C; font-weight: 600; text-decoration: none; } +.route-steps a:hover, .route-focus a:hover { text-decoration: underline; } +.route-focus { list-style: none; padding: 0; margin: 0; } +.route-focus li { position: relative; padding: 8px 0 8px 24px; line-height: 23px; color: #344054; } +.route-focus li::before { + content: ""; + position: absolute; + left: 4px; + top: 15px; + width: 7px; + height: 7px; + border-radius: 50%; + background: #ff6b2c; +} +.route-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; } +.route-links a { + display: inline-block; + padding: 7px 12px; + border: 1px solid #D8E3E8; + border-radius: 8px; + background: #F6FAFB; + color: #2D738C; + font-size: 13.5px; + font-weight: 500; + text-decoration: none; +} +.route-links a:hover { border-color: #2D738C; background: #EEF6F8; } +.route-disclaimer { + margin: 22px 0; + padding: 14px 16px; + border: 1px solid #FED7AA; + border-radius: 12px; + background: #FFF7ED; + color: #7C4A12; + font-size: 13.5px; + line-height: 21px; +} +.route-actions { display: flex; gap: 12px; flex-wrap: wrap; } + +@page { margin: 0; } +@media print { + html, body { background: #fff; margin: 0; padding: 0; height: auto; } + /* Collapse the site chrome so the printed page height equals the report. */ + header, footer, .no-print { display: none !important; } + .route-report-page { margin: 0; padding: 0; max-width: none; } + .route-report { + box-sizing: border-box; + width: 100%; + padding: 15mm 16mm; + border: none; + border-radius: 0; + box-shadow: none; + font-size: 12px; + } + .route-report-head { padding-bottom: 14px; margin-bottom: 16px; gap: 10px; } + .route-report-logo { height: 42px; } + .route-report h1 { font-size: 22px; } + .route-report-date { font-size: 11px; } + .route-report-intro { font-size: 12px; line-height: 18px; margin: 0 0 6px; } + .route-report h2 { font-size: 14px; margin: 16px 0 8px; page-break-after: avoid; } + .route-chips { gap: 8px; page-break-inside: avoid; } + .route-chip { padding: 7px 11px; } + .route-chip span { font-size: 9px; } + .route-chip strong { font-size: 12px; } + .route-steps li { padding: 8px 0 8px 32px; line-height: 18px; page-break-inside: avoid; } + .route-steps li::before { width: 22px; height: 22px; font-size: 11px; top: 7px; } + .route-focus li { padding: 5px 0 5px 20px; line-height: 18px; page-break-inside: avoid; } + .route-focus li::before { top: 12px; } + .route-links { gap: 6px; page-break-inside: avoid; } + .route-links a { padding: 5px 9px; font-size: 11px; } + .route-disclaimer { margin: 14px 0 0; padding: 11px 13px; font-size: 10.5px; line-height: 15px; page-break-inside: avoid; } +} diff --git a/css/pages/_projects.css b/css/pages/_projects.css index 5cc65856..aa43b0ab 100644 --- a/css/pages/_projects.css +++ b/css/pages/_projects.css @@ -93,6 +93,18 @@ font-weight: 500; } +/* Newsletter subscription status message */ +.subscribe-status { + max-width: 520px; + margin: 10px auto 0; + font-size: 14px; + font-weight: 500; + line-height: 20px; +} +.subscribe-status.is-info { color: #667085; } +.subscribe-status.is-success { color: #067647; } +.subscribe-status.is-error { color: #B42318; } + /* 1b. Filter kategorij (pill navigacija + podfiltri) */ .filter-section { diff --git a/en/about-us/index.html b/en/about-us/index.html index 128dea18..429d9b3f 100644 --- a/en/about-us/index.html +++ b/en/about-us/index.html @@ -55,7 +55,7 @@