paragraphs --template-font = "Karla" -> body default: nav, links, buttons, form fields, list items, footer, spans Point --template-font at the same Antonio stack so everything matches the headings and the site uses a single face. TO GO BACK TO A TWO-FONT SYSTEM LATER: set --template-font to the new content/UI font (e.g. `"Inter", ...`) and leave --nunito alone - Antonio then stays only on the h1-h6 headers. (Note:
is bound to --nunito in the theme reset, so if the new font should also cover paragraphs, add `p { font-family: var(--template-font); }` at that point.) */ --template-font: "Antonio", Arial, Helvetica, sans-serif; } /* ---- Kill the template's Caveat script font on the ".sub-title" eyebrow/kicker text (e.g. "Acil Yardım Kampanyası" above section headings and in the home sliders) - used sitewide, so this one rule covers every instance. Match it to the heading font (--nunito is repointed to Antonio above) instead of introducing a third face. .common-banner .sub-title (the inner-page hero banner - About, Team, FAQ, etc.) redeclares font-family with higher specificity, so it needs its own override too. ---- */ .sub-title, .common-banner .sub-title { font-family: var(--nunito); } /* ---- Kill the template's site-wide Title Case ---- main.css sets `text-transform: capitalize` on `body`, so every string that doesn't override it (headings, paragraphs, list items, form text...) renders with Every Word Capitalised - wrong for Turkish sentence-case copy. Reset it here so text shows exactly as authored. Components that ask for uppercase / lowercase / capitalize explicitly (buttons, the topbar, nav labels) still get it - this only removes the blanket inherited default. ---- */ body { text-transform: none; } /* ---- Buttons: one consistent pattern for every button on the site. Default: sanctuary background, white text. Hover: hope background, sanctuary text. Overrides the template's three differently-colored button variants (which otherwise nearly canceled each other out anyway, since --base-color/--secondary-color/ --quaternary-color all resolve to the same brand teal) while keeping its sliding-fill hover animation (the ::before/::after layers). ---- */ .btn--primary, .btn--secondary, .btn--tertiary { background-color: var(--color-sanctuary); color: var(--white); } .btn--primary::before, .btn--primary::after, .btn--secondary::before, .btn--secondary::after, .btn--tertiary::before, .btn--tertiary::after { background-color: var(--color-sanctuary); } .btn--primary path, .btn--secondary path, .btn--tertiary path { fill: var(--white); } .btn--primary:hover, .btn--secondary:hover, .btn--tertiary:hover { background-color: var(--color-hope); color: var(--color-sanctuary); } .btn--primary:hover path, .btn--secondary:hover path, .btn--tertiary:hover path { fill: var(--color-sanctuary); } /* ---- Home "quick donation" widget button ("Şimdi Bağış Yap"): main.css has its own one-off hover rule scoped to this widget (.donation-future .donation-future__thumb .btn--primary:hover), which is more specific than the shared .btn--primary:hover rule above, so it was winning instead - hovering turned the text black and left the background the same sanctuary teal as its default state (var(--base-color) resolves to the same teal as the button's own background), instead of the hope/sanctuary hover every other button on the site (e.g. the header's "Bağış Yap") uses. Match that specific selector to override it back to the shared pattern. ---- */ .donation-future .donation-future__thumb .btn--primary:hover { background-color: var(--color-hope); color: var(--color-sanctuary); } /* ---- Header logo: bigger, with the same logo+title+subtitle lockup as the Dashboard ---- */ .header .navbar-logo { display: flex; align-items: center; gap: 0.85rem; } .header .navbar-logo img { max-width: none; width: 78px; height: auto; } .header .navbar-logo .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .header .navbar-logo .brand-title { font-family: "Work Sans", var(--nunito); font-size: 1.35rem; font-weight: 800; color: var(--secondary-color); white-space: nowrap; } .header .navbar-logo .brand-subtitle { font-family: "Work Sans", var(--template-font); font-size: 0.875rem; font-weight: 800; /* Same colour as .brand-title above it, not the theme's default grey. */ color: var(--secondary-color); white-space: nowrap; } /* ---- Header layout: keep it on one row ---- The tertiary header lines up a wide logo lockup (mark + two lines of wordmark), the nav, the language picker, cart, grid toggle and the "Bağış Yap" button inside a 1564px container. The template's .navbar is `flex-wrap: wrap` and .navbar__menu keeps its intrinsic (content) width, so the moment the row's natural width tips past the container the whole .navbar__options cluster drops onto a second line - and because .header-tertiary is position: absolute over the hero, that second line spills outside the white bar. Fix is purely structural: pin the logo and options as fixed end blocks and let the menu be the single flexible column, so the row compresses instead of wrapping. Spacing (nav indent, per-item padding, gaps) is left at the template's values. The wordmark lockup is wide enough that the full nav only fits with its normal breathing room at >=1600px, so the header runs in a compact mode (offcanvas hamburger, no language picker / grid toggle) below that - the markup's d-xxl-* classes take it to 1400px, the media query below carries the same compact mode up to 1600px. ---- */ .header .navbar { flex-wrap: nowrap; } .header .navbar-logo, .header-tertiary .navbar__options { flex-shrink: 0; } .header .navbar__menu { min-width: 0; } /* Never let a nav label break mid-word (the bigger logo lockup squeezes the menu column enough that "Ana Sayfa" would otherwise wrap to two lines). */ .header .navbar__item a { white-space: nowrap; } @media only screen and (min-width: 1400px) and (max-width: 1599.98px) { .header-tertiary .navbar__menu, .header-tertiary .sidenav-box, .header-tertiary .select-country { display: none !important; } .header-tertiary .open-offcanvas-nav { display: flex !important; } } /* ---- Footer logo: the template renders it at its native (very large) size ---- */ .footer-two__widget-logo img { max-width: 130px; height: auto; } /* ---- Footer link hover: the template's own --base-color and --secondary-color both resolve to the same brand teal (#004c51 - see default-theme.css), and .footer-two's background is --secondary-color, so the theme's own hover rule (color: var(--base-color)) made every footer link's text - and its underline, which uses the same variable - turn the exact same color as the background it sits on, i.e. invisible. Recolor to the cream accent used for hover states elsewhere on the site (buttons, pagination dots) instead. Affects every footer column (Hızlı Linkler, Bize Katılın, İletişim), since they share this rule. ---- */ .footer-two .footer-two__widget li a:hover { color: var(--color-hope); } .footer-two .footer-two__widget li a::after { background-color: var(--color-hope); } /* Same teal-on-teal problem for the little accent bars under each column title (.line > span, coloured --base-color = the footer's own #004c51). They only showed where .footer-two::after's diagonal gradient had darkened the ground enough - so under Hızlı Linkler / Bize Katılın but not İletişim. Recolour to the cream accent so all three read the same. */ .footer-two .footer-two__widget .line span { background-color: var(--color-hope); } /* ---- Footer "İletişim" contact list: the theme's own rule sets `gap` and `align-items` on these links but never sets `display: flex`, so both were silently ignored (an inline ignores flex properties) - the icon and text ran together with no gap, and a wrapped line (the street address) restarted at the far left instead of indenting under the first line, out of line with the phone/email rows above and below it. The theme also forces `text-transform: lowercase` here, which lowercased the street address ("defterdar mahallesi..."); the address is a proper noun, so leave its casing as authored (phone rows have no letters, the email is already lowercase). ---- */ .footer-two .footer-two__widget .footer-two__widget-content--contact a { display: flex; text-transform: none; } /* Fixed icon column width, so every row's text starts at the same x position regardless of which FontAwesome glyph (location pin, phone, WhatsApp, envelope) it is. Also recolour the icons - the theme sets them to --base-color (#004c51), the footer's own teal, so they were invisible. */ .footer-two .footer-two__widget .footer-two__widget-content--contact a i { width: 18px; flex-shrink: 0; text-align: center; color: var(--color-teal-accent-2); } /* Keep the "İletişim" column flush with its accent line and with the other two columns - the icon already sits at the line's start point, so the title needs no indent. */ .footer-two .footer-two__widget-intro--contact h5 { padding-left: 0; } .footer-two .footer-two__widget .footer-two__widget-content--contact a { gap: 12px; } /* ---- Topbar address: template lowercases every topbar link's text. main.css's rule is `.topbar .topbar__list a` (2 classes + 1 type = higher specificity than a 2-class-only override), so it must be matched here to actually win. ---- */ .topbar .topbar__list .topbar__address { text-transform: none; } /* ---- Off-canvas (sidebar) contact list: main.css forces `text-transform: lowercase` on every link here, which lowercased the street address. Phones/e-mail are unaffected; leave the address as authored. ---- */ .off-canvas .off-canvas__contact .single a { text-transform: none; } /* ---- Off-canvas (sidebar) social icons: template renders them as black circles with a black-on-teal hover (the same contrast bug fixed elsewhere). Bring them onto the brand button pattern: sanctuary fill + white icon, hope fill + sanctuary icon on hover. ---- */ .off-canvas .social a { background-color: var(--color-sanctuary); color: var(--white); } .off-canvas .social a:hover { background-color: var(--color-hope); color: var(--color-sanctuary); } /* ---- Home banner slides: small prev/next arrows, sized down from the template's default 60px circular .slider-btn so they don't overpower the slide content, and recolored (via the shared .slider-navigation .slider-btn rule below) to the brand teal/cream palette instead of its default teal/black, matching the pagination dots underneath. swiper-bundle.min.css (added to _Layout.cshtml - it was never linked before, so every pagination dot sitewide was missing its base size/shape/position styling) supplies the dot shape/position; these rules just recolor it to the brand palette, since the template's own default dot colors don't relate to it at all. ---- */ .banner-three__navigation { display: flex; gap: 10px; margin-top: 20px; } .banner-three__navigation .slider-btn, .banner-three__navigation .slider-btn-next { width: 40px; min-width: 40px; height: 40px; font-size: 14px; /* The shared .slider-navigation rules colour these circles brand teal, which disappears against the sanctuary hero background - outline them in white instead, cream fill on hover. */ background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.45); color: var(--white); } .banner-three__navigation .slider-btn:hover, .banner-three__navigation .slider-btn-next:hover { background-color: var(--color-hope); border-color: var(--color-hope); color: var(--color-sanctuary); } .banner-three-pagination.swiper-pagination { position: static; margin-top: 16px; } .banner-three-pagination .swiper-pagination-bullet { background-color: var(--color-teal-accent-2); opacity: 0.6; } .banner-three-pagination .swiper-pagination-bullet-active { background-color: var(--color-hope); opacity: 1; } /* ---- Home overview box (the two-tone "Total Raised Fund" card): the right half's markup was missing the .overview__single class the template's own source has alongside .overview__right - that class is what actually carries the box's padding, so the right half was rendering with none at all, not just a missing top edge. Left/right both resolve to the same brand teal by default now that --base-color and --quaternary-color have been unified - split them back out explicitly: a pale teal (not pure white, which blends into the page background and loses the card's shape) on the left, sanctuary teal on the right. Right also gets its own fixed padding rather than relying on .overview__single's, since that one changes at a responsive breakpoint and text was reading right up to the edge. ---- */ .overview .overview__left { background-color: var(--color-teal-accent-2); } .overview .overview__right, .cm-details .cm-sidebar-overview { background-color: var(--color-sanctuary); background-image: linear-gradient(135deg, var(--color-sanctuary) 0%, var(--color-midnight) 100%); background-repeat: no-repeat; background-size: cover; } .overview .overview__right { padding: 40px; } /* ---- Geometric pattern fill: the brand's Islamic geometric line pattern (wwwroot/images/IH-Pattern.png - an opaque black-on-white tile), laid over the panel colour as a faint tone-on-tone texture on a ::before. - Light half (pale teal): `mix-blend-mode: multiply` drops the tile's white ground (white x colour = colour) and keeps the black line work. - Dark halves (sanctuary teal): `invert()` the tile to white-on-black, then `mix-blend-mode: screen` so the black ground is a no-op and the (now white) lines lighten the panel instead - a dark bg has no room to darken further. Applied to BOTH halves of the home overview card and the project-details donate CTA, which share the motif. ---- */ .overview .overview__left, .overview .overview__right, .cm-details .cm-sidebar-overview { position: relative; isolation: isolate; overflow: hidden; } .overview .overview__left::before, .overview .overview__right::before, .cm-details .cm-sidebar-overview::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("/images/IH-Pattern.png"); background-repeat: repeat; background-size: 320px auto; pointer-events: none; } .overview .overview__left::before { mix-blend-mode: multiply; opacity: 0.12; } .overview .overview__right::before, .cm-details .cm-sidebar-overview::before { filter: invert(1); mix-blend-mode: screen; opacity: 0.1; } /* ---- Footer geometric pattern overlay: the same IH-Pattern.png motif used on the home overview card, on a ::before between .footer-two's base colour and its dark vignette (::after in main.css) so neither is disturbed. The footer is dark sanctuary teal, so - like the overview's dark half - the opaque black-on-white tile is `invert()`ed to white-on-black and `screen`ed, letting only the (now light) line work lift off the panel; `opacity` fades it. ---- */ .footer-two { overflow: hidden; isolation: isolate; } .footer-two::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("/images/IH-Pattern.png"); background-repeat: repeat; background-size: 320px auto; filter: invert(1); mix-blend-mode: screen; opacity: 0.1; pointer-events: none; } /* ---- Bank account cards (/hesap-bilgileri): the template has no ready-made table or pricing-card component that fits a "bank name + currency rows" layout, so this is a small custom component built from the same visual vocabulary as the rest of the site (.cause__slider-single's white/shadow/15px-radius card, sanctuary-teal accents). ---- */ .bank-accounts__intro { margin-bottom: 30px; font-size: 18px; } .bank-account { height: 100%; padding: 30px; background-color: var(--white); box-shadow: var(--shadow); border-radius: 15px; } .bank-account__header { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-teal-accent-2); } .bank-account__header h5 { margin-bottom: 12px; color: var(--color-sanctuary); } .bank-account__meta { display: flex; flex-direction: column; gap: 4px; } .bank-account__meta li { font-size: 16px; font-weight: 500; } .bank-account__meta span { font-weight: 700; color: var(--secondary-color); } .bank-account__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 0; } .bank-account__row + .bank-account__row { border-top: 1px dashed var(--color-teal-accent-2); } .bank-account__currency { flex: 0 0 48px; font-size: 17px; font-weight: 700; color: var(--color-sanctuary); } .bank-account__iban { flex: 1 1 220px; font-size: 17px; font-weight: 600; letter-spacing: 0.3px; } .bank-account__copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--color-sanctuary); background-color: var(--color-teal-accent-2); border: none; border-radius: 30px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } .bank-account__copy:hover { background-color: var(--color-sanctuary); color: var(--white); } .bank-account__copy--done { background-color: var(--color-sanctuary); color: var(--white); } /* ---- Home hero background: sanctuary (our primary brand colour). The template shipped a near-black navy (#101a24). Switching to sanctuary means the handful of elements that were themselves brand teal - the eyebrow text, the headline highlight word, the CTA, the prev/next arrows - would vanish into the background, so each is re-pointed at the cream "hope" accent / white below. ---- */ .banner-three { background-color: var(--color-sanctuary); } /* ---- Banner eyebrow text: .sub-title's default colour (--base-color) is the same sanctuary teal as the hero background now, so it's invisible without this. Hope is already this section's accent (hover states, active pagination dot). ---- */ .banner-three .sub-title { color: var(--color-hope); } /* ---- Banner headline highlight: the template's .bottom-line span used the whimsical Caveat script font (unrelated to the serious Antonio heading font used everywhere else) and defaulted to --base-color, which is now the hero background colour. Match the heading font and switch the word to the cream accent so it stays legible and still stands out from the white h1 text around it. ---- */ .banner-three h1 span { font-family: var(--nunito); color: var(--color-hope); } /* ---- Banner CTA: the shared button style is sanctuary-on-white, i.e. invisible on the sanctuary hero. Flip it: solid cream at rest, white on hover, sanctuary text and icon throughout. The ::before/::after fill layers are recoloured to match so the template's sliding-fill hover animation still reads. ---- */ .banner-three .banner__content-cta .btn--primary { background-color: var(--color-hope); color: var(--color-sanctuary); } .banner-three .banner__content-cta .btn--primary::before, .banner-three .banner__content-cta .btn--primary::after { background-color: var(--color-hope); } .banner-three .banner__content-cta .btn--primary path { fill: var(--color-sanctuary); } /* ---- Same dark-teal-on-dark-background invisibility bug as .banner-three above, on two more sections with a dark backdrop: - .help .vertical-text: the "2020'den beri X için çalışıyoruz" badge - its span ("İyilik") defaults to --base-color, identical to the badge's own --quaternary-color background (both #004c51), so the word disappears entirely. - .cta-section-two ("Bize Katılın" / "...Hayat X Destek Olun"): sits on a near-black gradient (#091f1b), but .sub-title and the h2 highlight word both default to the same dark --base-color teal, which reads as invisible against that background too. Same fix as the banner: switch to the cream "hope" accent, which is legible on any of this site's dark brand backgrounds. ---- */ .help .vertical-text h5 span { color: var(--color-hope); } .cta-section-two .sub-title, .cta-section-two .section__content h2 span { color: var(--color-hope); } .banner-three .banner__content-cta .btn--primary:hover { background-color: var(--white); color: var(--color-sanctuary); } /* ---- Drop the hand-drawn underline SVG the theme paints under the highlighted headline word (.bottom-line) on every slide - the cream colour alone is enough emphasis against the white h1 text. ---- */ .bottom-line { background-image: none; } /* ---- Same eyebrow-text problem as .banner-three, on every interior page's banner (About, Team, FAQ, Gallery, Vision/Mission/Values, Error): .sub-title's default dark teal is unreadable against .common-banner's dark photo/gradient background. ---- */ .common-banner .sub-title { color: var(--color-hope); } /* ---- Breathing room below every interior page banner: the next section's heading was sitting right against the banner image with no visual gap. ---- */ .common-banner { margin-bottom: 40px; } /* ---- Gallery marquee items: pointer cursor hints they're clickable (opens the lightbox, see lightbox.js), and a capped/cover image height keeps every photo the same size in the row regardless of its native aspect ratio. ---- */ .gallery__single { cursor: pointer; } .gallery__single img { max-height: 300px; object-fit: cover; } /* ---- Lightbox: the template ships magnific-popup's JS but never its CSS (no .mfp- rules anywhere in this build), so a from-scratch, framework-free overlay is used instead for "click a gallery photo to view it full-size" (see lightbox.js). ---- */ .simple-lightbox { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(1, 37, 39, 0.92); /* MIDNIGHT #012527 @ 92% */ align-items: center; justify-content: center; } .simple-lightbox.is-active { display: flex; } .simple-lightbox__image { max-width: 90vw; max-height: 85vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .simple-lightbox__close, .simple-lightbox__prev, .simple-lightbox__next { position: absolute; background: var(--color-hope); color: var(--color-sanctuary); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .simple-lightbox__close:hover, .simple-lightbox__prev:hover, .simple-lightbox__next:hover { background: var(--white); } .simple-lightbox__close { top: 24px; inset-inline-end: 24px; width: 44px; height: 44px; font-size: 22px; } .simple-lightbox__prev, .simple-lightbox__next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 20px; } .simple-lightbox__prev { inset-inline-start: 24px; } .simple-lightbox__next { inset-inline-end: 24px; } body.simple-lightbox-open { overflow: hidden; } /* ---- Gallery listing page: the template's .gallery section has no vertical spacing of its own (it was designed as a single one-off strip, not a stack of several), so consecutive galleries sat flush against each other with no gap. ---- */ .gallery { margin-bottom: 60px; } /* ---- Reports page: reuses the Causes card (.cause .thumb), but reports rarely have a cover thumbnail. This fills the same 200px image slot with a plain icon instead of leaving a broken/empty image. ---- */ .report-thumb-fallback { display: flex; align-items: center; justify-content: center; height: 200px; width: 100%; border-radius: 15px; background-color: var(--color-sanctuary); color: var(--color-hope); font-size: 56px; } /* ---- Reports page: a language badge, styled like the Causes card's category tag (.cause .thumb .tag a) but decoupled from it since this isn't a filterable link. ---- */ .report-language-badge { position: absolute; top: 10px; inset-inline-start: 10px; padding: 8px 24px; background-color: var(--color-hope); border-radius: 30px; color: var(--color-sanctuary); font-size: 13px; font-weight: 600; } /* ============================================================================ Equal-height card grids (Blog, Causes, Donate/Campaigns, Reports, Home) ---------------------------------------------------------------------------- Every listing on the site is a Bootstrap row of cards whose height was driven by their own content, so a card with a 3-line title or a long description sat taller than its row siblings (see the screenshot on the Blog page). The rule for all of them is the same: 1. Image: one fixed height + object-fit: cover, so every thumbnail crops to the same box regardless of the source photo's aspect ratio. 2. Title / preview text: clamped to a fixed number of lines with an ellipsis (a CSS backstop on top of the server-side .Truncate() in the controllers, so it holds even if a card is rendered without truncation). 3. Card: flex column stretched to the tallest sibling (Bootstrap already stretches the column; these rules pass that height down the chain) with the text block flex-growing so the CTA row lands on a shared bottom edge. ============================================================================ */ /* ---- Causes / Donate / Reports / Home featured projects (.cause__slider-*) ---- */ /* Equal-height cards: Swiper's .swiper-wrapper is a flex row, but the slides with a shorter description don't stretch to the tallest one on their own - force it, so every card in a row is the same height regardless of text length. */ .cause .cause__slider .swiper-wrapper { align-items: stretch; } .cause .cause__slider .swiper-slide { height: auto; align-self: stretch; } .cause .cause__slider-inner { height: 100%; } .cause .cause__slider-single { display: flex; flex-direction: column; height: 100%; min-height: 430px; } .cause .cause__slider-single .content { flex-grow: 1; } .cause .content h6 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cause .content p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---- Blog listing (.blog__single) ---- */ .blog .blog__single { display: flex; flex-direction: column; height: 100%; } .blog .blog__single-content { flex-grow: 1; } /* Template ships only min-height: 280px here, so taller source images grew the card. Pin it and crop instead. */ .blog .blog__single-thumb a img { height: 240px; min-height: 0; object-fit: cover; display: block; } .blog .blog__single-content h5 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* reserve both lines so single-line titles don't shift the excerpt up */ min-height: 2.6em; } .blog .blog__single-content p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---- Blog archive (/blog): filter bar + pagination. The template has no listing page with controls, so these are ours. Button styling reuses the brand pattern; inputs echo the rounded pill look used elsewhere on the site. z-index: custom.js runs $("select").niceSelect(), so the category