` into a doubled, non-resolving path
* (`/images/GAH/images/guaranteebg.svg`)
* — a markup/service-layer bug outside this CSS-only task's scope (see
* AGENTS.md "No hardcoded brand content" / this task's constraints: no
* .tsx or joomlaService.ts edits). The real image is restored above as a
* CSS background on the column instead; the broken inline `` markup (see `FaqAccordion.tsx`'s markup-shape
comment), so without it @tailwindcss/typography's default `.prose h3`
margin stacks on top of the padding below and nearly doubles each row's
height — same issue as `.faq-block .faq-head` in `tool-pages.css`. */
.prose .new-faq-block .faq-flex .faq-list li .faq-head {
margin: 0;
padding: 12px 32px 12px 14px;
font-size: 15px;
line-height: 18px;
font-family: "robotoregular";
color: #343434;
align-items: center;
display: flex;
justify-content: space-between;
position: relative;
cursor: pointer;
}
.prose .new-faq-block .faq-flex .faq-list li .faq-head.active {
background: #f1faf6;
}
.prose .new-faq-block .faq-flex .faq-list li .faq-head.active::after {
transform: rotate(180deg);
transition: 0.5s all ease;
}
.prose .new-faq-block .faq-flex .faq-list li .faq-head::after {
content: "";
background: url(/images/svg/homesprite.png) no-repeat;
width: 12px;
height: 8px;
display: block;
background-position: -2px -24px;
background-size: 270px;
position: absolute;
right: 15px;
transition: 0.5s all ease;
}
.prose .new-faq-block .faq-flex .faq-list li .faq-detail {
padding: 15px;
display: none;
line-height: 18px;
}
.prose .new-faq-block .faq-flex .faq-list li .faq-detail ul {
padding: 0 0 0 20px;
}
.prose .new-faq-block .faq-flex .faq-list li .faq-detail ul li {
border: 0;
margin: 0;
list-style: disc;
padding-left: 0;
}
.prose .new-faq-block .faq-flex .faq-list li .faq-detail ul li::before {
content: none;
}
.prose .new-faq-block .faq-flex .faq-list li:last-child {
margin: 0;
}
/* =====================================================================
* `/programming-assignment-help`-surfaced sections (confirmed live markup:
* `.essaytopics.programmingtopic .mainlist`, `.conversation-strip
* .programmingstrip`, `.programmingsubjects .programlist`,
* `.program-whychoose .whychoose_slider`). Base (non-media-query) rules
* copied verbatim from `templates/GAH/css/newessaywriting.css`. Assets
* confirmed already present in public/images/: sprite1.png,
* stripprogramming.jpg, programming-bottombg.jpg, program-why-bg.png.
* ===================================================================== */
/*
* `.mainlist` — the 8-item "Linux/Python/SQL/.../Database Programming
* Help" icon grid on the full-width `.programmingtopic` variant of
* `.essaytopics` (unlike `.casestudytopic`, this page has no `article.right`
* — the generic `.essaytopics article.left { width: 50%; float: left }`
* base would otherwise half the column for nothing, so `.programmingtopic
* article.left` resets it to the live site's full-width, centered layout).
* `` needs the usual `.prose ul>li::before` override —
* without it this rendered as a plain vertical checkmark-bulleted list
* instead of a 4-across icon grid. Icon positions use `sprite1.png` at
* `background-size: 580px` (a different scale than the 500px used
* elsewhere in this file for the same image — verified against the live
* CSS, not assumed) — scoped locally rather than touching the bare
* `.sprite` rule for the same cross-layout-collision reason documented
* above `.casestudytopic .casestudy-type` (that rule is pinned to
* `sprite.svg` for the Full_Page/PowerPoint layout loaded on every page).
*/
.prose .programmingtopic article.left {
width: 100%;
text-align: center;
float: none;
}
.prose .programmingtopic article .topiccontentfull {
margin: 0 0 30px;
}
.prose .programmingtopic article .mainlist {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
}
.prose .programmingtopic article .mainlist > li {
width: 25%;
padding: 18px 20px;
border-bottom: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
list-style: none;
}
.prose .programmingtopic article .mainlist > li::before {
content: none;
}
.prose .programmingtopic article .mainlist li:nth-child(5),
.prose .programmingtopic article .mainlist li:nth-child(6),
.prose .programmingtopic article .mainlist li:nth-child(7),
.prose .programmingtopic article .mainlist li:nth-child(8) {
border-bottom: 0;
}
.prose .programmingtopic article .mainlist li:nth-child(4),
.prose .programmingtopic article .mainlist li:nth-child(8) {
border-right: 0;
}
.prose .programmingtopic article .mainlist li h3,
.prose .programmingtopic article .mainlist li label {
font-size: 22px;
line-height: 24px;
color: #2a2a2a;
font-family: "robotomedium";
}
.prose .programmingtopic article .mainlist li h3 .topic,
.prose .programmingtopic article .mainlist li label .topic {
display: block;
}
.prose .programmingtopic article .mainlist li i {
width: 90px;
height: 90px;
display: block;
margin: 0 auto 8px;
background-image: url(/images/sprite1.png);
background-repeat: no-repeat;
background-size: 580px;
}
.prose .programmingtopic article .mainlist li i.linux {
background-position: -24px -1209px;
}
.prose .programmingtopic article .mainlist li i.python {
background-position: -137px -1209px;
}
.prose .programmingtopic article .mainlist li i.sql {
background-position: -249px -1209px;
}
.prose .programmingtopic article .mainlist li i.c {
background-position: -359px -1209px;
}
.prose .programmingtopic article .mainlist li i.java {
background-position: -472px -1209px;
}
.prose .programmingtopic article .mainlist li i.html {
background-position: -24px -1310px;
}
.prose .programmingtopic article .mainlist li i.php {
background-position: -137px -1310px;
}
.prose .programmingtopic article .mainlist li i.database {
background-position: -249px -1310px;
}
/*
* `.conversation-strip.programmingstrip` ("Seasonal Offer FOR FUTURE
* CODERS") — same generic `.conversation-strip` base as `.homeworkstrip`
* above, merged here with `.programmingstrip`'s own override block into one
* self-contained rule set (live CSS keeps them as two separate rulesets
* cascading onto the same elements; merging avoids depending on source
* order in this app's own stylesheet). Unlike `.homeworkstrip`, the live
* `.programmingstrip` override never sets `display: table` — it keeps the
* base `.conversation-strip`'s `display: inline-block`, verified by reading
* the live CSS rather than assumed from the homeworkstrip pattern. Same
* full-bleed `-50vw` treatment and `overflow: hidden` safety guard as
* `.homeworkstrip` (see that block's comment for why: no `robotomedium`
* @font-face is registered anywhere in this app, so the fallback font can
* render the offer text a few px wider than the live page and push content
* past the viewport edge).
*/
.prose .conversation-strip.programmingstrip {
background: url(/images/stripprogramming.jpg) no-repeat;
background-size: cover;
display: inline-block;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 28px 0;
overflow: hidden;
}
.prose .conversation-strip.programmingstrip .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.prose .conversation-strip.programmingstrip .stripleft {
float: left;
width: 28%;
}
.prose .conversation-strip.programmingstrip .stripleft .striptitle {
text-align: center;
font-size: 39px;
line-height: 42px;
color: #fff;
font-family: "robotomedium", sans-serif;
text-transform: uppercase;
margin: 0;
}
.prose .conversation-strip.programmingstrip .stripleft .striptitle span {
display: block;
color: #2a2a2a;
font-size: 30px;
line-height: 32px;
font-family: "robotoregular", sans-serif;
}
.prose .conversation-strip.programmingstrip .stripright {
width: 69%;
float: right;
position: relative;
}
.prose .conversation-strip.programmingstrip .stripright img {
width: 80px;
height: 80px;
}
.prose .conversation-strip.programmingstrip .offer-box {
display: inline-block;
text-align: left;
}
.prose .conversation-strip.programmingstrip .offer-box .title {
font-size: 24px;
line-height: 33px;
color: #2a2a2a;
margin: 0;
}
.prose .conversation-strip.programmingstrip .offer-box .offer-off {
font-size: 51px;
line-height: 51px;
color: #2a2a2a;
font-family: "robotomedium", sans-serif;
margin: 0;
}
.prose .conversation-strip.programmingstrip .join {
display: inline-block;
font-size: 54px;
line-height: 74px;
color: #ffffff;
padding: 0 20px;
font-family: "robotomedium", sans-serif;
}
.prose .conversation-strip.programmingstrip .offer-app {
display: inline-block;
color: #2a2a2a;
font-size: 20px;
line-height: 21px;
padding: 0 16px;
font-family: "robotomedium", sans-serif;
}
.prose .conversation-strip.programmingstrip .btn-order {
background: #2a2a2a;
color: #ffc410;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.22);
padding: 11px 35px;
font-size: 19px;
border-radius: 3px;
position: absolute;
top: 56px;
margin: 0 0 0 18px;
white-space: nowrap;
text-decoration: none;
display: inline-block;
}
/*
* `.programmingsubjects` ("Your Stress With .class 1 Programming Assignment
* Help USA" — yes, the heading literally contains ".class 1"; confirmed
* genuine CMS content on the live site, not a bug, left exactly as-is) —
* dark-overlay background with a 3-across `.programlist` card grid of 6
* `.programlist-inner` items. This page's markup carries no
* `.programming-subjects` modifier class, so the plain `:before` dark
* overlay (not the gradient variant) is the one that applies here —
* verified against the live markup, not assumed. `.innersection-overlay`
* is a real hover reveal (opacity 0 -> 1), not a bug to fix.
*/
.prose .programmingsubjects {
background: url(/images/programming-bottombg.jpg) no-repeat;
background-size: cover;
padding: 50px 0;
position: relative;
z-index: 0;
color: #fff;
text-align: center;
}
.prose .programmingsubjects::before {
content: "";
background: rgba(23, 23, 23, 0.9) no-repeat;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
.prose .programmingsubjects .container {
z-index: 1;
position: relative;
}
.prose .programmingsubjects .content-title {
padding: 0 0 8px 0;
font-size: 28px;
line-height: 32px;
font-family: "robotomedium";
color: #fff;
}
.prose .programmingsubjects .content-subtitle {
color: #fff;
padding: 0 100px;
}
.prose .programmingsubjects .programlist {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin: 0 auto;
}
.prose .programmingsubjects .programlist .programlist-inner {
max-width: calc(33.33% - 15px);
background: #ffffff;
border-radius: 3px;
padding: 15px 20px;
border-bottom: 2px solid #f58e0e;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
color: #2a2a2a;
margin: 0 0 20px 0;
position: relative;
text-align: center;
}
.prose .programmingsubjects .programlist .programlist-inner:last-child,
.prose .programmingsubjects .programlist .programlist-inner:nth-child(4),
.prose .programmingsubjects .programlist .programlist-inner:nth-child(5) {
margin: 0;
}
.prose .programmingsubjects .programlist .programlist-inner i {
width: 65px;
height: 65px;
display: block;
margin: 0 auto 10px;
background-image: url(/images/sprite1.png);
background-repeat: no-repeat;
background-size: 560px;
}
.prose .programmingsubjects .programlist .programlist-inner i.program1 {
background-position: -122px -1359px;
}
.prose .programmingsubjects .programlist .programlist-inner i.program2 {
background-position: -209px -1359px;
}
.prose .programmingsubjects .programlist .programlist-inner i.program3 {
background-position: -298px -1359px;
}
.prose .programmingsubjects .programlist .programlist-inner i.program4 {
background-position: -389px -1359px;
}
.prose .programmingsubjects .programlist .programlist-inner i.program5 {
background-position: -473px -1359px;
}
.prose .programmingsubjects .programlist .programlist-inner i.program6 {
background-position: -425px -1085px;
}
.prose .programmingsubjects .programlist .programlist-inner h3,
.prose .programmingsubjects .programlist .programlist-inner label {
font-size: 20px;
line-height: 22px;
color: #1d1d1d;
margin: 0 0 6px 0;
display: block;
font-family: "robotomedium";
}
.prose .programmingsubjects .programlist .programlist-inner .contentprogram {
font-size: 15px;
line-height: 20px;
}
.prose
.programmingsubjects
.programlist
.programlist-inner
.innersection-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(255, 196, 16, 0.85);
cursor: pointer;
border-radius: 3px;
}
.prose
.programmingsubjects
.programlist
.programlist-inner
.innersection-overlay
.infobtn {
background: #181819;
color: #fff;
font-size: 19px;
line-height: 22px;
padding: 10px 25px;
border-radius: 5px;
margin: 26% 0;
display: inline-block;
font-family: "robotomedium";
text-decoration: none;
}
.prose
.programmingsubjects
.programlist
.programlist-inner:hover
.innersection-overlay {
opacity: 1;
}
/*
* `.program-whychoose` ("Join the Family of 100,000+ Happy Students!") —
* `.service_slider.slider.whychoose_slider` is a Slick carousel on the live
* site with no real container `display` rule of its own outside a handful
* of mobile-only `.slick-dots`/`.services-inner` tweaks (confirmed by
* grepping the freshly-fetched live CSS: every non-media-query rule here is
* icon/text styling, never a `display`/`flex`/grid for `.whychoose_slider`
* itself) — the same situation `/coursework-help`'s `.country-servicelist`
* hit (see that block's comment above for the full reasoning: a 3-row
* `flex-wrap` grid roughly tripled the live single-row carousel's height).
* Applying the same fix here: a single non-wrapping flex row with
* `overflow-x: auto`, reproducing the live carousel's one-row height
* without needing carousel JS.
*/
.prose .program-whychoose {
padding: 50px 0;
background: #f5f5f5 url(/images/program-why-bg.png) repeat;
position: relative;
z-index: 0;
text-align: center;
}
.prose .program-whychoose .content-title {
padding: 0 0 6px 0;
}
.prose .program-whychoose .content-subtitle {
padding: 0 20px;
}
.prose .program-whychoose .whychoose_slider {
padding: 60px 0 0;
margin-bottom: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* The native browser scrollbar this plain `overflow-x:auto` would
otherwise show has no live-site equivalent — the real carousel uses
dot pagination instead (`.whychoose-dots`/`WhyChooseSlider.tsx`). */
scrollbar-width: none;
}
.prose .program-whychoose .whychoose_slider::-webkit-scrollbar {
display: none;
}
/* Real widths, not a guessed fixed value — the live CSS has no `width` on
`.services-inner` at all; Slick computes each slide's width from
`slidesToShow` via JS instead. Its real init config
(`templates/GAH/js/custom.js`, `.service_slider`): `slidesToShow: 3`
(default/desktop), `2` at `breakpoint: 1026`, `1` at `breakpoint: 768` —
reproduced here as the equivalent `max-width` media queries, since this
app doesn't run Slick's JS. The 260px fixed width this replaces let a 4th
card peek into view on desktop where only 3 should ever show. */
.prose .program-whychoose .whychoose_slider .services-inner {
margin: 0 45px 0 0;
flex: 0 0 auto;
width: calc((100% - 2 * 45px) / 3);
scroll-snap-align: start;
}
@media (max-width: 1025px) {
.prose .program-whychoose .whychoose_slider .services-inner {
width: calc((100% - 45px) / 2);
}
}
@media (max-width: 767px) {
.prose .program-whychoose .whychoose_slider .services-inner {
width: 100%;
margin-right: 0;
}
}
/* Real `.slick-dots` styling for this exact carousel
(`newessaywriting.css`: 15x5px rectangles, no radius, `#2a2a2a` inactive /
`#f58e0e` active) — the live site hides its arrow buttons outright for
this slider, dots only, see `WhyChooseSlider.tsx`. */
.prose .program-whychoose .whychoose-dots {
display: flex;
justify-content: center;
gap: 2px;
margin: 30px 0 40px;
}
/* The real 15x5px rectangle is kept as the visible size (`background-clip:
content-box` paints only the inner content box), but the actual clickable
button is padded out much larger — a real 15x5px target is nearly
impossible to hit precisely with a mouse; confirmed via a geometry-based
click just 4px off the dot's center missing entirely. `.whychoose-dots`'
`gap` is reduced to 2px (from 10px) to compensate for the padding so the
visible rectangles still end up 10px apart, same as before. */
.prose .program-whychoose .whychoose-dot {
width: 15px;
height: 5px;
padding: 10px 4px;
border: 0;
border-radius: 0;
background: #2a2a2a;
background-clip: content-box;
box-sizing: content-box;
cursor: pointer;
}
.prose .program-whychoose .whychoose-dot.is-active {
/* `background` (not `background-color`) is a shorthand that resets every
background sub-property to its initial value, including `background-clip`
— which silently reverted the active dot back to `border-box` and made it
render as the full padded hit box instead of the 15x5px rectangle. */
background-color: #f58e0e;
}
.prose .program-whychoose .whychoose_slider i {
width: 90px;
height: 90px;
display: block;
margin: 0 auto 10px;
background-image: url(/images/sprite1.png);
background-repeat: no-repeat;
background-size: 580px;
}
.prose .program-whychoose .whychoose_slider i.choose1 {
background-position: -362px -1308px;
}
.prose .program-whychoose .whychoose_slider i.choose2 {
background-position: -469px -1308px;
}
.prose .program-whychoose .whychoose_slider i.choose3 {
background-position: -25px -1410px;
}
.prose .program-whychoose .whychoose_slider i.choose4 {
background-position: -221px -1489px;
}
.prose .program-whychoose .whychoose_slider i.choose5 {
background-position: -124px -1489px;
}
.prose .program-whychoose .whychoose_slider i.choose6 {
background-position: -24px -1509px;
}
.prose .program-whychoose .whychoose_slider .title {
font-size: 20px;
line-height: 25px;
color: #1d1d1d;
font-family: "robotomedium";
display: block;
}
.prose .program-whychoose .whychoose_slider .content {
font-size: 15px;
line-height: 20px;
color: #2a2a2a;
margin: 6px 0;
}
.prose .program-whychoose .order-btn {
background: #f58e0e;
color: #fff;
font-size: 20px;
line-height: 22px;
font-family: "robotomedium";
padding: 7px 30px;
border-radius: 3px;
margin: 20px auto 0;
display: block;
width: fit-content;
text-decoration: none;
}
/*
* `.programmingsoftware` ("#1 Programming Assignment Writing Services Use
* Latest Software!" two-column section on /programming-assignment-help) had
* no CSS at all — `.left`/`.right` were plain stacked ``s with no width
* constraint, so the text rendered at full container width (no visible
* stacking bug since the floated `.right` image happened to sit beside the
* text anyway) but noticeably smaller/narrower than the live site's real
* 45%/50% split with the image column's 120px vertical padding.
*/
.prose .programmingsoftware {
padding: 50px 0;
display: inline-block;
width: 100%;
}
.prose .programmingsoftware .left {
width: 45%;
float: left;
}
.prose .programmingsoftware .left .viewsmple {
background: #f58e0e;
color: #fff;
border-radius: 3px;
font-size: 19px;
line-height: 23px;
padding: 12px 39px;
display: inline-block;
margin: 20px 0 0 0;
font-family: "robotomedium", sans-serif;
}
.prose .programmingsoftware .right {
width: 50%;
float: right;
padding: 120px 0 120px 30px;
}
.prose .programmingsoftware .right img {
width: auto;
height: auto;
}
/*
* `.program-step` ("Programming Assignment Helpers Assure Perfection in 3
* Steps!") — the browser-window-styled `.steps-process` card (traffic-light
* `.address-bar` dots + numbered `.step-box` list) had no CSS at all. Icons
* reuse `sprite1.png` (same asset as the already-ported `.mainlist`/
* `.casestudytopic` grids elsewhere in this file), scoped locally rather
* than touching the shared `.sprite` base rule — see that reasoning in the
* `.casestudytopic` section above.
*/
.prose .program-step {
padding: 50px 0;
display: inline-block;
width: 100%;
}
.prose .program-step .process-left {
width: 43%;
float: left;
padding: 0 10px 0 0;
}
.prose .program-step .process-left .order-btn {
background: #f58e0e;
color: #fff;
font-size: 20px;
line-height: 22px;
font-family: "robotomedium", sans-serif;
padding: 10px 30px;
border-radius: 3px;
margin: 40px 0 0 0;
display: inline-block;
}
.prose .program-step .steps-process {
width: 47%;
border: 1px solid #e8e8e8;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
position: relative;
float: right;
}
.prose .program-step .steps-process::before {
content: "";
z-index: -1;
height: 140px;
width: 140px;
position: absolute;
right: -53px;
bottom: -39px;
border-radius: 100%;
background:
linear-gradient(90deg, #ffffff 8px, transparent 1%) center,
linear-gradient(#ffffff 8px, transparent 1%) center,
#434343;
background-size: 9px 9px;
}
.prose .program-step .steps-process .address-bar {
padding: 10px;
border-bottom: 1px solid #e8e8e8;
display: block;
}
.prose .program-step .steps-process .address-bar circle {
width: 12px;
height: 12px;
border-radius: 100%;
background: #ff6057;
display: inline-block;
margin: 0 3px 0 0;
}
.prose .program-step .steps-process .address-bar circle:nth-child(2) {
background: #ffc12e;
}
.prose .program-step .steps-process .address-bar circle:nth-child(3) {
background: #28ca40;
}
.prose .program-step .steps-process .step-box {
padding: 30px 30px 40px;
}
.prose .program-step .steps-process .step-box > li {
margin: 0 0 35px;
position: relative;
padding-left: 0;
}
.prose .program-step .steps-process .step-box > li::before {
content: none;
}
.prose .program-step .steps-process .step-box > li:last-child {
margin: 0;
}
.prose .program-step .steps-process .step-box > li:last-child::after {
display: none;
}
.prose .program-step .steps-process .step-box > li::after {
content: "";
width: 1px;
height: 41px;
background: #dfdfdf;
position: absolute;
top: 85px;
left: 42px;
}
.prose .program-step .steps-process .step-box li i {
width: 85px;
height: 85px;
float: left;
margin: 0 26px 0 0;
border-radius: 100%;
background-image: url(/images/sprite1.png);
background-size: 490px;
border: 1px solid #dcdcdc;
}
.prose .program-step .steps-process .step-box li i.step1 {
background-position: -268px -1250px;
}
.prose .program-step .steps-process .step-box li i.step2 {
background-position: -339px -1250px;
}
.prose .program-step .steps-process .step-box li i.step3 {
background-position: -413px -1250px;
}
.prose .program-step .steps-process .step-box .step-title {
font-size: 22px;
line-height: 26px;
color: #1d1d1d;
font-family: "robotomedium", sans-serif;
padding: 10px 0 0;
display: block;
}
.prose .program-step .steps-process .step-box .step-content {
font-size: 15px;
line-height: 18px;
color: #2a2a2a;
margin: 3px 0 0;
}
/*
* `.title-head-nz`/`.subtitle-head-nz` — a generic centered section-heading
* pair reused across many New-layout sections (not just one page). Only
* ever existed here as section-scoped overrides (`.thesis-step
* .title-head-nz`, `.coursework-help-services .title-head-nz`); the bare
* base rule itself was missing everywhere in this app, so any section using
* it without its own override (e.g. /essay-writing's `.essay-content-uk`
* below) rendered an unstyled heading.
*/
.prose .title-head-nz {
color: #1d1d1d;
font-size: 28px;
line-height: 32px;
font-family: "robotomedium", sans-serif;
margin: 0 0 5px;
text-align: center;
}
.prose .subtitle-head-nz {
font-size: 15px;
line-height: 20px;
color: #2a2a2a;
margin: 0 0 30px;
text-align: center;
}
/*
* `.essay-content` ("Your Search for Best Online Essay Writing Help Ends
* Here!" + the UK essay-types grid further down, `.essay-content-uk`) had
* no CSS at all. The `-uk` variant's `.image-mobile` is a real, deliberate
* `display:none` on desktop (mobile-only swap for the main `img`) — without
* it, that raw `![]()
` rendered at an absurd
* ~1538px tall, the single biggest contributor to this page being nearly
* 2x too tall before this fix.
*/
.prose .essay-content {
padding: 50px 0;
display: inline-block;
width: 100%;
}
.prose .essay-content .essay-seo-content {
float: left;
width: 100%;
position: relative;
}
.prose .essay-content .essay-seo-content .seo-title {
font-size: 30px;
line-height: 40px;
color: #1d1d1d;
font-family: "robotomedium", sans-serif;
margin: 0 0 20px 0;
}
.prose .essay-content .draft-perfect-list {
display: flex;
width: 100%;
flex-wrap: wrap;
margin: 0 0 30px;
padding-left: 0;
}
.prose .essay-content .draft-perfect-list > li {
width: 25%;
padding-left: 0;
}
.prose .essay-content .draft-perfect-list > li::before {
content: "";
width: 11px;
height: 11px;
background: url(/images/sprite1.png) no-repeat;
background-size: 330px;
background-position: -291px -11px;
display: inline-block;
position: static;
margin: 0 3px 0 0;
}
.prose .essay-content.essay-content-uk {
border-top: none;
background: #f5f5f5;
}
.prose .essay-content.essay-content-uk .review-btn {
padding: 10px 30px;
color: #fff;
}
.prose .essay-content.essay-content-uk a {
color: #f58e0e;
}
.prose .essay-content.essay-content-uk img {
margin: 30px 0 0;
width: auto;
height: auto;
}
.prose .essay-content.essay-content-uk .image-mobile {
display: none;
}
.prose .essay-content .seocontent-blocks {
display: flex;
flex-wrap: wrap;
padding: 40px 0 0 0;
gap: 30px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item {
max-width: calc(50% - 15px);
position: relative;
width: 100%;
padding-right: 11px;
padding-left: 50px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item:nth-child(2n) {
padding-right: 0;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item i {
width: 57px;
height: 57px;
position: absolute;
left: 0;
top: 0;
background-image: url(/images/sprite1.png);
background-size: 550px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item i.dessay {
background-position: -6px -319px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item i.nessay {
background-position: -61px -279px;
background-size: 480px;
top: 4px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item i.eessay {
background-position: -145px -319px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item i.pessay {
background-position: -216px -316px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item .seocontent-heading {
margin: 0 0 3px 15px;
position: relative;
width: 100%;
display: inline-block;
font-size: 22px;
line-height: 26px;
font-family: "robotomedium", sans-serif;
color: #2a2a2a;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item .seocontent-text {
font-size: 15px;
line-height: 18px;
color: #2a2a2a;
margin: 0 0 0 15px;
}
/*
* `.customer-graph-us` ("Our Essay Writing Service Reviews by UK Students"
* satisfaction graph on /essay-writing) — tiered stacked-bar visualization.
* Only `.excellent` is actually visible (the other 4 tiers are real,
* verbatim `display:none` in the live CSS — they exist in the DOM as
* fallback/legacy markup but the live site itself only ever shows the top
* tier here).
*/
.prose .customer-graph {
padding: 50px 0;
position: relative;
text-align: center;
}
.prose .customer-graph a {
color: #f58e0e;
}
.prose .customer-graph .ratelist {
margin: 70px 0 50px 0;
padding-left: 0;
}
.prose .customer-graph .ratelist > li {
display: inline-block;
width: 19%;
list-style: none;
padding-left: 0;
}
.prose .customer-graph .ratelist > li::before {
content: none;
}
.prose .customer-graph .ratelist .ratelistitem label {
display: block;
font-size: 16px;
line-height: 20px;
color: #1d1d1d;
font-family: "robotomedium", sans-serif;
}
.prose .customer-graph-us .content-subtitle {
width: 83%;
margin: auto;
}
.prose .customer-graph-us .ratelist .ratelistitem .rate-list-box {
position: relative;
height: 90px;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box {
height: 82px;
width: 32px;
position: absolute;
left: 43%;
bottom: 5px;
border-radius: 32px;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box span {
position: absolute;
right: -38px;
top: 11px;
font-size: 12px;
font-family: "robotomedium", sans-serif;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box.excellent {
background: #6fa22d;
/* Live CSS has `z-index:-1` here (vs `-2` on `.v-good` below), just to
keep this shorter green tier painted in FRONT of the taller orange one
behind it. This app's ancestor chain doesn't form the same local
stacking context, so negative values sank both tiers behind the page
background entirely (confirmed via a forced z-index override). Using
small positive values instead keeps the same relative front/back order
without that problem. */
z-index: 2;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box.excellent span {
color: #6fa22d;
}
/*
* `.v-good` is NOT actually hidden on the live site — confirmed by scrolling
* the real section into view (it has a scroll-triggered reveal animation;
* checking computed style before that animation fires falsely reads
* `display:none`). Scrolled-into-view, exactly two tiers are visible: the
* green `.excellent` cap in front, and this taller orange tier peeking out
* above/behind it. `.good`/`.staisfactory`/`.improve` stay genuinely hidden
* even after the animation — confirmed no third color ever appears.
*/
.prose .customer-graph-us .ratelist .ratelistitem .color-box.v-good {
height: 100px;
background: #f58e0e;
z-index: 1;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box.v-good span {
color: #f58e0e;
right: inherit;
left: -38px;
}
/*
* Which THIRD tier is visible (beyond `.excellent`/`.v-good`) depends on
* which one actually carries a real percentage in the CMS content, not a
* fixed choice — this app's own `/essay-writing` article has real text in
* `.staisfactory` (e.g. "4.2%") and a blank ` ` in `.good`, the
* opposite of what happened to be populated on the live `/au/essay-writing`
* page checked earlier. So `.staisfactory` is the one unhidden here,
* matching this article's actual data rather than copying the other
* region's choice.
*/
.prose .customer-graph-us .ratelist .ratelistitem .color-box.staisfactory {
height: 111px;
background: #ffcc8d;
z-index: 0;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box.staisfactory span {
color: #ffcc8d;
top: 0;
right: -33px;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box.good,
.prose .customer-graph-us .ratelist .ratelistitem .color-box.improve {
display: none;
}
.prose .customer-graph .rateslegend {
border-radius: 54px;
background-color: #fff;
box-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.06);
width: 90%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 5px;
flex-wrap: wrap;
}
.prose .customer-graph .rateslegend .rates-legend-item {
margin: 0 12px;
color: #757575;
font-size: 12px;
font-family: "robotomedium", sans-serif;
text-transform: uppercase;
letter-spacing: 0.6px;
display: flex;
align-items: center;
}
.prose .customer-graph .rateslegend .rates-legend-item:first-of-type .rates-legend-item-label::after {
background-color: #6fa22d;
}
.prose .customer-graph .rateslegend .rates-legend-item:nth-of-type(2) .rates-legend-item-label::after {
background-color: #f58e0e;
}
.prose .customer-graph .rateslegend .rates-legend-item:nth-of-type(3) .rates-legend-item-label::after {
background-color: #fcaf4f;
}
.prose .customer-graph .rateslegend .rates-legend-item:nth-of-type(4) .rates-legend-item-label::after {
background-color: #ffcc8d;
}
.prose .customer-graph .rateslegend .rates-legend-item:nth-of-type(5) .rates-legend-item-label::after {
background-color: #cfcfcf;
}
.prose .customer-graph .rateslegend .rates-legend-item .rates-legend-item-label {
width: 24px;
height: 24px;
position: relative;
padding-left: 42px;
display: inline-block;
}
.prose .customer-graph .rateslegend .rates-legend-item .rates-legend-item-label::before {
content: "";
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 100%;
position: absolute;
left: 7px;
top: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
.prose .customer-graph .rateslegend .rates-legend-item .rates-legend-item-label::after {
width: 24px;
height: 24px;
content: "";
transform: rotate(45deg);
background-color: grey;
border-radius: 8px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
/*
* `.other-services` ("An Insight into Our Academic Services" grid on
* /essay-writing) — unlike `.coursework-help-services .country-servicelist`
* elsewhere in this file (a real JS-driven Slick carousel with no CSS
* container rule), THIS variant has a genuine `display:flex; flex-wrap`
* grid in the live stylesheet — verified before reusing the carousel
* workaround, since the two look superficially identical but aren't.
*/
.prose .other-services {
padding: 50px 0;
background: #7b9a46 url(/images/country-servicebg.png) repeat;
}
.prose .other-services .content-title {
color: #fff;
text-align: center;
padding: 0 0 5px 0;
font-size: 28px;
line-height: 32px;
font-family: "robotomedium", sans-serif;
}
.prose .other-services .content-subtitle {
color: #fff;
text-align: center;
font-size: 18px;
line-height: 20px;
}
.prose .other-services .country-servicelist {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 25px;
width: 86%;
margin: 0 auto;
}
.prose .other-services .country-servicelist .servicelist-inner {
width: 21%;
background: #ffffff;
border-radius: 3px;
padding: 20px 40px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
color: #2a2a2a;
margin: 0 10px 0 10px;
position: relative;
text-align: center;
}
.prose .other-services .country-servicelist .servicelist-inner svg {
display: block;
margin: 0 auto 5px;
}
.prose .other-services .country-servicelist .servicelist-inner label {
font-size: 18px;
line-height: 24px;
font-family: "robotomedium", sans-serif;
display: block;
}
.prose .other-services .country-servicelist .servicelist-inner label a {
color: #2a2a2a;
}
.prose .other-services .country-servicelist .servicelist-inner label a:hover {
color: #f58e0e;
}
.prose .other-services .country-servicelist .servicelist-inner .samplelink {
font-size: 16px;
line-height: 18px;
color: #7b9a46;
display: block;
text-decoration: underline;
padding: 15px 0 0 0;
}
.prose .other-services .country-servicelist .servicelist-inner .samplelink:hover {
color: #2a2a2a;
}
/*
* `.essay-writing .content_navigatation_area` (the scrollable two-column
* "100,000+ Students Have Chosen Our Reliable Online Essay Writing
* Service" box) — same `.left`/`.right` flex-basis treatment as
* `.coursework-scrollable`'s `content_area` above (AGENTS.md's documented
* `ai-humanizer.css` flex min-width fix): `flex: 0 0 48%; min-width: 0`
* instead of a plain `width:48%`.
*/
.prose .essay-writing {
padding: 50px 0;
}
.prose .essay-writing .content_navigatation_area {
position: relative;
margin: 45px 0 0;
padding: 20px;
border-radius: 20px;
background: #f1f5ea;
}
.prose .essay-writing .content_navigatation_area .content_area {
height: 456px;
overflow: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0 34px 0 0;
}
.prose .essay-writing .content_navigatation_area .content_area .left,
.prose .essay-writing .content_navigatation_area .content_area .right {
flex: 0 0 48%;
min-width: 0;
color: #2a2a2a;
}
.prose .essay-writing .content_navigatation_area .content_area .seo-heading {
font-size: 20px;
line-height: 24px;
padding: 0 0 14px;
margin: 0 0 15px;
border-bottom: 1px solid #d8d8d8;
}
.prose .essay-writing .content_navigatation_area .content_area .seo-heading-h3 {
font-size: 18px;
line-height: 20px;
}
.prose .essay-writing .content_navigatation_area .content_area p {
font-size: 15px;
line-height: 20px;
margin: 0 0 20px;
}
.prose .essay-writing .content_navigatation_area .content_area p:last-child {
margin: 0;
}
.prose .essay-writing .content_navigatation_area .content_area ol,
.prose .essay-writing .content_navigatation_area .content_area ul {
padding: 0 0 0 30px;
margin: 0 0 20px;
}
.prose .essay-writing .content_navigatation_area .content_area ol > li,
.prose .essay-writing .content_navigatation_area .content_area ul > li {
margin-bottom: 10px;
font-size: 15px;
line-height: 20px;
padding-left: 0;
}
.prose .essay-writing .content_navigatation_area .content_area ol > li::before,
.prose .essay-writing .content_navigatation_area .content_area ul > li::before {
content: none;
}
.prose .essay-writing .content_navigatation_area .content_area ul {
list-style: disc;
}
.prose .essay-writing .content_navigatation_area .content_area ul > li {
list-style: disc;
}
.prose .essay-writing .content_navigatation_area .content_area ol {
list-style: decimal;
}
.prose .essay-writing .content_navigatation_area .content_area ol > li {
list-style: decimal;
}
.prose .essay-writing .content_navigatation_area .content_area .bold_title {
font-family: "robotomedium", sans-serif;
margin: 0 0 3px 0;
color: #1d1d1d;
}
/*
* The plain `.essaytopics` intro section (no modifier class — the FIRST
* section on /essay-writing, "We Cover Every Essay Subject..."/"Our Success
* in Numbers!"). The earlier `.essaytopics article.left/right` base rule
* (added for /case-study-help) only gives the two columns their width split
* — it never styled what's actually inside them: the free-services
* checklist (`.mainfeature`/`.home_feature`) or the stats grid
* (`.datasection`/`.datacount`). Both had zero CSS.
*/
.prose .essaytopics .left .title-head-nz {
text-align: left;
margin: 0 0 20px;
}
.prose .essaytopics article.left .mainfeature {
padding: 15px 0 0 0;
}
.prose .essaytopics article.left .feature-title {
font-size: 18px;
line-height: 22px;
color: #071e57;
font-family: "robotomedium", sans-serif;
}
.prose .essaytopics article.left .home_feature {
padding: 8px 0 10px;
display: inline-block;
width: 100%;
}
.prose .essaytopics article.left .home_feature > li {
width: 33.33%;
float: left;
padding: 0 0 8px;
font-size: 14px;
line-height: 16px;
color: #484f5e;
font-family: "robotoregular", sans-serif;
list-style: none;
padding-left: 0;
}
.prose .essaytopics article.left .home_feature > li::before {
content: "";
width: 11px;
height: 11px;
background: url(/images/sprite1.png) no-repeat;
background-size: 330px;
background-position: -291px -11px;
display: inline-block;
/* Without this, the global `.prose ul>li::before` rule's `position:
absolute; left:0; top:0` (globals.css) wins by default since this rule
never declared `position` at all — landing the icon on top of the text
instead of inline before it. */
position: static;
margin: 0 3px 0 0;
}
.prose .essaytopics article.left .home_feature.home_feature_uk > li {
width: 50%;
}
.prose .essaytopics article.left .viewsmple {
background: #f58e0e;
color: #fff;
border-radius: 3px;
font-size: 19px;
line-height: 23px;
padding: 10px 40px;
display: inline-block;
margin: 20px 0 0 0;
font-family: "robotomedium", sans-serif;
}
.prose .essaytopics article.right .datasection {
float: right;
}
.prose .essaytopics article.right .datasection .title-head-nz {
text-align: center;
padding: 0;
}
.prose .essaytopics article.right .datasection .content-subtitle {
text-align: center;
}
.prose .essaytopics article.right .datacount {
margin: 0 auto;
background: #fff;
padding: 0 20px;
float: left;
width: 100%;
}
.prose .essaytopics article.right .datacount > li {
width: 50%;
float: left;
text-align: center;
border-right: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
padding: 27px 15px;
list-style: none;
padding-left: 15px;
}
.prose .essaytopics article.right .datacount > li::before {
content: none;
}
.prose .essaytopics article.right .datacount > li:nth-child(2n) {
border-right: 0;
}
.prose .essaytopics article.right .datacount > li:nth-child(3),
.prose .essaytopics article.right .datacount > li:nth-child(4) {
border-bottom: 0;
}
.prose .essaytopics article.right .datacount > li p {
font-size: 54px;
line-height: 56px;
color: #ef841f;
font-family: "robotomedium", sans-serif;
}
.prose .essaytopics article.right .datacount > li label {
font-size: 16px;
line-height: 18px;
color: #2a2a2a;
font-family: "robotoregular", sans-serif;
}
/*
* The bare `.conversation-strip` (no modifier class — "Seasonal Offer On
* ESSAYS" on /essay-writing). The modifier variants (`.homeworkstrip`,
* `.programmingstrip`) already exist as self-contained compound-scoped
* blocks elsewhere in this file; this is the un-modified default the live
* CSS itself falls back to, given the same `-50vw` full-bleed treatment and
* `overflow:hidden` safety guard as those for consistency.
*/
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) {
background: url(/images/stripessay.jpg) no-repeat;
background-size: cover;
padding: 28px 0;
width: 100vw;
display: inline-block;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
overflow: hidden;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .stripleft {
float: left;
width: 37%;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .stripleft .striptitle {
text-align: center;
font-size: 39px;
line-height: 42px;
color: #7fa64e;
font-family: "robotomedium", sans-serif;
text-transform: uppercase;
margin: 0;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .stripleft .striptitle span {
display: block;
color: #1d1d1d;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .stripright {
width: 58%;
float: right;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .offer-box {
display: inline-block;
text-align: left;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .offer-box .title {
font-size: 24px;
line-height: 33px;
color: #fff;
margin: 0;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .offer-box .offer-off {
font-size: 51px;
line-height: 51px;
color: #fff;
font-family: "robotomedium", sans-serif;
margin: 0;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .join {
display: inline-block;
font-size: 54px;
line-height: 74px;
color: #e7ff10;
padding: 0 20px;
font-family: "robotomedium", sans-serif;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .offer-app {
display: inline-block;
color: #e7ff10;
font-size: 20px;
line-height: 21px;
padding: 0 16px;
font-family: "robotomedium", sans-serif;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .btn-order {
background: #fff;
color: #1d1d1d;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.22);
padding: 11px 35px;
font-size: 19px;
border-radius: 3px;
position: absolute;
top: 56px;
margin: 0 0 0 40px;
}
/*
* `.payment-process.essay-process` ("How To Get Essay Help UK..." 3-step
* row on /essay-writing) had no CSS — the inline-SVG icons self-size via
* their own width/height attributes, so the only missing piece was the
* flex row + dashed connector lines between steps.
*/
.prose .payment-process {
background: #f5f5f5;
padding: 50px 0;
text-align: center;
}
.prose .payment-process .order-step {
display: flex;
justify-content: space-between;
width: 81%;
margin: 30px auto;
}
.prose .payment-process .order-step .title {
font-size: 19px;
line-height: 20px;
color: #1d1d1d;
font-family: "robotomedium", sans-serif;
padding: 10px 0 0;
}
.prose .payment-process .step-mid {
position: relative;
}
.prose .payment-process .step-mid::after,
.prose .payment-process .step-mid::before {
content: "";
border-bottom: 1px dashed #a4a4a4;
width: 230px;
position: absolute;
top: 33%;
left: -120%;
}
.prose .payment-process .step-mid::after {
left: inherit;
right: -120%;
}
.prose .payment-process .content {
font-size: 15px;
line-height: 20px;
color: #2a2a2a;
margin: 0 0 30px;
}
.prose .payment-process .btn-order {
padding: 10px 25px;
border-radius: 3px;
background: #f58e0e;
color: #fff;
font-size: 18px;
line-height: 22px;
font-family: "robotomedium", sans-serif;
margin: 30px 0 0;
display: inline-block;
}
.prose .payment-process .btn-order:hover {
background: #ffcc54;
}
.prose .essay-process .title {
width: 250px;
}
.prose .essay-process .step-mid::before {
left: -66%;
}
.prose .essay-process .step-mid::after {
right: -66%;
}
/*
* `.research-paper-part` (the "Can You Help Me Write..."/"Who Can Write..."
* 2-card FAQ pair on /research-paper-help) had no CSS — rendered as plain
* stacked text instead of two bordered cards side by side.
*/
.prose .research-seo-content .seo-title {
font-size: 28px;
line-height: 30px;
padding: 10px 0 7px 0;
color: #1d1d1d;
}
.prose .research-seo-content .research-paper-part {
padding: 15px 0 25px 0;
float: left;
width: 100%;
}
.prose .research-seo-content .research-paper-part .leftside {
float: left;
}
.prose .research-seo-content .research-paper-part .rightside {
float: right;
}
.prose .research-seo-content .research-paper-part .leftside,
.prose .research-seo-content .research-paper-part .rightside {
width: 48%;
background: #f5f5f5;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
border-radius: 3px;
padding: 15px;
}
.prose .research-seo-content .research-paper-part .seo-subtitle {
font-size: 24px;
line-height: 26px;
color: #f58e0e;
padding: 0 0 13px 0;
font-family: "robotomedium", sans-serif;
}
.prose .research-seo-content .seobtn {
display: block;
text-align: center;
}
.prose .research-seo-content .seobtn .orderbtn {
background: #f58e0e;
color: #fff;
border-radius: 3px;
font-size: 19px;
line-height: 23px;
padding: 12px 39px;
display: inline-block;
margin: 20px 0 0 0;
font-family: "robotomedium", sans-serif;
}
/*
* `.research-paper-sample` ("Hundreds of Research Paper Help Samples Free
* to Download") — a real ``, so needs the usual
* `.prose ul>li::before` checkmark override. Icons reuse `sprite1.png`
* (same asset as other already-ported New-layout icon grids), scoped
* locally per the established `.sprite`-collision reasoning elsewhere in
* this file.
*/
.prose .research-paper-sample {
padding: 50px 0;
background: #f5f5f5;
position: relative;
}
.prose .research-paper-sample::after {
content: "";
background: url(/images/researchsamples-right.svg) no-repeat;
width: 170px;
height: 143px;
position: absolute;
right: 0;
top: 124px;
}
.prose .research-paper-sample::before {
content: "";
background: url(/images/researchsamples-left.svg) no-repeat;
width: 170px;
height: 285px;
position: absolute;
left: 0;
bottom: 40px;
}
.prose .research-paper-sample .content-title {
text-align: center;
padding: 0 0 6px 0;
}
.prose .research-paper-sample .content-subtitle {
text-align: center;
}
.prose .research-paper-sample .samplelist {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 80%;
margin: 0 auto;
padding: 40px 0 0 0;
}
.prose .research-paper-sample .samplelist > li {
max-width: calc(50% - 25px);
background: #ffffff;
border-radius: 10px;
padding: 20px 18px 20px 100px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
color: #2a2a2a;
margin: 0 0 25px 0;
position: relative;
list-style: none;
padding-left: 100px;
}
.prose .research-paper-sample .samplelist > li::before {
content: "";
background: url(/images/sprite1.png) no-repeat;
background-size: 600px;
width: 75px;
height: 75px;
position: absolute;
left: 15px;
top: 15px;
}
.prose .research-paper-sample .samplelist .samplelist-inner.sample1::before {
background-position: -249px -1641px;
}
.prose .research-paper-sample .samplelist .samplelist-inner.sample2::before {
background-position: -335px -1641px;
}
.prose .research-paper-sample .samplelist .samplelist-inner.sample3::before {
background-position: -422px -1641px;
}
.prose .research-paper-sample .samplelist .samplelist-inner.sample4::before {
background-position: -509px -1641px;
}
.prose .research-paper-sample .samplelist .samplelist-inner label {
font-size: 18px;
line-height: 24px;
color: #1d1d1d;
font-family: "robotomedium", sans-serif;
padding: 0 0 10px 0;
display: block;
}
.prose .research-paper-sample .samplelist .samplelist-inner label::after {
content: "";
background: #f58e0e;
width: 100px;
height: 2px;
display: block;
margin: 2px 0 0 0;
}
.prose .research-paper-sample .samplelist .samplelist-inner .samplelist-content {
font-size: 15px;
line-height: 20px;
color: #2a2a2a;
}
.prose .research-paper-sample .samplelist .samplelist-inner .samplelist-btn {
font-size: 16px;
line-height: 20px;
color: #f58e0e;
font-family: "robotomedium", sans-serif;
margin: 15px 0 0 0;
display: inline-block;
border: 1px dashed #f58e0e;
border-radius: 3px;
padding: 6px 10px;
}
/*
* `.researchpaper-type` ("All Types of Research Papers Covered") had no
* CSS — the whole colorful wheel is a single real `![]()
`
* (`researchpaper-type.png`), not an HTML/CSS construction, so the only
* thing missing was the two-column container: text on the left, the image
* on the right at its real (unscaled) size. Without it the `![]()
` rendered
* at full container width, full-bleed below the text instead of beside it.
*/
.prose .researchpaper-type {
padding: 50px 0;
display: inline-block;
width: 100%;
}
.prose .researchpaper-type .left {
width: 45%;
float: left;
padding: 30px 0 0 0;
}
.prose .researchpaper-type .left .viewsmple {
background: #f58e0e;
color: #fff;
border-radius: 3px;
font-size: 19px;
line-height: 23px;
padding: 10px 25px;
display: inline-block;
margin: 20px 0 0 0;
font-family: "robotomedium", sans-serif;
}
.prose .researchpaper-type .right {
width: 50%;
float: right;
padding: 0 0 0 120px;
}
.prose .researchpaper-type .right img {
width: auto;
height: auto;
}
/*
* `.how-we-work-researchpaper` ("How Do We Write an A+ Grade Worthy
* Research Paper for You?") — a real ``, so it was
* falling back to the generic `.prose ul>li::before` checkmark (single
* column, 19px icon, 30px padding) instead of its own real 2-column flex
* grid with a differently-sized/positioned icon from the same sprite sheet.
*/
.prose .how-we-work-researchpaper .content-title {
text-align: center;
padding: 0 0 8px 0;
}
.prose .how-we-work-researchpaper .content-subtitle {
text-align: center;
padding: 0 80px;
}
.prose .how-we-work-researchpaper .work-step {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin: 0 auto;
padding: 40px 0 0 0;
}
.prose .how-we-work-researchpaper .work-step > li {
max-width: calc(50% - 25px);
color: #2a2a2a;
margin: 0 0 25px 0;
padding: 0 0 0 35px;
position: relative;
list-style: none;
}
.prose .how-we-work-researchpaper .work-step > li::before {
content: "";
background: url(/images/sprite1.png) no-repeat;
background-size: 580px;
background-position: -458px -1078px;
width: 25px;
height: 25px;
position: absolute;
left: 0;
top: 0;
}
.prose .how-we-work-researchpaper .work-step > li:last-child,
.prose .how-we-work-researchpaper .work-step > li:nth-last-child(2) {
margin: 0;
}
.prose .how-we-work-researchpaper .work-step .work-step-inner label {
font-size: 20px;
line-height: 22px;
font-family: "robotomedium", sans-serif;
color: #1d1d1d;
padding: 0 0 7px 0;
display: block;
}
.prose .how-we-work-researchpaper .work-step .work-step-inner .work-step-content {
font-size: 15px;
line-height: 20px;
color: #2a2a2a;
}
.prose .how-we-work-researchpaper .stepbtn {
display: block;
text-align: center;
}
.prose .how-we-work-researchpaper .stepbtn .orderbtn {
background: #f58e0e;
border-radius: 3px;
color: #fff;
padding: 9px 20px;
font-size: 19px;
line-height: 22px;
font-family: "robotomedium", sans-serif;
display: inline-block;
margin: 50px 0 0 0;
}
/*
* Mobile-only overrides for the "New"-layout Services article body
* (`/thesis-help`-style pages). Everything above this point is the live
* template's own desktop CSS, unchanged. The template has no mobile
* breakpoints of its own for this body content, so several blocks use
* fixed pixel widths/`left` offsets sized for a ~1160px desktop column
* — most prominently the alternating-card timeline's 325px cards offset
* 180px from center, which alone pushes the page ~500px wide on a phone.
* This collapses just those offending (verified-present) selectors to a
* fluid, stacked layout below 768px; nothing here applies above that
* width, so desktop rendering is unchanged.
*/
@media (max-width: 767px) {
.prose .structure-timeline:before {
left: 20px;
transform: none;
}
.prose .structure-timeline .structure-item {
padding-left: 50px;
}
.prose .structure-timeline .structure-item:nth-child(2) {
padding-top: 0;
}
.prose .structure-timeline .structure-item .structure-img {
left: 20px;
margin-left: -18px;
}
.prose .structure-timeline .structure-item .structure-content,
.prose .structure-timeline .structure-item:nth-child(odd) .structure-content {
width: 100%;
max-width: 100%;
left: 0;
float: none;
box-sizing: border-box;
}
.prose .structure-timeline .structure-item .structure-content:after,
.prose .structure-timeline .structure-item:nth-child(odd) .structure-content:after {
display: none;
}
.prose .case-study-feature .featurebox > li {
width: 100%;
}
.prose .program-whychoose .whychoose_slider .services-inner {
max-width: 100%;
}
.prose .payment-process .step-mid::after,
.prose .payment-process .step-mid::before {
width: auto;
max-width: 100%;
}
.prose .essay-process .title {
max-width: 100%;
}
/* `.topiclist li` is a fixed 19%-wide icon-grid column (5 across) with no
narrower breakpoint in the source stylesheet — at a ~300px mobile
content width each column is only ~40px, too narrow for its own
uppercase label text to wrap into, so it overflows rather than
wrapping. Widening to 2 columns gives the same real labels enough
room to actually wrap. */
.prose .thesistopic .maintopicbox .topiclist li {
width: 48%;
}
/* Several icon blocks in this raw CMS body are inline `
`s with no width
* constraint, so the text rendered at full container width (no visible
* stacking bug since the floated `.right` image happened to sit beside the
* text anyway) but noticeably smaller/narrower than the live site's real
* 45%/50% split with the image column's 120px vertical padding.
*/
.prose .programmingsoftware {
padding: 50px 0;
display: inline-block;
width: 100%;
}
.prose .programmingsoftware .left {
width: 45%;
float: left;
}
.prose .programmingsoftware .left .viewsmple {
background: #f58e0e;
color: #fff;
border-radius: 3px;
font-size: 19px;
line-height: 23px;
padding: 12px 39px;
display: inline-block;
margin: 20px 0 0 0;
font-family: "robotomedium", sans-serif;
}
.prose .programmingsoftware .right {
width: 50%;
float: right;
padding: 120px 0 120px 30px;
}
.prose .programmingsoftware .right img {
width: auto;
height: auto;
}
/*
* `.program-step` ("Programming Assignment Helpers Assure Perfection in 3
* Steps!") — the browser-window-styled `.steps-process` card (traffic-light
* `.address-bar` dots + numbered `.step-box` list) had no CSS at all. Icons
* reuse `sprite1.png` (same asset as the already-ported `.mainlist`/
* `.casestudytopic` grids elsewhere in this file), scoped locally rather
* than touching the shared `.sprite` base rule — see that reasoning in the
* `.casestudytopic` section above.
*/
.prose .program-step {
padding: 50px 0;
display: inline-block;
width: 100%;
}
.prose .program-step .process-left {
width: 43%;
float: left;
padding: 0 10px 0 0;
}
.prose .program-step .process-left .order-btn {
background: #f58e0e;
color: #fff;
font-size: 20px;
line-height: 22px;
font-family: "robotomedium", sans-serif;
padding: 10px 30px;
border-radius: 3px;
margin: 40px 0 0 0;
display: inline-block;
}
.prose .program-step .steps-process {
width: 47%;
border: 1px solid #e8e8e8;
background: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
position: relative;
float: right;
}
.prose .program-step .steps-process::before {
content: "";
z-index: -1;
height: 140px;
width: 140px;
position: absolute;
right: -53px;
bottom: -39px;
border-radius: 100%;
background:
linear-gradient(90deg, #ffffff 8px, transparent 1%) center,
linear-gradient(#ffffff 8px, transparent 1%) center,
#434343;
background-size: 9px 9px;
}
.prose .program-step .steps-process .address-bar {
padding: 10px;
border-bottom: 1px solid #e8e8e8;
display: block;
}
.prose .program-step .steps-process .address-bar circle {
width: 12px;
height: 12px;
border-radius: 100%;
background: #ff6057;
display: inline-block;
margin: 0 3px 0 0;
}
.prose .program-step .steps-process .address-bar circle:nth-child(2) {
background: #ffc12e;
}
.prose .program-step .steps-process .address-bar circle:nth-child(3) {
background: #28ca40;
}
.prose .program-step .steps-process .step-box {
padding: 30px 30px 40px;
}
.prose .program-step .steps-process .step-box > li {
margin: 0 0 35px;
position: relative;
padding-left: 0;
}
.prose .program-step .steps-process .step-box > li::before {
content: none;
}
.prose .program-step .steps-process .step-box > li:last-child {
margin: 0;
}
.prose .program-step .steps-process .step-box > li:last-child::after {
display: none;
}
.prose .program-step .steps-process .step-box > li::after {
content: "";
width: 1px;
height: 41px;
background: #dfdfdf;
position: absolute;
top: 85px;
left: 42px;
}
.prose .program-step .steps-process .step-box li i {
width: 85px;
height: 85px;
float: left;
margin: 0 26px 0 0;
border-radius: 100%;
background-image: url(/images/sprite1.png);
background-size: 490px;
border: 1px solid #dcdcdc;
}
.prose .program-step .steps-process .step-box li i.step1 {
background-position: -268px -1250px;
}
.prose .program-step .steps-process .step-box li i.step2 {
background-position: -339px -1250px;
}
.prose .program-step .steps-process .step-box li i.step3 {
background-position: -413px -1250px;
}
.prose .program-step .steps-process .step-box .step-title {
font-size: 22px;
line-height: 26px;
color: #1d1d1d;
font-family: "robotomedium", sans-serif;
padding: 10px 0 0;
display: block;
}
.prose .program-step .steps-process .step-box .step-content {
font-size: 15px;
line-height: 18px;
color: #2a2a2a;
margin: 3px 0 0;
}
/*
* `.title-head-nz`/`.subtitle-head-nz` — a generic centered section-heading
* pair reused across many New-layout sections (not just one page). Only
* ever existed here as section-scoped overrides (`.thesis-step
* .title-head-nz`, `.coursework-help-services .title-head-nz`); the bare
* base rule itself was missing everywhere in this app, so any section using
* it without its own override (e.g. /essay-writing's `.essay-content-uk`
* below) rendered an unstyled heading.
*/
.prose .title-head-nz {
color: #1d1d1d;
font-size: 28px;
line-height: 32px;
font-family: "robotomedium", sans-serif;
margin: 0 0 5px;
text-align: center;
}
.prose .subtitle-head-nz {
font-size: 15px;
line-height: 20px;
color: #2a2a2a;
margin: 0 0 30px;
text-align: center;
}
/*
* `.essay-content` ("Your Search for Best Online Essay Writing Help Ends
* Here!" + the UK essay-types grid further down, `.essay-content-uk`) had
* no CSS at all. The `-uk` variant's `.image-mobile` is a real, deliberate
* `display:none` on desktop (mobile-only swap for the main `img`) — without
* it, that raw `![]()
` rendered at an absurd
* ~1538px tall, the single biggest contributor to this page being nearly
* 2x too tall before this fix.
*/
.prose .essay-content {
padding: 50px 0;
display: inline-block;
width: 100%;
}
.prose .essay-content .essay-seo-content {
float: left;
width: 100%;
position: relative;
}
.prose .essay-content .essay-seo-content .seo-title {
font-size: 30px;
line-height: 40px;
color: #1d1d1d;
font-family: "robotomedium", sans-serif;
margin: 0 0 20px 0;
}
.prose .essay-content .draft-perfect-list {
display: flex;
width: 100%;
flex-wrap: wrap;
margin: 0 0 30px;
padding-left: 0;
}
.prose .essay-content .draft-perfect-list > li {
width: 25%;
padding-left: 0;
}
.prose .essay-content .draft-perfect-list > li::before {
content: "";
width: 11px;
height: 11px;
background: url(/images/sprite1.png) no-repeat;
background-size: 330px;
background-position: -291px -11px;
display: inline-block;
position: static;
margin: 0 3px 0 0;
}
.prose .essay-content.essay-content-uk {
border-top: none;
background: #f5f5f5;
}
.prose .essay-content.essay-content-uk .review-btn {
padding: 10px 30px;
color: #fff;
}
.prose .essay-content.essay-content-uk a {
color: #f58e0e;
}
.prose .essay-content.essay-content-uk img {
margin: 30px 0 0;
width: auto;
height: auto;
}
.prose .essay-content.essay-content-uk .image-mobile {
display: none;
}
.prose .essay-content .seocontent-blocks {
display: flex;
flex-wrap: wrap;
padding: 40px 0 0 0;
gap: 30px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item {
max-width: calc(50% - 15px);
position: relative;
width: 100%;
padding-right: 11px;
padding-left: 50px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item:nth-child(2n) {
padding-right: 0;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item i {
width: 57px;
height: 57px;
position: absolute;
left: 0;
top: 0;
background-image: url(/images/sprite1.png);
background-size: 550px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item i.dessay {
background-position: -6px -319px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item i.nessay {
background-position: -61px -279px;
background-size: 480px;
top: 4px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item i.eessay {
background-position: -145px -319px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item i.pessay {
background-position: -216px -316px;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item .seocontent-heading {
margin: 0 0 3px 15px;
position: relative;
width: 100%;
display: inline-block;
font-size: 22px;
line-height: 26px;
font-family: "robotomedium", sans-serif;
color: #2a2a2a;
}
.prose .essay-content .seocontent-blocks .seocontent-blocks-item .seocontent-text {
font-size: 15px;
line-height: 18px;
color: #2a2a2a;
margin: 0 0 0 15px;
}
/*
* `.customer-graph-us` ("Our Essay Writing Service Reviews by UK Students"
* satisfaction graph on /essay-writing) — tiered stacked-bar visualization.
* Only `.excellent` is actually visible (the other 4 tiers are real,
* verbatim `display:none` in the live CSS — they exist in the DOM as
* fallback/legacy markup but the live site itself only ever shows the top
* tier here).
*/
.prose .customer-graph {
padding: 50px 0;
position: relative;
text-align: center;
}
.prose .customer-graph a {
color: #f58e0e;
}
.prose .customer-graph .ratelist {
margin: 70px 0 50px 0;
padding-left: 0;
}
.prose .customer-graph .ratelist > li {
display: inline-block;
width: 19%;
list-style: none;
padding-left: 0;
}
.prose .customer-graph .ratelist > li::before {
content: none;
}
.prose .customer-graph .ratelist .ratelistitem label {
display: block;
font-size: 16px;
line-height: 20px;
color: #1d1d1d;
font-family: "robotomedium", sans-serif;
}
.prose .customer-graph-us .content-subtitle {
width: 83%;
margin: auto;
}
.prose .customer-graph-us .ratelist .ratelistitem .rate-list-box {
position: relative;
height: 90px;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box {
height: 82px;
width: 32px;
position: absolute;
left: 43%;
bottom: 5px;
border-radius: 32px;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box span {
position: absolute;
right: -38px;
top: 11px;
font-size: 12px;
font-family: "robotomedium", sans-serif;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box.excellent {
background: #6fa22d;
/* Live CSS has `z-index:-1` here (vs `-2` on `.v-good` below), just to
keep this shorter green tier painted in FRONT of the taller orange one
behind it. This app's ancestor chain doesn't form the same local
stacking context, so negative values sank both tiers behind the page
background entirely (confirmed via a forced z-index override). Using
small positive values instead keeps the same relative front/back order
without that problem. */
z-index: 2;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box.excellent span {
color: #6fa22d;
}
/*
* `.v-good` is NOT actually hidden on the live site — confirmed by scrolling
* the real section into view (it has a scroll-triggered reveal animation;
* checking computed style before that animation fires falsely reads
* `display:none`). Scrolled-into-view, exactly two tiers are visible: the
* green `.excellent` cap in front, and this taller orange tier peeking out
* above/behind it. `.good`/`.staisfactory`/`.improve` stay genuinely hidden
* even after the animation — confirmed no third color ever appears.
*/
.prose .customer-graph-us .ratelist .ratelistitem .color-box.v-good {
height: 100px;
background: #f58e0e;
z-index: 1;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box.v-good span {
color: #f58e0e;
right: inherit;
left: -38px;
}
/*
* Which THIRD tier is visible (beyond `.excellent`/`.v-good`) depends on
* which one actually carries a real percentage in the CMS content, not a
* fixed choice — this app's own `/essay-writing` article has real text in
* `.staisfactory` (e.g. "4.2%") and a blank ` ` in `.good`, the
* opposite of what happened to be populated on the live `/au/essay-writing`
* page checked earlier. So `.staisfactory` is the one unhidden here,
* matching this article's actual data rather than copying the other
* region's choice.
*/
.prose .customer-graph-us .ratelist .ratelistitem .color-box.staisfactory {
height: 111px;
background: #ffcc8d;
z-index: 0;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box.staisfactory span {
color: #ffcc8d;
top: 0;
right: -33px;
}
.prose .customer-graph-us .ratelist .ratelistitem .color-box.good,
.prose .customer-graph-us .ratelist .ratelistitem .color-box.improve {
display: none;
}
.prose .customer-graph .rateslegend {
border-radius: 54px;
background-color: #fff;
box-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.06);
width: 90%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 5px;
flex-wrap: wrap;
}
.prose .customer-graph .rateslegend .rates-legend-item {
margin: 0 12px;
color: #757575;
font-size: 12px;
font-family: "robotomedium", sans-serif;
text-transform: uppercase;
letter-spacing: 0.6px;
display: flex;
align-items: center;
}
.prose .customer-graph .rateslegend .rates-legend-item:first-of-type .rates-legend-item-label::after {
background-color: #6fa22d;
}
.prose .customer-graph .rateslegend .rates-legend-item:nth-of-type(2) .rates-legend-item-label::after {
background-color: #f58e0e;
}
.prose .customer-graph .rateslegend .rates-legend-item:nth-of-type(3) .rates-legend-item-label::after {
background-color: #fcaf4f;
}
.prose .customer-graph .rateslegend .rates-legend-item:nth-of-type(4) .rates-legend-item-label::after {
background-color: #ffcc8d;
}
.prose .customer-graph .rateslegend .rates-legend-item:nth-of-type(5) .rates-legend-item-label::after {
background-color: #cfcfcf;
}
.prose .customer-graph .rateslegend .rates-legend-item .rates-legend-item-label {
width: 24px;
height: 24px;
position: relative;
padding-left: 42px;
display: inline-block;
}
.prose .customer-graph .rateslegend .rates-legend-item .rates-legend-item-label::before {
content: "";
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 100%;
position: absolute;
left: 7px;
top: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
.prose .customer-graph .rateslegend .rates-legend-item .rates-legend-item-label::after {
width: 24px;
height: 24px;
content: "";
transform: rotate(45deg);
background-color: grey;
border-radius: 8px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
/*
* `.other-services` ("An Insight into Our Academic Services" grid on
* /essay-writing) — unlike `.coursework-help-services .country-servicelist`
* elsewhere in this file (a real JS-driven Slick carousel with no CSS
* container rule), THIS variant has a genuine `display:flex; flex-wrap`
* grid in the live stylesheet — verified before reusing the carousel
* workaround, since the two look superficially identical but aren't.
*/
.prose .other-services {
padding: 50px 0;
background: #7b9a46 url(/images/country-servicebg.png) repeat;
}
.prose .other-services .content-title {
color: #fff;
text-align: center;
padding: 0 0 5px 0;
font-size: 28px;
line-height: 32px;
font-family: "robotomedium", sans-serif;
}
.prose .other-services .content-subtitle {
color: #fff;
text-align: center;
font-size: 18px;
line-height: 20px;
}
.prose .other-services .country-servicelist {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 25px;
width: 86%;
margin: 0 auto;
}
.prose .other-services .country-servicelist .servicelist-inner {
width: 21%;
background: #ffffff;
border-radius: 3px;
padding: 20px 40px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
color: #2a2a2a;
margin: 0 10px 0 10px;
position: relative;
text-align: center;
}
.prose .other-services .country-servicelist .servicelist-inner svg {
display: block;
margin: 0 auto 5px;
}
.prose .other-services .country-servicelist .servicelist-inner label {
font-size: 18px;
line-height: 24px;
font-family: "robotomedium", sans-serif;
display: block;
}
.prose .other-services .country-servicelist .servicelist-inner label a {
color: #2a2a2a;
}
.prose .other-services .country-servicelist .servicelist-inner label a:hover {
color: #f58e0e;
}
.prose .other-services .country-servicelist .servicelist-inner .samplelink {
font-size: 16px;
line-height: 18px;
color: #7b9a46;
display: block;
text-decoration: underline;
padding: 15px 0 0 0;
}
.prose .other-services .country-servicelist .servicelist-inner .samplelink:hover {
color: #2a2a2a;
}
/*
* `.essay-writing .content_navigatation_area` (the scrollable two-column
* "100,000+ Students Have Chosen Our Reliable Online Essay Writing
* Service" box) — same `.left`/`.right` flex-basis treatment as
* `.coursework-scrollable`'s `content_area` above (AGENTS.md's documented
* `ai-humanizer.css` flex min-width fix): `flex: 0 0 48%; min-width: 0`
* instead of a plain `width:48%`.
*/
.prose .essay-writing {
padding: 50px 0;
}
.prose .essay-writing .content_navigatation_area {
position: relative;
margin: 45px 0 0;
padding: 20px;
border-radius: 20px;
background: #f1f5ea;
}
.prose .essay-writing .content_navigatation_area .content_area {
height: 456px;
overflow: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0 34px 0 0;
}
.prose .essay-writing .content_navigatation_area .content_area .left,
.prose .essay-writing .content_navigatation_area .content_area .right {
flex: 0 0 48%;
min-width: 0;
color: #2a2a2a;
}
.prose .essay-writing .content_navigatation_area .content_area .seo-heading {
font-size: 20px;
line-height: 24px;
padding: 0 0 14px;
margin: 0 0 15px;
border-bottom: 1px solid #d8d8d8;
}
.prose .essay-writing .content_navigatation_area .content_area .seo-heading-h3 {
font-size: 18px;
line-height: 20px;
}
.prose .essay-writing .content_navigatation_area .content_area p {
font-size: 15px;
line-height: 20px;
margin: 0 0 20px;
}
.prose .essay-writing .content_navigatation_area .content_area p:last-child {
margin: 0;
}
.prose .essay-writing .content_navigatation_area .content_area ol,
.prose .essay-writing .content_navigatation_area .content_area ul {
padding: 0 0 0 30px;
margin: 0 0 20px;
}
.prose .essay-writing .content_navigatation_area .content_area ol > li,
.prose .essay-writing .content_navigatation_area .content_area ul > li {
margin-bottom: 10px;
font-size: 15px;
line-height: 20px;
padding-left: 0;
}
.prose .essay-writing .content_navigatation_area .content_area ol > li::before,
.prose .essay-writing .content_navigatation_area .content_area ul > li::before {
content: none;
}
.prose .essay-writing .content_navigatation_area .content_area ul {
list-style: disc;
}
.prose .essay-writing .content_navigatation_area .content_area ul > li {
list-style: disc;
}
.prose .essay-writing .content_navigatation_area .content_area ol {
list-style: decimal;
}
.prose .essay-writing .content_navigatation_area .content_area ol > li {
list-style: decimal;
}
.prose .essay-writing .content_navigatation_area .content_area .bold_title {
font-family: "robotomedium", sans-serif;
margin: 0 0 3px 0;
color: #1d1d1d;
}
/*
* The plain `.essaytopics` intro section (no modifier class — the FIRST
* section on /essay-writing, "We Cover Every Essay Subject..."/"Our Success
* in Numbers!"). The earlier `.essaytopics article.left/right` base rule
* (added for /case-study-help) only gives the two columns their width split
* — it never styled what's actually inside them: the free-services
* checklist (`.mainfeature`/`.home_feature`) or the stats grid
* (`.datasection`/`.datacount`). Both had zero CSS.
*/
.prose .essaytopics .left .title-head-nz {
text-align: left;
margin: 0 0 20px;
}
.prose .essaytopics article.left .mainfeature {
padding: 15px 0 0 0;
}
.prose .essaytopics article.left .feature-title {
font-size: 18px;
line-height: 22px;
color: #071e57;
font-family: "robotomedium", sans-serif;
}
.prose .essaytopics article.left .home_feature {
padding: 8px 0 10px;
display: inline-block;
width: 100%;
}
.prose .essaytopics article.left .home_feature > li {
width: 33.33%;
float: left;
padding: 0 0 8px;
font-size: 14px;
line-height: 16px;
color: #484f5e;
font-family: "robotoregular", sans-serif;
list-style: none;
padding-left: 0;
}
.prose .essaytopics article.left .home_feature > li::before {
content: "";
width: 11px;
height: 11px;
background: url(/images/sprite1.png) no-repeat;
background-size: 330px;
background-position: -291px -11px;
display: inline-block;
/* Without this, the global `.prose ul>li::before` rule's `position:
absolute; left:0; top:0` (globals.css) wins by default since this rule
never declared `position` at all — landing the icon on top of the text
instead of inline before it. */
position: static;
margin: 0 3px 0 0;
}
.prose .essaytopics article.left .home_feature.home_feature_uk > li {
width: 50%;
}
.prose .essaytopics article.left .viewsmple {
background: #f58e0e;
color: #fff;
border-radius: 3px;
font-size: 19px;
line-height: 23px;
padding: 10px 40px;
display: inline-block;
margin: 20px 0 0 0;
font-family: "robotomedium", sans-serif;
}
.prose .essaytopics article.right .datasection {
float: right;
}
.prose .essaytopics article.right .datasection .title-head-nz {
text-align: center;
padding: 0;
}
.prose .essaytopics article.right .datasection .content-subtitle {
text-align: center;
}
.prose .essaytopics article.right .datacount {
margin: 0 auto;
background: #fff;
padding: 0 20px;
float: left;
width: 100%;
}
.prose .essaytopics article.right .datacount > li {
width: 50%;
float: left;
text-align: center;
border-right: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
padding: 27px 15px;
list-style: none;
padding-left: 15px;
}
.prose .essaytopics article.right .datacount > li::before {
content: none;
}
.prose .essaytopics article.right .datacount > li:nth-child(2n) {
border-right: 0;
}
.prose .essaytopics article.right .datacount > li:nth-child(3),
.prose .essaytopics article.right .datacount > li:nth-child(4) {
border-bottom: 0;
}
.prose .essaytopics article.right .datacount > li p {
font-size: 54px;
line-height: 56px;
color: #ef841f;
font-family: "robotomedium", sans-serif;
}
.prose .essaytopics article.right .datacount > li label {
font-size: 16px;
line-height: 18px;
color: #2a2a2a;
font-family: "robotoregular", sans-serif;
}
/*
* The bare `.conversation-strip` (no modifier class — "Seasonal Offer On
* ESSAYS" on /essay-writing). The modifier variants (`.homeworkstrip`,
* `.programmingstrip`) already exist as self-contained compound-scoped
* blocks elsewhere in this file; this is the un-modified default the live
* CSS itself falls back to, given the same `-50vw` full-bleed treatment and
* `overflow:hidden` safety guard as those for consistency.
*/
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) {
background: url(/images/stripessay.jpg) no-repeat;
background-size: cover;
padding: 28px 0;
width: 100vw;
display: inline-block;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
overflow: hidden;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .stripleft {
float: left;
width: 37%;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .stripleft .striptitle {
text-align: center;
font-size: 39px;
line-height: 42px;
color: #7fa64e;
font-family: "robotomedium", sans-serif;
text-transform: uppercase;
margin: 0;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .stripleft .striptitle span {
display: block;
color: #1d1d1d;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .stripright {
width: 58%;
float: right;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .offer-box {
display: inline-block;
text-align: left;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .offer-box .title {
font-size: 24px;
line-height: 33px;
color: #fff;
margin: 0;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .offer-box .offer-off {
font-size: 51px;
line-height: 51px;
color: #fff;
font-family: "robotomedium", sans-serif;
margin: 0;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .join {
display: inline-block;
font-size: 54px;
line-height: 74px;
color: #e7ff10;
padding: 0 20px;
font-family: "robotomedium", sans-serif;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .offer-app {
display: inline-block;
color: #e7ff10;
font-size: 20px;
line-height: 21px;
padding: 0 16px;
font-family: "robotomedium", sans-serif;
}
.prose .conversation-strip:not(.homeworkstrip):not(.programmingstrip) .btn-order {
background: #fff;
color: #1d1d1d;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.22);
padding: 11px 35px;
font-size: 19px;
border-radius: 3px;
position: absolute;
top: 56px;
margin: 0 0 0 40px;
}
/*
* `.payment-process.essay-process` ("How To Get Essay Help UK..." 3-step
* row on /essay-writing) had no CSS — the inline-SVG icons self-size via
* their own width/height attributes, so the only missing piece was the
* flex row + dashed connector lines between steps.
*/
.prose .payment-process {
background: #f5f5f5;
padding: 50px 0;
text-align: center;
}
.prose .payment-process .order-step {
display: flex;
justify-content: space-between;
width: 81%;
margin: 30px auto;
}
.prose .payment-process .order-step .title {
font-size: 19px;
line-height: 20px;
color: #1d1d1d;
font-family: "robotomedium", sans-serif;
padding: 10px 0 0;
}
.prose .payment-process .step-mid {
position: relative;
}
.prose .payment-process .step-mid::after,
.prose .payment-process .step-mid::before {
content: "";
border-bottom: 1px dashed #a4a4a4;
width: 230px;
position: absolute;
top: 33%;
left: -120%;
}
.prose .payment-process .step-mid::after {
left: inherit;
right: -120%;
}
.prose .payment-process .content {
font-size: 15px;
line-height: 20px;
color: #2a2a2a;
margin: 0 0 30px;
}
.prose .payment-process .btn-order {
padding: 10px 25px;
border-radius: 3px;
background: #f58e0e;
color: #fff;
font-size: 18px;
line-height: 22px;
font-family: "robotomedium", sans-serif;
margin: 30px 0 0;
display: inline-block;
}
.prose .payment-process .btn-order:hover {
background: #ffcc54;
}
.prose .essay-process .title {
width: 250px;
}
.prose .essay-process .step-mid::before {
left: -66%;
}
.prose .essay-process .step-mid::after {
right: -66%;
}
/*
* `.research-paper-part` (the "Can You Help Me Write..."/"Who Can Write..."
* 2-card FAQ pair on /research-paper-help) had no CSS — rendered as plain
* stacked text instead of two bordered cards side by side.
*/
.prose .research-seo-content .seo-title {
font-size: 28px;
line-height: 30px;
padding: 10px 0 7px 0;
color: #1d1d1d;
}
.prose .research-seo-content .research-paper-part {
padding: 15px 0 25px 0;
float: left;
width: 100%;
}
.prose .research-seo-content .research-paper-part .leftside {
float: left;
}
.prose .research-seo-content .research-paper-part .rightside {
float: right;
}
.prose .research-seo-content .research-paper-part .leftside,
.prose .research-seo-content .research-paper-part .rightside {
width: 48%;
background: #f5f5f5;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
border-radius: 3px;
padding: 15px;
}
.prose .research-seo-content .research-paper-part .seo-subtitle {
font-size: 24px;
line-height: 26px;
color: #f58e0e;
padding: 0 0 13px 0;
font-family: "robotomedium", sans-serif;
}
.prose .research-seo-content .seobtn {
display: block;
text-align: center;
}
.prose .research-seo-content .seobtn .orderbtn {
background: #f58e0e;
color: #fff;
border-radius: 3px;
font-size: 19px;
line-height: 23px;
padding: 12px 39px;
display: inline-block;
margin: 20px 0 0 0;
font-family: "robotomedium", sans-serif;
}
/*
* `.research-paper-sample` ("Hundreds of Research Paper Help Samples Free
* to Download") — a real `
- `, so needs the usual
* `.prose ul>li::before` checkmark override. Icons reuse `sprite1.png`
* (same asset as other already-ported New-layout icon grids), scoped
* locally per the established `.sprite`-collision reasoning elsewhere in
* this file.
*/
.prose .research-paper-sample {
padding: 50px 0;
background: #f5f5f5;
position: relative;
}
.prose .research-paper-sample::after {
content: "";
background: url(/images/researchsamples-right.svg) no-repeat;
width: 170px;
height: 143px;
position: absolute;
right: 0;
top: 124px;
}
.prose .research-paper-sample::before {
content: "";
background: url(/images/researchsamples-left.svg) no-repeat;
width: 170px;
height: 285px;
position: absolute;
left: 0;
bottom: 40px;
}
.prose .research-paper-sample .content-title {
text-align: center;
padding: 0 0 6px 0;
}
.prose .research-paper-sample .content-subtitle {
text-align: center;
}
.prose .research-paper-sample .samplelist {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 80%;
margin: 0 auto;
padding: 40px 0 0 0;
}
.prose .research-paper-sample .samplelist > li {
max-width: calc(50% - 25px);
background: #ffffff;
border-radius: 10px;
padding: 20px 18px 20px 100px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
color: #2a2a2a;
margin: 0 0 25px 0;
position: relative;
list-style: none;
padding-left: 100px;
}
.prose .research-paper-sample .samplelist > li::before {
content: "";
background: url(/images/sprite1.png) no-repeat;
background-size: 600px;
width: 75px;
height: 75px;
position: absolute;
left: 15px;
top: 15px;
}
.prose .research-paper-sample .samplelist .samplelist-inner.sample1::before {
background-position: -249px -1641px;
}
.prose .research-paper-sample .samplelist .samplelist-inner.sample2::before {
background-position: -335px -1641px;
}
.prose .research-paper-sample .samplelist .samplelist-inner.sample3::before {
background-position: -422px -1641px;
}
.prose .research-paper-sample .samplelist .samplelist-inner.sample4::before {
background-position: -509px -1641px;
}
.prose .research-paper-sample .samplelist .samplelist-inner label {
font-size: 18px;
line-height: 24px;
color: #1d1d1d;
font-family: "robotomedium", sans-serif;
padding: 0 0 10px 0;
display: block;
}
.prose .research-paper-sample .samplelist .samplelist-inner label::after {
content: "";
background: #f58e0e;
width: 100px;
height: 2px;
display: block;
margin: 2px 0 0 0;
}
.prose .research-paper-sample .samplelist .samplelist-inner .samplelist-content {
font-size: 15px;
line-height: 20px;
color: #2a2a2a;
}
.prose .research-paper-sample .samplelist .samplelist-inner .samplelist-btn {
font-size: 16px;
line-height: 20px;
color: #f58e0e;
font-family: "robotomedium", sans-serif;
margin: 15px 0 0 0;
display: inline-block;
border: 1px dashed #f58e0e;
border-radius: 3px;
padding: 6px 10px;
}
/*
* `.researchpaper-type` ("All Types of Research Papers Covered") had no
* CSS — the whole colorful wheel is a single real `
- `, so it was
* falling back to the generic `.prose ul>li::before` checkmark (single
* column, 19px icon, 30px padding) instead of its own real 2-column flex
* grid with a differently-sized/positioned icon from the same sprite sheet.
*/
.prose .how-we-work-researchpaper .content-title {
text-align: center;
padding: 0 0 8px 0;
}
.prose .how-we-work-researchpaper .content-subtitle {
text-align: center;
padding: 0 80px;
}
.prose .how-we-work-researchpaper .work-step {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin: 0 auto;
padding: 40px 0 0 0;
}
.prose .how-we-work-researchpaper .work-step > li {
max-width: calc(50% - 25px);
color: #2a2a2a;
margin: 0 0 25px 0;
padding: 0 0 0 35px;
position: relative;
list-style: none;
}
.prose .how-we-work-researchpaper .work-step > li::before {
content: "";
background: url(/images/sprite1.png) no-repeat;
background-size: 580px;
background-position: -458px -1078px;
width: 25px;
height: 25px;
position: absolute;
left: 0;
top: 0;
}
.prose .how-we-work-researchpaper .work-step > li:last-child,
.prose .how-we-work-researchpaper .work-step > li:nth-last-child(2) {
margin: 0;
}
.prose .how-we-work-researchpaper .work-step .work-step-inner label {
font-size: 20px;
line-height: 22px;
font-family: "robotomedium", sans-serif;
color: #1d1d1d;
padding: 0 0 7px 0;
display: block;
}
.prose .how-we-work-researchpaper .work-step .work-step-inner .work-step-content {
font-size: 15px;
line-height: 20px;
color: #2a2a2a;
}
.prose .how-we-work-researchpaper .stepbtn {
display: block;
text-align: center;
}
.prose .how-we-work-researchpaper .stepbtn .orderbtn {
background: #f58e0e;
border-radius: 3px;
color: #fff;
padding: 9px 20px;
font-size: 19px;
line-height: 22px;
font-family: "robotomedium", sans-serif;
display: inline-block;
margin: 50px 0 0 0;
}
/*
* Mobile-only overrides for the "New"-layout Services article body
* (`/thesis-help`-style pages). Everything above this point is the live
* template's own desktop CSS, unchanged. The template has no mobile
* breakpoints of its own for this body content, so several blocks use
* fixed pixel widths/`left` offsets sized for a ~1160px desktop column
* — most prominently the alternating-card timeline's 325px cards offset
* 180px from center, which alone pushes the page ~500px wide on a phone.
* This collapses just those offending (verified-present) selectors to a
* fluid, stacked layout below 768px; nothing here applies above that
* width, so desktop rendering is unchanged.
*/
@media (max-width: 767px) {
.prose .structure-timeline:before {
left: 20px;
transform: none;
}
.prose .structure-timeline .structure-item {
padding-left: 50px;
}
.prose .structure-timeline .structure-item:nth-child(2) {
padding-top: 0;
}
.prose .structure-timeline .structure-item .structure-img {
left: 20px;
margin-left: -18px;
}
.prose .structure-timeline .structure-item .structure-content,
.prose .structure-timeline .structure-item:nth-child(odd) .structure-content {
width: 100%;
max-width: 100%;
left: 0;
float: none;
box-sizing: border-box;
}
.prose .structure-timeline .structure-item .structure-content:after,
.prose .structure-timeline .structure-item:nth-child(odd) .structure-content:after {
display: none;
}
.prose .case-study-feature .featurebox > li {
width: 100%;
}
.prose .program-whychoose .whychoose_slider .services-inner {
max-width: 100%;
}
.prose .payment-process .step-mid::after,
.prose .payment-process .step-mid::before {
width: auto;
max-width: 100%;
}
.prose .essay-process .title {
max-width: 100%;
}
/* `.topiclist li` is a fixed 19%-wide icon-grid column (5 across) with no
narrower breakpoint in the source stylesheet — at a ~300px mobile
content width each column is only ~40px, too narrow for its own
uppercase label text to wrap into, so it overflows rather than
wrapping. Widening to 2 columns gives the same real labels enough
room to actually wrap. */
.prose .thesistopic .maintopicbox .topiclist li {
width: 48%;
}
/* Several icon blocks in this raw CMS body are inline `