/*-- PLEXR Plus page (plexr-plus.html) ---------------------------------------------
Loaded only by plexr-plus.html so nothing here can reach any other page.
Reuses the site's existing patterns (.image-text-section, .it-dark-section,
.grey-section, .grey-boxes, .btn-blue) and only adds what this layout needs. --*/
/*-- opening section: centred lede above the left-aligned body copy.
custom.css sets `.content p { text-align:center }` for .main-content, so the body
paragraphs are pulled back to the left and only the two lede lines stay centred. --*/
.plexr-intro .content p { text-align: left; }
.plexr-intro .plexr-lede { margin-bottom: 20px; font: 700 22px 'Barlow', sans-serif;
line-height: 1.4; text-align: left !important; }
/*-- a short blue rule marking the answer line under a question --*/
.plexr-bar { position: relative; padding-left: 18px; font-weight: 700; }
.plexr-bar:before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
background: #3c7cd9; }
.plexr-bar-dark:before { background: #4c9ae6; }
.plexr-intro .plexr-sub { margin-bottom: 30px; text-align: left !important; }
.plexr-caps { font-weight: 700; text-transform: uppercase; }
/*-- navy strip carrying the three "no ..." claims, with the label above them --*/
.plexr-strip { margin: 35px auto 0 auto; padding: 18px 30px 20px 30px; border-radius: 14px;
background: #00103e; text-align: center; }
/* the site styles .content p and .content ul, so these carry the extra weight --*/
.plexr-strip .plexr-strip-label { margin: 0 0 10px 0; color: #c6d4ea; font-size: 16px;
font-weight: 400; letter-spacing: 1px; text-align: center !important; text-transform: uppercase; }
.plexr-strip .plexr-strip-list { display: -ms-flexbox !important; display: flex !important;
-ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center;
-ms-flex-align: center; align-items: center; width: 100%; margin: 0; padding: 0;
list-style: none; }
.plexr-strip .plexr-strip-list li { display: block; position: relative; width: auto;
margin: 0 !important; padding: 0 30px !important; color: #fff; font-weight: 700;
font-size: 22px !important; letter-spacing: 1px; text-align: center !important;
text-transform: uppercase; }
.plexr-strip .plexr-strip-list li:before { display: none; }
.plexr-strip .plexr-strip-list li + li:before { content: "" !important; display: block !important;
position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; height: auto;
background: #41527c; border-radius: 0; }
/* the opening question now sits under the section heading. custom.css gives
.content h3 a 50px top margin, which leaves too much air directly beneath an H2. --*/
.plexr-intro .plexr-subhead { margin: 0 0 25px 0; font: 700 30px 'Libre Baskerville', serif;
line-height: 1.3; text-align: left; }
@media (max-width: 767.98px) {
.plexr-intro .plexr-subhead { font-size: 150%; }
}
/*-- reference / "learn more" lines. These carry no href yet: the studies, the FDA
record and the two sub-pages still need URLs, so they are styled as links but
rendered as text rather than shipping dead anchors. Swap each for an
once the URL is known. --*/
.plexr-ref,
.plexr-ref-dark { font-weight: 700; color: #1d79d5; }
.plexr-ref-caps { text-transform: uppercase; }
/*-- navy "dry eye is common" band. .it-dark-section carries no padding of its own,
and this one sits in a .container rather than full-bleed, so it needs both.
.image-text-section also carries margin-bottom:90px, but this band runs straight
into the grey card band below it, so that gap is removed. --*/
.plexr-stat-section { margin-bottom: 0; padding: 90px 0 70px 0; }
.plexr-bignum { margin: 0 0 25px 0; font: 400 104px 'Libre Baskerville', serif; line-height: 1; color: #fff; }
.plexr-bignum span { font-size: 60%; }
.plexr-highlight { margin-top: 30px; padding: 22px 26px; background: #101d5f; border: 2px solid #1d79d5; border-radius: 10px; }
.plexr-highlight p { margin: 0; }
/* the PSD sets the question itself in caps on its own line --*/
.plexr-highlight strong { display: block; margin-top: 4px; font-size: 93.75%; text-transform: uppercase; }
/*-- treatment cards: white rounded cards on a grey band, photo side alternating --*/
.plexr-cards { margin-bottom: 90px; padding: 90px 0; background: #dcdcdc; }
.plexr-cards-intro { margin-bottom: 60px; }
/* these wrappers are not .image-text-section, so the site's centred h2 rule applies
unless the heading and its rule are pulled left here --*/
.plexr-cards-intro h2 { text-align: left; }
.plexr-cards-intro h2:before { margin: 0; }
.plexr-cards-intro .it-image img { width: 100%; display: block; }
.plexr-card { margin-bottom: 30px; padding: 40px; background: #fff; border-radius: 20px; }
.plexr-card:last-child { margin-bottom: 0; }
/* Fede asked for the photo to read larger than the copy beside it, so the image
column keeps a 110%-of-width floor and then stretches to whatever the card is --*/
.plexr-card .row { -ms-flex-align: stretch; align-items: stretch; }
.plexr-card-img { position: relative; height: 100%; }
.plexr-card-img:before { content: ""; display: block; padding-top: 110%; }
.plexr-card-img picture { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }
.plexr-card-img img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 12px; }
/* the copy stays vertically centred against the taller photo --*/
.plexr-card-body { display: -ms-flexbox; display: flex; -ms-flex-direction: column;
flex-direction: column; -ms-flex-pack: center; justify-content: center; height: 100%; }
.plexr-card-body h3 { margin: 0 0 20px 0; padding: 0; font: 700 187.5% 'Libre Baskerville', serif; color: #000; }
.plexr-card-body h3:before { display: none; }
.plexr-card-body p { margin-bottom: 20px; }
.plexr-card-body p:last-child { margin-bottom: 0; }
/*-- PANIS band: the PSD fixes it at 560px tall, with the copy on the wide side and
the photo cropping to fill the narrow column beside it. --*/
.plexr-panis .it-image,
.plexr-panis .it-image picture { display: block; height: 620px; }
.plexr-panis .it-image img { width: 100%; height: 620px; object-fit: cover; }
/* padding-none strips the gutter here, so the copy needs its own right margin to
keep clear of the photo. custom.css sets this with
`.image-text-section .container-fluid .it-content`, so the selector has to carry
.container-fluid too or it loses on specificity and nothing happens. --*/
.plexr-panis .container-fluid .it-content { padding: 60px 130px 60px 0; }
/* keep the two copy columns starting on the same line --*/
.plexr-panis-cols { align-items: flex-start; }
.plexr-panis-cols p:first-child { margin-top: 0; }
.plexr-panis h2 { margin-bottom: 15px; }
.plexr-panis-cols { margin-top: 10px; }
.plexr-panis-cols p { font-size: 112.5%; line-height: 26px; }
/*-- safety band: centred heading over two columns of copy --*/
.plexr-safety { background: #dcdcdc; }
/* the PSD runs this heading across one line, which needs more room than the
site's 1140px container gives --*/
.plexr-safety .container { max-width: 1300px; }
.plexr-safety h2 { margin-bottom: 45px; text-align: center; }
/* three equal columns of copy, each under its own sub-heading --*/
.plexr-safety-cols h3 { margin: 0 0 14px 0; padding: 0; font: 700 118.75% 'Barlow', sans-serif; line-height: 1.35; color: #000; }
.plexr-safety-cols h3:before { display: none; }
.plexr-safety-cols p { margin: 0; font-size: 106.25%; line-height: 26px; }
/* the PubMed link sits centred under the three columns --*/
.plexr-safety-link { margin: 45px 0 0 0; text-align: center; }
/*-- clinical evidence: grey band, outlined stat box, then four navy cards.
Type sizes measured off the PSD: 84px digit height, 22px label ascender. --*/
.plexr-evidence { margin-bottom: 90px; padding: 90px 0 60px 0; background: #dcdcdc; }
.plexr-evidence .it-image img { width: 100%; display: block; }
.plexr-evidence h2 { margin-bottom: 4px; text-align: left; }
.plexr-evidence h2:before { margin: 0; }
.plexr-lede-left { margin-bottom: 20px; font-weight: 700; }
.plexr-statbox { margin-bottom: 25px; padding: 26px 30px; background: #fff; border: 2px solid #1d79d5; border-radius: 16px; }
.plexr-statbox-num { margin: 0 0 14px 0; font: 400 107px 'Libre Baskerville', serif; line-height: 1.05; color: #1d79d5; }
.plexr-statbox-label { margin: 0; font: 400 30px 'Libre Baskerville', serif; line-height: 1.2; color: #1d79d5; }
.plexr-evi-grid { margin-top: 50px; }
.plexr-evi-grid .col-md-6 { margin-bottom: 30px; }
.plexr-evi { height: 100%; padding: 35px; background: #000935; color: #fff; }
.plexr-evi h3 { margin: 0 0 20px 0; padding: 0; font: 700 175% 'Libre Baskerville', serif; color: #fff; }
.plexr-evi h3:before { display: none; }
.plexr-evi p { margin-bottom: 18px; }
.plexr-evi ul { margin: 0 0 18px 0; padding-left: 20px; }
/* These bullets sit beside plain paragraphs, and custom.css resizes p at two
breakpoints (125%/28px normally, 112.5%/22px between 992 and 1366). The list
shares the same 16px parent as those paragraphs, so mirroring the exact values
keeps the two the same size at every width. --*/
.plexr-evi ul li { margin-bottom: 10px; font-size: 125%; line-height: 28px; }
@media (min-width: 992px) and (max-width: 1366px) {
.plexr-evi ul li { font-size: 112.5%; line-height: 22px; }
}
.plexr-evi .plexr-ref-dark { margin-bottom: 0; }
/*-- FAQ cards: the PSD uses a 13px corner rather than the site default 5px --*/
.grey-box-2 .grey-boxe { border-radius: 13px; }
/*-- serif pull-quote used to close two of the sections --*/
/*-- closing message: blue rule, icon chip, then the line in serif navy --*/
.plexr-pullbox { position: relative; margin: 30px 0 0 0; padding-left: 24px; }
.plexr-pullbox:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: #3c7cd9; }
.plexr-pullbox-ico { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center;
align-items: center; -ms-flex-pack: center; justify-content: center; width: 34px; height: 34px;
margin-bottom: 14px; border-radius: 8px; background: #d7edfd; color: #2f6fd0; font-size: 15px; }
/* sized so the second sentence holds on one line, giving the two-line quote
the PSD shows --*/
.plexr-pull { margin: 0; font: 700 24px 'Libre Baskerville', serif; line-height: 1.4;
color: #000935; }
@media (min-width: 1200px) {
.plexr-pull { white-space: nowrap; }
}
/* the copy column narrows below 1200 and again on a phone, so the quote follows --*/
@media (min-width: 992px) and (max-width: 1199.98px) {
.plexr-pull { font-size: 20px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
.plexr-pull { font-size: 18px; }
}
@media (max-width: 767.98px) {
.plexr-pull { font-size: 17px !important; }
}
@media (max-width: 991.98px) {
.plexr-cards { padding: 60px 0; }
.plexr-card { padding: 30px; }
.plexr-statbox-num { font-size: 88px; }
}
@media (max-width: 767.98px) {
.plexr-stat-section { padding: 50px 0 30px 0; }
.plexr-bignum { font-size: 62px; }
.plexr-cards { margin-bottom: 50px; padding: 50px 0; }
.plexr-cards-intro { margin-bottom: 40px; }
.plexr-cards-intro .it-image { margin-top: 30px; }
.plexr-card { padding: 22px; }
.plexr-card-img { margin-bottom: 25px; }
/* the cards put the photo second in the DOM on alternating rows, so on a phone
the order-md-* classes stop applying and the photo would land under the copy -
this pulls it back above the text for every card --*/
.plexr-card .row { display: flex; flex-direction: column; }
.plexr-card .row > .col-md-6:has(.plexr-card-img) { order: 1; }
.plexr-card .row > .col-md-6:has(.plexr-card-body) { order: 2; }
/* the fixed 560px PANIS band only applies once the columns sit side by side --*/
.plexr-panis .it-image,
.plexr-panis .it-image picture,
.plexr-panis .it-image img { height: auto; }
.plexr-panis .container-fluid .it-content { padding: 40px 0; }
.plexr-statbox-num { font-size: 64px; }
.plexr-statbox-label { font-size: 22px; }
.plexr-evidence { margin-bottom: 50px; padding: 50px 0 20px 0; }
.plexr-evi { padding: 25px; }
.plexr-evi ul li { font-size: 112.5%; line-height: 28px; }
.plexr-evi-grid { margin-top: 30px; }
.plexr-pull { font-size: 137.5%; }
.plexr-intro .plexr-caps { text-align: center; }
}
/*-- PLEXR Plus ocular-surface page (plexr-plus-ocular-surface.html) ---------------
One stylesheet serves both PLEXR pages; everything below is used only by the
second one. --*/
/*-- full-bleed navy bands on page two: copy one side, photo the other --*/
.plexr2-band .container-fluid .it-content { padding: 70px 90px 70px 0; }
.plexr2-band .it-image,
.plexr2-band .it-image picture { display: block; height: 100%; }
.plexr2-band .it-image img { width: 100%; height: 100%; object-fit: cover; }
/* the PSD fixes the device band at 655px tall with the machine shown whole and
centred. plexr2-device.webp is composed to the panel proportions (680:655), so
cover fills it without cropping anything off the machine. --*/
@media (min-width: 992px) {
/* the height floor sits on the row, and the photo simply fills whatever the row
ends up being. A fixed height on the photo left a strip of navy under it when
the copy ran taller; a min-height on the photo let it grow with the viewport,
since these bands are full-bleed and the column is half the screen. --*/
.plexr2-band-device > .container-fluid > .row { min-height: 655px; }
.plexr2-band-device .it-image,
.plexr2-band-device .it-image picture,
.plexr2-band-device .it-image img { height: 100%; }
/* the PSD fixes this band at 557px. The copy column drives the height here, so its
vertical padding comes down to match. --*/
.plexr2-band-diagnosis .container-fluid .it-content { padding-top: 46px; padding-bottom: 46px; }
/* the floor goes on the band's own row only. Left unscoped it also caught the
two-column row inside the copy, which then stood 557px tall and pushed the
text to the top of the band with a block of empty navy beneath it. --*/
.plexr2-band-diagnosis > .container-fluid > .row { min-height: 557px; }
.plexr2-band-diagnosis .it-image,
.plexr2-band-diagnosis .it-image picture,
.plexr2-band-diagnosis .it-image img { height: 100%; }
}
.plexr2-cols { margin-top: 10px; }
/* plexr2-hero is 1500x1220. The site's coverfolds are 950x650, so on wide screens this
one stood 772px tall and dragged the whole hero 38px deeper than every other page.
Pinning the photo to the band lets the form set the height, as it does elsewhere. --*/
@media (min-width: 768px) {
.plexr-page .marketing-area .row > .col-md-6:first-child,
.plexr2-page .marketing-area .row > .col-md-6:first-child { position: relative; }
.plexr-page .coverfold-image,
.plexr2-page .coverfold-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.plexr-page .coverfold-image picture,
.plexr2-page .coverfold-image picture { width: 100%; height: 100%; }
.plexr-page .coverfold-image img,
.plexr2-page .coverfold-image img { width: 100%; height: 100%; object-fit: cover; }
/* page one's hero photo is square and crops from the centre by default,
which cuts the top of the frame; anchor it to the top instead --*/
.plexr-page:not(.plexr2-page) .coverfold-image img { object-position: top center; }
}
.plexr2-cols p { font-size: 112.5%; line-height: 26px; }
.plexr2-band .plexr-ref-dark { margin-bottom: 8px; }
.plexr2-band .plexr-ref-dark a { color: #1d79d5; font-weight: 700; }
/*-- grey bands --*/
.plexr2-grey { margin-bottom: 90px; padding: 90px 0 70px 0; background: #dcdcdc; }
/* this band runs straight into the navy one below it, so the 90px white strip goes --*/
.plexr2-grey-flush { margin-bottom: 0; }
/* the PSD sets these headings tight to the lede beneath them; the site default is
50px, which left about 38px too much --*/
.plexr2-grey h2 { margin-bottom: 12px; text-align: left; }
.plexr2-grey h2:before { margin: 0; }
.plexr2-row-gap { margin-top: 50px; }
/*-- photos inside the custom wrappers (these are not .image-text-section) --*/
.plexr2-img img { width: 100%; display: block; }
/*-- navy statement card: serif figures pulled out of the surrounding copy --*/
.plexr2-statcard { margin-bottom: 30px; padding: 26px 32px; background: #000935; border-radius: 14px; }
/*-- pinguecula: white card holding three fact bars, as the PSD draws it --*/
.plexr2-factcard { padding: 34px 36px; background: #fff; }
/* the punctal block shows the same bars straight on the grey, with no white card --*/
.plexr2-factlist { margin-bottom: 26px; }
/*-- artwork that needs a white mount rather than a bleed, as in the PSD --*/
.plexr2-imgcard { padding: 22px; background: #fff; }
/*-- the diagnosis copy is set in two columns and the fourth sentence carries over
from the first into the second, exactly as the PSD does --*/
.plexr2-split-a { margin-bottom: 0; }
.plexr2-split-b { margin-top: 0; }
.plexr2-cols .plexr2-band-btns { margin-top: 32px; }
/*-- Fede asked for the figure blocks to read larger than the copy beside them: the
copy column is inset top and bottom, and the block stretches the whole row --*/
@media (min-width: 768px) {
.plexr2-ping-top,
.plexr2-con-top { -ms-flex-align: stretch; align-items: stretch; }
.plexr2-ping-top > .col-md-6:first-child,
.plexr2-con-top > .col-md-6:first-child { padding-top: 32px; padding-bottom: 32px; }
/* the concretions photo fills the row, so it reads larger than the copy --*/
.plexr2-con-top > .col-md-6:last-child .plexr2-img,
.plexr2-con-top > .col-md-6:last-child .plexr2-img picture { display: block; height: 100%; }
.plexr2-con-top > .col-md-6:last-child .plexr2-img img { height: 100%; object-fit: cover; }
.plexr2-factcard { display: -ms-flexbox; display: flex; -ms-flex-direction: column;
flex-direction: column; -ms-flex-pack: center; justify-content: center; height: 100%; }
.plexr2-panel-imgleft .row { -ms-flex-align: stretch; align-items: stretch; }
.plexr2-panel-imgleft .col-md-6.order-md-2 { padding-top: 30px; padding-bottom: 30px; }
/* the artwork keeps its own cream ground, so the block carries the same colour
behind the letterboxing --*/
.plexr2-panel-imgleft .plexr2-img { height: 100%; border-radius: 14px; background: #fdfeeb; }
.plexr2-panel-imgleft .plexr2-img picture { display: block; height: 100%; }
.plexr2-panel-imgleft .plexr2-img img { height: 100%; object-fit: contain; }
}
/*-- the diagnosis band closes on two buttons: filled blue, then outlined white --*/
.plexr2-band-btns { margin-top: 32px; }
.plexr2-band-btns a { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center;
align-items: center; -ms-flex-pack: center; justify-content: center; min-height: 54px;
margin-bottom: 14px; padding: 14px 26px; border-radius: 30px; font-weight: 700;
font-size: 87.5%; letter-spacing: 1px; line-height: 1.25; text-transform: uppercase;
text-decoration: none; }
.plexr2-btn-fill { background: #3974cb; color: #fff; }
.plexr2-btn-fill:hover, .plexr2-btn-fill:focus { background: #1d79d5; color: #fff; }
.plexr2-btn-ghost { border: 1px solid #fff; color: #fff; }
.plexr2-btn-ghost:hover, .plexr2-btn-ghost:focus { background: #fff; color: #000935; }
.plexr2-imgcard img { width: 100%; display: block; }
/*-- filamentary keratitis: the answer line sits in a pale panel in the PSD --*/
.plexr2-lede-box { padding: 20px 26px; border-radius: 10px; background: #eaf4ff; }
/*-- three stacked-value tiles, side by side --*/
.plexr2-stats3 { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -7px 26px -7px; }
.plexr2-stat3 { -ms-flex: 1 1 0; flex: 1 1 0; margin: 0 7px; padding: 22px 20px 26px 20px;
border-radius: 6px; background: #eaf4ff; }
.plexr2-stat3 .plexr2-fact-ico { -ms-flex: 0 0 44px; flex: 0 0 44px; width: 44px; height: 44px;
margin: 0 0 18px 0; }
.plexr2-stat3 strong { display: block; margin-bottom: 14px;
font: 700 137.5% 'Libre Baskerville', serif; color: #101010; }
/* only the caption under the figure, never the icon span above it --*/
.plexr2-stat3 strong ~ span { display: block; font-size: 18px; line-height: 26px; color: #101010; }
.plexr2-fact { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center;
margin-bottom: 14px; padding: 16px 22px; border-radius: 4px; background: #ecf4ff;
font: 700 137.5% 'Libre Baskerville', serif; color: #101010; }
.plexr2-fact:last-child { margin-bottom: 0; }
.plexr2-fact-ico { display: -ms-inline-flexbox; display: inline-flex; -ms-flex: 0 0 46px;
flex: 0 0 46px; -ms-flex-align: center; align-items: center; -ms-flex-pack: center;
justify-content: center; width: 46px; height: 46px; margin-right: 20px; border-radius: 50%;
border: 1px solid #dfecfa; background: #fff; color: #0b7eff; font-size: 19px; }
/*-- the lower half of the pinguecula block: photo left, copy and study pill right --*/
.plexr2-ping-lower { margin-top: 40px; }
.plexr2-ping-lower .plexr2-img { margin-bottom: 0; }
.plexr2-pill { margin-top: 26px; }
.plexr2-pill a { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center;
align-items: center; padding: 13px 28px; border: 1px solid #0b7eff; border-radius: 30px;
background: #ecf5fe; color: #0b7eff; font-weight: 700; line-height: 1.35; text-decoration: none; }
.plexr2-pill a:after { content: "\2192"; margin-left: 14px; }
.plexr2-pill a:hover, .plexr2-pill a:focus { background: #0b7eff; color: #fff; }
/*-- the comparison panel puts its picture on the left instead of the right --*/
.plexr2-panel-imgleft .plexr2-img img { border-radius: 14px; }
.plexr2-statcard p { margin: 0; color: #fff; font: 400 175% 'Libre Baskerville', serif; line-height: 1.45; }
/* where a stat card sits above a photo, the photo absorbs the height left over so the
column finishes level with the copy beside it instead of stopping short --*/
@media (min-width: 768px) {
.plexr2-grey .row,
.image-text-section .row:has(.plexr2-fill) { align-items: stretch; }
.plexr2-fill { display: flex; flex-direction: column; }
.plexr2-fill .plexr2-img { flex: 1 1 auto; min-height: 0; }
.plexr2-fill .plexr2-img picture { display: block; height: 100%; }
.plexr2-fill .plexr2-img img { height: 100%; object-fit: cover; }
}
/*-- wide navy figure bar sitting under a row, with arrow separators --*/
.plexr2-statbar { margin-top: 30px; padding: 40px 45px 32px 45px; background: #000935; border-radius: 14px; }
.plexr2-statbar p { margin: 0; color: #fff; font: 400 162.5% 'Libre Baskerville', serif; line-height: 1.35; }
/*-- the cyst figures read as three steps joined by arrows, as in the PSD --*/
.plexr2-steps { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
-ms-flex-align: start; align-items: flex-start; }
.plexr2-step { -ms-flex: 1 1 0; flex: 1 1 0; }
.plexr2-step .plexr2-fact-ico { -ms-flex: 0 0 52px; flex: 0 0 52px; width: 52px; height: 52px;
margin: 0 0 18px 0; border: 0; background: #fff; color: #0b7eff; font-size: 22px; }
.plexr2-step strong { display: block; margin-bottom: 8px; font: 400 175% 'Libre Baskerville', serif;
line-height: 1.2; color: #fff; }
.plexr2-step-txt { display: block; margin: 0; color: #fff; font-size: 100%; line-height: 24px; }
.plexr2-step-arrow { -ms-flex: 0 0 90px; flex: 0 0 90px; margin-top: 14px; color: #1d79d5;
font-size: 26px; text-align: center; }
/* the concretions card carries the same three figures without the arrows --*/
.plexr2-statbar-plain .plexr2-step { padding-right: 30px; }
/* the footnote sits centred under a short rule --*/
.plexr2-statbar-note { position: relative; margin: 30px 0 0 0 !important; padding-top: 20px;
font: italic 400 100% 'Barlow', sans-serif !important; text-align: center; color: #fff; }
.plexr2-statbar-note:before { content: ""; position: absolute; left: 50%; top: 0; width: 55px;
height: 2px; margin-left: -27px; background: #fff; }
@media (max-width: 991.98px) {
.plexr2-statbar p { font-size: 137.5%; }
.plexr2-statbar { padding: 32px 26px 26px 26px; }
.plexr2-step-arrow { -ms-flex: 0 0 40px; flex: 0 0 40px; }
}
@media (max-width: 767.98px) {
.plexr2-step { -ms-flex: 0 0 100%; flex: 0 0 100%; margin-bottom: 26px; }
.plexr2-step-arrow { -ms-flex: 0 0 100%; flex: 0 0 100%; margin: 0 0 18px 0; text-align: left; }
.plexr2-statbar-note { font-size: 93.75% !important; }
}
@media (max-width: 767.98px) {
.plexr2-statbar { margin-top: 18px; padding: 20px 22px; }
.plexr2-statbar p { font-size: 118.75%; }
.plexr2-statbar span { margin: 0 6px; }
}
/*-- white rounded panel used for the two side questions --*/
.plexr2-panel { margin-top: 60px; padding: 50px 55px; background: #fff; border-radius: 20px; }
.plexr2-panel h3 { margin: 0 0 25px 0; padding: 0; font: 700 187.5% 'Libre Baskerville', serif; color: #000; }
/* the PSD keeps the short rule above this heading --*/
.plexr2-panel h3 { position: relative; padding-top: 30px; }
.plexr2-panel h3:before { content: ""; display: block; position: absolute; left: 0; right: auto;
top: 0; margin: 0; width: 55px; height: 2px; background: #000; }
.plexr2-panel p:last-child { margin-bottom: 0; }
/*-- a question whose heading runs the full width, with the answer split into two
columns beneath it --*/
.plexr2-wide-head { margin-bottom: 30px; }
/*-- panel carrying a photo in its right-hand half. The column rule above makes that
column a flex box, so the photo needs to be told to take the space left over --*/
.plexr2-panel-img .plexr2-img img { border-radius: 14px; }
@media (min-width: 768px) {
.plexr2-panel-img .row { align-items: stretch; }
.plexr2-panel-img .plexr2-img { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
.plexr2-panel-img .plexr2-img picture { display: block; height: 100%; }
.plexr2-panel-img .plexr2-img img { height: 100%; object-fit: cover; }
}
@media (max-width: 767.98px) {
.plexr2-panel-img .plexr2-img { margin-top: 25px; margin-bottom: 0; }
}
/*-- research card: navy, rounded, with an outlined figure strip --*/
.plexr2-research { margin-bottom: 90px; }
.plexr2-navycard { padding: 45px 50px; background: #000935; border-radius: 20px; }
.plexr2-navycard h3 { margin: 0 0 20px 0; padding: 0; font: 700 187.5% 'Libre Baskerville', serif; color: #fff; }
/* the PSD keeps the short rule above this heading, in white --*/
.plexr2-navycard h3 { position: relative; padding-top: 30px; }
.plexr2-navycard h3:before { content: ""; display: block; position: absolute; left: 0; right: auto;
top: 0; margin: 0; width: 55px; height: 2px; background: #fff; }
.plexr2-navycard p { color: #fff; }
.plexr2-inline-stat { margin: 25px 0; padding: 20px 24px; border: 2px solid #1d79d5; border-radius: 12px; }
.plexr2-inline-stat p { margin: 0; font: 400 150% 'Libre Baskerville', serif; color: #fff; }
/* the PSD sets the study link inside the stat box as a pale pill, not plain text --*/
.plexr2-inline-stat .plexr-ref-dark { margin: 16px 0 0 0; }
.plexr2-inline-stat .plexr-ref-dark a { display: -ms-inline-flexbox; display: inline-flex;
-ms-flex-align: center; align-items: center; padding: 12px 26px; border-radius: 30px;
background: #ecf4fe; color: #367cf7; font: 700 18px 'Barlow', sans-serif;
line-height: 1.3; text-decoration: none; }
.plexr2-inline-stat .plexr-ref-dark a:after { content: "\2192"; margin-left: 14px; }
.plexr2-inline-stat .plexr-ref-dark a:hover,
.plexr2-inline-stat .plexr-ref-dark a:focus { background: #fff; color: #1d79d5; }
.plexr2-inline-stat span { color: #1d79d5; }
/* the photo fills the card beside the copy rather than sitting at its own height --*/
.plexr2-card-img img { width: 100%; display: block; border-radius: 10px; }
@media (min-width: 768px) {
.plexr2-navycard .row { align-items: stretch; }
.plexr2-card-img,
.plexr2-card-img picture { display: block; height: 100%; }
.plexr2-card-img img { height: 100%; object-fit: cover; }
}
@media (max-width: 991.98px) {
.plexr2-panel { padding: 35px; }
.plexr2-navycard { padding: 35px; }
.plexr2-statcard p { font-size: 150%; }
}
@media (max-width: 767.98px) {
.plexr2-band .container-fluid .it-content { padding: 45px 0; }
.plexr2-band .it-image,
.plexr2-band .it-image picture,
.plexr2-band .it-image img { height: auto; }
.plexr2-grey { margin-bottom: 50px; padding: 50px 0 30px 0; }
.plexr2-grey-flush { margin-bottom: 0; }
.plexr2-grey h2 { text-align: center; }
.plexr2-grey h2:before { margin: 0 auto; }
.plexr2-row-gap { margin-top: 30px; }
.plexr2-img { margin-bottom: 30px; }
.plexr2-panel { margin-top: 40px; padding: 25px; }
.plexr2-navycard { padding: 25px; }
.plexr2-statcard { padding: 20px 22px; }
.plexr2-statcard p { font-size: 137.5%; }
.plexr2-inline-stat p { font-size: 118.75%; }
.plexr2-research { margin-bottom: 50px; }
}
/* the FDA mark is artwork rather than a photograph. custom.css cover-crops section
images to the height of the text beside them, which would slice the logo, so this
one keeps its own square proportions. --*/
.plexr-page .image-text-section .container .it-image img[src*="plexr-fda-cleared"] {
height: auto; object-fit: contain; background: #dcdcdc; }
/*-- medically-reviewed credit; the PSD puts it directly under the section title --*/
/* no size set here on purpose - custom.css resizes p at two breakpoints, so leaving
it to inherit keeps this line the same as the copy around it at every width --*/
/* page one sets it as a centred italic caption; page three keeps it left (below) --*/
.plexr-intro .medically-reviewed { max-width: 760px; margin: -10px auto 34px auto;
font-style: italic; font-weight: 400; font-size: 16px; color: #6a6a6a;
text-align: center !important; }
/*-- the eyelid page sets its opening copy centred, as the PSD does; the review
credit stays left and everything goes left again on a phone --*/
.plexr3-page .plexr-intro .content > p { text-align: center; }
.plexr3-page .plexr-intro .content > p.medically-reviewed { text-align: left; }
/* the credit, the question and the copy sat too far apart on this page --*/
.plexr3-page .plexr-intro .medically-reviewed { margin-bottom: 22px; }
.plexr3-page .plexr-intro .plexr-lede { margin-top: 0; margin-bottom: 14px; }
@media (max-width: 767.98px) {
.plexr3-page .plexr-intro .content > p { text-align: left !important; }
}
/*-- content sections on the ocular-surface page run wider than the site default 1140px.
The shared furniture (header, Finance, Our Location, footer) is deliberately left
alone so it stays in line with the rest of the site. --*/
@media (min-width: 1200px) {
.plexr2-page .main-content .container,
.plexr2-page .image-text-section .container,
.plexr2-grey .container,
.plexr2-research .container { max-width: 1300px; }
}
/* the PSD puts 50px between the two halves of these rows; Bootstrap ships 30px --*/
@media (min-width: 768px) {
.plexr2-page .image-text-section .container .row,
.plexr2-grey .container > .row { margin-left: -25px; margin-right: -25px; }
.plexr2-page .image-text-section .container .row > [class*="col-"],
.plexr2-grey .container > .row > [class*="col-"] { padding-left: 25px; padding-right: 25px; }
}
/*-- outlined button. The identical class exists in media.css, which this page does not
load, so the rule is repeated here rather than left unstyled. --*/
.plexr2-page .btn-read { display: inline-block; padding: 12px 30px; border: 2px solid #000935;
border-radius: 30px; background: transparent; color: #000935; font-weight: 700;
font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
-webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
.plexr2-page .btn-read:hover { background: #000935; color: #fff; text-decoration: none; }
.plexr2-page .plexr2-grey .btn-area { margin-top: 30px; text-align: left; }
/* .global-table carries height:100%. Once the row stretches, that makes the text block
fill the whole column and pushes the photo past the bottom of it, over the panel
below. Columns holding both a text block and a photo stack them instead. --*/
@media (min-width: 768px) {
.plexr2-grey .row > [class*="col-"]:has(.plexr2-img) { display: flex; flex-direction: column; }
.plexr2-grey .row > [class*="col-"]:has(.plexr2-img) .it-content { height: auto; }
}
/*-- PLEXR pages, phone corrections (scoped by the body class so nothing else moves) --*/
@media (max-width: 767.98px) {
/* the opening lede lines read left-aligned, like every other page --*/
.plexr-page .plexr-intro .plexr-lede,
.plexr-page .plexr-intro .plexr-sub { text-align: left !important; }
/* a heading row and its continuation row are one banner once stacked, so the
90px section gap between them closes up --*/
.plexr-page .image-text-section.plexr-pair-a { margin-bottom: 0; }
/* the site's 50px heading gap is larger than everything around it here --*/
.plexr-page .plexr-cards-intro h2 { margin-bottom: 22px; }
/* the intro photo just repeats the cards below it - dropped on a phone --*/
.plexr-page .plexr-cards-intro .it-image { display: none; }
/* long single words (Conjunctivochalasis) overran the card at 30px --*/
.plexr-page .plexr-card-body h3 { font-size: 24px; }
}
/*==========================================================================
PAGE THREE: eyelid, lid-margin and periocular conditions.
The page also carries .plexr2-page, so the wide containers, 50px row
gutters, pinned hero photo, grey bands and white panels above are
shared; only what is new to this page lives here.
========================================================================*/
/*-- the opening question now runs as a full-bleed navy band with the device photo
beside it, and the xanthelasma answer as a grey band with its own photo --*/
/* the grey answer band sits straight under it, with no white strip between --*/
.plexr3-band-intro { margin-bottom: 0; }
@media (min-width: 992px) {
.plexr3-band-intro > .container-fluid > .row { min-height: 655px; }
.plexr3-band-intro .it-image,
.plexr3-band-intro .it-image picture,
.plexr3-band-intro .it-image img { height: 100%; }
}
@media (min-width: 768px) {
/* the photo takes the whole row so it reads larger than the copy beside it --*/
.plexr3-xanth .row { -ms-flex-align: stretch; align-items: stretch; }
.plexr3-xanth .row > .col-md-6:first-child { padding-top: 26px; padding-bottom: 26px; }
.plexr3-xanth .plexr2-img,
.plexr3-xanth .plexr2-img picture { display: block; height: 100%; margin-bottom: 0; }
.plexr3-xanth .plexr2-img img { height: 100%; object-fit: cover; }
}
/*-- the two navy question cards that open the page, side by side on grey --*/
.plexr3-qcard { height: 100%; padding: 45px 50px 50px 50px; background: #000935; }
.plexr3-qcard h2 { margin-bottom: 18px; color: #fff; text-align: left;
font-size: 225%; line-height: 1.25; }
.plexr3-qcard h2:before { margin: 0; background: #eeeff2; }
.plexr3-qcard p { color: #fff; }
.plexr3-qcard p:last-child { margin-bottom: 0; }
.plexr3-qcard .plexr-ref-dark a { color: #1d79d5; font-weight: 700; }
/*-- the xanthelasma study figures: four pale tiles on a white card, as in the PSD --*/
.plexr3-figcard { margin-top: 45px; padding: 30px; background: #fff; border-radius: 14px; }
.plexr3-figs { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -6px; }
.plexr3-fig { -ms-flex: 1 1 0; flex: 1 1 0; margin: 0 6px; padding: 26px 24px 30px 24px;
background: #ecf5fe; }
.plexr3-fig-ico { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center;
align-items: center; -ms-flex-pack: center; justify-content: center; width: 46px; height: 46px;
margin-bottom: 26px; border: 1px solid #dfeaf9; border-radius: 50%; background: #fff;
color: #5488f4; font-size: 19px; }
.plexr3-fig p { margin: 0; font-size: 18px; line-height: 26px; color: #101010; }
.plexr3-fig strong { font: 700 137.5% 'Libre Baskerville', serif; color: #101010; }
.plexr3-fig p span { display: block; margin-top: 2px; }
/* the same tiles without the white mount, sitting straight on the page --*/
.plexr3-figs-plain { margin-top: 55px; }
.plexr3-figs-plain .plexr3-fig { padding: 26px 24px 30px 24px; }
/* a figure that runs on its own line keeps the caption under it --*/
.plexr3-figs-plain .plexr3-fig strong { display: block; margin-bottom: 4px; }
/*-- the blepharoplasty evidence card: two figures on a pale panel, with the
caption under a hairline, as the PSD draws it --*/
/* the photo runs the full height of the evidence row, so the two columns end
level and the picture reads larger than the copy --*/
@media (min-width: 768px) {
.plexr3-evrow,
.plexr3-paprow { -ms-flex-align: stretch; align-items: stretch; }
/* the papilloma copy is inset so the photo beside it reads larger --*/
.plexr3-paprow > .col-md-6:first-child { padding-top: 26px; padding-bottom: 26px; }
.plexr3-evrow .plexr2-img,
.plexr3-evrow .plexr2-img picture,
.plexr3-paprow .plexr2-img,
.plexr3-paprow .plexr2-img picture { display: block; height: 100%; margin-bottom: 0; }
.plexr3-evrow .plexr2-img img,
.plexr3-paprow .plexr2-img img { height: 100%; object-fit: cover; }
}
/*-- the surgical-comparison section: grey ground, photo beside the question, two
white lists under it and a pale banner closing the section --*/
.plexr3-compare { margin-bottom: 90px; padding: 90px 0 80px 0; background: #ededed; }
.plexr3-compare h2 { margin-bottom: 18px; text-align: left; }
.plexr3-compare h2:before { margin: 0; }
.plexr3-compare-cards { margin-top: 55px; }
.plexr3-ccard { height: 100%; padding: 34px 36px 30px 36px; background: #fff; }
.plexr3-ccard h3 { margin: 0 0 24px 0; padding: 0; font-size: 118.75%; font-weight: 700; color: #101010; }
.plexr3-ccard h3:before { display: none; }
.plexr3-clist { margin: 0; padding: 0; list-style: none; }
.plexr3-clist li { position: relative; margin-bottom: 18px; padding-left: 26px; font-size: 18px;
line-height: 26px; color: #101010; }
.plexr3-clist li:last-child { margin-bottom: 0; }
.plexr3-clist li:before { content: ""; position: absolute; left: 0; top: 10px; width: 8px;
height: 8px; border-radius: 50%; background: #447fd2; }
/* the surgery list runs in two columns in the PSD --*/
.plexr3-aim { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center;
margin-top: 30px; padding: 26px 34px; border: 1px solid #cfe0f8; border-radius: 14px;
background: #edf3fe; }
.plexr3-aim-ico { display: -ms-inline-flexbox; display: inline-flex; -ms-flex: 0 0 56px;
flex: 0 0 56px; -ms-flex-align: center; align-items: center; -ms-flex-pack: center;
justify-content: center; width: 56px; height: 56px; margin-right: 26px; border-radius: 50%;
background: #dbe7fb; color: #2f6fd0; font-size: 21px; }
.plexr3-aim-text p { margin: 0; font-size: 18px; line-height: 26px; color: #101010; }
.plexr3-aim-text p strong { font-size: 111%; }
@media (min-width: 768px) {
.plexr3-compare > .container > .row:first-child { -ms-flex-align: stretch; align-items: stretch; }
.plexr3-compare .plexr2-img,
.plexr3-compare .plexr2-img picture { display: block; height: 100%; margin-bottom: 0; }
.plexr3-compare .plexr2-img img { height: 100%; object-fit: cover; }
.plexr3-clist-two { -webkit-columns: 2; -moz-columns: 2; columns: 2;
-webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; }
.plexr3-clist-two li { -webkit-column-break-inside: avoid; break-inside: avoid; }
}
@media (max-width: 991.98px) {
.plexr3-compare { padding: 60px 0 50px 0; }
.plexr3-compare-cards > [class*="col-"] { margin-bottom: 20px; }
.plexr3-compare-cards > [class*="col-"]:last-child { margin-bottom: 0; }
}
@media (max-width: 767.98px) {
.plexr3-compare { margin-bottom: 50px; }
.plexr3-compare .plexr2-img { margin-top: 25px; }
.plexr3-ccard { padding: 24px 22px; }
.plexr3-aim { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 22px 20px; }
.plexr3-aim-ico { margin-bottom: 16px; }
}
.plexr3-evcard { margin-top: 30px; padding: 30px 30px 24px 30px; border-radius: 14px; background: #ecf5fe; }
.plexr3-evcard .plexr3-figs { margin: 0 -14px; }
.plexr3-evcard .plexr3-fig { margin: 0 14px; padding: 0; background: none; }
.plexr3-evcard .plexr3-fig-ico { border-color: #d5e3f6; margin-bottom: 22px; }
.plexr3-evcard .plexr3-fig strong { display: block; margin-bottom: 4px; }
.plexr3-evcard-note { margin: 22px 0 0 0; padding-top: 18px; border-top: 1px solid #d5e3f6;
font-style: italic; text-align: center; color: #101010; }
@media (max-width: 575.98px) {
.plexr3-evcard { padding: 22px 20px 18px 20px; }
.plexr3-evcard .plexr3-fig { -ms-flex: 0 0 100%; flex: 0 0 100%; margin-bottom: 18px; }
}
/* custom.css centres copy on a phone, which pulled these icons to the middle
while the text under them stayed left --*/
@media (max-width: 767.98px) {
.plexr3-figs,
.plexr3-fig,
.plexr3-evcard-note { text-align: left !important; }
}
/* on a phone the device photo reads better after the copy it belongs to --*/
/* the photo repeats inside the copy for phones only --*/
.plexr3-device-inline { display: none; }
@media (max-width: 767.98px) {
.plexr3-devrow > .col-md-6:first-child { display: none; }
.plexr3-device-inline { display: block; margin: 25px 0; }
}
@media (max-width: 991.98px) {
.plexr3-fig { -ms-flex: 0 0 calc(50% - 12px); flex: 0 0 calc(50% - 12px); margin-bottom: 12px; }
}
@media (max-width: 575.98px) {
.plexr3-figcard { padding: 20px; }
.plexr3-fig { -ms-flex: 0 0 100%; flex: 0 0 100%; margin-bottom: 12px; }
}
/*-- the figures under those cards: one serif line with arrow separators --*/
.plexr3-statline { margin: 45px 0 0 0; text-align: center; color: #000935;
font: 400 162.5% 'Libre Baskerville', serif; line-height: 1.35; }
.plexr3-statline span { margin: 0 14px; color: #1d79d5; }
/*-- navy figure boxes sitting above a photo or under a block of copy --*/
.plexr3-statcard p { font-size: 162.5%; line-height: 1.4; }
.plexr3-pair .it-content .plexr3-statcard { margin: 35px 0 0 0; }
/*-- the serif statement paragraph that stands in for a heading. The PSD sets it
in the navy, not black --*/
.plexr3-big { font: 700 187.5% 'Libre Baskerville', serif; line-height: 1.35; color: #000935; }
/* the photo beside the statement runs the full height of the row, so it reads
larger than the copy next to it --*/
@media (min-width: 768px) {
.plexr3-statement .row { -ms-flex-align: stretch; align-items: stretch; }
.plexr3-statement .row > .col-md-6:first-child { padding-top: 26px; padding-bottom: 26px; }
.plexr3-statement .plexr2-img,
.plexr3-statement .plexr2-img picture { display: block; height: 100%; margin-bottom: 0; }
.plexr3-statement .plexr2-img img { height: 100%; object-fit: cover; }
}
/* the PSD sets the same short rule above it that the headings carry: 53px wide,
roughly 30px clear of the first line --*/
.plexr3-big { position: relative; padding-top: 30px; }
.plexr3-big:before { content: ""; position: absolute; left: 0; top: 0;
width: 55px; height: 2px; background: #000; }
/*-- blue-dot lists inside the navy bands.
The list in the comparison band sits outside .it-content, so it never picked
up the site's list sizing and rendered at the 16px base while the paragraphs
beside it ran at 20px. These mirror the page-one evidence lists, including
the 992-1366px band where the site drops body copy to 18px. --*/
.plexr3-list { margin: 0 0 20px 0; padding: 0; list-style: none; }
.plexr3-list li { position: relative; margin-bottom: 12px; padding-left: 30px;
font-size: 125%; line-height: 28px; }
@media (min-width: 992px) and (max-width: 1366px) {
.plexr3-list li { font-size: 112.5%; line-height: 22px; }
}
@media (max-width: 767.98px) {
.plexr3-list li { font-size: 112.5%; line-height: 28px; }
}
.plexr3-list li:before { content: ""; position: absolute; left: 0; top: 11px;
width: 9px; height: 9px; border-radius: 50%; background: #1d79d5; }
/*-- second row inside a white section, under the first pair --*/
.plexr3-row-gap { margin-top: 60px; }
/*-- the grey band holding the five condition panels: they stack, so the
panel's own top margin gives way to even spacing between them --*/
.plexr3-panels { padding-bottom: 90px; }
.plexr3-panels .plexr2-panel { margin-top: 0; margin-bottom: 40px; }
.plexr3-panels .plexr2-panel:last-child { margin-bottom: 0; }
/*-- navy band with no photo: two columns of copy --*/
.plexr3-navyband { margin-bottom: 90px; padding: 90px 0 70px 0; background: #000935; }
.plexr3-navyband h2 { margin-bottom: 20px; color: #fff; text-align: left; }
.plexr3-navyband h2:before { margin: 0; background: #eeeff2; }
.plexr3-navyband p,
.plexr3-navyband li { color: #fff; }
/* the PSD fixes the two photo bands at these heights; as on page two the
floor sits on the band's own row and the photo fills whatever it gets --*/
@media (min-width: 992px) {
/* both navy bands split the screen in half, so the copy carries its own left
inset now that the Bootstrap offset column is gone --*/
.plexr3-band-cysts .container-fluid .it-content,
.plexr3-band-assessment .container-fluid .it-content { padding-left: 90px; }
.plexr3-band-cysts > .container-fluid > .row { min-height: 620px; }
.plexr3-band-assessment > .container-fluid > .row { min-height: 610px; }
.plexr3-band-cysts .it-image,
.plexr3-band-cysts .it-image picture,
.plexr3-band-cysts .it-image img,
.plexr3-band-assessment .it-image,
.plexr3-band-assessment .it-image picture,
.plexr3-band-assessment .it-image img { height: 100%; }
}
/*-- PLEXR page three, phone corrections --*/
@media (max-width: 767.98px) {
/* the card is height:100% on desktop, so a bottom margin on the card itself
falls outside the column and leaves the two navy cards touching. The gap
goes on the column instead. --*/
.plexr3-qcard { height: auto; padding: 28px 25px 30px 25px; }
.plexr3-qcard h2 { font-size: 175%; text-align: left; }
.plexr3-qgrey .row > [class*="col-"] { margin-bottom: 25px; }
.plexr3-qgrey .row > [class*="col-"]:last-child { margin-bottom: 0; }
.plexr3-statline { margin-top: 30px; font-size: 125%; }
.plexr3-statline span { margin: 0 6px; }
.plexr3-statcard p { font-size: 131.25%; }
.plexr3-big { font-size: 150%; }
.plexr3-row-gap { margin-top: 35px; }
.plexr3-panels { padding-bottom: 50px; }
.plexr3-panels .plexr2-panel { margin-bottom: 25px; }
.plexr3-navyband { margin-bottom: 50px; padding: 50px 0 30px 0; }
.plexr3-navyband h2 { text-align: left; }
.plexr3-navyband h2:before { margin: 0; }
.plexr3-page .plexr3-pair .btn-area { text-align: left; }
/* stacked on a phone the photo lands directly under the copy it sits beside
on desktop, with nothing between the last line (or the button) and the
image. Only the photo that follows the copy needs the gap; where the
image column comes first the row's own top margin already spaces it. --*/
.plexr3-pair .row > [class*="col-"]:not(:first-child) .plexr2-img { margin-top: 30px; }
}
/*-------------------------------------------------------------------------
Reference links on page one only (.plexr-page carries no .plexr2-page),
drawn as outlined pills with a trailing arrow, as in the PSD. Pages two
and three keep the plain blue text until asked otherwise.
-------------------------------------------------------------------------*/
/* the white-section links run on a single line, but only from 1200px up:
below that the half-width column is narrower than the pill and the page
would scroll sideways. The navy-card links always wrap, they are longer. --*/
/* below 1280 the longest pill (the GMV link) pushes past the viewport when kept
on one line, so single-line pills only start there --*/
@media (min-width: 1280px) {
.plexr-page:not(.plexr2-page) .plexr-ref a { white-space: nowrap; }
/* the two card links are far longer than the card is wide, so they keep the pill
but are allowed to wrap rather than run past the card edge --*/
.plexr-page:not(.plexr2-page) .plexr-ref-card a { white-space: normal; }
}
.plexr-page:not(.plexr2-page) .plexr-ref a,
.plexr-page:not(.plexr2-page) .plexr-ref-dark a {
display: inline-block; margin-top: 4px; padding: 13px 28px;
border: 1px solid #0b7eff; border-radius: 30px; background: #eaf4ff;
color: #0b7eff; font-weight: 700; line-height: 1.35; text-decoration: none;
-webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
.plexr-page:not(.plexr2-page) .plexr-ref a:after,
.plexr-page:not(.plexr2-page) .plexr-ref-dark a:after { content: "\2192"; margin-left: 12px; }
.plexr-page:not(.plexr2-page) .plexr-ref a:hover {
background: #0b7eff; color: #fff; text-decoration: none; }
/* on the navy bands the pill sits on a dark ground, so it runs outlined --*/
.plexr-page:not(.plexr2-page) .plexr-ref-dark a {
border-color: #4c9ae6; background: transparent; color: #8cc8ff; }
.plexr-page:not(.plexr2-page) .plexr-ref-dark a:hover {
border-color: #fff; background: #fff; color: #000935; text-decoration: none; }
@media (max-width: 767.98px) {
.plexr-page:not(.plexr2-page) .plexr-ref a,
.plexr-page:not(.plexr2-page) .plexr-ref-dark a { padding: 11px 20px; white-space: normal; }
}
/*-------------------------------------------------------------------------
Page one, dry-eye section. Rebuilt to the PSD: white ground, the figure
in an outlined card, the symptom list as two columns of outlined chips,
and a full-width prompt bar with the test CTA.
-------------------------------------------------------------------------*/
.plexr-dry { margin-bottom: 90px; padding: 20px 0 0 0; background: #fff; }
/*-- heading: the first line carries the weight, the second runs smaller --*/
.plexr-dry-head { margin: 0 0 28px 0; padding: 0; text-align: left;
font: 700 225% 'Libre Baskerville', serif; line-height: 1.25; color: #000; }
.plexr-dry-head:before { display: none; }
.plexr-dry-head span { display: block; margin-top: 6px; font-size: 68%; font-weight: 400; }
/*-- the figure card --*/
.plexr-dry-card { padding: 34px 36px 30px 36px; border: 1px solid #0b7eff;
border-radius: 16px; background: #fff; }
.plexr-dry .plexr-bignum { margin: 0 0 18px 0; color: #0b7eff; font-size: 92px; }
.plexr-dry .plexr-bignum span { font-size: 72%; }
.plexr-dry-card p { color: #000; }
.plexr-dry-card .plexr-ref { margin: 22px 0 0 0; }
/*-- symptom chips, two to a row --*/
.plexr-dry-lede { margin-bottom: 18px; }
/* laid out as flex rows rather than CSS columns: the two chips that share a row
then stretch to the same height, which is how the PSD draws them --*/
.plexr-dry-list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -7px; padding: 0; list-style: none; }
.plexr-dry-list li { display: -ms-flexbox; display: flex; position: relative;
-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; margin: 0 0 14px 0; padding: 0 7px; }
.plexr-dry-list li span { display: block; width: 100%; padding: 12px 16px 12px 32px;
border: 1px solid #cfe4ff; border-radius: 8px; font-size: 18px; line-height: 24px; }
.plexr-dry-list li span:before { content: ""; position: absolute; left: 24px; top: 21px;
width: 7px; height: 7px; border-radius: 50%; background: #0b7eff; }
/*-- prompt bar --*/
.plexr-dry-cta { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center;
margin-top: 45px; padding: 22px 30px; border: 1px solid #cfe4ff; border-radius: 14px;
background: #eaf4ff; }
.plexr-dry-cta-icon { -ms-flex: 0 0 54px; flex: 0 0 54px; width: 54px; height: 54px; margin-right: 22px;
border-radius: 50%; background: #d4e7ff; color: #0b7eff; font-size: 22px; text-align: center;
line-height: 54px; }
.plexr-dry-cta-text { -ms-flex: 1 1 auto; flex: 1 1 auto; padding-right: 30px;
border-right: 1px solid #b9d7ff; }
.plexr-dry-cta-text p { margin: 0; font-size: 18px; line-height: 26px; }
/* the question itself is the bigger of the two lines --*/
.plexr-dry-cta-text p + p { margin-top: 4px; font-size: 22px; line-height: 30px; }
.plexr-dry-cta-text p strong { color: #000; }
.plexr-dry-cta-btn { -ms-flex: 0 0 auto; flex: 0 0 auto; padding-left: 30px;
display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
/* the CTA uses the site's own button: same gradient, radius and tracking --*/
.plexr-dry-cta-btn a { display: -ms-inline-flexbox; display: inline-flex;
-ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center;
min-height: 48px; padding: 12px 40px; border: 0; border-radius: 30px;
background-color: #1D79D5; background-image: linear-gradient(to right, #1D79D5, #02368D);
color: #fff; font-weight: 700; font-size: 87.5%; letter-spacing: 2px;
text-transform: uppercase; white-space: nowrap; text-decoration: none; text-align: center;
-webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
.plexr-dry-cta-btn a:hover { background-image: none; background-color: #1d79d5;
color: #fff; text-decoration: none; }
@media (max-width: 991.98px) {
.plexr-dry .plexr-bignum { font-size: 72px; }
.plexr-dry-cta { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.plexr-dry-cta-text { padding-right: 0; border-right: 0; }
.plexr-dry-cta-btn { width: 100%; margin-top: 18px; padding-left: 0; }
}
@media (max-width: 767.98px) {
.plexr-dry { margin-bottom: 50px; }
.plexr-dry-head { font-size: 175%; }
.plexr-dry-card { margin-bottom: 30px; padding: 26px 22px; }
.plexr-dry .plexr-bignum { font-size: 62px; }
.plexr-dry-list li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
.plexr-card-img:before { padding-top: 75%; }
.plexr-dry-cta { padding: 20px; }
.plexr-dry-cta-icon { -ms-flex: 0 0 44px; flex: 0 0 44px; width: 44px; height: 44px;
margin-right: 16px; font-size: 18px; line-height: 44px; }
}
/*-------------------------------------------------------------------------
Page one, clinical-evidence section, rebuilt to the PSD: white ground,
a row of small figure tiles, then four grey study cards.
-------------------------------------------------------------------------*/
.plexr-evi2 { margin-bottom: 90px; }
.plexr-evi2 h2 { margin-bottom: 18px; text-align: left; }
.plexr-evi2 h2:before { margin: 0; }
.plexr-evi2-lede { margin-bottom: 16px; font-style: italic; font-size: 93.75%; color: #5c5c5c; }
.plexr-evi2 .it-image img { width: 100%; display: block; border-radius: 4px; }
/*-- the three figure tiles --*/
.plexr-evi2-tiles { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -6px 22px -6px; }
.plexr-evi2-tile { -ms-flex: 1 1 0; flex: 1 1 0; margin: 0 6px; padding: 18px 16px;
border-radius: 6px; background: #eaf4ff; }
.plexr-evi2-tile p { margin: 0; font-size: 18px; line-height: 24px; }
.plexr-evi2-ico { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center;
align-items: center; -ms-flex-pack: center; justify-content: center; width: 34px; height: 34px;
margin-bottom: 12px; border-radius: 50%; background: #d4e7ff; color: #0b7eff; font-size: 14px; }
/* in the tiles the PSD draws a larger, outlined disc rather than a filled one --*/
.plexr-evi2-tile .plexr-evi2-ico { width: 44px; height: 44px; margin-bottom: 14px;
border: 1px solid #cfe0f2; background: #fff; font-size: 19px; }
/*-- the four study cards --*/
.plexr-evi2-grid { margin-top: 40px; }
.plexr-evi2-grid > [class*="col-"] { margin-bottom: 30px; }
/* the cards in a row are the same height, so making each one a column and pushing
the link down aligns every card's button on the same line --*/
.plexr-evi2-card { display: -ms-flexbox; display: flex; -ms-flex-direction: column;
flex-direction: column; height: 100%; padding: 32px 34px; border-radius: 12px; background: #f0f0f0; }
/* the icon sits in the heading's first line and the wrapped lines hang under the
text, so the 34px disc plus its 12px gap becomes a negative first-line indent --*/
.plexr-evi2-card h3 { margin: 0 0 18px 0; padding: 0 0 0 46px; text-indent: -46px;
font: 700 24px 'Barlow', sans-serif; color: #000; line-height: 1.3; }
.plexr-evi2-card h3:before { display: none; }
.plexr-evi2-card h3 .plexr-evi2-ico { margin: 0 12px 0 0; text-indent: 0; vertical-align: middle;
background: #deedfc; font-size: 17px; }
.plexr-evi2-h3num { font-size: 30px !important; }
.plexr-evi2-h3num em { display: block; margin-top: 2px; padding-left: 0; text-indent: 0;
font-style: normal; font-size: 18px; }
.plexr-evi2-card p { font-size: 18px; line-height: 26px; }
.plexr-evi2-note { font-size: 18px; line-height: 26px; color: #5c5c5c; }
.plexr-evi2-card .plexr-ref { margin: auto 0 0 0; padding-top: 22px; }
/*-- the three-up figures inside the first card --*/
.plexr-evi2-figs { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -5px 16px -5px; }
.plexr-evi2-fig { -ms-flex: 1 1 0; flex: 1 1 0; margin: 0 5px; padding: 16px 13px;
border: 0; border-radius: 8px; background: #00103e; }
/* only the label above the reading is the block; the arrow inside the reading
must stay inline --*/
.plexr-evi2-fig > span { display: block; font-size: 18px; line-height: 24px; color: #fff; }
/* the two readings and the arrow stay on one line, as in the PSD --*/
.plexr-evi2-fig strong { display: block; margin-top: 5px; font-size: 20px; line-height: 26px;
white-space: nowrap; color: #fff; }
/* the PSD sets the arrow between the two readings in the link blue --*/
.plexr-evi2-arrow { display: inline; color: #5e9bf0; }
/*-- the highlighted inset --*/
.plexr-evi2-inset { margin: 18px 0; padding: 22px 24px; border-radius: 8px; background: #00103e; }
.plexr-evi2-inset p { margin: 0; font-size: 18px; line-height: 26px; color: #fff; }
.plexr-evi2-inset p + p { margin-top: 16px; }
.plexr-evi2-inset strong { color: #fff; }
.plexr-evi2-check { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center;
align-items: center; -ms-flex-pack: center; justify-content: center; float: left;
width: 34px; height: 34px; margin: 0 16px 0 0; border-radius: 50%; background: #16305f;
color: #7fb4f7; font-size: 19px; }
@media (max-width: 991.98px) {
.plexr-evi2-tile { -ms-flex: 0 0 100%; flex: 0 0 100%; margin-bottom: 10px; }
.plexr-evi2-fig { -ms-flex: 0 0 100%; flex: 0 0 100%; margin-bottom: 10px; }
}
@media (max-width: 767.98px) {
.plexr-evi2 { margin-bottom: 50px; }
.plexr-evi2 .it-image { margin-bottom: 30px; }
.plexr-evi2-card { padding: 24px 22px; }
.plexr-evi2-h3num { font-size: 26px !important; }
}
/*-- the two Mr Hamada photo sections share one light-grey ground --*/
.plexr-hamada-band { padding: 70px 0; background: #f0f0f0; }
/* the pair reads as one grey ground, so the 90px gap custom.css puts between
image-text sections moves inside the band as padding --*/
.plexr-hamada-band { margin-bottom: 0; }
.plexr-hamada-band + .plexr-hamada-band { padding-top: 0; }
.plexr-hamada-band-end { margin-bottom: 90px; }
@media (max-width: 991.98px) {
.plexr-safety-cols .col-md-4 { margin-bottom: 30px; }
.plexr-safety-cols .col-md-4:last-child { margin-bottom: 0; }
}
@media (max-width: 767.98px) {
.plexr-safety h2 { margin-bottom: 30px; }
/* custom.css forces every p left on mobile, so the centred link needs to say so
again with the same weight --*/
.plexr-safety .plexr-safety-link { margin-top: 30px; text-align: center !important; }
}
/*-- fee banner: white card on a grey band. Left half carries the heading and the
price chip, right half the confirmation note and the booking button, with the
two secondary buttons centred underneath. Shared by all three PLEXR pages --*/
.plexr-fees { margin-bottom: 90px; padding: 70px 0 60px 0; background: #ededed; }
.plexr-fees-flush { margin-bottom: 0 !important; }
.plexr-fees-card { padding: 45px 50px; border-radius: 18px; background: #fff; }
/* no rule above this heading inside the card --*/
.plexr-fees-left h2 { margin-bottom: 28px; padding-top: 0; text-align: left; }
.plexr-fees-left h2:before { display: none; }
.plexr-fees-price { display: block; margin: 0; padding: 16px 22px; background: #eef4ff;
color: #101010; font-size: 18px; line-height: 26px; }
.plexr-fees-price strong { color: #101010; }
.plexr-fees-right h3 { margin: 0 0 18px 0; padding: 0;
font: 700 22px 'Barlow', sans-serif; line-height: 1.3; color: #3c7cd9; }
.plexr-fees-right h3:before { display: none; }
.plexr-fees-right p { margin-bottom: 26px; font-size: 18px; line-height: 26px; color: #101010; }
.plexr-fees-right .btn-area { margin: 0; }
/* the two secondary buttons sit under the card --*/
.plexr-fees-btns { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
-ms-flex-pack: center; justify-content: center; margin-top: 30px; }
.plexr-fees-btns a { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center;
align-items: center; -ms-flex-pack: center; justify-content: center; min-height: 50px;
margin: 0 8px 12px 8px; padding: 12px 40px; border-radius: 30px; font-weight: 700;
font-size: 100%; letter-spacing: 2px; line-height: 1.25; text-transform: uppercase;
text-decoration: none; }
.plexr-fees-ghost { border: 1px solid #101010; background: transparent; color: #101010; }
.plexr-fees-ghost:hover, .plexr-fees-ghost:focus { border-color: #000935; background: #000935;
color: #fff; }
@media (min-width: 768px) {
/* a hairline divides the two halves, with the same 45px either side of it --*/
.plexr-fees-left { position: relative; padding-right: 45px; }
.plexr-fees-left:after { content: ""; position: absolute; top: 6px; bottom: 6px; right: 0;
width: 1px; background: #c9c9c9; }
.plexr-fees-right { padding-left: 45px; }
}
@media (max-width: 991.98px) {
.plexr-fees { padding: 50px 0 44px 0; }
.plexr-fees-card { padding: 32px 30px; }
}
@media (max-width: 767.98px) {
.plexr-fees { margin-bottom: 50px; }
.plexr-fees-card { padding: 24px 22px; }
.plexr-fees-right { margin-top: 28px; }
.plexr-fees-btns a { -ms-flex: 0 0 100%; flex: 0 0 100%; margin-left: 0; margin-right: 0; }
}
@media (min-width: 768px) {
.plexr2-panel-imgleft .plexr2-img { -ms-flex: 0 0 auto; flex: 0 0 auto; }
.plexr2-panel-imgleft .plexr2-img picture { height: auto; }
.plexr2-panel-imgleft .plexr2-img img { height: auto; object-fit: contain; }
}
@media (max-width: 767.98px) {
.plexr2-factcard { padding: 24px 22px; }
.plexr2-fact { font-size: 112.5%; }
.plexr2-ping-lower { margin-top: 30px; }
.plexr2-ping-lower .plexr2-img { margin-bottom: 25px; }
.plexr2-panel-imgleft .plexr2-img { margin-top: 0; margin-bottom: 25px; }
}
@media (max-width: 767.98px) {
.plexr2-stat3 { -ms-flex: 0 0 100%; flex: 0 0 100%; margin-bottom: 12px; }
.plexr2-lede-box { padding: 16px 18px; }
}
/*-- photographs the PSD flips horizontally --*/
.plexr-mirror-img img,
.plexr-mirror .it-image img { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
@media (max-width: 767.98px) {
.plexr-strip { padding: 16px 18px 18px 18px; }
.plexr-strip .plexr-strip-list li { -ms-flex: 0 0 100%; flex: 0 0 100%;
padding: 6px 0 !important; font-size: 19px !important; }
.plexr-strip .plexr-strip-list li + li:before { display: none !important; }
}
/*==========================================================================
PAGE ONE TYPE SCALE, taken from Plexr Plus 1.psd (canvas 1366px, so the
PSD's pixel values map 1:1 to CSS pixels). Scoped to page one only -
pages two and three have their own PSDs.
========================================================================*/
@media (min-width: 992px) {
/* section headings: 40/55, except the two the PSD sets at 32 --*/
/* content sections only - the hero form's "Get in Touch" and the shared
Finance / Location bands keep the site's own heading size --*/
.plexr-page:not(.plexr2-page) .main-content h2,
.plexr-page:not(.plexr2-page) .image-text-section h2,
.plexr-page:not(.plexr2-page) .plexr-cards h2,
.plexr-page:not(.plexr2-page) .plexr-fees h2 { font-size: 40px; line-height: 55px; }
.plexr-page:not(.plexr2-page) .plexr-safety h2,
.plexr-page:not(.plexr2-page) .plexr-evi2 h2 { font-size: 32px; line-height: 44px; }
.plexr-page:not(.plexr2-page) .plexr-dry-head { font-size: 40px; line-height: 55px; }
.plexr-page:not(.plexr2-page) .plexr-dry-head span { font-size: 24px; line-height: 34px; }
/* card and FAQ headings --*/
.plexr-page:not(.plexr2-page) .plexr-card-body h3 { font-size: 27px; line-height: 36px; }
.plexr-page:not(.plexr2-page) .grey-boxe h3 { font-size: 27px; line-height: 34px; }
/* body copy is 18/23 throughout --*/
.plexr-page:not(.plexr2-page) .main-content p,
.plexr-page:not(.plexr2-page) .it-content p,
.plexr-page:not(.plexr2-page) .plexr-card-body p,
.plexr-page:not(.plexr2-page) .grey-boxe p,
.plexr-page:not(.plexr2-page) .plexr-safety-cols p { font-size: 18px; line-height: 23px; }
.plexr-page:not(.plexr2-page) .plexr-intro .plexr-lede { font-size: 22px; line-height: 42px; }
/* the safety columns: 22 bold headings over 18/23 copy --*/
.plexr-page:not(.plexr2-page) .plexr-safety-cols h3 { font-size: 22px; line-height: 23px; }
/* the evidence block --*/
.plexr-page:not(.plexr2-page) .plexr-evi2-lede { font-size: 18px; }
.plexr-page:not(.plexr2-page) .plexr-evi2-tile p { font-size: 16px; line-height: 23px; }
.plexr-page:not(.plexr2-page) .plexr-evi2-h3num { font-size: 36px !important; line-height: 44px; }
.plexr-page:not(.plexr2-page) .plexr-evi2-h3num em { font-size: 20px; line-height: 26px; }
.plexr-page:not(.plexr2-page) .plexr-evi2-fig strong { font-size: 22px; line-height: 28px; }
.plexr-page:not(.plexr2-page) .plexr-evi2-note { font-size: 16px; line-height: 23px; }
/* the 32.1% figure --*/
.plexr-page:not(.plexr2-page) .plexr-dry .plexr-bignum { font-size: 120px; line-height: 1; }
/* the fee card --*/
.plexr-page:not(.plexr2-page) .plexr-fees-right h3 { font-size: 24px; line-height: 31px; }
.plexr-page:not(.plexr2-page) .plexr-fees-right p,
.plexr-page:not(.plexr2-page) .plexr-fees-price { font-size: 18px; line-height: 23px; }
}
/*-- Page one, spacing taken straight off Plexr Plus 1.psd (canvas 1366) --*/
@media (min-width: 992px) {
/* the short rule above a heading is 56x4 in the PSD, not the site's 70x2 --*/
.plexr-page:not(.plexr2-page) .main-content h2:before,
.plexr-page:not(.plexr2-page) .image-text-section h2:before,
.plexr-page:not(.plexr2-page) .plexr-cards h2:before,
.plexr-page:not(.plexr2-page) .plexr-safety h2:before,
.plexr-page:not(.plexr2-page) .plexr-evi2 h2:before { width: 56px; height: 2px; }
/* title -> review credit -> question: 13px, then the rule, then 22px --*/
.plexr-page:not(.plexr2-page) .plexr-intro h2 { margin-bottom: 0; }
.plexr-page:not(.plexr2-page) .plexr-intro .medically-reviewed { margin: 13px auto 0 auto; }
.plexr-page:not(.plexr2-page) .plexr-intro .plexr-subhead { position: relative;
margin-top: 46px; padding-top: 26px; }
.plexr-page:not(.plexr2-page) .plexr-intro .plexr-subhead:before { content: "";
position: absolute; left: 0; top: 0; width: 56px; height: 2px; background: #000; }
/* the rule beside the answer line is 5px wide here, 3px elsewhere, and always
stands a little taller than the text --*/
.plexr-page:not(.plexr2-page) .plexr-intro .plexr-lede:before { top: 4px; bottom: 4px;
width: 3px; }
.plexr-page:not(.plexr2-page) .plexr-intro .plexr-sub { margin-top: 28px; }
/* the claims strip is 757x112 and sits on the text's left edge --*/
.plexr-page:not(.plexr2-page) .plexr-strip { width: 757px; margin-left: 0;
margin-right: auto; padding: 21px 24px 28px 24px; }
.plexr-page:not(.plexr2-page) .plexr-strip .plexr-strip-label { margin-bottom: 12px; }
.plexr-page:not(.plexr2-page) .plexr-intro .btn-area { margin-top: 19px; }
}
@media (min-width: 992px) {
/* the PSD sets no tracking on the strip, which is what keeps all three claims
on one row inside the 757px panel; its dividers are 4x38 --*/
.plexr-page:not(.plexr2-page) .plexr-strip .plexr-strip-list li { padding: 0 26px !important;
letter-spacing: 0; }
.plexr-page:not(.plexr2-page) .plexr-strip .plexr-strip-list li + li:before { top: auto;
bottom: auto; width: 2px; height: 38px; margin-top: -5px; }
/* the heading column is 490px wide in the PSD, which is what breaks it over three
lines with "treat?" on the last one --*/
.plexr-page:not(.plexr2-page) .plexr-cards-intro h2 { max-width: 490px; margin-bottom: 18px; }
}
/* inside the ruled line must not synthesise a heavier weight --*/
.plexr-bar strong { font-weight: 700; }
/* the rules in front of a bold line stand 4px above and below it --*/
.plexr-bar:before { top: -4px; bottom: -4px; }
/* the closing quote carries the PSD's thicker rule --*/
.plexr-pullbox:before { width: 3px; }
.plexr-pullbox { padding-left: 28px; }
/*-- the PSD puts the symptom list on a navy card: plain bullets, two columns,
white type - not the pale chips we had --*/
.plexr-dry-syms { padding: 34px 36px 30px 36px; border-radius: 12px; background: #00103e; }
.plexr-dry-syms .plexr-dry-lede { margin-bottom: 22px; color: #fff; }
.plexr-dry-syms .plexr-dry-lede strong { color: #fff; }
.plexr-dry-syms .plexr-dry-list li span { padding: 0 0 0 20px; border: 0; background: none;
color: #fff; }
.plexr-dry-syms .plexr-dry-list li span:before { left: 0; top: 10px; background: #4c9ae6; }
.plexr-dry-syms .plexr-dry-list li { margin-bottom: 20px; }
/* the prompt bar is outlined in the PSD --*/
.plexr-dry-cta { border: 1px solid #cfe4ff; }
/* the per-cent sign sits close to the digits in the PSD --*/
.plexr-dry .plexr-bignum span { font-size: 80%; }
/*-- Page one intro, aligned to the PSD: the title runs the full container on one
line, everything under it sits in a 757px column centred on the page --*/
@media (min-width: 992px) {
.plexr-page:not(.plexr2-page) .plexr-intro .content > *:not(h2):not(.medically-reviewed) {
max-width: 757px; margin-left: auto; margin-right: auto; }
.plexr-page:not(.plexr2-page) .plexr-intro .content > p { margin-bottom: 23px; }
.plexr-page:not(.plexr2-page) .plexr-intro .plexr-lede { padding-left: 27px; }
.plexr-page:not(.plexr2-page) .plexr-intro .plexr-strip { width: 757px; margin-left: auto;
margin-right: auto; }
/* the three claims share the strip, each centred in its own share of the width --*/
.plexr-page:not(.plexr2-page) .plexr-strip .plexr-strip-list { -ms-flex-wrap: nowrap;
flex-wrap: nowrap; }
.plexr-page:not(.plexr2-page) .plexr-strip .plexr-strip-list li { -ms-flex: 1 1 auto;
flex: 1 1 auto; padding: 0 12px !important; }
/* the review credit is a narrower 675px block, and the question sits close on
top of its answer line --*/
.plexr-page:not(.plexr2-page) .plexr-intro .medically-reviewed { max-width: 675px; }
.plexr-page:not(.plexr2-page) .plexr-intro .plexr-subhead { margin-bottom: 5px; }
}
/*-- dry-eye block split into a heading row and a card row, so the opening line
sits beside the title and both cards share a top and a bottom (PSD) --*/
.plexr-dry-top { margin-bottom: 30px; }
.plexr-dry-top .plexr-dry-head { margin-bottom: 0; }
.plexr-dry-intro { margin: 0; }
@media (min-width: 768px) {
.plexr-dry-top { -ms-flex-align: end; align-items: flex-end; }
.plexr-dry-intro { padding-bottom: 8px; }
.plexr-dry-cards { -ms-flex-align: stretch; align-items: stretch; }
.plexr-dry-cards .plexr-dry-card,
.plexr-dry-cards .plexr-dry-syms { height: 100%; }
}
@media (max-width: 767.98px) {
.plexr-dry-intro { margin-top: 18px; }
.plexr-dry-cards .plexr-dry-syms { margin-top: 25px; }
}
/*-- the six condition cards: Fede asked for every photo at a fixed 475px, which
replaces the 110% floor that left too much white space under shorter copy --*/
@media (min-width: 768px) {
.plexr-card .row { -ms-flex-align: center; align-items: center; }
.plexr-card-img { height: 475px; }
.plexr-card-img:before { display: none; }
.plexr-card-body { height: auto; }
}
/*-- fee card: the booking button sits on the left under the copy, as in the PSD --*/
.plexr-fees-right .btn-area { text-align: left !important; }
/*-- page one lists read at the same 18/23 as the copy around them --*/
@media (min-width: 992px) {
.plexr-page:not(.plexr2-page) .it-content ul li { font-size: 18px; line-height: 23px; }
}
/*-- the closing pull quotes are 24px in the PSD - the 18/23 copy rule above
outranks the base .plexr-pull size, so restate it at the same weight --*/
@media (min-width: 1200px) {
.plexr-page:not(.plexr2-page) .it-content p.plexr-pull,
.plexr-page:not(.plexr2-page) .main-content p.plexr-pull { font-size: 24px; line-height: 1.4; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.plexr-page:not(.plexr2-page) .it-content p.plexr-pull,
.plexr-page:not(.plexr2-page) .main-content p.plexr-pull { font-size: 20px; line-height: 1.4; }
}
/*-- the two closing-quote bands: 50px between photo and copy, as on pages two and three --*/
@media (min-width: 768px) {
.plexr-quote-row > [class*="col-"] { padding-left: 25px; padding-right: 25px; }
}
/*-- Page two intro, to the PSD: a two-line 40/55 title, the italic review credit,
then a ruled serif question, the blue-ruled bold lede and the 18/23 copy, all
in a 745px column centred under the title --*/
@media (min-width: 992px) {
.plexr2-page .plexr-intro h2 { margin-bottom: 0; font-size: 40px; line-height: 55px; }
.plexr2-page .plexr-intro h2:before { width: 56px; height: 2px; }
.plexr2-page .plexr-intro .content > *:not(h2):not(.medically-reviewed) {
max-width: 745px; margin-left: auto; margin-right: auto; }
.plexr2-page .plexr-intro .medically-reviewed { max-width: 710px; margin: -3px auto 0 auto;
font-size: 16px; line-height: 23px; }
.plexr2-page .plexr-intro .plexr-subhead { position: relative; margin-top: 45px;
margin-bottom: 13px; padding-top: 22px; font-size: 30px; line-height: 35px; }
.plexr2-page .plexr-intro .plexr-subhead:before { content: ""; position: absolute; left: 0;
top: 0; width: 56px; height: 2px; background: #000; }
.plexr2-page .plexr-intro .plexr-lede { margin-bottom: 23px; padding-left: 30px;
font-size: 22px; line-height: 27px; }
.plexr2-page .plexr-intro .plexr-lede:before { top: -2px; bottom: -2px; width: 3px; }
.plexr2-page .plexr-intro .content > p:not(.plexr-lede):not(.medically-reviewed) {
margin-bottom: 23px; font-size: 18px; line-height: 23px; }
.plexr2-page .plexr-intro .btn-area { margin-top: 73px; }
}
/*-- Page two, "Can PLEXR Plus treat conjunctivochalasis?": the page's usual 50/50 row
(same width as the research card below it), copy centred beside the photo
with a 40/55 title, the blue-ruled bold answer line and 18/22 copy --*/
/* every bold answer line under a question heading on this page carries the same
blue rule: 3px, standing 5px above and below the text so the text sits centred
on it, and 25px clear of the heading --*/
.plexr2-page .plexr2-bar-lede { margin-top: 25px; padding: 5px 0 5px 30px; }
.plexr2-page .plexr2-bar-lede:before { top: 0; bottom: 0; width: 3px; }
@media (min-width: 1200px) {
.plexr2-page .plexr2-cc h2 { margin-top: -1px; margin-bottom: 0; padding-top: 24px; font-size: 40px;
line-height: 55px; }
.plexr2-page .plexr2-cc h2:before { width: 56px; height: 2px; }
.plexr2-page .plexr2-cc .it-content p { margin-bottom: 22px;
font-size: 18px; line-height: 21.6px; }
.plexr2-page .plexr2-cc .it-content p.plexr2-bar-lede { margin-bottom: 18px; }
.plexr2-page .plexr2-cc .it-content p:last-child { margin-bottom: 0; }
}
/*-- page two: 50px between photo and copy everywhere - the white panels and the
research card used Bootstrap's 30px gutter, so their copy sat out of line with
the rows above them --*/
@media (min-width: 768px) {
.plexr2-page .plexr2-panel > .row,
.plexr2-page .plexr2-navycard > .row { margin-left: -25px; margin-right: -25px; }
.plexr2-page .plexr2-panel > .row > [class*="col-"],
.plexr2-page .plexr2-navycard > .row > [class*="col-"] { padding-left: 25px;
padding-right: 25px; }
/* the slit-lamp portrait stopped short of its column, leaving a wider gap --*/
.plexr2-page .plexr2-fill .it-image img { width: 100%; height: auto; }
}
/*-- page two "Clinical Evidence" cards (cyst and concretions): a small centred
label over a navy card holding three figures, each with a pale icon disc, a
30px bold figure and a 20px line, divided by thin rules --*/
.plexr2-ev-label { margin: 50px 0 18px 0 !important; color: #00103b !important;
font: 400 18px/24px 'Barlow', sans-serif !important; letter-spacing: .5px;
text-align: center !important; }
.plexr2-ev { display: -ms-flexbox; display: flex; padding: 26px 0 38px 0; border-radius: 14px;
background: #020933; }
.plexr2-ev-item { -ms-flex: 0 0 30.4%; flex: 0 0 30.4%; padding-left: 3.8%; }
.plexr2-ev-item + .plexr2-ev-item { -ms-flex: 0 0 34.6%; flex: 0 0 34.6%; padding-left: 8.8%;
border-left: 2px solid #5c6178; }
.plexr2-ev-item + .plexr2-ev-item + .plexr2-ev-item { -ms-flex: 1 1 0%; flex: 1 1 0%;
padding-left: 5.9%; }
.plexr2-ev-ico { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center;
-ms-flex-pack: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 12px;
border-radius: 50%; background: #e9f2f9; color: #3c6cf2; font-size: 28px; }
.plexr2-ev-item strong { display: block; margin-bottom: 3px; color: #fff;
font: 700 29px/36px 'Barlow', sans-serif; }
.plexr2-ev-txt { display: block; color: #fff; font: 400 20px/28px 'Barlow', sans-serif;
letter-spacing: 0; }
@media (min-width: 768px) and (max-width: 1199.98px) {
.plexr2-ev-item strong { font-size: 26px; line-height: 32px; }
.plexr2-ev-txt { font-size: 17px; line-height: 24px; }
.plexr2-ev-item, .plexr2-ev-item + .plexr2-ev-item,
.plexr2-ev-item + .plexr2-ev-item + .plexr2-ev-item { -ms-flex: 1 1 0%; flex: 1 1 0%;
padding-left: 30px; padding-right: 10px; }
}
@media (max-width: 767.98px) {
.plexr2-ev-label { margin-top: 35px !important; }
.plexr2-ev { -ms-flex-direction: column; flex-direction: column; padding: 10px 24px; }
.plexr2-ev-item, .plexr2-ev-item + .plexr2-ev-item,
.plexr2-ev-item + .plexr2-ev-item + .plexr2-ev-item { -ms-flex: 1 1 auto; flex: 1 1 auto;
padding: 20px 0; }
.plexr2-ev-item + .plexr2-ev-item { border-left: 0; border-top: 1px solid #5c6178; }
.plexr2-ev-item strong { font-size: 26px; line-height: 32px; }
.plexr2-ev-txt { font-size: 18px; line-height: 26px; }
}
/* a ruled line set between two paragraphs gets more air above and below it --*/
.plexr2-page .plexr2-bar-mid { margin-top: 40px !important; margin-bottom: 40px !important; }
/*-- page two closing quote: the page-one quote block (blue rule, icon disc, serif
line), but the longer question wraps over three lines at 26px --*/
.plexr2-page .plexr2-pullbox { margin-top: 55px; padding-left: 42px; }
.plexr2-page .plexr2-pullbox .plexr-pullbox-ico { width: 38px; height: 38px; margin-bottom: 18px;
font-size: 16px; }
.plexr2-page .plexr2-pullbox .plexr-pull { max-width: 495px; white-space: normal; font-size: 26px;
line-height: 1.4; }
/* the paragraph above it runs to the same narrower measure as the screenshot --*/
.plexr2-page .it-content p:has(+ .plexr2-pullbox) { max-width: 530px; }
@media (max-width: 1199.98px) {
.plexr2-page .plexr2-pullbox .plexr-pull { font-size: 22px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
.plexr2-page .plexr2-pullbox { padding-left: 28px; }
.plexr2-page .plexr2-pullbox .plexr-pull { font-size: 19px; }
}
@media (max-width: 767.98px) {
.plexr2-page .plexr2-pullbox { margin-top: 35px; padding-left: 24px; }
.plexr2-page .plexr2-pullbox .plexr-pull { font-size: 20px !important; }
}
/*-- all three PLEXR pages: body copy is 18/23 from tablet up, as in the PSDs. The
site sets bare p (and content list items) to 20px on wide screens and 18px on
laptops, so the copy changed size from section to section. These rules carry no
more weight than the site's own, so every styled line (ledes, quotes, figures,
notes) keeps its size; the shared Finance and Location bands are not touched. --*/
@media (min-width: 768px) {
:where(.plexr-page :is(.main-content, .image-text-section, .grey-section, .grey-boxe,
[class*="plexr"])) p {
font-size: 18px; line-height: 23px; }
.plexr-page .image-text-section .it-content ul li:not(.plexr-strip-list li),
.plexr-page .main-content .content ul li:not(.plexr-strip-list li) { font-size: 18px;
line-height: 23px; }
}
/* two lines that had been set a step smaller on tablet and phone --*/
.plexr-page .plexr-safety-cols p { font-size: 18px; line-height: 23px; }
.plexr-page .plexr-evi2-lede { font-size: 18px; }
/*-- Page three intro, to its PSD: the page-two intro layout (it shares the
.plexr2-page body class), with the copy set left rather than centred and the
page's own spacing between the question, the answer line, the copy and button --*/
.plexr3-page .plexr-intro .content > p:not(.medically-reviewed) { text-align: left; }
.plexr3-page .plexr-intro .content > p.medically-reviewed { text-align: center !important; }
@media (min-width: 992px) {
.plexr3-page .plexr-intro h2 { padding-top: 21px; }
.plexr3-page .plexr-intro .medically-reviewed { margin-top: 3px; margin-bottom: 0; }
.plexr3-page .plexr-intro .plexr-subhead { margin-top: 44px; margin-bottom: 11px; }
.plexr3-page .plexr-intro .plexr-lede { margin-top: 0; margin-bottom: 24px; }
.plexr3-page .plexr-intro .content > *:not(h2):not(.medically-reviewed) { max-width: 750px; }
.plexr3-page .plexr-intro .btn-area { margin-top: 24px; }
}
/*-- page three "A streamlined approach to treatment": navy heading over a ruled
answer line and the copy, with the photo cropped to the height of the text --*/
.plexr3-statement h2 { color: #000935; }
@media (min-width: 768px) {
.plexr3-statement .row { -ms-flex-align: stretch; align-items: stretch; }
.plexr3-statement .global-cell { vertical-align: top; }
.plexr3-statement .row > [class*="col-"] { padding-top: 0 !important;
padding-bottom: 0 !important; }
.plexr3-statement .plexr2-img, .plexr3-statement .plexr2-img picture { display: block;
height: 100%; margin: 0; }
.plexr3-statement .plexr2-img img { width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 1200px) {
.plexr3-statement h2 { margin-top: 0; margin-bottom: 0; }
.plexr3-statement .plexr2-bar-lede { max-width: 470px; margin-top: 40px; margin-bottom: 30px; }
.plexr3-statement .it-content p:not(.plexr2-bar-lede) { max-width: 505px; }
.plexr3-statement .it-content p:not(.plexr2-bar-lede) { line-height: 26px; }
.plexr3-statement .btn-area { margin-top: 24px; }
}
/*-- page three two-row panels (chalazion, ectropion): two rows - copy beside the eyelid photo, then the
second photo beside the closing copy. Both photos are 450px tall with the copy
centred against them; the heading runs on one line without the short rule --*/
.plexr3-tworow h3 { padding-top: 0; }
.plexr3-tworow h3:before { display: none; }
@media (min-width: 768px) {
.plexr2-page .plexr3-tworow > .row { -ms-flex-align: center; align-items: center; }
.plexr2-page .plexr3-tworow > .row + .row { margin-top: 26px; }
.plexr3-tworow .plexr2-img { -ms-flex: none; flex: none; height: 450px; margin: 0; }
.plexr3-tworow .plexr2-img picture { display: block; height: 100%; }
.plexr3-tworow .plexr2-img img { width: 100%; height: 100%; object-fit: cover;
object-position: left center; border-radius: 14px; }
}
@media (min-width: 1200px) {
.plexr3-tworow h3 { font-size: 26px; line-height: 34px; }
.plexr3-tworow p:not(.plexr2-bar-lede) { max-width: 460px; }
}
@media (max-width: 767.98px) {
.plexr3-tworow > .row + .row { margin-top: 25px; }
}
/*-- page three image panels (naevi, vascular lesions, syringomas): the
photo is a fixed 475px tall and the copy is centred against it, so a short text
no longer leaves a tall photo with empty space beside it --*/
@media (min-width: 768px) {
.plexr2-page .plexr3-panels .plexr2-panel-img:not(.plexr3-tworow) > .row {
-ms-flex-align: center; align-items: center; }
.plexr3-panels .plexr2-panel-img:not(.plexr3-tworow) .plexr2-img { -ms-flex: none;
flex: none; height: 475px; margin: 0; }
.plexr3-panels .plexr2-panel-img:not(.plexr3-tworow) .plexr2-img picture {
display: block; height: 100%; }
.plexr3-panels .plexr2-panel-img:not(.plexr3-tworow) .plexr2-img img { width: 100%;
height: 100%; object-fit: cover; }
}
/*-- page three "Why does assessment matter": the two-row layout on a light grey
band - navy heading and ruled answer beside Mr Hamada, then the patient photo
beside the closing copy and the booking button --*/
.plexr3-assess { margin-bottom: 90px; padding: 52px 0; background: #ededed; }
.plexr3-assess h2 { margin: 0; padding: 0; color: #000935; text-align: left; }
.plexr3-assess h2:before { display: none; }
.plexr3-assess .btn-area { margin-top: 28px; text-align: left; }
.plexr3-assess .plexr2-img img { object-position: center; }
.plexr3-assess .row:first-child .plexr2-img img { object-position: center top; }
/* same 50px photo-to-copy gap as the rest of the page --*/
@media (min-width: 768px) {
.plexr3-assess .container { padding-left: 25px; padding-right: 25px; }
.plexr3-assess .plexr3-tworow > .row { margin-left: -25px; margin-right: -25px; }
.plexr3-assess .plexr3-tworow > .row > [class*="col-"] { padding-left: 25px;
padding-right: 25px; }
}
@media (min-width: 1200px) {
.plexr3-assess .container { max-width: 1220px; }
.plexr3-assess h2 { font-size: 34px; line-height: 46px; white-space: nowrap; }
.plexr3-assess .plexr3-tworow p:not(.plexr2-bar-lede) { max-width: 500px; line-height: 24px; }
}
@media (max-width: 767.98px) {
.plexr3-assess { margin-bottom: 50px; padding: 35px 0; }
.plexr3-assess .plexr2-img { margin-top: 25px; }
}
/*-- page three "Could PLEXR Plus be appropriate for me?": the closing line becomes
the page-two quote block, three lines at 24px --*/
.plexr2-page .plexr3-pullbox { margin-top: 45px; }
.plexr2-page .plexr3-pullbox .plexr-pull { max-width: 470px; font-size: 24px; line-height: 1.35; }
@media (min-width: 1200px) {
.plexr3-appropriate .it-content p:not(.plexr-pull) { max-width: 500px; }
}
/*-- surgical-comparison section, to the latest mock-up: the answer sits in a pale
blue box, the photo is a fixed 410px with the heading centred beside it, both
lists are single-column white cards with a fine blue edge, and the closing
banner has a blue outline and a larger icon disc --*/
.plexr3-lede-box { margin: 0 !important; padding: 18px 30px; border-radius: 10px;
background: #ecf4fe; color: #000; }
.plexr3-lede-box strong { display: block; max-width: 470px; }
.plexr3-compare h2 { margin-bottom: 30px; }
.plexr3-ccard { border: 1px solid #c8e0fc; border-radius: 4px; padding: 30px 20px 28px 20px; }
.plexr3-ccard h3 { margin-bottom: 26px; }
.plexr3-ccard .plexr3-clist li { margin-bottom: 19px; padding-left: 34px; }
.plexr3-ccard .plexr3-clist li:before { left: 8px; }
.plexr3-ccard .plexr3-clist { max-width: 480px; }
.plexr3-compare-cards { margin-top: 24px; }
.plexr3-aim { margin-top: 20px; padding: 20px 48px; border: 1px solid #367cf6; border-radius: 16px;
background: #ecf4fe; }
.plexr3-aim-ico { -ms-flex: 0 0 80px; flex: 0 0 80px; width: 80px; height: 80px; margin-right: 36px;
background: #e2ecfb; color: #1f4fa8; font-size: 32px; }
.plexr3-aim-text p strong { font-size: 24px; line-height: 32px; }
@media (min-width: 768px) {
.plexr3-compare > .container > .row:first-child { -ms-flex-align: center; align-items: center; }
.plexr3-compare .plexr2-img,
.plexr3-compare .plexr2-img picture { height: 410px; }
.plexr3-compare .plexr2-img img { width: 100%; }
.plexr3-compare > .container > .row { margin-left: -25px; margin-right: -25px; }
.plexr3-compare > .container > .row > [class*="col-"] { padding-left: 25px; padding-right: 25px; }
.plexr3-compare > .container { padding-left: 25px; padding-right: 25px; }
}
@media (min-width: 1200px) {
.plexr3-compare > .container { max-width: 1320px; }
}
@media (max-width: 767.98px) {
.plexr3-lede-box { padding: 18px 20px; }
.plexr3-aim { padding: 20px; }
.plexr3-aim-ico { -ms-flex: 0 0 60px; flex: 0 0 60px; width: 60px; height: 60px; font-size: 24px; }
.plexr3-aim-text p strong { font-size: 20px; line-height: 28px; }
}
/*-- page three syringomas panel, to the mock-up: plain 26px heading, the ruled
answer, the two conditions side by side as short definitions, then a grey note --*/
.plexr3-syr h3 { padding-top: 0; }
.plexr3-syr h3:before { display: none; }
.plexr3-defs { display: -ms-flexbox; display: flex; margin-top: 24px; }
.plexr3-def { -ms-flex: 1 1 0%; flex: 1 1 0%; padding-right: 30px; }
.plexr3-def p { margin: 0 !important; }
.plexr3-def p strong { display: block; margin-bottom: 8px; }
.plexr2-panel .plexr3-note { margin-top: 30px; color: #666; }
@media (min-width: 1200px) {
.plexr3-syr h3 { max-width: 470px; margin-bottom: 0; font-size: 26px; line-height: 34px; }
.plexr3-syr .plexr2-bar-lede { max-width: 495px; }
.plexr3-syr .plexr3-note { max-width: 470px; }
.plexr3-syr .plexr3-def p { max-width: 225px; }
}
@media (max-width: 575.98px) {
.plexr3-defs { display: block; }
.plexr3-def + .plexr3-def { margin-top: 18px; }
}
/*-- page three panels: no short rule over the headings (not in the PSD) --*/
.plexr3-panels .plexr2-panel h3 { padding-top: 0; }
.plexr3-panels .plexr2-panel h3:before { display: none; }
/*-- page three blepharoplasty evidence card, to the mock-up: blue outline, italic
label at the top, larger outlined icon discs and big serif figures --*/
.plexr3-evcard { margin-top: 26px; padding: 22px 52px 44px 52px; border: 2px solid #4c7bd2;
border-radius: 14px; background: #ecf4fe; }
.plexr3-evcard-label { margin: 0 0 22px 0 !important; font-style: italic; color: #1a1a1a; }
.plexr3-evcard .plexr3-fig-ico { width: 56px; height: 56px; margin-bottom: 20px;
border: 2px solid #bbc3cd; background: #dfeaf9; color: #3a6fd8; font-size: 22px; margin-bottom: 10px; }
.plexr3-evcard .plexr3-fig strong { margin-bottom: 0; font-size: 34px; line-height: 36px; color: #101010; }
.plexr3-evcard .plexr3-fig p span { max-width: 170px; margin-top: 0; line-height: 23px; }
@media (min-width: 1200px) {
.plexr3-evcard .plexr3-fig:first-child { -ms-flex: 0 0 263px; flex: 0 0 263px; }
}
@media (max-width: 575.98px) {
.plexr3-evcard { padding: 20px 22px 24px 22px; }
.plexr3-evcard .plexr3-fig strong { font-size: 28px; line-height: 34px; }
}
/*-- page three follow-ups --*/
/* comparison answer back on the blue rule like the other answers; it keeps the
two-line measure of the mock-up --*/
.plexr3-compare .plexr3-compare-lede { max-width: 470px; }
/* "Could PLEXR Plus be appropriate for me?": the photo is at least as tall as the
copy beside it (Fede) --*/
@media (min-width: 768px) {
.plexr3-appropriate .row { -ms-flex-align: stretch; align-items: stretch; }
.plexr3-appropriate .row > [class*="col-"] { padding-top: 0 !important;
padding-bottom: 0 !important; }
.plexr3-appropriate .plexr2-img, .plexr3-appropriate .plexr2-img picture { display: block;
height: 100%; margin: 0; }
.plexr3-appropriate .plexr2-img img { width: 100%; height: 100%; object-fit: cover; }
}
/* syringomas / seborrhoeic keratoses as two pale blue cards --*/
.plexr3-defs { margin-left: -9px; margin-right: -9px; }
.plexr3-def { margin: 0 9px; padding: 20px 20px 22px 20px; border-radius: 10px; background: #e8f2fd; }
.plexr3-syr .plexr3-def p { max-width: none; }
@media (max-width: 575.98px) {
.plexr3-defs { margin-left: 0; margin-right: 0; }
.plexr3-def { margin: 0; }
}
/*-- page one symptom card: the two columns now run independently, so a long item
in one column no longer leaves a gap beside it in the other --*/
.plexr-dry-cols { display: -ms-flexbox; display: flex; }
.plexr-dry-cols .plexr-dry-list { display: block; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0;
margin: 0; }
/* a 24px gutter keeps a long item in the first column off the second one --*/
.plexr-dry-cols .plexr-dry-list + .plexr-dry-list { margin-left: 24px; }
.plexr-dry-cols .plexr-dry-list li { padding-left: 0; padding-right: 0; }
.plexr-dry-cols .plexr-dry-list li { display: block; max-width: 100%; }
@media (max-width: 767.98px) {
.plexr-dry-cols { display: block; }
.plexr-dry-cols .plexr-dry-list + .plexr-dry-list { margin-left: 0; }
}
/*-- one "Clinical evidence" label on all three PLEXR pages, in the page-three style:
18px Barlow italic, regular weight, grey, sentence case. On page two the
label sits over the navy card, so it lines up with the first figure in it --*/
.plexr-page .plexr-evi2-lede,
.plexr-page .plexr2-ev-label,
.plexr-page .plexr3-evcard-label { font: italic 400 18px/24px 'Barlow', sans-serif !important;
letter-spacing: 0 !important; color: #6a6a6a !important; }
.plexr-page .plexr2-ev-label { padding-left: 3.8%; text-align: left !important; }
@media (max-width: 767.98px) {
.plexr-page .plexr2-ev-label { padding-left: 24px; }
}
/*-- the remaining 16px copy on the PLEXR pages goes up to 18px: the medically-
reviewed credit and, on page one, the evidence tiles and their notes --*/
.plexr-page .plexr-intro .medically-reviewed { font-size: 18px !important; line-height: 24px !important; }
.plexr-page .plexr-evi2-tile p,
.plexr-page .plexr-evi2-note { font-size: 18px !important; line-height: 24px !important; }
/*-- buttons matched to the site's BOOK A CONSULTATION (filled) and the fee banner's
VIEW OUR PRICING (outlined): 16px bold capitals, 2px tracking, 12px 40px, 30px
radius. Filled buttons take the site gradient; outlined ones a 1px line --*/
.plexr-page .plexr-dry-cta-btn a,
.plexr-page .plexr2-band-btns a,
.plexr2-page .btn-read { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center;
align-items: center; -ms-flex-pack: center; justify-content: center; min-height: 50px;
padding: 12px 40px; border-radius: 30px; font-weight: 700; font-size: 16px;
letter-spacing: 2px; line-height: 1.25; text-transform: uppercase; text-decoration: none; }
.plexr-page .plexr2-btn-fill { border: 0; background-color: #1D79D5;
background-image: linear-gradient(to right, #1D79D5, #02368D); color: #fff; }
.plexr-page .plexr2-btn-fill:hover, .plexr-page .plexr2-btn-fill:focus { background-image: none;
background-color: #1d79d5; color: #fff; }
.plexr-page .plexr2-btn-ghost { border: 1px solid #fff; background: transparent; color: #fff; }
.plexr2-page .btn-read { border: 1px solid #101010; background: transparent; color: #101010; }
.plexr2-page .btn-read:hover, .plexr2-page .btn-read:focus { border-color: #000935;
background: #000935; color: #fff; }
@media (max-width: 575.98px) {
.plexr-page .plexr2-band-btns a, .plexr2-page .btn-read { padding: 12px 24px; }
}
/*-- PLEXR pages on a phone: every content heading (and its short rule) reads from
the left, and the review credit sits close under the page title. The hero,
the enquiry form and the shared Finance / Location bands are left alone --*/
@media (max-width: 767.98px) {
.plexr-page :is(.main-content, .image-text-section, .grey-section, [class*="plexr"]) :is(h2, h3) {
text-align: left !important; }
.plexr-page :is(.main-content, .image-text-section, .grey-section, [class*="plexr"]) h2:before,
.plexr-page :is(.main-content, .image-text-section, .grey-section, [class*="plexr"]) h3:before {
left: 0 !important; right: auto !important; margin: 0 !important; }
.plexr-page .plexr-intro h2 { margin-bottom: 12px !important; }
.plexr-page .plexr-intro .medically-reviewed { margin-top: 0 !important; text-align: left !important; }
.plexr-page.plexr3-page .plexr-intro .content > p.medically-reviewed { text-align: left !important; }
}
/*-- closing quotes on a phone: 20px on all three pages, icon and text from the
left (the site centres .it-content on small screens) --*/
@media (max-width: 767.98px) {
.plexr-page .plexr-pullbox { text-align: left !important; }
.plexr-page .plexr-pullbox .plexr-pull { font-size: 20px !important; line-height: 1.35 !important;
text-align: left !important; }
}
/*-- phone gaps: a photo stacked straight under copy (the pinguecula panel, and the
punctal row that ends on its outlined button) gets room above it --*/
@media (max-width: 767.98px) {
.plexr2-page .plexr2-panel-imgleft .plexr2-img { margin-top: 25px !important; }
.plexr2-page [class*="col-"]:has(.btn-read) + [class*="col-"] .plexr2-img { margin-top: 30px !important; }
}